Tutorial de Sketch: cree una ilustración sencilla de un frasco de prescripción en Sketch

Recientemente usé Sketch en lugar de Illustrator para crear una ilustración simple. Puedes verlo a continuación:

Entonces, te guiaré a través del proceso, espero que te ayude a comprender algunas de las técnicas y trucos que puedes usar en Sketch.

1. Crea una mesa de trabajo

Creé esta ilustración solo para poder ponerla en Dribbble. Siempre que creo cosas adaptadas a Dribbble, uso una mesa de trabajo personalizada. No es tan complicado como parece, puede crear sus mesas de trabajo personalizadas fácilmente.

Presione “A” en su teclado o vaya a “Insertar & gt; Artboard ’y verá una lista de diferentes mesas de trabajo que aparecen en el panel lateral derecho. En la parte inferior verá un signo más como este:

Como puede ver arriba, he creado uno para Dribbble con dimensiones de 800×600 px. Una vez que hace clic en eso, aparece un cuadro de diálogo donde puede establecer el tamaño personalizado para su mesa de trabajo y darle un nombre.

2. Dale trasfondo a tu mesa de trabajo

Cuando seleccionas la mesa de trabajo, tienes la opción de darle color. Si no le da ningún color a su mesa de trabajo, se tratará como una capa transparente cuando la exporte como PNG.

Hay dos formas de hacer esto.


En mi ejemplo, usé una forma de rectángulo para dar color de fondo (# 0786FF) a la mesa de trabajo y la bloqueé usando Cmd + Shift + L atajo.

3. Empiece a crear formas básicas

Mira la siguiente imagen y síguela en consecuencia. No es necesario que copie todos los números, solo obtenga las formas y proporciones básicas correctas.

Por lo tanto, necesita rectángulos para crear la cápsula, la tapa del contenedor, el contenedor y la etiqueta del contenedor; uno para cada uno. No se preocupe por el posicionamiento en este momento.

Seleccione el rectángulo Cápsula y aumente el control deslizante del radio hasta que comience a parecerse a una Cápsula. Normalmente lo llevo hasta 100.

Del mismo modo, déle a la tapa del contenedor un radio de 4 (esta es mi preferencia personal, puede elegir cualquier cosa siempre que no se parezca a la cápsula).

Ahora, démosle un radio de esquina al contenedor. Dado que la tapa del contenedor se apoyará en la parte superior del contenedor, no necesitaremos ningún radio para la esquina superior izquierda y superior derecha del contenedor. En nuestro ejemplo, quiero aplicar un radio de esquina de 10 a la esquina inferior izquierda e inferior derecha del contenedor. Para lograr esto, escribiré “0/0/10/10” (arriba a la izquierda / arriba a la derecha / abajo a la derecha / abajo a la izquierda). Puede parecer un poco complicado, pero si está acostumbrado a la propiedad de radio de borde de CSS, será fácil de seguir.

Lo siguiente es la etiqueta. La etiqueta se extenderá desde el borde derecho de la botella, por lo que todas las esquinas de ese lado tendrán un radio 0 . Eso significa que la parte superior derecha y la inferior derecha serán cero. En nuestro ejemplo, quiero que las esquinas del lado izquierdo de mi etiqueta sean 4. Por lo tanto, en el cuadro del radio, escribiré ‘4/0/0/4 & # x27; (arriba a la izquierda / arriba a la derecha / abajo a la derecha / abajo a la izquierda).

Echemos un vistazo a nuestras formas:

Sugerencia: también puede dar radio de esquina a una forma haciendo doble clic en ella y seleccionando uno o varios puntos de ancla y cambiando los valores.

Ahora que está hecho, coloreemos estas cosas.


Todos los valores son rellenos sólidos, sin degradados.

4. Ensambla las formas

Moví la forma de mi etiqueta encima de la forma del contenedor para que el borde derecho del contenedor y la etiqueta estén alineados entre sí. Si arrastra la forma lentamente, se ajustará allí automáticamente.

Otra forma podría ser seleccionar tanto la forma del contenedor como la forma de la etiqueta manteniendo presionada la tecla shift y luego presionar la alineación izquierda que alineará su borde izquierdo para luego presionar la alineación derecha. Verifique a continuación:

El ensamblaje final se ve así:

5. Agrégales más detalles

Cápsula:

Duplica la cápsula (cmd + D) y divide el ancho de la forma por 2. Alinea esta forma dividida con el lado derecho de la forma original y dale un color (he usado # 45DC50). Cambie el radio de la esquina superior izquierda, parte inferior izquierda a 0. Se verá así:

Etiqueta:

Queremos representar que hay algo escrito en la etiqueta, por lo general, usa líneas para representar eso. Para hacer líneas rectas, generalmente uso rectángulos en lugar de líneas vectoriales con la herramienta de lápiz (atajo: V). La simple razón de esto es que no quiero demasiados controles en mi forma. Cuando crea una línea con la herramienta Pluma, obtiene 4 coordenadas (desde X1, Y1 hasta X2, Y2). Una vez más, esta es mi elección personal y puedes experimentar.

Cree un rectángulo de ancho 60 y alto 2. Déle un color gris claro (# E4E9F1). Ahora duplíquelos (cmd + D) y cree alrededor de 5 de ellos.

Genial, ahora crea dos rectángulos más de ancho 60 y alto 4 y dale un color rosado (# FF9AD5).

Coloque estas formas en el siguiente estilo:

Una cosa más. Reduzca el ancho del tercer rectángulo gris o la cuarta línea desde arriba, digamos 20 desde la derecha.

SUGERENCIA: Para lograrlo, simplemente escriba -20L en el cuadro de ancho. Esto reducirá el ancho de la forma desde el lado derecho. Para reducirlo desde el lado izquierdo, puede escribir -20R. Para reducirlo desde la parte inferior, puede escribir -20T en la sección “Altura”. Y para reducirlo desde arriba puede escribir -20B.

Así es como se ve ahora:

6. Dar luces y sombras

Esta es una parte muy importante. Primero tienes que decidir de dónde viene la luz. En nuestro ejemplo, la luz vendrá así:

A partir de aquí, puede resultar un poco complicado de seguir, pero intente hacer esto varias veces y lo dominará.

Aspectos destacados de la cápsula & amp; Sombras:

Cree un círculo pequeño de tamaño 10×10 (puede variar esto) y colóquelo en el borde superior derecho de la cápsula. Ahora duplique el lado verde de la cápsula (cmd + D). Seleccione el lado verde y el círculo pequeño (Mayús + clic). Ahora haz clic en la operación “Intersección” en la barra de herramientas superior y dale a esa forma un color blanco. Vea a continuación:

Ahora seleccione esta forma intersecada y cambie su combinación de “Normal” a “Luz suave” en el menú desplegable junto al relleno.

Cree un nuevo rectángulo de ancho 50 y alto 4 y alinéelo en el centro de la forma de la cápsula principal. Dale la misma mezcla de “Luz suave” que la anterior.

Creemos sombras. Cree dos copias de la forma de la cápsula principal (cmd + D dos veces). Así que ahora habrá tres formas. Seleccione la forma más alta y muévala 6px hacia la derecha (+6 en la posición X) y 6px hacia arriba (-6 en la posición Y). Ahora seleccione la forma de la cápsula movida y otra forma de la cápsula debajo de eso (asegúrese de que la forma movida esté en la parte superior) y haga clic en la operación Restar. Dale un tono de gris más oscuro (algo así como # D9D9D9) y configura el modo de fusión en “Multiplicar”.

Se verá así:


Destacados de botella & amp; Sombras:

Repite lo mismo que arriba para que la botella cree la forma de la sombra. Aquí moví la forma más superior 12px a la derecha (+12 en la posición X) y 6px hacia arriba (-6 en la posición Y). Esta vez, en lugar de usar modos de fusión, daremos tonos más oscuros de amarillo (# F5B056). Se verá así:

Creemos algunos aspectos destacados. Crea un rectángulo de 8px de ancho y 180px de alto (igual que la botella / forma amarilla). Dale un color amarillo muy claro (# FEF792). Crea otro rectángulo de 6px de ancho y 180px de alto con el mismo color. Colócalos encima de la capa “Botella” y debajo de la capa de sombra Botella. Algo como esto:

Crea otro rectángulo de 120 px de ancho (el mismo ancho que la botella) y 12 px de alto y colócalo justo debajo de la tapa de la botella para crear una sombra.

Aspectos destacados y amp; Sombras:

Utilice la misma técnica de Restar dos formas para crear sombras para la tapa de la botella y darle el mismo color y modo de fusión que la sombra de la cápsula. Puede copiar el estilo de sombras de la cápsula con Alt + Cmd + C y seleccionar la capa de sombra de la botella y presionar Alt + Cmd + V para aplicar el mismo estilo. Aquí encontré que esta sombra era demasiado fuerte, reduje la opacidad de esta forma al 70%. Aquí es donde estamos ahora:

Ahora crea un rectángulo de 12 píxeles de ancho y 24 píxeles de alto. Copie el estilo de sombra de la cápsula y péguelo en este rectángulo. Duplica este rectángulo y dale un color blanco y un modo de fusión normal. Crea otro rectángulo de ancho 6px y alto 24px con color blanco y mezcla normal. Coloque estas formas de la siguiente manera:

7. Casi llegamos – Toques finales

Lo único que queda ahora es la etiqueta “Rx”. Utilice su fuente sans serif preferida y escriba “Rx” con ella. Ponlo entre el rectángulo rosa superior. Cree una copia del rectángulo rosa y reduzca el ancho de ambos rectángulos para crear un espacio para acomodar el texto “Rx”.

Para crear una sombra paralela para el contenedor, cree un óvalo de tamaño de ancho 180px y alto 12px. Coloque esta forma completamente debajo de todas las formas pero encima del BG (forma azul en este ejemplo). Déle un tono más oscuro de azul (# 1F76C8) y en lugar de alinearlo en el centro, manténgalo en un lado. Vea a continuación:

¡Y listo! ¡Listo!

Espero que haya sido divertido seguir esto. Si está atascado en algún lugar o simplemente quiere inspeccionar cómo funcionan las cosas, puede descargar el archivo desde aquí. Siempre soy todo oídos para comentarios, comentarios o algo que olvidé en el medio. Encuéntrame en Twitter, Dribbble y Facebook. Para aprender más técnicas de Sketch, sígueme aquí en medium.

Más tutoriales de Sketch de mi parte: