Hola a todos! Ahora les dejo la 2º Parte del post de creacion de botones!
CLICK PARA IR A LA PARTE 1
Botón Pixel en Photoshop
Este efecto es perfecto para botoneras pequeñas, es facil de crear y muy util. Para empezar crearemos la imagen y en ella con la herramienta lapiz y creamos el contorno del que sera nuestro boton.
Y lo rellenamos bien a mano o con el bote de pintura del color que queramos que sea nuestro boton, en este caso blanco.
Ahora añadiremos algunos efectos, damos click con el boton derecho del raton encima de la capa y seleccionamos Opciones de fusion (Bleding options), añadimos una sombra interior (Inner shadow) y le aplicamos las siguientes opciones.
En la ventana de estilos, vamos a trazo (stroke) y ponemos los siguientes parámetros para que el botón quede marcado.
Ahora ya tendremos el boton creado, pueden hacer sus pruebas y con una pixel font quedaran bonitas botoneras.Aquí tenemos el resultado final.
Botón Redondeado en Photoshop
1. Comenzamos con una imagen nueva de 150x75 pixels. Trazamos una selección circular en un costado de la imagen con la herramienta de marco elíptico.
2. A continuación trazamos una líneas guía que pasen por el centro de la selección circular, es muy fácil de hacer porque las guías se acomodan solas en el centro. NOTA: Si no saben hacer las lineas entren aqui
3. Ahora ampliamos un poco la imagen para trabajar más cómodos (presionar Ctrl junto con la tecla "+", con la herramienta de selección rectangular matenemos presionada la tecla SHIFT y trazamos un rectángulo desde la parte superior del cículo (en este caso las líneas guía son de gran ayuda si tienen mal pulso).
4. Volvemos a poner el ZOOM de la imagen como antes (presionar Ctrl junto con la tecla "-", creamos una capa nueva y llenamos con el bote de pintura la selección de algún color a la moda
5. Duplicamos la capa y la rotamos horizontalmente ( edición/transformar/voltear horizontal edit/transform/flip horizontal ), y después la movemos un poco de tal forma que junto con la otra capa formar la forma que estamos buscando.
6. Ahora hay que unir la capas, para eso hay que hacer un click en el pequeño casillero que indica la imagen de la izquierda, de esta forma aparece una cadenita y las capas quedan "enlazadas", ahora presionando las teclas Ctrl y E las capas enlazadas se unen y forman una única capa.
7. Por último podemos aplicarle algún efecto de capa al botón para darle relieve ( capa/efectos de capa/inglete y relieve layer/layer efects/bevel and emboss ) y escribir algo...
Botón Simple en Photoshop
Bueno en este articulo les enseñare a hacer facil y rapido botones para lo que quieran, primero creamos una imagen para hacer botones chiquitos les recomiendo que usen un tamaño como 90 X 26 Pixels
Ahora tocamos click derecho en la capa de fondo y ponemos Opciones de Fusion (Bleding Options) y añadimos los siguientes efectos:
Primero empezamos con un Sombra Interior y ponemos los siguientes valores:
En la misma ventana de Estilo de Capa vamos a la sección Bisel y Relive y ponemos los valores que veremos en la imagen que hay justo debajo de este texto. Con esto haremos que le botón parezca que "sale" de la pantalla.
Ahora activamos el casillero de Contorno y ponemos estos valores:
En la misma ventana de estilos d ecapa, en la sección "Satinado" ponemos los siguientes parámetros.
Atencion: no se vera a menos que activen el casillero de Superpocision de Colores y pongan un color!
Aquí les dejo un ejemplo en Rojo:
Botón Trapezoide en Photoshop
Bien abrimos una imagen de 300x100 pixels y con la herraienta de marco rectangular hasemos una selección, abrimos una capa nueva y la rellenamos la selección con el degradado de reflejo de esta forma:
Bien a la barra le hemos puesto una sombra llendonos a opsiones de fusión y a sombra paralela en la capa de la barra, habiendo hecho esto ahora vamos a ir a por el botón, con la herramienta de lazo poligonal manteniendo la mayúscula pulsada hacemos la selección nuestro botón asi:
Bien ahora viene lo mas entretenido, con la herramienta de degradado lineal le hacemos un degrado asi:
Ya solo nos queda contraer la selección, para ello nos vamos a selección>modificar>contraer y lo ajustamos a 1 pixel o 2 según queramos:
Ahora volemos a cojer la herramienta de degradado lineal y cambiando el color negro que habiamos seleccionado para hacer los anteriores degradados, por el color que queramos darle al botón, le hacemos un degradado lineal asi:
Bien ya tenemos nuestro botón romboidal, solo nos queda ponerle el texto que eso lo dejo en tus manos!
Botón Tres en Uno en Photoshop
Crear una imagen nueva en modo RGB (RBA castellano) con fondo blanco. Esta imagen es de 200 X 100.
Crea un nuevo canal haciendo clic sobre el icono de New Channel (en la paleta de canales (channels).
Tu imagen deberá cambiar de blanco a negro.
Toma la herramienta Rectangular Marquee y usa los siguientes parámetros:
Style = Fixed Sixze
Width = 160 px
Height = 60
Haz clic sobre tu imagen. Luego Rellena el recuadro con blanco.
Deselecciona
Select > Deselect
Ahora redondea los bordes
Filter > Blur > Gaussian Blur
Radius = 15
Quedará algo como esto:
Ahora define la figura
Image > Adjust > Levels
Vuelve a la paleta de Layers y crea uno nuevo
Layer > New > Layer
Carga la selección del Canal Alpha 1
Select > Load Selection
Channel = Alpha 1
Toma la herramienta Gradient y escoge el gradiente que deseas aplicar a tus botones. Este se uso aquí.
Haz clic en la parte inferior de la selección y sin soltar el botón del Ratón correlo hasta la parte superior y suéltalo allí.Ahora tienes algo así:
Ahora viene el primer borde
Select > Modify > Contract
Contract By = 4 px
Select > Feather
Radius = 2 px
Aplicamos nuevamente el gradiente, pero esta vez a la inversa, arriba - abajo.
Aquí tu botón luce realmente bien, pero falta algo mas.
Select > Modify > Contract
Contract By = 4 px Select > Feather
Radius = 2 px
Aplicas el gradiente por última vez (lo juro), pero esta vez como lo hiciste por primera ocasión.
Finalmente Deselecciona y listo.
Select > Deselect
De primer grado.
Y si fuiste observador en realidad fueron tres posibles botones por el mismo precio todos, y si no los viste aquí están nuevamente.
Botón Web en Photoshop
Los botones son una parte importante del diseño de una web. Con éste tutorial aprenderemos una sencilla forma de hacer botones. El método que veremos a continuación puede aplicarse a cualquier figura con formas redondeadas.
1) Comenzamos creando un nuevo documento (CTRL+N). Elegimos el color 161,161,161 de frente y llenamos el fondo con la herramienta "bote de
pintura" o presionamos ALT+Backspace. Creamos una nueva capa (SHIFT+CTRL+N) y en ella con la herramienta elipse creamos un óvalo. Lo llenamos con el color 131,131,131 . A este layer lo llamaremos "original".
2) Haciendo CTRL+Click sobre esta capa, la seleccionamos. Creamos una nueva Capa, vamos a Selección>Calar y aplicamos 4 píxeles de valor. Luego contraemos la selección (Selección>Modificar>Contraer) otros 4 píxeles. Invertimos la selección (SHIFT+CTRL+I) y la llenamos con color Negro (D y luego Shift+F5 o bien con la herramienta "bote de pintura". Hacemos CTRL+Click en la capa "original" para obtener su selección, invertimos y borramos (Delete). Luego, bajamos la opacidad de esta capa a un 70%.
3) Creamos una nueva capa y cargamos la selección haciendo CTRL+Click en la capa original. Movemos la selección con las flechas 10 píxeles hacia abajo y 10 hacia la derecha e invertimos la selección. Mientras mantenemos presionadas las teclas SHIFT+CTRL+ALT, hacemos click en la capa "original". Nos quedará la intersección, luego contraemos la selección (Selección> Modificar> Contraer) 4 píxeles y vamos a Selección>Calar con un valor de 2 píxeles. Finalmente, llenamos lo que nos queda con el color Blanco. Para terminar este paso, deseleccionamos (CTRL+D).
4) Creamos otra capa, presionamos D y luego vamos a Filtro> Interpretar> Nubes. Luego vamos a Filtro> Interpretar> Nubes de diferencia. Cambiamos el modo de esta Capa de Normal a Sobre exponer Color. Cargamos la selección de la capa original haciendo CTRL+Click sobre ella, invertimos la selección y borramos lo que sobra.
5) Finalmente, volvemos a hacer CTRL+Click sobre la capa original para seleccionar el óvalo, elegimos el color Blanco como color de frente y vamos a Editar> Contornear. Usamos 2 píxeles y la opción "Fuera". Presionamos CTRL+U para modificar el Tono/Saturación, marcamos la casilla que dice Colorize y en el valor de Tono , escribimos por ejemplo, el valor 218.
6) Para finalizar, podemos añadirle sombra
Botones 3D Básicos en Photoshop
Crea un archivo de 200X200 "pixels" para que tengas bastante espacio para trabajar en este botón, y haz una selección circular perfecta como se muestra en la imagen.
Usando la herramienta de degradado radial haga un degradado con la dirección que se muestra en el dibujo y deseleccione el circulo.
Bien, desde el centro del circulo, haz una selección circular más pequeña. Ahora rota la selección 180 grados, (Edición>Transformar> Rotar 180°).
Contrae la selección 2 pixels (Selección>Modificar>Contraer) y lueago rótala de nuevo 180° tal como se hizo en el paso 3.
Luego para darle color al botón dirígete a (Imagen>Ajustar>Tono Saturación) y cambie los valores, asegúrate que la casilla que dice "colorizar" esté marcada.
Botones en Barra Metálica en Photoshop
1. Abrimos una nueva imagen de 400x50 px.Luego tomamos Rectangular Maruqee Tool y hace,os un cuadro y lo rellenamos asi que quede como muetra en la imagen.
2.Ahora nos vamos a Layer > Layer Style > Drop Shadow y colocamos los valores como muetra la imagen.
Ahora nos vamos a Overlay Gradient
Finalmente, para acabar con la barra básica vamos a la sección "Stroke" de la ventana de estilos y ponemos los siguientes parámetros para "reseguir" el borde.
Nos quedara algo como esto.
3. Ahora duplicamos el layer y hacemos invisible el layer duplicado dandole click en el ojito.
Ahora seguimos trabajando con el Layer original.LE hacemos unos cuantos efectos con el Rectangular Marquee Tool,cojemos le hacemos un cuadrito y le damos a suprimir o delete.Y tendremos algo como esto.
4. Ahora le damos al ojito de nuevo en el layer que hicimos invisible y precionamos CTRL + T y le reducimos la anchura un poco.
Ahora le hacemos unas inset lines.Para hacer estas inset lines ponemos un nuevo Layer,Luego tomamos el Pincel Tool y hacemos unas lineas parecidas a estas: y le cambiamos el mode del Layer a Soft Ligh y nos quedara algo asi:
Llegado a este punto tendremos una barra como la que se muestra justo debajo de este texto. Ya sólo nos queda hacer lso recortes para cada botón e incluir el texto de cada botón.
5. Ahora le escribimos un texto y seguimos con el mismo paso de las inset y el paso del Recatngular Marquee Tool hasta que tengamos algo asi.
Esta barra es super personabilizable pueden hacerle grandes cambios y queda super buena .
Botones Hundidos en Photoshop
En esta oportunidad aprenderemos a realizar unos vistosos botones con Adobe Photoshop para incorporar a tu sitio.
1) Primero necesitaremos hacer los botones.
2) Primeramente hacemos una nueva capa. Luego hacemos la forma del botón con la herramienta de selección, llenamos la selección con degradé de azul claro a negro.
Nombre esta capa "Botón off".
3) Pulsamos el botón en la capa del Fondo y entonces hacemos una nueva capa, esta nueva capa debe estar debajo de la capa "botón off ".
4) Luego, mientras la selección todavía está activa, vamos a Selection>Modify>Expand , entremos 3 y pulsamos el botón OK.
Ahora llenamos la selección de blanco a negro con degradé. Arrastramos un poco por encima del botón. Esto crea una intercalación tras el botón.
Ahora el deseleccionamos ( Ctrl+D ). Ya es tiempo para agregar algún texto dentro del botón.
5) Duplica " Botón off " arrastrándolo al icono de nueva Capa. Nombramos la capa " Botón on " .
Escondemos esta nueva capa pulsando el botón en el "ojo" al lado de él.
Ahora ponemos atrás el "botón off" capa y hacemos una sombra pequeña con la Capa de Efectos yendo a la Sombra de Layer>Effects>Drop .
Una distancia de 3 y un blur de 3. Esta sombra es optativa pero da una ilusión para resaltarlo más aún.
6) Hacemos invisible la capa" Botón off". Activamos "Botón On" Vamos a Layer>Effects> Drop shadow .
Pulsamos el botón OK.
Movemos esta capa abajo 1 pixel y a la derecha 1 pixel con los cursores. Si tenemos texto, movemos el layer (s del texto) abajo 1 pixel y a la derecha 1 pixel.
Botones Insignia en Photoshop
Resultado
Pasos a seguir
1. Crear un documento de 300x300px, fondo blanco, 72ppp de resolución, modo RGB
2. Con selector elíptico crear un círculo que ocupe casi toda la superficie (260x260px)
3. Crear nueva capa y llamarla "anillo exterior"
4. Poner como color frontal # D0ECF8 y como color de fondo #2997C4
5. Seleccionar herramienta de degradado lineal con los colores anteriores y aplicar en diagonal desde la esquina superior izquierda a la inferior derecha
6. Ir al menú Selección -->Transformar -->Escala al 85% proporcional
7. Crear nueva capa y llamarla "anillo interno"
8. Crear desde la herramienta degradado un gradiente que contenga como valores: a la izquierda= #1F5978, a la derecha= #49A5D4 y al 40% (ver imagen) = #3C83BB (img degrade) y aplicar con degradado lineal como en el paso 5
9. Un vez creado el botón pasamos a aplicarle uno o varios efectos de capa: sombra paralela, sombra interna, bisel y relieve, etc
10. Una vez creado los efectos al botón pasamos a colocar la imagen, texto o número sobre el botón. Crea una nueva capa e inserta la imagen, texto o número con efectos de capa dale bisel y relieve. Aqui te dejo otras variantes:
Botones Pequeños en Photoshop
1) Para empezar crearemos una imagen de 100*100, tomamos nuestra herramienta de marco rectangular y seleccionamos en estilo: tamaño fijo con las medidas de 52*13 px
2) Ahora tomamos nuestro bote pintura () y rellenamos la seleccion del color que guste en este caso use el #E2DDDD
3) Ahora presionamos Ctrl + D para deseleccionar y nos vamos a Capa » Estilo de capa » Opciones de fusion y en Bisel y Relieve ponemos los siguientes valores:
4) Despues nos pasamos a Trazo el color usado para el trazo es #333333
5) Y listo ya solo falta agregar nuestro texto
Ejemplo:
Bueno, gracias por pasar, no olvides dejar tu comentario