Foro de elhacker.net

Media => Diseño Gráfico => Mensaje iniciado por: -[C][L4RiO][N]- en 11 Abril 2005, 03:29 am



Título: [Tutorial] Barra de navegacion & botones
Publicado por: -[C][L4RiO][N]- en 11 Abril 2005, 03:29 am
En este tutorial voy a enseñar como hacer botones y barras de navegacion para tu web en Photo shop 7.0 o mayor.


Primero que nada creamos un nuevo documento(Blanco) de cualquier tamaño yo lo hixe 162x21


Despues lo rellenamos del color deseado yo lo hixe con # 1A2930

Y nos vamos a Blending options(opciones de mescla)

1- Drop Shadow
(http://www.perroshackers.net/foro/tutos/1/dropshadow.jpg)
2-Inner Glow
(http://www.perroshackers.net/foro/tutos/1/innerglow.jpg)
3-Bevel and Emboss
(http://www.perroshackers.net/foro/tutos/1/emberandemboss.jpg)
4-Pattern Overlay
(http://www.perroshackers.net/foro/tutos/1/paternoverlay.jpg)
5-Stroke
(http://www.perroshackers.net/foro/tutos/1/stroke.jpg)
En este paso si tu fondo es brillante ponele una opacity entre 60% y 75%.

Ahora dependiendo de como estas diceñando tu web estamos casi listos.

Pero yo le voy a dar forma al boton asi que nos vamos a Poligonal lasso Tool y seleccionamos algo asi:

(http://www.perroshackers.net/foro/tutos/1/polig.jpg)

Despues cortamos (CTRL+X) y listo nos queda algo asi:
(http://www.perroshackers.net/foro/tutos/1/polilisto.jpg)

Pero no nos detengamos ahora vamos a hacer una esfera
Creamos un nuevo layer>new>layer
Despues tomamos el Elipse Tool y Hacemos un pequeño circulo a mano Izquierda y nos vamos a blending options.
(http://www.perroshackers.net/foro/tutos/1/Esfera1.jpg)

(http://www.perroshackers.net/foro/tutos/1/esfera2.jpg)

(http://www.perroshackers.net/foro/tutos/1/esfera3.jpg)


Despues eso solo queda ponerle texto a mi me quedo asi :


(http://www.perroshackers.net/foro/tutos/1/p.jpg)


Espero les guste mi tutorial.
Dudas? aqui mismo ;)
Clari0n.


Título: Re: [Tutorial] Barra de navegacion & botones
Publicado por: MinusFour en 11 Abril 2005, 03:37 am
opino que donde esta el pattern .. nos des un link para bajarlo.. que yo no lo tengo xD


Título: Re: [Tutorial] Barra de navegacion & botones
Publicado por: -[C][L4RiO][N]- en 11 Abril 2005, 07:36 am
Eso es depende el gusto prueba con otros!

No es necesario usar ese mismo por ejemplo ahorita  hixe otros pero le cambie el pattern overlay:


(http://perroshackers.net/images/1x.jpg)

(http://perroshackers.net/images/2x.jpg)

(http://perroshackers.net/images/3x.jpg)

(http://perroshackers.net/images/4x.jpg)

(http://perroshackers.net/images/5x.jpg)

(http://perroshackers.net/images/6x.jpg)

Espero les guste.
Clari0n.


Título: Re: [Tutorial] Barra de navegacion & botones
Publicado por: -[C][L4RiO][N]- en 5 Mayo 2005, 06:32 am
Acabo de actualizar las imagenes del tutorial ya que en el host que las tenia se caio.








Clari0n.


Título: Re: [Tutorial] Barra de navegacion & botones
Publicado por: aNexos en 5 Mayo 2005, 06:38 am
Muy buen aporte.

opino que donde esta el pattern .. nos des un link para bajarlo.. que yo no lo tengo xD

No es nada dificil hacerlo.

Haces una linea diagonal de cinco pixeles y la guardas como motivo.


Título: Re: [Tutorial] Barra de navegacion & botones
Publicado por: -[C][L4RiO][N]- en 5 Mayo 2005, 22:20 pm
SI el pattern lo hice asi exactamente como dice ozangelus no te sabria decir si lo puedes descargar de algun lugar.







Clari0n.


Título: Re: [Tutorial] Barra de navegacion & botones
Publicado por: Sub_Cero en 7 Mayo 2005, 11:37 am
Clarion, tengo k hablar con tigo, este tutorial lo has hecho tuu ??, las imagenes son hechas por ti??.


Título: Re: [Tutorial] Barra de navegacion & botones
Publicado por: kåhjî£ en 7 Mayo 2005, 16:55 pm
bueno, poniendome en papel de alguien muy principiante, no es muy claro el tuto, sobre todo con los ejemplos, generalment elos tutos inician mostrandote el resultado final y luego el proceso de dicha imagen paso a paso.


Título: Re: [Tutorial] Barra de navegacion & botones
Publicado por: + enrique ZP en 7 Mayo 2005, 20:48 pm
Clarion, tengo k hablar con tigo, este tutorial lo has hecho tuu ??, las imagenes son hechas por ti??.

Yo digo que si son de el, porque cuando el lo hizo me paso sus imagenes para que se las subiera. No lo a copiado a nadie, ademas a mostrado varios ejemplos esa es la prueba.

Hasta Luego :D


Título: Re: [Tutorial] Barra de navegacion & botones
Publicado por: -[C][L4RiO][N]- en 8 Mayo 2005, 01:16 am
Jeje que me tratas de decir?

Esta dificil de hacer acaso como para decir que no lo hixe yo?


Título: Re: [Tutorial] Barra de navegacion & botones
Publicado por: Sub_Cero en 8 Mayo 2005, 16:14 pm
No me refiero a eso, esk este tutorial lo he visto en alguna parte, la imagen esta:

(http://www.perroshackers.net/foro/tutos/1/polig.jpg)

Pero k si lo has hecho tu no pasa nada, sorry, pero de todas formas, he visto esa imagen en algun tutorial, estoy seguro.