Cómo organizar eficazmente tus capas de Photoshop
Nosotros, los diseñadores, nos frustramos con los desarrolladores cuando se toman libertades con nuestro trabajo.
Pero tenemos que entender que no son del todo culpables.
Póngase en sus zapatos: imagínese lo que es abrir un archivo de Photoshop (PSD), solo para encontrar un revoltijo de capas y carpetas mal etiquetadas, más un montón de capas ocultas sin marcar y otras ideas a medio hacer que no lograron fruición.
El siguiente tutorial describe cómo crear archivos PSD organizados, diseñadores y amigables con el desarrollador .
Esta no es de ninguna manera la única solución, pero es de esperar que fomente una mejor práctica en el mundo del diseño web.
Mientras escribía este tutorial, entrevisté a varios desarrolladores que tienen mucha experiencia trabajando con múltiples diseñadores.
Su opinión fue extremadamente perspicaz. Definitivamente lo aliento a que también se comunique con los desarrolladores con los que trabaja , para averiguar si puede hacer algo para mejorar sus archivos PSD.
1. Estructura de carpetas básica
Para empezar, tengo un archivo PSD a mano llamado "Website-Template.psd" .
Este archivo contiene los conceptos básicos de cada sitio web, incluido el sistema de grillas, la estructura básica de carpetas y dimbroeiones comunes (utilizo un espacio de trabajo de 1000 por 1440 píxeles, con un ancho de sitio de 960 píxeles).
Esta plantilla elimina la necesidad de configurar un nuevo archivo para cada proyecto.
Tomemos un momento para familiarizarnos con la organización básica de estas carpetas.
Notarás que mi estructura de carpetas predeterminada contiene solo tres carpetas principales: "encabezado", "contenido" y "pie de página".
Este sencillo conjunto contiene las carpetas básicas que utilizan la mayoría de los sitios web y me ayuda a comenzar con el pie derecho al proporcionar una plataforma de organización efectiva.
Notarás que he etiquetado todas las carpetas de la manera más simple posible .
Estas carpetas albergarán una gran cantidad de subcarpetas. A medida que su diseño crezca, asegúrese de que esas carpetas nuevas estén etiquetadas con la misma claridad.
Al expandir la carpeta "encabezado" , verá la organización de las subcarpetas.
Tenga en cuenta que la subcarpeta de "navegación" suele ser la más compleja: tener en cuenta al desarrollador al etiquetar y crear esta subcarpeta, y su contenido es importante.
Un último paso antes de saltar al diseño es agrupar esta colección de carpetas en una carpeta principal llamada "wireframes" .
Esto ayudará a mantener el contenido organizado para cuando comencemos a diseñar y colorear. También es una buena manera de distinguir entre varias páginas dentro del mismo archivo PSD.
2. Administrar capas para un sitio completo
Cuando los diseñadores nos metemos en una rutina, renunciar a la estructura para la creatividad puede ser fácil. Aquí es cuando la autodisciplina debe comenzar.
Debemos obligarnos a tomarnos el tiempo para organizar las capas que creamos .
Ahora que la configuración inicial está completa, daré una visión general de cómo agrupo varios elementos de un diseño completo.
Como sabrá, el diseño raramente sigue un camino lineal, así que tenga en cuenta que esta es solo una de las innumerables soluciones posibles.
"Si todos los diseñadores siguieran un procedimiento estándar de organización de sus PSD [organizando sus carpetas siguiendo un conjunto de pautas estándar], podrían cancelar fácilmente una hora de costos de desarrollo, si no más. Sin mencionar que llenarías una grieta entre el diseño y el desarrollo, reduciendo cualquier vacilación del diseño original que es común en la fase de desarrollo ".
Matt Sears, desarrollador de Ruby on Rails
3. Estructura de carpetas en detalle
Comenzaremos con una descripción general del cuerpo principal (el contenido) y terminaremos con el encabezado, porque tiene un elemento importante (navegación) que necesita atención especial.
Al abrir la carpeta de contenido, notará que he dividido las subcarpetas para que el diseño visual del diseño del sitio se refleje en la estructura de la carpeta .
Por ejemplo, debido a que el contenido tiene una sección superior e inferior, los he etiquetado en consecuencia: "arriba" y "abajo" .
También coloqué todos los gráficos de fondo (degradados y otras imágenes que deberán dividirse en secciones para el HTML) en sus propias carpetas.
Ahora vamos a abrir la carpeta "superior" (una subcarpeta de la carpeta "contenido" ), que contiene varios elementos comunes, como un espacio para texto, un espacio para una imagen, etc.
Observe el uso de otra subestructura más para capas y carpetas adicionales.
Las carpetas se han designado para fuentes, imágenes y gráficos de fondo (degradados, colores sólidos, etc.).
Debido a que las fuentes pueden distraer a los desarrolladores mientras ordenan a través de un PSD, vamos a abrir la carpeta "fonts" para ver cómo los he organizado.
Basé mi método en los comentarios que recibí de un desarrollador que mencionó que sería genial poder hacer clic en las fuentes para crear divisiones sin que el texto se interponga.
He dado un paso más y realmente le he dado a la capa el mismo nombre que a la fuente .
Esto inmediatamente le permite al desarrollador saber qué fuente usar al codificar el HTML.
Para plantillas más complicadas, puede crear carpetas adicionales para especificar otras fuentes e importantes fuentes de encabezado.
(Sugerencia: los encabezados suelen estar etiquetados como H1, H2, etc. en terminología CSS / XHTML, por lo que etiquetar las fuentes del encabezado de la misma manera es una buena práctica).
Todo lo relacionado con las fuentes debe estar en la carpeta "fonts" , de modo que el desarrollador tenga que hacer un solo clic para eliminar todas las fuentes y aislar los elementos gráficos del sitio.
Podría verse algo como esto:
Siempre use su intuición y mantenga sus etiquetas simples y obvias .
Esta técnica no se trata de sostener manualmente al desarrollador; se trata de crear un archivo fácil de usar que ayude a todos a largo plazo.
Cuanto más distingas los elementos, las capas y las carpetas de tu diseño, las cosas más suaves estarán en la fase de desarrollo .
Utilice este método de organización durante todo el proceso, y se sorprenderá de lo rápido que se convierte en algo natural.
4. Navegación y Roll-Overs
Al configurar su interfaz de navegación, ya sea que esté usando pestañas, texto plano u otra cosa , querrá indicarle a su desarrollador cómo deberían verse las pestañas en estados específicos .
Por ejemplo, ¿una pestaña cambia de color cuando el usuario rueda sobre ella? ¿Es necesario un JavaScript especial, como para desvanecerse? Las posibilidades son infinitas, así que no espere que el desarrollador pueda leer su mente. Las carpetas solo van tan lejos al mostrar estos detalles.
Te animo a que complementes tu PSD con un resumen de diseño que da instrucciones específicas sobre los aspectos más complicados y detallados de tu diseño.
Supongamos que la interfaz de usuario (IU) de nuestro diseño tiene una estructura de pestañas. Los desarrolladores tienden a usar términos específicos cuando se refieren a los diversos "estados" de una pestaña (por "estado" me refiero a las diversas formas en que se muestra una pestaña para el usuario).
En mis entrevistas con los desarrolladores, encontré que los siguientes términos son los más consistentemente utilizados y reconocibles.
Tenga en cuenta la imagen que corresponde a cada descripción, y observe cómo la estructura de la carpeta refleja mi proceso de pensamiento.
5. Corregir etiqueta tus pestañas y sus estados
Encendido : el estado " activado " de un elemento de navegación (en este caso, una pestaña) indica que su página relacionada se está viendo actualmente. Por lo general, debería ser el más notable.
Desactivado : este estado indica que se puede hacer clic en una pestaña, pero que actualmente no se está visualizando o se está pasando el mouse sobre ella.
Desplazarse : este estado muestra cómo aparece la pestaña cuando el cursor del mouse se desplaza o gira sobre una pestaña inactiva. El tratamiento gráfico de este estado suele ser el mismo que el estado "activado", pero aún así debe tener su propia carpeta.
La clave es la consistencia: no importa lo que etiquete sus pestañas, ¡asegúrese de mantenerlas consistentes!
6. Una nota final sobre pestañas
Al abrir una de las subcarpetas en la navegación (la carpeta "off" en la captura de pantalla a continuación), verá que una vez más he agrupado todo el texto en una carpeta separada.
Esto es opcional, porque el texto suele formar parte de la composición gráfica de la pestaña.
Si el texto se va a recrear en HTML, le recomiendo colocarlo en una carpeta separada para que el desarrollador pueda hacer clic en él para facilitar el corte del gráfico.
7. Finalizando los archivos
Esta estrategia puede parecer un poco obsesiva, y prestar atención a la estructura y el orden cuando uno se ve atrapado en los tiros de un gran diseño no es fácil.
Sin embargo, tómese el tiempo al final de un proyecto para organizar y etiquetar sus carpetas adecuadamente .
Si tiene ilustraciones complicadas en su diseño, intente aplanarlas en una única capa bien etiquetada.
Si eso no se puede hacer (tal vez debido a los sofisticados métodos de fusión), intente convertir las capas en objetos inteligentes y luego rasterizarlos.
En definitiva, el objetivo es reducir al mínimo las capas y carpetas y luego etiquetarlas con la mayor claridad posible.
8. Un paso en la dirección correcta
Los desarrolladores y diseñadores no siempre piensan igual.
Mientras que muchos diseñadores trabajan en un estado de caos creativo, los desarrolladores suelen confiar en el orden, la estructura y la lógica .
A medida que diseñamos, una pequeña organización hace mucho para mantener contentos a los desarrolladores.
Definitivamente no hay una forma correcta de organizar archivos PSD, así que comuníquese con sus desarrolladores y vea lo que puede hacer para crear archivos PSD que mantengan a todos sanos.
Josh Sears es escritor, ilustrador y diseñador de una gran cantidad de proyectos basados en la web. Se gana la vida como diseñador web principal, director creativo y copropietario de Littlelines.com . Usted puede Echa un vistazo a su trabajo aquí o sigue sus actualizaciones en Twitter .
¿Aplica estos consejos cuando trabaja con Photoshop? ¿Qué otras técnicas usas para organizar tus capas de Photoshop?