curso de diseño web y diseño gráfico

Curso de diseño web y diseño gráfico en la Casa de la Cultura de Torrejón de Ardoz y el Centro Cultural Sanchinarro

Mi consejo es que un alumno que se matricula en uno de mis cursos de diseño web, diseño de blogs, redes sociales e internet, community manager o ecommerce, debería matricularse también en el curso de diseño gráfico, pues ambos se complementan.

Vamos a verlo con la...

historia de un proyecto:

AUTOMATISMOS KV

Miriam, una alumna del curso de diseño web de la Casa de la Cultura de Torrejón de Ardoz, es junto con su marido una pareja de emprendedores, jóvenes empresarios que tienen una empresa de automatismos en Torrejón de Ardoz. Miriam se matriculó para tener su web y mantenerla.




Al final del curso me pidió que le diseñase la página web y la imagen corporativa de forma que pudiese ella misma encargarse de su mantenimiento y desarrollo con lo aprendido durante el curso.

Puesto que el curso de diseño web de la Casa de la Cultura de Torrejón de Ardoz fue sobre html5 y css3, así se la hice. Quizás, con otro planteamiento, podíamos haber elegido un Wordpress, o algunos elementos cargarlos con includes de PHP, pero Miriam hizo un curso de iniciación, por lo que así le planteé la página.

La primera actualización que quiere intentar es añadir un proyecto nuevo a la web (yo se la entregué con 2 proyectos y ella va a publicar el tercer proyecto).

Me manda las fotos para que le haga 2 pequeños tutoriales de forma que ella se los guarda para poder trabajar. En este caso yo los planteo como ejemplos de la forma de trabajar de los cursos y los subo al blog.

Puesto que todo esto surge de un alumno... comparto esta experiencia don el resto de los alumnos mediante el blog.

Lo primero que tiene que hacer es preparar las imágenes para la web. Esta tarea la trabajamos en los cursos de diseño gráfico. En el curso de diseño gráfico del Centro Cultural de Sanchinarro trabajamos con programas Adobe, en el curso de diseño gráfico de la Casa de la Cultura de Torrejón de Ardoz trabajamos con software libre, por lo que este tutorial lo construyo sobre con GIMP, software libre, un programa de retoque de imagen que sería el equivalente a Photoshop en la suite Adobe.

DESCARGAR GIMP

Lo primero que haremos es usar Firebub, un complemento del navegador Firefox, confirmar el tamaño de las imágenes del proyecto y sus nombres, así como las carpetas donde se alojan.

Firebub es un complemento del navegador Firefox que usamos continuamente durante todos los cursos... Vamos, que si un alumno sale sin saber manejarlo es que yo no  valgo para esto... es broma :)

INSTALAR FIREBUG EN MOZILLA FIREFOX

Cuando ya sé los tamaños, elijo 3 fotos de la obra (parece que es una puerta automática) y las abro en Gimp para preparar las imágenes para la web.

Al igual que Photoshop, Gimp tiene excelentes herramientas de retoque de imagen. En este caso yo sólo voy a aplicar Estirar HSV (yo lo tengo en inglés, pero en la versión española creo que es así), una corrección automática a la imagen.

No me extiendo demasiado porque esto no es un tutorial sobre GIMP, si no un ejemplo de cómo intento que las clases sean prácticas, incorporando continuamente todos los encargos profesionales que me salen. Otra cosa no, pero con todos mis traspiés, lo que vais a trabajar en estos cursos es el día a día de un diseñador... 

En este caso, nos situamos sobre la imagen y con el botón derecho Colores > Auto > Estirar HSV

A continuación escalo la imagen para adaptarla al ancho de la imagen en la página web.

Imagen > Escalar imagen

En las opciones de la herramienta busco la anchura de la imagen ( 299px) y veo que me sobra altura, si tomo como referencia las imágenes de la web. Pero como en este caso el formato apaisado no les favorece, las dejaré a los 399px de altura que me marca la escala proporcional. Para que la escala sea proporcional el icono de las cadenas, a la derecha de los campos de anchura y altura deberá estar activado.

Si quisiese retocar la altura, manteniendo la anchura, después de escalar usaría la herramienta recortar. Pero en este caso no lo voy a hacer. Dejo alguna captura de la herramienta para que la veáis, pero no la uso.

Ya tengo las imágenes. Es el momento de exportarlas con el comando Archivo > Exportar cómo que me exportará un archivo jpg (en este caso, ya que podría exportar en otros formatos). 

Exportamos, NO guardamos. Si guardamos tendríamos un archivo .xcf, que es el equivalente al .psd de Photoshop, pero eso es algo que veremos en los cursos de diseño gráfico.

Ya están nuestros 3 jpg en una carpeta. Ahora es buena práctica optimizarlos para la web, es decir, comprimirlos para que nuestra página cargue más rápido desde nuestro servidor remoto.

En Photoshop tenemos una opción específica para ello, pero eso lo vemos en los cursos del centro Cultural de Sanchinarro. En la Casa de la Cultura de Torrejón de Ardoz trabajamos con software libre (aunque tambiébe tenéis acceso a las áreas privadas de Photoshop).

En la Casa de la Cultura de Torrejón de Ardoz vemos varios programas para optimizar imágenes para la web. Yo aquí uso ImageOptim. 

DESCARGAR IMAGEOPTIM

Su uso es muy sencillo, arrastramos las imágenes y dejamos que ImageOptim haga su trabajo.

Como GIMP ya nos exportó las imágenes en jpg, no hay mucha compresión, pero fijaos en la siguiente captura, donde he optimizado las capturas de pantalla con las que he ido haciendo este tutorial. Podéis ver que hay compresiones de casi el 50%, lo cual está muy bien.

Estos días haré un par de tutoriales más en los que muestro cómo montar este proyecto en la web, y otro en el muestro cómo subir el resultado de nuestro ordenador al servidor con un programa de FTP como Filezilla.

Podéis comentar lo que queráis a través de formacion@rpa-project.com o comentando esta entrada.

Saludos.