Dibujar objetos 3D con Photoshop y Illustrator (mando de videojuegos)

¿Alguna vez ha querido utilizar esta herramienta en 3D en Photoshop para generar imágenes de calidad profesional, y no sólo para la experimentación? ¿Sabes que el 100% de imágenes vectoriales en 3D son fáciles de crear y hacer dentro de tu editor de imágenes? En este tutorial vamos a la orilla. Vamos a reducir al mínimo la parte de la rutina – todo el proceso requiere sólo cinco simples formas dibujadas a mano. Sombreado perfecto, texturas, luces y perspectiva – todo está hecho con Photoshop e Illustrator. Vamos a minimizar el tiempo – en este icono se puede representar en tan sólo una hora. Y vamos a maximizar la calidad.

1. Inicio de diseño

Vamos a empezar con un archivo de 800×700 píxeles en Photoshop en RGB, con un degradado de color gris para un fondo y un poco de ruido. También puede crear relleno adicional en blanco y negro.

2. Dibujar la forma de un mando

Usando una herramienta de la pluma, dibujar la mitad de su mando de videojuegos. Trate de usar los menos puntos de ancla posibles. Alinear las dos mitades que forman un perfecto mando. Usted debe superponerse las formas para evitar huecos entre ellas. Y no se olvide hacer una copia de seguridad de las capas de forma!

 

3. Expandir la forma

Necesitamos un poco de magia de Illustrator aquí. La combinación de estos dos mitades de una forma, copiar y pegar en un documento de Illustrator. Hacer el Objeto> Trazado> comando Offset Path (2 píxeles de desplazamiento).

 

4. Grupo de la forma

Copia de la ampliación de la nuevo path y otra vez de pegarlo en Photoshop (como una path). Grupo de la capa de forma. Utilice la forma original (no el expandido) como una máscara de grupo (Alt + arrastre la máscara con el grupo). Así que usted debe tener su capa de forma ampliada en el interior del grupo con la path original como una máscara.

 

5. cuerpo 3D del mando

Con la forma de la capa seleccionada, haga clic en 3D> Repujado máscara de capa>. Seleccione la textura en blanco por defecto para todos los materiales e inflar los lados de Forma preseleccionada. No te olvides de seleccionar la calidad de malla> mejor en la configuración de escena, y haga clic en Aceptar.

 

6. La forma en 3D sin problemas

Y he aquí por qué es necesario las máscaras. Como puede ver, hacen por defecto en 3D en Photoshop deja el render alisado, para que podamos usar la máscara vectorial para que sea agradable y sin problemas de nuevo. Para asegurarse de que puede utilizar el modo de alta calidad de render, pero es muy lento.

 

7. Material de color

Cambiar el material de la inflación frente a algo como esto: azul oscuro, color difuso, 100% brillo, el 65% Brillo y color cian para el ambiente. Puede comprobar los valores de color exacto en el archivo PSD adjunto, pero no tiene que ajustar el color de ahora, usted puede hacerlo más adelante.

 

8. Las luces de configuración

La siguiente cosa que determina el aspecto de nuestro modelo 3D es un rayo. Aquí está mi configuración de las luces. Parece un poco complicado, pero sólo hay que añadir una luz azul infinito del volumen principal: uno para la parte superior, una para el fondo, y un par de luces a los lados del gamepad. También he añadido un par de luces de punto en los laterales, para mostrar la mejor forma.

 

9. Luces

Esto es lo a lo que el modelo debe ser similar. Recuerde que podemos construir la base de nuestra escena actual, y se puede ajustar a su gusto y obtener cualquier resultado que usted desee.

 

10. Textura

Vamos a añadir un poco de textura de alta tecnología. En la ventana de Configuración de material, añadir la nueva textura para el canal de Bump. A continuación, haga doble clic en la recién aparecida textura Bump para abrirlo como un objeto inteligente.

 

11. Patrón

Cambiar el tamaño del documento a 512×512. Crear patrón de células simples como esta dentro del documento. Puede utilizar mi patrón de la División del Sector Privado adjunto, o crear su propio patrón. Usted sólo debe hacer que su patrón sea de trazos oscuros (pero no negro) que el fondo.

 

12. Mapa de relieve

Guarde y cierre el documento textura. Su mando debe actualizar y mostrar la textura aplicada. Se ve feo, pero la textura sigue la forma del gamepad, y refleja el rayo de verdad! Vamos a ajustar. Ajuste la cantidad de Bump a algo así como 0,1 y haga clic en el comando Editar propiedades.

 

13. Puesta a punto

Establecer la escala de U a 3 y la escala de V a 2. Por supuesto, puede cambiar estos números de acuerdo con su idea y la textura de su bache. De este modo, Photoshop, se agruparán a la textura por lo que es más pequeño. Nótese cómo una textura sutil puede hacer que el objeto parezca real y tangible.

 

14. Estilo de capa

Y ahora el toque final para el cuerpo mando. Agregue un poco de ruido con la superposición de patrones y una sombra interior de color azul claro a través de la capa de estilo. Si aún no tienes un montón de patrones de ruido en la biblioteca de patrones, le recomiendo que para crear algunos o tomar la mía. También agregue 2 píxeles de trazo negro para el mando.

 

