Preparación de archivos de Photoshop para desarrolladores web

Ya sea que sea un diseñador web independiente o parte de un equipo en una agencia, entregar archivos de Photoshop a un cliente, desarrollador, equipo de desarrollo o incluso a otro diseñador es parte del proceso de creación de sitios web.

Mientras que el proceso de desarrollo es generalmente más estructurado, por el contrario, el proceso de diseño suele ser espontáneo y lleno de experimentación. Esto puede generar una gran cantidad de capas sin usar y sin nombre que no terminan como parte del diseño final aprobado. Para los desarrolladores, examinar un atolladero de capas sin nombre (capa 1, copia de capa 1, etc.) puede resultar confuso y consumir mucho tiempo.

Los diseñadores pueden ayudar a sus homólogos o clientes antes de la entrega del diseño dedicando entre 10 y 15 minutos a preparar los archivos de manera coherente y organizada, lo que puede ahorrarles a los desarrolladores horas de tiempo de producción. Como beneficio adicional, un archivo de Photoshop organizado ahorrará tiempo a los diseñadores al minimizar las preguntas de desarrollo después de que el archivo haya sido entregado para la codificación.

1. Preparando el Archivo

Primero y ante todo, hacer una copia del archivo de Photoshop que contiene el diseño aprobado y agregar el sufijo -pinchar al nombre del archivo. De esta manera, puede reconocer un archivo de producción inmediatamente y saber que este tipo de archivo es solo para uso de desarrollo y no para refinamientos de diseño adicionales.

Guías y maquetación

Alinee correctamente y elimine las guías innecesarias del documento. Mantenga las guías al mínimo y solo separe las regiones principales del diseño al delinear bloques de contenido de la página, como el encabezado, el área de contenido, la barra lateral y el pie de página para que el desarrollador entienda qué estructura básica debe seguir la página. Mantener la cantidad de guías al mínimo también permite que el desarrollador agregue guías donde sea necesario para ayudarlos a mapear visualmente los detalles de diseño en el código, como divs anidados y menús de navegación.

Incluir una paleta de colores.

Cree un grupo de capas con su visibilidad desactivada en la parte superior del panel Capas llamado «Paleta». Rellene este grupo con capas utilizando Capa > Nueva capa de relleno > Color sólido… cuyo nombre corresponde a los elementos que se colorearán con CSS. Esto permite a los desarrolladores simplemente hacer doble clic en la miniatura de la capa para obtener la valores de color necesitan del Selector de color durante la codificación.

El grupo de capas «Paleta» agregado.

2. Navegación y estados de los botones

Durante el proceso de diseño, es fácil pasar por alto que los gráficos de navegación deben tener al menos tres estados de interacción del usuario que tendrá que ser definido en una hoja de estilo. Coloque cada estado en su propia capa y nombre esa capa para que corresponda a su función. Como ejemplo, usar lo siguiente para los nombres de capa de un elemento de navegación superior (topnav, topnav:hover, topnav:active) ayudará a establecer una convención de nomenclatura y un lenguaje comunes que tanto el diseñador como el desarrollador entiendan y reconozcan mutuamente.

Crear grupos de sprites de navegación o capas de botones o grupos de capas para asegurarse de que lo que imaginó como diseñador se ejecutará en el código. Coloque el estado predeterminado como la capa superior dentro del grupo con los estados activo y flotante debajo.

Al crear grupos de sprites, también se recomienda que un altura constante ser utilizado para todos los estados para que sea más fácil para el desarrollador calcular el background-position de los elementos al codificar el CSS.

Grupos de sprites que muestran los diferentes estados de navegación.

3. Aplanar obras de arte

El propósito de aplanar las ilustraciones es preservar el diseño aprobado y combinar elementos de múltiples capas en capas individuales que se digieren más fácilmente. Ejemplos de esto serían una capa base que se utiliza como máscara de recorte y las capas secundarias que están siendo recortadas por esa capa base, fotomontajes o un grupo de capas que componen el fondo de un sitio.

Combinar capas

Combine (Comando+E) capas y grupos de capas que no requieran más edición por parte del desarrollador. Esto no solo reduce el impacto visual del panel Capas, proporcionando una hoja de ruta más clara para el desarrollador, sino que también elimina la posibilidad de que los elementos de diseño se alteren accidentalmente durante el corte de imágenes.

fuentes

