Drawing Vector-Looking Cat Illustration Using Photoshop

Vector illustrations are known to be rather popular in web graphics today. Professional designers are able to create such illustrations in a matter of couple hours. If you are a beginner or an amateur, the tutorials in web-graphics would certainly be of a great use for you. The aim of this tutorial is to place in the clearest light the process of creating the chosen image. Step by step I will show the whole process and with the help of my notes I will clarify all these stages.

To create really cool image you have to choose the necessary program and to follow certain schedule. If you want to draw some vector illustrations you have to bear in mind that vector-type editors Adobe Illustrator or CorelDraw are used for this purpose. However, Photoshop has sufficient funds to draw vector illustrations. I will demonstrate it in this tutorial concerning the outlining the sketch in the vector. I have taken a sketch of a cat as the basis of this illustration. I have decided to depict blue cat with green eyes and pink flowers in its paw. Here is my final result.

Sketch I’ve used in tutorial.

Step 1

Start with creating the background. Using this example, I will show you how to create the image step by step. Draw shapes with the help of Pen tool (Shape Layers) option selected. After that set up Fill = 0%. Then use the Gradient Overlay (Layer>Layer Style>Gradient Overlay …) to fill selected shape with the certain gradient. All settings are default, you only have to change the Angle (I will specify degree) and the gradient (I’ll insert the card into the picture of gradient to show you everything). Sometimes Stroke (Layer>Layer Style>Stroke…) is also added. Use all default settings except Width 1px and the color (I will indicate separately).

So, select the Pen tool, Shape Layers option checked. Make wireframe covering whole canvas. Set up Fill = 0% and add Gradient Overlay (Layer>Layer Style>Gradient Overlay …).

Step 2

Paint main parts of the cat’s body in blue color: the neb with ears, body, front paw and the tail. Add Stroke to make image more intensive. Use the colors from #4f85c8 to #7ab2ee, angle -50deg for Gradient Overlay, and #2d72c5 color for Stroke.

Step 3

Now let’s pay attention to the main elements of the body. Highlight the shape of the body using the same gradient map as for the body, angle -3deg.

Step 4

Now, let’s come to the details of the tail. Highlight the entire tail and fill it with the gradient (68deg). After that highlight the tip of the tail (as shown on the picture) and fill with the same gradient (75deg).

Step 5

Highlight the nose as shown on the picture and fill with the gradient (90deg).

Step 6

Add some light shape on the edge of the nose (-66deg). Use darker colors to emphasize borders of the nose.

Step 7

Now it’s time to work with shapes of general ears contour. Use 66deg angle for the lower one and 4deg angle for the upper one.

Step 8

Now give the shapes for the ear-edges. Use 16deg angle for the lower one and 34deg angle for the upper one.

Step 9

Finally add details to the paws. Create oval circle of the upper finger (35deg), then oval circle for the middle finger (68deg), and oval circle for the lower finger (58deg). The next coming circle overlaps the previous one each time.

Step 10

The initial corpus is done. Now let’s proceed to the second lower paw. Draw new shape (97deg angle), send it to back (Ctrl + Shift + [) and add #1d62b5 Stroke.

Step 11

Add three circles from top to bottom (25deg, 68deg, 83deg) for each of the fingers as in step 9.

Step 12

The second lower paw is done. Now draw upper paws. Create shape for one of the upper paws (58deg) and add #4172a5 stroke (as for all external objects ).

Step 13

There are 4 fingers on this paw. Make one of them obscure (the thumb). Create the shape (50deg).

Step 14

Create the oval shape for each of the fingers from top to bottom as in step 9 (63deg, 67deg, 77deg). Add #3367a6 stroke for each of these three fingers to enhance the effect.

Step 15

Create new shape for the second paw (-61deg). Bring it to front (Ctrl + Shift +]) and add #2d72c5 stroke.

Step 16

For the upper thumb create shape (135deg), then go down and draw oval shapes for the remaining three fingers as in step 9 (99deg, 83deg, 67deg).

Step 17

You’ve finished with the main parts of the cat’s body. Now proceed to the neb. Start with the eyes. Create new dark blue shape (-168deg) for the lower section of the eye, and then light blue shape for the white of the eye (-22deg).

Step 18

Now draw oval shape in the middle of the head (90deg) for the color part of the eye, add #599c01 Stroke. Draw the shape of the pupil over the color part of the eye (90deg). Then draw small oval shape over the pupil, which will be a blink. Use #ebfcf9 color for the gradient.

Step 19

Create oval shape for the eyelid (94deg). Then create the shape for the eyelashes (-173deg). It should overhang the borders of the eyelid. Send it backward (Ctrl + [), not to overlap the eyelid.

Step 20

Using the same procedure and the same parameters, but slightly smaller sizes for each of the elements, create the second eye.

Step 21

Now draw the chap with the teeth. To start with create new shape (71deg) and add #336aaa Stroke to it.

Step 22

Now create shape for the lower tooth (-122deg). Then duplicate layers with teeth (Ctrl + J) and change their size using Path Selection tool.

Step 23

Now create shape for the upper tooth (-135deg). Then duplicate shapes and transform paths until the upper teeth are done (as in step 22).

Step 24

The cat is practically done. You have to add some details now. Draw the new shapes for the luxury mustaches (from top to down:-50deg, 63deg, -50deg).

Step 25

And then draw two lower mustaches.

Step 26

Now paint the claws for each of the fingers. Just create separate shapes in the form of small strokes. Specify the identical angle of the gradient depending on the direction of the claw. Gradient should vary from dark to light blue. Do not be afraid to vary gradients.

Step 27

The last element of the illustration is the flower in the paws of the cat. Draw pedicel of the flower shape as it is shown in the screenshot, send it to back (Ctrl + Shift + [) (173deg). Then draw the shape with the petals (79deg).

Step 28

Create another shape for the petals (94deg). Make it a bit larger and higher then previous in step 27. Draw oval shape for central part of the flower (76deg). Duplicate shape, move 1px upwards and to the right (99deg).

Step 29

That’s all. The illustration of the vector cat is done. As you see, with the help of Photoshop you can create all vector images that you want.