1. Design & Illustration
  2. Add-Ons

Consejo rápido: Cómo crear un banner simple

Scroll to top
This post is part of a series called Web and Interface Design With Vector.
Quick Tip: How to Create a Simple Vector Web Ribbon in Adobe Photoshop
How to Create a Set of Rubber Band Corner Banner Treatments in Illustrator

Spanish (Español) translation by Alejandra (you can also view the original English article)

En el siguiente tutorial aprenderás a utilizar el efecto Sombra y las opciones de deformación para crear un simple banner. El diseño es perfecto para la web y la impresión y puede ser personalizado con diferentes fuentes y colores. ¡Empecemos!


Paso 1

Ve a Archivo > Nuevo. Introduce 510 en la casilla de anchura y 170 en la de altura y luego haz clic en el botón Avanzado. Selecciona RGB en el menú desplegable Modo de color y luego haz clic en OK. Ahora que has creado tu documento, activa la Cuadrícula (Ver > Mostrar cuadrícula) y la opción Ajustar a cuadrícula (Ver > Ajustar a cuadrícula).

A continuación, necesitarás una cuadrícula cada 10 px. Ve a Edición > Preferencias > Guías y cuadrícula, introduce 10 en la casilla Línea de cuadrícula cada y 1 en la casilla Subdivisiones. También puedes abrir el panel de información (Ventana > Información) para obtener una vista previa en vivo con el tamaño y la posición de tus figuras.

No olvides reemplazar la unidad de medida a píxeles desde Edición > Preferencias > Unidades > Generales. Todas estas opciones aumentarán significativamente tu velocidad de trabajo.


Paso 2

Elige la herramienta Rectángulo (M) y crea una forma de 350 por 100px. La opción "Ajustar a cuadrícula" facilitará tu trabajo. Llena esta nueva forma con R=169 G=124 B=80.


Paso 3

Selecciona la forma hecha en el paso anterior y añade un primer trazo. Hazla de 8pt de ancho y establece el color en R=232 G=193 B=155. Selecciona este trazo (del panel Apariencia) y luego abre el panel Trazo (Ventana > Trazo) y haz clic en el botón Alinear trazo al Interior.

Con la forma aún seleccionada ve al panel Apariencia, abre el menú desplegable y haz clic en Añadir trazo nuevo. Esto añadirá un segundo trazo a la forma seleccionada. Selecciona este nuevo trazo. Hazlo de 4 puntos de ancho, alinéalo al interior y establece el color en R=60 G=36 B=21.


Paso 4

Elige la herramienta Rectángulo (M), crea una forma de 100 por 100px y colócala como se muestra en la primera imagen. Una vez más, el "Ajustar a cuadrícula" será útil. Por el momento, rellena esta nueva forma con cualquier color. Selecciónala y ve a Objeto > Trazado > Añadir puntos de ancla. Selecciona la herramienta Selección directa (A), selecciona el punto de ancla resaltado en la segunda imagen y muévelo 30px a la izquierda. Rellena la forma resultante con un degradado lineal como se muestra en la imagen final.


Paso 5

Selecciona la forma hecha en el paso anterior y añade los mismos dos trazos usados para la otra forma.


Paso 6

Coge la herramienta Rectángulo (M), crea una forma de 50 por 10px y colócala como se muestra en la primera imagen. Enfoca esta forma. Elige la herramienta Eliminar punto de ancla (menos) y haz clic en el punto de ancla inferior derecho. Rellena la forma resultante con R=60 G=36 B=21.


Paso 7

Selecciona las formas creadas en los últimos tres pasos y ve a Objeto > Transformar > Reflejo. Marca el botón Vertical y luego haz clic en el botón Copiar. Esto agregará una copia volteada horizontal de las formas seleccionadas.


Paso 8

Selecciona las copias hechas en el paso anterior y muévalas como se muestra en la primera imagen. Una vez más, el Ajustar a cuadrícula facilitará tu trabajo. Selecciona el degradado de la forma más grande y establece el ángulo a 180 grados.


Paso 9

Elige la herramienta Texto (T), y añade tu texto. Puedes usar la fuente "Batik Regular" con un tamaño de 60pt y establecer el color en R=60 G=36 B=21.


Paso 10

Selecciona todas las formas creadas hasta ahora y agrúpalas (Control + G). Selecciona este nuevo grupo y ve a Efecto > Estilizar > Sombra paralela. Introduce los datos que se muestran a continuación y haz clic en OK.


Paso 11

Por último, vuelve a seleccionar el grupo y añade el efecto Deformar (Efecto > Deformar). Experimenta hasta que encuentres el estilo que más te guste. Aquí hay algunos ejemplos.


Conclusión

Ahí lo tienes, una forma fácil de hacer un banner sencillo. Experimenta con diferentes estilos y acabados y observa tus resultados. ¡Espero que hayas disfrutado de este tutorial!