Crear Desde Photoshop Un Sitio Web Moderno, Paso a Paso

14/01/12

Crear desde Photoshop un sitio web moderno, paso a paso. Designios

An ncios Google

Pho o hop B

Wallpape ca

Pho o hop CS2 Pho o hop CS5

B

ca en De ignio

INICIO ARTICULOS GALERIA AFILIADOS ACERCA DE CONTACTO

Historias de diseo para todos .Suscripcion RSS

Ultimos articulos:ShirtMockup, Monta tus diseos en Camisetas. Rendera nos ayuda a conocer la web que viene Extensiones Firefox tiles para diseo web Support Details | Veamos qu usa nuestro cliente Plugins Premium para WordPress realmente utiles Bamboo Invoice, control de facturas simple Escaneo 3D y realidad aumentada con una webcam. Custom Facebook Page Gallery Una galeria de inspiracin sobre pginas creadas en Facebook Freeminders : Themes WordPress Ninite: Descarga masiva de software gratuito

Enlaces (Castellano):CSSBlog Grafico Picante IsoPixel Maquetadores Phothosop Latino Photoshop Lady

Enlaces (Ingles):designios.es/crear-desde-photoshop-un-sitio-web-moderno-paso-a-paso/ 1/18

14/01/12


BitBox Smashing Apps Spoon Graphics Vandelay Design Blog

Pa ne link De acadoModelado de una mosca en Blender (Time Lapse)

Ca ego ia :3D Buscadores Creatividad css Desarrollo Designios E-Commerce Fonts Fotograf a Herramientas Humor Iconos Illustrator Inspiracion Mac Noticias PDF Photoshop Stocks Tutoriales Wallpapers Webs wordpress

A chi o Men alenero 2011 abril 2010 marzo 2010 febrero 2010 noviembre 2009 octubre 2009 agosto 2009 julio 2009 junio 2009 mayo 2009 abril 2009

Me aAcceder RSS Entradasdesignios.es/crear-desde-photoshop-un-sitio-web-moderno-paso-a-paso/ 2/18

14/01/12


RSS Comentarios

Entrada publicada el Jueves, 7 de ma o de 2009 a las 21:12 en la categoria Photoshop, Tutoriales, Webs. Puedes seguir cualquier comentario a esta entrada a traves de su propio hilo RSS 2.0.

Crear desde Photoshop un sitio web moderno, paso a paso.7 de mayo de 2009 Photoshop, Tutoriales, Webs

designios.es/crear-desde-photoshop-un-sitio-web-moderno-paso-a-paso/

3/18

14/01/12


Crea un boceto del diseo de sitio Web completo para un estudio de diseo ficticio, empezando por la creaci n del boceto inicial para luego pasar a disear los elementos de pgina individual. El resultado es un diseo de pgina Web moderna, ntida y limpia, lista para la codificaci n.

Tomando como fuente de inspiraci n diferentes diseos Web, produciremos este diseo web limpio sitio. Como caractersticas importantes incluye bandas horizontales para separar el contenido en reas especficas; un rea de encabezado a todo color introductora del sitio; un mensaje de bienvenida con ejemplos de trabajo; diseo principal de dos columnas y un pie de pagina lleno de recursos.

Un buen comienzo para cualquier diseo es esbozar el planteamiento sobre el papel, el reinado libre del lpiz ayuda a corregir asperezas en el diseoc con facilidad.


4/18

14/01/12


Planificar un esqueleto tambin ayuda a desarrollar una jerarqua en los elementos y da una mejor idea de las posiciones para dichos elementos claves del diseo

Crea un documento nuevo en Adobe Photoshop, Yo tiendo a hacer el tamao de los trabajos similar a la de un monitor de pantalla panormica com n para dar una buena representacin de la apariencia general del sitio.


5/18

14/01/12


Coloca guas en un ancho de 960px en el centro del documento y crear una cuadrcula bsica para colocar los elementos de pgina en ella.

Comienza con la creaci n de la barra de encabezado. Dibuja una selecci n en todo el ancho completo del documento y relleno con blanco. Haz doble clic en la capa para abrir los estilos de capa y aade un degradado superpuesto de gris a blanco ejecutado verticalmente.


6/18

14/01/12


A continuacin, seala el rea de cabecera principal donde se colocar el contenido destacado. En una nueva capa dibuja una seleccin, agregua una superposicin de degradado con una seleccin de dos colores vibrantes. Tambin agrega una sombra interior sutil para darle profundidad al diseo.

Toques sutiles de textura pueden dar vida a un diseo. Con el rea de encabezado seleccionado con una mscara pulsa CMD+May s+C para copiar combinadas, pegalas en una nueva capa. Vete a filtro > ruido >, a continuacin, agrega ruido para producir una textura simple, ajuste el modo de mezcla en Multiply y reduce la opacidad seg n convenga.

Pega en el logotipo de empresa, posicinandolo en la pantalla de acuerdo a la cuadrcula, a continuacin, agrega algunos estilos a travs de las opciones de estilo de capa. Agrega una superposicin de degradado para coincidir con los colores de encabezado de la caracterstica, luego crea una sombra interior muy suave.


7/18

14/01/12


Usa la herramienta de tipografa para crear el texto del men de navegacin, establece el tipo en un gris medio para luego utilizar una versin ligeramente ms oscura para el vnculo activo.

La zona de encabezado destacada es un lugar perfecto para introducir el sitio Web, con el color de fondo vibrante el usuario le da prioridad. Utiliza este espacio para colocar un ttulo de introduccin alegre en una fuente personalizada que coincida con la imagen de la compaa.


8/18

14/01/12


Continuando con el contenido de introducci n, es aconsejable usar Arial o Helvtica como la fuente para que el texto se puede establecer en html, sin tener que recurrir despues a tcnicas de reemplazo de imagen.

Coloca un ordenador porttil en el rea destacada tal como ves en la imagen (una serie de ejemplos puedes encontrarlos aqui ), esto encaja bien en la naturaleza de la compaa de ficci n y crea un gran rea focal para ver ejemplos de trabajos en la pantalla de porttil.


9/18

14/01/12


Enfatiza en este punto focal con un degradado radial que emita por detrs del porttil. Esto agrega detalle adicional eleva el elemento dentro de la pagina.

Debajo de la cabecera principal, hazs otra selecci n y rellena con un degradado gris a blanco.


10/18

14/01/12


Divide la seccin central de la pgina en dos columnas con guas en relacin con las lneas de cuadrcula. A la izquierda tendremos un panel de contenido principal, mientras que a la derecha tendremos una barra lateral ms delgada. Utiliza la herramienta de tipografia para agregar alg n contenido ficticio. La alteracin de tamaos de letra y espaciados hace al usuario los pasajes mas digeribles a la vez que facilmente legibles.

A continuacin de esta rea de contenido principal podra existir otra para mostrar las entradas ms recientes del blog. Divide la columna en otras de dos y inventa una seleccin de entradas para el ejemplo. Los enlaces del titulo debe destacan para el usuario como algo pulsable/clickeable, cambiar los colores puede dar pistas visuales al usuario.


11/18

14/01/12


Utiliza la herramienta de rect ngulo redondeado para dibujar un cuadro en la barra lateral. El color original no importa demasiado ya que el estilo se lo daremos en la proxima etapa.

Haz doble clic en la capa y agrega una gama de estilos de capa, incluyendo un degradado gris a blanco, un fino trazo gris y una sombra interior suave


12/18

14/01/12


Utiliza este zona de la barra lateral para desarrollar una secci n de proyecto destacado. Puedes incluir elementos como una captura de pantalla pequea y un pequeo pasaje de texto.

Dibuja otro Rectngulo redondeado para usar como un bot n, agrega un par de estilos de capa como una superposici n de degradado y trazo para dar estilo al bot n para que coincida con el tema general, limpio y gris.


13/18

14/01/12


Creaa una etiqueta descriptiva y corta para el bot n invitando al usuario a continuar a travs del sitio para ver ms proyectos.

Identifica el final del contenido dibujando un rea de pie de pgina en la pantalla. Rellena el rea con un gris claro para diferenciarlo de la zona principal de contenido.


14/18

14/01/12


Dibuja una mscara circular y rellenala con un degradado radial negro a transparente. Presione CMD+T para transformar la selecci n, estrecha y estira el degradado para formar una sombra larga y delgada como el dibujo.

Centra la sombra en la pantalla y luego elimina el exceso por encima del pie de pgina. El resultado es una sombra sutil que levanta la pgina principal, agrega un poco de toque de detalle al diseo.


15/18

14/01/12


El rea del pie de pgina es un lugar perfecto para depositar elementos secundarios, un ejemplo podra ser un rea de inicio de sesi n de cliente. Realiza el diseo con la herramienta de tipografa y dibuja un par de cuadros de entrada de datos. Dale a los cuadros una sombra interior suave de estilo.

Utiliza el rea central del pie de pgina para mostrar un mensaje acerca de la sociedad. Establece el texto utilizando encabezado coherente y tamaos de fuente de texto de cuerpo.


16/18

14/01/12


Por ltimo, agrega un punto de contacto en la parte inferior derecha. Estos detalles, mas adelante, sern tiles para el usuario en todo el sitio. Dale importancia a los aspectos ms importantes a travs de tamao o ms fuerza en color o estilo.

El diseo final ajusta a todos los elementos deseados claramente en la pgina, manteniendo todo alineado a la base de la cuadrcula. El resultado es un diseo estructurado y limpio con un montn de grises sutiles para aadir profundidad. El color se utiliza para destacar reas destacadas y contenido importante. Este articulo es una traduccion libre al castellano del tutorial que Chris Spooner ha publicado en Line25 . CONTINUACION DEL ARTICULO EN: Cmo convertir un boceto de photoshop a xhtml/css 5 comentarios a Crear desde Photoshop un sitio web moderno, paso a paso. 1. Crear desde photoshop un sitio web moderno, paso a paso 11:18 20 de mayo de 2009 [...] Crear desde photoshop un sitio web moderno, paso a pasowww.designios.es/crear-desde-photoshop-un-sitio-webmoderno- por lordmax hace pocos segundos [...]designios.es/crear-desde-photoshop-un-sitio-web-moderno-paso-a-paso/ 17/18

14/01/12


2.

regalbum 3:06 1 de agosto de 2009 wow, gracias, por el tutorial, ahora lo continuare con el otro articulo.

3.

crisitan 18:41 25 de julio de 2010 me parecio excelente muy bueno

4.

angel 20:27 7 de noviembre de 2010 Algo as es lo que estaba buscando. Muy bueno

5.

Giselle 6:42 20 de noviembre de 2010 Excelente!!! me sirvi de mucha ayuda. Gracias

Deja n comen ario!Nombre (requerido) e-mail (no sera publicado) (requerido) web/blog

En iar

2009 Designios - Logo: P. Maojo Gestionado por LordMaX Feed RSS | CSS: DkBlog


18/18

Crear Desde Photoshop Un Sitio Web Moderno, Paso a Paso

Documents

Transcript of Crear Desde Photoshop Un Sitio Web Moderno, Paso a Paso