Taller de Adobe Photoshop: la interfaz de tu sitio en XHTML y CSS (2)

¡Buenas, mis queridos alumnos! ¡Llegó el momento de crear nuestro sitio web completo, en XHTML + CSS con Photoshop! ¿Tuvieron problemas o dudas la clase pasada? ¡Espero que no! A estas alturas deberían tener lista la interfaz, con un header con el logo, la botonera, etc.

Acomodando los sectores y pasándole a Photoshop los parámetros correctos con la función Guardar para la web, podremos generar el archivo XHTML y la carpeta contenedora de las imágenes, todo listo para subir al servidor y ver online ^_^ ¡Empecemos ya!

De Photoshop a la web

Recortando los sectores de la imagen

Recién dijimos que en nuestro psd tendríamos sectores que corresponderán a elementos del sitio web. Deberíamos entonces delimitar estos elementos por medio de guías, por ejemplo:

Taller de Adobe Photoshop: la interfaz de tu sitio en XHTML y CSS

Para que se entienda por qué yo las puse donde las puse, veamos esta imagen donde he resaltado cada elemento que delimitan las guías:

Taller de Adobe Photoshop: la interfaz de tu sitio en XHTML y CSS

La clase pasada vimos (brevemente) que había que usar la herramienta Sector.

Hacemos clic en el botón Sector de la barra de herramientas de Photoshop (o tecleamos “K“).

En el panel de opciones veremos un botón que dice “Sectores a partir de guías”. Al hacer clic en él cada trozo de imagen que estaba delimitada por las guías se convertirá en un sector que luego podemos guardar como una imagen aparte, separada del resto (como vimos en la clase pasada, con los botones de la botonera, valga la redundancia).

Taller de Adobe Photoshop: la interfaz de tu sitio en XHTML y CSS

Lo que debemos hacer ahora es muy simple pero difícil de explicar, jejeje. Nuestro sitio se ha dividido en una gran cantidad de sectores, pero muchos no nos servirán porque serán parte del fondo o porque hay algunos sectores divididos “de más”.

En la siguiente imagen podemos ver cómo nos quedó “sectorizada” la imagen:

Taller de Adobe Photoshop: la interfaz de tu sitio en XHTML y CSS

Pero en realidad lo que nos interesa es tener sólo estos sectores:

Taller de Adobe Photoshop: la interfaz de tu sitio en XHTML y CSS

Para ello vamos a presionar por unos segundos el botón de la herramienta Sector, que desplegará una segunda opción llamada “Seleccionar Sector”. La elegimos y con ella podremos hacer clic en cada sector sobrante, al tiempo que movemos por medio de los manejadores los sectores que queremos hacer más grandes (que ocupen varios casilleros).

Así me ha quedado a mí el psd con los sectores bien definidos:

Taller de Adobe Photoshop: la interfaz de tu sitio en XHTML y CSS

Ahora sí podemos decir que tenemos un sector de la imagen para cada elemento de nuestra página web (HTML): un header (cabecera) con el logo, una botonera, el área del contenido, etc.

Guardar para la web y dispositivos

Ahora que ya tenemos los sectores dispuestos adecuadamente, vamos a Archivo->Guardar para la web y dispositivos.

Se nos abre un panel donde podemos seleccionar cada parte de la imagen sectorizada y elegir con qué formato la queremos guardar (como una imagen separada, aparte, única).

Taller de Adobe Photoshop: la interfaz de tu sitio en XHTML y CSS

Por ejemplo, podemos elegir el formato .png para conservar las partes transparentes (que dejarán ver el fondo de nuestro sitio web ;) ). Las fotos pueden ser .jpg de calidad media (la idea es que nopesen mucho para que la página no se vuelva lenta al cargar).

En fin, opciones hay miles, ustedes explorarán y verán qué les conviene en cada caso.

