Photoshop 101: una introducción para desarrolladores web

Introducción

A menudo, cuando trabajamos como desarrollador web, necesitamos integrar plantillas. Pueden ser de Photoshop u otro software. En este artículo, veremos los conceptos básicos de Photoshop para desarrolladores web.

Este contenido fue escrito inicialmente para un taller para DAMDigital London.

Adobe Photoshop es un software de edición de gráficos de trama, lo que significa que es un programa que permite a los usuarios crear y editar imágenes.

Fue lanzado en 1988 y se ha convertido en el estándar de la industria para software de gráficos.

Puede descargar una versión de prueba gratuita de Photoshop en el sitio web de Adobe.

Espacio de trabajo

El espacio de trabajo de Photoshop es modular, por lo que puede adaptarlo según el trabajo que esté realizando. Algunos espacios de trabajo predeterminados ya están configurados en Photoshop. En este artículo, estoy usando Graphic and Webuno. Para cambiar a este espacio de trabajo, ingrese Window/workspace/Graphic and Web.

Echemos un vistazo a nuestro espacio de trabajo:

  • A - Barra de menú : aquí es donde encontrará la mayoría de las opciones de Photoshop.
  • B - Barra de opciones : esta barra le dará todas las opciones para la herramienta actualmente seleccionada.
  • C - Caja de herramientas : este panel contiene todas las herramientas disponibles de Photoshop. Las herramientas relacionadas están agrupadas y puede hacer clic prolongadamente en una de ellas para ver todas las herramientas.
  • D - Paneles : Es la zona en la que usted tiene sus paneles básicas abiertas, como Layers, Historyy así sucesivamente. Para abrir un panel, simplemente ingreseWindow/(Panel that you want to open)

Crea un archivo nuevo

Al crear un nuevo archivo en Photoshop, primero necesita saber para qué medio se usará el diseño, es decir, ¿se usará para una pantalla (web, película o video) o para imprimir?

Según la respuesta a esta pregunta, deberá cambiar el valor de PPI (píxeles por pulgada).

Píxeles por pulgada (PPI) es una medida que se utiliza para definir la resolución de la pantalla de una computadora. Esta métrica evalúa la calidad de la imagen / imagen que un dispositivo informático o de visualización de salida en particular puede mostrar. Los píxeles por pulgada también se conocen como densidad de píxeles. Techopedia

Para imprimir, normalmente necesita 300PPI, pero en realidad depende de la impresora y del tamaño del documento impreso. También debe cambiar su color a CMYK, pero nuevamente eso depende de cómo imprima su documento. Si desea obtener más información sobre los colores RGB y CMYK, consulte este artículo.

¿Para pantallas y web ?, necesita 72PPI y color RGB. Luego, debe especificar el tamaño de su pantalla. Recomendaría diseñar primero para dispositivos móviles, luego tabletas y computadoras de escritorio.

Como desarrollador web, es posible que no necesite crear un archivo nuevo. Lo más probable es que deba trabajar con un diseño proporcionado por diseñadores web.

Ahora veremos una .psdplantilla existente y trabajaremos con ella para echar un vistazo a Photoshop.

Puede descargar y abrir esta plantilla PSD de Luis Costa.

Capas

Una de las características principales de Photoshop son las capas . Las capas son como una pila de hojas y puede ver a través de áreas transparentes o áreas con poca opacidad (parcialmente transparentes).

Puede abrir el panel de capas en formato Window/Layers.

La capa superior de este panel se colocará sobre todas las demás capas inferiores. Las capas también se pueden organizar en carpetas. Es importante nombrar correctamente las capas y carpetas. Eso ayudará durante la integración.

Junto a cada carpeta y capa, tiene un icono de ojo. Esto le permite alternar su visibilidad.

Su PSD puede tener muchas capas y documentos. Una forma de encontrar rápidamente una capa es seleccionar el archivo move tool (v). Haga clic derecho en el lienzo donde desea encontrar su capa. Obtendrá todas las capas en el área donde hizo clic derecho. Al hacer clic en uno, seleccionará esta capa en su panel de capas.

Caja de herramientas

