Diseño WebLa guía del Diseño Web en Photoshop

Archiv� 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 ArchivosNombre 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 fi nal.

Buena Idea

Buena Idea

Mala Idea

Mala Idea

Hacer un archivo exclusivo para los elementos UIAyuda a usar rápidamente botones, formulari-os, navegaciones, etc. y elementos de la Inter-faz de Usuario.

Buena Idea

Mala Idea

CapasNada 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 certerosSe descriptivo y no muy extenso en cada capa. Evitar el “Layer 1 copy”, “Layer 1 copy copy”.

Buena Idea

Mala Idea

Borra las capas innecesariasTípico eso de dejar capas ocultas sin usarlas. Espacio perdido y archivo más pesado.

Buena Idea

Mala Idea

Aprovechar los elementos comunesNo es necesario tener copias de una misma capa.

Buena Idea

Mala Idea

ImágenesTrabajar 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 acoplesNo deformes las imágenes, ni rasterices los vectores ni capas de forma.

Mala Idea

Buena Idea

Globaliza las máscarasEs mejor aplicar máscaras a una carpeta en vez de aplicar una máscara capa por capa.

Mala Idea

Buena Idea

SnapDale magnetismo a las cosas en Photoshop, ya sea Snap to Pixel, Layers, o Guides.v

Mala Idea

Buena Idea

SnapDale magnetismo a las cosas en Photoshop, ya sea Snap to Pixel, Layers, o Guides.v

Mala Idea

Buena Idea

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 destructivoUsa máscaras, Smart Objects y Capas de Ajuste para evitar destruir los elementos

Mala Idea

Mala Idea

Buena Idea

Buena Idea

Usa iconos/fotos con licenciaGoogle Images NO es un banco de imágenes.

Mala Idea

Buena Idea

Usa PixelesNo usen la herramienta Free Transform, sino que hay que dar un valor fi jo en px.

Buena Idea

� pografíaA 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.

Mala Idea

Mala Idea

No deformes los textosAdemás de que se ve horrible, es bastante complicado hacerlo en CSS.

Buena Idea

Mala Idea

Controla tus cajas de textoEstá bien usar cajas de texto siempre y cuando ¡NO MIDA 1 KM. EXTRA a su tamaño real!

Buena Idea

Usen cajas de texto separadasUna 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

Mala Idea

Usa WebfontsYa conocemos la tipografías Websafe, ahora ampliemos nuestra visión.

Buena Idea

Mala Idea

Efect� Siempre usa los efectos y fi ltros moderadamente. En la mayoría de los casos más fi ltros ≠ mejor diseño.

Menos es másNo hay puntos extra por tener más efectos aplicados.

Buena Idea

Buena Idea

Conoce tus StrokesUn borde interior te da lindas esquinas cuadradas, un borde exterior da esquinas redondas.

Mala Idea

Buena Idea

Usa Drop Shadows adecuadamentePreocúpate de no ensuciar mucho el docu-mento con este efecto.

Mala Idea

Buena Idea

Otr� 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 webSólo ‘Guardar como’ va a dar problemas de peso del archivo, colores, etc.

Buena Idea

Mala Idea

Atención en el peso del documentoHay que negociar calidad vs peso.

Buena Idea

Mala Idea

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