SlideShare una empresa de Scribd logo
1 de 7
Descargar para leer sin conexión
Tutorial Photoshop Crear Botones efecto 3D www.macandroid.jimdo.com
Crear botones efecto 3D
Tutorial para crear botones On/Off efecto 3D.
Definimos el tamaño de imagen (indicaremos los que más se ajusten a nuestras necesidades).
Teniendo en cuenta que el botón será cuadrado, escogemos la herramienta rectángulo redondeado.
Con el botón shift pulsado, presionamos y arrastramos para que el cuadrado sea perfecto.
Entramos en opciones de fusión y seleccionamos superposición de degradado. Ponemos los valores de la imagen.
Tutorial Photoshop Crear Botones efecto 3D www.macandroid.jimdo.com
Obtendremos algo parecido al siguiente resultado (dependerá del ángulo y del color indicado en el degradado).
Para crear el borde 3D del botón haremos un duplicamos la capa actual. Presionamos Ctrl + Alt + T para modificar la imagen.
Para que la modificación sea perfecta y centrada respecto a la capa anterior pulsamos Shift + Alt mientras que arrastramos
una de las esquinas hasta conseguir el margen deseado.
Entramos en opciones de fusión y seleccionamos superposición de degradado y trazo. Para la superposición de degradado
bastará con picar la casilla invertir, de este modo daremos altura al botón. En trazo pondremos los valores de la imagen.
Tutorial Photoshop Crear Botones efecto 3D www.macandroid.jimdo.com
Ahora crearemos el led verde del botón. Para ello duplicaremos la capa actual. Presionamos Ctrl + Alt + T para modificar la
imagen y pulsamos Shift + Alt ó solamente Shift hasta conseguir el tamaño deseado.
Entramos en opciones de fusión y seleccionamos superposición de degradado y trazo. Pondremos los valores de la imagen.
Tutorial Photoshop Crear Botones efecto 3D www.macandroid.jimdo.com
Habremos obtenido algo parecido a la imagen.
Ahora vamos a colocar las letras en relieve que marcan el estado de encendido ON. Para ello creamos una nueva capa.
Seleccionamos la herramienta texto y escogemos el tipo de letra y tamaño deseado.
Tutorial Photoshop Crear Botones efecto 3D www.macandroid.jimdo.com
Insertamos el texto ON. Después rastrerizamos la capa texto para poder trabajar mejor con ella.
Entramos en opciones de fusión y seleccionamos resplandor exterior, bisel y relieve y superposición de degradado. Pondremos
los valores de la imagen. Pero lo primero es poner la opacidad de relleno a cero.
Tutorial Photoshop Crear Botones efecto 3D www.macandroid.jimdo.com
Tutorial Photoshop Crear Botones efecto 3D www.macandroid.jimdo.com
De este modo obtendremos un resultado parecido al de la imagen.
Si lo deseamos podremos poner sombras que darán un mayor efecto de 3D. Una vez finalizado todo el proceso recortaremos
la imagen y la adaptaremos al tamaño deseado.

Más contenido relacionado

La actualidad más candente

La barra de dibujo
La barra de dibujoLa barra de dibujo
La barra de dibujo
chechomil
 
Desarrollo de modo de dibujo combinado
Desarrollo de modo de dibujo combinadoDesarrollo de modo de dibujo combinado
Desarrollo de modo de dibujo combinado
leyohana14
 
Modo Dibujo combinado
Modo Dibujo combinadoModo Dibujo combinado
Modo Dibujo combinado
oscarcuaran95
 

La actualidad más candente (17)

La barra de dibujo
La barra de dibujoLa barra de dibujo
La barra de dibujo
 
Generación de una superficie a partir de una obra lineal
Generación de una superficie a partir de una obra linealGeneración de una superficie a partir de una obra lineal
Generación de una superficie a partir de una obra lineal
 
Prã¡ctica 15
Prã¡ctica 15Prã¡ctica 15
Prã¡ctica 15
 
Logo nike con Inkscape
Logo nike con InkscapeLogo nike con Inkscape
Logo nike con Inkscape
 
Que es photoshop
Que es photoshopQue es photoshop
Que es photoshop
 
Actividad 2 photoshop
Actividad 2 photoshopActividad 2 photoshop
Actividad 2 photoshop
 
Realizar un solido en solidwork
Realizar un solido en solidworkRealizar un solido en solidwork
Realizar un solido en solidwork
 
Desarrollo de modo de dibujo combinado
Desarrollo de modo de dibujo combinadoDesarrollo de modo de dibujo combinado
Desarrollo de modo de dibujo combinado
 
Tutorial Para Hacer Una Firma Con El Power
Tutorial   Para Hacer Una Firma Con El PowerTutorial   Para Hacer Una Firma Con El Power
Tutorial Para Hacer Una Firma Con El Power
 
