Este es un tutorial para usuarios principiantes de Photoshop así que explicaremos todo muy bien detallado, aprenderemos a usar las herramientas de dibujo vectorial de Photoshop usando nuestro ratón… por ahora no necesitamos tabla digitalizadora.
Para empezar lo mejor es tener un buen boceto sobre papel, el tamaño del dibujo no tiene que ser muy grande ya que al final lo eliminaremos, pero tampoco tan pequeño que no se distingan bien los trazos. Lo escaneamos a unos 150-300 puntos por pulgadas (ppp en adelante) para asegurar que cuando hagamos zoom se vean las lineas suficientemente claras y podamos trabajar con precisión.

Empezamos abriendo un lienzo en blanco (Ctrl+n), me seguro un buen tamaño y una buena resolución por si luego quisiera imprimir a gran tamaño.
Para añadir nuevas capas simplemente haz click en el boton Crear capa.
Ponemos el boceto en una capa (para hacer esto abre el archivo donde tienes tu dibujo, selecciona todo con Ctrl+a y corta la selección con Ctrl+x, después pegalo en tu lienzo con Ctrl+v, si se te queda pequeño transformalo con Ctrl+t) y la nombramos como “boceto”, encima creamos una capa donde pondremos el trazado de la figura y la nombramos “lineas”. Asi que tendríamos las 3 capas como aparece en la imagen.
Pues bien, usaremos la herramienta Pluma
para redibujar el boceto, selecionala y activa el Modo de Contorno (esquina superior izquierda, el icono de la pluma dentro del recuadro):

Ahora hacemos click en 3 puntos, y se crearan 3 pequeños cuadrados como estos:

si pulsas de nuevo la herramienta Pluma y mantienes el ratón durante unos segundos te aparecera un menu como este:

elige Convertir punto de ancla, pulsa en cualquiera de los 3 cuadrados que creamos hace un momento y arrastra, saldran unas manecillas que sirven para torcer la linea y formar lo que se llaman curvas Berzier. Le vamos dando la forma deseada (siempre podemos añadir o quitar estos cuadraditos con Añadir punto de ancla o Eliminar punto de ancla según queramos formas mas o menos complejas). Tienes que conseguir algo como esto:


Existe un pequeño truco para conseguir formas redondeadas. Consiste en hacer los vertices y añadir un punto intermedio, luego sólo tienes que moverlo con la herramienta de selección directa y la curva se hara sola.
Asegurate que estás en la capa de trazados, coge el Pincel
y elige un pincel duro (haz click derecho dentro del lienzo, son los primeros en la lista de pinceles) de unos 5 pixel con un color q se distinga bien del boceto, por ejemplo rojo.

Teniendo la herramienta Pluma seleccionada damos al botón derecho del ratón dentro del lienzo y elegimos Contornear Trazado, con lo q nos saldrá una ventana:

escogemos la herramienta Pincel y le damos a OK, lo q nos generara un trazo de las características del pincel que escogimos anteriormente que sigue la ruta que anteriormente (se puede utilizar con todas las demás herramientas).

Si marcas la casilla Simular presion obtenemos trazos que se afinan por las puntas, con un poco de imaginación puedes conseguir todo tipo de trazos.

ENHORABUENA!! Ya tienes tu primer trazo, ahora el resto
El truco está en hacer los trazos por partes, en diferentes capas para poder retocar comodamente trazos que se superponen… como en esta imagen:


Lo ideal es ir haciendo trazos de areas completas (por ejemplo trazamos las gafas en una capa y luego añadimos los pelos en otra, después borramos los trazos de gafas que están cubiertos por el pelo), es mejor hacerlo asi q empezar a trazar por la ceja y con el mismo pasar al pelo.

Ahora toca trabajar haciendo el resto del trazado. Cuando ya tengas todos los trazos tenemos que aplanar todas las capas en una sola, esto lo hacemos seleccionando todas las capas y pulsando Ctrl+e. Ni q decir q al principio cuesta un poco manejar las curvas pero con algo de práctica el boceto puede ser casi identico al original.

