Taller Webmaster

Tutoriales para Webmasters

Bienvenido a Taller Webmaster, donde encontrarás la mejor información sobre tutoriales y recursos para webmasters!

Ingreso de Usuario

Recuperar contraseña

Registro de Usuario

Publicidad

Menú con Estilo

Tutorial Photoshop

 

Tutorial por Solo Photoshop

SoloPhotoshop

TUTORIALES PHOTOSHOP

INTERFASES DE DISEÑO WEB - MENÚ CON ESTILO

Después de algunas semanas sin crear nuevos tutoriales, regreso a las andadas y en esta ocasión con una técnica muy sencilla que te ayudará a diseñar un menú básico elegante.
Iniciamos creando un documento nuevo de 150 * 180 px con fondo color 393939. Usa las reglas y guías para simular una separación de 10 px entre el documento y lo que serán nuestros botones. Cada botón del menú será 40 px de alto, por lo que hay que colocar una segunda guía horizontal en el px 50 de nuestro documento. Justo como se ve en la imagen.

Ahora marca una selección en el rectángulo principal formado por las guías.

Crea una Nueva Capa y rellénala usando un degradado que va de 545454 a 171717.

Luego aplica un contorno de 1 pixel con color negro.
Edición >> Contornear

Ahora reduce la selección 1 pixel.
Selección >> Modificar >> Contraer



Y aplica nuevamente un Contorno de color gris (666666).

Deselecciona.
Duplica la capa del botón y acomoda cada una en su sitio para crear el menú.
El resto corre por tu cuenta. Estos botones pueden estar en un orden Vertical como lo vemos en la imagen u Horizontal, según sean tus necesidades.
Agregaremos algunos tutoriales mas de interfases y diseño web, en las próximas entregas.

Comentarios de Menú con Estilo

↑ Tutorial

  • dilugre

    dilugre

    2006-06-24 13:51

    hola k tal men esta bacan la noita de este tutorial ,men wena px:D
  • elquique

    elquique

    2006-07-17 15:56

    Gracias por tu comentario
  • asus

    asus

    2006-11-06 20:19

    interesantes tutoriales pero el diseño de web 2 photoshop cs no se esta cargando

    haaa otra cosa no han publicado el html de photoshop
    ni tampoco he podido bajar los archivos de los tutoriales
    gracias y no dedjn de publicar estos excelentes tutoriales.
  • Babas

    Babas

    2006-11-20 14:09

    Con el perdon del autor el tutorial es una porquería.
    Este tutorial supuestamente va dirigido a novatos, y yo desempeñando mi función de novato con total corrección no he entendido ni para porque:

    Da por sabido muchísimas cosas como que:

    - sabemos donde estan las guías y como ponerlas
    - cuanta anchura tiene el botón (que no lo dice)
    - cómo aplicar la selección ya que yo supuse que con las guías se podría haber hecho con la varita, pues no.

    Dice: "Crea una Nueva Capa y rellénala usando un degradado que va de 545454 a 171717", bien, no se cuantas formas hay de aplicar un degradado, pero yo hasta el día de hoy solo conocía una y es en boton derecho en capa y opciones de fusión, pero por lo visto al crear la nueva capa, no es en nueva capa, sino que es en capa de relleno, cosa que no especifica y por lo que lleva a error.

    En el degradado como se ve en la imagen hay que revertirlo porque como el lo dice no sale como en la imagen, y además por lo que se ve en la imagen tenía otros matices, ya que yo lo hice tal cual lo decía y no salió igual.

    Esto está sublime: "Luego aplica un contorno de 1 pixel con color negro.
    Edición >> Contornear

    Ahora reduce la selección 1 pixel.
    Selección >> Modificar >> Contraer"

    pero ahora aquí la lia: "Y aplica nuevamente un Contorno de color gris (666666).

    Deselecciona" , porque, que hay que hacerlo igual que el anterior? como se muestra en la imagen? el contorno tiene que ser por dentro? NO, NO VA COMO EN LA IMAGEN ANTERIOR VA DE OTRA MANERA PORQUE SINO NO SALE, pero el no te va a explicar eso, ya que los novatos tenemos una capacidad telepática inexplicable.

    Bien, no puedo comentar el resto de este... ¿"tutorial"? porque no me salio aun siguiendo paso a paso las indicaciones e intuyendo todo lo intuible.

    De verdad, agradezco enormemente que algunas personas cojan una parte de su tiempo para dedicarla en los demás creando tutoriales, pero como dice el dicho (valga la redundancia) SI HACES ALGO, HAZLO BIEN.
  • elquique

    elquique

    2007-03-19 10:10

    Una cosa son novatos que no saben hacer trucos, pero otra cosa es gente que ni siquiera ha leido la ayuda en la primer hoja donde explica que es photoshop y donde estan los elementos como lineas guias, herramientas, etc.

    Los tutoriales son para enseñar trucos en photoshop, no son un curso desde cero, esa es la diferencia entre curso y tutorial, debes poner un poco mas de tu parte Babas, nadie aprende sin esfuerzo.

    Lee la ayuda de Photoshop y luego intenta realizarlo.
  • juass

    juass

    2007-06-28 10:11

    bien Elquique¡¡¡¡¡
  • abcsabrina47

    abcsabrina47

    2007-08-13 14:50

    Todos los tutoriales son excelentes, revisar este sitio se ha convertido en una adicción para mí. Que disfruto muchisimo!!!!