Taller de Adobe Photoshop: diseñar un sitio web o blog

¡Bienvenidos a la última clase del Taller de Adobe Photoshop! Hoy aplicaremos todo lo aprendido para realizar el diseño de un sitio web o un blog. Algo que tienen que tener en cuenta es que el “tutorial” que veremos hoy les servirá para llevar a cabo cualquier tipo de diseño, no sólo el que utilizo como ejemplo.

Muchas clases pasaron desde aquel primer día en donde aprendimos la diferencia entre los colores RGB y las tintas, los píxeles y los vectores. Pero bueno, la finalidad de este taller siempre fue que aprendan a diseñar un sitio web o blog con Photoshop, incluyendo todos los elementos que se pueden encontrar allí. Hoy podemos decir que ya están listos para cumplir con esa meta, de modo que (por última vez ¡snif, snif! ^_^) ¡Comencemos!

Diseñar un sitio web o blog con Photoshop

A esta altura ya saben que diseñar un sitio web no es algo que se haga así nomás, pero también sabrán que en unas horas deberíamos tener toda la interfaz lista (depende más de qué tan despierta esté nuestra creatividad que del manejo de la herramienta).

El fondo de nuestro sitio web

Comencemos, entonces, aplicando lo que vimos en la clase 19 para crear un lienzo donde diseñar nuestro sitio. El lienzo debe ser adecuado al tamaño de la resolución de pantalla pero ojo que el fondo debe ser más grande si va a ser una imagen (tengan en cuenta que los monitores ultra chatos de hoy día llegan a resoluciones muy anchas).

Una vez que ustedes eligieron el tamaño que más se adecuará a su sitio, podemos usar como “wallpaper” una imagen, un collage, un degradado, un motivo, etc, etc, etc. Para darles un ejemplo, yo usé un degradado como vimos en la clase 29. Quedó algo así:

Siguiendo con mi ejemplo, podemos conseguir un pincel o textura gratuita por la web, según vimos en la clase 28:

Para que se amolde mejor podemos usar color, etc:

Podemos aplicar la textura o el pincel fusionándolo en modo luz suave, o con alguna otra modalidad que nos de un resultado original. Podemos, claro, aplicar el pincel cuantas veces queramos y ajustar una y mil veces los niveles, opacidades, tonos, colores, variaciones, etc, etc, etc.

Para que la parte del contenido de nuestro sitio, si necesita scroll, funda a un color pleno que elegiremos por CSS, podemos aplicar un gradiente (degradado) que funda a transparente:

Luego podemos crear una nueva capa y pintar con un pincel “blando” algunos colores accesorios:

Al fusionar esta capa como luz suave obtendremos este resultado:

Seguimos jugando con el tono y saturación, brillo y contraste, etc:

Podemos aplicar una textura con el bote de pintura, usando un motivo en una capa nueva. Luego lo fusionamos como más nos guste:

Hasta aquí suficiente con el fondo. Ahora pasemos a la interfaz propiamente dicha…

Diseñar la interfaz de un blog con Photoshop

Sobre el fondo que teníamos tiramos algunas guías como vimos en la clase +++++ según la forma que tendrá nuestra interfaz (¿tiéne barra de navegación? ¿Cuántas columnas? ¿Qué sector se alargará automáticamente con el contenido? ¿Será un diseño fijo?).

Una vez que tenemos esto bien claro y las guías como soporte, podemos crear la maqueta de la interfaz con formas vectoriales como vimos en la clase 13. En este caso yo elegí el rectángulo redondeado:

Pueden ver en el panel capas que son formas vectorizadas.

Yo he decidido aplicarles un estilo (clase 14) usando sólo un trazo de 1px y superposición de gradiente:

Noten que no es necesario repetir el estilo una vez que ya lo seteamos en la primera capa. podemos hacer clic y arrastrar el ícono de los efectos especiales (fx) o dar clic derecho y elegir “copiar estilos de capa” para pegarlos en la que no los tiene.

Nuevamente, con líneas vectoriales, divido la barra de navegación y el footer:

Y agrego texto como título (también podría ser un logo) y a la barra de navegación como vimos en la clase 25:

Les pido perdón por la estética del diseño, pero está hecho rápidamente con el sólo fin de ejemplificar este taller, jeje.

Agregando más textos, formas vectorizadas, etc., iremos completando el diseño del sitio. Para los que les gustan más los sitios estilo “collage”, la técnica la vimos en la clase 30. Elegimos las imágenes que más nos gustan y las recortamos con la pluma o con el lazo. Luego las pegamos en la interfaz.

Este es un recurso muy usado para agregar recortes realistas. Vean cómo quedaría una página de un cuaderno como fondo del sector de contenido de este “blog” imaginario (junto con los últimos detalles agregados):

¡Ahora sólo resta el contenido del sitio! Podemos simularlo con Photoshop para tener una idea clara de lo que haremos luego con CSS, HTML y contenido real.

UN COSEJO IMPORTANTE: en estos casos conviene elegir como estilo de texto “ninguno” en vez de nítido, grueso, redondeado, etc. De esta forma lo veremos como se verá en el navegador. Obviamente usaremos las tipografías estándares (Arial, Georgia, etc):

¡Voila! agregando unos detallecitos finales tenemos listo nuestro sitio web:

Ahora podemos recortarlo automáticamente para luego rearmarlo con CSS. Claro que si se trata de un sitio institucional sin scroll ni contenido dinámico podemos hacerlo directamente con Photoshop con la función Guardar para la web y dispositivos, como vimos en la clase 27.

Bueno, de esta forma me despido de uno de los talleres que más placer me dio llevar adelante. Les quiero agradecer mucho haberse aguantado mis interminables explicaciones y les doy las gracias también por todos sus comentarios de aliento.

Espero que este taller les haya sido de gran ayuda para que puedan diseñar sitios web por ustedes mismos. No queda más que decir, salvo invitarlos a que me dejen todas las dudas y mensajes que quieran via comentarios. (Y seguiremos en contacto en algún que otro tutorial ;) ).

¡Hasta siempre!

Juanma.

Haz clic aquí para volver al Temario.


0 comentarios to "Taller de Adobe Photoshop: diseñar un sitio web o blog"

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