Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Design & Illustration
  2. Flat Design
Design

Cómo Crear Iconos de Diseño Plano Alusivos a Piratas en Adobe Photoshop

by
Difficulty:IntermediateLength:LongLanguages:

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

Final product image
What You'll Be Creating

Ahoy, matey! ¿Estás listo para realizar un conjunto de fabulosos íconos sobre piratas en Adobe Photoshop? ¡Izar la bandera! En éste tutorial usaremos formas básica así como varias funciones y características prácticas de Adobe Photoshop para elaborar íconos relativos a piratas ¡en un estilo flat (plano) de mucha actualidad! A tí te corresponde decidir si hacerlos pulcros y nítidos o agregar un toque texturizado, usando pinceles rugosos.

Adobe Photoshop tiene sus ventajas y algunas funcionalidades realmente magníficas para elaborar íconos de estilo flat. Para el final de éste tutorial, podrás no solamente elaborar los íconos sobre piratas, sino también aplicar éstas técnicas a cualquier otra clase de íconos de estilo flat o ilustraciones de estilo flat que necesites. Y todavía más, agregaremos textura a íconos que los hacen ver intrincados, agregando una cierta apariencia retro, que esta marcando una tendencia.

Si quieres hacer tus íconos originales y agregar un toque artístico podrías querer remplazar los pinceles predeterminados con tus propios pinceles y encontrar combinaciones realmente sensacionales entre éstos pinceles de textura rugosa para Adobe Photoshop del Envato Market. ¡Intenta diferentes opciones y ve lo que mejor te funciona!

1. Crea un Ícono de Botella de Ron

Paso 1

Primero que nada, crea un Nuevo Documento de un tamaño de 3800 x 3800 px. Trabajaré con dimensiones grandes para poder usar cualquier ícono como un objeto separado, así que quiero asegurarme de que la imagen sea lo suficientemente grande.

Llena el fondo con un color azul oscuro, usando la Herramienta Bote de Pintura (G).

Toma la Herramienta Rectángulo Redondeado (U) y haz una forma de 1024 x 1024 para la base del ícono. Abre el panel Propiedades (Ventana > Propiedades), y desde ahí podremos ajustar el tamaño de nuestras formas y los colores y el Radio de los Vértices de los rectángulos.

Debe mencionarse que cuando creamos cualquier forma básica (elipse, rectángulo, polígono, etc.), ésta tiene una marca especial en su capa en el panel Capas, lo que significa que nuestra forma sigue siendo un vector antes de Rasterizarla. Significa que nuestra forma puede transformarse, recolorearse y escalarse sin pérdida de calidad, lo cual es sensacional. Sin embargo, no podemos colorear esa forma usando pinceles, así que ten esto en mente.

make the icon base

Paso 2

Empecemos a hacer nuestra botella de un rectangulo con esquinas redondeadas de 390 x 550 px. Usaremos el panel Propiedades todo el tiempo, así que siempre puedes ver mis ajustes para cada forma en las capturas de pantalla. En cuanto a la botella, estableceremos el Radio de las esquinas superiores en 130 px y el de las esquinas inferiores en 60 px, y estableceremos el color de Relleno para la forma en un turquesa brillante.

Ahora, tomemos la Herramienta Selección Directa (A) y seleccionamos los puntos ancla de la esquina inferior izquierda. Presiona la tecla de la Flecha Derecha unas veces para mover los puntos a la derecha (puedes mantener presionada la tecla Mayúsculas mientras pulsas la tecla de la flecha para acelerar el proceso).

Haz lo mismo para el lado opuesto, haciendo más estrecha la parte inferior de la botella.

make a bottle from rounded rectangle

Paso 3

¡Llenemos nuestra botella de ron! Duplica la capa de la botella (Control-J), presiona Control-T para Transformación Libre y haz la copia más pequeña, creando el contorno de vidrio de la botella.

Utiliza la Herramienta Rectángulo (U) para hacer un rectángulo estrecho sobre la parte superior de la botella. Selecciona el rectángulo y la forma de la botella de ron, haz click derecho y Restar Forma Frontal, haciendo nuestra botella parcialmente vacía.

