Cargando

Ir a contenido



Ver Más! Que no te lo cuenten, es mejor VERLO 👀 !! En este vídeo verás una buena forma de entender cómo trabajamos para ayudarte. Únete, y danos tu Like 👍🏻 para ayudarnos, GRACIAS!


 


Crear botón web profesional personalizado en Photoshop CS6

Tutorial con vídeo que enseña cómo crear botones personalizados para tu web de forma profesional usando Photoshop CS6.


Escrito por el may 31 2017 15:39 design photoshop



Si conoces Photoshop sabrás que este potente editor permite crear y utilizar un sinfín de efectos, sombreados, colores, trazados… esto se traduce en un gran abanico de posibilidades para poder modificar el contenido de imágenes o capas individuales.

 

Gracias a las posibilidades que nos ofrecen las herramientas dentro de Adobe Photoshop, se incluye la idea de que podamos crear algo nosotros mismos desde cero. Photoshop ya viene con elementos cargados pero podemos personalizarlos o inventarlos. Si tienes una web o similar, el tutorial de hoy puede resultarte de ayuda.

 

En este tutorial veremos dos formas de poder diseñar nuestro propio botón, de forma manual creando un estilo propio, o de forma automática con estilos predefinidos.

 


1. Crear un botón profesional con estilo personalizado en Photoshop


Con este método crearemos un estilo de forma manual con nuestro propio estilo.

 

Paso 1

Lo primero será crear una forma de rectángulo redondeado que se convertirá en nuestro botón. Para ello vamos a la ventana de herramientas y seleccionamos en forma Rectángulo redondeado.

 

1-rectangulo-redondeado.png

 

Paso 2

Dentro de la capa de la forma creada hacemos clic sobre ella y seleccionamos Opciones de fusión.

 

2-opciones-de-fusión.png

 

Paso 3

Ahora introducimos unos valores similares a los que estás viendo en la imagen. Primero en el efecto de Bisel y relieve.

 

 

Paso 4

Introduce los valores que ves a continuación en Sombra paralela.

 

 

Paso 5

Como ves ya tendríamos nuestro botón creado. Hay que recalcar que el color principal se modifica como en cualquier forma haciendo doble clic sobre la capa.

 

5-boton-eprsonalizado.png

 

Paso 6

Para que se quede guardado nuestro estilo, ve a las Opciones de fusión como en el paso 3 y 4. Ahora selecciona la opción de Estilo nuevo debajo de Ok y Cancelar. Activa las casillas de guardar los efectos, da un nombre y guarda tu nuevo estilo.

 

6-estilo-personalizado.png

 

Paso 7

Si ahora vas a pestaña de estilos verás que está tu estilo personalizado para poder aplicar a cualquier forma a partir de ahora.

 

7-estilo-personalizado.png

 

 


2. Crear un botón profesional con estilo predefinido en Photoshop


Si no tienes tiempo de crear un estilo de forma manual tranquilo, Photoshop ya incluye estilos predefinidos fácilmente de aplicar sobre nuestras formas.

 

Paso 1

La ventana de Estilos suele aparecer por defecto pero por si no te aparece, ve a Ventana – Estilos y pulsa sobre ello para que se active la ventana.

 

8-activar-estilos.png

 

Paso 2

Ahora en la ventana de Estilos haz clic sobre el menú de tres rayas que aparece.

 

9-guardar-estilo.png

 

Paso 3

Selecciona la opción de Estilos de Web y después en añadir.

 

10-estilos-de-web.png

 

Paso 4

Ahora tan solo tendrás que seleccionar el estilo que más te guste y aplicarlo a tu forma. Puedes añadir cualquier categoría de las vistas en el paso anterior.

 

11-botones-personalizados.png

 

 

Si te has atascado en algún paso aquí tienes el videotutorial con el que ver cómo diseñar tu botón profesional de forma manual y automática.

 

 

 

 

Los estilos en Photoshop son realmente útiles para aplicar en nuestros diseños ya que nos evita tener que configurarlo cada vez que queremos aplicar un mismo efecto. De esta forma siempre tendremos un estilo guardado personal.

 

Photoshop ofrece cantidad de posibilidades. Aquí te mostramos una colección de tutoriales gratis para que puedas aplicar de manera sencilla y rápida diferentes efectos y retocar de la mejor manera todas tus fotografías.


Tutoriales Relacionados


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
10
VOTA
5
100%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado may 31 2017 15:39
  •   Actualizado may 31 2017 16:21
  •   Visitas 2.7K
  •   Nivel
    Intermedio