CSS desde photoshop. Notas al tutorial anterior.

He recibido algunos correo de algunos que intetaron este metodo y que su CSS contiene algunos nombres poco siginificativos. Como una nota adicional les dejo esta explicacion de como hacer que el photoshop exporte a CSS usando los nombres que tu quieras.

1.- Con la herramienta de slice pon nombres significativos a cada elemento

Con esto recordaras a la hora de ver el CSS a que corresponde cada cosa. Por ejemplo si son menus puedes usar el prefijo menu_ y el nombre de cada menu. Esto ayuda a los que apenas se inician en CSS a visualizar que parte del CSS da formato a cada imagen.

2.- Al exportar para web: Selecciona CSS

Recuerda que en el menu CUSTOM de “grabar para web” en una pestaña hay una opcion que por defecto esta en TABLES, es decir, que convertira a tablas tus slices. Cambia a CSS.

3.- en la configuracion para ponerle nombre a cada slice cambia a “Slice”

Esto hara que el photoshop use el nombre que tu pusite a cada slice en lugar de llamrlo de una manera por defecto que tiene que hace poco mas dificil de entender cada cosa. Recomiendo ampliamente que el codigo una vez generado lo vean en DreamWeaver ya que ahi puedes ver tanto el diseño como el codigo y aprender como lo estructura.

He aqui las imagenes:

Para los que no vieron el tutorial anterior, el link es este: https://sdgestudio.wordpress.com/2008/01/12/breve-tutorial-como-pasar-de-psd-a-css-en-minutos/
CSS desde photoshop con nombres a tu gusto

.

Acerca de Emmanuel Vargas @sdgestudio

Graphic Designer currently working with user interface for web applications using dojo toolkit, jQuery in a java environment. Photographer interested in portrait, experimental and photo-journalism for social events. www.sdgestudio.com you can find me in G+

Un Comentario

  1. thats all very nice information, thank you for that!! .Great article. Honestly, I wish i could write like you.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: