About The Designers

Brothers Tim and Bram Vanhaeren are two extraordinary designers, each with unique styles that come together into one cohesive whole when they work together. Be sure to check out their portfolio Into1. If that is not enough there is also their Behance Portfolio. We’ve also interviewed Tim and Bram on Psdtuts+ as well.

About Their Blog WallpaperArt

Bram and Tim are also running the Wallpaper Art Blog. WallpaperArt is not just another random wallpaper library. Their goal is to select the most exclusive, the most special, the most incredible wallpapers you can possibly find online and at the same time bring the artist and the user closer together.

Their aim is to inform the readers about the latest wallpaper trends and information about the artists behind the beautiful artwork. By providing interviews with the designers and a look behind the art, they bring the wallpaper scene to a new level.

Wallpaper Art is also running their first contest. Create a wallpaper and win some fantastic prizes! Find more information here.

Exclusive Wallpaper – “A Trip”

This wallpaper shows my trip to outer space.

This wallpaper shows my trip to outer space. Programs I’ve used are Adobe Photoshop and Illustrator. I really like to draw abstract patterns in illustrator and they’re perfect to fill up my work and add some fun touches to it.

With Photoshop I cut and paste stuff, touch everything up and brush around. I experiment all the time with works like this. And the great part of it, most of my experimental works leads to new job opportunities, so go crazy and find new techniques or effects you like. You will see they come very handy in the future. For this work I was inspired by some Japanese background music from a war movie actually. I never listened to this music before, but it helped me with this work a lot.

Download this Free Wallpaper

Get your downloads now!

• 1024×768
• 1280×800
• 1280×1024
• 1440×900
• 1680×1050
• 1920×1200
• iPhone

Exclusive Wallpaper – “Tuts+”

Recently I’ve been experimenting with typography (I love to work with typography).

Recently I’ve been experimenting with typography (I love to work with typography). Drawing my doodles and patterns, and because I’ve received so much positive feedback, I thought I should use it for a wallpaper. I used Adobe Illustrator to illustrate my doodles and patterns for this typographic artwork and Photoshop for my background.

Download this Free Wallpaper

Get your downloads now!

• 1024×768
• 1280×800
• 1280×1024
• 1440×900
• 1680×1050
• 1920×1200
• iPhone

Special Thanks to Tim and Bram

One again I’d like to thank Tim and Bram for participating in this project and for giving the readers some amazing high quality wallpapers. Everyone be sure to visit their portfolio Into1 and blog WallpaperArt.

Also stay tuned for some more exclusive high quality wallpaper projects in the near future!

1.  Morphix

This site mixes a creative blog layout with nice illustration to create a blog design that is very untypical, but very memorable.

2.  PSD to WP

Here is a one page site that uses a powerful background image to build its sites personality and brand off of.

3.  Dedoce

This underwater scene has a bit of a grunge feel to it that helps keep it from looking like another vector illustrated website.

4.  Chirp

Designed entirely with the hand drawn style in mind, Chirp has an artistic style that is very much its own.

5.  Olive Crush

These guys use a simple illustration and textures to help add some personality to the site design.

6.  Ready Made Designs

A nice color scheme and illustrations make this website very easy on the eyes.

7.  Bird Boxx

A large illustration on this website easily translates that sites name to help make it more memorable.

8.  Cool Brush Design

This sit sports a very detailed graphic of a castle and ocean scene that works with Flash.

9.  Katherine Designs

Who doesn’t love a site with robots?  This site sports a pastel color scheme and lots of little robot illustrations.

10.  Arbel Designs

A very cool one page portfolio site.  Click around on the navigation here to see all of  the various levels of the design.

11. Synch Media

A combination of unique colors, layout, and illustration make this website very unique and different.

12.  The Pixel

Simple animation, outstanding artwork, and clever layout; this website has it all.

13.  Andy Adventure

One would expect that animated games would have a bold and artistic website.  While this isn’t the most clever design, it is certainly big and bold.

14.  Los Colores Olvidados

If Tim Burton were a web designer,  I would think that his website would look a little something like this.

15.  Store Envy

Here is a site that mixes very modern user interface style with some bright and colorful illustration work.

16.  Digital Impact Outdoors

The illustration in this website design does an excellent job at conveying the overall message of the website and adding to its value.

17.  Vindem Teren

I’m not really sure what this site does, but based on the illustration it looks to be some sort of real estate based site.  Goes to show you that images can speak volumes.

18.  Branded 07

This site is full of outstanding illustration.  Be sure to check out the footer area on this one.

19.  Pralinen Schachtel

I like that the illustration on this site has made sure to create some depth to the picture.  This is something many vector illustrations lack.

20.  Indofolio

This is a must see side scrolling site.  Aside from the amazing artwork, it also has a nice transition from page to page to helps added to the feel of the site.

21.  Camellie

Creating a clever and artistic website is easy when you have as much talent as Camellie does.  If only we were all this talented.

22.  Bet Your Followers

I don’t really get the point of this website, but it shows very creative use of some excellent stock illustration work.

23.  Attack of the Web

This is one of those websites that just make you wonder where they got the idea from.  This is a clever and funny one page layout.

24.  Blossoms Village

While not the greatest looking website on this list, it just goes to show that some bold illustration work can go a long way in making your design look even better.

25.  Outlaw Design Blog

It is all about the little details in this site.  The gun in holster on the menu, random bullet holes, and other touches help make this site a bit different.

26.  Abduction Lamp

This site even comes in 3D!  Well, not really, but it’s still a clever aspect of the design.

27.  Bimbi Sicuramente

I have no idea what this site is about, but I like that the vector illustration is full of texture and offers a bit of depth to it.

28.  GREPIT

This site offers a very slick and clever looking diagram type illustration to convey what it is they do.

29.  Kidd 81

Here is another site with a style that stands out from the crowd and one that the designer has used to brand them self very well.

30.  Atomic Cartoons

This is just an amazing website and probably my favorite on this list.  You MUST check this site out and click around a bit.

31.  Somos La Peralimonera

I always like it when illustrated sites like this have multiple layers to them.  Adding outer space or underground layers is a cool idea.

32.  HD Live 09

Any time you can add some real hand drawn work to a design you are sure to create something very different from anything else out there.

33.  Piipe Online

A nice use of bold colors, creative layout and interesting use of patterns make this site fun to look at.

34.  Blogsville

A basic website with a simple illustration to help conceptualize the conference name.

35.  Tech Adventure DC

Again, any time you can add some hand drawn elements into your design you are sure to create something outstanding.

36.  Open Atrium

Here we get a nice mixture of typical clean web design mixed in with some bright and bold illustration work.

37.  Black Moon Development

Bring in a more traditional illustration look offers a unique style in today’s web design.

38.  Moshi Monster

As one would epect, this online kids game is full of animation, cute little monsters, and plenty of bright colors.

39.  Carreras Con Futuro

This site might be “drawn” and “painted” with Photoshop brushes, but it still has that hand drawn style to it.  Great for those of you who don’t have the traditional artistic skill set.

40.  Toris Eye

