En la clase de hoy vemos Photoshop para diseño web: Optimizar imágenes, fotos de productos, cabeceras de redes sociales e incluso creación de logos.
8.1 - Optimización web
Bien, empecemos pues por lo más importante que debemos tener el cuenta. La optimización de imágenes para la web. Ya sabemos que Google valora mucho la velocidad de carga de una web para su posicionamiento. Y además sabemos que cuanto más rápidas van las webs, mayor es su tasa de conversión.
El gran problema de las imágenes es que pesan mucho más que el texto. Y eso afecta el rendimiento de una web. Así que debemos asegurarnos que tenemos una relación calidad tamaño óptima, para no tener "exceso de peso" innecesario. Vamos a ver como lograrlo sin perder ni pizca de calidad.
Así de fácil. Ya veis como Photoshop nos facilita mucho este proceso y que el resultado es estupendo. Pero como siempre, no deberíamos fiarnos de los ajustes que van por defecto, porque en la mayoría de ocasiones no serán los mejores. Ya veis como ajustándolos correctamente hemos conseguido una imagen mucho más liviana con la misma calidad.
Y ahora que ya tenemos optimizadas las imágenes para nuestra web, llega el momento de preparar las imágenes para otras web. Concretamente, para las redes sociales.
8.2 - Crear cabeceras para redes sociales
La apariencia de nuestros perfiles y páginas en redes sociales, sean las que sean estas, es un factor clave. Es nuestra "tarjeta de presentación", y la imagen de nuestra empresa o producto. Así que vamos a ver cómo hacer algo impactante.
Ya lo veis. No hay ningún secreto, simplemente una buena composición de imágenes encima de la plantilla correspondiente, y podremos tener una cabecera profesional en pocos minutos.
En este caso lo hemos hecho para YouTube, pero recordad que os podéis descargar los archivos con las texturas, plantillas y efectos a través del enlace que hay debajo del vídeo. Así podréis avanzar mucho más rápido.
8.3 - Especial mosaico Facebook
Aparte de las cabeceras, en algunas ocasiones nos encontraremos con algunas particularidades en ciertas redes sociales. Es el caso de los mosaicos en Facebook, que nos permiten juntar varias imágenes para crea una panorámica.
Vamos a ver cómo hacerlo de una forma muy fácil, y de una forma aún más fácil, gracias a una acción que os hemos dejado preparada para todos, y que os podéis descargar debajo del vídeo.
¡Ya lo tenéis! Un mosaico de 3 imágenes que forman una sola. Lo podéis usar tanto para productos, como hemos visto en el primer ejemplo, como para paisajes o composiciones originales. Así que probadlo vosotros mismos. Imaginación al poder :)
8.4 - Creación de logo retro
Hasta el momento hemos visto cómo tratar imágenes. ¿Pero qué ocurre si queremos crear una desde cero? Ese es el caso de los logos. Vamos a ver como crear un logo que represente la imagen de nuestra empresa o producto de principio a fin.
¡Y listos! Ya tenemos logo :) Fijémonos que en este video, aparte de haber creado el logo de los cupcakes, también hemos repasado la mayoría de los conceptos vistos hasta el momento y hemos visto algunos nuevos, como la expansión y contracción de selecciones, algunos nuevos shortcuts de teclado, o el truquillo de Google images, entre otros.
8.5 - Creación de logo moderno
Bien, pues ahora que ya tenemos el logo retro, vamos a por el moderno. Una vez más, la gracia está en repasar todo lo visto, aprender un poco más, y ver qué herramientas, técnicas y consejos podemos usar en la creación de logos.
Y ya lo tenemos. Hemos hecho un logo moderno en el que remos tocado temas de capas, distorsiones, filtros, efectos, agrupaciones, duplicaciones, etc. Y hemos visto nuevas técnicas para hacer los mismos resultados, en este caso, para hacer sombras y otros efectos.
Una vez más: Lo importante aquí no es el logo en sí, sino aprender el máximo de técnicas para lograr ciertos efectos. Está muy bien saber lo que hace cada herramienta, pero si luego no sabemos cómo aplicarlas, nos servirá de poco. En cambio, si vemos muchas aplicaciones reales empezaremos a pillarle el truquillo. Así pues, vamos a por el tercer y último log.
8.6 - Creación de logo 3D
No hay dos sin tres. Hemos visto un logo retro y uno de moderno. Vamos ahora a ver un logo 3D, estilo futurista. Trabajaremos con formas, pluma, efectos y relieves, para hacer nuestra creación, y ver algunas técnicas más, como por ejemplo el licuado.
Ya lo veis. Sólo creando formas, recortándolas correctamente y aplicando ciertos efectos y superposición de capas, podemos lograr resultados muy profesionales.
Como decimos en el vídeo, aquí la clave está en probar y experimentar: Learning by doing. Probad todo lo que queráis, imaginación al poder. Así y sólo así es como mejoraréis.
8.7 - Optimizar fotos para productos de eCommerce
Y después de esta trilogía de logos, en la que hemos repasado algunas técnicas y aprendido algunas otras, toca pasar página para ver una última utilidad que irá como anillo al dedo a todos los que tengáis un eCommerce: Optimizar las fotos para productos de eCommerce. ¡Allá vamos!
¿Veis la diferencia? Un vídeo completísimo en el que hemos recortado, duplicado, volteado, jugado con capas, creado una luz de contra, sombras, desenfoques, reflejos y capas de ajustes. ¿Resultado final? Una estupenda foto para nuestro eCommerce, y un exhaustivo repaso de todo lo que hemos aprendido.
O sea que ya tenéis deberes. Bajaros la imagen que podéis encontrar debajo del vídeo, o cualquier otra que queráis, y aplicad todo lo que hemos aprendido hoy :)
En fin, pues aquí finalizamos esta clase tan completa y cargada de contenido. Y ya lo sabéis: Para cualquier duda, pregunta o sugerencia, contactad a través del formulario de soporte de la Intranet y estaremos encantados de atenderos. Nos vemos en la siguiente clase. Hasta entonces... ¡Muy buenos días!
Todos los capítulos de este curso:
- Curso de Photoshop #1: Introducción
- Curso de Photoshop #2: Primeros pasos
- Curso de Photoshop #3: Herramientas de pintura y borrado
- Curso de Photoshop #4: Capas
- Curso de Photoshop #5: Herramientas fundamentales
- Curso de Photoshop #6: Máscaras
- Curso de Photoshop #7: Aplicaciones en fotografía
- Curso de Photoshop #8: Aplicaciones en diseño web
- Curso de Photoshop #9: Finalización del archivo
- Curso de Photoshop #10: Repaso final