Solo Photoshop

Tutoriales y recursos Photoshop

Bienvenido a SoloPhotoshop, donde encontrarás la mejor información sobre tutoriales, recursos y artículos de Adobe Photoshop!

Ingreso de Usuario

Recuperar contraseña

Registro de Usuario

Anunciar en SoloPhotoshop

Menú con Estilo | Solo Photoshop

Tutorial Photoshop

 

Tutorial por Solo Photoshop

Solo Photoshop

TUTORIALES
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 | Solo Photoshop

↑ Tutorial

  • joan toll

    joan toll

    2005-08-27 04:31

    Me a gustado el tutorial es sencillo i practicoM
  • Jalobain

    Jalobain

    2005-08-27 12:31

    ta weno suban masM
  • marcos77

    marcos77

    2005-08-27 16:31

    esta re piolaM
  • znakeone

    znakeone

    2005-08-29 10:31

    interesante, facil y rapidoM
  • omarruiz

    omarruiz

    2005-08-29 21:31

    esta pagina esta muy buena. M
  • killer__kat

    killer__kat

    2005-08-30 14:31

    Buen Tutorial, super práctico, en special para aquellos ke kieren empezar a diseñar sus propias web...M
  • eberber

    eberber

    2005-08-31 20:31

    soy nuevo en esto pero esta super explicadisimo...gracias por sus aportes espero frecuentar mas la pagina..saludos desde mexicoM
  • javier angulo

    javier angulo

    2005-09-01 11:30

    bueno, facilM
  • Elcucho

    Elcucho

    2005-09-01 22:30

    chumax... pa q sirve ?? pa botones de pagina web ?? puede ser ???M
  • troyan0

    troyan0

    2005-09-10 12:30

    esta muy bueno .. M
  • angelnerm

    angelnerm

    2005-09-12 11:30

    Muy buen tutorial, realmente no conocia esta funcion !!!M
  • blackheart

    blackheart

    2005-09-12 15:30

    muy lindo, delicado mas,masM
  • williexxx

    williexxx

    2005-09-14 09:30

    La verdad estoy empezando con este arte de "diseñar" es muy util y practico bueno y los tutoriales ni se diga...sigan asiM
  • romperajas

    romperajas

    2005-09-17 01:30

    GRACIAS POR HACERLO FACIL, PERO PORFAVOR A LOS Q TENEMOS EL PHOTOSHOP EN INGLES PORFAVOR ESPECIFICA LOS MENUS! GRACIAS POR LA AYUDA ESPERO Q NO LO TOMES A MALM
  • belerofonte

    belerofonte

    2005-09-26 13:30

    excelente, muy prácticoM
  • corral

    corral

    2005-09-27 13:30

    no mames esta bien chida esta pagina ya la habia consultado pero ya esta mejorada y aumentada vientosM
  • corral

    corral

    2005-09-27 13:30

    no mames esta bien chida esta pagina ya la habia consultado pero ya esta mejorada y aumentada vientosM
  • danny morales

    danny morales

    2005-10-04 17:31

    los tutoriales como este ahorran tiempo de trabajo exelente pagina ayuda mucho a los que nos iniciamos en este mundo del diseño sigan asi.............danny morales desde venezuela.M
  • kchanox666

    kchanox666

    2005-10-07 11:31

    exelente pagina man ;)...felicitaciones M
  • dioxman

    dioxman

    2005-10-08 23:31

    bien basico pero wuenoM
  • gatonaranjo

    gatonaranjo

    2005-10-19 17:31

    simple, basico, y bien narrado Thank´sM
  • kacier

    kacier

    2005-11-30 06:30

    exelente es muy bueno ! kreo ke tendre ke utilizarlo :d kisiera saber kada kuando se hacen las actualizaciones ... para estar revisando i no perdermde de ninguna por ke ia las puse a prueba todas las de flas XD M
  • Lperez

    Lperez

    2006-02-02 21:28

    komo se ponen los links a kada boton!?M
  • larg1979

    larg1979

    2006-04-21 13:00

    Esta muy bien explicado, sigan adelante M
  • pheperony

    pheperony

    2006-04-24 22:53

    Ustedes son unos Duros....¡Muchas gracias!M
  • chuchi

    chuchi

    2006-04-26 16:44

    como pongo links distintos para cada boton?M
  • makubex_001

    makubex_001

    2006-07-02 12:54

    chido tuto epero que pongan masM
  • jandro_jandro

    jandro_jandro

    2006-07-11 12:01

    PARA CHUCHI: eso le pones en tu editor o pragrama donde estas creando tu web. M
  • osmay

    osmay

    2006-09-19 14:18

    Esta muy bueno el tuto y fácil de hacer, graciasM
  • william_wraxi

    william_wraxi

    2006-10-09 11:59

    quisiera saber si toda una plantilla para web se puede diseñar en photoshop, y seria bueno un tutorialpara desarrollar plantillas para web gracias de PerùM
  • Bramah

    Bramah

    2006-12-04 18:04

    ya dije que este tutorial es una porquería y expliqué el porque todo con educación y críticamente constructivo, nosé porque coño man tenio que quita el comentarioM
  • Bramah

    Bramah

    2006-12-05 12:32

    El comentario fue el siguiente: 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.M
  • frank182

    frank182

    2006-12-08 21:29

    explica bien los tutoriales porfavor!M
  • Girao

    Girao

    2007-01-03 13:15

    Esta mu bien. es sencillo atractivo y practicoM
  • jer0Me

    jer0Me

    2007-01-06 09:48

    aver BRAMAH x alguna parte de la web se dice ke antes de comenzar a leer un tutorial se lean primero otros tutoriales basicos sobre el Photoshop asi ke no vengas aki kejandote x eso lo dividen en apartados lee primero antes de kejarte ya que estas personas se lo curran y no creo ke haya muxas personas con ganas de enseñar a otras asi ke agradece x lo menos y si no te gusta buska otro manual y te piras simplementeM
  • undying

    undying

    2007-02-15 03:37

    jajaaj bramax dejate de joder y pone el punterito del mouse entonces sobre la anteultima imágen y clikeas con el boton derecho y elegis la opción "guardar imágen como" y listo... jajaj!M

↑ Tutorial