Photoshop viene con una gran cantidad de herramientas. Te voy a mostrar algunos útiles que te ayudarán.

Primero, si acaba de instalar Photoshop CC 2018, deberá restaurar todas las herramientas. Así que vaya a la Edit > Toolbarra y haga clic en el botón Restaurar valores predeterminados.

Veremos algunas de las herramientas más útiles que usaría para integrar una plantilla:

A - Herramientas de selección

  • Mover : permite al usuario mover una capa por el lienzo. Como vimos anteriormente, también se puede usar para encontrar una capa si hace clic derecho en su lienzo.
  • Marquesina rectangular : esta herramienta se utiliza para seleccionar un área del lienzo para copiar y pegar, rellenarlo, etc. También se puede utilizar para medir. Cuando termine su selección, puede encontrar el tamaño del área seleccionada en Window/Info. Es posible que deba cambiar la unidad predeterminada en Photoshop y Edit/preferences/general/Unit & Rulersluego establecer sus unidades en píxeles.

B - Herramientas de recorte y corte

  • Recortar : Esta herramienta puede… ¿recortar una imagen ?. En la configuración de la herramienta (barra de opciones), puede establecer una relación de aspecto que desee mantener.

C - Herramientas de medición

  • Cuentagotas : el cuentagotas le permite obtener rápidamente una referencia de color en su diseño. Simplemente haga clic donde desee el color. Luego, en la parte inferior de su caja de herramientas, el color de primer plano cambiará al color seleccionado. Si hace clic en el color de primer plano, se abrirá el archivo color picker window. A partir de ahí puedes obtener el valor de tu color.
  • Muestrario de color : al integrar su diseño, es posible que deba seleccionar varios colores. Vamos a utilizar la ventana de información nuevamente Window/Info. Esta herramienta nos permite crear una muestra de color. Simplemente haga clic en el área de la imagen de la que desea obtener los colores. Obtendrá cada color en el panel de información. Puede cambiar el tipo de color a web haciendo clic en el icono Cuentagotas debajo del número.
  • Regla : te ayuda a medir tu plantilla. Toda la información aparecerá en su ventana de información. Mantenga Shiftal medir, para que su regla se mantenga recta. También puedes obtener ángulos.

G - Herramienta de navegación

  • Mano : esta herramienta le ayuda a moverse por el lienzo. Puede acceder a esta herramienta en cualquier momento manteniendo presionada la barra espaciadora y arrastrándola con el mouse.
  • Zoom : te permite acercar y alejar (puedes Ctrl+ +o Ctrl+ -también).

Guías

Como habrás notado al abrir nuestro archivo PSD, tenemos algunas líneas verdes en nuestra plantilla. Son guías. Básicamente son ayudantes que te ayudarán a construir o medir cosas alrededor de tu lienzo.

Puede mover las guías existentes utilizando el move tool(v).

Para crear nuevas guías, deberá abrir su regla: View/Rulero Ctrl+ R. La regla aparecerá en su espacio de trabajo. Luego, desde la regla, puede arrastrar una nueva guía a su lienzo.

Para quitar una guía, use la move tool(v) y vuelva a colocar la guía en la regla.

Para ocultar y mostrar todas sus guías, puede usar Ctrl+ Ho ir a View/Extras.

Objetos inteligentes

¿Qué son los objetos inteligentes?

Los objetos inteligentes son capas que contienen datos de imagen de imágenes rasterizadas o vectoriales, como archivos de Photoshop o Illustrator. Los objetos inteligentes conservan el contenido de origen de una imagen con todas sus características originales, lo que le permite realizar ediciones no destructivas en la capa. Adobe

Los objetos inteligentes se pueden reconocer en sus capas cuando tienen el siguiente icono en sus miniaturas:

Los objetos inteligentes son realmente útiles si trabaja con imágenes de tipo vectorial (SVG, EPS, AI), pero también son útiles con otros archivos ráster complejos.

Intentemos importar un objeto inteligente a nuestro PSD. Descargue un archivo SVG de flaticon. Para importar nuestro SVG en nuestro lienzo, simplemente arrastre el archivo al lienzo. Ahora podemos editar nuestro SVG en Illustrator, o cualquier otro software de vectores, haciendo doble clic en la miniatura o en nuestro objeto inteligente. Los cambios aparecerán en nuestro PSD.

