Share
En este tutorial, aprenderá cómo combinar diferentes métodos de Illustrator y Photoshop para mejorar su arte vectorial en 3D. A través del proceso, aprenderá a usar el panel de apariencia, la extrusión 3D y la revolución 3D. También creará un pincel de arte personalizado y su propio símbolo. Voy a mostrarles cómo crear máscaras utilizando canales y capas, así como crear máscaras de recorte en Photoshop..
Trabajar en un entorno profesional puede ser difícil a veces. Los clientes a menudo desean ver varios bocetos de su producto, pero la decisión final se toma solo cuando los impresiona con una imagen que está muy pulida. Este tipo de trabajo le brinda una sensación gratificante cuando el cliente está de acuerdo con su concepto..
Les mostraré algunas técnicas para mejorar su arte vectorial en 3D. Usaremos el ejemplo de un simpático robot de reparto de pizzas inspirado en Mobot, el robot del juego para iPad Monkey Labor, que se lanzó a fines de diciembre de 2010..
Solo porque este es un tutorial digital, no debe esperar que empecemos con Illustrator de inmediato. La práctica de un buen diseñador siempre debe comenzar con su cuaderno de bocetos. Dibuje algunas ideas y póngalas en un papel. No tienes que definir todo a la vez. Diseñar es un proceso continuo. Este es un concepto aproximado de la dirección de arte con algunos conceptos básicos sobre la sensación y la dinámica de la imagen..
Crear un nuevo documento (hice el mío 600px de ancho por 600px de altura). Coloque el boceto en su mesa de trabajo. Haga doble clic en "Capa 1" para obtener las opciones emergentes, y asígnele el nombre "Sketch" por ejemplo. Es mejor nombrar las capas como desee, de esa manera siempre puede encontrar las que necesita. Active Bloquear, Atenuar imágenes y ajústelo al 50%..
Presione la tecla Alt y haga clic en el ícono Crear nueva capa en la esquina inferior derecha para obtener la ventana emergente de propiedades de capa para la capa recién creada y asígnele el nombre "Robot".
Seleccione la herramienta Elipse (L) y dibuje un círculo. Mantenga presionadas las teclas Mayús y Alt para restringir las proporciones. Active las guías inteligentes, que encontrará en Ver> Guías inteligentes o simplemente haga clic en Comando + U. De esta manera, tendrá más control sobre los elementos que deben alinearse. Cree un rectángulo con la herramienta Rectángulo (M), como en la imagen de abajo, y asegúrese de que el lado derecho del rectángulo esté alineado con el centro del círculo.
Use la Herramienta de selección (V) para seleccionar tanto el rectángulo como el círculo. Ahora, queremos restar el rectángulo del círculo, así que abra el Panel de Pathfinder y haga clic en Menos frente. Nos queda un buen semicírculo..
Crea otro círculo para el mentón y dos rectángulos. Si olvidó activar las Guías inteligentes, ahora es el momento de hacerlo. Le ayudará a obtener la posición deseada, como se muestra en la siguiente imagen..
Con todas las formas aún seleccionadas, abra el Panel de Pathfinder y haga clic en Unite para crear una Forma compuesta. Esta es nuestra forma básica para crear la cabeza de un robot. Para hacer las cosas bien, es bueno establecer el Trazo a cero y Rellenar en blanco, de esa forma tendrá más control sobre la luz cuando esté creando un objeto 3D..
Ahora, que comience la diversión. Estás a punto de crear una cabeza de robot 3D. Con la forma seleccionada, vaya a Efecto> 3D> Revolución. Active Vista previa y haga clic en Más opciones. Aplique las siguientes opciones: 35, -65 y -38. Deje las opciones Perspectiva en 0 y Revolución como están. Ajuste la intensidad de la luz al 40%, y la luz ambiental al 53%. Haga clic en Aceptar, y tenemos una cabeza.
A veces, cuando giras formas e intentas encontrar el ángulo correcto (especialmente cuando usas una perspectiva distinta de 0, ves la forma 3D de forma diferente a la que habías planeado. A pesar de que creaste una forma 3D, sigue siendo vector y puede editarlo como desee. Con la herramienta de selección directa (A) puede seleccionar puntos de ancla individuales o varios al mismo tiempo, y moverlos para obtener una forma más agradable.
Con la herramienta de selección (V) puede arrastrar la tecla Alt y arrastrar la forma para hacer una copia. O simplemente puede hacer clic en el punto en la capa "Cabeza" y hacer clic en Comando + C + F para copiar y pegar en el frente, que es lo mismo. Cambia el nombre de la nueva capa a "Cuerpo".
Otra cosa interesante acerca de 3D es que siempre puedes ajustar la configuración más tarde abriendo el Panel de apariencia. Puede cambiar el color del relleno, la opacidad, agregar un trazo o abrir las opciones 3D nuevamente y cambiar las opciones.
Por ahora, vamos a remodelar el cuerpo. Una vez más, seleccione la forma "Cuerpo" con la herramienta de selección (V) y desactive la visibilidad del efecto Revolución 3D en el Panel de apariencia. Cree la forma deseada moviendo los puntos de anclaje y restando un pequeño rectángulo de la forma base como aprendimos anteriormente. Cuando esté satisfecho con la forma, puede volver a activar la visibilidad del Efecto Revolución 3D.
Ahora, pasemos a algunas formas más complejas, las manos. Como puedes ver en la imagen de abajo, no es nada nuevo. Podemos hacer que la base de la mano salga de un círculo cortado por la mitad (nombre de la capa "Base") y los dedos de la forma de "Cabeza". Para eso usamos el método de ajuste del Punto de Anclaje, como en el Paso 9.
Cuando tiene muchas formas 3D, como en este caso, es importante saber el orden de las capas. Esto es para que los dedos le den la sensación de que están colocados en el espacio 3D. Puede rotar formas separadas con el cubo interactivo en la ventana de Opciones de Revolución 3D.
La mano esta hecha Ahora necesitamos una muñeca. Por eso vamos a aprender otro método 3D. Cree un nuevo círculo con la herramienta Ellipse (L) y vaya a Efecto> 3D> Extruir y biselar. Ya que estamos familiarizados con la sección de Posición, usaremos las siguientes configuraciones 77, -26, 50, con una Perspectiva de 0. Pero también tenemos una nueva sección donde puede elegir entre diferentes tipos de Biselados..
Vamos a utilizar bisel "Complex 3" para nuestra muñeca. Establezca la profundidad de extrusión en 10 pt, la altura en 4 pt y haga clic en Aceptar. Seleccione todas las formas de las manos y duplíquelas presionando Comando + C + F. Ordene todas las capas y asígnele el nombre que desee. No olvide duplicar la "Muñeca" y coloque la capa "Muñeca" detrás de la capa "Base".
Hablando de la base, estamos volviendo a lo básico con este paso. Necesitamos conectar las manos con el cuerpo. Los diseñadores deben tener recursos, por lo que debe ser consciente de las cosas que lo rodean. Por supuesto, puedes seguir buscando en la web las imágenes que necesitas, pero es mucho más divertido si puedes hacer todo tú mismo (como lo hice yo). Simplemente tome su cámara y tome algunas fotos de una manguera de baño en diferentes posiciones, pero tenga en cuenta cómo las va a usar para las posiciones de brazos y piernas..
Abre una de tus nuevas imágenes en Photoshop. Comencemos con el que vamos a utilizar para el brazo delantero. Vamos a separar la manguera del fondo. Una forma de hacerlo es a través de la paleta de canales. La pestaña Canales debería estar por defecto junto a la pestaña Capas, pero si no lo está, puede encontrarla en Ventana> Canales.
Aquí encontrará tres canales para cada imagen RGB, uno para cada color. El canal rojo, el canal verde, el canal azul y el canal RGB, que es solo un compuesto de los tres. Al presionar una de las combinaciones (Comando + 3, Comando + 4, Comando + 5) escritas en cada canal, puede aislar un canal elegido y todos los demás se vuelven invisibles. Pruebe los tres y encuentre el que tenga más contraste entre la manguera y el fondo..
En este caso vamos a utilizar el canal azul. Arrastre el canal azul para crear un nuevo icono de canal. Ahora ha creado un nuevo canal que usaremos como canal alfa. Haga doble clic en el nombre del Canal de copia azul y cámbiele el nombre a "Alfa".
Asegúrese de que está en el canal alfa. Levante la herramienta Dodge (O) y, en la barra de menú, seleccione el pincel Redondo suave de 100 píxeles y establezca su dureza al 27%. En el menú desplegable de la barra de menú, puede establecer el rango tanto en la herramienta de esquivar (O) como en la herramienta de grabación (O) en resaltado, tonos medios o sombras.
La herramienta de grabación (O) oscurece el área y la herramienta de esquivar (O) la aclara, por lo tanto, debe usar "Sombras" para la herramienta de grabación (O) si no desea oscurecer las áreas claras. También puede ajustar la intensidad con el ajuste de exposición. Cuando utilice la herramienta Dodge (O), comience con la configuración del rango de tonos medios y disminuya las exposiciones alrededor de 10 a 20%, aunque depende de la imagen. Luego puede continuar con el ajuste Resaltar y 15% de exposición..
Establezca la Herramienta de grabación (O) en Sombras y Exposición al 25%, luego comience a quemar las áreas oscuras. Puede acceder rápidamente a la configuración de pincel haciendo clic derecho. Asegúrate de hacer ajustes de acuerdo a tu imagen. Tendrá que cambiar entre las herramientas Grabar y Esquivar varias veces, así como ajustar el tamaño del pincel y la configuración de exposición. Pero no tengas miedo. Al final de la última imagen, podrás entenderlo..
Cuando pareces estar al final, puedes ayudarte con la herramienta Lazo (L). Seleccione las áreas restantes y rellénelas con un color blanco presionando Comando + Retroceso para llenar el área con el color de fondo. Si ha configurado cualquier otro color en lugar de blanco y negro, presione D para restablecer los colores. Use la herramienta Pincel (B) para colorear las áreas restantes que no se pudieron quemar a negro.
Con la herramienta Varita mágica (W), seleccione el área negra y haga clic en el canal RGB para seleccionar todos los canales excepto el canal alfa. Vaya a la paleta de capas, haga clic con el botón derecho en la imagen y seleccione Capa a través de Copiar o presione Comando + J para crear una capa recortada con solo la manguera.
Desactive la capa "Fondo" y guarde su imagen como un PNG-24 transparente.
Repita los pasos en Photoshop para todas las demás imágenes para obtener otro brazo y dos piernas..
Una vez de vuelta en Illustrator, puede colocar los brazos y las piernas en el lugar correcto, y escalarlos de acuerdo con la herramienta de selección (V). Use la imagen de boceto en bruto como referencia para colocar los brazos y las piernas, pero no tiene que pegarse a ella. Diseñar siempre es un proceso en proceso, y la mayoría de las veces los resultados son incluso mejores si experimenta un poco..
Pero, ¿cómo vamos a meter los brazos y las piernas en su cuerpo? Podemos usar la "Cabeza" para las articulaciones del hombro y la cadera. Con la herramienta de selección (V) presione la tecla Alt y arrastre la "Cabeza" para duplicarla. Haz tres copias de ello. Escala hacia abajo y ajusta la perspectiva usando 3D Revolve en el Panel de Apariencia, como hicimos antes. Use los siguientes ajustes de posición para el hombro: 141, 3 y 38. Para la articulación frontal de la cadera: -52, 60 y -56, y para la articulación posterior de la cadera: 15, -21 y -159.
Para hacer una cadera que conecte las articulaciones de la cadera, cree un círculo con la herramienta Elipse (L) y un rectángulo con la herramienta Rectángulo (M). Combínalos con la herramienta Unite en el panel de Pathfinder. Vaya a Efectos> 3D> Extrusión y biselado, y complete los siguientes ajustes para Posición: 20, -54, -32. Establezca Perspectiva en 142, Extruir profundidad en 40 pt, y aplique la siguiente configuración para Superficie: 56, 34, 60, 90, 25.
Para completar el robot, se necesita un par de pies. Con Ellipse Tool (L), cree una Ellipse y vaya a Efectos> 3D> Extrusión y biselado. Establezca la Posición en: 129, -37, -44, Perspectiva en 160, Profundidad de extrusión en 20 pt, Altura en 4 pt y para Bisel elija "Complejo 3". Haga clic en Aceptar, duplique la forma y cambie el nombre a "Derecha" y "Pie izquierdo". Para el pie izquierdo aplique los siguientes ajustes: Posición 151, -52, -71; Perspectiva 160; Extruya la profundidad 20 pt, la altura 4 pt, y una vez más elija "Complejo 3" para el bisel.
Ahora aprendamos algo nuevo para un cambio. Como puede ver, los brazos y los pies no encajan exactamente en las articulaciones. Vamos a corregir esto usando máscaras de recorte. Vamos a empezar con el pie izquierdo del robot. Si usamos la perspectiva correctamente, entonces su pierna izquierda parece un poco más larga. Así que pongamos su pie izquierdo donde creemos que debería estar..
Levante la herramienta Pluma (P) y dibuje una forma que rodea la parte de la pierna que queremos que sea visible. Seleccione la forma y la pierna (¡la forma debe estar delante de la pierna!), Haga clic con el botón derecho del ratón y seleccione Crear máscara de recorte. Voila, nos cortamos la pierna. Ahora haga lo mismo con todo lo que necesita ser cortado.
Si corta todas las extremidades y coloca todas las capas en el orden correcto para que las formas no se superpongan entre sí, debe tener algo que se parece a la imagen que se muestra a continuación..
Selecciona todo y presiona Comando + C para copiar el robot al portapapeles. Vuelva a Photoshop y presione Comando + N para crear un nuevo documento. El tamaño predeterminado de la imagen será el mismo que el robot, pero puede aumentar su tamaño porque necesitaremos un poco más de espacio para manipular la imagen. Haz que sea de 1600 por 1200 píxeles con una resolución de 180 y llámalo Mobot.
Presiona Comando + V para pegar el contenido. Elija Pegar como: Objeto inteligente, haga clic en Aceptar y luego en Volver para confirmarlo. Cambie el nombre de la capa Vector Smart Object a "Mobot". Vaya a Archivo> Colocar, y elija un archivo para su textura, haga clic en Colocar y presione Entrar. También puede eliminar la capa "Fondo" ya que no la necesitaremos.
Asegúrese de que la capa de "textura" esté por encima de la capa de "Mobot". Haga clic derecho en él y elija Crear máscara de recorte. Obtendrás algo similar a lo que se muestra a continuación.
Después de crear una máscara de recorte, ahora puede mover libremente la capa de textura (con la herramienta Mover) y seguir manteniendo el contorno del robot. En la paleta de capas, establezca el modo de fusión en luz lineal y la opacidad en 97%.
La textura es desigual, y queremos obtener resultados adecuados, no podemos usar una textura para todas las partes del robot. Es por eso que vamos a aprender otro método de enmascaramiento. Asegúrate de haber seleccionado la capa "Textura". Haga clic en la herramienta Máscara. Tu capa "Textura" obtendrá la miniatura de máscara. De forma predeterminada, la miniatura de la máscara está bloqueada en la miniatura de capa, y para este tutorial lo dejaremos así, pero tenga en cuenta que puede desbloquear las miniaturas y mover la capa y su máscara por separado si desea.
Sabiendo que la capa y su máscara son entidades separadas, puede elegir cualquiera de ellas para hacer correcciones en ella. Ahora necesitamos enmascarar la capa, así que haremos clic en la Miniatura de máscara (si aún no está seleccionada). Levante la herramienta Pincel (B) y pinte las piernas y los brazos con un color negro. Al hacer esto, está configurando un canal alfa que le indica las partes que están visibles y las que no. Si compara su pintura con la Máscara Miniatura, puede ver que las partes que están pintadas de negro no son visibles.
Cuando haya terminado bastante, puede agregar una capa de Ajuste sobre ella. Haga clic en el pequeño círculo blanco y negro en la parte inferior y elija Tono / Saturación, la Paleta de ajustes se abrirá de manera predeterminada. Si no es así, puede encontrarlo en Ventana> Ajustes. Establezca la Saturación en -75 y cree una Máscara de recorte en la capa Ajuste de tono / saturación.
Para duplicar la capa "Textura", simplemente haga clic en ella y presione Comando + J, o haga clic con el botón derecho y seleccione Duplicar capa. Denomínelo "Color de textura" y establezca su Modo de fusión en Color Burn, y la Opacidad en 14%. Haga otra copia de la capa y asígnele el nombre "Textura viva". Configure el modo de fusión de este en Vivid Light y ajuste la opacidad al 60%..
Para obtener los resultados correctos, arrastre la capa Ajuste de tono / saturación entre las capas "Textura" y "Color de textura". De esta manera, la capa de Ajuste influirá solo en la capa "Textura".
Ahora aplique el conocimiento reunido de los pasos 33 a 39 para hacer las capas de textura para las piernas y los brazos. El personaje en este punto debe ser similar al de abajo. Guarde el archivo como un PSD. Vaya a Imagen> Recortar, seleccione Píxeles transparentes y haga clic en Aceptar. Guarde la imagen como un PNG-24 transparente y colóquela en su archivo de Illustrator.
Una vez de regreso en Illustrator, probablemente notará que la imagen importada es un poco más grande que el robot vectorial. Esto se debe a que trabajamos con una resolución de 180 ppp en Photoshop, mientras que la resolución predeterminada en Illustrator es 72. Por lo tanto, si calcula, obtiene ese 72 al 40% de 180. Haga clic con el botón derecho en la imagen importada y seleccione Transformar> Escala. Establezca 40% en la escala uniforme y haga clic en Aceptar.
Seleccione la imagen transformada, colóquela sobre el robot vectorial y colóquela en una capa separada. Nombra la capa "Mobot" y, mientras aún esté seleccionada, ve a Efecto> Estilizar> Resplandor exterior. Aplique un modo de fusión normal con color negro, 30% de opacidad y 10px Blur.
Crea una nueva capa, llámala "Cara" y oculta todas las demás capas. Levante la herramienta Pluma (P) y haga una forma como la de la imagen de abajo. Vaya a Efectos> 3D> Revolución, y aplique los siguientes ajustes: Posición -61, 17, 14. Deje el resto y asegúrese de haber seleccionado el Borde izquierdo para Desfase. Nombra la forma "Boca" y haz una copia de ella (Comando + C + F).
Mientras aún lo tiene seleccionado, vaya a Objeto> Expandir apariencia? con la herramienta de selección (V), haga doble clic en el objeto "Boca" dos veces para entrar en el modo de aislamiento. Mantenga presionada la tecla Comando y seleccione todas las capas que no necesita. Elimínalos haciendo clic en el pequeño icono de thrash.
Una vez más, use la Herramienta de selección (V), mantenga presionada la tecla Mayús y seleccione grupos como en la imagen de abajo. Abra el Panel de Pathfinder y haga clic en Unite para unirlos en una forma. Seleccione esta nueva forma y agregue un bonito degradado de gris a blanco con la herramienta Degradado (G).
Da todos los gradientes de otras formas como se muestra en las siguientes imágenes. Una vez que haya terminado, haga doble clic en algún lugar en blanco en la mesa de trabajo para volver del modo de aislamiento.
Oculte la capa "Boca" en la que acaba de trabajar y seleccione el objeto Boca original (antes de hacer una copia), luego vaya a Objeto> Expandir apariencia. Ahora haga clic en la herramienta Unite desde el Panel de Pathfinder. Obtendrá una forma bastante simple con muchos puntos de anclaje. Para deshacerse de ellos, vaya a Objeto> Ruta> Simplificar, establezca la precisión de la curva en 100, el umbral de ángulo en 0 y haga clic en Aceptar.
Agreguemos un bonito color # FBB03B a esta forma y algo de sombra. Para configurar una sombra, vaya a Efectos> Estilizar> Sombra y aplique las siguientes configuraciones: Modo de multiplicación, 100% de opacidad, Desfase X a -2px, Desfase Y a 2px y Desenfoque 1px.
Una vez que haya terminado, cambie el nombre de esta capa a "Color de boca" y colóquela delante de la capa "Boca" (puede volver a verla). Abra la paleta de transparencia y configure el modo de fusión en Color Burn, y la opacidad en 72%.
Ahora vamos a crear el ojo, usando el mismo método que antes. Con la herramienta Pluma (P), haga una forma como en la imagen de abajo y cree una revolución 3D con las siguientes configuraciones: -73, -28, -6 para la posición. Deja todo lo demás como está..
Una vez más, vaya a Objeto> Expandir apariencia y duplique la capa. Seleccione la forma en la capa inferior "Ojo", use de nuevo la herramienta Unite en el panel de Pathfinder, y simplifique la ruta como en el Paso 47. Dale un bonito trazo marrón de 1px # 42210B, y Drop Shadow con la siguiente configuración: Multiplicar , 60%, -2px, 2px, 1px, color negro. Renombra el camino a "Sombra de ojos".
Seleccione el Grupo en la capa "Ojo" y use el mismo método que en los Pasos 44 y 45 para obtener algo como en las siguientes imágenes.
Con la Herramienta de selección directa (A), seleccione la elipse en el centro y vaya a Efecto> Estilizar> Resplandor interior. Aplique el modo de fusión normal con un color negro, 60% de opacidad y un desenfoque de 4px.
Para agregar el Iris de un ojo, cree una forma como se muestra a continuación. Dale las siguientes opciones de revolución 3D: -73, -28, -6.
Ahora separe todas las capas, y coloque la "Boca" y el "Ojo" en el lugar correcto. Duplique la capa "Cabeza" y colóquela en la parte frontal de la capa "Mobot". Como puede ver, la cabeza está mirando por encima del brazo izquierdo, así que vamos a crear una forma con la herramienta Pluma (P) como en la imagen, y haga una Máscara de recorte.
Con la herramienta Elipse (L), cree una elipse negra y vaya a Efectos> Desenfocar> Desenfoque gaussiano. Dale un radio de 3,0px y pulsa OK. Para ocultar la parte que está mirando sobre el brazo, haga un trazado de recorte como en el paso anterior. Voila, ha terminado mobot!
Ahora vamos a crear un logotipo de pizza para las cajas. Crea una nueva capa "Símbolo de pizza" y dibuja una elipse con la herramienta Elipse (L). Levante la herramienta de selección directa (A) y arrastre el anclaje derecho hacia la derecha para obtener algo similar a la imagen. Arrastre la forma a la paleta de pinceles. Seleccione Nuevo pincel de arte y haga clic en Aceptar. En las Opciones de pincel artístico, aplique el nombre "Pizza", deje todo lo demás como está y presione Aceptar. Has creado tu propio pincel.!
Levante la herramienta Pincel (B) y elija su pincel "Pizza" en la barra de menú. Dibuja las letras para deletrear "pizza". Selecciónalos todos y presiona Comando + G para agruparlos. Expanda la apariencia del grupo para evitar cambiar el tamaño del trazo al escalar. Únete a las formas con el botón Unite en el panel de Pathfinder.
Dibuja un rectángulo de 100 px de ancho por 100 px de alto y dale el color # C69C6D. Ve a Efecto> Estilizar> Resplandor interior y dale las siguientes configuraciones: Normal, 10 y 15px.
Ponga su Pizza Firma sobre el rectángulo y dale un bonito trazo blanco. Agrega algunos rectángulos y palabras para hacerlo más interesante. Para el techo y las fuentes, he usado un color rojo (# C1272D).
Dibuje un rectángulo del mismo tamaño que el que ha estado usando en el paso 59 y asígnele un color gris claro (# F2F2F2). Escala hasta el 200%. Vaya a Efecto> Textura> Texturizador. En la ventana de diálogo, cambie la Textura a Lienzo, la Escala a 120 y el Relieve a 30. Presione Aceptar.
Vaya a Objeto> Expandir apariencia para expandir la textura. En la barra de menú, haga clic en un triángulo junto al botón Seguimiento en vivo y elija Opciones de seguimiento. Aplique las siguientes configuraciones: Umbral 180, Desenfoque: 0,2px, Rellenos, Ajuste de ruta: 0,8px, Área mínima: 5px, Ángulo de esquina: 20, e Ignorar blanco. Pulsa Trace cuando hayas terminado de introducir los valores. En la barra de menú encuentra el botón Expandir, y haz clic en él..
Vuelve a escalar el rectángulo a su tamaño anterior. Esta vez tienes que usar el 50% en el cuadro de diálogo de transformación. Dale el color # 957552. Abra el Panel de transparencia, establezca el modo de fusión en Multiplicar y la opacidad en 7%. Seleccione todo y arrástrelo a la paleta de símbolos. Nombre el símbolo "Frente de pizza", seleccione el gráfico y haga clic en Aceptar. Use el mismo método para crear los símbolos "Pizza back" y "Pizza side".
Accentsconagua