Guía del Diseño Web en Photoshop

1. Diseño Web
La guía del Diseño Web en Photoshop
Archivos
Al igual que en todas las disciplinas, lo primero que necesitamos es algo de organi-
zación de los archivos que vamos a usar.
Nombre de los Archivos
Nombre de los archivos: Cuidado con poner
nombres como “NUEVO.psd”, “ULTIMO.psd”,
“ARCHIVO_FINAL.psd”, “ARCHIVO_FINAL2.psd”
Guardar archivos ‘cerca’
Tener todos los documentos que se usen en el
PSD organizados en una carpeta junto al archi-
vo final.
Buena Idea
Buena Idea
Mala Idea
Mala Idea

2. Hacer un archivo exclusivo para los
elementos UI
Ayuda a usar rápidamente botones, formulari-
os, navegaciones, etc. y elementos de la Inter-
faz de Usuario.
Buena Idea
Mala Idea
Capas
Nada más desagradable que un PSD desordenado y con capas sin nombre, casi
imposible de editarlo y menos compartirlo.
Nombre a las capas con nombres
certeros
Se descriptivo y no muy extenso en cada capa.
Evitar el “Layer 1 copy”, “Layer 1 copy copy”.
Buena Idea
Mala Idea

3. Borra las capas innecesarias
Típico eso de dejar capas ocultas sin usarlas.
Espacio perdido y archivo más pesado.
Buena Idea
Mala Idea
Aprovechar los elementos comunes
No es necesario tener copias de una misma
capa.
Buena Idea

4. Mala Idea
Imágenes
Trabajar con imágenes se trata de no ser destructivo. No limites la vida útil de una
foto aplicándole efectos irreparables.
No las deformes ni las acoples
No deformes las imágenes, ni rasterices los
vectores ni capas de forma.
Mala Idea
Buena Idea

5. Globaliza las máscaras
Es mejor aplicar máscaras a una carpeta en
vez de aplicar una máscara capa por capa.
Mala Idea
Buena Idea

6. Snap
Dale magnetismo a las cosas en Photoshop, ya
sea Snap to Pixel, Layers, o Guides.v
Mala Idea
Buena Idea
Snap
Dale magnetismo a las cosas en Photoshop, ya
sea Snap to Pixel, Layers, o Guides.v
Mala Idea
Buena Idea

7. No abuses de los Modos de Fusión
¡Que lindo color! ¿Cómo lo hiciste? - Es una
mezcla de 7 capas en Modo Superponer. -
Traten de evitar esa situación.
No seas destructivo
Usa máscaras, Smart Objects y Capas de
Ajuste para evitar destruir los elementos
Mala Idea
Mala Idea
Buena Idea
Buena Idea

8. Usa iconos/fotos con licencia
Google Images NO es un banco de imágenes.
Mala Idea
Buena Idea
Usa Pixeles
No usen la herramienta Free Transform, sino
que hay que dar un valor fijo en px.
Buena Idea
Tipografía
A pesar de que el texto en Photoshop se vea diferente en el navegador. Lo que
puedes controlar son los valores y áreas de texto que vas a usar.

9. Mala Idea
Mala Idea
No deformes los textos
Además de que se ve horrible, es bastante
complicado hacerlo en CSS.
Buena Idea

10. Mala Idea
Controla tus cajas de texto
Está bien usar cajas de texto siempre y cuando
¡NO MIDA 1 KM. EXTRA a su tamaño real!
Buena Idea
Usen cajas de texto separadas
Una caja para el título, otra para el párrafo.
Individualizar los elentos hace más fácil al mo-
mento de editar.
Buena Idea

11. Mala Idea
Usa Webfonts
Ya conocemos la tipografías Websafe, ahora
ampliemos nuestra visión.
Buena Idea
Mala Idea
Efectos
Siempre usa los efectos y filtros moderadamente. En la mayoría de los casos más
filtros ≠ mejor diseño.
Menos es más
No hay puntos extra por tener más efectos
aplicados.
Buena Idea

12. Buena Idea
Conoce tus Strokes
Un borde interior te da lindas esquinas
cuadradas, un borde exterior da esquinas
redondas.
Mala Idea
Buena Idea

13. Usa Drop Shadows adecuadamente
Preocúpate de no ensuciar mucho el docu-
mento con este efecto.
Mala Idea
Buena Idea
Otros
Ninguna de estas prácticas te harán un mejor diseñador pero si te ayudarán a tra-
bajar correctamente en Photoshop.
Guardar para web
Sólo ‘Guardar como’ va a dar problemas de
peso del archivo, colores, etc.
Buena Idea

14. Mala Idea
Atención en el peso del documento
Hay que negociar calidad vs peso.
Buena Idea
Mala Idea

15. No tener espacio innecesario
No agregues márgenes extras a ninguna de
tus imágenes que sacas de Photoshop.
Buena Idea
Mala Idea
Fuente: photoshopetiquette.com