Share
Hola artistas de Photoshop, mi nombre es Sergio Ordóñez, el autoproclamado genio detrás de SOSFactory, pionero en Diseño corporativo de la mascota para la web.. También puedes encontrarme en mi blog SOSNewbie o en Deviantart en sergitosuanez.
Puede encontrar el archivo PSD de Photoshop en un directorio etiquetado como "PSD" incluido en el archivo ZIP que descargó. También hemos incluido el borrador original de este tutorial para sus lectores en español. Es posible que desee examinarlos brevemente antes de comenzar. Una vista previa de la imagen final está abajo. Puedes ver la versión más grande aquí también.
Cuando comencé a diseñar mascotas, como todo buen novato, solía comenzar mis diseños sin tener idea de lo que realmente quería decir. En ese período aprendí que la planificación es la diferencia entre un diseñador profesional y otro que no lo es. Por esta razón y porque me pagan por palabra, voy a exprimir sus mentes con un poco de teoría!
La personalidad es la clave para una mascota bien diseñada. Todos los elementos de diseño (expresión facial, expresión corporal, símbolos, vestimenta, etc.) deben fomentar la actitud del personaje, que dependerá de los valores corporativos de nuestro cliente. Veamos algunos ejemplos a continuación..
Queremos transmitir la actitud que deseamos en una sola pose memorable, limpia, fácil de recordar y fácil de reconocer. Para eso, tenemos que vigilar la línea de acción y la silueta..
Un error muy común cuando diseñamos para un sitio web es posar a la mascota sin considerar el área en la que se usará. Para asegurarse de que el personaje se vea lo más grande posible, tenemos que adaptar la pose al área, vea los ejemplos abajo.
La línea de acción define la intención de movimiento del personaje, la dirección a la que se dirigen sus energías. Puedes ver algunos ejemplos a continuación..
El maestro de la animacion Raúl garcia Lo explica todo perfectamente en este ejemplo, es un ejercicio en el que buscamos al personaje que mejor define la historia: "Llenando una taza de té".
El primer intento es vago y no define la acción de manera concisa. No hay una línea de acción que describa el movimiento de “verter el té en la taza” o cualquier tensión que pueda sugerir peso o equilibrio. La silueta de este dibujo es amorfa y sin ningún interés..
Buscando esa silueta clara, trata de separar el brazo que sostiene la tetera del cuerpo..
La taza y la tetera ahora están claramente separadas del cuerpo, pero la silueta aún no es precisa.
La silueta de los brazos es mucho más clara. La tetera se inclina hacia abajo para mostrar la acción de “verter té”.
La postura del brazo, que sostiene la copa, se ha modificado para que se vea más natural. El cuello del personaje ha sido enfatizado para obtener una mejor silueta general..
La silueta se vuelve más efectiva al agregar un plato debajo de la taza e incluir una mejor postura para la mano.
Doblando el brazo que sostiene la tetera y estirando su dedo obtenemos una silueta más interesante.
Inclinando su cabeza obtenemos una silueta más efectiva, creamos un espacio negativo que dirige la atención del observador hacia el pico de la tetera..
Tenga en cuenta que la silueta número 4 es totalmente descriptiva, no necesitamos nada más para comprender la acción. Cuando diseñamos mascotas corporativas, generalmente no podemos obtener una silueta tan perfecta. Aun así, es el ideal..
En este caso, PSDTUTS me dio total libertad creativa, así que dejaré que mi instinto me guíe y omitiremos la información..
Después de conocer al cliente, lo mejor que podemos hacer es buscar referencias, ya que las ideas originales pueden no venir a su mente al principio. La búsqueda de referencias puede ayudarnos a descartar las ideas obvias y considerar algunas alternativas..
Ahora consideraciones para llegar a nuevas ideas:
Ejemplo:
ADVERTENCIA 1: Se permite inspirarse, plagiar no es.
ADVERTENCIA 2: Algunos artistas y sitios web ofrecen recursos gratuitos. Debería mostrar aprecio por esto al indicar dónde obtuvo la obra de arte y considerar donar al menos un dólar estadounidense..
Pen tablet o mouse? Si aún no tienes una Pen Tablet, te recomiendo que compres una Wacom, hay algunas muy asequibles, pero te recomiendo que vayas con una Wacom. Si no tiene uno, puede dibujar el boceto con lápiz y papel tradicional, luego use el mouse y las herramientas de dibujo digital de Photoshop para entintarlo, aunque el proceso le llevará mucho más tiempo. En el caso de la coloración es muy recomendable utilizar la tableta. Vea el video a continuación con respecto a este proceso.
Cuando compré mi querido Wacom Cintiq 21UX (el monitor de la derecha), cambié mi método. Ahora hago todo el proceso digitalmente, desde el primer boceto hasta los detalles finales. Dibujé las líneas a mano porque me resulta más fácil y rápido que usar las herramientas de dibujo vectorial.
Photoshop o Illustrator? Es su propia elección, personalmente encuentro las herramientas de dibujo vectorial de Illustrator enloquecedoras. Prefiero usar Photoshop, dibujar las líneas a mano y solo uso las herramientas de dibujo para las líneas difíciles. Trabajo en alta resolución, por lo que la vectorización posterior es bastante fácil. Para eso uso un plugin de Ilustración llamado Silhouette..
Es muy importante trabajar en alta resolución, uso un lienzo de tamaño A3 a 300 píxeles por pulgada. El proceso de trabajo es el mismo en este tamaño y hay muchas ventajas:
Aquí puede ver algunas leyendas del personaje en los diferentes pasos, desde el boceto hasta la línea final. Desafortunadamente, no hay trucos, solo práctica y más práctica:
Observe que el grosor de línea (grosor de línea) es variable, esta es una de las partes más laboriosas. La regla general es: líneas gruesas para los contornos, líneas más delgadas para las partes interiores.
De esta manera el observador puede distinguir las formas mucho mejor. Esto es especialmente útil para ilustraciones complejas en las que podemos jugar con grosor de línea para crear profundidad en la ilustración..
Cuando hayamos terminado nuestro dibujo y en una sola capa, podemos extraer las líneas del fondo, o poner la capa en modo de multiplicación y agregar el color en las nuevas capas debajo de ella. Prefiero extraerlos para poder colorearlos fácilmente más tarde..
Note que voy a pintar el patín y el personaje por separado, así que cuando terminemos tendremos dos versiones: con y sin el patín.
Para extraer las líneas haz lo siguiente:
Si eres un poco perezoso, puedes descargar esta acción de Photoshop para extraer las líneas de tus dibujos. De esta forma no tendrás que hacerlo manualmente..
Ya he escrito varios tutoriales sobre cómo colorear en Photoshop. No quiero aburrirte, así que intentaré algo diferente:
Estos son los tres colores que he elegido para pintar el personaje. Como ya dije, colorearemos el personaje con los comandos de Photoshop más tarde, por lo que la elección de los colores no es muy importante. Solo recuerde que necesita un color oscuro para las sombras, medio para la luz general y brillante para los contornos y luces más intensas.
El Pincel de historia es una herramienta potente que uso con mucha frecuencia, ya que podemos bloquear Partes de nuestro diseño que ya están terminadas y continúan trabajando en el resto sin estropearlas. Te daré un ejemplo básico, que se muestra a continuación.
Con un poco más de práctica, serás consciente de las posibilidades ilimitadas de esta herramienta. Como puede ver en el ejemplo, podemos usarlo como borrador (sin tener miedo de borrar las partes terminadas); Podemos hacer lo mismo para pintar en lugar de borrar; Si tomamos varias instantáneas del mismo diseño, podemos obtener versiones intermedias; podemos reducir la opacidad del pincel y fusionar varias versiones del mismo diseño; Incluso podemos jugar con las tonalidades ... No tengas miedo de experimentar..
ADVERTENCIA: El pincel de historial funciona por capas, la capa que queremos modificar debe existir en ambos puntos del historial. Si fusionamos o eliminamos la capa en cuestión, el pincel de historial no funcionará.
Puede visitar este video tutorial sobre cómo colorear con Photoshop para ver el pincel Historial en acción.
Debajo de la capa lineal, creamos una nueva capa y la denominamos "Colores planos", y luego rellenamos el dibujo con colores que deben ser lo suficientemente diferentes entre sí para que las selecciones posteriores sean más fáciles. Puede hacerlo con las herramientas que desee, preste atención para no dejar huecos..
Solo usaremos esta capa para hacer selecciones, por ejemplo: si queremos pintar el cabello de nuestro personaje, seleccionamos la herramienta Varita mágica y hacemos clic en el cabello. De esta forma obtenemos una selección rápida y precisa..
Inhabilitamos la capa "Colores planos" y la colocamos donde no nos molesta. Podemos obtener una selección del esquema completo del personaje haciendo clic con el botón Comando en este icono de capa.
Luego creamos una nueva capa, la llamamos "Base de color" y la rellenamos con un color plano. En este caso, elegí el color # e37750, ya que es un color cómodo y neutral para mí.
Creamos una nueva capa sobre la "Base de color" y la llamamos "Sombras". En esta capa, pintaremos las sombras con el mismo color base, pero pondremos la capa en modo Multiplicar temporalmente.
He elegido una fuente de luz que viene de arriba a la izquierda. Saber cómo ser coherente con el volumen del punto de iluminación es la parte más difícil, y no hay otro truco que practicar ... puedes usar un juguete articulado en una habitación oscura con un punto de iluminación fuerte y usarlo como referencia.
Tenga en cuenta que las sombras no tienen que ocupar todo el dibujo, debemos dejar espacio para la iluminación. Uso algunos títulos para que puedas ver la forma en que pinto las sombras..
Cuando ya hemos pintado las sombras, creamos una nueva capa debajo, y la llamamos "Luz suave".
Usamos la herramienta Degradado para crear una iluminación suave que será la base para la iluminación posterior.
Aquí puedes ver la configuración que uso para hacer los gradientes:
Creamos una nueva capa justo debajo de las "líneas" y la llamamos "Luz dura". El proceso es básicamente el mismo que el que usamos para las sombras, pero invertido. En lugar de pintar las zonas profundas, pintamos las proyectantes. Yo uso un color #ffeeae.
Creo una nueva capa debajo de las sombras y la llamo "Reflexiones". Me gusta enfatizar los volúmenes agregando reflexiones a los esquemas, los esquemas y los volúmenes son mucho más claros de esta manera. Recuerda que borramos los contornos en el Paso de las Sombras, ahora solo tenemos que colocar una capa debajo de las sombras y pintar con cuidado..
¡Aquí viene la parte divertida! Ya hemos terminado la iluminación, todos los volúmenes están definidos y tenemos los diferentes niveles de luz (sombras, tonos medios y tonos brillantes) por separado. Ahora, jugando con Command + U en Photoshop, colorearemos el personaje rápidamente.
Tenga en cuenta que los colores que he elegido son todos del mismo rango, pero ligeramente diferentes, por lo que obtenemos un rango cromático más amplio. Podemos ir más allá y usar varios colores, incluso en la misma capa. Aquí exageré un poco, así podéis ver las posibilidades:
A continuación puedes ver cómo coloré cada parte del personaje. Prueba tus propias combinaciones de colores hasta obtener el que más te guste..
Ya hemos terminado la base de colores, ahora vamos a jugar con capas en diferentes modos de fusión (Paleta de capas, el menú arriba a la izquierda) para dar más profundidad al color. Todas las capas deben estar por encima de la capa "Lineart".
Cuando terminemos podemos fusionar todas las capas (hacer una copia de seguridad antes de eso), y agregar más efectos. Podemos usar la herramienta Esquivar para aclarar algunas zonas o la herramienta Grabar para oscurecerlas. Podemos jugar con el balance de color (Comando + B) o con todos los niveles (Comando + L). Con un poco de imaginación puedes obtener resultados sobresalientes..
Como dije al principio, pintaré el patín por separado, así tendremos dos versiones. Utilicé la misma técnica que hice con el personaje. El diseño final del personaje está abajo..
Y finalmente terminamos. Se ve bien, ¿no crees??
Como buenos profesionales somos, debemos prestar atención a la presentación. Con un par de logotipos, algunas imágenes tomadas de nuestros amigos en Gomedia y un poco de imaginación, podemos hacer una presentación como la que se muestra a continuación. Puedes agarrar la versión de fondo de pantalla aquí.
¡Mira! Fue una buena idea hacer el skate por separado, ahora tenemos 2 versiones diferentes con prácticamente el mismo esfuerzo. Puedes agarrar la versión de fondo de pantalla aquí.
Esta es la versión limitada en color, pero también podemos jugar solo con las líneas (afortunadamente las hice bastante gruesas). Puedes agarrar la versión en tamaño de fondo de pantalla aquí.
No tengas miedo, no voy a explicar cómo hacer estos fondos de pantalla. Ya hemos cubierto bastante terreno para este tutorial, puedo irme feliz ahora!
Bueno, amigos míos, solo queda una cosa por hacer. Quiero hacer una solicitud ... a esas "grandes" empresas editoriales, que obtienen su material gracias a la explotación, que llenan sus bolsillos con dinero sin compartir un centavo (nos dejan artistas de la FAMA); deben seguir el modelo de PSDTUTS, siempre tan generoso y atento tanto con el artista como con el lector, demostrando que la rentabilidad de un negocio no depende de los materiales de origen de bajo costo, sino de su calidad y de la inventiva cuando se trata. Para venderlo.
Gracias a Eden por crear un recurso tan grande como PSDTUTS, especialmente a Sean por su flexibilidad. Gracias a mi amiga Anita, por ayudarme desinteresadamente y por traducir este artículo (también hemos incluido la versión original en español en la descarga). Y finalmente, gracias a los lectores de PSDTUTS, espero que hayan leído hasta el final, que hayan aprendido muchas cosas nuevas, o al menos que hayan disfrutado este tutorial..
Por supuesto, si tiene alguna pregunta le responderé con mucho gusto. Siéntase libre de comentar sobre la publicación de noticias relacionadas en el sitio. Saludos
Accentsconagua