Aplicarte(me) el cuento
Diseño Web
20 Noviembre, 2013
Hace unos días, tuve que pasarle a un compañero el diseño de una web que estaba haciendo en Photoshop. Al cabo de un rato me lo devolvió, pidiéndome por favor si podía ordenar "en un momento" las capas y eliminar las ocultas. Me di cuenta al abrir el archivo, que aquello era un auténtico desastre. Las prisas y el volumen de trabajo, me habían obligado a descuidarme, creando y borrando capas de forma compulsiva..., haciendo y deshaciendo, y dejando al final un archivo indescifrable para el compañero que lo recibe.
Estuve más de una hora organizado las capas, grupos, nombrando los objetos vectoriales y eliminando las 230.492 mil capas innecesarias que tenía mi archivo. Por este motivo, y para que no os suceda, os dejo algunos consejos para que vuestros archivos de Photoshop sean entendibles y manejables:
9. No estirar botones, mantener forma vectorial.
10. Utiliza valores de píxeles enteros en las tipografías.
11. Utiliza fuentes con la certeza de que podrás utilizarlas en la web.
12. Utiliza varios cuadros de texto para titular, subtitular, contenido… podrás manejar las distancias entre ellos, tamaños, colores… de una forma más sencilla.
ARCHIVOS:
1. Ordena tus archivos PSD en carpetas, no mezcles conceptos (bocetos, mockups…). Design > Home.psd 2. Nombra los archivos correctamente. No te líes con ultimo.psd / ultimosxxx.psd / 30_11_2013.psd, ¿no será más fácil home_v1.psd o home_v2.psd, y así sucesivamente? 3. Todo lo relativo a tu diseño, dentro de tu carpeta. Fuentes, imágenes, iconos… todo junto, pero no revuelto. 4. Guarda los archivos en el servidor. Así todos tus compañeros pueden tener acceso a ellos.
CAPAS:
5. Nombrar TODAS las capas. Intentar ser lo más descriptivo posible, "linea horizontal menú" "botón azul" y olvidarse de capa 1, capa 2… 6. Agrupar las capas en carpetas. Carpetas como Header, Content o Footer te ayudarán mucho para editar y navegar por tu archivo. 7. Eliminar capas innecesarias. Una vez hecha la prueba- error, borra todas las capas ocultas que no utilizas. 8. Aplicar las máscaras de capa a grupo. Así será mucho más fácil editarlo en un futuro.
9. No estirar botones, mantener forma vectorial.
10. Utiliza valores de píxeles enteros en las tipografías.
11. Utiliza fuentes con la certeza de que podrás utilizarlas en la web.
12. Utiliza varios cuadros de texto para titular, subtitular, contenido… podrás manejar las distancias entre ellos, tamaños, colores… de una forma más sencilla.