7 days of PS Actions, graphics, templates & fonts - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Design & Illustration
  2. Web Design

Consejo rápido: Cómo crear un sencillo listón web vectorial en Adobe Photoshop

Scroll to top
Read Time: 10 mins
This post is part of a series called Web and Interface Design With Vector.
Quick Tip: Create Colorful Glossy Rating Stars
Quick Tip: How to Create a Simple Banner

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

En los siguientes pasos aprenderás a crear un sencillo listón web en Adobe Photoshop. Es una introducción bastante sencilla para trabajar con herramientas vectoriales en Photoshop. Básicamente sólo necesitarás la herramienta Rectángulo y la herramienta Polígono para crear las formas de inicio, además de la herramienta Añadir punto de ancla junto con la herramienta Convertir punto de ancla y la herramienta Selección directa para añadir y ajustar algunos puntos de anclaje. Anímate a intentarlo y también encontrarás algunos consejos básicos para conseguir formas perfectas de píxeles.


1. Crea un nuevo documento

Abre Photoshop y pulsa Control + N para crear un nuevo documento. Introduce todos los datos que se muestran en la siguiente imagen y haz clic en Aceptar.

Activa la cuadrícula (Ver > Mostrar > Cuadrícula) y la opción Ajustar a cuadrícula (Ver > Ajustar a > Cuadrícula). Necesitarás una cuadrícula cada 5px. Ve a Edición > Preferencias > Guías, cuadrícula y sectores y céntrate en la sección Cuadrícula. Introduce 5 en la casilla Línea de cuadrícula cada y 1 en la casilla Subdivisión. Además, establece el color de la cuadrícula en #a7a7a7. Una vez que hayas establecido todas estas propiedades, haz clic en Aceptar. No te desanimes por toda esa cuadrícula. Te facilitará el trabajo más adelante. También deberías abrir el panel de información (Ventana > Información) para obtener una vista previa con el tamaño y la posición de tus formas.


2. Comienza con un rectángulo relleno de color azul

Establece el color de primer plano en #5abbff, elige la herramienta Rectángulo y crea una forma vectorial de 195 por 50px.


3. Añade bandas sutiles al rectángulo

Paso 1

Desactiva la cuadrícula (Ver > Mostrar > Cuadrícula). Elige la herramienta Rectángulo, céntrate en la barra superior y haz clic en el icono de la flecha pequeña para abrir el panel de Opciones del rectángulo. Marca el botón "Tamaño fijo" y la casilla "Ajustar a píxeles" y luego introduce 195 en la casilla de anchura (A:) y 1 en la de altura (H:). Establece el color de primer plano en #656565 y simplemente haz clic dentro de tu documento. Esto creará un rectángulo de 195 por 1px. Colócalo como se muestra en la primera imagen y asegúrate de que esta nueva forma vectorial permanece seleccionada. Continúa con la herramienta Rectángulo, marca el botón Añadir de la barra superior, añade un segundo rectángulo de 195 por 1px y colócalo como se muestra en la segunda imagen. Asegúrate de que hay un espacio de 2px entre estas dos formas vectoriales delgadas. Las opciones de Ajustar a los píxeles te facilitarán el trabajo.

Paso 2

Céntrate en el panel Capas y selecciona la forma realizada en el paso anterior. Elige la herramienta Selección directa y selecciona todos los puntos de anclaje que componen esta forma vectorial. Ahora, mantén pulsadas ALT y MAYÚS, haz clic y arrastra para añadir una copia del trazado seleccionado. Coloca estos nuevos trazados vectoriales como se muestra en la segunda imagen. Continúa concentrándote en la forma vectorial editada en este paso, cambia su Modo de fusión a Superponer y luego haz doble clic sobre ella (en el panel Capas) para abrir la ventana Estilo de capa. Activa la Sombra paralela e introduce las propiedades que se muestran en la siguiente imagen.


4. Añade un degradado suave

Duplica la forma vectorial hecha en el segundo paso (CTRL + J). Selecciona esta copia, llévala al frente (MAYÚS + CTRL + ] ), baja su Relleno al 0% y abre la ventana Estilo de Capa. Activa la Superposición de degradado e introduce las propiedades que se muestran en la siguiente imagen. Los números blancos de la imagen de la Superposición de degradado representan el porcentaje de Ubicación, mientras que los números amarillos representan el porcentaje de Opacidad.


5. Crea los extremos del listón

Paso 1

