¿CÓMO TRABAJAMOS LA WEB?

Con esta entrada, lo que pretendemos es que podáis entender como hemos trabajado, paso por paso, para crear la web. Os enseñaremos cómo hemos creado a nuestro profesor,y así podréis entender mínimamente cómo ha sido nuestro trabajo:

El primer paso a seguir, fue buscar una imagen de un profesor en google. La que encontramos es ésta:

Tras ésto, y con el programa Illustrator  hemos realizado los siguientes pasos:

1. Vectorizar la imagen.
2. Desagruparla.
3. Expandirla.
4. Eliminar la capa de vectores de fuera, ya que el fondo o cosas que no forman parte exclusivamente de la imagen no nos interesan.
5. Seleccionamos todo, creamos un grupo de pintura interactiva para colorearlo. 
6. Coloreamos todo como queremos.
7. Agrupamos todo de nuevo.
8. Escalamos la imagen, al tamaño deseado.
9. Optimizamos la imagen.       El resultado ha sido el siguiente:

Imagen 1

Después  con el programa Photoshop, optimizamos la imagen para que al subirla a internet tenga el tamaño idóneo y su carga sea inmediata; lo que queremos es conseguir  la relación perfecta entre tamaño de imagen y resolución, para que en la web todo vaya de forma rápida y fluida. Además pasamos la imagen a escala de grises, para así cuando el usuario de la web, pase el ratón por encima del profesor, la imagen se oscurezca. Y le retiramos las letras de debajo de sus pies. 

 El resultado es el siguiente:

Imagen 2

Ya con el programa Dreamweaver  utilizamos una opción que nos da el programa para que suceda lo que nosotros queremos, que es que al pasar el cursor por la imagen, se ponga oscura; es decir, al pasar el ratón por la imagen 1, aparezca la imagen 2. 

Tras esto, le vinculamos a la imagen, la Guía Didáctica de la web, que es lo que queremos que se descargue, cuando el profesor haga clic en él. 

En resumen, con cada imagen tenemos que realizar ocho pasos mínimos antes de subirla a la web:

1. Vectorizarla
2. Colorear
3. Escalar al tamaño deseado (al que va a ir en la web)
4. Optimizar la imagen para la web
5. Copiar la imagen (con el tamaño definitivo)
6. Pegarlo en Photoshop y cambiarle el color (en este caso, escala de grises)
7. Optimizar la escala de grises
8. Con Dreamweaver, creamos un comportamiento específico para esas imágenes para cuando el usuario deslice el ratón se cambie de una imagen a otra.