Como hacer una simpática barra separadora

Publicado por asktutorial.

En esta ocasión vamos a realizar una barra separadora con fondo transparente, es decir una imagen render, renderizada o sin fondo. Un recurso muy importante para decorar nuestra página web. Los simples 5 pasos necesarios para hacerla permiten que hasta los usuarios más novatos de photoshop puedan realizarla en un minuto. 

Paso 1: Para comenzar vamos a crear un nuevo archivo transparente. Para ello haremos clic en Archivo – Nuevo. En esta ventana podemos elegir las medidas que más nos guste, pero no debemos olvidar que el Contenido de fondo debe ser Transparente. Es la primera de las dos condiciones necesarias para crear una imagen render o renderizada.

 Como hacer una simpática barra separadora

Paso 2: Creamos una nueva capa. En esta nueva capa seleccionamos la herramienta Rectángulo Redondeado y hacemos un rectángulo. El tamaño del rectángulo dependerá del estilo de la barra separadora que querramos diseñar. Luego hacemos clic en Estilo y elegimos el que más nos guste. En el ejemplo utilizamos el estilo Blue Glass.

 Como hacer una simpática barra separadora

Como hacer una simpática barra separadora

Paso 3: Elegimos la imagen que deseamos agregar a nuestra barra separadora y la abrimos. La imagen tiene que ser render, es decir sin fondo. En otro post explicaremos como renderizar una imagen con Photoshop.

Antes de mover la imagen a la barra tenemos que verificar su tamaño y ajustarlo al tamaño de nuestra barra separadora. Para mover la imagen a nuestra barra debemos seleccionar la capa de la imagen, seleccionar la herramienta Mover (V) y arrastrar la imagen a la barra.

 Como hacer una simpática barra separadora

Paso 4: Si deseamos podemos agregar texto. En este ejemplo aplicamos el mismo estilo que nuestra barra y Resplandor externo del mismo color que la imagen o la barra.

 Como hacer una simpática barra separadora

Paso 5: Guardar la barra separadora. Este es un paso muy importante, para que la barra separadora sea render la debemos guardar como .png. Ésta, es la segunda de las dos condiciones que se tienen que cumplir para que una imagen sea render o renderizada. Guardándola como .png nos aseguramos de que el fondo quede transparente y así poder aplicarla tranquilamente en nuestra página web.

 Como hacer una simpática barra separadora

En el próximo post aprenderemos a dar animación a esta barra separadora…  

Dejar un comentario

Tenga en cuenta: la moderación de comentarios está habilitada y puede retrasar su comentario. No hay necesidad de volver a enviar su comentario.

¡SUSCRÍBETE GRATIS!

Nosotros

AskTutorial nace en Junio del 2010 en la ciudad de Chicago, IL con el fin de crear Tutoriales Educativos en Español dirigidos a la comunidad de habla hispana en Estados Unidos y alrededor del mundo. Gracias a la excelente respuesta del publico que diariamente ve nuestros videos nos hemos extendido a no solo crear video tutoriales, si no tambien ofrecemos información relevante de acuerdo a sus preguntas.

Archivos / Mes

¡Suscribete GRATIS!

Sigueme en cualquiera de mis Redes Sociales para acceder al contenido de este sitio!