Objetivo del trabajo
Conocer más a fondo las herramientas de los programas Ilustrador y Photoshop para emplearlas en el diseño de una pagina web, como modificar el tamaño de imágenes en distintos casos.
Se inicio con el programa de Ilustrador, sobre una mesa de trabajo de 1170 x 1180 pixeles, en la cual se colocaron rectángulos de distintos tamaños donde mas adelante colocamos imágenes en sus respectivas zonas, que esto se logro con la ayuda de Photoshop, que fue ahí donde se modificaron las medidas indicadas.
Agregando cierta información.
La primera con una medida de 1170 x 400 y las 4 finales de 270 x 270, se exportaron en un formato de png y finalmente se colocaron en en la zona asignada, de esta manera fue tomando forma nuestro diseño de página web.
Segunda parte
Como una segunda parte, se trabajo creando con el mismo tamaño de las imágenes correspondientes a las medidas de 270 x 270 pixeles, y del mismo tipo(o las mismas) con las herramientas de Photoshop creando un nuevo aspecto de estas quitando el fondo y dejando un color sólido, para ello se realizo algo como lo siguiente
En un archivo de photoshop, se inicio a trabajar con la imágenes a modificar.
En este caso, las herramientas utilizadas fueron; en un inicio la pluma, para comenzar con la selección de lo que queremos rescatar(puede parecer un poco tedioso).
Se trabajo también con la opción de canales, en el cual al seleccionar esta, te brinda varias opciones, en este caso el primero que se escogió fue el rojo, duplicando así este mismo canal y trabajando con este, dejando solo este visualizado.
Enseguida, con la opción de curvas, modificar los valores de entrada y salida, creando una mascara a blanco negro(que es como en este paso quedaría nuestra imagen).
Con la herramienta pincel se fue rellenando los espacios para nuestro recorte, para después para un mejor resultado, con la ayuda de la herramienta sobre exponer pasar sobre las zonas a rescatar.
La varita mágica utilizada y de ayuda para quitar los excesos o lo que deseábamos quitar, seleccionando así las zonas a eliminar.
Ya quedando la imagen sin el fondo, en la parte inferior donde se muestran las capas, daremos a la opción de color uniforme, dejado en valor de R: 175 G: 175 B:175, dejando como nuestro fondo un color gris.
Así como aplicar una sombra paralela.
En este caso se decidió aplicar el mismo estilo de capa para nuestras 4 imágenes, por lo que se copio y pego el mismo estilo de esta.
Fue este el resultado de las imágenes
Ademas de que este nuestra opción de diseño, se coloco un recuadro gris con una opacidad del 50% para dar una mejor vista a nuestras imágenes de 1170 x 400 pixeles.
Existen distintas maneras de realizar el trabajo como este, en este caso estas fueron unas opciones con las que se trabajo.
Visualización Web
En esta parte del trabajo se realizo las distintas vistas de nuestro sitio web, ya sea para una computadora, tableta y finalmente celular.
Como inicio, y tomando las medidas que ya se tenian y con la ayuda de las lineas guías, se comenzó a trabajar para la visualización del diseño en tableta, cabe mencionar que las lineas guías durante todo este proceso ha sido de ayuda para una mejor proporción de nuestra pantalla.
Para el diseño de la tableta, se tomaron como aproximado la mitad de las medidas del diseño para computadora, acomodando la información debidamente su sitio.
Es de esta manera, como queda nuestra visualización para diseño de tableta.
Para el diseño de celular, se extendieron un poco las medidas , a manera de que quedara un menú desplegable y se visualizaran una por una cada imagen, colocando de manera estética cada elemento.
Como resultado final, se obtuvieron estos 3 diseños, que cómo se menciono anteriormente, serán destinados para computadora, tableta y celular.
Diseños Entradas para Páginas web
En este punto del trabajo hicimos un nuevo desgloce de los diseños para la página web, en el cual se realizado la visualización igualmente para computadora, tableta y celular. Quedando cada una como a continuación se presenta.
Cabe mencionar que el diseño de este es basado en una entrada(como si se se abriera la página)
Diana Ponce 