Base del Men

Para hacer este men vertical necesitamos crear un nuevo documento, en mi caso lo hice de 300 x 250 como lo muestra la siguiente imagen:

La base del men ser de 180px de ancho por 210px de alto, pero antes de crear la base he agregado unas guas que delimitan esa rea para que nuestra forma sea del tamao exacto. Basndote en las guas y con la herramienta de Rectngulo seleccionada crea la base del men justo como lo muestra la siguiente imagen.

A continuacin vamos a aplicar unos estilos de capa al fondo del men, pero para ello hay que crear una nueva capa para trabajar sobre esta. Luego agregamos los siguientes estilos de capa: Sombra paralela

Sombra Interior

Resplandor Interior

Bisel y Relieve

Trazo

Y as queda nuestro fondo despus de aplicarle los estilos de capa:

Primer Botn
Luego, aprovechando que el trazo tiene 5 px de ancho agrgale guas justo como lo vemos en la siguiente imagen y despus una gua extra a 40 px de distancia como tambin lo vemos en la imagen. Con esta nueva gua vemos ya la silueta del primer botn que crearemos.

Toma la herramienta Rectngulo y traza el primer botn:

Para darle forma le aplicaremos los siguientes estilos de capa: Sombra Interior

Resplandor Interior

Superposicin de Degradado

Y as nos ha resultado el primer botn despus de la aplicacin de los estilos de capa:

Agregar el Texto
Toma la herramienta de texto y escribe sobre este primer botn, en mi caso le he agregado la palabra INICIO. A este texto le incluimos luego una pequea sombra para que luzca mejor.

Sombra paralela

Finalmente le incluimos una flecha (como lo hicimos en el tutorial de botn de agua), esta flecha tiene el mismo estilo del texto (Sombra paralela) del texto. He ajustado a un 80% la opacidad de la forma.

El Resto de los Botones

Ahora agrupa las capas del botn, el texto y la flecha y asgnale un nombre, en mi caso lo he llamado Grupo Botn Inicio justo como lo vemos en la siguiente captura:

Duplica el Grupo Botn Inicio para crear el resto de los botones, ordnalos y nmbralos de acuerdo a las opciones de tu men. En mi caso es INICIO, SERVICIOS, CLIENTES, NOSOTROS y CONTACTO. As como lo puedes ver en la siguiente imagen.

Botn Activo
Finalmente vamos a crear un efecto distinto para aparentar el estado activo de los botones del men. Aplica los siguientes estilos de capa a uno de los botones. Sombra Interior

Resplandor Interior

Bisel y Relieve

Superposicin de Degradado

Y listo, hemos terminado nuestro Men Vertical el cual es en realidad muy simple, a pesar de que aparenta una complejidad mayor. Lo complicado es hacer el primer botn, el resto son copias del primero y eso nos ahorra mucho tiempo.

Espero que este quinto tutorial de la serie Elementos de diseo para Interfaces Web te sea de mucha utilidad. Nos vemos en el siguiente muy pronto.

Luego del tutorial Elegantes Botones Pastel vamos a trabajar con el segundo de esta serie Moderno Botn Plstico el cual es un poco ms complejo pero aun no requiere conocimientos extraordinarios del Photoshop. Vamos a crear un nuevo documento para nuestro botn, si lo deseas crearlo con las mismas caractersticas que yo utilic. Entra en Archivo > Nuevo.

A continuacin hay que activar las reglas y crear unas guas que nos ayuden a centrar nuestro nuevo botn. El botn ser de 220px de ancho por 80px de alto. Toma la herramienta Rectngulo redondeado y con un radio de 35px deslzate usando las guas para crear la forma del botn, justo como lo vemos en la siguiente imagen.

Aplicacin de Estilos de Capa

Para crear el efecto plstico de nuestro botn usaremos nuevamente estilos de capa, los cuales son sencillos y efectivos, pero sobre todo se pueden guardar para posteriores usos. Haz doble clic sobre la capa del botn en la paleta de capas y aparecern las opciones de Estilos. Siguiendo los parmetros de las prximas imgenes lograremos nuestro estilo efecto plstico:

Resplandor Exterior

Resplandor Interior

Superposicin de Degradado

Trazo

Estilo Plstico

Iluminacin del Botn

Un efecto que es difcil de lograr con los estilos de capa, es el de la iluminacin, la cual realza bellamente el contraste del diseo, por ese motivo lo haremos a la manera tradicional, con un par de capas blancas desenfocadas y jugando un poco con los Modos de Capa. Aprovechando las guas creamos una seleccin esfrica alrededor de nuestra figura, tal cual lo podemos ver a continuacin:

Luego bajamos la seleccin y la rellenamos, sobre una nueva capa, con un color blanco, en la imagen se aprecia perfecto como debe quedar:

Deseleccionamos presionando Ctrl + D. Ahora hacemos lo mismo pero en una nueva capa y ahora la movemos hacia arriba. Si lo deseas puedes duplicar la primera capa y luego le inviertes la posicin y la subes a la posicin adecuada que podemos ver en la imagen:

Aplicamos un Desenfoque Gaussiano de 10px de Radio (Filtro > Desenfoque > Desenfoque Gaussiano) en ambas capas, luego es preciso cambiarles el Modo de capa a Superponer y reducir la opacidad a valores que van del 50 al 75% dependiendo de lo que deseas lograr. Y en realidad ya tenemos listo nuestro Moderno Botn Plstico, sin embargo le agregaremos algunos detalles sencillos para hacerlo lucir mejor.

Elementos Extra
Pues le agregaremos algo de texto y una de las formas que trae el mismo photoshop, luego con algunos sencillos efectos de capa quedarn listos. En las Formas Personalizadas del photoshop encontramos una gran cantidad de figuras que podramos utilizar, en esta ocasin he usado una flecha sencilla la cual he duplicado y rotado para hacerla ver como una doble flecha que nos indica una descarga o algo as, seguramente a ustedes se les ocurrir algo mejor jaja. Una vez unida la forma le aplicamos los estilos de capa Sombra Interior y Superposicin de colores justo con los parmetros que observamos a continuacin:

Es preciso bajar el Relleno de la capa a 0%, esto lo hacemos para desaparecer el color original de la forma y que se muestren solo los Estilos de capa recin aplicados.

Con la herramienta de Texto he escrito Botn Plstico y luego con estilos de capa le aplicamos la siguiente sombra paralela. Juega con las opciones para que logres otros y mejores resultados si as lo deseas.

Finalmente he agregado un texto alternativo que por falta de ideas le he puesto Lorem Ipsum y se le aplica tambin una sombra, en este caso un color adecuado al color del mismo botn. La siguiente imagen te muestra los parmetros:

Y listo tenemos nuestro sencillo pero llamativo y Moderno Botn Plstico, que seguramente te ser de utilidad en tus proyectos web.

Nos vemos en el siguiente tutorial de esta serie

Para Dibujar

Arte

Retoque

Jailbreak s oftware for iphone

En nuestro Tutorial del ao 2002 sobre este tema, y tal como comentamos en el Resumen del Tutorial de Diseo y Maquetado Web, decamos que en las Parte 1, Parte 2, Parte 3 y Parte 4 nos ocupbamos del Dibujo del Diseo Web, y en la Parte 5, utilizbamos ImageReady para cortar el diseo y ser utilizado en la Web. En las ltimas versiones de Adobe Photoshop, no es necesario usar ImageReady ya que el mismo Photoshop incluye la Herramienta de Corte (Slice Tool). Este tutorial contiene las capturas de Adobe Photoshop CS3, pero con leves cambios se puede realizar lo mismo en Photoshop CS y CS2. Para dibujar este diseo, pueden usar nuestro tutorial en la Parte 1, Parte 2, Parte 3 y Parte 4, o pueden descargar el archivo ac: Dibujo sin Cortes Luego de abrir el archivo, vamos seleccionar la Herramienta de Corte (Slice Tool), para poder seleccionar cada uno de los elementos grficos del diseo.

De esta forma es que le indicamos a Photoshop CS3 como dividir el diseo para obtener pequeas imgenes que se insertaran en el HTML de nuestra Web. La forma de trabajo es sencilla, vamos a marcar los elementos como el logo, la zona de banners, el men, etc. de cada parte y realizar el Corte arrastrando el ratn con la herramienta Corte (Slice Tool), como muestra la imgen.

Con paciencia y de la misma forma, vamos a ir cortando todos los elementos hasta que quede como se muestra en la siguiente imgen.

Les dejo el archivo terminado, con los cortes ya realizados, para descargar ac: Dibujo con Cortes.

Con esto que hemos hecho ya podemos llevar nuestro diseo a Dreamweaver CS3 (o una versin anterior u otro editor si lo prefieren), para Guardar el HTML debemos hacer lo siguiente: Archivo, Guardar para Webs y Dispositivos

