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

¡Bienvenidos a una nueva clase del Taller de Adobe Photoshop! ¿Lograron crear su botonera? ¡Apuesto a que sí, dado que es muy sencillo! Hoy seguiremos con la interfaz de nuestro sitio web. Primero haremos un breve repaso de lo que vimos en las prácticas en lo que va de este taller y luego conoceremos la forma de llevarlo al mundo de la web, generando un archivo XHTML con sus estilos CSS.

Para ello debemos conocer una función de Photoshop que se llama “Guardar para la web”. Básicamente nos permite guardar la imagen “recortada” en sectores que luego conformarán nuestro sitio. ¡Comencemos!

De Photoshop a la web

Primero hagamos un breve repaso de lo que vinimos viendo en las prácticas hasta ahora. Pero ¡ojo! Les recomiendo volver a hacer todos los pasos nuevamente para fijar bien los conocimientos. Nada de abrir de nuevo los archivos que ya habían creado (¡no hagan trampa ^_^! jejeje).

El PSD de tu sitio web

La plantilla de nuestro sitio la crearemos en un archivo de imagen de Photoshop que soporte capas y canales alpha, por lo que el formato .psd nos será óptimo.

Comencemos creando un archivo nuevo del tamaño que queramos (teniendo en cuenta que la página se deberá ver correctamente en las resoluciones más comunes de pantalla de los usuarios). Recuerden que Thor, en su Taller de Adobe Dreamweaver analizó que una buena opción era 950 píxeles de ancho.

Vamos a Archivo->Nuevo y seteamos las opciones que más nos convengan (el sitio que queramos puede ser un blog con mucho scroll o simplemente un sitio de venta de artículos que entre en una sola pantalla). Lo importante es que la resolución sea de 72 dpi (píxeles/pulgada) porque la finalidad de nuestro archivo es que se vea en la web (pantalla).

Ahora podemos tirar unas guías de ayuda que delimiten los sectores de la interfaz (logo, cabecera, botonera, área de contenido, footer, etc, etc, etc).

Apoyándonos en ellas y según lo visto en las clases de práctica anteriores, vamos creando los sectores que sean formas vectorizadas.

Podemos agregar texto y aplicarle estilos para conseguir un logo, agregar una botonera como la de la clase pasada y descargar de sitios web llenos de recursos gratuitos (como SmashingMagazine.com) infinidad de íconos, patterns de fondo, wallpapers, imágenes y mil cosas más para completar la interfaz.

A mí me ha quedado así:

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

Recuerda ir guardando cada tanto tu archivo (con extensión .psd) por razones de seguridad.

Puedes ver que el ejemplo que hice es bastante sencillo, el logo es texto pleno, la botonera no tiene estilos, lo más “elaborado” son las placas de fondo del contenido, que son sólo una forma vectorizada (rectángulo redondeado) con un degradado de color.

El resto es texto plano, un ícono de la web y un pattern de fondo.

El “buscador” son dos rectángulos redondeados, con estilos y texto, nada más.

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

Recuerden crear dos estados para todo lo que sean botones (como vimos la clase pasada).

¡Ya tenemos nuestra interfaz!

Comprendiendo cómo se presenta un sitio web: XHTML y estilos CSS

Bueno, la idea ahora es convertir esta imagen en un sitio web hecho y derecho. Para ello debemos pensar en términos del código (HTML y CSS). A cada elemento de la imagen le corresponderá otro en el código y viceversa.

¿Qué significa esto? Lisa y llanamente que si en el HTML de nuestro sitio hay una palabra como “carrito de compras” que enlaza a la sección correspondiente, en nuestra imagen psd tendremos un sector (puede ser texto o imagen o ambos) que actuará como botón.

Por esto deberíamos pensar también que nuestro sitio estará conformado por sectores que “flotarán” sobre el fondo de la página, donde se organizará el contenido.

Lo correcto en la web hoy día es generar un archivo XHTML semántico, o sea, escribir en HTML la estructura y contenido de nuestro sitio, para finalmente darle la apariencia perfecta por medio de estilos CSS.

La idea de este taller (si bien estaría bueno que lean el de mi amigo Thor ;) ) es que no necesiten saber estilos CSS ni mucho de HTML para lograr su sitio, por lo que nos basaremos en Photoshop exclusivamente para generar nuestro sitio web completo.


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

Publicar un comentario

Datos personales

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