Activa la cuadrícula (Ver > Mostrar > Cuadrícula). Establece el color de primer plano en #54a5e8, elige la herramienta Rectángulo y abre el panel Opciones de rectángulo. Marca el botón Sin restricciones y luego crea una forma vectorial de 60 por 50px y colócala como se muestra en la primera imagen. Asegúrate de que esta nueva forma vectorial sigue seleccionada, toma la herramienta Añadir punto de ancla y añade un nuevo punto de anclaje como se muestra en la segunda imagen. Cambia a la herramienta Convertir punto de ancla y haz clic en este nuevo punto de anclaje. Finalmente, utilizando la herramienta Selección directa, selecciona este nuevo punto de anclaje y arrástralo 30px hacia la derecha.

Paso 2

Desactiva la cuadrícula (Ver > Mostrar > Cuadrícula). Elige la herramienta Rectángulo, abre el panel de Opciones de rectángulo, marca el botón "Tamaño fijo" y luego introduce 60 en la casilla de anchura (A:) y 1 en la de altura (H:). Establece el color de primer plano en negro y simplemente haz clic dentro de tu documento. Selecciona el rectángulo recién creado, colócalo como se muestra en la primera imagen y asegúrate de que permanece seleccionado. Continúa con la herramienta Rectángulo, marca el botón Añadir de la barra superior, añade un segundo rectángulo de 195 por 1px y colócalo como se muestra en la segunda imagen. Una vez más, asegúrate de que hay un espacio de 2px entre estos dos trazados vectoriales delgados.

Paso 3

Céntrate en la forma vectorial realizada en el paso anterior y utiliza de nuevo la técnica mencionada en el cuarto paso para añadir una copia del trazado existente. Coloca las copias como se muestra en la primera imagen. Asegúrate de que esta forma vectorial negra permanece seleccionada y activa la cuadrícula (Ver > Mostrar > Cuadrícula). Escoge la herramienta Rectángulo, marca el botón Intersectar de la barra superior y abre el panel de Opciones de rectángulo. Marca el botón Sin restricciones y crea una forma vectorial de 60 por 50px y colócala como se muestra en la segunda imagen. Nada debería cambiar por ahora. Agarra la herramienta Añadir punto de ancla y añade un nuevo punto de anclaje para este trazado vectorial como se muestra en la tercera imagen. Cambia a la herramienta Convertir punto de ancla y haz clic en este nuevo punto de anclaje. Finalmente, usando la herramienta Selección directa, selecciona este nuevo punto de anclaje y arrástralo 30px hacia la derecha. Muévete a las Capas, abre la ventana Estilo de Capa de esta forma vectorial negra e introduce las propiedades que se muestran en las siguientes imágenes.

Paso 4

Duplica la forma vectorial hecha en el sexto paso (CTRL + J). Selecciona esta copia, llévala al frente (MAYÚS + CTRL + ] ), baja su Relleno al 0% y abre la ventana Estilo de Capa. Activa la Superposición de degradado e introduce las propiedades que se muestran en la siguiente imagen.

Paso 5

Establece el color de primer plano en #e6e6e6, elige la herramienta Rectángulo, crea una forma vectorial de 20 por 60px y colócala como se muestra en la primera imagen. Asegúrate de que esta nueva forma vectorial permanece seleccionada y cambia a la herramienta Selección directa. Selecciona el punto de anclaje inferior izquierdo y arrástralo 10px hacia arriba. Al final tu forma vectorial debería ser como en la segunda imagen. Enfócate en el panel de capas, mantén presionada la tecla CTRL y haz clic en la forma vectorial hecha en el paso anterior. Esto cargará una selección simple alrededor de esa forma. Sigue concentrándote en el panel Capas, asegúrate de que la forma vectorial hecha en este paso está seleccionada y simplemente haz clic en el botón "Añadir máscara de capa". Al final tu forma vectorial enmascarada debería ser como en la cuarta imagen. Deshazte de la selección (CTRL + D) y céntrate en esta forma vectorial enmascarada. Baja su Relleno al 0% y luego abre la ventana Estilo de capa. Asegúrate de marcar la casilla "Máscara de capa oculta efectos" y luego activa la Sombra paralela e introduce las propiedades que se muestran en la siguiente imagen.

Paso 6

Elige la herramienta Rectángulo, crea una forma vectorial de 20 por 10px y colócala como se muestra en la primera imagen. Asegúrate de que esta nueva forma vectorial permanece seleccionada, cambia a la herramienta Eliminar punto de ancla y simplemente haz clic en el punto de anclaje inferior izquierdo. Al final tu forma vectorial debería tener el aspecto de la segunda imagen. Céntrate en el panel Capas, abre la ventana Estilo de capa para este pequeño triángulo e introduce las propiedades que se muestran en las siguientes imágenes.

