Diseña un pagina web portfolio en Photoshop

Diseña un pagina web portfolio en Photoshop Tutorial de: Photoshop CS3+ Dificultad: Facil Tiempo: Variable Resultado final Recursos Las imagenes del slider Las flechitas que utilice para el “slider” Para los titulos: Impact Para los textos: Arial Paso 1 Lo primero sera crear un nuevo documento, en mi caso es de 1000px de ancho y 1295px de alto Paso 2 Lo rellenamos con la herramienta bote de pintura (G) con el color #181818. Luego vamos a Filtro > Ruido > Añadir ruido y le ponen la siguiente configuracion: Por ultimo le agregamos un degradado asi: Paso 3 El header Teniendo ya el background/fondo es hora de crear el header. Para eso usamos la herramienta marco rectangular (M) seleccionamos todo el ancho del fondo, con un alto de 150px y color de #262626. Despues le agregue un filtro > ruido > añadir ruido de la misma manera que el paso anterior. Una vez hecho esto hacen doble clic en la capa y se abre la ventana de Estilos de capa. Le agregamos una sombra paralela y un trazo de esta manera: Paso 4 Ahora pasaremos a crear lo que seria el logo y el menu. Logo Para el logo hacemos algo sencillo, vamos a Herramienta rectangulo (U) + clic secundario + seleccionamos Herramienta forma personalizada. Para el logo hacemos algo sencillo, vamos a Herramienta rectangulo (U) + clic secundario + seleccionamos Herramienta forma personalizada. Seleccionamos una que nos guste y la rellenamos con un degradado con los siguientes parámetros: Despues le agregue una pequeña descripcion o slogan (esto es opcional) y quedo asi: Menu Para el menu: con la herramienta Texto/Type (T) ponemos un menu de ejemplo: “INICIO GALERIA CONTACTO”. Le aplicamos el mismo estilo que al logo: Paso 5 Ya teniendo la parte del header/cabecera terminada pasaremos a diseñar el body/cuerpo. Lo primero a crear es el slider de la pagina. Slider Creamos una capa, hacemos un rectangulo con la Herramienta Marco Rectangular (M) con color de #000000. Después duplique la capa del background/fondo y la puse por encima del rectangulo que cree e hice un Clipping mask/Mascara de recorte Control + Alt + G. Para cambiar el color hacemos Cltr + U y le damos un poco de luminosidad de esta manera: Recuerdan las imágenes que deje mas arriba? Bueno es hora de usarlas: Las ponemos por arriba del rectángulo que acabamos de crear y hacemos otro clipping mask/mascara de recorte con Ctrl/Command + Alt + G: Una vez creado el slider, es hora de agregarle unos textos de ejemplo y las flechas de direccion. Para el titulo: Impact 12pt #ac4548. Para la descripcion: Arial 5pt #ffffff. Para el “read more”: Impact 5pt #ac4548 subrayado. Paso 6 Ahora falta crear la parte del contenido, que constara de dos partes: la principal y un sidebar. La principal Para el titulo: Impact 12pt #ffffff Para el contenido: Arial 8pt #ffffff Sidebar Titulo: Impact 12pt #ffffff Subtitulo: Arial 8pt #ffffff Contenido: Arial 3pt #ffffff Imagen/Viñeta: Cree una nueva capa y con la Herramienta Forma Personalizada seleccione la siguiente forma le hice un contorno del color #933e42, duplique esa capa y la moví un poco. Y quedo asi: Paso 7 Footer Este es el ultimo paso y el mas sencillo. Es hora de crear el footer: Para eso con la herramienta marco rectangular dibujamos un rectangulo, 40px de alto y todo el ancho del documento, la rellenamos de #000000 y le ponemos una descripción. Y ya esta tenemos diseñada nuestro web layout! saludos de harry houndini