¡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.
Jueves, 4 de Septiembre de 2008 a las 02.15
Genial, muchacho.
Maravilloso.
Exitos.
Manu
Jueves, 4 de Septiembre de 2008 a las 10.15
Muy completo.
Espero vean la posibilidad de un taller de Illustrator.
Exitos.
Gaby, Neuquén.
Jueves, 4 de Septiembre de 2008 a las 16.36
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
Viernes, 5 de Septiembre de 2008 a las 13.25
¡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!
Lunes, 8 de Septiembre de 2008 a las 18.43
muy oportuno, las tutorias del curso de adobe photoshop, las aproveche al maximo, espero que sigan con esta modalidad
Lunes, 8 de Septiembre de 2008 a las 19.54
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
Martes, 9 de Septiembre de 2008 a las 16.34
guau q interesante muy bueno eh :p
Martes, 9 de Septiembre de 2008 a las 19.35
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.
Martes, 9 de Septiembre de 2008 a las 19.58
graciaaaaaas!! por tu tiempo, por compartir tus conocimientos y mañas
con nosotros
en horabuena, suerte y aqui seguimos *-*
Martes, 9 de Septiembre de 2008 a las 21.42
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
Martes, 9 de Septiembre de 2008 a las 22.02
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.
Martes, 9 de Septiembre de 2008 a las 22.03
ah se me olvidaba el taller de ilustrator, por fa!
Miércoles, 10 de Septiembre de 2008 a las 12.16
¡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
Domingo, 21 de Septiembre de 2008 a las 15.15
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
Miércoles, 22 de Octubre de 2008 a las 23.56
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.
Miércoles, 29 de Octubre de 2008 a las 14.05
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
Viernes, 7 de Noviembre de 2008 a las 12.46
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
Viernes, 21 de Noviembre de 2008 a las 01.07
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
Viernes, 21 de Noviembre de 2008 a las 11.36
¡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!
Miércoles, 26 de Noviembre de 2008 a las 21.41
sos un capo maestro……gracias por toda la ayuda
Sábado, 13 de Diciembre de 2008 a las 15.12
muy bieno el tutorial me lo voy a leer desde unh principio ´por que quiero usar fotoshop gracias
Domingo, 21 de Diciembre de 2008 a las 00.34
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.
Domingo, 4 de Enero de 2009 a las 00.34
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
Lunes, 5 de Enero de 2009 a las 10.24
Para impresión, además de las medidas que tú dices, debe estar a 300 dpi en CMYK.
Saludos.
Martes, 6 de Enero de 2009 a las 17.08
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
Miércoles, 7 de Enero de 2009 a las 11.50
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!
Lunes, 23 de Febrero de 2009 a las 15.04
me parece fabulosa esta pagina, los felicito y sigan aelante
Lunes, 30 de Marzo de 2009 a las 18.05
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 …
Sábado, 4 de Abril de 2009 a las 19.11
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…
Jueves, 9 de Abril de 2009 a las 03.17
Me parece un excelente documento, quizas habria que incoporar mas ejemplos, pero es funcional, para principiantes como tu servidor.
Felicidades
Felipe
Martes, 21 de Abril de 2009 a las 01.11
Excelente curso muchas gracias´… me ha servido a montones y he podido enseñarlo a otros.. Fraterno saludo. Juan Carlos de Cali Colombia.
Domingo, 3 de Mayo de 2009 a las 21.44
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
Domingo, 24 de Mayo de 2009 a las 12.48
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
Martes, 26 de Mayo de 2009 a las 15.41
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!
Viernes, 26 de Junio de 2009 a las 16.12
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.
Martes, 14 de Julio de 2009 a las 15.16
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.
Lunes, 17 de Agosto de 2009 a las 22.02
hola saben les agradesco mucho por este curso m esirve de mucho gracias ^_^
Lunes, 2 de Noviembre de 2009 a las 13.41
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
Lunes, 30 de Noviembre de 2009 a las 19.36
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….
Martes, 1 de Diciembre de 2009 a las 11.27
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!
Martes, 16 de Febrero de 2010 a las 11.58
juan manuel eres un amor no sabes cuanto me has ayudado con este manual.
UN BESO. GRACIAS
Martes, 22 de Junio de 2010 a las 13.52
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,
Miércoles, 13 de Octubre de 2010 a las 17.32
¡¡MuchÃsima gracias!, extraordinario en verdad.
Viernes, 29 de Abril de 2011 a las 13.56
Muchas gracias ha sido de gran, es espetacular de verdad.
Viernes, 13 de Mayo de 2011 a las 19.38
barbaro, lamentablemente no lo vi en la fecha de elaboracion, pero gracias a ustedes lo dejaron y pude hacer perfectamente…
Sábado, 28 de Mayo de 2011 a las 16.09
una excelente guia…no sabe como me sirvio…
Miércoles, 29 de Junio de 2011 a las 03.09
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…
Sábado, 2 de Julio de 2011 a las 20.53
@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!
Sábado, 2 de Julio de 2011 a las 22.44
uno de estos talleres andube buscando y ahora que lo hallé a ponerlo en práctica
¡¡¡¡¡¡¡¡¡¡¡¡felicitaciones!!!!!!!!!!!!!!!
Lunes, 11 de Julio de 2011 a las 17.00
¡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.
Martes, 16 de Agosto de 2011 a las 14.03
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.
Jueves, 13 de Octubre de 2011 a las 13.53
Aprendi mucho con el tutorial, gracias por todo.
Lunes, 7 de Noviembre de 2011 a las 11.59
¡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
Viernes, 2 de Diciembre de 2011 a las 17.27
MMMMiiilllll,,,,,,,,,,, Gracias por compartir tu conocimiento aprendà mucho de verdad te lo agradezco
Jueves, 26 de Enero de 2012 a las 14.09
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
Jueves, 26 de Enero de 2012 a las 19.03
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…………………