subtract shapes to make rum

Paso 4

Formemos un cuello de botella de un rectángulo turquesa de 115 x 190 px. Selecciona todas las formas creadas y usa el panel Alinear en la parte superior para la Alinear Centros Horizontales de las formas.

Utiliza la Herramienta Rectángulo Redondeado (U) para agregar un anillo al cuello de botella. Haz una forma color turquesa claro de 210 x 75 px con esquinas totalmente redondeadas.

shape a bottleneck and align the shapes

Paso 5

Ahora agregaremos una etiqueta de pirata a la botella. Usa la Herramienta Rectángulo (U) para hacer una franja gris oscura que atraviesa la botella. Duplica (Control-J) la base de la botella turquesa, selecciona la copia junto con la etiqueta gris oscura, haz click derecho con el mouse y Unir Formas en Superposiciión para hacer invisibles las piezas no necesarias de la etiqueta.

add a pirate label to the bottle

Paso 6

Formemos un cráneo estilizado. Usa la Herramienta Elipse (U) para hacer una elipse blanca de 37 x 37 px. Agrega dos pequeños círculos color gris oscuro para los ojos. Forma una quijada de un pequeño rectángulo.

Haz más brillante la superficie de vidrio al agregar un círculo resaltado en la parte superior de la botella. Disminuye su Opacidad en el panel Capas, haciéndolo semitransparente.

shape a stylized scull

Paso 7

Finalicemos nuestra botella agregando un corcho. Duplica (Control-J) el cuello de botella y cambia el color de la copia a café en el panel Propiedades. Presiona Control-[ para colocar la copia debajo del cuello de botella (o arrástrala manualmente en el panel Capas).

Haz la parte superior del corcho ligeramente redondeada al establecer el Radio del Vértice en 30 px.

shape a rounded cork

Paso 8

¡Y aquí la tenemos-nuestro ícono de botella de ron está listo! ¡Vayamos con el próximo!

rum bottle icon is ready

2. Diseña un Ícono de Timón

Paso 1

Formemos la base del timón de un círculo de 460 x 460 px color café claro. Duplica (Control-J) el círculo, presiona Control-T para Transformación Libre, y haz la copia mucho más pequeña (puedes ver una copia más pequeña marcada con un trazo oscuro en la imagen de abajo). Selecciona ambas formas, haz click en el botón derecho del mouse y Restar Forma Frontal para cortar el círculo interior.

shape the base of the steering wheel from circle

Paso 2

Ahora formaremos la parte interior del timón. Haz un círculo amarillo de 160 x 160 px dentro del timón y usa el panel Alinear para alinear ambas formas horizontal y verticalmente.

Duplica (Control-J) la forma del timón café, coloca la copia arriba (Mayúsculas-Control-]), presiona Control-T para Transformación Libre y encógela, haciendo la forma mucho más pequeña.

form the inner part of the wheel

Paso 3

