This tutorial is for beginner Photoshop users, so we will explain everything in detail; you’ll learn to use the vector drawing tools of Photoshop using our mouse… for now we won’t be using a digitizer tablet.
To start, the best thing to do is having a good sketch on paper; the size of the drawing doesn’t have to be very big because we will delete it at the end, but also it doesn’t have to be very small. Let’s scan it at 150-300 dots per inches (dpi from now on) to make sure that when we zoom we can clearly see the lines to work properly.

Let’s start with a white canvas (Ctrl + n), with a good size and resolution just in case we want to print in a big size.

To add new layers just click the button “Create layer”.
Let’s put the sketch in it (to do this, open up the file where you have your drawing, select everything with Ctrl + a and cut the selection with Ctrl + x. After that, paste it with Ctrl + v in the layer; if it’s small, alter it with Ctrl + t) and name it “sketch”, then create a new layer where we will put the trace of the figure and let’s name it “lines”. So we should have the 3 layers as it appears in the image.
Now we’ll use the Pen Tool
to redraw the sketch; select it and activate the Paths Mode (left superior corner, the icon of the pen inside the square):

Now let’s click in the 3 sectors, and 3 little squares like these ones will be created:

If you right click (or click and maintain pressed) the Pen Tool, a menu like this one will appear:

Choose “Convert Point Tool”(the last one), press in any of the 3 squares we created a moment ago and drag it; this way you can twist the line and form what it’s called a Berzier Curve. Start shaping it in the way you want (we can always add or remove this squares with the Add Anchor Point or Delete Anchor Point as we want more or less complex shapes). You should get something like this:


There’s a little trick to create rounded shapes. It consist in create the vertexes and to add an intermediate point, after that you just have to move it with the Direct Selection Tool and that curve will be made by itself.
Make sure you are in the “lines” layer, select the Brush Tool
and choose a hard brush (right click in the canvas, they are the first ones in the brushes list) of about 5 pixels with a different color from the one of the sketch, for example red:

With the Pen Tool selected, right click in the canvas and choose “Stroke Path”, and a window like this will appear:

Choose the Brush Tool and hit OK; this will generate a trace with the characteristics of the brush we chose before that will follow the previous route (this can be done with all the other tools).

If you mark the square Simulate Pressure we will obtain traces that will be smaller in the edges; with a little of imagination you can get all types of traces.

WELL DONE! You have you first trace, now do the rest
The trick here is to make the traces in parts, in different layers so you can retouch comfortably superposed traces… like in this image:


It’d be ideal if you could make traces of the complete areas (for example we trace the glasses in one layer and the hair in another one, after that we delete the traces of the glasses covered with hair); it’s better to do it that way than starting tracing through the eyebrows and the hair with the same trace.

Now you have to work with the rest of the traces. When you’re done with it, we have to put together all the layers; we can do this selecting all the layers and pressing Ctrl + e. At the beginning it can be hard to manage with all the curves, but with some practice, the sketch can look as the original.

We have just finished our digital inking. You might probably notice that the lines are a bit boring as they aren’t modulated… patience, we’ll see that with more detail soon










26 April 2007 at 9:44 AM
exceelente sigue asi!! muy facil de entender excelente
17 May 2007 at 2:55 AM
when is the closing date..u mean the winner will get new mascot for their own .sound interesting.
2 June 2007 at 2:53 PM
this is pretty damm hard to use
11 July 2007 at 9:00 AM
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 July 2007 at 9:12 AM
Simplemente selecciona el cotorno y borralo dandole a la tecla de borrar o suprimir.
23 July 2007 at 8:47 AM
GRACIAS
24 July 2007 at 8:22 AM
EX-CE-LEN-TE,en una palabra.Maestro.
23 August 2007 at 2:21 AM
muchas gracias por tu ayuda, son excelentes maestros . . . sigue asi
8 September 2007 at 6:34 PM
¿con qe hacen esos dibujos
9 September 2007 at 2:34 PM
Que programas existen para realizar ese tipo de dibujos ??? y ¿ hay manuales para ello?
9 September 2007 at 6:10 PM
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 September 2007 at 1:55 AM
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 September 2007 at 6:39 AM
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 September 2007 at 2:50 PM
me encanta que los argentinos nos equivoquemos!!!
hay que preguntar no afirmar martín!
1 October 2007 at 11:01 AM
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 October 2007 at 12:45 PM
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 October 2007 at 4:04 PM
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 October 2007 at 2:12 PM
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 October 2007 at 5:07 PM
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 October 2007 at 5:05 PM
Muy bueno el tutorial, pero, que version del photoshop usas?
7 October 2007 at 5:44 PM
Pues la verdad que no importa mucho, las herramientas de dibujo vectorial son las mismas desde la versión 6 al menos.
8 October 2007 at 6:14 PM
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 October 2007 at 1:37 AM
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 October 2007 at 2:32 PM
T__T gracias… hacia mucho tiempo que queria un toturial asi de bueno…
6 November 2007 at 8:04 PM
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 November 2007 at 8:41 AM
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 November 2007 at 8:47 AM
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 November 2007 at 8:14 PM
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 December 2007 at 12:40 PM
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 December 2007 at 9:43 PM
Muchas gracias por el cumplido, espero que no se cumpla
31 December 2007 at 11:16 AM
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 January 2008 at 11:34 AM
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 January 2008 at 3:05 PM
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 January 2008 at 3:46 PM
hola he echo mi boceto en rojo pero lo quiero poner en negro , como se pone???
14 January 2008 at 3:48 PM
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 March 2008 at 9:25 AM
Muy bueno, el inicio ya sabia pero el contorno de rojo no, gracias por el dato sigue asi tus explicaciones son muy interesantes.
20 May 2008 at 12:34 PM
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 May 2008 at 11:41 PM
Buenas Morcio, por desgracia hay mucho amigo de lo ajeno…
7 August 2008 at 4:56 PM
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 August 2008 at 10:57 AM
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 October 2008 at 1:06 PM
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 October 2008 at 2:55 PM
DISCULPA TOAS LAS MOLESTIAS SERGIO PERO ME PODRIAS DECIR COMO CONSEGUIMOS EL TIPO DE TRASO ONE ENDING POINT SHARP POR FAVOR
26 October 2008 at 4:27 AM
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 January 2009 at 3:12 PM
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 January 2009 at 11:02 PM
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 March 2009 at 11:56 AM
Realmente magnifico, muy util y absolutamente recomendado, muchisimas gracias, llevába tiempo buscando un tutorial asi, y me ha sido de gran ayuda.
31 March 2009 at 9:05 PM
¿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 April 2009 at 11:31 PM
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 May 2009 at 2:23 AM
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 May 2009 at 7:29 PM
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 June 2009 at 1:23 AM
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 July 2009 at 9:14 PM
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 July 2009 at 2:42 PM
Me gustan mucho estos diseños al estilo chibi
, me recuerdan a Preston Blair.
16 August 2009 at 6:53 PM
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