Advertisement
  1. Design & Illustration
  2. Art

Crea una pieza de tipografía de arte de trazo inspirada en el verano usando Sketch

Scroll to top
Read Time: 30 mins
This post is part of a series called Summer in Session!.
Create a Summer Underwater Seamless Pattern in Adobe Illustrator
Create a 70s Diner Vector Illustration in Adobe Illustrator

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

En este tutorial te mostraré cómo crear una pieza de tipografía de moda usando solo trazos y colores planos. Usaremos una alternativa de Adobe Illustrator llamada Sketch disponible como prueba gratuita (o de pago) por la buena gente de Bohemian Coding. Con el anuncio de que Adobe descontinuará Fireworks, este es un software muy vectorial con un conjunto único de características y herramientas que serían una excelente alternativa.

Con este tutorial intentaré utilizar tantas herramientas y características básicas como sea posible para que puedas familiarizarte mejor con este (posiblemente) nuevo software. Una vez que te acostumbres al programa, probablemente encontrarás que hay formas más fáciles / rápidas de lograr las mismas funciones.

Además, en caso de que desees seguir en Illustrator o tu programa vectorial favorito, no dudes en hacerlo. Estos pasos se pueden intercambiar fácilmente con herramientas de otros programas, siempre y cuando tengas una comprensión básica de los nombres de las herramientas y lo que hacen. Espero que hayas traído tu loción bronceadora, va a ser un abrasador.


1. Configura tu documento

Para comenzar, iniciemos Sketch y configuremos nuestra mesa de trabajo. Si nunca has utilizado esta aplicación, tómate un minuto para aclimatarte a tu nuevo entorno. Las herramientas y características se presentan de manera muy diferente a Adobe Illustrator y no hay paneles flotantes ni ventanas. Todo está disponible en y alrededor de la mesa de trabajo principal. La principal diferencia que notarás es que el panel Capas está a la izquierda de la mesa de trabajo, mientras que las herramientas están a lo largo de la parte superior y las funciones de ajuste para las diversas herramientas están a la derecha.

Paso 1

Una vez que tengas tu orientación, comienza haciendo clic en el icono de la mesa de trabajo en la parte superior de la ventana de la aplicación. Con esa opción seleccionada, haz clic y arrastra el espacio de la mesa de trabajo en el centro. De la aplicación para crear una forma. Puedes dibujar físicamente la forma al tamaño correcto o, lo que me resulta más fácil, es crear un cuadrado simple y luego, utilizando el panel Inspector a la derecha, escribe las medidas exactas manualmente. Para este proyecto nuestra mesa de trabajo será de 1300 x 600 px. Siéntete libre de dejar el nombre de la mesa de trabajo como predeterminado o puedes hacer doble clic en el nombre de la mesa de trabajo en el panel Capas a la izquierda para ajustarlo a tu gusto.

chris-summer-1-1chris-summer-1-1chris-summer-1-1

Paso 2

Dado que nuestra pieza terminada será bastante modular, hagamos las cosas más fáciles para nosotros mismos y habilitemos la red para que podamos trabajar de manera más eficiente. Selecciona el icono Ver (situado junto al icono de la mesa de trabajo en la parte superior de la ventana de la aplicación) y selecciona Configuración de cuadrícula... luego ingresa la configuración que se ve a continuación. A continuación, haz clic de nuevo en el icono Ver y asegúrate de que Mostrar cuadrícula está habilitado.

chris-summer-1-2chris-summer-1-2chris-summer-1-2

Paso 3

Usaremos y reutilizaremos las mismas herramientas una y otra vez para este proyecto, así que hagámoslas fácilmente accesibles. Haz clic derecho en la barra de herramientas o visita Ver > personalizar barra de herramientas ... Y agreguemos algunas herramientas a esta área. Nuestros conceptos básicos ya están allí, pero usaremos bastante la herramienta Tijeras, así que arrastremos esto a una ubicación cómoda en la barra de herramientas para futuras referencias. Si ves alguna otra herramienta que sientas que te ayudará a tu competencia, no dudes en agregarlas ahora.

chris-summer-1-3chris-summer-1-3chris-summer-1-3

Paso 4

Debido a que nuestra pieza final es realmente de solo 3 colores., y tiene un diseño plano, sigamos adelante y completemos el fondo de nuestra mesa de trabajo. Para ello, haz clic en el icono Forma en la parte superior, a la izquierda de la ventana de la aplicación y selecciona la herramienta Rectángulo (R). Haz clic y arrastra hacia afuera una forma que abarques toda la mesa de trabajo. De forma predeterminada, el ajuste de cuadrícula está habilitado, por lo que esta debería ser una tarea fácil. Con la forma de rectángulo creada, navega hasta el panel Inspector ubicado en el extremo derecho de la aplicación, elimina el borde anulando la selección de la casilla de verificación y ajusta el relleno a un color naranja y rosa como se describe a continuación. Una vez completada, haz clic derecho en la capa y elige Bloquear capa para que no la seleccionemos accidentalmente más adelante.

chris-summer-1-4chris-summer-1-4chris-summer-1-4

2. Texto personalizado: "Verano"

Paso 1

Con nuestro documento configurado y listo para usar, ahora crearemos nuestro texto personalizado para nuestra pieza. Hagamos zoom un poco para que podamos ver lo que estamos haciendo, luego haz clic en el icono Forma en la parte superior, a la izquierda de la ventana de la aplicación y selecciona la herramienta Redondeado (U) y crea un rectángulo redondeado que sea de 40x50 px. Retira el color de relleno por completo en el panel Inspector a la derecha y ajusta el borde al centro, el tamaño debe ser de 5px y elige un color crema más claro como se describe a continuación. Asegúrate de ajustar también los extremos y las uniones para que se redondeen (la opción central).

chris-summer-2-1chris-summer-2-1chris-summer-2-1

Paso 2

Otra característica que puedes encontrar un poco extraña es que una vez que se dibuja tu forma, se cambia automáticamente a tu herramienta de selección. No es necesario cambiar de un lado a otro para seleccionar una forma o moverla. Viniendo de Illustrator, esto requiere un poco de tiempo para acostumbrarte como tu primer instinto, así que presiona la tecla "V" para habilitar la herramienta "Selección", pero presionar "V" aquí habilitará la herramienta Vector y te sacará de tu juego. Una vez que te acostumbras, esto se convierte en un ahorro de tiempo a largo plazo. Por lo tanto, ahora que nuestro rectángulo redondeado está dibujado, haz clic y arrastra mientras mantienes presionada la tecla Alt para crear un duplicado de esta forma y colócala directamente debajo de la primera para que la parte superior de la nueva forma y la parte inferior de la anterior se encuentren.

chris-summer-2-2chris-summer-2-2chris-summer-2-2

Paso 3

Ahora pulsa shift y haz clic en ambas formas y elige Unión en la parte superior de la ventana de la aplicación. Y con esta nueva forma aún seleccionada, ve a Editar > caminos > tijeras o selecciónala desde la barra de herramientas en la parte superior, ya que la agregamos allí anteriormente. Ahora, si pasas el cursor sobre un segmento de la forma, resaltará ese camino en azul y si haces clic en ese resaltado, recortarás esa área resaltada. Por lo tanto, para la forma superior, coloca el cursor sobre la curva inferior derecha y haz clic para eliminarla. Además, haz clic en el camino recto más corto directamente encima del lado derecho. Estamos haciendo una forma de "S" para lo mismo en el lado opuesto de la forma inferior.

Una vez completada la forma, navega hasta el panel Inspector y ajusta las opciones de posición como se describe a continuación.

chris-summer-2-3chris-summer-2-3chris-summer-2-3

Paso 4

Ahora que tenemos lo básico, dupliquemos el proceso anterior para crear las otras letras para formar nuestra primera palabra "Verano". Ten en cuenta que queremos que nuestras letras minúsculas sean la mitad de la altura de la "S" del capitolio.

Para la "u" vamos a crear otro rectángulo redondeado como antes, entonces, eliminemos la curva superior. Asegúrate de agregar un poco de espacio entre las dos letras. Para todas mis letras usaré un espaciado de 10px entre cada una, esto debería darte una línea de cuadrícula desocupada entre cada letra. Haciendo la forma 40x50 px notarás que una vez que se elimina la curva superior la "u" ya no es la mitad de la altura. Entonces, mientras se selecciona la forma, haz clic en el botón Editar del menú de herramientas en la parte superior y haz clic en uno de los puntos abiertos. Luego, shift + clic en el otro punto abierto. Deberías notar que aparece un anillo más oscuro alrededor del marcador de punto. Ahora, mientras mantienes presionada la tecla shift, haz clic y arrastra uno de los puntos abiertos hasta que se encuentre con la "S" a mitad de camino. Ahora, para terminar la "u", te diría que uses la herramienta Línea, pero esto funciona de manera un poco diferente a las otras herramientas de forma. El ajuste para esta herramienta de línea funciona en función del ancho del borde actualmente habilitado, por lo que el borde encajará cómodamente dentro de la cuadrícula de píxeles creando líneas nítidas. Sin embargo, dado que nuestro borde no es un número par, esta herramienta de línea no ayudará en este caso. Lo que tendremos que hacer es seleccionar la herramienta Rectángulo (R) y crear un cuadrado en el borde más a la derecha de nuestra forma de "u" y luego eliminar los 3 caminos de borde que no necesitamos. Ahora puedes agrupar la línea y la forma de "u" juntos yendo a Organizar > menú Capas de grupo.

chris-summer-2-4chris-summer-2-4chris-summer-2-4

Paso 5

Continúa este proceso hasta que hayas terminado las otras letras de la palabra. Me resultó más fácil, una vez que se completó la "u", simplemente copiar esos objetos y duplicarlos y luego rotarlos para hacer las 2 "m". Si tienes la "u" seleccionada, haz clic y arrastra mientras mantienes presionada la tecla Alt para duplicar y mover al mismo tiempo. Ahora, si mantienes pulsada la tecla Comando y colocas el cursor sobre una de las esquinas del cuadro delimitador cambiará a la herramienta de rotación y podrás girarla 180º, o puedes usar el panel Rotar del inspector para escribirla manualmente. Sin embargo, una vez girado, deberás rea linear la forma con la cuadrícula, ya que estará ligeramente descentrado. Ahora selecciona la forma en bucle y haz clic y arrastra mientras mantienes presionada la tecla Alt para duplicarla y terminar tu forma "m". Ahora duplica toda la forma de "m" y podemos seguir adelante.

chris-summer-2-5chris-summer-2-5chris-summer-2-5

Paso 6

La "e" requiere un poco de trabajo extra. Crea otro rectángulo redondeado que sea de 40 x 50 px. Ahora habilita la herramienta Tijeras y retira el borde más recto derecho.

Cambia a la herramienta Editar y si pasa el cursor sobre la curva inferior derecha, la herramienta tendrá un "+" si has pasado directamente sobre el trazado. Haz clic donde el trazado se cruza con la cuadrícula 3 cuadrados hacia abajo para agregar un punto. Ahora vuelve a la herramienta Tijeras y retira la parte superior de ese camino.

Habilita la herramienta Rectángulo (R) y crea un rectángulo de 40 x 10 px. Luego con la herramienta Tijeras retira la parte superior e izquierda del rectángulo para completar nuestra "e".

chris-summer-2-6chris-summer-2-6chris-summer-2-6

Paso 7

Para crear la "r", simplemente duplica la forma "m" y elimina la forma de bucle adicional que la convierte en una "m" en lugar de una "n". Ahora, con la herramienta Tijeras, elimina el camino de la derecha.

chris-summer-2-7chris-summer-2-7chris-summer-2-7

3. Texto personalizado: "Lovin"

Paso 1

Una vez que tengas todas las letras para "Summer" completadas, comenzaremos la palabra "Lovin'" usando las mismas técnicas con algunos extras que aún no hemos visto.

Para comenzar, selecciona la herramienta Rectángulo (R) y crea un rectángulo de 40 x 100 px. Ahora selecciona la herramienta Editar y haz clic en el punto de anclaje inferior izquierdo. Con eso seleccionado, debería aparecer un nuevo conjunto de opciones debajo de la barra de herramientas. Selecciona la última opción disponible en esa lista y redondea esa esquina a 20px. Ahora con la herramienta Tijeras haz clic para eliminar la parte superior y derecha de la mayoría de los caminos para formar nuestra "L" mayúscula.

chris-summer-3-1chris-summer-3-1chris-summer-3-1

Paso 2

La letra "o" es bastante autoexplicativa, así que omitiré eso. Solo asegúrate de que sea del mismo tamaño que tus otras formas (40 x 50 px). Pasemos a la "v". Este también es bastante fácil. Selecciona la herramienta Triángulo de la lista de opciones de forma y crea un triángulo de 40 x 50 px y luego gíralo 180º. Ahora, con la herramienta Tijeras, elimina la parte superior de la ruta.

chris-summer-3-2chris-summer-3-2chris-summer-3-2

Paso 3

Para crear la "i", selecciona la herramienta Rectángulo (R) y crea un rectángulo de 50px de alto, el ancho no importa, solo asegúrate de que el lado más a la izquierda esté alineado correctamente con la letra anterior. Ahora, con la herramienta Tijeras, elimina los caminos superior, derecho e inferior. Repite este proceso el punto sobre la "i", haciéndolo 10px de alto.

chris-summer-3-3chris-summer-3-3chris-summer-3-3

Paso 4

Para la "n" simplemente puedes copiar una de las "m" de nuestra palabra anterior y eliminar una de las formas de bucle adicionales. Ahora finalmente crea el apóstrofe, duplicando los pasos para el punto en la "i", solo que esta vez lo hagas de 15px de alto.

chris-summer-3-4chris-summer-3-4chris-summer-3-4

Paso 5

Por último, asegúrate de que el trabajo esté colocado correctamente. Resalta todas las letras y agrúpalas. A continuación, con el grupo aún seleccionado, navega hasta el panel Inspector y ajusta la posición como se describe a continuación.

chris-summer-3-5chris-summer-3-5chris-summer-3-5

4. Texto personalizado: "Sucedió tan rápido"

Paso 1

Elige un nuevo lugar en la mesa de trabajo y comencemos a crear nuestra oración final. Este texto es mucho más pequeño que nuestro texto anterior, por lo que usaremos un borde más pequeño. Al crear este texto, ten en cuenta que tu borde debe establecerse en 4px, los extremos redondeados y las uniones seguirán siendo los mismos, al igual que el color

Selecciona la herramienta Rectángulo (R) y crea un rectángulo de 15 x 30 px y, a continuación, elimina el trazado superior e inferior con la herramienta Tijeras. Crea otro rectángulo para que uno de los extremos del rectángulo intercepté la mitad exacta de nuestra forma "H", luego retire los extremos que no son necesarios. Ahora agruparlos.

chris-summer-4-1chris-summer-4-1chris-summer-4-1

Paso 2

Para crear la "a" comienza seleccionando la herramienta Oval (O) y creando un círculo exacto que sea de 15 x 15 px. Ahora cambia a la herramienta Rectángulo (R) y crea un rectángulo en el extremo derecho del círculo y elimina los extremos innecesarios. El ancho no importa, pero debe ser la misma altura de 15px que la forma del círculo. Ahora puedes agruparlos.

chris-summer-4-2chris-summer-4-2chris-summer-4-2

Paso 3

Para nuestras dos "p" vamos a duplicar la forma "a" haciendo clic y arrastrando mientras se mantiene presionada la tecla Alt. Ahora gíralo 180º y asegúrate de que esté alineado con nuestra cuadrícula. Dentro de la carpeta del grupo, selecciona la ruta recta y haz clic en el punto inferior y arrástralo hacia abajo hasta que sea de 30px de largo. Ahora selecciona la carpeta de grupo y duplica y colócala en su lugar adecuado.

chris-summer-4-3chris-summer-4-3chris-summer-4-3

Paso 4

Para crear la "e" cree otro círculo perfecto que sea de 15 x 15 px y selecciona la herramienta Editar. Coloca el cursor de modo que quede aproximadamente un cuarto del camino entre los puntos derecho e inferior y luego haz clic para crear un nuevo punto. Cambia a la herramienta Tijeras y haz clic para eliminar el cuarto superior del nuevo punto que acabamos de crear. Ahora crea un rectángulo como lo hemos hecho anteriormente y elimina los lados que no son necesarios y agrupa las formas. Ten cuidado de subir el camino del rectángulo con el camino abierto para que haya un espacio lo suficientemente agradable como para hacer la forma de "e".

chris-summer-4-4chris-summer-4-4chris-summer-4-4

Paso 5

Como ya hemos creado una "n", no explicaré cómo hacerlo de nuevo. Solo asegúrate de que si estás copiando tu forma anterior, la reduce al tamaño adecuado y que el borde esté configurado en 4px. Dado que también tenemos una "e" creada, también podemos copiarla y colocarla en la posición correcta. Para terminar de esta palabra copia una de las "p's" luego gírala 180º y ponla en posición.

chris-summer-4-5chris-summer-4-5chris-summer-4-5

Paso 6

Para crear nuestra "S" seguiremos las mismas reglas que antes, solo que usaremos dos círculos perfectos de 15 x 15 px en lugar del rectángulo redondeado. Al crear esta nueva letra, ten en cuenta que es el comienzo de una nueva palabra, por lo que debe estar más separada que las letras individuales. Pondré inicio esta nueva letra a 30px de distancia de la "d" en la última palabra (5 líneas de cuadrícula desocupadas entre palabras).

chris-summer-4-6chris-summer-4-6chris-summer-4-6

Paso 7

La "o" en "So" es bastante obvia, así que me saltaré eso y pasaré a la "F". Haremos que esta letra sea similar a cómo hicimos la "H", solo que eliminaremos las rutas derecha e inferior. Luego haremos un rectángulo en el medio de la forma, pero solo lo haremos de 10px de ancho en lugar de 15.

chris-summer-4-7chris-summer-4-7chris-summer-4-7

Paso 8

Como ya hemos hecho una "a", simplemente copiaremos eso y lo colocaremos en la posición correcta. Presta atención al kerning adecuado aquí. He dejado 10px entre la línea media inferior más corta en la "F" en lugar de la línea superior como todas las otras letras. Pasemos a la "s". Crea otro círculo perfecto y luego elimina los caminos inferior derecho y superior izquierdo con la herramienta Tijeras. Ahora cambia a la herramienta Editar y haz clic en el punto inferior para seleccionarlo, luego, mientras mantienes presionada la tecla shift de desplazamiento, coloca el cursor sobre el punto más alto y haz clic para hacer un camino. Selecciona la capa ovalada del panel a la izquierda y luego gira la forma 45º para crear la "s".

chris-summer-4-8chris-summer-4-8chris-summer-4-8

Paso 9

Vamos a crear la "t". Con la herramienta Rectángulo, haz un rectángulo de 25 píxeles de altura y luego elimina los lados innecesarios. Crea otro rectángulo que sea de 10px de ancho y alinéalo con la parte superior de las letras minúsculas y luego elimina los lados innecesarios.

chris-summer-4-9chris-summer-4-9chris-summer-4-9

Paso 10

Finalmente, agrupa las palabras juntas y Posiciona el grupo como se describe a continuación.

Y con eso nuestro texto está hecho. Pasemos a los adornos.

chris-summer-4-10chris-summer-4-10chris-summer-4-10

5. Crea una palmera

Paso 1

Comenzaremos creando nuestro tronco de árbol. Para empezar usaremos la herramienta Vector (V) para dibujar una forma curva. He tratado de hacerlo lo más fácil posible para que todos los mangos de los puntos hagan clic en una de las esquinas de la cuadrícula. Utiliza la imagen a continuación como guía al crear la tuya. Cuando tengamos la forma creada utilizamos la herramienta Tijeras eliminando los trazados más curvos superior e inferior. Ahora cambiaremos el color del borde a un color rojo bronceado más profundo con un tamaño de 5px, luego ajustaremos la ubicación de la forma como se ve a continuación.

chris-summer-5-1chris-summer-5-1chris-summer-5-1

Paso 2

Agreguemos algunas separaciones al tronco. Con la herramienta Vector habilitada, crea 6 separaciones curvas que suban por la forma del tronco a unos 20 píxeles de distancia. Notarás que a medida que duplicas y posicionas estos segmentos, Sketch mostrará automáticamente guías para mostrarte qué tan lejos están los elementos entre sí. Está bien dejar que estas separaciones se superpongan un poco, ya que le da un poco de carácter.

chris-summer-5-2chris-summer-5-2chris-summer-5-2

Paso 3

Continuando vamos a crear algunos cocos. Habilita el óvalo (O) y crea 3 círculos perfectos que sean de 20x20 px. Lo acariciaremos con el mismo color rojo bronceado más profundo a 5px, pero volveremos a habilitar el Relleno y lo llenaremos con el color cremoso de nuestro texto.

chris-summer-5-3chris-summer-5-3chris-summer-5-3

Paso 4

Ahora trabajaremos en las hojas de palma. Selecciona el óvalo (O) y crea un óvalo que sea de 115 x 50 px Mantén el color bronceado oscuro y rellena la forma con nuestro color de fondo. Esto nos ayudará cuando superamos las formas más adelante. Ahora selecciona la herramienta Rectángulo (R) y crea un rectángulo que cubra la mitad inferior del óvalo. Desplázate hasta el panel Capa y selecciona las capas Óvalo y Rectángulo y, a continuación, en la barra de herramientas superior, selecciona la herramienta Restar.

chris-summer-5-4chris-summer-5-4chris-summer-5-4

Paso 5

Con la herramienta Vector (V) crea 3 formas triangulares que actuarán como muescas cortadas de la fronda. Es posible que debas hacer zoom para obtener una ventaja más agradable. Una vez creadas las 3 formas de triángulo, visita de nuevo el panel Capa y selecciona los 3 triángulos y la forma semiovalo, luego en la barra de herramientas superior selecciona la herramienta Restar. Si no estás satisfecho con las muescas que fueron cortadas por tus formas, puedes hacer clic en el icono de flecha junto al nombre de la capa para ajustarlas manualmente. Sketch tiene opciones de "combinación" no destructivas que son bastante elegantes. Cuando estés satisfecho con la colocación de las muescas, vuelve a la barra de herramientas superior y elige Aplanar para establecer las restas de forma permanente.

chris-summer-5-5chris-summer-5-5chris-summer-5-5

Paso 6

Arrastremos esta fronda a su lugar, luego tendremos que duplicar esta forma, rotarla y voltearla un par de veces hasta que tengamos 5 en total. Siéntete libre de exponerlos como desees, solo ten en cuenta que no deseas oscurecer el texto y tendremos que evitarlos más adelante con otros elementos. Creé dos a la izquierda y dupliqué uno y lo giré 45º y encogió el ancho a 105px luego los duplico a ambos y los volteo horizontalmente y los alineo para que sus puntas se toquen entre sí desde el lado opuesto. Luego el superior lo giro a -45º y encogio el ancho a 93px.

chris-summer-5-6chris-summer-5-6chris-summer-5-6

Paso 7

Para rematar añadiremos un borde en la parte inferior del tronco para cortarlo prolijamente. Crea un rectángulo de 90 píxeles de ancho y, a continuación, elimina los trazados innecesarios con la herramienta Tijeras.

chris-summer-5-7chris-summer-5-7chris-summer-5-7

6. Crea una sombrilla

Paso 1

Para crear nuestra sombrilla necesitaremos seleccionar la herramienta Oval (O) y hacer un círculo perfecto que sea de 110 x 110 px. Ahora selecciona la herramienta Rectángulo (R) y crea un rectángulo que cubra la mitad inferior del óvalo. Desplázate hasta el panel Capa y selecciona las capas Óvalo y Rectángulo, luego, en la barra de herramientas superior, selecciona la herramienta Restar y luego elige Aplanar para establecer las restas de forma permanente.

chris-summer-6-1chris-summer-6-1chris-summer-6-1

Paso 2

Ahora habilita la herramienta Triángulo y crea un triángulo de 90 x 55 px y central. Dentro del semicírculo. Navega hasta el panel Capas y reorganiza el orden del semicírculo y el triángulo para que el medio círculo esté en la parte superior.

chris-summer-6-2chris-summer-6-2chris-summer-6-2

Paso 3

Selecciona la herramienta Rectángulo (R) y crea un rectángulo que sea de al menos 120px de alto y centro. Un borde en el medio círculo. Ahora, con la herramienta Tijeras, haz clic para eliminar las rutas innecesarias. Luego reorganiza el orden de las capas nuevamente para que esta línea recta esté en la parte inferior.

chris-summer-6-3chris-summer-6-3chris-summer-6-3

Paso 4

Finalmente agrupa las formas del parasol y gírala -45º y colórala como se describe a continuación.

chris-summer-6-4chris-summer-6-4chris-summer-6-4

7. Crea los pájaros

Paso 1

Estas aves son fáciles como el pastel. Todo lo que tenemos que hacer es crear un círculo, duplicarlo y luego eliminar las mitades inferiores, rotarlas y duplicarlas. Para comenzar, selecciona la herramienta Oval (O) y haz un círculo perfecto que sea de 50 x 50 px. Habilita la herramienta Tijeras y elimina los dos caminos inferiores para que quede con un medio círculo. Ahora haz clic y arrastra mientras mantienes presionada la tecla Alt para crear un duplicado de esta forma y colócala justo al lado de la otra para que los caminos se toquen.

chris-summer-7-1chris-summer-7-1chris-summer-7-1

Paso 2

Ahora puedes duplicar estas formas y rotarlas y variar el tamaño de cada una. Nuestro objetivo es tener 3 de estas aves, así que hagámoslo ahora. Puedes usar mi tamaño, rotación y posiciones que se describen a continuación.

chris-summer-7-2chris-summer-7-2chris-summer-7-2

8. Tabla de surf

Paso 1

Vamos a crear nuestra forma de tablero. Selecciona la herramienta Vector (V) y crea la forma que se ve a continuación. He resaltado los puntos y las manijas para que puedas seguirlos. Al hacer clic y arrastrar por primera vez, tus controladores serán idénticos, pero una vez que hayas creado la forma, puedes ajustar las longitudes de los controladores individualmente seleccionando la herramienta Editar y haciendo clic en un punto, luego selecciona el controlador que deseas editar y arrástralo por separado.

chris-summer-8-1chris-summer-8-1chris-summer-8-1

Paso 2

Duplica esta gran forma de tablero y encoge hasta 15 x 30 px y centro. En forma de tablero grande y en la parte inferior. También eliminaremos el borde y estableceremos el relleno en el color del borde.

chris-summer-8-2chris-summer-8-2chris-summer-8-2

Paso 3

Selecciona la herramienta Vector (V) y crea la forma en zig-zag que se ve a continuación. Configura los extremos y las uniones para que sean cuadrados y el ancho a 40px y cámbialo a nuestro color crema

chris-summer-8-3chris-summer-8-3chris-summer-8-3

Paso 4

Con la forma en zigzag creada gírela 45º. Ahora navega hasta el panel de capas y haz clic derecho en él y luego elige Usar como máscara. Desafortunadamente, esto no incluye el ancho del borde, por lo que tendremos que duplicar la forma del tablero y colocarla sobre la forma en zigzag en el panel de capas.

chris-summer-8-4chris-summer-8-4chris-summer-8-4

Paso 5

Para terminar, crea un rectángulo de 100px de ancho y elimina las rutas que no necesitas. Cuando hayas hecho eso, agrupa todas las formas juntas y colócalo como se ve en la captura de pantalla a continuación.

chris-summer-8-5chris-summer-8-5chris-summer-8-5

9. Crea las gafas de sol

Paso 1

Hagamos algunos tonos geniales tipo aviador. Selecciona la herramienta Óvalo (O) y crea un círculo perfecto de 70 x 70 px. Ahora cambia a la herramienta Editar y selecciona el punto más correcto y arrástralo sobre 10px, luego subió 10px también. Si tienes el punto seleccionado, puedes mantener presionada la tecla shift y luego presionar la flecha derecha y luego la flecha hacia arriba en el teclado para que esto sea preciso. Con este punto aún seleccionado, mantén presionada la tecla Alt y luego arrastra el mango inferior hacia abajo 10px también. Ahora selecciona el punto inferior y muévelo sobre 5px, también puedes usar las teclas de flecha para esto.

chris-summer-9-1chris-summer-9-1chris-summer-9-1

Paso 2

Sal del modo de edición y con la forma seleccionada Duplicala y visita Editar > Transformar > Voltear horizontalmente y luego colócala a 20px de distancia de la otra forma de lente.

chris-summer-9-2chris-summer-9-2chris-summer-9-2

Paso 3

Agreguemos algunos doodads destacados a las lentes. Selecciona la herramienta Rectángulo (R) y cree a un rectángulo que sea de 20px de ancho y lo suficientemente alto como para caber a través de la lente. Luego crea otro que sea de 8px de ancho y colócalo 5px a la izquierda de la pieza más ancha. Llenaremos esto con nuestro color crema también.

chris-summer-9-3chris-summer-9-3chris-summer-9-3

Paso 4

Agrupa los reflejos juntos, luego gíralos -45º y coloréalos dentro de la forma de la lente en una posición que se adapte a tu gusto. Una vez que tengas una posición que te guste, clic y arrastra mientras mantienes presionada la alt para duplicar el resaltado y colocarlo también sobre la otra lente.

chris-summer-9-4chris-summer-9-4chris-summer-9-4

Paso 5

Navega hasta el panel de capas y reorganiza las capas de resaltado para que estén sobre las capas de forma de lente correspondientes. Ahora haz clic derecho en la capa de lente y elige Usar como máscara. Desafortunadamente, esto afecta a todas las capas por encima de ella, por lo que tendremos que hacer clic derecho en la otra capa de forma de lente y elegir Ignora máscara subyacente. Notarás que los puntos que aparecen junto al nombre de la capa desaparecerán, lo que indica que la máscara ya no la afecta. Ahora haz clic derecho en la otra capa de lente y elige Usar como máscara.

chris-summer-9-5chris-summer-9-5chris-summer-9-5

Paso 6

Duplica las dos formas de lente y colócalas por encima de las demás para que el borde esté por encima de los reflejos. Luego retira el borde de la forma inferior de la lente y, en tu lugar, llénalo con el color bronceado más oscuro y sólido

chris-summer-9-6chris-summer-9-6chris-summer-9-6

Paso 7

Para rematar vamos a crear nuestra pieza de nariz. Habilita la herramienta Oval (O) y crea un óvalo de 30 x 25 px y central. Entre las dos formas del lente. Luego agrega un borde de 8px sin un color bronceado más oscuro. Ahora cambia a la herramienta Tijeras y elimina los dos caminos inferiores que no son necesarios.

chris-summer-9-7chris-summer-9-7chris-summer-9-7

Paso 8

Finalmente, duplica esta pieza de la nariz y suelta el ancho del borde a 4px. Empuja esta pieza de nariz más delgada hacia abajo un 10px. Ahora puedes agrupar todos los elementos que componen los tonos y ajustar el posicionamiento como se ve en la captura de pantalla a continuación.

chris-summer-9-8chris-summer-9-8chris-summer-9-8

10. Crea un helado Lolly

Paso 1

Para comenzar nuestra barra de helado, habilita la herramienta Rectángulo redondeado (U) y crea un rectángulo de 85 x 60 px. Habilita la herramienta Editar y luego haz clic en los puntos en el extremo izquierdo para resaltarlos y luego reduce el radio a 0px desde la barra superior.

chris-summer-10-1chris-summer-10-1chris-summer-10-1

Paso 2

Para crear el palo, repite el proceso anterior solo que esta vez nuestro rectángulo será de 45 x 20 px y aplanaremos el borde derecho donde el palo se encuentra con el helado. También rellenaremos la forma con nuestro color crema Luego, usando la herramienta Vector (V), haz clic para crear algunos remolinos en el palo para representar el grano de madera.

chris-summer-10-2chris-summer-10-2chris-summer-10-2

Paso 3

Agreguemos un poco de acción de goteo a la barra de helado ahora. Para hacer esto, usaremos la herramienta Rectángulo redondeado (U) y crearemos algunas formas de píldora y algunos círculos y luego eliminaremos los caminos innecesarios.

Nuestro primer círculo será de 10 x 10 px. La forma de la píldora al lado será de 15 x 35 px. Duplica el círculo de 10 x 10 px y muévelo hacia la derecha y luego empuja hacia abajo. Finalmente crea una forma de píldora que sea de 15 x 20 px.

Ahora habilita la herramienta Tijeras y elimina las rutas innecesarias. A continuación, habilita Editar y ajusta los puntos de las diferentes formas para que sus extremos se encuentren.

chris-summer-10-3chris-summer-10-3chris-summer-10-3

Paso 4

Agrupa todos los elementos de la barra de helado y luego colócalo como se ve en la captura de pantalla a continuación.

chris-summer-10-4chris-summer-10-4chris-summer-10-4

11. Crea un velero

Paso 1

Para crear nuestro velero, habilita la herramienta Oval (O) y crea un óvalo que sea de 80 x 40 px. Ahora selecciona la herramienta Rectángulo (R) y crea un rectángulo que cubra la mitad superior del óvalo. Desplázate hasta el panel Capa y selecciona las capas Óvalo y Rectángulo, luego, en la barra de herramientas superior, selecciona la herramienta Restar y, a continuación, Acoplar.

chris-summer-11-1chris-summer-11-1chris-summer-11-1

Paso 2

Duplica esta forma de medio círculo y alinea con la otra, luego llénalo con el color bronceado más profundo y quita el borde.

chris-summer-11-2chris-summer-11-2chris-summer-11-2

Paso 3

Con la herramienta Rectángulo (R), crea un rectángulo relleno de crema y gíralo -45º y colócalo sobre la parte posterior 3ª de la forma del barco. Ahora selecciona la capa de forma de barco que se llena completamente desde el panel de capas y haz clic derecho en ella y luego elige Usar como máscara. Luego arrastra la capa de forma de barco que es solo el borde y colócala por encima de los otros elementos del barco.

chris-summer-11-3chris-summer-11-3chris-summer-11-3

Paso 4

Ahora vamos a crear las velas. Elige la herramienta Triángulo y crea un triángulo de 25 x 35 px. Ahora habilita la herramienta Editar y haz clic en el punto más alto y arrástralo hacia la derecha para hacer un triángulo de "ángulo recto".

chris-summer-11-4chris-summer-11-4chris-summer-11-4

Paso 5

Dúplica el proceso anterior solo esta vez haz que el triángulo sea de 45 x 65 px y haz que el ángulo recto en el lado opuesto se alinee.

chris-summer-11-5chris-summer-11-5chris-summer-11-5

Paso 6

Agrupa todos los elementos del barco juntos y luego colócalo como se ve en la captura de pantalla a continuación.

chris-summer-11-6chris-summer-11-6chris-summer-11-6

12. Crea las olas

Paso 1

Ahora haremos el agua en la que está sentado nuestro velero. Selecciona la herramienta Oval y crea un círculo perfecto de 40 x 40 px y colócaselo como se describe a continuación.