Agreguemos las barras o sujetadores del timón. Usar la Herramienta Rectángulo (U) para hacer una forma café oscura de 30 x 540 px y colócala debajo del timón (Mayúsculas-Control-[). No olvides Alinear la barra con el timón.

make a bar from narrow rectangle

Paso 4

Agreguemos más elementos a las barras. Utiliza la Herramienta Rectángulo Redondeado (U) para hacer un sujetador en la parte superior de la barra. Haz la parte superior de la forma un poco más redondeada que su parte inferior, usando el panel Propiedades.

Utiliza la Herramienta Selección Directa (A) para hacer la parte inferior de la forma un poco más estrecha (igual que como lo hicimos con la botella de ron).

Duplica el elemento creado, rótalo hacia abajo en el modo Transformación Libre y adjúntalo en la parte inferior de la barra.

Ahora podemos Agrupar (Control-F) la barra junto con los sujetadores, duplica el grupo entero al seleccionar la carpeta de agrupar en el panel Capas, presiona Control-T y rótalo 90 grados.

Haz dos copias más y rótalas 45 grados en diferentes direcciones, como se muestra en la imagen de abajo.

add more bars to the wheel

Paso 5

Finalicemos el ícono del timón al agregar algunas cabezas de clavos a la base del timón de madera. Comienza por colocar una pequeña elipse de color gris oscuro en la parte superior del timón. Coloca otro en la parte inferior, agrupa ambos círculos y duplica el grupo. Rota el grupo 90 grados y haz más copias, como lo hicimos con las barras.

¡Fabuloso! ¡Ahora podemos colocar nuestro ícono en la base de íconos y continuar!

add nail-heads to the wooden wheel base

3. Haz un Ícono de Cofre del Tesoro de Pirata

Paso 1

Comienza haciendo un cofre del tesoro de un rectángulo amarillo de 670 x 530 px. Ahora agreguemos las parte de madera de nuestro cofre. Continua usando la Herramienta Rectángulo (U) para hacer una forma café oscura de 585 x 260 px y Alinea al centro y en horizontal ambas formas.

Añade un rectángulo más pequeño de color más claro en la parte superior del cofre y Alinea los bordes superiores de las formas amarilla y café clara.

add wooden parts and align the shapes

Paso 2

Ahora formaremos las tablas de madera en la superficie de nuestro cofre. Usa la Herramienta Rectángulo (U) para crear una franja café oscura de 585 x 20 px y colócala sobre la parte superior de la forma de madera, alineando los centros horizontales de las formas. Duplica (Control-J) la línea varias veces y coloca las copias sobre las formas de madera.

Agrega otro elemento de metal dorado en la parte superior de nuestro cofre: haz un rectángulo vertical de 67 x 165 px, colocándolo en el centro de la tapa de nuestro cofre.

shape the wooden planks on the surface of our chest

Paso 3

Agreguemos un candado a nuestro cofre. Crea un rectángulo redondeado de un amarillo más oscuro de 130 x 155 px con un Radio del Vértice de 30 px. Haz el ojo de la cerradura al combinar un círculo pequeñito con un triángulo. Podemos hacer un triángulo con la ayuda de la Herramienta Polígono (U), estableciendo el número de Lados en 3 en el panel de control de la parte superior.

 add a lock to our chest

Paso 4

¡Y nuestro ícono de cofre del tesoro está listo! ¡Continuemos con nuestro último ícono!

chest icon is ready

4. Renderiza un atractivo Ícono de Sombrero de Pirata

Paso 1

Empieza formando un sombrero desde una elipse gris oscura de 910 x 160 px, y veamos cómo podemos transformar ésta forma para hacerla ligeramente arqueada. Presiona Control-T para Transformación Libre y encuentra el botón Modos de Deformación en el panel de control arriba.

Selecciona Deformación de Arco y establece el valor de Curvar en 20%, curveando la forma hacia arriba.

apply arc warp to bend the shape

Paso 2

Utiliza la Herramienta Elipse (U) para crear un círculo de 400 x 400 px y colócalo en el centro del arco. Utiliza la Herramienta Selección Directa (A) para mover los puntos ancla de ambos lados un poco, haciendo que el círculo parezca un huevo. Selecciona ambas formas, haz click con el botón derecho del ratón y Unir Formas.

add the elliptical top of the hat

Paso 3

Agreguemos un contorno brillante a nuestro sombrero. Duplica (Control-J) la forma de sombrero unida, dirígete al panel de control arriba, y establece el color de Relleno en ninguno. Establece el Trazo en amarillo con un Grosor de Trazo de 4 pt. Usa la función Transformación Libre para encoger la forma y extenderla hacia abajo un poco, cruzando así el borde inferior del sombrero.

Aplica la transformación y veamos cómo podemos ocultar la parte innecesaria del contorno amarillo. Selecciona la forma del sombrero de color gris oscuro, cambia a la Herramienta Rectángulo (U), haz click con el botón derecho del mouse y Hacer Selección. Establece el Radio de Desvanecimiento en 0 px. Ahora verás la selección de "hormigas que marchan" alrededor del sombrero.

add a bright outline with yellow stroke

Paso 4

Ve a Seleccionar > Invertir y ve al panel Capas. Selecciona la capa del contorno amarillo y haz click en el botón Añadir Máscara de Capa en la parte inferior del panel. De ésta forma hemos creado una máscara alrededor del sombrero, ocultando las piezas no deseadas de la franja amarilla. ¡Estupendo trabajo!

add layer mask

Paso 5

Copia el grupo del cráneo del ícono de la botella y colócalo en el sombrero. Usa la Herramienta Rectángulo Redondeado (U) para hacer una delgada franja horizontal para obtener un hueso estilizado. Rota el huesto 45 grados y haz una copia, rotándola en la dirección opuesta, haciendo que los huesos formen una cruz.

add scull and bones to the hat

Paso 6

Finalicemos el ícono al agregar una banda brillosa a nuestro sombrero. Utiliza la Herramienta Rectángulo (U) para hacer una franja roja de 575 x 60 px y colócala debajo del sombrero (Mayúsculas-Control-[). Duplica la franja y arrastra la copia abajo, cambiando su color para que sea un rojo más claro.

Finalmente, agrega dos pequeña franjas verticales en el lado izquierdo, formando las puntas de la banda.

add a bright bandana to our hat

5. Añade Detalles Decorativos al Fondo

Paso 1

Hagamos más intrincada la composición general al agregar unos últimos trazos al fondo. Toma la Herramienta Pluma de forma libre (P) y dibuja una línea de remolino con unos bucles.

Ve al panel de control en la parte superior y haz click en el botón Forma para Hacer una Nueva Capa de Forma.

use the Freeform Pen Tool P and draw a swirly flowing line

Paso 2

Ahora podemos modificar los ajustes y cambiar la apariencia de nuestra línea de remolino. Establece el Trazo en azul oscuro en el panel de control de la parte superior (asegúrate de que tengas seleccionado el modo herramienta de Forma), esablece el Grosor de Trazo en 4 pt y abre el menú desplegable Opciones de Trazo.

Selecciona la línea discontinua y haz clickk en Más Opciones. Desde aquí podemos cambiar el Extremo y Vértice a Redondo y ajusar los valores de Tipo de Trazo de Forma y Anchura de Trazo de Forma, haciendo que la línea encaje en la composición.

change the settings to make a dashed stroke

Paso 3

Continúa y agrega unas cuantas líneas. Cambia a la Herramienta Elipse (U) y dibuja unos diminutos círculos por aquí y por allá, llenando los puntos blancos de nuestra imagen.

¡Y eso es casi todo! Nuestro conjunto de íconos ya se ve completo. Desde aquí, tenemos dos opciones. Si quieres perservar ésta apariencia pulcra de tus íconos, entonces ¡adelante, guarda tu archivo y terminaste!

add minor details to the background

Paso 4

De la otra manera, podemos continuar mejorando nuestros íconos, usando las oportunidades de Adobe Phooshop al agregar algunas texturas rugosas a los íconos, dándoles una apariencia antigua y desgastada. Si te gusta ésta clase de ajustes y quieres usar algunas de las pinceles predeterminados o algunas de los pinceles rugosos de Envato Market, asegúrate de revisar la Parte 5, a partir del Paso 1 de mi tutorial Cómo Crear Íconos relativos al Clima en Adobe Photoshop. y descubre cómo agregar un toque texturizado rápida y fácilmente.

Aparte de eso, si te preguntas cómo agregar a tus íconos un efecto de sombra larga muy de moda, te podría gustar el tutorial Cómo Crear Íconos de Estilo Flat relativos al Espacio en Adobe Photoshop desde el Paso 10 de la Parte 1.

textured icons

¡Yo-Ho-Ho, y una Botella de Ron! ¡Nuestro conjunto de Íconos sobre Piratas está Listo!

¡Aye! Hemos hecho un magnífico trabajo y terminado nuestro conjunto de íconos de estilo flat con recursos de piratas! Espero que hayas disfrutado seguir éste tutorial y descubierto algunos nuevos consejos y trucos que serán útiles para tu futuro conjunto de íconos o ilustraciones flat.

¡Diviértete y no olvides compartir tus resultados! ¡Hasta luego y que tengas una navegación tranquila, matey!

Pirate Icons Set is Ready
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.