15. Stick analógico

Usando una herramienta de la pluma, dibuja una forma vectorial simple como esto. Trate de alinear dos puntos a la izquierda en sentido horizontal (la misma coordenada X). Copia de seguridad de la capa de forma.

 

16. 3D

Una vez más, haga clic en 3D> Repujado> máscara de capa. Esta vez seleccione otro preset – que gira en la forma. Establecer el punto de anclaje a la izquierda-centro, ángulo X a 360, cualquier material en blanco para todas las superficies y la calidad de la malla> Best ó mejor.

 

17. Guardado de material

Tenemos que volver a usar nuestro material azul, así que seleccione la capa principal, y en la ventana de materiales, haga clic en el botón desplegable situado junto a la esfera material de vista previa, el pequeño botón en la parte derecha de la lista de materiales, entonces verá el comando de nuevo material. El nombre del material y guardarlo.

 

18. La aplicación del material

Si usted aún no ha guardado las luces, creado para el cuerpo principal, hazlo ahora (Ahorra Luces de comandos predefinidos en la lista de las luces en el menú desplegable).Seleccione su stick análogo de Jack capa 3D y aplicar el material de color azul (que ahora está en la lista de materiales de las esferas) en el material de extrusión. Apague el mapa de relieve.

 

19. 3D para objetos inteligentes

Como puedes ver, tenemos alias feas aquí. Vamos a golpearlos con un pequeño truco. En primer lugar, rotar el objeto en 3D que desee (como el 75 º de rotación de X). Si no te gusta el modelo, modificar la capa de forma y repetir los pasos. Y cuando estés satisfecho con el modelo, convertir la capa 3D de un objeto inteligente.

 

20. La aplicación de la luz

Vamos a continuar nuestro trabajo en el interior del objeto inteligente. Antes de quitar los bordes, tenemos que añadir las luces. En la paleta de luces 3D, haga clic en el comando de reemplazar las luces de Presets y seleccione el ajuste preestablecido guardado previamente. Ajustar si es necesario (brillo, color, ángulo) y eliminar las luces de punto si se ven mal. También he añadido una luz para mostrar la cara superior mejor.

 

 

21. Cambiar el tamaño de los objetos inteligentes

Aún dentro de la objetos inteligentes. Imagen> Recortar píxeles> transparente. Imagen> Tamaño de imagen y hacer que el documento 10 veces más grande. Si usted no puede ver la capa de 3D ​​después de que este es el combo: con la herramienta de rotación 3D seleccionada, haga clic en el icono de la casa. Entonces (si es que todavía no puede ver el modelo), seleccione la herramienta Mover (V), flecha izquierda, flecha de la derecha.

 

22. Anti-aliasing

Cerca al guardar el objeto inteligente. Verá la toma de enorme dentro del documento principal. Simplemente reducir su tamaño 10 veces y tiene 10 veces más anti-aliasing.Además, el modelo 3D dentro de las actualizaciones de objetos inteligentes muy rápido (a diferencia de la prestación de alta calidad en Photoshop).

 

23. Añadir un degradado

Yo uso este truco muy a menudo. Crear un nuevo 512×512 vacío (transparente). Haga doble clic en la capa (single). Añadir un radial de blanco a transparencia del degradado. No se olvide de apagar la capa de Transparencia.

 

24. Degradado como un objeto inteligente

Convertir esta capa de objetos inteligentes. Colóquelo en el documento principal. Haga una copia de la capa y moverlo a algún grupo oculto (para una copia de seguridad). Ahora usted tiene un degradado de blanco radial que usted puede fácilmente mover, redimensionar, deformar y distorsionar a su gusto. Añadir un par de destacados en los laterales de la toma.Claro que es un detalle pequeño, pero con este objeto inteligente ahora usted puede agregar fácilmente luces y sombras.

 

25. Toques finales

Abra la ventana de estilos de capa. Añadir un poco de ruido con la superposición de patrones. Añadir Superposición de colores en el modo de color o tono justo para adaptarse mejor a color de la carrocería gamepad. Y lo último, añadir el efecto de Desenfoque de superficie con un radio pequeño (1 ó 2) y el umbral de alrededor de 30-35. Esto sólo debería suavizar un poco la superficie para que se vea menos vector/3D.

 

26. Stick analógico

Una vez más, dibujar la forma como este y repetir los pasos que hizo para la toma: giran con la herramienta de repujado, gire un poco y convertir el modelo en 3D de un objeto inteligente.

 

27. La luz, el material y anit-aliasing

Continúe repitiendo los pasos. Vuelva a colocar la luz programados como lo hacía antes, asignar el material azul, retire todos los píxeles transparentes en todo y hacer que el tamaño de la imagen 10 veces más grande. Si estás contento con el relámpago y el material, cerrar y guardar el objeto inteligente. No te olvides de hacer 10 veces más pequeño en el documento principal.

 

28. Toques finales