Sin embargo, los objetos inteligentes pueden hacer mucho más que eso. Si desea obtener más información sobre ellos, consulte 10 cosas que necesita saber sobre los objetos inteligentes en Photoshop.

Exportar activos

Primero, solo un recordatorio de que Photoshop es un software rasterizado , no un software vectorial . Esto significa que "no podemos" exportar archivos SVG desde Photoshop. Para hacerlo, necesitará exportar este tipo de archivos desde Illustrator o Inkscape, por ejemplo.

En la web, queremos tener archivos de imágenes ligeros. Para fotografía, usaríamos un .jpgarchivo comprimido . Si necesita usar transparencia (canal alfa), usaríamos .pngfile. Para una imagen animada, usaríamos un .gif. Si necesita una imagen vectorial (iconos, por ejemplo) lo mejor es exportar su archivo como .svg. Si desea obtener más información sobre todos los archivos disponibles en Photoshop, puede consultar los "formatos de archivo" en el sitio web de Adobe.

Exportar nuestro lienzo

Para exportar el lienzo, simplemente siga estos pasos:

  1. Ir File/Export/Save for Web
  2. Elegir formato de archivo
  3. Elige el tamaño de la imagen
  4. Elija la calidad
  5. Salvar

Exportar solo un activo del lienzo

Probablemente necesitará exportar algunos activos de su plantilla.

Exportemos la flecha izquierda en el carrusel de productos:

Usando la herramienta de movimiento, vamos a encontrar nuestra capa. Haga clic derecho en la flecha y seleccione la capa Arrow Left. Ahora simplemente haga clic derecho en esta capa en el panel de capas. Seleccione export asy seleccione el tipo de archivo que necesita.

También podemos exportar carpetas.

Comportamiento

¿Qué es una acción en Photoshop?

Una acción es una serie de tareas que se reproducen en un solo archivo o en un lote de archivos: comandos de menú, opciones del panel, acciones de herramientas, etc. Por ejemplo, puede crear una acción que cambie el tamaño de una imagen, aplique un efecto a la imagen y luego guarde el archivo en el formato deseado. Adobe

¡Esta función es realmente conveniente si desea cambiar el tamaño de un lote de imágenes para la web!

Creemos una nueva acción para recortar una imagen y exportar esta:

  1. Descarga un montón de imágenes de //unsplash.com/
  2. Abre una de esas imágenes
  3. Abra el Actionspanel Window/Actions,
  4. Cree una nueva acción haciendo clic en el icono Crear una nueva acción (la que está a la izquierda del icono de la papelera). Vamos a nombrar esta acción Exportar para web: nombre del cliente.
  5. Ahora estamos registrando nuestra acción. El botón de grabación será rojo y puede detener la grabación haciendo clic en el ícono de detener (ícono cuadrado a la izquierda) /
  6. Seleccione el icono de recorte y establezca la proporción en 1x1 y recorte la imagen /
  7. Ahora queremos exportar nuestra imagen File/Export/Save for Web, seleccionar JPG, calidad 50% y ancho 500px.
  8. Haga clic en guardar y elija su carpeta de destino.
  9. Cierra tu imagen sin guardarla.
  10. Para detener la grabación, haga clic en el icono de detener (icono cuadrado a la izquierda).

Ahora tenemos nuestra acción, por lo que podemos abrir una imagen y simplemente "reproducir" nuestra acción haciendo clic en el botón de reproducción.

Si queremos aplicar nuestra acción a un lote de imágenes, simplemente siga estos pasos:

  1. Ir File/Automate/Batch
  2. Seleccione la Sourcecarpeta.
  3. Seleccione nuestra acción
  4. Haga clic en Ok

¡Y voilá! Todas sus imágenes están en la carpeta de exportación.

Espero que hayas disfrutado de esta pequeña introducción a Photoshop 101 para desarrolladores web. Si quieres tener una versión 102, déjame saber qué te gustaría saber o leer más.

  • @vince_umo
  • vincent-humeau.com