Blog and Web

Otro de los elementos ya clásicos en el estilo de diseño Web2.0 son las estrellas o badges que suelen acompañar a los encabezados o a los logos. Y en este tutorial te mostraremos como crear un badge con Photoshop como el siguiente:

1. Abre un nuevo documento, para el ejemplo, usaremos dimensiones de 300×300 pixeles, y ahora crea una nueva capa
2. Lo siguiente es crear la forma de estrella, para esto seleccionamos la herramienta “Poligono” de nuestra barra de herramientas.



Y la barra de opciones de esta herramienta seleccionamos el número de lados, para el ejemplo usaremos 20 y activamos el modo “Fill pixels”.



Y ahora, en el menú desplegable de esta herramienta seleccionamos una forma de estrella, un suavizado en las esquinas y una identación del 25%.



Ya con esto, estamos listos para trazar la estrella en el documento, primero selecciona el color para la estrella y ahora da click en el centro del documento y sin dejar de presionar, arrastra el cursor a la orilla hasta obtener el tamaño deseado.



3. El siguiente paso será darle efectos a la forma que acabos de crear. Vamos al menu Layer > Layer style > Blending Option (Capa > Estilo de capa > Opción de fusión) y aplicamos los siguientes efectos:Drop Shadow (Sombra paralela). Puedes partir de los siguientes parámetros y modificarlos hasta que obtengas el resultado que más te guste:

   Bevel and Emboss (Bisel y relieve).

   

   Satin (Satinado). Aplicamos un efecto de satinado que posteriormente nos dará un mayor constraste.

   

   Stroke (Margen). Aplicamos un borde degradado, donde tenemos que seleccionar los colores del gradiente manualmente.

   

   El resultado parcial para el ejemplo es el siguiente:

   

4. Ahora introduciremos un nuevo elementos que hará mas vistoso nuestro badge. Con la herramienta de selección circular, creamos un circulo de radio grande, que abarque aproximadamente la mitad de la estrella.
   Ahora, creamos una nueva capa y la rellenamos nuestra selección con color blanco, y le damos una opacidad a esta de un 30%. Ahora, presionando ALT, damos click justo en el espacio entre la capa de la estrella y la capa del circulo blanco para hacer un “clipping mask” (aparece un pequeño icono que nos indica que es el lugar correcto).

   

   Y tenemos algo como lo que sigue:

   

   Para darle un poco mejor integración del color, nos situamos en la capa con el circulo blanco y hacemos un degradado de blanco a transparente empezando de arriba a la izquierda hasta abajo a la derecha.

   

   Que nos da el siguiente resultado:

   

5. Esta casi listo nuestro Badge, sólo resta agregarle un texto y posteriormente una sombra o algún otro efecto al mismo.Y el resultado final es el siguiente:

   

   Puede ser un poco laborioso, pero muchos de estos efectos se aplican a varios elementos de la Web 2.0, así que vale la pena aprenderlos.

   Descarga el archivo PSD de este ejemplo