This is a very cool site that you have to see to really appreciate.  It offers simple motion, creative ideas, nice colors and oh so much more.

This Premium Tutorial is Filled with Creative Tips

Retro design is enjoying a huge modern day revival – and it’s big business. Retro graphics are appearing everywhere, from T-shirts to print and web design. It seems the best way to get ahead these days is to go retro – so in this tutorial we’ll draw a heavy dose of inspiration from the 70s and create a funky poster with tons of retro appeal.

As far as techniques go, we will show you how to give present day images the vintage work over. We will use Illustrator to create cool type from scratch using paths and custom brushes. This is a comprehensive tutorial that weighs in at nearly one hundred steps.

Final Image Preview

Take a look at the final image we will be creating.

Professional and Detailed Instructions Inside

Premium members can Log in and Download! Otherwise, Join Now! Below are some sample images from this tutorial.

Psd Premium Membership

As you know, we run a premium membership system here that costs $9 a month (or $22 for 3 months!) which gives members access to the Source files for tutorials as well as periodic extra tutorials, like this one! You’ll also get access to Net Premium and Vector Premium, too. If you’re a Premium member, you can log in and download the tutorial. If you’re not a member, you can of course join today!

Also, don’t forget to subscribe to the Psdtuts+ RSS Feed to stay up to date with the latest Photoshop tutorials and articles.

Step 1

Using Illustrator we create a rectangle with the size shown. With the Rectangle tool we click on the work area and a window will appear that will allow us to determinate the exact sizes for the object. I recommend to set Illustrator preferences using pixels as measure unit.

Step 2

We place a guide as a reference for horizontal alignment. Using the Plus Pen tool (to add anchor points to an existing vector) we add one extra anchor point in the upper side of the rectangle.

Step 3

Now we select this new anchor point and take it higher than the line and we separate the lower anchor point from each other to obtain an object with this approximated shape.

Step 4

With the anchor point handles we use the upper point as an axis for a soft curve.

Step 5

Now we have to get two more objects that will integrate a three point object. We rotate this vector using its central bottom part as rotation axis. To start we select the Rotation tool and click on the bottom part. Then we will see the cursor change into a little black arrow.

Step 6

Pressing Alt key (that it is used to duplicate –you will see the black arrow together with a white arrow), we drag the object. We use the Information window to rotate the duplicated object a certain amount of degrees. Considering this is a three point object, we must divide 360° for this number (3), so our duplicated vector must rotate 120°. Drag it until you see this approximated number in the Info window.

Step 7

Pressing Ctrl+D (Windows) we automatically duplicate what we have done. So this vector will be duplicated again at 120°.

Step 8

We unite these objects into one. In the Pathfinder window we unite the vectors: click the Unite option and click the Expand button to convert the group into one solid object.

Step 9

Now we round the corners of this object. Go to Effect > Stylize > Round Corners.

Step 10

Set a 10 pixel Radius and preview the result by checking the Preview option box. The Radius depends on the curves amplitude you have drawn in the main object. With the Preview option you will realize if the Radius softens correctly the corners: if the amount of pixels is excessive the object will look distorted and not softly rounded.

Step 11

Now let’s separate the appearance (the created effect) from the original vector. Go to Object > Expand Appearance and obtain the final vector.

Step 12

This is the result of our work with vectors in Illustrator. It is a complex object to be done manually and this is why we use some techniques to achieve a symmetrical and ergonomic vector.

Step 13

As our button will have an inner insertion –some kind of assembled object in the frontal part- we will repeat the previous steps but this time with a much smaller and shorter object.

Step 14

Following exactly the same steps from Step 1 to Step 12, we create this new object. The rest of the vectors can be created manually or in an automatic way without so much complexity.

Step 15

We create just one half of a new object and then we reflect it to make it symmetrical. Please follow carefully the steps you see on this graphic.

Step 16

Using the Reflect tool we duplicate the object keeping the Shift+Alt keys pressed.

Step 17

Now we unite both halves using the Pathfinder tool. You can erase the remaining anchor points of this union with the Minus Pen tool.

Step 18

We use the same duplication method described before, rotating the object 120° to obtain also 3 identical objects and evenly distributed.

Step 19

Finally we create a simple circle, a vector that will be used as LEDs that will light up the button in its hover state. We will finalize the editing in Photoshop to add shaped layers masking techniques.

Step 20

Now we select all the vectors and pressing Ctrl+C (Windows) we copy them into the system clipboard.

Step 21

We close Illustrator and we open Photoshop. We create a .PSD of 1024×768 pixels and this initial configuration.

Step 22

We paint the initial layer in black. Then we apply a layer style to create a background gradient.

Step 23

Using dark grey and black colors, we create a Radial gradient and take it to its maximum scale (130-150%). Please remember that in this layer style window you can drag the gradient to take its center to the place in the screen that you wish.

Step 24

Now we paste the vectors as Shape Layers. Ctrl+V or Edit > Paste.

Step 25

We have the vectors in one Shape Layer and we must separate them in different layers. Let’s duplicate as much layers as parts we have got -4 in this case- and eliminate the unnecessary objects on each of them leaving the shape we are interested in.

Step 26

The order of the layers is the one you see in the picture and do not forget to name every layer to organize better your work. Some layers will be added to these ones that will be created completely in Photoshop. We will add layers styles to our main button.

Step 27

Making a double click on the layer at the main button window, we open the Edit window of this layer styles. On “Blending Options: Default” we take the opacity of this layer to zero in order to see only our layer effects. We start by adding a circular gradient using the same background colors #333333 (dark gray) and #000000 (black). Make sure this gradient is soft from the center to the edge, increasing its size up to 120%.

Step 28

With an inner shadow and unclicking the Use Global Light option (that we will ALWAYS use at 90°) we invert this shadow, dragging the angle editor of the shadow to -90°. This will help us to reinforce the bottom area shadows. .

Step 29

We have concluded the first part of the button editing process. We now have ready the frontal part of it that has an opaque surface that we will later add gloss and pseudo 3D extrusions.

Step 30

Now we create a chromed stroke around the button. We add a 3 pixel Stroke with Gradient type fill. We add some more details to this gradient inside the stroke. We reproduce a chromed metal reflective surface where we use the resource of reflecting the horizon and the sky of an outdoor stage.

Step 31

We apply the Reflected style to the gradient to enlarge the amount of chromed reflections. By turning the angle of the gradient we place the lighter areas where we wish to. In this case the maximum brightness should be seen in the upper area of the stroke.

Step 32

Now we make the chromed surface more complex by adding more lights and shadows details to the metal. With Bevel & Emboss and the Gloss Contour you see in this picture we add more little details to the surface.

Step 33

With Inner Glow we add an inner beveled edge to the button as if it was 3D, trying to make sharper the merge with the object’s background.

Step 34

Now we need a selection to paint some details manually over the button. The first step is to use the shape layer of the button and obtain a selection that will be used as a mask for it to be painted. Go to Paths window and select the button layer to create a selection with the same shape.

Step 35

Now we contract the size of this selection by going to Select > Modify > Contract. We reduce 10 pixels the selection from its original size.

Step 36

Now we soften the selection. Go to Select > Modify > Feather or Alt+Ctrl+D (Windows). We apply 1 pixel feather and press OK.

Step 37

We hide the selection using Ctrl+H to visualize better what we will do. With the Brush tool, using a 35 pixel brush and a 10% Flow, we paint inside a new layer some light reflections over the button, using white color. As the light of our scene comes from above, we will apply more brightness to the upper area of the button and we will enhance with little light spots some dark areas in the bottom part of the object.

Step 38

Still holding our selection (which will become visible again with Ctrl+H) we reduce it some pixels to erase a little of the work we have done with the brush and achieve a more sophisticated effect. This time we contract 3 pixels the selection.

Step 39

We hide this selection again by using Ctrl+H and pressing the Delete key we erase some parts of our previous brush traces. This allowed us to paint manually and then polish our work creating a beveled edge area that reinforces the 3D aspect of the button and giving a plastic texture to its surface.

Step 40

We ended the button structure. Now we must create an insertion on its center. The first step is to bring the shape layer opacity to zero (0%).

Step 41

Let’s create a new Inner Shadow in the inverted angle just like we did before for the main button. Make sure to add the values you see in this picture.

Step 42

Now a little Stroke will represent a bevel between both objects.

Step 43

The following step is a Drop Shadow used as a lighted surface by the Blend Mode Screen and the white color. The size of this light must be 2 pixels to make it very sharp, as if it was a beveled edge that receives some light from above.

Step 44

Finally with an Inner Glow we recreate the beveled edge of the inner button. This makes the observer interpret this object as a little beveled edged panel that is meshed inside the main button.

Step 45

We are done with the main button. Actually it is not a button placed on a background: through some additional effects it will be seen as an inset of the background surface, that has a metallic stroke around and that contains a button inside that can be pressed down.

Step 46

Now we create the Power icon of the button. Download this free font: http://www.dafont.com/guifx-v2-transports.font . You will be able to create this object by using the “q” key and this font in 48 points.

Step 47

In this picture you see how we can add an external beveled edge to the icon, using a 3 pixel stroke of the same color than the button surface and then applying the Stroke Emboss effect with these values.

Step 48

The Stroke Emboss effect as an option to create a beveled edge will allow us to create the beveled effect of the icon on the background.

Step 49

Finally we add a metallic texture to the icon using a gradient as you can see in this picture.

Step 50

Now we create 3 leds that will light up the button when we place the mouse over it. The first step is to give the Shape Layer the color #06B9FB, doing double click on it to edit its color.

Step 51

Using the Shape Layer of the main button we create a selection.

Step 52

We expand the size of this selection by going to Select > Modify > Expand.

Step 53

We set an 8 pixels expand and we press OK.

Step 54

We invert this selection by using Select > Inverse.

Step 55

With this inverted selection we create a mask to obtain the final shape and size of the leds around the button.

Step 56

With a Stroke with same color of button surface (use color picker to get it) we create a small bevel around these lights. This will allow us to give the idea of an inserted object on the background surface.

Step 57

With Bevel and Emboss we give an upper shadow and a bottom light to our Stroke (as if the light from above would impact on these beveled edges).

Step 58

With an inverted Inner Shadow and Multiply we create an acrylic reflection over the upper area of these leds.

Step 59

We finalize the edition of these objects with a Drop Shadow that allow us to give the idea that these details in the button design change the background surface, pressing it down and creating shadowed areas around them.

Step 60

This is how our button looks like by now, but there are still some effects missing.

Step 61

We will duplicate the layer of the previous LEDs and paint this new Shape Layer in white. We start to create the light up led effect with Outer Glow and these values.

Step 62

We add the lighting of the area near the leds using Drop Shadow on Screen Blend mode.

Step 63

The Rollover state of the button it’s done. Now, by using a selection with 20 pixels Feather inside the new layer we make the background to have a convex appearance behind the button as if the background would come out from its center creating a soft 3D ball that will react to the above light.

Step 64

We paint this selection in white, previously softened with a 20 pixels feather. You can use the Paint tool or the keyboard shortcut Alt+Backspace that paints the layer with the color you are using as Foreground.

Step 65

We set the opacity of this sphere on zero (0%) in the Layer Styles edition window.

Step 66

Now with a gradient at 50% transparency and Blend Overlay (using white and black colors that are set by default in the gradients editor) we reach this spherical sensation on the button background.

Step 67

Now we are finished with the button and all its details. We just need to create some beveled edges on the background using the symmetrical vectors created in Illustrator.

Step 68

As always we take the opacity to zero.

Step 69

With a Stroke and these values we create the bas-relief of these bevels in the background.

Step 70

With white Drop Shadow and Blend Screen, we create the lighted up area of these beveled edges.

Step 71

Finally we hide a part of these beveled edges with a 20 pixels softened mask. The idea is that these would merge softly with the background and disappear towards the corners.

Conclusion

It was a long ride but the results were worth it. The final touch is a little lens flare over the upper bright area of the chromed edge. Always save a .PSD file with these resources that provide a realistic and photographic effect to reflective objects. You can view the final image below or view a larger version here.

Here is a link to the written version of the tutorial How to Create a Realistic Fountain Pen and the video version is below.

This post showcases a great selection of print design projects that make good use of textures; making the work more visually appealing. The showcase is followed by a small selection of useful links and resources.

Textures in Business Cards

Although there are thousands of textured business cards out there, it’s not very often you’re actually given one. Most business cards are very simple, which is usually suitable for the company they are representing, although there are a lot of simple cards being used to represent companies that could do so much more with their corporate image, such as landscaping and construction agencies. Below is a selection of great textured business cards.

Chuck Tingley

The use of texture in this card is incredible. A little bit of grunge mixed with paint and splatter marks is (usually) never a bad thing, and the composition of this card shows how to do it perfectly.

Artams

Redbox Media

Redbox Media use a subtle grunge texture in the red of their business card to make it just that little more appealing. The digital texture of the lined paper and coffee stains, combined with the ‘hand-drawn’ style typography make this card very unique.

Magouya

Marko Manojlovic

Well, it’s quite obvious what the texture is used for in Marko Manojlovic’s card. Although very simple, it’s interesting and definitely appeals more than a standard plain card!

Matus Macej

Colokial

Colokial use texture in their business card to give it a worn-out and stained “tropical” look. It works very well with the color scheme of the logo and that little touch of Spot UV makes it so unique!

SeedVibe

Hypno Liberate

The texture used in Hypno Liberate’s card adds a lovely vintage look to the design, matching the corporate brand of the company well.

DigitalMedia

Textures in Printed Advertisements

In my opinion, textures are used to their greatest advantage in print advertisements such as billboard posters and postcards. Taking a look at the selection of superb designs below; you can clearly see the huge difference adding a little bit of texture can make.

Jones Soda Ad

Got 2 Be

This fantastic advertisement for a hair product is incredibly clever and is made up (almost) entirely of hair texture. The addition of someones face in the bottom center of the poster makes it a little comical, too.

Zippo Hero

Smoke Shave

This great poster to encourage people to stop smoking has a great three-dimensional look to it which was created using textures. In fact, without the textures in this poster, there’d be nothing left!

Pepsi Max

Pepsi Max

These clever Pepsi Max posters (see other one above) show a depressed lonely calorie, advertising that Pepsi Max is a one calorie per can soft drink. The use of textures make the illustrations much more interesting to look at, and just gives them that extra “Oooomph”!

Musou Music Publishing

Hugo

OXY

Midwest Trader

The use of an old stained piece of paper in this poster makes it individual and much more interesting. The way it works so well and merges in with the model and birds is superb!

Days Of The New Show

Textures in Poster Design

A lot of the creative posters below actually rely on textures – without the texture in the images, some of the designs would be fairly simple and quite boring to look at. The following collection shows that texture really can bring your work to a completely new level!

First Date With Alice

“First Date With Alice” has an excellent yet simple composition and a beautiful, bright color scheme. The texture makes the poster a lot more interesting, adding different shades of color to the main shapes in the center of the poster.

All We Need To Know

The Creative Mind

This poster makes use of subtle texture to just a little more depth in the background of the piece.

Magic Tree

Saint Design

Giant Mutant Centipede

Like in the Pepsi Max advertisement posters showcased earlier in this post, this poster uses textures to add new life to the otherwise flat vector illustrations. The extra noise gives it a that little extra detailing it needs to keep you looking at the poster for a longer period of time.

Type and Grid

Squares

Light grungy textures are using in the posters “Squares” to give it an interesting background and to add a little extra noise to the model and other various shapes used in the composition. Without it, the overall feel of the poster would be completely different.

Chinawhite Dancer

A Part Of Me

First of all, I have to say “wow!" What a great poster! The vibrant colors mixed with the grungy textures and superb lighting effects make this a stunning one, definitely worthy of going on the office wall!

Typography

Global Warming

Future Imperfect

Retro Vector

This Abduzeedo poster uses texture to add a retro look to the otherwise plain background. A slightly grungier texture has been used to make those clean-cut abstract shapes fly into a completely different dimension!

Some People Refuse 2 B Default

Sour

Axygene

Last but not least, this great poster titled “Axygene” uses plenty of different textures to bring the poster to life, as well as using a grungy eraser brush to remove areas of the right-angled corners.

Links & Resources

• Freebie Roundup: 12 Places To Download Free Textures
  A round-up of 12 superb places to download free, high-resolution textures.
• 200+ Textures, Brushes, and Fonts: Ultimate Grunge Roundup
  A huge compilation of grunge resources such as textures, brushes, and fonts.
• 300+ Vintage Style Textures and Photoshop Brushes
  A collection of over 300 vintage style textures and brushes to use in your designs.
• 50+ textures for Your Design Appetite
  A lovely collection of high-resolution and free textures to use in your everyday work.
• The Big Collection Of Free Design Textures
  What seems like a never-ending list of free textures that you can download and use in all of your own designs.
• Textures in Modern Web Design
  A showcase of 50+ incredible uses of texture in fresh and modern web design.
• Dirty Design: Create a Grungy Thriller Book Cover
  Create your own grungy book cover using plenty of textures and techniques.
• How to Make a Highly Textured Site Layout in Photoshop
  In this tutorial, learn to create a textured site layout by layering multiple images.
• Create a Leather-Textured, Realistic Briefcase Icon
  Learn to crete a realistic leather briefcase entirely from scratch using layer styles and textures.

Tutorial Assets

In order to save time, you can download all of the following images before you get started.

• Empty room thanks to medialab
• A sitting guy thanks to kristtina
• Stool
• Crow 1 thanks to Lip Kee
• Crow 2 thanks to MShades
• Pile of Books
• Open book
• More books
• Paper sheet
• CD case
• Paper texture

Step 1 – Setting up the document

This time we will create a photo manipulation inspired from the classic poem of Edgar Allan Poe, "The Raven". This should not be interpreted as a graphical representation of the poem, just a twisted adaptation depicting the loneliness of the man who lost his beloved Lenore. Imagine this as an audio book project, or a rock band album cover.

Start creating the document; a standard CD cover is 4.75 x 4.75 inches. So create a document in these dimensions. If you want to actually print this you should work on a resolution of 300+ pixels per inch, but this time I’m setting the document to 200 dpi because of the photo sizes.

Once you have your image resolution set, show your rulers (Command + R) and add some guides to the document’s borders. Since this will be a print design you should add a margin for security, so go to Image > Canvas size and change the dimension to 4.85 x 4.85 inches Anchor: Center.

Step 2 – The Room

The entire poem takes place in the narrator’s room, open the "Empty Room" image in Photoshop and save it with a descriptive name like "Room.psd". This image is wide and our design should be a perfect square. We will need to stretch it without distorting it. Is pretty simple actually, first draw a Guide trying to delimit a square on the left side, then using the Rectangular Marquee Selection Tool (M) select the right side of the image, copy it and paste it matching the right side of the segment with the guide. Then using the Free Transform Control (V) and hold the Command (Ctrl) key to distort the pasted area and match the room’s horizontal wall lines.

Step 3 – Join

In order to make the reduction as polished as possible, adjust the levels of "Layer 2" as shown in the image below. I did it in 2 rounds but you can try to get it done in only one. Then, add a Layer Mask > Hide All and fill the mask with a Horizontal Gradient (White – Black). This step will make the reduction work almost perfectly.

Step 4 – Add the room into the main document

In the "Room.psd" file using the Rectangular Marquee Tool (M) select the right side of the image and hit Command (Ctrl) + Shift + C to copy all the layers of the selection (this is to avoid the step of flattening the image and helps you to keep this part of the job editable for further changes just in case). Then paste it into the main document in a new layer named "Room."

Step 5 – Add the guy

Now it is time to add one of the main characters, the guy. For this, grab the sitting guy image and open it in Photoshop, then using any technique select the guy’s shape (I’m using the Polygonal Lasso Tool). Copy the selection and paste it into the main document. Then go to Edit > Transform > Flip Horizontal to make it match the lighting of the scene. This is really important because all too often you’ll not have enough money to actually take your own shots and you’ll need to use stock and choosing just the right picture isn’t easy. Use the Free Transform Tool to reduce the guy’s size. Name the layer "Guy".

Step 6 – Overall shadow

Since I don’t want a 100% photo realistic scene, but a dramatic one; we will add several levels of shadows, the first one is the room’s shadow. Create a new layer named "Room Shadow"; using a big soft Brush (Color: #151610, Size: 300px Opacity and Flow 50%) paint all the right side of the scene, then change the Blending Mode to Multiply and its Opacity to 75%.

Step 7 – Adding more objects: a stool

Open the stool image, select its shape and paste it into the main document; name that layer "Chair". Once again you must flip it horizontally in order to match the lights.

Step 8 – Burn and desaturate

Grab the Burn tool, select "Guy" and burn all its right side to increase the shadows’ intensity. Then grab the default Sponge tool and desaturate the brighter areas. Do the same with "Chair" layer.

Step 9 – Here comes the raven

Open the " Crow1" image from the assets and select its shape using any technique (I did it with the Polygonal Lasso Tool), copy it and paste it into a layer named "Raven". Flip it Horizontally and resize it a little bit, make the crow bigger than the guy. Place it next to the room’s door.

Next add a Layer mask to the "Raven" layer using the Rectangular Marquee Tool. Do this by drawing a rectangle over the door’s shape and by filling the area with black. This way we will create the illusion of a raven entering the door without actually being destructive to the image.

Step 10 – Some books

Open the "Pile of Books" file, select the shape and paste it into a new layer named "Books", resize it and place it just over the "Chair" layer, then burn its right side as well.

Step 11 – Combine crows

Our crow is pretty nice, but it is not quite right. To fix this, we will need to manipulate it a bit by giving it a new head. Open the "Crow 2" image from the assets and select only its head. Paste it, flip it, and resize it into a new layer named "Head" above the "Crow layer" then using the same technique showed in step 3 of this tutorial, merge the head with the body; but instead of using a gradient, use a black Brush. If necessary, delete some areas of the "Crow" layer’s head.

Step 12 – More books

Since the bird wings makes the air blow we’ll add a book opened because of the breeze. Open the "Open Book" image from the assets, extract only the top open book and paste it into a new layer in the main document named "Open Book". Finally add as many more books as you want. Always remember to Burn the right side of them.

Step 13 – Shadows

Duplicate the "Raven" layer using the Free Transform tool to distort it; making it wider. Then in the Hue / Saturation (Command (Ctrl) + U) bring down the Lightness value to -100. Go to Filter > Blur > Gaussian Blur, radius 8px to blur the shadow and bring down the layer’s Opacity to 50%.

Step 14 – More shadows

We will apply this technique on almost every object in the scene, is pretty easy. Create a layer behind the related object, in this case "Raven" Layer and name it "Raven Shadow" (we did it in the previous step) then using a big soft dark Brush (#110C06) paint a shadow there. Next create a new layer named "Front Shadow" and paint shadows over the related object, in this case the raven. Then using a big and soft Eraser (E) Opacity and Flow 50% delete some areas of the front shadow where you think there should be more light. Try grouping the shadow layers and the main object into a folder in order to keep the layers organized.

Step 15 – Shadows and more shadows

Repeat the previous shadow technique but this time with the "Open Book" layer. If you want you can use the Smudge Tool on the shadow layer to merge it better with the background.

Step 16 – Guy’s shadow

Just like with the "Raven" layer on Step 14, duplicate the "Guy" layer, bring down its Lightness and Opacity and then paint both the front and back shadows as well just be sure to take special care of the shadow below his sneakers.

Step 17 – Chair and books’ shadows

Using the same technique paint the shadows of the "Chair" layer and the extra books on the floor, once again, don’t try to create a photo realistic outcome but a dramatic one, so feel free to add as many shadows as you desire but always try not to make the image too dark.

Step 18 – Room’s shadows

Using a larger dark Brush (#110C06) paint all around the room’s borders into a new layer named "Front shadows" somewhere above the "Room" layer. Finally bring down its opacity to 50%.

Step 19 – Words on the wall

This guy is really obsessed with his lost love Lenore, how can you depict a feeling like that into a mute image? That’s pretty hard isn’t it? That’s why I decided to add the word "Lenore" painted several times on the wall. For this, create a new document (any size is ok) with a neutral gray background (#A0A0A0) and using some hand drawn fonts (you can find several free fonts in dafont.com) write the word "Lenore" everywhere. Then hit Command (Ctrl) + A to select all and Command (Ctrl) + Shift + C to copy a flatten version of the image.

Step 20 – Use the vanishing point filter to paste the words on the walls and ceiling.

Create a new layer named "Wall words" above "Room" layers or "Room" folder. Then go to Filter > Vanishing Point. On the vanishing point window draw the necessary planes to put the words on the wall. If you’re not familiar with the vanishing point filter maybe you should read the following tuts first: Using the Vanishing Point Filter to Mock up a Business Card or Create an Impressive Mock-up of a Grunge Box.

Once you’ve created the planes, paste the clipboard there, drag it and resize it until looks good. This isn’t an easy process so feel free to try as many times as you need before moving forward.

Once you’ve placed the text appropriately, change the "Wall words" layer’s blending mode to Overlay.

Tip: Windows 7 and the Vanishing Point filter don’t work well together, for some reason Windows’ Aero has a conflict with the Vanishing Point engine, so if you’re working with W7 and your system suddenly crash while using this filter try changing the desktop appearance to "Windows 7 Basic".

Step 21 – Delete the extra words

Using the Polygonal Lasso Tool select the areas without walls (door and window) with the "Wall words" layer selected, then delete the selection. Then change its Opacity to 50%.

Step 22 – Raven’s motion blur

Since our crow is flying, we will need to add a motion effect, that’s pretty easy. Duplicate the "Raven" layer and place it above the original. Go to Filter > Blur > Motion Blur, set Angle: 0º and Distance 20px and hit OK, then with the Eraser Tool or using a layer mask delete some portions of the blur layer as shown the images below.

Step 23 – Some pieces of flying paper

Grab the piece of paper from the assets, extract it from the white background and paste it into a new layer above all the others in our main document. Using the Warp Tool (Edit > Transform > Warp) distort the piece of paper as shown in the image below. Repeat this step as many times as you want with different pieces of flying paper. Put all them into a folder.

Step 24 – Add shadows to the flying papers

Merge the Flying paper folder and desaturate the resulting layer. Using the Burn tool to darken some shadows over the paper itself. Then using our same old technique of shadowing, add two shadow Layers, one on the front and other on the back, paint some shadows using a dark brush. Finally you can repeat Step 22nd’s process in order to add a Motion Blur effect.

Put all the layers into a folder named "Art".

Step 25 – Add the title

Using the "Trajan" typeface, add the cover art’s title, put all the title Layers into a folder and name it "Title", then Option (Right) click on the layer miniature and select Convert to Smart Object. Then click on the Smart Object and go to 3D > New 3D Postcard From Layer, then the "Title" smart object will turn into a 3D layer with all the text still editable. This way no matter how many changes you do on the perspective, rotation and depth, you can still change the text at any time.

Add a Bevel and Emboss and a Gradient Overlay effect to the 3D layer just as shown in the bottom of the image below. Don’t worry too much about the light position and the shadow right now; we will work it on the next step.

Step 26 – Transform the 3D postcard

Using the 3D transform tool Rotate, Move and Drag the layer to make it match the wall’s perspective. Once you’ve placed the layer appropriately, add the Drop Shadow Style setting the Light angle to 30% and a big distance between shadow and text (32px in this example).

Step 27 – Edit the text

Often, clients change their minds in the middle of the project, that is why it is really important to keep your layers editable all the time. In this example we will be going to add some missing words to the title: the author name. For this you’ll need to dig trough the nested documents into the objects, first double click over the Diffuse Texture on the 3D layer ("Title" texture), a new file named "Title.psd", in this new document you will find the Smart Object layer, double click on it and finally you will see the text layers in a document named "Title2.psd", there you can expand the canvas’ size and add the third line of text. To commit the changes you should Save each document backwards, first "Text2.psd" and then "Text.psd" then you’ll see your 3D layer updated on the main document.

Step 28 – Add some grunge noise

As a grungy detail, we will add some noise to the composite. Hit D on your keyboard to load the default colors, create a new layer named "Noise" above the "Text" object and go to Filter > Render Clouds. Next go to Filter > Noise > Add Noise (set the values shown below). Finally change layer’s Blending Mode to Overlay and Opacity to 35%.

Step 29 – Adjusting the Levels

At this point you will know if the design is too dark or too light, that is why we will need to add a Levels adjustment layer to lighten the image. Now Select All (Command (Ctrl) + A) and Command (Ctrl) + Shift + C to flatten and copy the design.

The Mock-Up

Step 30 – CD Case

Sometimes clients want to see a real life example of their product. It is really hard to send a printed version of a cover art file especially if your clients are far away from you but you can send them a picture. This time we will mock up our cover art in a CD case. Open the "CD case" image in a new document named "mockup.psd" and crate a new layer above the flattened layer. Select the new layer and go to Filter > Vanishing Point, there, paint a plane matching the case shape and paste the clipboard there.

Step 31 – polish the mockup

Since the Cover art is behind the CD’s plastic case, we will need to delete some areas of the cover art layer. For this add a Layer mask to it and using the Polygonal lasso tool, select the tiny notches of the plastic cover, then fill the selection with black on the Layer Mask. You can bring down the covert art’s opacity to actually see the notches.

Then, using the Polygonal Lasso tool, once again, select a semi-circle of the notch, where the paper will be clearly visible, and fill it with black or gray.

Step 32 – The plastic

We will use a Gradient Overlay on the artwork layer to create the ’shiny plastic’ effect, this is pretty simple, just add several black-white transitions on the effect, and change its Blend Mode to Screen and its Opacity to below 20%. In addition, I’m adding an Inner Shadow to improve the depth perception.

Step 33 – Final touches

As some final touches I’m adding the "Paper Texture" layer from the assets into a new layer behind "CD" layer. Changing "CD" layer’s Blend Mode to Multiply works perfect in this case. Then just play with the texture layer, I added a dark (#36312D) Solid Color layer behind the texture; plus I increased the texture’s dark levels by adding a Layer Mask filled with a White – Black Radial Gradient; creating a dark vignette this way.

Final Image

Please take a look at the final version of our cover art.

Step 1

Start with a new document, I’ve used Width – 600px, Height – 600px. Take the Rounded Rectangle Tool (U), Radius- 20px, and draw a shape like this, modify the shape using the Add Anchor Point Tool, then move the new anchor points as shown.

Step 2

Hit Ctrl + Enter to make selection, fill it with color – #05b4ba and then apply a Gradient Overlay using a Layer Style.

Step 3

Name this Layer “Base”, Ctrl + Click on the Layer thumbnail to create selection. Now create a new later and name it “Outside Stroke”. Go to Edit > Stroke. Apply a Stroke of 8px, Location – Center. (You can use any color).

Step 4

Now we need to create a shadow of the layer “Outside Stroke”. To do this, you will need to duplicate that layer and drag it under the main “Outside Stroke” layer. Go to Layer > Layer Style > Color Overlay. Fill it with Black color. Now go to Filter > Blur > Gaussian Blur. Radius – 0.9 px. Change its Opacity to 7%. You should get something like this.

Step 5

Now again Ctrl + Click on the “Base” layer thumbnail. Create a new layer and name it “Glow Overlay 1″. Fill it with white color and move the selection down using your arrow key. Hit delete. Change its Opacity to 7%.

Step 6

It’s time for another glow light. Use the Pen Tool (P) and draw a shape like this. Name this layer “Glow Overlay 2″. Change its Opacity to 11%.

Step 7

Again Ctrl + Click on the “Base” layer. Create a new layer and name it “Box Glow”. Fill it with white. Go to Select > Modify > Contract, contract by 30px. Delete this area. Take the Eraser Tool (E), follow the next image.

Step 8

Optionally, you can add your own effects as shown.

Step 9

Our next step is to give it a glassy look. Create a new layer and name it “Glass”. Take the Rounded Rectangle Tool, Radius – 10px, change the layer blending mode to Lighten. See instructions in next image.

Step 10

Now we need to create the edge of the glass themed area. Draw the same shape using the Rounded Rectangle Tool, press Ctrl + Enter to make selection, go to Edit > Stroke, width – 1px, Location – Center, color – white. Change the Layer Blending mode to Overlay. Take Eraser Tool (E). See the next image.

Step 11

Now that the text has been typed out, it’s time to adjust some of the layers. Create a new Layer Group, name it “Object Front”, and then put all the layers inside it.

Step 11

Time for adjusting the layers. Create a new Layer Group, name it “Object Front” and put all the layers inside it.

Step 12

To create the back side of the object, we will next create a new layer under the “Object Front” group and name it “Object Back”, create a shape using Rounded Rectangle tool, then apply the following Layer Blending Styles.

Step 13

Now it is time to add another glow on “Object Back” layer. Something like this. Use the steps we laid out in earlier parts of this tutorial for this.

Step 14

Our next step is to apply a shadow to our back object. See the following image.

Step 15

Create a New layer Group, name it “Object Back” and put the layers inside it. After that, create the upper area of the folder icon by creating a new layer above the “Object Back” Group. Name it “Head”. Start using the Pen Tool, follow the next image.

Step 16

Ctrl + Click on the thumbnail of the Head layer, create a new layer and name it “Head Stroke”, Go to Edit > Stroke, width – 1 px, color – white. Now add some glow on the Head layer, try creating this one yourself.

Step 17

Now we will be creating our tag. To do this, follow the instructions on the image below.

Step 18

To create the rope, draw it using your pen tool and apply the hole’s Blending Style. (Used in Step 17.)

Step 19

To create the shadow of the tag, follow the steps laid out in Step 4 and erase the outer areas. Set its Opacity to 61%.

Step 20

Create a shadow for the folder icon just like this and place the layer at the bottom.

Final Image

You can create a family of icons using very similar techniques. Thank you! I hope you have enjoyed this tutorial.

1 The Plus Project

As you may know we have some pretty big plans for these Tuts+ sites. While today they are humble little tutorial blogs, we’ve thought for some time that it would be cool to build an entire platform for education. We’re going to call that platform Plus. You’ll know Plus content as our premium content, but no longer.
Our premium content is now ‘Premium’ (go figure!) and Plus is the brand for the educational platform we’re building, which, just like Psdtuts+, will be completely free for the most part.

With Tuts+ well established now, we’ve finally begun work on the project! We’ve acquired the domain Plus.org which will be the home of the new platform (yay for our first four letter domain!) We’ve also brought over our resident code genius Ryan Allen (who built our ActiveDen platform all by himself back in 2006) to team up with Tuts+ developer extraordinaire Fred Wu and kick ass front-end guru Derek Herman. And Skellie and I have been busy spec’ing out the plans for the new site, and it’s pretty, damn cool if I do say so myself!

Right now the Tuts+ sites are fairly passive, but we’d like to get the whole community involved in writing, teaching, answering questions and generally learning. The new Plus.org platform promises to incorporate all that plus some nifty ideas we’ve taken from gaming to come together into a social education platform.

It’s going to take a long time and we’re going to roll it all out in pieces over the next 2 years. We’re super excited about it all, and I hope I’ll have more updates in the coming months!

2 Creative Sessions and Mobiletuts+

While Plus.org will take a long time, we do have some new goodies coming much sooner including Creative Sessions which is being built now, and also Mobiletuts+ which will be all about mobile development!

3 Server Update

About a week and a half ago we had some major problems with our servers. I’m happy to say that we’ve now completely resolved these issues by moving hosts and reengineering our hosting setup completely from scratch. The new setup is much quicker and has a much greater capacity for growth, so fingers crossed, that will be the last server outage for a long time to come!

4 The Redesign

The new theme has a few neat features you may want to check out including:

• Basix!
  While Tuts+ has always been known for intermediate to advanced level content, we’ve been thinking it’d be good to separate out tutorials and articles better suited to people just getting started. So we’ve created the Basix tag for quick browsing. You’ll find it in the top menu, and expect to see more Basix content soon as we beef up our library of novice-friendly content.
• Easy access to Videos, Tips and Premium Posts
  We’ve also started tagging videos, tips and Premium membership posts so that along with Basix content you can quickly find what you’re after. We’re generally going to be working to clean up our category/tagging across the network in the coming months to get it more standardized.
• Tutorial Details on Posts
  We’re also going to start standardizing all tutorials to have a "Tutorial Details" section at the top with difficulty and other pertinent details. Eventually we’ll get all the archives updated … but with over 2000 tutorials, that will take a while!
• Bigger, more readable content area
  We’ve expanded the site to be optimized for bigger 1280px wide screens, with a bit of JavaScript to resize for smaller resolutions. This has given us the space to clean up the content area to be a bit bigger and more readable generally.
• Latest Creattica content for inspiration
  We’ve also started porting over the latest Creattica content into our sidebars. There’s actually a redesign of Creattica coming in the next few weeks and we’ll be expanding the gallery to cover even more types of inspiration. The new sidebar widget will give even more exposure to those talented creatives on Creattica!
• General UI Improvements
  Most of the improvements on the new design are small, subtle improvements such as a reduction in the number of clicks needed to browse categories, a clearer search field, faster loading pages and generally cleaner, more optimized code.

One change that we have also made is to remove the community link feed. Over the years this was a great way to get exposure to community links, but unfortunately was also home to a lot of spam. So with this iteration we’ve left it behind.

Also at the moment sites with Flickr groups don’t have it showing, but don’t worry that’ll be back. There’s just a problem with our Flickr plugin at the moment!!

There are still some more tweaks to do to the new design and a lot of post formatting to do to get our archives matching up with the new theme. But for all intents and purposes the new theme is now alive and well! Enjoy!

Now we’ll take the vector drawing into Photoshop where we will refine the shading, add some textures, and complete the book cover with the appropriate typography. Let’s continue on with Part 2 of this series.

Take a look at the image we’ll be creating. Want access to the full PSD files and downloadable copies of every tutorial, including this one? Join Psd Plus for just $9/month. You can view the final image preview below.

This illustration is a cover art for a fictitious novel called “Let’s Go To Monster School!”. It depicts a fun monster professor teaching insane science in a dingy classroom. We already created the basic image in Part 1. Now we’ll finish the artwork with textures and lots of brushwork using a pen tablet in this Part 2 of this series.

Step 1

Open the PSD drawing we exported in Part 1 (1a) and check that each element sits on its own layer (1b).

Let’s start with the blackboard. The first thing to do is to lock its transparent pixels (1c). This is crucial, as it allows us to paint on the layer without affecting its edges or painting outside of them. The lines we carefully crafted in Illustrator are therefore safe. Lock the transparency of all layers unless specified later on.

Go to Filter > Noise > Add Noise and use a low value (1d). Then go to Filter > Blur > Gaussian Blur (1e) to turn the sharp noise into a hazy texture. The blackboard is now a bit more rugged (1f).

Step 2

Add a subtle Gradient Overlay to the layer (2a) to enhance the feeling of depth. The blackboard gets darker as it recedes towards the corner of the room (2b). We are satisfied with the result therefore there’s no need to keep the layer style active. Right-click on the layer and choose Create Layer. The Gradient Overlay will be turned into a normal layer above the blackboard, masked to it (2c). Select it and hit Command + E to merge it down. We have one layer now (2d).

Step 3

We are going to add several layers of erased chalk marks on the blackboard. To accomplish that we have to select white as the foreground color (try hitting D then X).

Hit B to select the Brush Tool and F5 to open the Brushes palette. Photoshop already has a few chalky brushes so pick one, I like number 36 (3a). Next activate Opacity Jitter under Other Dynamics and set the Control to Pen Pressure (3b).

If you don’t have a tablet leave the Control off. Under Brush Tip Shape increase the Diameter to an appropriate value (test the brush on the blackboard) and change the rotation Angle if the default one is not to your liking (3c). I find it hard to paint very lightly with a tablet so in the option bar at the top of the screen I set the brush’s Opacity to 50% (3d).

Step 4

Paint several passes of random chalk marks on a separate layer, making sure they overlap (4a). Apply a good dose of Gaussian Blur to smooth them (4b), then set the layer to Soft Light with 50% Opacity (4c). The blackboard looks used now, just what we need (4d). Of course feel free to repeat this step until you’re satisfied with the result.

Step 5

Now the real fun starts! Select another, more textured chalky brush (5a) and fill the blackboard with pseudoscientific mumbo-jumbo. Go crazy here, this is Monster School! (5b)

Step 6

The blackboard is done. Let’s take care of the classroom now. You need some dingy textures for the floor and the walls, plus a wood texture for the baseboard. The ones I’m using can be downloaded for free from the website CGTextures. Once you create an account you can download the textures for free, with a daily limit of 15 MB. Here are the direct links to the textures I used:

• Marble Tiles
• Plaster #1
• Plaster #2
• Wood texture

Place the floor texture in your document (6a), hit Command + T to select Free Transform, then using Distort and Skew (from the right-click menu) adapt it to the floor (6b). Set its blending mode to Multiply so the gradient we applied to the floor shows through (6c).

Step 7

To create color variation on the tiles we use the Dodge and Burn Tools. Accessible from the Toolbar (Shift + O to cycle through), these two tools allow us to respectively lighten and darken objects using brush tips.

Using the default settings and a big, soft brush set to low opacity, darken the tiles under the monster and closer to the baseboards (using Burn). Lighten some areas irregularly (using Dodge) to add the impression of an old, stained floor (7a, 7b).

Step 8

Map both walls with the plaster textures downloaded before. Place the first texture in the document (8a) and distort it to match the wall’s perspective, using Perspective and Distort while in Free Transform mode (8b). Do the same for the second wall. Set both textures to Multiply, 70% Opacity (8c).

Step 9

Go back to the first chalky brush, the one we used on the blackboard. Add a blank mask to each plaster texture (9a) and paint discoloration strokes into it (9b). Using the Burn Tool set to Midtones, darken the textures at the bottom where they meet the baseboard and in the corner where they meet each other. That’s where the shadows are (9c).

Step 10

Place the wood texture in the document (10a) and adapt it to the left half of the baseboard (10b). Hit W to select the Magic Wand Tool and click on the yellow baseboard (10c). Use this selection to create a mask on a layer group in which you’ll place the wood texture (10d). This way you don’t need to be super precise when placing the texture. Mirror the right half (10e).

Step 11

Create dark stains and discoloration spots on the baseboard using the Burn Tool set to a small diameter (11a, 11b). Hide every layer except the ones that make up the walls, the baseboard and the floor. Hit Command + A to select everything and Shift + Command + C to copy all layers merged together. A simple Command + V will paste the entire classroom on a new layer.

One last touch. Pick the Dodge Tool with a small diameter and brighten up the corner where the walls meet. Paint a faintly irregular vertical stroke down the entire length of the corner, where it catches the highlights (11c, 11d).

Step 12

To complete the classroom, add a Drop Shadow to the blackboard (12a). Use the settings that give a result similar to images 12b and 12c. And since we’re sticklers for perspective, let’s create a layer from the drop shadow and distort it to match the perspective (12d). It’s one of those subtle details that count in giving an overall convincing result.

Step 13

The classroom is finished so you can lock its layer. We can finally work on the monster now. The character we exported from Illustrator has flat, uninteresting shading. We need to add depth to it by painting lit areas, shadows and highlights, considering an ideal light source from the top. We will use the Dodge and Burn Tools to brighten and darken the character and the Brush Tool to create the necessary color variations. The Blur Tool will come in handy to smooth the light/shadow and color transitions and to remove unsightly brush strokes.

Activate the Burn Tool and set it up for overall use (13a). Selecting Midtones makes the tool affect the base color, therefore allowing us to start defining the shadows. Shade the horn all around its edges, especially the bottom edge and the base where it attaches to the body (13b). Enhance the roundness by darkening more towards the edges.

Step 14

Using the same technique shade the bottom eyelid (14a). Using a medium green, soft brush with low opacity, go ahead and smooth the color transition by painting where the dark green meets the yellow shade (14b). Now highlight the top edge with a single, smooth yellow stroke (14c). All the upward edges catch highlights and must therefore be brighter than the base color. Anytime you do this you can try the Dodge Tool, set to Midtones. Sometimes the result is too washed out so it’s easier to just paint in the color you want. Darken the bottom edge again (14d) and lightly brighten the center pixels to smooth the contrast (14e). Use the Blur Tool to smooth the colors as necessary. Shade the top eyelid in a similar way (14f). As you can see painting is done by first laying down color roughs and then refining.

Step 15

Make the eyeball round by painting the shadows cast by the eyelids (15a). On a separate layer paint some light red veins for a good bloodshot eye effect. Of course use a brush with a small diameter (15b).

Step 16

Burn the eyelid shadow on the iris and enhance the highlight with the Dodge Tool. The secret is to layer soft, transparent, sweeping strokes on top of each other.

Step 17

Merge the warts into a single layer and set it to Overlay mode (17a). Set up Burn for Highlights to affect brightly lit pixels (17b) and darken the bottom edges of each wart to make them pop out (17c). Set up Dodge (17d) and paint highlights on the top edges to complete the shading (17e). Finally add a Drop Shadow style (17f). Now these are good looking warts (17g)!

Step 18

Darken the outer rim of the head (18a) and paint a shadow below the mouth (18b). Paint a highlight on the lower lip (18c). Repeat the process to create the upper lip (18d).

Step 19

Add another shadow on the neck and at the sides of the mouth (19a). Darken the head underneath the eye. Merge down the bottom eyelid and use the Blur Tool to get rid of the hard seam (19b).

Step 20

As you recall from the sketch, there is grass growing on the professor’s head. Let’s paint it! Choose a small brush (20a), set up Fade (20b) and Opacity (20c). Paint curved grass stalks growing out of the head on a separate layer (20d). The number next to fade sets the length of the stalks. Using different diameters, colors and fade values, create two varied wisps of grass on the head (20e).

Step 21

Shade the teeth much like we did the horn (21a). Remember to paint the shadows cast by the lips. Darken the fins where they meet the head (21b).

Step 22

Paint shadows on the left hand. Darken the bottom edge and the area that enters the sleeve (22a). Paint shadows on the fingers too, and add highlights along the top edges of the whole hand (22b). Unlock the transparency of the fingers and blur them where they meet the hand. Also paint shadows on the stick (22c).

Step 23

The tail has a strong shadow cast by the lab coat and secondary shadows along the top and bottom edges. The shadows must be tapered towards the tip (23a). By now you should have gotten the drift so shade both feet (23b, 23c).

Step 24

The lab coat is white but there are a lot of shadows cast onto it by the monster and by itself. Start off with the lapels, darkening them where they meet the monster’s head and along the outer edges (24a). To shade the coat darken the outer edges, paint shadows underneath the lapels and hint at folds by darkening areas along the length. The right side also casts a shadow onto the left side (24b, 24c).

Step 25

Add a small Drop Shadow to the buttons (25a, 25b). No need to shade them, as they are rather small.

Step 26

Darken the right sleeve along its longitudinal edges (26a) then merge it down on the coat and blend the seam with the Blur Tool. Paint some tighter folds at the armpit (26b). Paint a shadow on the inside of the sleeve (26c).

Step 27

Using the same logic shade the left sleeve and the pocket. Paint shadows onto the coat and the left hand. The coat is finished (27a).

The light comes from the ceiling so the professor casts a rather sharp shadow onto the floor. There are no layer styles that can help us here, we have to paint it (in black). Set the layer to Multiply mode and regulate the Opacity to about 60%. Using the Blur Tool to soften the shadow as it recedes from the monster, another nice little touch (27b).

Step 28

The painting is complete. All we need to do now is add the appropriate typography to finish the book cover. I used the beautiful Egyptienne typeface Farao by the Storm Foundry, check it out.

Conclusion

The aim of this two-part tutorial is to show a typical illustration workflow from the conceptual sketch, through the basic drawing, and into the final painting. The task was to lay down a clean vector drawing in Illustrator and subsequently add life to it in Photoshop using textures and traditional painting techniques adapted to the digital format.

I hope you had fun and learned a few useful workflow tips. You should now be ready to create your own weird characters to try your hand at digital painting. Have fun and never stop learning!

Subscribe to the Psdtuts+ RSS Feed for the best Photoshop tuts and articles on the web.