objetos tridimencionales
objetos tridimencionalesobjetos tridimencionales
objetos tridimencionales
 
Cw2.A2.Amores.Byron
Cw2.A2.Amores.ByronCw2.A2.Amores.Byron
Cw2.A2.Amores.Byron
 
Creación se superficies
Creación se superficiesCreación se superficies
Creación se superficies
 
Prezi
PreziPrezi
Prezi
 
Unidad 5 it
Unidad 5 itUnidad 5 it
Unidad 5 it
 
Unidad 2
Unidad 2Unidad 2
Unidad 2
 
Modo Dibujo combinado
Modo Dibujo combinadoModo Dibujo combinado
Modo Dibujo combinado
 
Texto luces
Texto lucesTexto luces
Texto luces
 

Destacado

Fireworks truquesmagicos
Fireworks truquesmagicosFireworks truquesmagicos
Fireworks truquesmagicos
Lucas Cruz
 
Entrenamiento de volleyball
Entrenamiento de volleyballEntrenamiento de volleyball
Entrenamiento de volleyball
Brisa Cobian
 
Preparación Física - Curso Entrenador Nivel I Voleibol
Preparación Física - Curso Entrenador Nivel I VoleibolPreparación Física - Curso Entrenador Nivel I Voleibol
Preparación Física - Curso Entrenador Nivel I Voleibol
Rafa Luque
 
Personalizar La Imagen De Cabecera
Personalizar La Imagen De CabeceraPersonalizar La Imagen De Cabecera
Personalizar La Imagen De Cabecera
pedrola
 

Destacado (15)

Botones pulsantes
Botones pulsantesBotones pulsantes
Botones pulsantes
 
Conociendo Adobe Fireworks 2015
Conociendo Adobe Fireworks 2015Conociendo Adobe Fireworks 2015
Conociendo Adobe Fireworks 2015
 
Contenido de la unidad #2
Contenido de la unidad #2Contenido de la unidad #2
Contenido de la unidad #2
 
Fireworks truquesmagicos
Fireworks truquesmagicosFireworks truquesmagicos
Fireworks truquesmagicos
 
Firework2_Trazando vectores
Firework2_Trazando vectoresFirework2_Trazando vectores
Firework2_Trazando vectores
 
Firework3_Interactividad
Firework3_InteractividadFirework3_Interactividad
Firework3_Interactividad
 
fireworks
fireworksfireworks
fireworks
 
Firework1_Editando Mapa de Bit
Firework1_Editando Mapa de BitFirework1_Editando Mapa de Bit
Firework1_Editando Mapa de Bit
 
Tutorial de fireworks
Tutorial de fireworksTutorial de fireworks
Tutorial de fireworks
 
Caracteristicas de Fireworks
Caracteristicas de FireworksCaracteristicas de Fireworks
Caracteristicas de Fireworks
 
Fireworks - Ejercicio
Fireworks - EjercicioFireworks - Ejercicio
Fireworks - Ejercicio
 
Entrenamiento de volleyball
Entrenamiento de volleyballEntrenamiento de volleyball
Entrenamiento de volleyball
 
Libro manual voleibol I y II, teorico 1 SICCED
Libro manual voleibol I y II, teorico 1 SICCEDLibro manual voleibol I y II, teorico 1 SICCED
Libro manual voleibol I y II, teorico 1 SICCED
 
Preparación Física - Curso Entrenador Nivel I Voleibol
Preparación Física - Curso Entrenador Nivel I VoleibolPreparación Física - Curso Entrenador Nivel I Voleibol
Preparación Física - Curso Entrenador Nivel I Voleibol
 
Personalizar La Imagen De Cabecera
Personalizar La Imagen De CabeceraPersonalizar La Imagen De Cabecera
Personalizar La Imagen De Cabecera
 

Similar a Crear+botones+3 d

Crear poster constructivista en photoshop
Crear poster constructivista en photoshopCrear poster constructivista en photoshop
Crear poster constructivista en photoshop
Cat Lunac
 
Manual de practicas photoshop
Manual de practicas photoshop Manual de practicas photoshop
Manual de practicas photoshop
Marii López
 
Manual de practicas photoshop
Manual de practicas photoshop Manual de practicas photoshop
Manual de practicas photoshop
Marii López
 
EXAMEN PARCIAL DE INFORMATICA
EXAMEN PARCIAL DE INFORMATICAEXAMEN PARCIAL DE INFORMATICA
EXAMEN PARCIAL DE INFORMATICA
mayumiliny
 
5 mapa conceptual_1
5 mapa conceptual_15 mapa conceptual_1
5 mapa conceptual_1
plumgar
 

Similar a Crear+botones+3 d (20)

Photoshop
PhotoshopPhotoshop
Photoshop
 
Trabajo Unformatica
Trabajo UnformaticaTrabajo Unformatica
Trabajo Unformatica
 
Crear poster constructivista en photoshop
Crear poster constructivista en photoshopCrear poster constructivista en photoshop
Crear poster constructivista en photoshop
 
Manual de practicas photoshop
Manual de practicas photoshop Manual de practicas photoshop
Manual de practicas photoshop
 
Manual de practicas photoshop
Manual de practicas photoshop Manual de practicas photoshop
Manual de practicas photoshop
 
Photoshop 7
Photoshop 7Photoshop 7
Photoshop 7
 
Clase 1 quinto mes
Clase 1 quinto mesClase 1 quinto mes
Clase 1 quinto mes
 
01 boton que activa un morphing
01 boton que activa un morphing01 boton que activa un morphing
01 boton que activa un morphing
 
Tuto de photoshop
Tuto de photoshopTuto de photoshop
Tuto de photoshop
 
Practicas
PracticasPracticas
Practicas
 
EXAMEN PARCIAL DE INFORMATICA
EXAMEN PARCIAL DE INFORMATICAEXAMEN PARCIAL DE INFORMATICA
EXAMEN PARCIAL DE INFORMATICA
 
Unidad 2
Unidad 2Unidad 2
Unidad 2
 
5 mapa conceptual_1
5 mapa conceptual_15 mapa conceptual_1
5 mapa conceptual_1
 
Tutorial de Power Point
Tutorial de Power PointTutorial de Power Point
Tutorial de Power Point
 
Photoshop online iniciación
Photoshop online iniciaciónPhotoshop online iniciación
Photoshop online iniciación
 
Storyboard
StoryboardStoryboard
Storyboard
 
Storyboard
StoryboardStoryboard
Storyboard
 
Practica de flash
Practica de flashPractica de flash
Practica de flash
 
Practica de flash
Practica de flashPractica de flash
Practica de flash
 
Guia iii i curso
Guia iii   i cursoGuia iii   i curso
Guia iii i curso
 

Crear+botones+3 d

  • 1. Tutorial Photoshop Crear Botones efecto 3D www.macandroid.jimdo.com Crear botones efecto 3D Tutorial para crear botones On/Off efecto 3D. Definimos el tamaño de imagen (indicaremos los que más se ajusten a nuestras necesidades). Teniendo en cuenta que el botón será cuadrado, escogemos la herramienta rectángulo redondeado. Con el botón shift pulsado, presionamos y arrastramos para que el cuadrado sea perfecto. Entramos en opciones de fusión y seleccionamos superposición de degradado. Ponemos los valores de la imagen.
  • 2. Tutorial Photoshop Crear Botones efecto 3D www.macandroid.jimdo.com Obtendremos algo parecido al siguiente resultado (dependerá del ángulo y del color indicado en el degradado). Para crear el borde 3D del botón haremos un duplicamos la capa actual. Presionamos Ctrl + Alt + T para modificar la imagen. Para que la modificación sea perfecta y centrada respecto a la capa anterior pulsamos Shift + Alt mientras que arrastramos una de las esquinas hasta conseguir el margen deseado. Entramos en opciones de fusión y seleccionamos superposición de degradado y trazo. Para la superposición de degradado bastará con picar la casilla invertir, de este modo daremos altura al botón. En trazo pondremos los valores de la imagen.
  • 3. Tutorial Photoshop Crear Botones efecto 3D www.macandroid.jimdo.com Ahora crearemos el led verde del botón. Para ello duplicaremos la capa actual. Presionamos Ctrl + Alt + T para modificar la imagen y pulsamos Shift + Alt ó solamente Shift hasta conseguir el tamaño deseado. Entramos en opciones de fusión y seleccionamos superposición de degradado y trazo. Pondremos los valores de la imagen.
  • 4. Tutorial Photoshop Crear Botones efecto 3D www.macandroid.jimdo.com Habremos obtenido algo parecido a la imagen. Ahora vamos a colocar las letras en relieve que marcan el estado de encendido ON. Para ello creamos una nueva capa. Seleccionamos la herramienta texto y escogemos el tipo de letra y tamaño deseado.
  • 5. Tutorial Photoshop Crear Botones efecto 3D www.macandroid.jimdo.com Insertamos el texto ON. Después rastrerizamos la capa texto para poder trabajar mejor con ella. Entramos en opciones de fusión y seleccionamos resplandor exterior, bisel y relieve y superposición de degradado. Pondremos los valores de la imagen. Pero lo primero es poner la opacidad de relleno a cero.
  • 6. Tutorial Photoshop Crear Botones efecto 3D www.macandroid.jimdo.com
  • 7. Tutorial Photoshop Crear Botones efecto 3D www.macandroid.jimdo.com De este modo obtendremos un resultado parecido al de la imagen. Si lo deseamos podremos poner sombras que darán un mayor efecto de 3D. Una vez finalizado todo el proceso recortaremos la imagen y la adaptaremos al tamaño deseado.