Y ya hemos terminado nuestro entintado digital. Seguramente ya habrás notado que la linea es un poco aburrida al no estar modulada… paciencia, eso lo veremos más adelante










26 Abril 2007 at 9:44
exceelente sigue asi!! muy facil de entender excelente
17 Mayo 2007 at 2:55
when is the closing date..u mean the winner will get new mascot for their own .sound interesting.
2 Junio 2007 at 14:53
this is pretty damm hard to use
11 Julio 2007 at 9:00
HOLA TENGO UN PROBLEMA …
HE HECHO TODO LO QUE DICE TU TUTORIAL PERO HAY UNA PARTE QUE NO ME SALE , QUE ES :
——————————————–
Si marcas la casilla Simular presion obtenemos trazos que se afinan por las puntas, con un poco de imaginación puedes conseguir todo tipo de trazos.
(FOTO)(CUANDO HAGO ESA PARTE, NO SE QUITA EL TRAZADO DE LA PLUMA , SE QUEDAN LAS DOS . LA PLUMA Y EL CORTONO ROJO) SABES COMO QUITARLA??!!!
ENHORABUENA!! Ya tienes tu primer trazo, ahora el resto El truco está en hacer los trazos por partes, en diferentes capas para poder retocar comodamente trazos que se superponen”¦ como en esta imagen:
11 Julio 2007 at 9:12
Simplemente selecciona el cotorno y borralo dandole a la tecla de borrar o suprimir.
23 Julio 2007 at 8:47
GRACIAS
24 Julio 2007 at 8:22
EX-CE-LEN-TE,en una palabra.Maestro.
23 Agosto 2007 at 2:21
muchas gracias por tu ayuda, son excelentes maestros . . . sigue asi
8 Septiembre 2007 at 18:34
¿con qe hacen esos dibujos
9 Septiembre 2007 at 14:34
Que programas existen para realizar ese tipo de dibujos ??? y ¿ hay manuales para ello?
9 Septiembre 2007 at 18:10
Pues estos diseños se hacen con Photoshop, en la sección de diseños de mascotas o Photoshop teneis algunos tutoriales.
Aunque podeis hacerlo con cualquier programa de edición gráfica decente ya sea vectorial o no (Illustrator, Freehand, Corel Draw…)
Saludos.
25 Septiembre 2007 at 1:55
hola, me encanta tu pagina, pero eeste comentario es solo para marcarte un error.
cuando hablas de dibujo en photoshop, no puedes hablar de dibujo vectorial, ya q programas como PS son bitmaps.
me imagino q con tu experiencia ya lo debes saber, pero creo q puede servir mi comentario.
saludos desde argentina.
25 Septiembre 2007 at 6:39
Hola Martin, me parece que te equivocas, Photoshop tiene opciones de dibujo vectorial, dependiendo de que opción marques en esta paleta: http://www.sosnewbie.com/imagenes/tutorial_dibujo_photoshop/pluma2.gif
Incluso si conviertes las curvas berzier a mapas de bits (como yo hago), se puede decir que dibujamos de forma vectorial.
27 Septiembre 2007 at 14:50
me encanta que los argentinos nos equivoquemos!!!
hay que preguntar no afirmar martín!
1 Octubre 2007 at 11:01
Hola sergio,
Mis felicitaciones por tu web y tus excelentes tutoriales. Me gusta tu estilo de ilustración y estoy aprendiendo mucho de ti.
En cuanto he visto tus tutoriales no he dudado en ponerlo en mi weblog de tutoriales (http://tutoblog.espinlog.com/). en serio me parecen geniales ya que las explicaciones son muy claras y verdaderamente útiles.
Finalmente también tengo que decirte que creo que me estoy pasando de pelota XDDD pero es que me gustan mucho.
Un saludo.
2 Octubre 2007 at 12:45
Hola quisiera preguntarte, tu te dedicas solamente al diseño, me gustaria poder vivir del dibujo no soy una experta pero ahi voy, quiero saber si cuando ya me la juegue mejor con el photoshop y el dibujo digital, como puedo vivir de ello?, Gracias de antemano
2 Octubre 2007 at 16:04
Hola Adriana, sí, me dedico sólo al diseño, bueno y a escribir este blog, aunque eso es un hobby.
Un buen dibujante entre diseñadores es un privilegiado, entre dibujantes de cómics es uno más, por eso te aconsejo que sigas con el dibujo, pero no te limites sólo a eso, aprende a usar programas de diseño y saldrás ganando.
¿Cómo puedes vivir de ello? Pues me temo que esa pregunta es imposible de responder, no hay fórmulas mágicas… sólo práctica, inteligencia y mucha pasión, el resto debería llegar solo.
Saludos.
Sergio
3 Octubre 2007 at 14:12
bien, bien , vaya que aprendí mucho, gracias por el tutorial, pero sería ley poder pintarlo y hacer que los trazos sean más notorios, por lo demás está muy bueno el tutorial, gracias repito
3 Octubre 2007 at 17:07
Hola Ismael, visita la sección de videotutoriales, ahí podrás ver otros donde dibujo con linea modulada. Este es sólo un tutorial básico.
Saludos
7 Octubre 2007 at 17:05
Muy bueno el tutorial, pero, que version del photoshop usas?
7 Octubre 2007 at 17:44
Pues la verdad que no importa mucho, las herramientas de dibujo vectorial son las mismas desde la versión 6 al menos.
8 Octubre 2007 at 18:14
Muy, muy buen tutorial. Andaba buscando uno bien explicado y me encontre con este, asi que voy a probar con mis bocetos a ver que tal.
16 Octubre 2007 at 1:37
una pregunta por que sera que en el paso de darle clik derecho y seleccionar contornear esa opcion no me sale tengo ps cs8 no entiendo, sera que algo estoy haciendo mal? pero estoy siguiendo al pie de la letra, al dar clik derecho solo me despliega la barra de tipos de pincel…
gracias
18 Octubre 2007 at 14:32
T__T gracias… hacia mucho tiempo que queria un toturial asi de bueno…
6 Noviembre 2007 at 20:04
Buen tutorial.
Solo tengo una duda, pero me ha dejado parado. No se si me pordrían explicar a detalle como conseguir el trazo que en la imagen dice “Using the rubber”. Lo que pasa es que, por ejemplo, cuando hago una curva cerrada puntiaguda (como una gota), la punta no se ve “desvanecida” si no se ve redondeada como la unión común de dos líneas. Cuando le aplico “simular presion” como que la difumina y solo se ve la mitad de ella. ¿Podrían ayudarme? Pongo un ejemplo: http://www.natancastillo.com/imagenes/puntas.jpg
Gracias.
7 Noviembre 2007 at 8:41
Hola Ivonne, para que te salga la opción contornear tienes que tener seleccionada la herramienta pluma, seguramente es que le das con la herramienta pincel seleccionada.
7 Noviembre 2007 at 8:47
Hola Levi, con este método estamos un poco limitados, ese tipo de trazo lo puedes conseguir de dos maneras:
1º.- Siguiendo este tutorial. Haces un trazo normal, después con el borrador simplemente afilas la lineas.
2º.- La segunda opción es dibujar la linea propiamente, con trazos, y rellenar en vez de contornear. Este método es un poco más avanzado pero es mucho más flexible. Aquí puedes ver un ejemplo: http://www.sosnewbie.com/es/diseno-mascotas/dibujo-digital-con-photoshop-videotutorial/
Espero haberte ayudado:)
8 Noviembre 2007 at 20:14
Sergio:
Muchísimas gracias. Si me es de ayuda, aunque ya lo había visto, pero aún así te agradezco.
De hecho hago lo primero que me dices ya que las líneas que trazo son delgadas, invertiría mucho mas tiempo con el segundo método, pero en líneas gruesas es ideal.
Un saludo y gracias de nuevo
.
2 Diciembre 2007 at 12:40
Excelente, justo lo que un aprendiz busca !!, con este tipo de tutoriales seguro que la frase “el alumno supera al maestro” se cumple a cabalidad. Un fuerte abrazo.
2 Diciembre 2007 at 21:43
Muchas gracias por el cumplido, espero que no se cumpla
31 Diciembre 2007 at 11:16
Hola, kisiera saber como hacen q los dibujos se planten en la computadora, en las web, como lo hacen? a mano con lapiz o con algun programa software?… o lo dibujan y luego lo scanean? kisiera saber xq soy aficionado al dibujo… es mi hobby =)… si tienen nombres de programas porfa pasemenlas a mi correo: antonio_5_52@hotmail.com
Gracias,
Saludos a todod…
1 Enero 2008 at 11:34
Hola Manuel, en este mismo blog hay tutoriales sobre lo que preguntas, por ejemplo:
http://www.sosnewbie.com/es/diseno-mascotas/ilustracion-vectorial-illustrator/
Una aclaracion, todas las dudas que tengas escribelas aqui, puede que sea ultil al resto de usuarios.
Saludos.
10 Enero 2008 at 15:05
Sergio, muy buen tutorial y muy bien explicado.
Felicitaciones por la metodología que utilizas. Me sirvio mucho en mi trabajoya que también soy Diseñador y Profesor.0_0
14 Enero 2008 at 15:46
hola he echo mi boceto en rojo pero lo quiero poner en negro , como se pone???
14 Enero 2008 at 15:48
Hola Fany, dale a CTRL+U te saldrán 3 barritas, dale a la de abajo del todo hacia la izq. Eso es todo.
Saludos.
16 Marzo 2008 at 9:25
Muy bueno, el inicio ya sabia pero el contorno de rojo no, gracias por el dato sigue asi tus explicaciones son muy interesantes.
20 Mayo 2008 at 12:34
hey Sergio navegando por Facebook encontre un quiz de photoshop…. y mira la imagen que encontre!
http://img360.imageshack.us/img360/6678/capturapk2.jpg
se te hace familiar? jejeje… por hay tambien vi unos cuantos personajes de SOS Factory regados por MySpace….
saludos!
20 Mayo 2008 at 23:41
Buenas Morcio, por desgracia hay mucho amigo de lo ajeno…
7 Agosto 2008 at 16:56
hola !! quisiera saber si se pueden obtener los mismos resultados al dibujar con Flash en lugar de usar illustrator,ya que me resulta mas facil el vectorizar con el flash ,bueno gracias por la respuesta
8 Agosto 2008 at 10:57
Hola Enzo, todo es posible, la cuestión es si es práctico.
He visto artistas que hacen retratos realistas con Flash, aunque en mi opinión Illustrator es una mejor opción, en teoría Flash es para animar, e Illustrator para ilustración.
16 Octubre 2008 at 13:06
muchas gracias por el tutorial me siento como k deverdad estoy aprendiendo algo pero en el tutorial hay algo k dices y por mas k busque no encontre una opcion k me dijera como cambiar los tipos de linea cuando usas contornear trazado y simular precion asi como marcas standar path simulating path one ending point sharp y using the rubber me podrias decir como cambio los tipos de precion??
creo k es lo unico k me falta para casi masterisar estos pasos k nos has dado
gracias!!!!!!!!!!
21 Octubre 2008 at 14:55
DISCULPA TOAS LAS MOLESTIAS SERGIO PERO ME PODRIAS DECIR COMO CONSEGUIMOS EL TIPO DE TRASO ONE ENDING POINT SHARP POR FAVOR
26 Octubre 2008 at 4:27
Hola Gee, sería un trazo con presión (nº 2) pero nos quedamos con sólo la mitad del trazo, el resto lo borramos.
Saludos.
PS: no escribas en mayúsculas, es como si estuvieras gritando.
22 Enero 2009 at 15:12
Ante todo felicidades por todo, tus tutoriales, tus diseños, tus trabajos. Y gracias por la ayuda que nos brindas. He ido haciendo algun tutorial y estoy bastante contento con el resultado, pero necesito ayuda, me gustaria saber como puedo rellenar un trazado y darle un efecto parecido al pelo animal el personaje es un tigre. Pido sin saber si es muy complicado, disculpa mi ignorancia. Gracias de antemano.
22 Enero 2009 at 23:02
Hola Manu, muchas gracias
Tendrías que pintarlo, aquí te dejo algunos tutoriales
Pelo realista:
http://sirasan.deviantart.com/art/Photoshop-Painting-Hair-32663745
Estos dos más estilo cartoon:
http://ctjemm.deviantart.com/art/Hair-CG-Series-ELECTRIC-RED-102762217
http://binkari.deviantart.com/art/Hair-Tutorial-1091804
Saludos.
8 Marzo 2009 at 11:56
Realmente magnifico, muy util y absolutamente recomendado, muchisimas gracias, llevába tiempo buscando un tutorial asi, y me ha sido de gran ayuda.
31 Marzo 2009 at 21:05
¿Alguna vez has trabajado con el GIMP? no sé q tanto se puede hacer con ese programa pero a mí no me convence; en una entrevista d trabajo me preguntaron si lo sé usar además de la plataforma Ubuntu, aunque en lo personal me da igual el resultado es lo q importa, no?
12 Abril 2009 at 23:31
Hola, ¿crees que a esta página le vendría bien una mascota (y a parte un rediseño, jeje) http://www.travelwithmea.org/ o existe algún criterio o tipos de página que no deben llevar mascotas?. Saludos.
7 Mayo 2009 at 2:23
If you learn to draw correctly, using pen, brush and ink, you would not need to use this digital ‘art’ crap. This is simply using a tool to cheat your self and anyone that doesnt know the shortcuts you take during this kind of ‘drawing’ process. There is no talent to using this, you are simply cheating all the artists before you that learned to draw correctly and with some skill. This is why the market is flooded with crap and puerile obnoxious junk. Digital ‘art’ is a sham and you should feel ashamed to cheat this way. Hacks and losers.
7 Mayo 2009 at 19:29
Hello Fred, thanks a lot for your criticism, its welcome.
Though I think you are wrong, no matter the medium you use, how expensive are your tools or what software you use… your brain and your hands is what make the difference.
Its like blaming people for drawing with open eyes when you do it with your eyes closed… if you do it kudos for you (though I would open the eyes and take advantage of it, so I would improve faster) but this is not art, this is industry, what matters is just the outcome, the productivity and versatility.
I dont consider myself an artist, neither talented, I just do what I enjoy and hopefully people pay me (and very well) to do it, if you enjoy the traditional mediums go for it, actually I have been drawing and painting with traditional mediums my whole life. The PC is a tool to increase productivity and why not, to enjoy with no physical or temporal restrictions… if you never tried I suggest you look for beginner tutorials, Im sure you wont be ashamed.
Cheers.
Sergio
6 Junio 2009 at 1:23
Hola que tal mi nombre es Ricardo Martínez y estudio diseño grafico, en este momento estoy realizando un proyecto de una mascota escolar para los eventos deportivos de una preparatoria. Seria de gran ayuda si podría tomarlo como asesor y como referencia hacia mi proyecto. La verdad muchas felicidades con las mascotas, tienes un estilo único y son muy llamativos, muchas felicidades.
3 Julio 2009 at 21:14
eres muy bueno pero sigo con mi necedad jajaja que deberias de hacer otra pagina o en esta pero otra seccion que enseñes a dibujar cartoon porque deberas lo haces bien yo apenas estoy iniciando en ello mira mi blog http://dibujacaricatura.blogspot.com
que te parece, que me falta y un dia de estos me gustaria que vectorizaras un dibujo mio para ver como queda espero que me respondas
16 Julio 2009 at 14:42
Me gustan mucho estos diseños al estilo chibi
, me recuerdan a Preston Blair.
16 Agosto 2009 at 18:53
Este es de los primeros tutoriales, nunca entendí el coloreado usando esos modos de fusión para colorear los labíos de la chica, Sergio