Las fuentes web seguras que se utilizan para encabezados y texto deben ser dejado como texto editable. Esto permite a los desarrolladores comprobar fácilmente el panel Carácter para ver qué valores deben aplicarse a las propiedades de fuente en la hoja de estilo.

En los casos en que se vaya a utilizar la sustitución de imágenes para elementos como la navegación o tratamientos de texto estilizado, aplanar las capas de texto en caso de que el desarrollador no tenga una fuente específica disponible. Otro método para conservar la apariencia de una fuente sería usar Capa > Texto > Convertir en forma en los casos en que el desarrollador necesite cambiar el tamaño de un tratamiento de texto.

Objetos inteligentes

Los objetos inteligentes son invaluables durante el proceso de diseño. Permiten cambiar el tamaño y el estilo con filtros inteligentes sin dejar de ser completamente editables. Sin embargo, una vez que se aprueba un diseño, estos tipos de capas deben rasterizarse o combinarse con otras capas para reducir el tamaño total del archivo, ya que los objetos inteligentes a menudo pueden contener fotos u otras ilustraciones que tienen una resolución más alta (por ejemplo, 300 ppp) que la requerida para el resultado final. de 72 ppp. Otra razón para acoplar objetos inteligentes es evitar un mensaje de error de «Archivo no encontrado» si el desarrollador hace doble clic en la miniatura de la capa de objetos inteligentes.

4. Organizando el Panel de Capas

Lo primero es lo primero, casa limpia. Esto significa eliminar las capas que estén vacías o que no se vayan a usar en el diseño final, especialmente todas las capas duplicadas que se usaron para probar ideas durante el proceso creativo. Al hacer un poco de limpieza, ya ha hecho que el archivo sea más fácil de leer.

Nombre todas las capas

Una vez que haya aplanado y fusionado todas las capas que no requerirán edición, revise y nombrar todas las capas y grupos de capas. Utilice una convención de nomenclatura que no solo sea bien reconocida, sino también común a su entorno de trabajo. Un ejemplo sería asignar nombres de capas que correspondan al CSS que se usaría para esa capa, como «botón: pasar el mouse». El punto es establecer y mantener la comunicación no verbal entre el diseñador y el desarrollador a través de prácticas y lenguaje comunes.

Usar grupos de capas

Agrupar como elementos en grupos de capas consistentes. Por ejemplo, al diseñar un tema de WordPress, sería lógico tener grupos de capas con los nombres «Encabezado», «Contenido», «Barra lateral» y «Pie de página». También es una buena práctica agrupar elementos similares que constituyen un elemento de navegación u otros elementos de diseño que tienen varios estados, como iconos, botones y menús.

Reflejar el diseño

Comience desde la parte superior del diseño de la página y continúe hasta la parte inferior, organizando las capas y los grupos de capas en orden descendente. para corresponder con su posición en el diseño. De esta manera, un desarrollador puede escanear rápidamente los nombres de las capas para identificar dónde se encuentra un elemento de diseño en particular dentro del panel Capas en función de su ubicación visual en el diseño. Esto es especialmente útil si necesitan aislarlo para editarlo o dividirlo.

Usar grupos de capas anidadas que reflejan la estructura jerárquica del diseño. Un grupo de capas llamado «Barra lateral» puede contener grupos de capas «búsqueda» y «publicidad». Los grupos de capas anidadas también pueden ilustrar al desarrollador cómo se organizan los elementos estructuralmente dentro del HTML.

Un ejemplo de un panel Capas estructurado jerárquicamente.

5. Entrega del PSD

Cuando se haya preparado el archivo, no lo envíe simplemente por correo electrónico ni lo cargue en el servidor de desarrollo. Programe una reunión de entrega y tómese el tiempo para revisar los archivos con el desarrollador para asegurarse de que tenga una comprensión firme de cómo se supone que el producto final no solo se verá, sino que se comportará en términos de interacción con el usuario. Al final, tanto los diseñadores como los desarrolladores ahorrarán un tiempo valioso.

Sobre el Autor

Brian Rhinehart es un diseñador e ilustrador independiente que ha trabajado en la industria de los medios y el diseño durante los últimos dieciséis años. cuando no esta trabajando para clientespasa su tiempo ilustrando o manteniendo Caja de herramientas de ilustraciónuna galería de inspiración y un blog dedicado a todas las formas de ilustración.