Mastering Photoshop for Web Design is a new ebook by the folks at Smashing Magazine. As usual I designed the cover and here it is:

The design follows in the style of the first cover I designed, i.e. a stylized vector landscape with keywords from the book integrated in the perspective.

I had a blast creating this and as always it’s a pleasure to work with Vitaly & Co.

Check out these posts too:

1. Ebook Cover for Smashing Magazine
2. Ebook Cover for Smashing Magazine #2
3. Create Character Driven Book Cover Art Using Illustrator and Photoshop

The Cat

Here he is, looking fun and slightly malicious:

Soundtrack: Primus ‘Tommy The Cat’

Get a load of Primus in their prime with this classic song from Sailing The Seas Of Cheese, featuring Tom Waits as the titular character:
[Audio clip: view full post to listen]

Funny story: I was wearing a Primus t-shirt during my final high school exam (matura). One of the professors saw it, said he hated the band and proceeded to try and stump me with difficult questions, without too much success. What a loser!

The eye

Draw an ellipse then activate the Convert Anchor Point tool (Shift+C) and click once on the left and right endpoints to turn them into corners. Scale down the eye vertically.

Draw the iris as a circle and the pupil as a squashed ellipse, just like the main eye shape.

Make the eyeball slightly yellow and add an Inner Glow effect.
Fill the iris with a yellow/orange radial gradient.

Make the pupil dark brown. Make a copy of the eyeball, place it behind everything else (Send to Back, Shift+Command+[) and turn it brown. Scale it up horizontally, keeping the right corner coincident with the eyeball. Move the iris-pupil combo up and use a copy of the eyeball to create a clipping mask.

Adjust the angle of the eye so the outer corner is rotated upwards. Add a semi-transparent white circle on top of the iris to act as reflective highlight. Mirror the other eye and place a guide in the middle.

The nose and the snout

Draw the left half of the nose, snapping to the guide. Mirror the right half then hit Command+J to invoke the Join tool. WIndow select the two top middle points and chose the Smooth option. Repeat for the two bottom points.
Fill the nose with a brown gradient and add an Inner Glow and an oval highlight.

Draw the snout with two simple curves. Apply a tapered brush from the Brushes palette, loaded from Artistic > Artistic Ink.

Select both halves and go to Object > Expand Appearance. Unite the two shapes from the Pathfinder palette. Draw two simple teeth and fill them with a light gray gradient to suggest roundness.

The body

Draw the body as a modified oval shape and fill it with an orange gradient, darkening the bottom half.

Draw the ears and unite them with the body as one shape. The inner ears are separate shapes filled with a lighter gradient.

Apply an Inner Glow effect to the body. Draw the belly, fill it with the same gradient as the inner ears and clip mask it to the body.

Now we’ll create some quick fur.
Select the belly then go to Effect > Distort & Transform > Roughen. Use the appropriate values to obtain a frayed edge that resembles fur. Do the same for the inner ears.

The stripes

Let’s create the tiger stripes.
Draw a series of paths radiating along the left side of the cat. Apply a tapered brush to them, loaded from the Artistic Ink brushes. Mirror the stripes to the right side and expand all the paths. Clip mask them to the body and apply the Roughen effect to create the fur.

Select the clip masked group of stripes and click on the Crop icon in the Pathfinder palette. This will expand the group and apply the mask. Make a copy of the belly, make sure it’s expanded. Now select the expanded stripes and the copy of the belly and click on the Divide icon in the Pathfinder. This will create a large group of shapes from which the ends of the stripes that overlap the belly can be deleted. The same goes for every lightly colored shape in the group: it’s the copy of the belly that we don’t need anymore. When you’re done, the stripes will not overlap the belly.

The paws

Still with me? Good. On to the paws.
Draw the paw with a simple path and fill it with an orange shade sampled from the underlying body. Draw the toenail and fill it with an Inner Glow effect, choosing the Center option. Repeat for all toes.

Make a copy of the paw, turn it dark brown and place it underneath the paw. Rotate it a bit and apply a Gaussian Blur effect: it’s the paw’s shadow. You need to clip mask it to the body so there’s no shadow in the air.
Mirror and copy the remaining paws.

Use the same method to create a shadow from the body. Place it above the hind paws, using them as clipping mask. This means you have to create two shadows, one masked to the left hind paw, one to the right hind paw.

The tail

The tail is a curved shape behind the body, filled with the same gradient. Make sure the base of the tail is darker than the tip.
Using the method explained before, create stripes on the tail and make them furry.

Finishing touches

The paws look flat. Add darker shapes, made blurry with a Gaussian Blur effect. Clip mask them to the paw. Do it for each paw of course. Finally create a drop shadow from the body+paws+tail and you’re done.

You should have a vector cat at your disposal now. Have fun!

Check out these posts too:

1. Create a Cute Baby Seal with Illustrator
2. Create a Vintage TV Set Icon in Illustrator
3. Create a Tasty Burger Icon in Illustrator

Smashing Magazine commissioned six illustrations for a post about their regular writers.

Here’s the main one: a composite of all the writers with features from all of them (tattoos, birthmarks, scars, glasses etc.).

These three illustrated what the writers do first thing in the morning: oversleep, check email, Facebook & Twitter and drink coffee.

The last two represent the writers’ strongest quality (love for their job) and worst flaw (disorganization, respecting dealines). Check out James White’s Two Smashing Years poster in the first image! Great poster, I had lots of fun sketching it.

I’m really happy I got to do this. I’m still creating icons but illustrations allow me to explore different styles and subjects and are a testing ground for my personal works.

Check out these posts too:

1. Editorial Illustrations for Smashing Magazine #1
2. Ebook Cover for Smashing Magazine
3. Ebook Cover for Smashing Magazine #2

This week I’m taking time off from client work, going through my sketchbooks and turning weird ideas into weird illustrations.
Today is Friday and I’m publishing this little typographic experiment.

Putting eyebrows on the word ‘FROWN’ is my way of blowing off steam when my computer acts up, which happens more and more frequently.
I’m putting this on my wall so every time I get a fit of anger I’ll just frown with the picture instead of doing much worse.
Not coincidentally ‘putting the eyebrows on’ was how Frank Zappa used to call playing with attitude.

Here’s a detailed view. Note the painstaking (actually fun) hair painting.

So go ahead, frown all you want, but always keep the sunshine on your face.

Check out these posts too:

1. My Icon Wants To Kill Your Mama

Yep, it’s been two years. Everything is ok. I still love (some) meat, I just don’t feel like eating it, and I don’t miss it. Amazing what will power can accomplish.
The most interesting aspect of being a vegetarian is exactly that: getting rid of habits, testing your limits, discovering new ways of living.
There are some moral and environmental reasons behind my dietary choice, but mostly it’s about knowing myself better.
Buon appetito!

No related posts.

My cardiologist suggested I buy a smaller, harder pillow to help with my headaches.
Screw that! Here’s what I want:

Surreal and fun: that’s how I like my dreams.
Night night!

No related posts.

The result

Here’s what we’ll have on our screen at the end of this easy easy tutorial:

Get your tablet ready! No tablet? Sorry, you’re going to be disappointed by your result if you use a mouse, but keep reading please.

Soundtrack: Smokestack Lightnin’ – Howlin’ Wolf

As usual these soundtracks suggest themselves to me when I put an illustration together. This time, ladies and gentlemen, it’s none other than Howlin’ Wolf.
Not only is Smokestack Lightnin’ appropriate for this tutorial, it even inspired me to write it.
Please do yourself a favor and listen to the Howlin’ Wolf several times a day to wash away all the crap the radio and the TV have been playing for the past 30 years.
[Audio clip: view full post to listen]

I love how this song clashes with Lost’s dark, ominous atmosphere. Imagine strolling through the jungle, listening to the blues, and suddenly meeting the smoke monster! In fact, let’s…

Meet Smokey!

Again, don’t worry, there are no spoilers here! The true nature of the smoke monster is not revealed.
Here are several screenshots of Smokey, one of the most misterious characters of Lost:

As you can see it often looks just like regular black smoke (it ain’t…), though sometimes it takes on the form of a long, thin arm. The smoke is not wispy and transparent but rather solid and thick. It also moves a lot, whirling and rolling.

We’ll go for a thick cloud of black smoke in a menacing pose.

Step 1: blocking out the image (sketch)

Find a good picture of the (preferably) Hawaiian jungle to act as backdrop to Smokey. Here’s a photo I found on Flickr (with a Creative Commons license), already cropped:

Get it on Flickr.

Draw a quick sketch of Smokey now. It’s important to try different shapes until you find one that does justice to the original character and plays well with the backdrop. Don’t waste time with how it looks, just concentrate on its shape. Here’s my sketch:

Smokey comes out from between those trees at the right of the screen and weaves through the jungle, almost coming to a stop.

Step 2: laying down the shape

With the sketch in place you can lay down the actual shape. Remember what we said about the smoke being thick, rolling and moving all the time? Paint a faily solid shape in black, making the edges quite busy with curls. You can do that with a good textured brush, controlling the size and opacity with the pen pressure setting.
I’m using one of Chris Wahl’s amazing brushes.

Step 3: the base color

The first thing you need to notice is that black smoke is not black. Rather, it’s dark gray, so make Smokey lighter.

Step 4: adding depth

The patch of light in the bottom right corner tells us that there’s light coming that way. We need to darken Smokey’s left side using either a black brush or the Burn Tool. Also add secondary shapes the same way.

Step 5: adding details

Using a gray brush and light strokes lighten up the middle and right areas: that’s where Smokey is lit. Try to suggest a series of rings along the length of the “arm”.

Now break up the ring pattern and tone down the lit areas. Paint the shadow cast onto the ground. I’ve also added a slight yellow tinge to simulate color bleed from the trees. In the last image I’ve smudged some edges and some of the inner crests to suggest movement. Surgical motion blur if you will.

You’re done with the painting. Now run for your life!

Conclusions

This tutorial is about painting smoke, any smoke, and the Lost smoke monster was of course just a pretext to make it more appealing.
I hope you learned something useful and had fun. I had lots of it but sadly this doesn’t change the fact that Lost is no more. Damn do I miss that show!

Check out these posts too:

1. Let’s Go To Monster School!
2. Painting a Jack-O’-Lantern
3. Create Character Driven Book Cover Art Using Illustrator and Photoshop

Don’t miss my latest tutorial on Psdtuts+ if you’re into textures, females or robots (that should cover just about everyone).

This tutorial is aimed at beginner-to-intermediate Photoshop users who want to obtain a rich, textured look with simple shapes and clever effects.
A combination of basic layer effects and great textures gives a realistic, shiny metallic look. It’s easy to expand on this style and adapt it to your own shapes. Have fun!

Check out these posts too:

1. Create a Leather-Textured, Realistic Briefcase Icon
2. How to Create a Swanky Coffee Table Icon in Photoshop
3. Create a Magnifying Glass Icon in Photoshop CS4

My collaboration with Smashing Magazine continues with three editorial illustrations for their Publishing Policy page.

The first one is for advertising:

The second one is for editing:

The third one is for giveaways:

See them on the website.

I scanned handdrawn sketches, traced them and colored them in Illustrator then refined the shading in Photoshop with a little help from my friends (the Brush, Dodge and Burn tools).
As usual this was lots of fun. More to come!

Check out these posts too:

1. Ebook Cover for Smashing Magazine #2
2. Ebook Cover for Smashing Magazine
3. Smashing Magazine Writers Illustrated

Lately I’ve been working for Smashing Magazine on a number of illustration-oriented projects. I’m loving this opportunity as it gives me exposure and the chance to expand into full-blown illustration.
One of the projects I’m involved with is the ongoing series “Smashing Ebooks”.
After designing the cover for ebook #1 I was asked to design an illustration for ebook #2, entitled “Successful Freelancing for Web Designers”. Here’s my design:

Designing covers for books with such broad contents is difficult as there’s no single idea to go for. After thinking it over I decided to concentrate on the concept of the freelancer as a professional who juggles many responsibilities and duties. Here’s the sketch I sent to Vitaly for approval:

They liked the concept but I feared it wouldn’t blend with the other covers. This was going to be a painted, organic illustration whereas the series features geometric landscapes with flat shading. So I decided to simplify the illustration while retaining the overall idea and proceeded to change my sketch into a geometric, stylized illustration.

I’m pretty happy with the result, considering I had pictured a totally different outcome.
I learned a valuable lesson here and feel more confident of my flexibility as an illustrator.
I also experimented with a shading style that’s completely vector and hence resolution-indipendent. This allowed me to play around with the shapes, their proportions and relative placement quite a bit—a highly flexible workflow made possible by the combination of Photoshop’s layer styles applied to shape layers.

I hope you like the design as much as I do and I urge you to check out the ebook.

Check out these posts too:

1. Ebook Cover for Smashing Magazine
2. Mastering Photoshop for Web Design Ebook Cover
3. Editorial Illustrations for Smashing Magazine #1