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

Interface Básica 2 | Solo Photoshop

Tutorial Photoshop de Interfaces y Diseño Web

 

Tutorial por Paquo360

En este tutorial culminamos con esta interesante y sencilla creacion de una Interfase Basica para Webs.

Ahora hay que reducir la selección: Select > Modify > Contract Contract By = 6 px

Luego aplica el gradiente de forma inversa, sin salir de la selección.

Crea un par mas de guías y colocalas a la altura del píxel 200 de la regla superior uno y el otro en el 350.

Crea una nueva capa Layer > New > Layer

Luego modifica la selección Select > Transform Selection

Y jala el lado derecho de la selección hasta que ajuste con la segunda guía vertical, justo como se ve en la primera imagen de la derecha, luego solo presiona Enter.Ahora reduce la selección.
Select > Modify > Contract Contract By = 6 px

Tenemos una selección casi cuadrada, pero eso se corrige: Select > Modify Smooth Radius = 6 px

Aplica el mismo gradiente dentro de la nueva selección, pero esta vez de abajo hacia arriba.

Crea una nueva capa para cada botón. Layer > New > Layer

Aplica el mismo gradiente dentro de la nueva selección, pero esta vez de abajo hacia arriba. Toma alguna herramienta de selección y entonces podrás mover la tuya; llévala al lugar donde pondrás el siguiente botón, rellena nuevamente y listo. Finalmente deselecciona "Ctrl. + D"

Hasta aquí tienes cuatro capas, une las tres primeras (botones). Primero presiona el pequeño ojo al lado izquierdo del Layer 1, con esto desaparece de escena. Toca cualquiera de las capas restantes y entonces: Layer > Merge Visible

Ahora solo tienes dos capas. Vuelve nuevamente visible la segunda.Toma la capa de los tres botones y carga su selección: Select > Load Selection Channel = Layer 4 Transparency (Puede ser otro en tu caso)

Crea una nueva capa Layer > New > Layer

Coloca esta nueva capa entre las dos que tenias. Rellena la selección con color negro. Luego deselecciona "Ctrl.+ D". Desenfoca: Filter > Blur > Gaussian Blur Radius = 1 px

Con esto tenemos sombra para los botones. Mueve esta capa un poco hacia la izquierda y abajo 2 px. Quita las guías: View > Show > Guides

Y eso es todo, agrega el texto que desees.

Regresar a la primera parte de Interface Básica

Comentarios de Interface Básica 2 | Solo Photoshop

↑ Tutorial

  • misiudad

    misiudad

    2006-07-01 15:39

    se ve interesante intentare hacerlo
  • Sugey

    Sugey

    2006-07-05 12:53

    Me hice bolas, en el segundo tuto, oye a mi me interesa mucho aprender a hacer marcos, que contengan titulos para paginas web, algo asi como cuadros con degradado y lineas diagonales, para dar presentacion a los titulos de mis paginas, ojala puedas subir un manul, te lo agradecere muchoooooooo !!
  • andmau

    andmau

    2006-07-11 14:36

    muy bueno...plaece mas tutores de montajes...retoques digiTALES...textos y efectos especiales...exlente tutorial..
  • yinyan

    yinyan

    2006-07-13 15:18

    lo hice y me resulto, pero tengo dos preguntas: como junto las capas, para q sea una y funciones el boton y dos como se guarda para usarlo en paginas web y q el boton funcione con el efecto q uno le de............. gracias
  • atlasmarc

    atlasmarc

    2006-07-14 11:16

    muy buen efecto, disculpa como podria, hacer este boton en forma de agua?

    gracias y saludos
  • joyfred

    joyfred

    2006-07-16 13:00

    ya chevere lo provare :)
  • Jex

    Jex

    2006-07-18 05:14

    cool demasiado cool gracias ya lo hise y me kedo groso igual ke el del ejemplo =)
  • charly123

    charly123

    2006-09-18 13:42

    wenas esta weno pro yo tengo una pregunta no va a esto pero porfavor contestarme yo e visto firmas como si tubieran una plantilla como un borde k yokese un palo atrabiesa por la mitad por ejemplo pero como lo ago? contactar con mnigo porfavor chdc_7@hotmail.com
  • alexandersilva8

    alexandersilva8

    2006-09-26 09:04

    es muy facil
  • iarlori

    iarlori

    2006-12-05 23:12

    como hago q funcione como boton en una pag web???