Hacer iconos de cesta de compras en 3D, aunque parezcan planos

¿Buscas un nuevo icono? No busque más. Aprenda a crear un icono de cesta de la compra personalizado para su próximo proyecto de diseño web. Combinaremos cualidades 3D con un look plano. Necesitará una comprensión firme de las herramientas de Adobe Illustrators para completar este tutorial..

Vista previa de la imagen final

A continuación se muestra el diseño final en el que trabajaremos.. 

Paso 1

Comience seleccionando la herramienta Rectángulo (M) y dibujando un rectángulo con un trazo de 4 puntos. Asegúrese de estar usando un color claro para el trazo para poder ver lo que está haciendo cuando aplica el efecto 3D. No aplique un relleno al rectángulo.

Paso 2

Vaya a Efecto> 3D> Extrusión y biselado. Dé a su forma una rotación para los ejes X, Y y Z y una Profundidad de Extrusión de aproximadamente 16. Haga clic en Aceptar. Copia y pega esta forma para usarla en el siguiente paso.

Paso 3

En la paleta de apariencia, haga doble clic en 3D Extrude & Bevel. Ingrese una profundidad de extrusión mucho mayor y haga clic en Aceptar.

Etapa 4

Ponga las formas una encima de la otra y haga que la forma superior o inferior sea un poco más pequeña o más grande que la otra. De esta manera se puede decir que hay dos formas que conforman la canasta. Así es como debería verse tu obra de arte ahora mismo..

Paso 5

Para manipular aún más la forma, primero deberá ir a Objeto> Expandir apariencia. Con la Herramienta de selección directa (A), arrastre para seleccionar los puntos como se resalta a continuación. Mueva los puntos hacia adentro un poco para que toda la canasta quede un poco más delgada en la parte inferior.

Paso 6

Asegúrese de mover los puntos alrededor del borde superior de la cesta también.

Paso 7

Aplicaremos un degradado de azul a negro en nuestra cesta. Cuando trabaje con negro, asegúrese de usar un negro que tenga valores cero para R, G y B. Esto le dará un negro mucho más rico.

Paso 8

Seleccione la cara de la cesta y vaya a Objeto> Trayectoria> Desplazamiento de ruta. Ingrese aproximadamente -10 y haga clic en Aceptar. Esto creará un área interior con las mismas proporciones de la forma más grande. Luego podemos aplicar dos colores diferentes a las formas para darle a la canasta un mayor interés visual..

Paso 9

Dar a la otra cara de la canasta el mismo tratamiento de trayectoria de desplazamiento.

Paso 10

Si desea que sus gradientes sean consistentes en varias formas, asegúrese de seleccionar ambas formas al mismo tiempo. He creado el aspecto de una superficie muy reflectante cambiando bruscamente el color en el degradado. Conseguir una reflexión realista llevará algo de experimentación..

Paso 11

Seleccione el área interior en la cara de la canasta y vaya a Editar> Editar colores> Ajustar balance de color. Introduzca 5 para cada valor y haga clic en Aceptar. Esto hará que el color azul sea 5% más claro en el área seleccionada y dará la impresión de un cambio sutil en la superficie del objeto..

Paso 12

Así es como se verá tu obra de arte ahora mismo..

Paso 13

Continuar dando el resto de los gradientes de la cesta. Observe cómo el look reflectante no está demasiado exagerado. Tiendo a dar a cada cara de la canasta no más de un cambio de color abrupto. Pero, por supuesto, las reglas se hicieron para romperse. Solo sigue intentando diferentes ángulos e intensidades de color hasta que se vea bien para ti. También observe cómo el interior de la canasta no hace mucho uso de un reflejo, solo de un gradiente oscuro a claro.

Paso 14

Hacer los agujeros que cortan la canasta es más fácil de lo que piensas. Usando la herramienta Pluma (P), dibuja una forma como la de abajo. Asegúrate de seguir las líneas de la cesta. Básicamente, asegúrese de que sus líneas superiores estén paralelas a la parte superior e inferior de la canasta y sus líneas laterales sean paralelas a los lados de la canasta.

Paso 15

Copie y pegue la forma y superpóngalos como se muestra a continuación. En el buscador de ruta, seleccione Restar del área de forma y luego Expandir.

Paso 16

Te quedará con una forma que se parece al borde de una ventana.

Paso 17

Dado que la forma de la ventana principal aún está en el portapapeles, presione Opción + F para pegar la forma de la ventana exactamente desde donde la copió. Ahora puede utilizar esta forma para crear las otras ventanas. Dado que la forma de la canasta se reduce hacia la parte inferior, deberá ajustar cada ventana ligeramente para que se vean correctamente. Use la herramienta Selección directa para ajustar la forma de cada ventana..

Paso 18

Dibuja las ventanas en la otra cara de la cesta..

Seleccione la forma de cada ventana en la cara de un lado de la canasta y dele un degradado marrón a negro simultáneamente. Esto garantizará que el gradiente sea uniforme y consistente en todas las ventanas.

Paso 19

Para hacer las cajas que van dentro de la canasta primero dibuja una forma cuadrada.

Paso 20

Vaya a Efecto> 3D> Extrusión y biselado. Ingrese las variables a continuación y haga clic en Aceptar.

Paso 21

Copie y pegue los cuadros un par de veces y cambie la profundidad de Extrusión para hacer diferentes alturas de cuadros.

Paso 22

Para continuar trabajando con los cuadros, deberá expandirlos yendo a Objeto> Expandir apariencia. Muy importante: desagrupa todas las casillas hasta que ya no puedas desagruparlas. Para desagrupar los cuadros vaya a Objeto> Desagrupar.

Luego, rota las cajas para que estén todas en ángulos ligeramente diferentes. Dales un cálido degradado marrón asegurándote de variar el brillo de cada lado de la caja para crear una apariencia más realista.

Paso 23

Agregue un poco más de detalles copiando y pegando la parte superior del cuadro y utilizando la herramienta de selección directa para remodelar el objeto para que parezca un pedazo de cinta. Rellene la forma con blanco y ajuste la Opacidad en la Paleta de Transparencia a aproximadamente el 10%.

Paso 24

Vaya a Objeto> Ruta> Ruta de compensación e ingrese -5 luego haga clic en Aceptar.

Paso 25

Seleccione la forma interior y ajuste el degradado para que no se mezcle con la otra forma detrás de ella.

Paso 26

Una forma rápida de hacer que parezca que las cajas están dentro de la canasta es aplicar una máscara de recorte a las mismas..

Usando la herramienta Pluma, dibuje una línea donde está la línea de puntos. Su línea no necesitará un color de relleno o trazo. La siguiente línea roja es solo para representación..

Paso 27

Asegúrese de que la forma que acaba de dibujar está en frente de las cajas. Seleccione todas las casillas y seleccione la forma de la máscara, luego vaya a Objeto> Máscara de recorte> Crear. Tus cajas se verán instantáneamente como si estuvieran dentro de la canasta!

Si desea seguir editando el color o la forma de los cuadros, haga doble clic en ellos para ingresar en lo que se llama Modo de aislamiento (Illustrator CS3 y superior) y ajústelos a su gusto..

Paso 28

Cree algunos aspectos destacados en la cesta dibujando primero una forma básica con la herramienta Pluma. Vaya a Efecto> Desenfoque> Desenfoque gaussiano e ingrese una variable que se vea bien para usted.

Paso 29

Copia y pega todos los elementos hasta el momento. Seleccione la copia que acaba de hacer y en la Paleta de Pathfinder seleccione Agregar al área de forma seguido de Expandir.

Paso 30

Dale a esta forma un trazo grueso. Establezca las tapas en Redondear y Unir como se resalta a continuación. A continuación, asigne una sombra paralela a la forma yendo a Efecto> Estilizar> Sombra paralela.

Paso 31

Pon la forma detrás de todo lo demás..

Paso 32

Puede convertir fácilmente este icono en un conjunto cambiando las ventanas a un degradado de azul a negro y formando una flecha con un triángulo y una forma cuadrada.

Imagen final

Aquí está, los iconos de la cesta de la compra final..