Paso 7

Selecciona las cinco formas vectoriales hechas en los últimos seis pasos y agrúpalas (CTRL + G). Muévete al panel Capas, haz clic con el botón derecho en este grupo y ve a Duplicar grupo. Selecciona el grupo recién creado y ve a Edición > Transformar > Voltear Horizontal. Arrastra la copia de este grupo 215px hacia la derecha y asegúrate de que se coloca como se muestra en la tercera imagen. Vuelve al panel Capas y céntrate en las formas vectoriales dentro de este segundo grupo. Abre la ventana Estilo de capa de las formas vectoriales con el efecto Superposición de degradado y la forma vectorial enmascarada con el efecto Sombra paralela y simplemente edita los ángulos como se muestra en la siguiente imagen.


6. Añade estrellas y texto al listón

Paso 1

Desactiva la cuadrícula (Ver > Mostrar > Cuadrícula). Elige la herramienta Polígono, enfócate en la barra superior, introduce 5 en la casilla "Lados" y haz clic en la flechita para abrir la ventana de Opciones de polígono. Establece el radio en 8px, marca la casilla Estrella e introduce 45 en la casilla Sangría lateral. Establece el color de primer plano en #1569af y simplemente haz clic dentro de tu documento para obtener tu pequeña forma vectorial de estrella. Haz una copia de esta nueva forma (CTRL + J) y luego coloca estas pequeñas estrellas como se muestra en la primera imagen. Abre la ventana Estilo de capa para estas nuevas formas vectoriales e introduce las propiedades que se muestran en las siguientes imágenes.

Paso 2

Establece el color de primer plano en #e6f5ff, elige la herramienta Texto y añade tu texto.


7. Crea un aspecto de Sombra paralela

Paso 1

Activa la cuadrícula (Ver > Mostrar > Cuadrícula). Establece el color de primer plano en #e6e6e6, elige la herramienta Rectángulo, crea una forma vectorial de 195 por 50px y colócala como se muestra en la primera imagen. Asegúrate de que esta nueva forma permanece seleccionada y continúa con la herramienta Rectángulo. Marca el botón Añadir de la barra superior y añade una forma vectorial de 60 por 50px como se muestra en la segunda imagen. Enfócate en el lado izquierdo de esta nueva forma vectorial, toma la herramienta Añadir punto de ancla y añade un nuevo punto de anclaje como se muestra en la tercera imagen. Cambia a la herramienta Convertir punto de ancla y simplemente haz clic en este nuevo punto de anclaje. Finalmente, utilizando la herramienta Selección directa, selecciona ese nuevo punto de anclaje y arrástralo 30px hacia la derecha. Al final tu forma vectorial debería ser como en la cuarta imagen.

Paso 2

Selecciona la forma vectorial hecha en el paso anterior y toma la herramienta Rectángulo. Marca el botón Añadir de la barra superior y añade una forma vectorial de 60 por 50px como se muestra en la primera imagen. Enfócate en el lado derecho de esta nueva forma vectorial, toma la herramienta Añadir punto de ancla y añade un nuevo punto de anclaje como se muestra en la segunda imagen. Cambia a la herramienta Convertir punto de ancla y simplemente haz clic en este nuevo punto de anclaje. Finalmente, utilizando la herramienta Selección directa, selecciona ese nuevo punto de anclaje y arrástralo 30px hacia la izquierda. Al final tu forma vectorial debería ser como en la tercera imagen. Asegúrate de que sigue seleccionada, envíala al fondo (MAYÚS + CTRL + [ ), baja su Relleno al 0% y luego abre la ventana Estilo de capa e introduce las propiedades que se muestran en la siguiente imagen.

Paso 3

Duplica la forma vectorial editada en el paso anterior (CTRL + J). Abre la ventana Estilo de capa de esta copia y edita las propiedades utilizadas para la Sombra paralela como se muestra en la siguiente imagen. Haz clic en Aceptar y habrás terminado.


¡Bien hecho! ¡Tu listón ya está listo!

Ya tu trabajo está listo. Este es el aspecto que debería tener. Espero que hayas disfrutado de este tutorial y puedas aplicar estas técnicas en tus futuros proyectos.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Design & Illustration tutorials. Never miss out on learning about the next big thing.
Start your 7-day free trial*
Start free trial
*All Individual plans include a 7-day free trial for new customers; then chosen plan price applies. Cancel any time.