Juan Manuel 3 de septiembre de 2008 a las 18.30
   Imprimir artículo
elWebmaster.com

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.


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (56)

  1. Manu dice:

    Genial, muchacho.
    Maravilloso.
    Exitos.
    Manu

  2. Gaby dice:

    Muy completo.
    Espero vean la posibilidad de un taller de Illustrator.
    Exitos.

    Gaby, Neuquén.

  3. Manuel de Jesus Mazariegos Suhul dice:

    Para mi fue muy bueno lo que aprendi, durante todo este tiempo, mi pregunta es: si los cursos que bienen en enero son la secuencia de lo qu ya resibimos o seran los mismos. tambien me gustaria que nos diera un rec: via Internet. como quien dice para constar que resivimos los cusoso y al menos que nosostros le enviemos uno de los trabajos que lo gramos realizar durante este año. Dios le bendiga, por el conocimiento que me compartio aprendi mucho. y quiero segitr el otro año. gracias

  4. Juan Manuel dice:

    ¡Hola, Manuel! Muchas gracias por tu comentario. Los talleres que se publican aquí en elWebmaster.com tienen como finalidad que todos puedan aprender de ellos en forma gratuita (basta con entrar aquí y verlos a medida que se publican). Está en cada uno el avance que haga o no en base a estos talleres ¡no somos quién para evaluarlos! ^_^. Por otra parte, las fechas indican los talleres que se publicaron este año 2008, tal vez haya más cursos luego, pero eso no está definido.
    ¡Muchas gracias por el aliento y nos vemos! ¡Saludos!

  5. Jose Canchica dice:

    muy oportuno, las tutorias del curso de adobe photoshop, las aproveche al maximo, espero que sigan con esta modalidad

  6. Jaime dice:

    Excelente curso, no lo he revisado completo pero he podido verlo de a poco y voy a ponerme juicioso y completarlo, Gracias
    También me interesaria un taller en Illustrator como decia Gaby

  7. susan dice:

    guau q interesante muy bueno eh :p

  8. Elver dice:

    Bueno pues, sumamente interesante el taller, maestro. Lamento haber llegado tarde al desarrollo del mismo pero aun asi, ya lo heche un vistazo a todo el curso y sinceramente esta super aplicable.
    Gracias.
    Me intereza igual el Ilustrator.

  9. *nice dice:

    graciaaaaaas!! por tu tiempo, por compartir tus conocimientos y mañas :) con nosotros

    en horabuena, suerte y aqui seguimos *-*

  10. Ronny dice:

    Mi consulta es si la pagina es grande y usa scrooll como hago para q la figura de la pagina o de la hoja q esta en el lado izquierdo se repita de una manera buena y estetica y no se note como si estaria repitiendose varias veces

  11. Yaneris Pacheco dice:

    Hola JuanMa, me gustaria saber hasta que fecha estara disponible el curso de Photoshop en la pagina del webmaster, no tengomucho tiempo conociendo la pagina y no he podido terminar el curso completo, me gustaria me respondiese lo mas breve posible, antes q nada quiero decirte que en lo poco que tengo en el curso, el mismo es uno de los mejores q hasta ahora he visto, y estoy tratando de aprovecharlo al maximo.

    Saludos desde Santo Domingo, Rep. Dom.

  12. Yaneris Pacheco dice:

    ah se me olvidaba el taller de ilustrator, por fa!

  13. Juan Manuel dice:

    ¡Hola, Ronny!

    Para eso tienes que, estando en la ventana de “Guardar para la web…” hacer doble clic en el sector asignado a la barra lateral y ponerle como color de fondo el que más cerca está de la parte de abajo (para que parezca que continúa el diseño 😉 ).

    Claro que para hacer cosas más complejas ya deberíamos ir modificando los estilos CSS, como nos indica Thor en su taller: http://www.elwebmaster.com/talleres/taller-de-adobe-dreamweaver-temario

  14. Fernando dice:

    Gracias por ese taller de adobe photo , me parecio muy pedagógico , útil , y cuando uno llega a cada parte del taller descubre cosas nuevas , que no necesariamente están en el taller , pero que con un poco de imaginación se descubren …… Sorprendente la forma como se pueden modificar , diseñar , fotografias , Web ….es como si fuera magia …….Gracias mil , hace rato tenia ese software y no sabia usar sus caracteristicas

  15. Charles Da Ponte dice:

    Realmente te agradezco esto de compartir información; es un gran gesto. Te escribo desde Paraguay y te diré que conseguir esto que vos ofrecés acá, así nada más, cuesta muchísimo en la realidad out-web día a día. Soy dibujante y estoy metido en el rubro de ilustración, colaborando a veces en cuestiones de diseño, así que todo lo que colgaste aquí me va a ser de bastante utilidad. Gracias, de vuelta.

  16. jose arrieta dice:

    Hola muy agradecido con ustedes por estos tutoriales que publican, espero que sigan subiendo mas tutoriales para nuestro aprendizaje.
    soy nuevo en todo esto pero con ganas de poner en practica todo lo aprendido en sus tutoriales.
    gracias

  17. ali rodriguez dice:

    Felicitaciones por tan exelente trabajo, soy instructor de instrumentacion industrial y este curso me ayuda en mucho y gracias a esta iniciativa, dios los bendiga a ti y alos que colabolaron con tigo,desde venezuela, edo falcon, puntofijo

  18. Pablo Valdes dice:

    Amigo Juancho, Gracias por este espectacular taller de Photo Shop. Que Dios te bendiga por compartir tus conocimientos, llevaba tiempo buscando un taller de esta clase y este fue maravilloso. Te felicito por tu altruismo y buena voluntad de ayudar a los demás.

    Saludos, PABLO

  19. Juan Manuel dice:

    ¡Muchas gracias! Te recomiendo también visitar el Taller de Dreamweaver: http://www.elwebmaster.com/talleres/taller-de-adobe-dreamweaver-temario

    Ideal para combinar con lo aprendido de Photoshop y diseñar tus propios sitios web!

  20. juan levill dice:

    sos un capo maestro……gracias por toda la ayuda

  21. jose dice:

    muy bieno el tutorial me lo voy a leer desde unh principio ´por que quiero usar fotoshop gracias

  22. oscar dice:

    Realmente me siento muy agradecido y satisfecho con ustedes, ya que como aficionado a la fotografía, este me ha sido de gran utilidad, por todo lo cual los felicito y nuevamente les agradezco esta oportunidad.

  23. jaime santander dice:

    necesito confeccionar un letrero de 1,5 mts. de ancho x 2 mts. de alto con photoshop,que medidas debo darle al crear el nuevo archivo para diseño.
    felicitaciones por el curso esta retewbueno. atte. j.santander

  24. Juan Manuel dice:

    Para impresión, además de las medidas que tú dices, debe estar a 300 dpi en CMYK.

    Saludos.

  25. DANIEL dice:

    Excelente taller, si tenia conocimiento sobre el programa pero habian muchas cosas que las hacia de otra manera no tenia bien establecidos los conceptos de algunas herramientas. Si tienes otros cursos hechos por ti, escribeme me servirian de mucho, soy profesor de un colegio y de un Instituto de computación… MUCHAS GRACIAS por el taller y no te pierdas

  26. Juan Manuel dice:

    Gracias, DANIEL, por tu mensaje. Actualmente aquí en elWebmaster.com tienes el Taller de Fotografía Digital [ http://www.elwebmaster.com/talleres/taller-de-fotografia-digital-temario ], también de mi autoría, por si te interesa.

    Te mantendré al tanto de nuevos talleres.

    ¡Muchos saludos!

  27. jorge briones dice:

    me parece fabulosa esta pagina, los felicito y sigan aelante

  28. Jacqueline Vizcarra A. dice:

    Es una gran ayuda …. lo pongo en práctica con mis alumnos de diseño …. del colegio donde trabajo…. Gracias por un aporte tan valioso …

  29. alexis damian dice:

    la verdad que te pasaste maestro… sos mi profe de por vida…:P:P

    necesito que me agreges al msn… para algunas consultas… y para un par de cosas…

    desde ya muchas gracias por todo…

    ale_balle77@hotmail.com

    ATTE:
    alexis…

  30. Felipe Zamora Mendieta dice:

    Me parece un excelente documento, quizas habria que incoporar mas ejemplos, pero es funcional, para principiantes como tu servidor.

    Felicidades

    Felipe

  31. Juan Carlos Loano dice:

    Excelente curso muchas gracias´… me ha servido a montones y he podido enseñarlo a otros.. Fraterno saludo. Juan Carlos de Cali Colombia.

  32. Enrique Español dice:

    Muy interesante este taller, me gustan los ejemplos ilustrados y casi que paso a paso para personas que como yo apenas comienzan en esto del diseño web…
    me gustaría poder ver el taller completo para poder diseñar mi primer lienzo. Gracias

  33. Luz Angela Hidalgo dice:

    Buenos dias
    Estoy interesada en recibir el curso basico de photo shop, necesito saber intesidad horario,pensul, horario y valor, estoy ubicada en la ciudad de Cali

    Gracias

    LUZ ANGELA

  34. Alejandra dice:

    Hola Luz, las clases son gratuitas. Se trata de tutoriales que se fueron publicando a lo largo del año pasado. En cada taller existe un temario (http://www.elwebmaster.com/talleres/taller-adobe-photoshop-programa) donde está publicado un listado con todas las clases que tiene el taller y sobre qué temas trata. Puedes hacer clic sobre el nombre de cada clase para visitar su tutorial.

    En el home del sitio, en la columna derecha puedes ver un listado con los talleres. Haciendo clic sobre el taller que te interese accederás al temario.

    Saludos!

  35. Ninetta Hernández dice:

    No sabe cuánto aprecio este curso. Le doy las gracias por habernos donado su tiempo y conocimientos. Yo comienzo a aprender Photoshop, creo que mis conocimentos no llegan a un 5% dentro de este mundo maravilloso. Mi hobby es la pintura y la hago de manera autodidacta,, pinto porque pinto, con pequenos conocimientos que se van haciendo más grande por personas que como usted que nos ensena en forma desinteresada. Mi meta es hacer pintura digital dominando todos los programas que tengan que ver con ello. Dios quiera que pueda cumplir este sueno, porque hay miles de detalles en cada programa los que se me hacen un gran coctel en mi cabeza. Pero insistiré.
    Nuevamente, muuchas gracias.

  36. Ubaldo dice:

    Mil gracias por su tan valiosa colaboracion hacia aquellas personas que como yo estamos ávidos de este tipo de material para continuar fortaleciendo nuestros conocimientos con los programas electronicos de diseño, estare ternamente agradecido. Ubaldo desde Ciudad Ojeda Zulia Venezuela.

  37. jose carlos dice:

    hola saben les agradesco mucho por este curso m esirve de mucho gracias ^_^

  38. Luis Vélez dice:

    Excelente taller; diría mejor curso. De verdad, pasé de no saber absolutamente nada de photoshop, a conocer muchos de sus secretos. Ya estoy haciendo mis primeros trabajos y de verdad, me he divertido en grande.
    Gracias, muchas gracias por compartir sus conocimientos.
    Gran saludo desde Colombia
    Luis

  39. Moises Hernandez dice:

    primero que nada, muchas gracias por este fabuloso taller, es muy sencillo y practico, aprendí muchísimo de photoshop gracias a esto, (antes no sabia casi nada y hasta me asustaba usar el programa xD) en cambio ahora me resulta mas fácil de usar… logre hacer todos los ejercicios con resultados gratificantes, a la final pude hacer mi sitio web con puro photoshop pero me quedo una duda…

    tengo mi pagina principal (se llama index.html) y mi carpeta de imágenes… lo guarde para web siguiendo las instrucciones de la lección 27…

    ok todo bien hasta ahora… pero… a la final resultan ser solo imágenes (me refiero a que no hacen nada si haces clic sobre ellas… los botones no te dirigen a ningún sitio etc.) es tan solo un diseño de la interfaz…

    por lo tanto he de suponer que no puedo esperar que photoshop tambien me sirva para hacer ese tipo de cosas (asi como dreamweaver) ¿verdad? ¿necesito utilizar otro programa para obtener estos resultados? (un sitio web completo y funcional) ¿o con photoshop se puede tambien?

    al iniciar el taller en la introduccion dice que el trabajo final que obtendriamos al realizar este curso seria la “realizacion de un sitio web” pero mas bien es solo el diseño del mismo…

    te hago esta pregunta para saber si es que segui mal el taller y no aprendi como hacer estas cosas… de hecho ni se si se puede jeje… o este taller solo abarca el diseño nada mas?

    espero tu respuesta y de verdad muchas gracias por tu esfuerzo y dedicacion en este curso… muy bueno.. me gusto mucho… suerte 😀 un saludo….

  40. Alejandra dice:

    Hola. En este tutorial verás cómo hacer el diseño del sitio o blog. En el caso de hacer un blog en WordPress, tampoco te tendrás que preocupar sobre la funcionalidad, ya que viene incluida en el paquete de WP. Si quieres hacer un sitio desde cero, la funcionalidad se la tendrás que dar tú. ¡Suerte!

  41. CLAUDIA PATRICIA FRANCO ALVARADO dice:

    juan manuel eres un amor no sabes cuanto me has ayudado con este manual.

    UN BESO. GRACIAS

  42. maria teresa dice:

    MIL gracias aunque no lo segui paso a paso en su momento porque recien lo voy descubriendo, me ha encantado todo lo que he visto, te felicito por tan buen taller (ESPECTACULAR) lo acabo de copiar todo para ir estudiando ya después te hare saber como me ha ido :) de nuevo muchassss gracias,

  43. Jenny Pavisic dice:

    ¡¡Muchísima gracias!, extraordinario en verdad.

  44. carmela rojas dice:

    Muchas gracias ha sido de gran, es espetacular de verdad.

  45. marcos dice:

    barbaro, lamentablemente no lo vi en la fecha de elaboracion, pero gracias a ustedes lo dejaron y pude hacer perfectamente…

  46. ali dice:

    una excelente guia…no sabe como me sirvio…

  47. lennyz dice:

    hola Juan Manuel, estoy realizando mi tesis de la universidad, y tu trabajo lo he puesto como estado del arte ya que me parece una excelente guía, lamentablemente no me aceptan la referencia de tu trabajo por falta de tu apellido, seria posible que me puedas ayudar… te lo agradecería mucho…

  48. Juan Manuel dice:

    @lennyz

    Me da mucho gusto que mi artículo te sirva para tus estudios. Mi nombre completo es:
    Juan Manuel González Guerrero y puedes encontrar más información mía en http://www.juanmaguerrero.com/acerca-de/

    Saludos y éxitos en tu tesis!

  49. julio cuc dice:

    uno de estos talleres andube buscando y ahora que lo hallé a ponerlo en práctica
    ¡¡¡¡¡¡¡¡¡¡¡¡felicitaciones!!!!!!!!!!!!!!!

  50. Jaime de J. Rincón Q. dice:

    ¡Hola Juanm un cordial saludo desde Colombia
    Resulta imposible, el no dar unas MUCHAS GRACIAS, por haber entregado este material que en mi condición de neófito, es INVALUABLE, no esperaba encontrar en la Internet, este tipo de material que no es cosa diferente el reflejo de quien da conocimiento sin esperar nada a cambio.
    ¡!!MUCHAS GRACIAS!!!

    Jaime,
    Bucaramanga Santander
    Colombia.

  51. Lisandro dice:

    Juan….eres genial MUCHAS GRACIAS por compartir de tus conosimientos con todos nosotros…..en verdad te agradesemos mucho porque nos ayudas tanto de una forma desinteresada..
    Saludos.
    Lisandro Republica dominicana.

  52. carmen dice:

    Aprendi mucho con el tutorial, gracias por todo.

  53. Jaime de J. Rincón Q. dice:

    ¡Felicitaciones!
    Es poco lo que se puede decir a lo ya dicho por otros usuarios
    Simplemente ¡!ESPECTACULAR!!.

    Me cae como anillo al dedo, recién empecé a explorar el programa de Photoshop; si bien me defiendo medianamente con CorelDRAW-12, las opciones de Photoshop, me parecen formidables, se pueden lograr muchas cosas a nivel de diseño, efectos etc.
    Qué decirte Juan por tu invaluable aporte?

    Simplemente GRACIAS (a la n potencia).

    2jj

  54. Karen dice:

    MMMMiiilllll,,,,,,,,,,, Gracias por compartir tu conocimiento aprendí mucho de verdad te lo agradezco

  55. Patricia dice:

    Gracias por las publicaciòn de los talleres, a pesar de que estoy en el trabajo he seguido el taller, y los continuarè en mi casa, serìa bueno que sigan publicando estos talleres para actualizciòn de igual forma publi

  56. luis dice:

    A la distancia miles de gracias por el tutorial ya que mes has ayudado un mundo personalmente, espero que sigas compartiendo tus conocimientos en otros temas como el de cool editor si esque me puedes acolitar en algo referente a edicion musical desde Quito-Ecuador muchas gracias…………………

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder