Diseño de una Pagina Web con Photoshop CS parte 1

Video Tutorial Photoshop de Interfaces y Diseño Web

Tutorial por Paquo360 de Sólo Photoshop

En esta primera entrega arranco ya con las guías dispuestas de acuerdo a lo que voy a crear, además de tener al lado un psd con las imágenes que se van a agregar y otro con fragmentos de texto Lorem Ipsum, todo para ahorrar tiempo y no distraer mi atención.

---------
Este video no pretende ser un detallado tutorial de como se dibuja una pagina web, simplemente es un ejemplo de como desarrolle este diseño, por lo que esta dirigido a usuarios con un nivel de Medio a Avanzado en el manejo de Photoshop quienes dominen a la perfección las Herramientas Básicas del programa. Es algo extenso, así que lo hemos dividido en 4 partes de 5 mins. cada uno. La canción en esta primera parte es "Eyes on Me" de Faye Wong, la que escuche por primera vez en el juego Final Fantasy VIII.
---------

Desarrollo.
- El documento con fondo RGB con fondo transparente tiene un tamaño de 738 X 226 px.
- Primero se rellena el fondo con el color 843B00, el cual también tomaré como base para los demás colores.
- Luego se crea la base del diseño y se rellena de blanco (ffffff)
- Se agrega la primera imagen a la izquierda.
- Entonces una columna central que será la base del menú, esta se hace con un degradado un poco inclinado.
- Se continúa con una columna derecha que soportará mayormente los contenidos de la pagina, en especial del home.
- Viene entonces una sombra entre la columna central y la derecha.
- Se agregan otras dos imágenes externas. Se ajusta su tamaño y se agrega un borde. Con en cambio de tamaño una se difumina un poco, lo cual se revierte con una máscara de enfoque.
- Finalmente se agrega una base a la imagen izquierda, luego veremos para que.

Espera un momento mientras carga el video...

Esta es tan solo la primera de 4 partes. Al final quedará así:

Diseño de una pagina web

Diseño de una Pagina Web 1 Guias

- Diseño de una Pagina Web con Photoshop CS 1

- Diseño de una Pagina Web con Photoshop CS 2

- Diseño de una Pagina Web con Photoshop CS 3

- Diseño de una Pagina Web con Photoshop CS 4

Hemos creado el correo electrónico tutoriales @ solophotoshop.com para recibir tus tutoriales y artículos.
Registrate aquí para consultar, comentar, recibir novedades y valorar los Tutoriales y Artículos

 Fecha: 17/10/2006  CUCARACHA escribió:
muy bueno, espero ansiosamente la 2º parte

 Fecha: 17/10/2006  SHIDARTHA escribió:
esta muy bien, pero porfavor podrias si no es mucho pedir poner el documento con las guias, para ir practicando. Gracias.

 Fecha: 17/10/2006  PAQUO360 escribió:
Pondré un jpg, con las guías y de ahí las puedes rehacer ustedes.

 Fecha: 17/10/2006  SALCO escribió:
está my bueno pero fuera mejor el documento con la guía para los que no tengan mucho dominio, vayan practicando, pero me gusta cantidad

 Fecha: 17/10/2006  RYCKYHN escribió:
necesito saber como se guardan los diseños para pasrlos a pagina web marvinricardo@gmail.com

 Fecha: 18/10/2006  PRESSESMAN escribió:
Genial, esperaré el próximo video, pues manejo Photoshop pero solo para la edición de imagenes y me gustaria desarrollar y maquetar Web por este preograma ya que me parece el mejor

 Fecha: 18/10/2006  LA VOZ DORMIDA escribió:
La verdad si esta bueno esto de hacer paginas web con photoshop, solo que deberias poner los pasos a seguir para los que apenas vamos empezando con esta onda sepamos que hacer, de cualquier forma, felicidades esta super

 Fecha: 19/10/2006  PAQUO360 escribió:
Para los recientes en Photoshop les recomiendo que antes vean los tutoriales donde se explica muy detalladamente como elaborar una plantilla web con photoshop, image ready y dreamweaver. http://www.solophotoshop.com/Tutorial-Disenio-y-Maquetado-de-Plantillas-WEB-1-c-217.html http://www.solophotoshop.com/Tutorial-Disenio-de-Interfases-WEB-1-c-205.html Y en general a todos los tutoriales que hay en la sección de Interfases y diseño Web: http://www.solophotoshop.com/Tutoriales-Interfases-y-Disenio-Web-c-3.html

 Fecha: 20/10/2006  CARLOS TORRES escribió:
perfectooooooooooooooooooo

 Fecha: 20/10/2006  KOTGUESS escribió:
Muy bueno. Espero el segundo de la serie pero coincido con quienes piden un muestra de este trabajo en un documento que puedas consultar cada vez que sea necesario sin tener que estar viendo el video. Saludos

 Fecha: 23/10/2006  ELNENE escribió:
como podria obtener el video para poderlo ver

 Fecha: 26/10/2006  DELPRADO escribió:
es smith de boca chica, gracias por esto

 Fecha: 27/10/2006  THESAINTRULEX escribió:
Muy Buen el tutorial se aprende mucho.... Saludos de Venezuela... Seguire a ver a la final visiten el site http://www.grupochamos.com

 Fecha: 28/10/2006  DINO escribió:
Bueno Necesito Que Me ayudes a CREAR UNA PAGINA WEB GRATIS! PORFAVOR! deog_14@hotmail.com

 Fecha: 30/10/2006  OTAKUMAIL escribió:
El tamaño del documento tiene que ser ese?

 Fecha: 31/10/2006  JJAR escribió:
Excelente ayuda.

 Fecha: 06/11/2006  LOLOESTEBAN escribió:
Me gusta.

 Fecha: 08/11/2006  ANDREU77 escribió:
Excelente no puedo esperar por la 2da parte

 Fecha: 08/11/2006  BOSSPETTA escribió:
Ya veo que nuevamente habéis borrado mi comentario. Así que me imagino es este durará poco. La verdad es que en esta web se encuentran cosas interesantes, pero no se os ocurra opinar algo que no les guste a los admins porque no lo borran... ya me han borrado 3 comentarios... por cierto, yo también estoy deseando ver la segunda parte del tutorial, no me creo que se cuelgue un artículo de como hacer una web y lo hagan a base de "tablas"... eso dejó de hacerse y recomendarse hace años... pero bueno, como este comentario va a ser borrado...

 Fecha: 09/11/2006  PJAMES escribió:
bueno, estoy muy contento con esta pagina y me ayuda mucho...pero tambien quisiera que me explicaran que "...lo hagan a base de tablas...", no entiendo. por lo demas son tutoriales muy buenos. Pd. Bosspetta si pudieras publicar tu aclaracion, seria interesante. mi email: jamesneoo@gmail.com, gracias

 Fecha: 14/11/2006  BIANCA86 escribió:
Excelente, espero un documento con los pasos para que pueda praticar, gracias

 Fecha: 18/11/2006  SERTORRES2003 escribió:
Estos tutoriales estan bueno pero de que sirve si la enseñanza, o muestra de algo importante e interesante para aquellos que nos gusta el diseño web; no se hase, lento y pausado, a y por supuesto con audio. Nota 3

 Fecha: 30/11/2006  RADIO escribió:
Esta perfecto, siempre recurro a esta página por los contenidos que no encontre en ninguna otra, LES FELICITO ENORMEMENTE POR LA LABOR QUE HACEN. Y aprovechando el momento quiciera saber si alguien de encargado del tutorial pudiese enviarme ese VIDEO POR EMAIL, lo necesito extraordinariamente y no cuento con acceso a internet ultimamente, por tal motivo quiciera saber si pueden enviar a mi EMAIL los TRES VIDEOS que ya estan vigentes o si puedo descargarmelos con algun programilla como los atrapadores de flash y demas. Espero atenciosamente vuesta ayuda.

 Fecha: 30/11/2006  RADIO escribió:
MI EMAIL: ronalde2003@gmail.com

 Fecha: 05/12/2006  SHASHITO escribió:
muy bien he ta chevere, espero la segunda parte...ed_rev@hotmail.com

 Fecha: 06/12/2006  MARKDESIGN escribió:
bueno y muy bien la explicaci{on y pausada---gxs espero la siguienye

 Fecha: 06/12/2006  VICOTEC escribió:
muy bien estuvo bien chida

 Fecha: 10/12/2006  JAVITIERNA escribió:
no sale como se empiesaaa como se pinto el fonfoo todo e smuy rapido me marea y kedo en blanko =(

 Fecha: 12/12/2006  JEILY escribió:
me gustaria ver la segunda parte

 Fecha: 13/12/2006  ALEXMIERDA escribió:
mierda

 Fecha: 13/12/2006  PINZBOCA escribió:
no se escucha la voz del tutor. Mario B

 Fecha: 13/12/2006  PINZBOCA escribió:
solo se escucha musica, que pasa con la voz del tutor

 Fecha: 17/12/2006  YAADEIN escribió:
ahora ya tengo mas herramientas para diseñar eso me gusta jejeje

 Fecha: 20/12/2006  YUVI escribió:
bacano bakno

 Fecha: 21/12/2006  THEMICKISS escribió:
Buenazo... no me gusto mucho la music.. pero ta super chevere el tuto.. se agradece... y espero q sigas enseñando he!!!!y dandote el time... seguir haciendo mas de estos...

 Fecha: 28/12/2006  STELLA ELECTRA escribió:
QUIEN ME AYUDA A USAR EL PHOTOSHOP PLEASE!! AGREGEN INDUSTRIAL.ENGEL@HOTMAIL.COM GRACIAS :D

 Fecha: 29/12/2006  JUANDG escribió:
xvr peo me gustqaria saber como aces el dibujo. es decir como sabes q espacio ocupara cad aimagen o nombre

 Fecha: 04/01/2007  TRUMAN_1982 escribió:
man muy bueno tu tutorial pero con esas medidas que pones sale muy pequeño el espacio

 Fecha: 05/01/2007  CARLOSPEN escribió:
Esta bien bueno, aunque a veces dificil de seguir para los que no somos muy veloces mentalmente..SALUDOS DE COLOMBIA.

 Fecha: 06/01/2007  NADIM escribió:
Es bueno el tutorial.Photoshop es muy potente y apenas comienzo a descubrirlo. Para mejorar el documento sugiero suprimir la música y que el tutor explique cada paso. Enhorabuena

 Fecha: 16/01/2007  PRIMO escribió:
chido para alguien q apenas empieza como yo!!!

 Fecha: 17/01/2007  FGALLARD escribió:
mi hermano muy bien, te quedo muy bien el diseño de la pagina web de shakira, pero podrias hacer un tutorial incluido animaciones en flash te lo agradeceria mucho atte Fg fgallard23@yahoo.es

 Fecha: 23/01/2007  ELFAKIR escribió:
me parecen magunificos los videos, ya que los que no sabemos nada sobre Photoshop podemos hacer alguna cosita guiandonos por ellos. Enhorabuena.

 Fecha: 24/01/2007  LUCHOMANIZALES escribió:
gracias al diceñador de esta pagina hasta ahora aprendo ha crear imagenes en Photoshop gracias, y seria bueno los pdf para estudiar en sitios donde la red no llgue. gracias

 Fecha: 25/01/2007  PINZBOCA escribió:
señores cada vez que trato de ver el video de diseño de una pagina web 1 solo escucho una cancion no se que pasa, pero ya es bastante tiempo que pasa lo mismo "2 meses" deseo que me envien un mensaje para ver como corrijo este problema

 Fecha: 28/01/2007  SNEYONE escribió:
mis felicitaciones loko grax por la web esta rebuena me a servido bastante sigan asi vale por todos los tutoriales

 Fecha: 31/01/2007  GWENDAL escribió:
Pero de cuanto es exactamente la pagina¿? de que tamaño¿? porque desde luego los que pones no quedan bien, y abriendo directamente el jpg de las reglas queda tambien muy pequeño con respecto a lo que se ve en el vidio. Porfavor, espero sus respuestas aqui o preferiblemente en gwendal_fantasy@hotmail.com gracias

 Fecha: 02/02/2007  DNAMATRIX escribió:
Braaavo!

 Fecha: 04/02/2007  CHUYIN escribió:
quiero felicitar a todas las personas que colavoran con los tutorials saludos desde los angeles california no a via encontrado un citio en español creo que ya lo tengo gracias...

 Fecha: 07/02/2007  RICARDOGC escribió:
ESPERO EL SIGUIENTE

 Fecha: 09/02/2007  AKARYU escribió:
muchas gracias

 Fecha: 14/02/2007  MARILUKA escribió:
Exelente AMO FOtoshop se peude hacer de todo oigan me pregunto si se podra sacar al Myspace.com diseñar el fondo y todo lo demas???????

 Fecha: 15/02/2007  ARTURO9339 escribió:
creo que para evitar tanto comentario negativo podrias poner el nivel de conocimiento de photoshop. por lo demas esta excelente para los que tenemos la suerte de entender un poco de photoshop. Gracias por tu aportacion... espero mas.

 Fecha: 25/02/2007  REGI escribió:
Esta muy chulo , algun dia lo pondre en practica.:)

 Fecha: 22/03/2007  IZHAYANA escribió:
wooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooow

 Fecha: 30/03/2007  CHESS escribió:
como puedo descargar los videos para verlos off line en mi pc, gracias...

 Fecha: 09/04/2007  VICHE escribió:
esta muy bueno, por favor como pudedo descargar el video tutorial para trabajar sin conectarme en la red.mi mail es leonardo630@hotmail.com gracias

 Fecha: 26/06/2007  BONACHON escribió:
Q ESTRES ESA CANCION...PON ALGO Q VALGA LA PENA QDARSE MIRNADO EL TUTORIAL

 Fecha: 03/07/2007  FEDOCHA escribió:
Las lineas celestes que estan en toda la hoja para que son??? Hay que hacerlas como se hace???

 Fecha: 09/07/2007  AZTEKERO escribió:
Mira exactamente lo que quiero preguntar como se hace esas hoja asi? me imagino que es para colocar bien las cosas, pero como se hace? ¡1ZALU2

 Fecha: 18/07/2007  AZTEKERO escribió:
Amigos aqui les dejo para los que no supieron como hacer las guias - bases como empieza nuestro amgio para que lo descargen esta en .psd http://www.mediafire.com/?7aobethfdb4

 Fecha: 27/08/2007  THECROW escribió:
Hola amigos como bajo estos videos

 Fecha: 16/04/2008  INMA_22 escribió:
El diseño esta genial pero donde esta los pasos que hay q seguir jeje Gracias ^^

 Fecha: 21/04/2008  MMOYA escribió:
Buena

 Fecha: 16/06/2008  ALAN123 escribió:
puedo Descargar el video?

 
© Copyright 2001 - 2008
Solo Photoshop, Tutoriales, VideoTutoriales, Artículos y Recursos de Photoshop y Flash.