Una vez más, añadir un poco de ruido, Superposición de colores, algunos Sombra interior de color azul claro como la luz va desde la parte inferior, y la sombra negro. No te olvides de añadir un poco de Desenfoque de superficie. Cuando estés satisfecho con el aspecto de la palanca de mando, duplicar todo el grupo, colocarlo en forma horizontal y coloque la barra simétrica.

 

29. Un botón de

Ahora, cambiar a Illustrator y dibujar una forma simple como esto. Recuerde: el uso de algunos puntos como sea posible, y en este caso de uso sólo Bézier (curvas) puntos. Haga clic en el Efecto> 3D> Girar comando.

 

30. 3D

Establecer un 360 º simples giran con dos fuentes de luz y 64 pasos de mezcla, como se muestra aquí. Si usted no ve todos estos ajustes, haga clic en el botón Más opciones. No te olvides de cambiar el ángulo de rotación a algo así como 60 º y haga clic en Aceptar. Puede comprobar la configuración de mi en el PSD se adjunta como de costumbre.

 

31. Detalles

Duplicar el objeto 3D en Illustrator y ajustarlo para mostrar el único destacado en la superficie de color negro, ajuste la mezcla a Color Dodge, y reducir su opacidad. Este truco puede hacer el ajuste en 3D mucho más fácil en Illustrator: usted puede controlar las fuentes de luz de forma independiente. También he añadido un círculo negro semi-transparente de abajo y de alto brillo de luz en la parte superior del botón.

 

32. Pulir el botón

Copie el botón y pégalo en tu PSD como un objeto inteligente. Ajustar el tamaño y posición, y añadir algunos estilos de capa: Sombra blanca (para mostrar el chaflán), superposición de patrón de ruido, color o gradiente de superposición.

 

33. Cuatro botones

Añadir una capa de texto con la letra A, ajustar su estilo de capa (transparencia, Sombra blanca, Sombra interior negro) para mostrar el bisel. Cuando estés satisfecho con el aspecto del botón, se duplican en tres ocasiones, cambiar de posición y las letras. Ahora usted puede fácilmente ajustar el objeto vectorial inteligente dentro de Illustrator y se actualizará todos los cuatro botones.

 

34. D-Pad botón

En el documento de Illustrator, dibujar una figura como esta, utilice el objeto de trazado>> comando Offset Ruta para añadir esquinas redondeadas. Vamos a repetir esta técnica para el botón d-pad. Pero esta vez estamos usando el efecto Extrusión y biselado en vez de Revolución. Ajustar las luces y el ángulo y copiar y pegar el botón en el interior del documento de Photoshop.

35. Pulir el botón

Como de costumbre, añadir sombra blanca, el ruido y la superposición de color. También puede añadir color azul claro Sombra interior va desde la parte inferior para mostrar mejor la profundidad de la extrusión. También añadir un poco de Desenfoque de superficie para que el botón parezca menos vector. Sigue siendo vector en el camino.

 

36. Los cuatro botones

No podemos duplicar el objeto inteligente para hacer cuatro botones. Haga clic derecho en la capa y seleccione el nuevo objeto inteligente a través de comandos de copia. Haga doble clic en él para abrir la ventana de Illustrator y girar las formas en sí por lo que la extrusión de baja como debería. Repita una vez más y establecer todos los botones en su lugar.

 

37. Material brillante

Vamos a añadir algunas líneas brillantes. Duplicar el objeto en 3D del cuerpo principal y cambie su material a algo de color azul claro, sin ningún tipo de texturas. Utilizando diferentes modos de formas dentro de la máscara de capa vectorial crear la forma como este, la línea que brilla intensamente.

 

38. Las partes más brillantes

Repita los pasos para añadir una línea más, tal vez algún logotipo u otros indicadores para hacer que el icono se vea más interesante. No se olvide de algunos estilos de capa de lujo como Resplandor interior y Resplandor exterior.

 

39. Partes, sin la textura bump

Duplicar el cuerpo principal de nuevo, apague la textura golpe para esta capa y dibujar algunas formas dentro de la máscara de la capa (no se olvide de utilizar los modos adecuados). Esto le mostrará la capa sin la textura bump sólo alrededor de los controles, de esta manera hacerlas más conectada con el cuerpo.

 

40. Sombra y luz

Una vez más, duplicar el cuerpo principal, lo convierten en el objeto inteligente, el cambio Llenar la capa a 0%, añadir un poco de gradiente de negro a su estilo de capa y reducirla así a tomar forma de la sombra. Ahora sólo tiene que añadir algunos efectos de desenfoque a la capa para que la sombra perfecta. Use un par de objetos blancos degradado radial inteligente con superposición de colores para añadir un poco de brillante. También he añadido un trazo negro de lo simple a lo gamepad.

 

41. Ajuste final

No olvides que ahora nuestro icono es totalmente personalizable, puedes sintonizar todos los modos para obtener el resultado perfecto. Por lo general, añado algunos Vibrance, niveles y capas de Curvas. Colores melodía, la textura, efectos, formas – todo lo que quieras. Aquí está mi resultado: