epelpad

Diseño Web - TOMO 2 - Barra de Navegación

Tomo 2: Barra de navegación
Autor: Reicko (Compañero de GSZone)

Programas utilizados:
Adobe Photoshop CS2 (Edición de las imagenes)
Adobe Dreamweaver CS4

¿Para que?
La idea de este tomo es darle un poco mas de 'belleza' a los botones de nuestra web. Con este tutorial lograremos un efecto tal que al pasar el mouse sobre el boton, éste cambiará.

(Photoshop)
Dentro del photoshop creamos el boton que deseamos utilizar en nuestra pagina, en este caso utilizaremos éste.
Diseño Web - TOMO 2 - Barra de Navegación

(Photoshop)
Al boton anteriormente creado, le agregamos un efecto de Satinado quedando de la siguiente forma (Y lo guardamos a parte).
diseño

(Dreamweaver)
Creamos un archivo .html
web


(Dreamweaver)
Creamos una barra de navegación.
boton


(Dreamweaver)
Completamos los datos de la siguiente manera:
Imagen arriba: Link de la imagen sin satinar.
Sobre imagen: Link de la imagen satinada.
Al hacer click, ir a URL: Seleccionamos el vinculo que tendra el boton al hacerle click.
dreamweaver


(Dreamweaver)
Hacer click en aceptar, presionar la tecla F12 (Vista previa en navegado) y ver como quedo nuestro botón..

Hasta luego!

1 comentario - Diseño Web - TOMO 2 - Barra de Navegación

perpetual_burn_09 -4
Este post no tiene comentarios, Soyez le premier!

Este post no tiene comentarios, Soyez le premier!


Este post no tiene comentarios, Soyez le premier!


Este post no tiene comentarios, Soyez le premier!


Este post no tiene comentarios, Soyez le premier!