Haciendo doble clic en un sector cualquiera accederán a varias opciones, como darle nombre a esa imagen (área) en particular, generar un alt text en el HTML para fines de indexación, o si queremos que ese sector esté vacío (sin imagen) y tenga un color de fondo cualquiera o sea transparente.

Una vez hechas todas las modificaciones y ajustes, hacemos clic en Guardar.

Podemos ver que tenemos varias opciones, pero elegimos las siguientes:

Taller de Adobe Photoshop: la interfaz de tu sitio en XHTML y CSS

(podemos ver que ya he nombrado index.html al archivo que creará Photoshop. Esto es porque será la página de inicio de nuestro sitio web ^_^).

En la pestaña que aparece elegimos HTML y tildamos la casilla “XHTML de salida”.

Taller de Adobe Photoshop: la interfaz de tu sitio en XHTML y CSS

En Sectores (slices, en inglés), elegimos Generar CSS por ID. ¡Esto creará el código CSS en nuestra página web!

Photoshop CSS y XHTML

¡Listo! Damos clic en guardar y se creará un archivo XHTML + CSS con una carpeta con las imágenes dentro, recortadas.

¡YA TENEMOS NUESTRO SITIO WEB ^_^!

Podemos ver, si abrimos con algún programa como Dreamweaver el archivo HTML, el código creado con Photoshop (incluido el CSS).

XHTML y CSS en Photoshop


0 comentarios to "Taller de Adobe Photoshop: la interfaz de tu sitio en XHTML y CSS (2)"

Publicar un comentario en la entrada

Blog Archivo

Subscribete via E-Mail

Subscribete via RSS!

Ingresa tu email para:
Recibe actualizaciones del Blog.

Etiquetas

16-bit 2.0 2012 256 colores 2d 3 404 5 8 acelerar Acer Aspire ActionScript ADD-ONS addon adobe adobe air Adsense aerogarden agilidad airbender AJAX alarma alien all your base alta definición Android angulacion answers API APIs aplicacion aplicaciones Apple apps archive Argentina ask atajo atajos de teclado ataque audio avance avatar aventura grafica back background backtweets balsamiq mockups banda bang banners barcelona barra lateral bases de datos Batacazo bateria bbcode bear bebé Biblioteca Virtual big bing BitDefender BitTorrent blekko Blog blogger bloggers blogósfera Blogs bocetos bollywood bordes botánica brickify brush buenos aires buscador búsqueda avanzada cache caja calendario calidad cámara web canciones Canvas carrusel catástrofe ceguera de banners celular CEO charla chpimunk chrome chrome web store chromium chuck norris cine Cisco cita cliente ftp cloud cluster Cms cocina codec código coleccion color colorotate columna comercio commodore 64 compatibilidad Competencia compositio Comscore comunicacion Comunidad comunidad online Conferencia configuración consejos contenido content copia correo correo electrónico cotidiano cpanel Creatividad criminal cross-browser cse CSS CSS3 cubo cuenta cuentos cultivo Curiosidades curso photoshop Cursos daisies date Debian degradé dell desaparecer desarrollo web descarga Descargas descomprimir desfragmentar despertador despertar deviantart DHTML Digg diseñador Diseño Diseño Grafico Diseño Gráfico diseño web Disney dispositivo dispositivos moviles dispositivos táctiles div dominio dramatic dropbox duck go e-book e-commerce e-commerce day e-mail EBE ecología editor educación a distancia educativo Educativos Niños efecto efectos ejemplo emblema emprendimiento emulador emuladores encabezados encuesta enlace episodios error escritura España estadística Estados Unidos estilo estudio etica evento Eventos Excel exportar extensión extensiones extraterrestre Facebook facebook connect garage fc64 feeds Fiberparty film Filosofía Firebug firefinder Firefox firmware fixes Flash flex 4 Flickr fondo fondos font font dragr form formularios foto Fotografía Framework freelance fuente fuentes future FXG g1 gadget gadgets games gaming gazelle geek gestion gestor de contenido gestos gestuales gesture ghajini gm730 Gmail Google google analytics google app Google Calendar Google Chrome Google Docs gradient gradiente gradientes gráfico gran torino gratis groupon guerra guia h.264 habla hack Hackers handle handler hardware herramientas gráficas hitchcock hollywood homepage horizontal hover HP html HTML válido HTML5 HTTP hub huerta IBM icono IE illustrator imagen Imagenes imágenes importar impress inclinacion indio infecciones info-box infografías iniciador Inkscape inspiracion interactivo interfaz Internet Internet Explorer interno invasión investigación iPhone iphone os iPod island istick IT iTunes U jackson JavaScript jerarquía jetpack jQuery jQuery TOOLS jsc64 juego Juegos lanzamiento laptop lego lenguaje Lenovo Lg libre librería libro limpieza Links Linux literatura lógica logo logos logotipo lolcat Lotería love luca lucasarts luces luminoso luz Mac mac book pro mac os x MacBook macro mago Malware manejo mantenimiento manual mapa mapeo maquetación marciano Marketing mascara mascota McBook medicion medio ambiente meme memoria mente menú metafilter metropolis michael microsoft Mobile Learning mockup monkey moonwalker mootools moousture motivacional motor de busqueda motores de búsqueda mouse mouseprobe mov movil mozilla Mozilla Firefox Mozilla Labs mp3 MS Office mujer maravilla multimedia MultiTouch música MXML MySpace MySql N97 napkee navegación Navegador navegadores networking New York nightly nihilogic no ser encontrado nodos Nokia notebook noticias Novedades ochentoso oferta offers oficial online Open Source Open SUSE OpenOffice opera operativo oportunidad optimización orden organizacion orgullo os oscurecer oscuridad oso Outlook oz page speed PageRank pagespeed pageviews panaderia Panda paneles pantalla pantallas táctiles parasitos PDF peekfeed película pencil peoplebrowsr perfil pestaña photoshop photoshop clase 2 PHP php 5 Picasa picker pinceles pingie piratas pirates plagio plantación plantar plantilla plastic logic Plugin plugins pocket yoga podcasts port portal portátil posicionamiento powerpoint ppc prejuicio preparacion presentación Productividad Programación programas promocion protofish prototype proyecto prueba PSD Psicología public Publicidad puerto QEMU quickoffice quicktime quote rafael jimenez rank Recursos Red red social reddit Redes sociales reloj remake reproductor reseña resolución respaldo resultado retro robo rojo RSS rubik Ruby rust Safari Salud sans-serif sclipo script sculpting sdk seleccionador SEO serie serif SERP server servidor servidor web set shadow share sherlock shortcodes shuffle sidebar sidepost simple simpson Sin clasificar sistema sistema operativo sistemas operativos sitios web slideshow smart smooth SMS snow leopard social sociedad Software Software educativo software libre sombra sonido soundmanager2 spam spreadsheet SQL Squeeze startup steps left store streaming subdominio success suckerfish sun microsystems tablas table tabs tactil Taller de Fotografía Digital Taller de Photoshop taller photoshop Talleres Tarjetas de Crédito teaser tecnica Tecnologia teddy telefono television telltale template templates textbox the theme Themes theora thumbnails tienda time tipografía tipografias tips titulares to touchscreen tower defense trailer transform transition tres Troyano Troyanos truco Trucos tutorial photoshop tutoriales TV tweet tweetstats Twitter unplugged Usabilidad USB usuarios Utilidades para PC Utilidades para tu web variables vector vegetales velocidad venta Ventas verde verdura version video videojuego videojuegos videos Videos de Música Peruana viernes Viernes Unplugged VirtualBox Virus Visas VMware voucher w3c wallpaper wallpapers web Web 2.0 web participativa webcam WebKit webm webmaker Wi-Fi widescreen Wikipedia Windows Windows 7 Windows Mobile wiz wizard wolfram wonder woman Word Wordpress WorldBuilder wwdc 09 XHTML yahoo Youtube yui zip