chris-summer-12-1chris-summer-12-1chris-summer-12-1

Paso 2

Duplica este círculo 15 veces más y colócalos de extremo a extremo de izquierda a derecha. Desplázate hasta el panel Capas y selecciona todos estos círculos a la vez y, a continuación, elige Unión en la barra de herramientas superior.

chris-summer-12-2chris-summer-12-2chris-summer-12-2

Paso 3

Por último, habilita la herramienta Tijeras y elimina los trazados que se superponen a nuestros otros objetos. Es posible que algunos círculos enteros deba eliminarse por completo.

chris-summer-12-3chris-summer-12-3chris-summer-12-3

13. Crea el Sol

Paso 1

Ninguna escena de playa estaría completa sin el sol, así que hagamos eso ahora. Habilita la herramienta Oval y crea un círculo perfecto de 160 x 160 px y colócaselo como se ve a continuación.

chris-summer-13-1chris-summer-13-1chris-summer-13-1

Paso 2

Ahora crea dos círculos más centrados dentro de este gran círculo rojo, estos serán nuestro color crema Uno será de 140 x 140 px con un borde discontinuo de 14. El segundo será de 120 x 120 px con un guion de 13 y el espacio establecido en 12.

chris-summer-13-2chris-summer-13-2chris-summer-13-2

Paso 3

Toma la herramienta Rectángulo (R) y crea un cuadrado que ocupa el cuarto inferior izquierdo del círculo. Selecciona Editar y selecciona el punto inferior derecho y mientras mantienes presionada la tecla shift en el teclado presiona la flecha derecha 8 veces para empujarla sobre 80px. Ahora duplica esta forma dos veces, por lo que debes tener 3 de la misma forma sentados uno encima del otro.

chris-summer-13-3chris-summer-13-3chris-summer-13-3

Paso 4

Ahora haz clic en una de las formas del cuadro de ángulos y en uno de los círculos y luego elige Restar. Luego, con la herramienta Tijeras, retira los dos caminos rectos que no sean necesarios. Haz esto para los 3 círculos.

chris-summer-13-4chris-summer-13-4chris-summer-13-4

Paso 5

Ahora crearemos los rayos del sol. Para comenzar, crea un rectángulo que sea de 50px de alto y alinea uno de los bordes con el centro. Del círculo solar. A continuación, retira los bordes innecesarios con la herramienta Tijeras.

chris-summer-13-5chris-summer-13-5chris-summer-13-5

Paso 6

Con esa línea seleccionada, ve a Editar > trazados > Rotar copias y cambia el número a 7. Esto hará un patrón de explosión de estrellas con un mango en el medio. Haz clic y arrastra ese mango hacia abajo hasta que esté en el medio de los círculos solares.

chris-summer-13-6chris-summer-13-6chris-summer-13-6

Paso 7

Repite los pasos anteriores para crear rayos más pequeños. Estos rayos tendrán una altura de 30px. Una vez que hayas creado el patrón de estallido estelar gira el grupo más pequeño de rayos 22,5º.

chris-summer-13-7chris-summer-13-7chris-summer-13-7

Paso 8

Ahora navega hasta el panel Capas y haz clic en la flecha junto a las capas con los rayos del sol y elimina los caminos que se cruzan con el texto.

chris-summer-13-8chris-summer-13-8chris-summer-13-8

14. Nubes

Paso 1

Estamos en la recta final. Nuestros elementos principales están hechos y todo lo que queda es llenar el espacio vacío. Para esto voy a crear algunas formas de nubes lineales usando la herramienta Rectángulo redondeado (U) y luego eliminar las partes innecesarias con la herramienta Tijeras. Si recuerdas cómo hicimos los goteos para nuestra barra de helado anteriormente, este es el mismo proceso, solo que estamos trabajando horizontalmente en lugar de verticalmente. Siéntete libre de poner tantos o tan poco como desees. Solo quería llenar el espacio vacío tanto como pudiera. Incluso agregué el color de relleno de fondo a algunos de ellos y lo superpuse sobre los elementos como en la tabla de surf solo para agregar un poco más.

chris-summer-14-1chris-summer-14-1chris-summer-14-1

Paso 2

Por último, agregué algunos adornos al texto "Sucedió tan rápido" en la parte inferior. Sentí que estaba algo vacío allí abajo y quería tratar de evocar una sensación de "velocidad" con las líneas en ángulo.

chris-summer-14-2chris-summer-14-2chris-summer-14-2

¡Impresionante trabajo! Ya está.

El tutorial puede haber terminado, ¡pero el verano no ha hecho más que empezar! Espero haber podido mostrarles una nueva herramienta vectorial a considerar para el futuro. Siéntete libre de jugar con Sketch un poco más y aclimátate. Hay algunas excelentes características de exportación de CSS incluidas para los aficionados al diseño web que te recomiendo que consultes. Ya sea que haya seguido junto con Sketch o haya decidido quedarse con tu editor vectorial de elección, espero que lo haya disfrutado.

chris-summer-full1chris-summer-full1chris-summer-full1
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.
Advertisement
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.