Luego debemos seleccionar la solapa de Optimizacin (Optimized), donde veremos nuestro diseo con los cortes, y presionamos en el botn Guardar (Save)

En esa nueva pantalla vamos a asegurarnos y controlar estos 5 puntos:

1. 2. 3. 4. 5.

El nombre del archivo HTML, en este caso le di: index.html Tipo de archivos que guardaremos: HTML y las Imgenes Seteos Personalizados (Custom) Cortes Todos (All Slices) Presionamos Guardar (Save)

Listo !!, con esto tenemos nuestra pagina Web cortada y lista para trabajarla en Dreamweaver CS3 (u otra versin u otro editor HTML). Pueden ver el resultado funcionando ac: http://www.artecreativo.net/sp/410/sitioweb1 Pueden descargar el archivo comprimido con HTML e imgenes ac: Diseo Web HTML e Imgenes En la prxima entrega veremos como optimizar las imgenes para que sean menos pesadas.

Uno de los primeros tutoriales, perdido por algun tiempo pero tan vigente y todavia UNICO en la web luego de casi 5 aos. Paquo360 nos ensea a crear una Interface Web, sencilla y atractiva de esas que atraen a los visitantes y es sin embargo sencilla de elaborar. Nota: Si bien fue desarrollado en Photoshop 6, se puede ejecutar en Photoshop CS 2 sin problemas !! 1.- Preparacin del rea de Trabajo. Esta es nuestra Interface en paales, tan slo es un esbozo de lo que ser. En ella podemos ver ya las medidas y las posiciones que ocuparn tanto el nombre de la empresa y el logotipo. Esta imagen la encuentras en el zip de imgenes en tamao real, pero por si la quieres hacer desde cero, la imagen es de 800 600 px con fondo transparente.

A continuacin Presiona Crtl + R para ver las Reglas, hecho esto podemos utilizar las guas: haz clic encima de una regla, vertical u horizontal segn sea el caso, y sin soltar arrastra hacia el diseo, y con esto te aparece una gua. Usualmente de color azul, estas te dan mayor exactitud a la hora de dibujar. Hay que poner una en cada medida. La imagen te muestra cmo deben de quedar.

Hay que activar el Salto: Ver>Salto a>Guias (View>Snap To>Guides) Una vez listas las gua podemos iniciar con nuestro diseo, lo primero que hay que hacer es dibujar los distintos elemento de fondo.

2. Diseo de Elementos Bsicos de la Interface. Crea una Nueva Capa: Capa>Nueva Capa (Layer>New Layer) luego toma la herramienta Marco Rectangular , haz clic y sin soltar crea un rectngulo vertical desde 0 hasta 140 px luego rellnala con un gris muy oscuro, casi negro (333333) y nos queda as, sin la capa de fondo (el dibujo a lpiz). Deselecciona Presionando Crtl + D.

Hay que crear una Nueva Capa y con Marco Rectangular siguiendo las guas para formar la primera crestilla. Seguimos con la gama de grises, pero esta vez menos bajo aun (666666), y disminuimos su opacidad hasta un 50%. El rectngulo va de 90 a 520 px Horizontal y de 140 a 160 px vertical (cresta inferior) Ahora hay que crear una punta, para esto necesitamos ir a: Editar>Transformar>Distorsionar (Edit>Transform>Distort) Y presionando la tecla Shift arrastramos la punta inferior derecha de nuestro rectngulo hacia arriba. Finalmente Presiona Aceptar (Enter) en tu teclado.

Deselecciona. Duplicamos esta capa arrastrndola hasta el icono de Nueva Capa (New Layer) en la paleta de Capas.Presiona Ctrl + T o ve a: Editar>Transformar>Escalar (Edit>Transform>Scale) y arrastra la parte inferior de la forma hasta gua de 495 px horizontal. Pon la opacidad de esta capa en 75% (cresta media). Haz lo mismo con otra, duplica la primera, sin embargo colcala a la altura de la gua de 470 px horizontal y una opacidad del 100% (cresta superior).

En este momento nos viene bien ver la capa de fondo, color blanco, para empezar a distinguir entre los distintos componentes de la Interface, que no son blancos. Crea una Nueva Capa (New Layer) y rellnala de blanco. Y ahora s podemos distinguir claramente el efecto de las transparencias en las crestillas.

As es como vamos en las capas, tan slo son 5 junto a nuestro fondo blanco artificial. Para nombrar a las capas debes de hacer clic con el botn derecho del Ratn sobre la capa y del men emergente seleccionar Propiedades de Capa (Layer Properties).

Hemos terminado los elementos del fondo y as vamos hasta ahora:

El siguiente paso es dibujar una barra gris: sobre una Nueva Capa (New Layer) a la que nombraremos "Barra gris" hay que colocar una seleccin que recorra horizontalmente de lado a lado el diseo y que verticalmente se restrinja entre las guas 50 y 90 px. Luego lo rellenamos de Gris Claro (CCCCCC). Deselecciona luego.

Vamos por una nueva barra, en este caso de color Verde (CCFF00). El procedimiento es el mismo de la anterior, slo que los limites verticales de esta van de 65 a 90 px. Sin perder la seleccin rellena (CCFF00). Entonces deselecciona y vers algo ms o menos as.

Es hora de hacer algunos ajustes sobre la barra gris. Dirgete a: Editar>Transformar>Distorsionar (Edit>Transform>Distort) y con la tecla Shift presionada (para evitar desviaciones) arrastra

la punta superior derecha de tu barra gris hasta la gua vertical de 600 px y la inferior hasta cerca de los 650 px. Finalmente presiona Aceptar (enter) en tu teclado.

Las siguiente es la ultima barra que necesitamos y la llamaremos "Barra Mayor". Coloca una Capa Nueva (New Layer) justo bajo la capa "Barra Gris" Esta capa ser la encargada de soportar tanto el titulo como el logotipo de la Interface. Crea la seleccin desde 0 hasta la gua horizontal de 90 px. A continuacin rellnala de color blanco. Quitamos las guas: Vista>Ocultar>Guas (View>Hide>Guides) Luego aplica unas Nubes (Filter>Render>Clouds).

Asegrate de tener como color de frente Blanco y como color de fondo Verde (99CC66) para obtener el efecto deseado. Luego aplicamos el filtro Molinete con un ngulo de 250. Filtro>Distorsionar>Molinete (Filter>Distort>Twirl) As Vamos:

Ahora hay crear el cuadrado, usando el filtro Patchwork: Filter>Texture>Patchwork Con un Tamao del cuadro de 4 y Relieve de 2. Nos queda algo as.

Seguimos, inmediatamente, con un pequeo desvanecimiento del efecto del filtro: Edit>Fade Patchwork

Nota: Si hiciste cualquier movimiento ya no podrs desvanecer. Necesitars regresar y aplicar nuevamente el filtro.

Nos resulta algo como esto:

Ahora: Imagen>Ajustar>Niveles Automticos (Image>Adjust>Auto Levels)

Desvanecemos el efecto de los Niveles: Edit>Fade Auto Levels Conserva la Opacidad en el 100% y slo cambia el modo a Luminosidad (Luminosity). Finalmente deselecciona.

3. Estilos de Capa. Una vez que tenemos los Elementos bsicos de nuestra Interface, es hora de darles profundidad a algunos de ellos, y para esta labor usaremos Estilos de Capa (Layer Styles) los cuales son muy sencillos y prcticos. Para acceder a los Estilos de Capa tienes varias opciones: - Haz doble clic con el Botn izquierdo del Ratn sobre la capa en cuestin. - Un clic con el Botn derecho del Ratn y escoge Opciones de Fusin (Blending Options). - Sobre la Paleta de Capas presiona el Botn de Estilos de Capa (Layer Styles) . - O va: Capa>Estilos de Capa (Layer>Layer Styles) A cada estilo le daremos el nombre de la capa sobre la que se aplicar. Empezaremos por el ms complejo. Estilo Barra Verde: Sombra Paralela (Drop Shadow)

Sombra Interior (Inner Shadow)

Bisel y Relieve (Bevel and Emboss)

Estilo Barra Gris: Sombra Paralela (Drop Shadow)

Bisel y Relieve (Bevel and Emboss)

Satinado (Satin)

4. Aplicacin de Estilos Al aplicar el Estilo Barra Verde sobre la Capa del mismo nombre esta lo luce con iluminacin hasta 15 o 20 pixeles antes de cada extremo; lo ideal es que el estilo cubra la barra uniformemente. Para hacerlo slo es necesario extender la capa ms all de los limites del Diseo:

Editar>Transformar>Escala (Edit>Transform>Scale)

Ahora viene el Estilo Barra Gris, el cual lo aplicas en la Barra Gris y si lo deseas en la Barra Mayor.

Este es nuestro Resultado en Bruto:

Ya con la decoracin adecuada nos luce muy distinto, sin embargo esta ya no se toca por ser muy particular de cada cliente. Al final e cuentas tu decides como decorar.