To begin with, the option to register your own legitimate domain name is one of the biggest benefits of using a professional hosting company to design your website. This way, you will not belong to some smaller host, and your website will not look like “webhost.com/my website.” It will be more personal and, as a result, more professional. With the help of your hosting company, you will simply be able to enter the name you’d like for your website and run a search to see if it is available on the Web. If indeed the name you’d like for your site is available, you can set about purchasing it for yourself, and can then go about building your site upon it. However, depending on your preferences, there may be more to it than this. Here are a few tips to consider when choosing a domain name:

1.) Simplicity – While this may seem obvious, it is always a good idea to make your website’s name as simple as possible. Even the difference between “my-website.com” and “mywebsite.com” is substantial, as the second option is the more simple and basic, and is therefore more likely to be used by people looking for your site. The simpler your domain name is, the easier it will be for people to find your website online.

2.) Broaden Your Reach – If you care particularly about generating a large amount of web traffic (for instance, if you are starting your website for business purposes, etc.) you may want to consider buying a few separate domain names. Using the example from above, you may want to purchase both “my-website.com” and “mywebsite.com,” as well as other similar options, in order to prevent competitors from buying up similar platforms and taking web traffic from you. In fact, you can even have your excess domain names set up to link automatically to your actual website (meaning that a visitor who goes to my-website.com will be redirected to mywebsite.com), which can go a long way toward increasing your traffic.

Step 1

Before we jump into creating the scene, we are going to create a wood board texture that we will use for flooring. Create a new document 3000 px by 3000 px (since the wood floor will be in perspective, the large document size will minimize pixelation).

Step 2

Start by adding Noise. Then, pixelate the noise using the Mosaic Filter (Filter > Pixelate > Mosaic). This gives us the geometric shapes to work off of. Next, add a strong Motion Blur. To get better definition, adjust the levels and add another Motion Blur.

Step 3

Now we have a good start to our wood boards. To break up the texture into more defined boards, go to Image > Adjustments > Posterize.

Step 4

Create a New Layer and fill it with a wood color. Set your foreground and background colors to two shades of brown and go to Filter > Render > Fibers and max out both values. Set this layer’s Blending Mode to Overlay. This will add some texture to the wood.

Step 5

Make a copy of the base layer and move it to the top of your stack. Go to Filter > Stylize > Find Edges. Use Levels (Command/Ctrl + L) to increase the contrast of the lines and give the layer a strong Motion Blur. Set the Blending Mode to Multiply. As you can see, this gives the individual boards more definition.

Step 6

We are done with the initial wood floor texture. Go ahead and flatten and then copy the image. Create a New Document size: 750 px by 1000 px. Create a new group called “Floor” and paste the wood floor into this image. I have adjusted the levels slightly to brighten the wood.

Step 7

Use the Transform Tool (Command/Ctrl + T) to skew the wood floor into perspective.

Step 8

Make a copy of this layer and Desaturate it (Command/Ctrl + Shift + U). Go to Filter > Stylize > Emboss with settings shown below. When finished, set this layer’s Blending Mode to Overlay and its Opacity to 59%.

Step 9

On a New Layer, use the gradient tool and add a gradient as shown. Set the Blending Mode to Multiply and the Opacity to 41%. This will help darken the corners a little.

Step 10

Create a New Group called “Wall” and use the Rectangular Marquee Tool to select an area for the wall. Fill with a yellow color (#DEC181).

Step 11

To give the wall some texture, make a copy of this layer and go to Filter > Noise > Add Noise with a value of 145%. Next, go to Filter > Stylize > Emboss with the settings shown. Set the Blending Mode of this layer to Overlay.

Step 12

Create a New Layer called “Trim.” Use the Rectangular Marquee Tool to select a band at the base of the wall and fill using the Gradient Tool.

Step 13

Make a copy of the “Trim” layer (Command/Ctrl + J) and Transform (Command/Ctrl + T) this trim piece as shown.

Step 14

We are going to start on the end table. Create a New Group called “End Table” with a layer called “Table Base” inside. Go ahead and draw the shape of a table and fill it with any color

Step 15

We will be building this table piece by piece with a separate texture using the “Base” layer to maintain the shape (by using clipping layers). You can use any texture you wish for this, however, I will use one I’ve already created in Photoshop. Start by opening your texture in a separate document, use the Rectangular Marquee Tool to make a selection on your texture and copy and paste it in your scene.

Step 16

Convert this layer to a clipping layer by Alt + Clicking in between the two layers. Move the texture so that it covers the entire table.

Step 17

Copy and paste another selection of texture. This time give it a 1 px black stroke and rotate it 90 degrees to the position as shown.

Step 18

Copy and paste a square selection of texture into your scene and name this layer “Door Base.” Add a Drop Shadow and Outer Glow to simulate shadows.

Step 19

Copy and paste a small rectangular selection of texture and paste it into your scene (shown as the highlighted piece). Rotate it into position and make it a clipping layer to the “Door Base.” Position it as shown.

Step 20

Add a Bevel and Emboss to this layer.

Step 21

Continue copying and pasting small rectangles of texture to build the rest of the cabinet door as shown.

Step 22

Copy and paste another selection of texture to become the drawer. Give this layer the following Layer Styles.

The drawer should resemble this:

Step 23

Add another strip of texture to the top of the end table. This time, use the marquee tools or the Eraser tool to give the top rounded corners.

Step 24

To create the knobs for the drawers, start by create a light colored circle (#CBCDA5) on a New Layer named “Knob”). Add the following Layer Styles. Copy the knob to the other drawer.

Step 25

Go back through the different layers of the end table and add extra highlights and shadows with the Dodge and Burn Tools.

Step 26

Create a New Group called “Lamp” under the “End Table” group. Draw a shape of a lamp and fill it with #6B5A3E.

Step 27

Next, we want to use the Dodge and Burn Tool to add some detail. A useful technique is to use the Dodge and Burn Tool in conjunction with the marquee tools.

Continue to add detail with the Dodge and Burn Tools, keeping in mind how

the light will hit the base.

Step 28

Feel free to add more highlights and shadows. In this case, I’ve used a square brush and the Blur Tool to add the following highlights.

Step 29

To give the lamp’s base a pattern, create some vertical lines in gray. Warp (Edit > Transform > Warp) the lines into an organic shape around the lamp base.

Step 30

Add a Bevel and Emboss.

Step 31

Merge the Bevel and Emboss effect to the layer. Make this layer a clipping layer and set the layer’s Blending Mode to Overlay and its Opacity to 67%. We’ll go back and add some more detail later.

Step 32

To create the lampshade, start by making two layers named "Front Shade" and "Side Shade". Draw the lampshades on the respective layers using a different tint of the same color to tell them apart.

Step 33

Copy these two layers above their respective selves and add a stroke. Change each layer’s Fill to 0%. Adjust the size of the stroke as necessary for the side shade.

Step 34

On a new clipping layer to the original front shade layer, use a yellow color and a large brush with 0% hardness to add some color to the top of the shade. Set the Blending Mode to Color Dodge and the Opacity to 86%. Do the same for the other shade layer.

Step 35

On a new clipping layer, add a gradient (Make sure you chose Foreground to Transparent) of darker red color to the bottom of both shades.

Step 36

Create a New Layer called “Lamp Underside” and place it at the bottom of the “Lamp” group, draw in the rest of the lampshade with white. Give this layer a stroke.

Step 37

Now, we are going to create the picture frame. Create a New Group called “Picture Frame” and create a light-colored square.

Next, add the following Layer Styles.

Your picture frame should resemble the following:

Step 38

Copy this layer and Transform (Command/Ctrl + T) to a smaller square. Make the following adjustments to the Layer Styles (remove all others).

Step 39

Make a new copy of this layer and remove all Layer Styles except for “Inner Shadow.” Make the following changes to the Layer Style and set the layer’s Fill to 0%.

Step 40

Create a New Layer and add a light-tan square in the center of the picture frame. Add the following Layer Styles. When you’re done you can draw a leaf on a separate layer to complete the Picture.

Step 41

Now we’ll create the initial light from the lamp. Create a New Group called “Lighting” just above the “Wall” group. Use the Polygonal Lasso Tool to make a triangular selection of light. Fill this with a white-to-transparent gradient and set the layer’s Opacity to 58%. Now, use the Layer Styles panel to adjust the Blend If sliders as shown.

Step 42

Make two copies of this layer and Transform (Command/Ctrl + T) the shapes so the light appears more complex. Adjust the Opacity as necessary. When you’re done, make a copy of these and rotate them in the opposite direction.

Step 43

Now we are going to create the shadows casted by the end table. Create a New Group called “Shadows.” Inside this group create a New Layer and draw in some shadows as shown below. Use the Blur Tool to feather some of the edges. I’ve also added an additional shadow directly under the end table.

Step 44

The end table looks too bright. To darken, I’ve merged the “End Table” group to a new layer and adjusted the levels. I’ve also use the Burn tool on the base and top of the table.

Step 45

We are done with building the scene. The next section will start enhancing the lighting. The current scene will be used for the base lighting and we will add shadows on top of this. To start, create a New Group called “Dark Scene.” Add the following Adjustment Layers inside this group. This should make your image almost all black.

Step 46

Select the “Dark Scene” group and add a layer mask. Use the Marquee Tools, Brush Tool, and Blur Tool to add the light back into the scene. Using the Brush Tool with a 0% hardness and opacity of 20% or so, you can really start to add realistic variations in the lighting.

Step 47

On a New Layer, use a small brush to go back through the image and add highlights to the picture frame, table top, and lamp base. You can also add lowlights using the same technique.

Step 48

To add some extra lighting on the floor, I’ve created a new layer, added a white-to-transparent gradient to the floor and adjusted the Blend If and Opacity sliders, just like we did for the lights in the “Lighting” group.

Conclusion

To finish, you can add some details wherever you like. I’ve also add a vignette to enhance the light’s falloff.

  

“Call to Action” is a term commonly employed in the field of web design and user experience (UX). It refers those elements in a web page that plead for an action from the visitor. The most common demonstration of call to action in web pages appears in the form of clickable buttons. These clickable buttons perform predefined action when clicked.

Here is a roundup of more than 50 websites demonstrating effective call to action buttons that do their job quite smartly. We hope that this collection helps you getting some idea of unique and creative ways to make these calls to action in your own works.

Effective Call to Action Buttons

LiveResto
One of the best call to action buttons in this collection that uses a smart strategy to attract visitors’ attention by using images and text; and make a simple Try For Free button a powerful clickable call to action button.

Storenvy
A creatively designed round shape “Join Now” button that call visitors to join the website. The white outline surrounding the button puts emphasis on the action along with small icons and accompanying text.

InstantLoop
InstantLoop makes use of soothing color combinations along with their cute logo design. The call to action button clearly states what users can expect when they click the button.

Donor Tools
Smart use of a catchy line that says, “It takes about 20seconds” to give an idea that the process will not take too long. A clean and attractive “Get Started” call to action button.

WUFOO
Two simple but visually alluring call to action buttons placed right in the centre of the web page that make them very hard to miss. These buttons do not look blatant even when you look at the overall design.

Mobile cubix
Mobile cubix uses a round outline surrounding the “Read More” button and then leading it to the application that not only attracts visitors’ attention but also informs them what they can expect.

Crazyegg
Here the whole website is designed around the call to action button that proudly sits in the centre of the web page. The button is surrounded by sufficient white space that puts emphasis on the action to be called.

Ncover
Another great example of two call-to-action buttons on the homepage. The use of green color against the blue background stands out highlighting the more important action of the two to the user.

280 Slides
A really big call to action button making it impossible for the visitors to miss it. The button uses the same color as that of the background; making the over-sized button appear more pleasing to eyes and less obtrusive.

OH! Media
A large and beautifully colored call to action button that is placed in the centre of the webpage. Its positioning is making it stand out on the page and drawing attention directly to the call to action demanded.

13 Creative
An unconventional design that brings visitors’ attention to call to action button even though the surrounding elements are quite proportionally larger.

Commercial IQ
The large sized and prominently placed call to action button with an icon of a magnifying glass to add perspective to the purpose of the action. The text “Free to search” answers the question a user may have regarding any charges attached to the action.

Atebits
An eye catching website having loads of attention grabbing elements including logo and two smartly designed light color call to action buttons that come with brief description on what will happen when these buttons are clicked.

Remember the milk
The perfect example of an effective call to action button. This site focuses on the Sign Up Now button by positioning it in the center of the web page. The button is skillfully supported by the text to provide information.

Transmissions
Two centrally placed call to action buttons that entice visitors to either buy the product by clicking “Buy It” or download its free trail by clicking “Download Now”.

Coding Robots
The most interesting thing in these ‘call to action’ buttons is that Coding Robots highlights the Free Download button more than the Buy Now button which gives a subliminal message that visitors can try the free version first prior to buying the product.

BaseCamp
A neat and clean minimal web page accentuating the “See Plans and Pricing” button by pointing to it with an arrow. This lets visitors check out the pricing and plan details. Furthermore, the expected period of time in signing up gives the user a fast-based process.

BandThemer
BandThemer places a centrally attracted call to action button that directly leads the visitors to their pricing detail page so that they can make a buying decision.

Dailymile
A large centrally aligned call to action button that is hard to miss and attract visitors’ attention immediately. Simple and effective.

Mozilla Firefox
“Free Download” button of the Mozilla Firefox is a true revolution in terms of call-to-action graphics. Its large, unevenly shaped, vibrantly colored and detail oriented button has stirred a great deal of debate in the industry.

CakePHP
A large sized and irregularly shaped “Download” button has been created to attract a whole lot more visitors to download the program. The button suits the background of the website.

Litmus
A round shaped and beautifully colored call to action button that is surrounded by plenty of empty space. Although Litmus did not go overboard with its call-to-action button, it still lands on a decent looking button.

Carsonified
A unique approach to design an out of the ordinary call to action button that appeals to the design community.

planHQ
Two regularly sized and lightly colored call to action buttons that are surrounded by the blocks of white that accentuate them for the visitors’ attention.

Things
Again two different call to action buttons that discretely stand out well against the light blue and grey background. Both the buttons are identically shaped, sized and colored to keep their importance intact.

Livestream
A red colored “Livestream your Event” button significantly draws attention by standing out against the black background. Very smart usage of red color to attract potential customers. Furthermore, the button is placed in the top right corner that also urges users to click the button.

Dashboard
A brightly colored and relatively large in size call to action button that is loaded with information about the service being offered.

Kalculator
Koombea has elegantly used proper positioning, appropriate color, realistic size and conventional shape to make its call to action button shine.

Spotify
A moderately sized and grey colored call to action button against vivdly colored web background really stands out!

Dropbox
Very simple and self explanatory call to action buttons that perform their job quite tidily. Visitors will be under no misconception as to what they are supposed to do here. They can either watch the video by clicking “Watch a Video” or can download the product through the “Download Dropbox” button.

MailChimp
A large, red colored “Sign Up Free” button that is surrounded by plenty of free space to put emphasis on it. The proper positioning of this call to action button is making it stand out on the homepage.

Campaign Monitor
Campaign Monitor provides a set of neatly designed call to action buttons that present two potential user actions. Visitors can either go for the free trial or can check out its features first prior to downloading.

Fileshare HQ
A relatively large call to action button telling the visitors what they can expect when the button is clicked. Always a welcomed route.

Traffik CMS
A dark colored and large call to action button that is surrounded by the block of white color to highlight the button even more.

Mobile Web Design
Here, the call to action button is placed right in the top of the web page to immediately draw visitors’ attention. Apart from its prominent location, its large size and distinguishing color relating to surrounding elements really add more visual interest.

Tao Effect – Espionage
This website provides a set of three call to action buttons that provides users with three options: Download, Buy Now, or Upgrade. The color difference helps us distinguishing that the primary desired action here is to download the program which is followed by two similarly prioritized actions of Buy Now, or Upgrade.

Ekklesia 360
Icons are used to signify a sense of moving forward along with the high contrast color that has been used against the dark blue background.

Spinen
“Find Out More” button tells the users what to anticipate when they take action i.e. to find out more about the product when they click the button.

Codebase
Here a large call to action button tells users that they can try Codebase free of cost for 15 days. The use of high-contrast color and icon on the left is sufficient enough to draw the user’s attention.

Wake Interactive
The use of high-contrast color in this call to action button in relation to its adjacent elements makes it visually pop.

Icon Dock
A simply designed white colored “Browse Icon Library” button against a vividly colored background really stands out.

TasteBook
Here the call to action button uses an interesting icon and bold text to grab readers’ attention.

Elegant Themes
This set of call to action buttons demonstrate the power of correct use of color to stand out without conflicting with the adjacent design elements.

Sprouter
The use of light and refreshing colors for this big call to action button is sure to attract visitor’s attention. Using the word “Free” is a good option to inform visitors that there will be no charges for signing up.

APPTEMPLATES
This is a good example of putting appealing statements in the webpage to attract potential customers’ attention. This is what we call an effective call to action button.

Additional Resources and Articles

How to Create a Slick and Clean Button in Photoshop
A step by step guide on how to create large and noticeable call to action buttons using Photoshop.

Inspirational Buttons in web design – Pattern Tap
This Pattern Tap collection provides you some inspiration on good button designs.

10 techniques for an effective ‘call to action’
10 proven techniques by Paul Boag for designing call to action buttons that work.

Good Call-To-Action Buttons
UX Booth presents a perfect picture on what an effective call to action button is made up of.

Call to Action Buttons: Examples and Best Practices
A great collection by Jacob Gube to let you understand how can you create effective call to action buttons that actually entice your visitors to click them.

5 Tips For Creating An Effective Call To Action Button
Call to action buttons work best when you make it apparent that what you exactly want your users to do. Here are 5 useful tips that need to be kept in mind when designing a call to action button.

(rb)
]]> http://www.cssheaven.org/blog/50-effective-and-creative-call-to-action-buttons/feed/ 1 http://www.cssheaven.org/blog/create-light-painted-typography-from-scratch-in-photoshop-%e2%80%93-psd-premium-tutorial/?utm_source=rss&utm_medium=rss&utm_campaign=create-light-painted-typography-from-scratch-in-photoshop-%25e2%2580%2593-psd-premium-tutorial http://www.cssheaven.org/blog/create-light-painted-typography-from-scratch-in-photoshop-%e2%80%93-psd-premium-tutorial/#comments Thu, 21 Apr 2011 13:00:25 +0000 News Feeds http://psd.tutsplus.com/?p=13157 If you’ve ever attempted to write words using traditional light painting photography techniques you probably know how challenging it can be to create words that are easy to read. In this Psd Premium tutorial, author Alex Beltechi will demonstrate how you can create a similar look without a camera and tripod. This tutorial is available exclusively to Premium Members. If you are looking to take your typography skills to the next level then Log in or Join Now to get started!

Professional and Detailed Instructions Inside

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

Final Image

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!

Photoshop Basix, by Adobe Certified Expert and Instructor, Martin Perhiniak includes 25 short video tutorials, around 5 – 10 minutes in length that will teach you all the fundamentals of working with Photoshop. Today’s tutorial, Part 17: What Do I Need to Retouch Portraits? will explain a little about the Red-eye removal tool, Healing brushes, the Mixer Brush tool, and how to use them to retouch your photographs. Let’s get started!

Final Result Preview

Step 1

Create a new document, with the following details: 1024×1110 pixels. This is the first step in creating our layout.

Step 2

Add a simple, lighty-grey color on the background created. After this add a blue colored block, in the left side of the layout.It will be 1 of the 3 parts we will divide our theme into. Add a “Drop Shadow” effect with the following color: #0f4a68

Step 3

Add some dummy text in the header of the blue block, then add a white square box with the details indicated.

Step 4

Add an image in that square box you have recently created.

Step 5

Create a dark-blue small rectangle, then add a 1 px white line in the both ends of that rectangle. Add some more text in that rectangle, then add a simple white text called “Homepage” under that rectangle block.

Step 6

Now we must create 3 divisions, with the same styled text, and add 3 small, pixel-perfect icons.

Step 7

Add a dark-blue rectangle then add some white stroke to it (as shown in the image). Add the “You May Want to Contact Me” text with the same style and font. Add a light-blue square box and some contact details with the white-colored text.

Step 8

Add the same rectangle, with the same stroke effect, then add some dummy text under it.

Step 9

For the latest rectangle you have created, make a 1px line division, then add the “Talent” text and the number of points achieved (ex: 1234).

Step 10

Make a copy of the latest rectangle and divisions and just change the text typed from “Talent” to “Assets”.

Step 11

Make a small rectangle button and add a Gradient Overlay effect with the images stated on the image

Step 12

Now add the stroke effect, with the color shown on the screenshot.

Step 13

Copy that rectangle button created in the last 2 steps, then add some text for the both buttons.

Step 14

For now, to increase the look of the zone shown on the image, we add 2 small icons for the “Assets” and “Talent” section.

Step 15

Now you have to create another rectangle with the white stroke which is identical to the previous ones, just it doesn’t require any divisions. With a small white-colored font, add the basic copyright information.

Step 16

We have finished the 1/3 of our template, now, create a grey color which is about 3/5 of the whole space (as shown on image), then add the drop shadow effect.

Step 17

Continue by adding a small grey bar then add a “Gradient Overlay” with the colors indicated on the screenshot.

Step 18

Add dark grey-colored navigation and add some white dark shadow effect.

Step 19

For each element of the navigation, add some small pixel-perfect icons

Step 20

Create (by using the Pen Tool) a simple form which will be used for submitting text.

Step 21

Add some dummy grey text, the posting time, and add 2 small icons + text which is identical to the color of the icon placed.

Step 22

Create another, smaller bar, and add the followed “Drop Shadow” effect.

Step 23

Add some 1 pixel stroke, with the color indicated on the image.

Step 24

Add some grey text into the bar you’ve created last.

Step 25

Create a small dark-blue colored rectangle, and add some Inner Shadow effect.

Step 26

Continue by adding a “Gradient Overlay” effect, with the colors shown.

Step 27

Latest step in order to create the button – add the indicated stroke effect.

Step 28

Add some text, then add the indicated effect on the image.

Step 29

Near the button created last, make a blue-colored square box.

Step 30

Add some “Gradient Overlay” effect for the latest rectangle created.

Step 31

Finish it by adding some 1 pixel stroke effect.

Step 32

To increase the beauty of the grey rectangle, we have to add a small, but high-quality icon.

Step 33

Step 34

Now create a corner-rounded input field, with the details shown on the image, then add a vector “search” button.

Step 35

Add a square image which is in size about 75×75 pixels. Now add the name of the person who has posted news, and also the time when the data was posted. Under this information, add some dummy text.

Step 36

Now copy paste the area created in the previous step, by this, finishing the 2/3 part of our template.

Theme Overlook

Take a look at the theme progress so far

Step 37

Create a grey bar, located on the top of the “sidebar”. Add the “Google Ads” text, because under it, a banner will be placed.

Step 38

Make a gray overlay, then add the same photo, name, and information. Now add a blue rectangle with the “Inner Shadow” effect

Step 39

Add some “Gradient Overlay” effect for the last rectangle.

Step 40

Now make 3 divisions on the latest rectangle, and add three different icons, for each division created.

Step 41

Add a 1 pixel white colored line, which will be a division between elements. Under the div line, add some dummy text which is supposed to be data, information etc.

Step 42

Finish the template by making 2 more divisions (with text and icons), along the first div created.

This article was originally published on Psdtuts in September of 2008.

Introduction

This time I wrote this post as the job was being developed. This way you’re going to see how the order is developed, from the first sketches to the final result, I hope I won’t miss anything… What stress!

Also, notice this is not a Photoshop tutorial where I explain everything in depth (for that I already wrote a really detailed tutorial about mascot design in Photoshop). My goal here is to show the way I work. Below is the final design I did for Mafia Death.

About the Client

I want to keep your attention, so to give it a mysterious touch, I’ll just drop some info:

• Client: Mafia Death, an online game based on mafia stories.
• Order: Design of five characters and design of logotype. The characters must work separately and jointly.

Descriptions:

1. The Boss: The family’s chief, he only has to raise his eyebrow and you are a dead man. He is not very talkative, not specially strong physically… His better weapon is his brain.
2. The Bodyguard: He is the brawny of the team, the one who fixes the loose ends. His favorite sound? The crack of a breaking neck. If you notice him parking in front of your house, you have less than 10 minutes to make your last will.
3. The Latin-Lover: He is in charge to negotiate the important deals. A smart guy, attractive, athletic, with a fine taste for clothing and women, latin appearance and charm. He has a weakness for blondes and is quite independent. If you go out at night with him, tell your parents you won’t arrive home before noon.
4. The Girl: Only her sensuality matches her wickedness, she is cold and calculating. She is a precision weapon. She succeeds both between men and women. The last one who mentioned her affinity with Angelina Jolie is dead.
5. The little mad guy: His slogan is: "Surviving is irrelevant, what really matters is how many ones you can annihilate". His mind is so insane that he is only useful in desperate missions. Joe Pesci fan. One more important thing: Don’t ask about his scar.

Summary

1. Sketching the First Three Characters
2. Sketches of the Rest of the Team
3. Scene Composition
4. Cleaning the Sketches
5. Inking the Characters
6. Coloring The Boss
7. Coloring The Latin-Lover and The girl
8. Coloring The Little Mad Guy and The Bodyguard
9. Final Illustration
10. Closing Words

Day 1: Sketching the First Three Characters

I love Mafia films, so I didn’t need to look for any references and we directly went for the sketches. Mi idea was to find a mid point between the elegance of “The Godfather” and the modernity and daily look of “The Sopranos”.

I asked my friend Miguel Ruiz to help me with the sketches, I sent him descriptions for each character and the image below is what he sent me back.

The first thing that hits you in the eye is the style, it is not the usual SOSFactory style. But don’t worry, because in the end everything will match. What really matters now is the character´s attitude, their pose, facial expression, the clothing… that each character transmits what it must transmit (have a look to the descriptions at the beginning of this post):

1. The Boss: I think this one is great, it is exactly what we need. He has a relaxed pose but transmits a lot of strength by his look. His legs look a bit short to me and his waist is a bit wide, but it is an excellent starting point.
2. The Bodyguard: I think this character is quite good too. I’d like to put all the characters on a horizontal line so I’ll have to modify a bit his right leg, which is a bit short. The hands pose doesn’t satisfy me, and I have to work a bit on the left arm musculature too. The face looks perfect to me.
3. The Latin-Lover: This character is going to need quite a lot of work. I like the pose but it’s too lateral, there is very little space left for the chest, so it won’t look good. We don’t have place for the gun either, so we’ll put him in a ¾ pose, a little more frontal. I don’t like the feet pose at all, we’ll put them in a 90 degrees angle. The face has to be retouched too, I need him to be more attractive.

Summary of the day: I like the sketches, they have to be improved technically, but they transmit the proper attitudes, specially the first two ones. The third one has to be almost completely redone.

See you tomorrow!!!!!!!

Day 2: Sketches of the Rest of the Team

1. The Girl: From this character I like the facial expression, but she looks too classical. I’d rather something more modern and sensual, I think we’ll have to make many changes.
2. “The little Mad Guy”: I like his attitude, but technically it’s quite improvable. The hand of the gun is too short; the hand that holds the cigar is too close to the body, we’ll separate it to make the pose clearer; the waist is too wide, it has to be slimmed a bit. He looks too young, I need an older character.

Summary of the day: We already have 5 character´s sketched, the first 2 ones are good, for the rest I’ll make many changes. If I had time I would have made the sketches myself, but because of the circumstances (I’m really busy) the investment was worth the effort.

Tomorrow I’ll make the scene composition. Regards!!

Day 3: Scene Composition

We already have all the team members, now we have to line them up looking for a good composition. I think the central character should be the Boss, the Bodyguard on his right (his right hand man), on his left the negotiator (completing the trio of important characters), by his side will be the girl (we add a bit of sexual tension) and the shortish guy on the opposite side to balance the composition.

Summary of the day: We already have the scene composition, together they look very promising, much better than I expected. From now on I will retouch each character.

Let’s have fun!

Day 4: Cleaning the Sketches

In this step, I try to fix the stuff I commented on from Day 2, I use my Wacom Cintiq and Photoshop, from this point everything I do is digital. I use old sketches, references from other designs or photos, I draw once and again until everything is well defined. Under each drawing you can find the corrections we talked about in Day 2.

The Boss: I made his legs longer, I reduced the waist a bit, I added some details to his suit, I defined the volumes a bit and I retouched the face.

The Bodyguard: I mainly worked on the torso. Notice that I lowered his arms to make his face clearer. I retouched his left arm and I corrected a bit the tallness of his legs.

The Latin-Lover: This character is almost completely redone. I made a little more frontal pose and I lowered his arms to gain some space in the chest area. I drew his legs in a smarter pose, and I gave him a more attractive face.

The Girl: From this character I only kept the facial expression. Luckily I had a sketch I hadn’t used before, and it fit quite well. Now she’s much more sensual and has a more modern look. I used Angelina Jolie as a reference.

The Little Mad Guy: I also changed this character almost completely. The arm that holds the gun was too short so I separated it a bit from the body. I separated the gun with the cigar too, this way the silhouette is much clearer. I stylized the pose with a narrower waist and separating his legs (a much more active pose), I added a clearer scar and a more pronounced chin.

Summary of the day: The first two characters were easy to correct, from the third I re-drew them… Everything is going as I expected.

Let’s continue tomorrow

Day 5: Inking the Characters

We already have all the characters ready, now it’s time clean the lineart. I entrusted this to my buddy Carlos Gomez, he’s very clean at drawing. He draws everything with pencil and then I ink his lines and I retouch them until everything is perfect, you can see the progress below.

Click the image below to see a bigger "step by step" image.

I already explained a lot of things about digital drawing in other tutorials, so I wont repeat it again. As you can see in this video there is no secret tips, just practice.

Summary of the day: After a week of vacation in Berlin, I’m back to work. The drawings are ready for the coloring, this is gonna be really fun.

Regards!!!

Day 6: Coloring The Boss

As you surely know, the color is my speciality, it’s what I like best and the part I spend more time at. I usually color with a cartoon style, with very bright colors, but in this case I think that more moderated colors will fit better, funny but mysterious, with very contrasted dark tones.

I made a first version with cold colors, it looks OK, but I think that with warmer colors, and more “worn out” tones, it matches better with the theme. Don’t think I colored it all again from the beginning, I used the Photoshop correction tool (Command + B) and I added a bit of Cyan and Green. Easy, isn’t it?

I already did a tutorial about digital color, so I wont repeat everything again, instead you can see how I work in this video tutorial below.

Summary of the day: after many hours of testing, the color looks great, the challenge is now to compound the scene to make the 5 characters work as a whole.

Tomorrow, more!!

Day 7: Coloring the Latin-Lover and the Girl

Now that I have defined the color palette I can work faster. The characters still look good to me separately, but too laden when I put them together. That’s because I decided to soften a bit the colors, here goes the second character – ready!

And here we have the girl. She looks great but we have a problem. The most eye-catching color range is the one on the right, but the more coherent with the rest of the characters is the one on the left. My choice would be to sacrifice the character for the sake of the illustration, but the client doesn’t agree… We’ll see what happens.

Summary of the day: We have already finished the most difficult part, to choose the color ranges, so I’m going quite fast and I’m feeling comfortable. I expect that as I continue working the color will be improved.

Let’s continue tomorrow!!!

Day 8: Coloring the Little Mad Guy and the Bodyguard

Alright mates, I finally finished all the characters

I’m specially proud of the last two ones, they are exactly as I imagined them at first. Unfortunately, I only achieved this from the third character (although the first ones are not bad at all). Notice that these characters look good separately, but because of the softer color and a less contrasted source of light, they are more harmonic and will look better when we compose the scene.

The worst part of this character was the musculature… Ufff!!! But it’s finally looking good. I also corrected the position of the hands.

Summary of the day: The last two characters were beautiful, quick and fun to make, I finally got it. After five characters with this color style, I think I can handle it, this will be very useful for me in the future.

Day 9: Final Illustration

At last, the great day, after many hours of work I can say the illustration is finished. I made some color corrections to unify each character. Click the image below to enlarge.

Summary of the day: As I expected, I had to make some adjustments to join the characters. I’m quite happy with the result and the client too. So another good piece for the SOSFactory portfolio.

Closing Words

Well mates, I hope it was useful and fun to read, I did my best. If you like this stuff I’m sure Psdtuts+ will invest more to have me writing for you again, so push the comments hard. Of course, if you have any questions I will answer with pleasure!

Thanks to David from Mafia Death for giving me permission to share this info, please give him some love and sign up to play his game.

Sergio Ordóñez on the Web: SOSFactory is my portfolio, SOSNewbie is my blog, sergitosuanez is my username on Deviantart, and 00SOSNewbie00 is my username on YouTube.

Tutorial Assets

The following assets were used during the production of this tutorial.

• Pages Stripes Pattern file

Step 1

Fire up Photoshop and create a new document. Make it 400px wide and 350px high.

Step 2

Now take the Paint Bucket Tool (G) and set your Foreground color to a neutral gray #7a7a7a. Then using that Paint Bucket Tool (G) fill the canvas with your neutral gray. Then, name your gray layer "Background". Make a new layer, and then take the Rectangle Tool (U), and set it to Shape Layers.

Take that Rectangle too, and setting your Foreground color to #e7c681 draw a rectangle on the layer you just created.

Step 3

Because you used the Shape Layers setting, you will notice that, when looking in your Layers Palette, the normal layer you created at the beginning of the previous step has been transformed into a Shape Layer, aka Photoshop’s kind of vector! You will also notice a thin gray border around your rectangle. Now THAT is awesome, and you know why? Because now we can transform the shape without losing any quality! So, let’s do just that. Press Command/Ctrl + T to transform, and then holding down the Command/Ctrl key drag the corners as to create a shape similar to this.

Awesome! Now make a new layer, and taking the Rectangle Tool (U) just as before, make a new rectangle shape, only this time when you transform it, make it similar to the shape on the right side.

Step 4

Now it’s time to name our shapes layers, we don’t want them to have an identity crisis do we? So, go to your layers palette and re-name the first rectangle’s layer to "Cover 1" (that’s the left-most rectangle one). Then re-name the layer hosting the other rectangle to "Cover 2" (that’s the right-most one). Good. Once we have them named, let’s give them some layer styles! Either double-click on one of the cover layers (in the layers palette of course) or go to Layer > Layer Style > Blending Options and give it these styles.

Now click OK, to confirm your settings. Next, right-click on the Cover 1 layer (that’s the one we just added Layer Styles to) and choose "Copy layer Style". Then right-click on the Cover 2 layer in the layers palette, and choose, well of course, "Paste Layer Style"! Now we have a pair of gold book covers.

Step 5

Now there’s only one small problem, we want the covers to be green-ish, not gold-ish. But we can fix it quite easily: Go to your Layers Palette, and you’ll see that each layer has a tiny thumbnail, true? Yes! Now hold down Command/Ctrl tab and click on one of those thumbnails and magic happens! You obtain a selection of that layer! Okay, from now on, this will be referred to as "obtain the selection of layer X/Y/Z," okay? To have more magic happen, you can hold down Command/Ctrl + Shift + click on the layer’s thumbnail, to obtain a complete selection of multiple layers. Try it! Hold down Command/Ctrl + Shift keys + click on the thumbnails of "Cover 1" and "Cover 2" respectively, and you’ll see that you get a selection like this.

Okay, now you should know we DO have an actual use for this selection, namely this. Go to your Layers Palette, and look at is bottom. Among other icons you’ll notice, you’ll see one that looks like a Yin/Yang symbol, a sort of circle with one white half and one black half, true? Well, that is the "Create new fill or adjustment layer" icon! Okay, make sure you still have that selection we made above, and click on that icon. Choose "Hue/Saturation". And choose these settings.

Good, now we’ll need that selection again you know? Command/Ctrl + click on the thumbnail of the Hue/Saturation layer we just created and voila, selection active ok, now go and pay another visit to the "Insert new fill or adjustment layer" icon. Only this time, choose "Color Balance" from the list. Give it these settings: Preserve Luminosity: Checked! Midtones: +21/0/-12. Highlights: +3/0/0. Shadows: +11/-10/-18 Make sure your Color Balance layer is above the Hue/Saturation one, okay? Otherwise you’ll start getting funky color shades. Obtain the selection of the covers again, and go to Hue/Saturation again and choose this.

Okay! Now you should be looking at something like, this.

Step 6

Awesome work! Now, if you want, you can use Photoshop’s awesome Groups feature to organize a bit your layers so, go to the bottom of your Layers Palette and right next to our familiar Yin/Yang circle you’ll see a folder-like icon, yea? Okay, click that and you’ll create a new Group!  Move all of the layers you made until now (except the Background one) in this group, (drag the layer onto the group to include it in) and re-name the group to "Covers". Okay, the next part will be a bit difficult to explain, so let’s take it slow okay? Make a new layer above your Covers group, and name it "Corner 1". Now take the Polygonal Lasso Tool (L) and make a triangular shaped selection around the bottom-left corner of Cover 1.

Set your Foreground color to #e7c681 and using the Paint Bucket Tool (G), fill that selection on your "Corner 1" layer. Then press Command/Ctrl + D to deselect. Sweet, now remember that layer style we copied earlier from the "Cover 1" layer to our "Cover 2" one? Paste the same layer style to the "Corner 1" layer. You should get something like this.

Okay, now we’ll do the same thing with the other 3 corners, okay? Make a new layer, name it "Corner 2", make a triangular selection, etc, fill with color, deselect, paste layer style, okay, do this for the remaining 3 corners, and then you should have: 4 layers, one above the other, named "Corner1", "Corner2", "Corner 3" and "Corner 4", each with a layer style pasted to it and overall looking somewhat like this.

Step 7

Only now, our corners look SO faded and spiritless. Let’s make them more lively then! Go to your layers palette, and holding down Command/Ctrl, click on the 4 Corners layers, action which will make all 4 of them a dark blue color, and then press Command/Ctrl+E to merge them. Now you have a single layer, which has all the 4 corners on it, and most important, has no layer styles anymore. ok, let’s see. Obtain a selection of your corners layer (Ctrl/Cmd + click on its layer thumbnail) and visit the Ying/Yang circle from before, choose "Photo Filter" From it, choose "Warming Filter 81", 63% density. Click OK and then press Command/Ctrl + E to merge the Photo Filter with the corners layer, so that you have just one layer. Then, take the Burn Tool (O), and set it to a soft, round brush of about 50px in size, Range: Shadows, Exposure: 11%, Airbrush NOT checked. Brush a little (not very much, mind the exposure) so that you get a nice, golden tone. Then take the Dodge Tool (O) and set it to a round, soft brush of about 50px size as well, Range: Highlights, Exposure: 10%, Airbrush NOT checked, and brush a bit to give your corners some highlights, okay? This is what you should get in the end, or something like this.

Step 8

Okay, we’re done with them, name the layer to "Gold Corners", and ta-daa, you’re done with them! Okay now we’ll have to take it slow again, because the next couple of steps are very much intuition-based. Remember those Cover1 & 2 layers? Good! Now go to your Group and duplicate the "Cover 1" shape layer, and move it upwards, outside of your Group. Now, your Layers palette should look something like this.

Ok, now right-click on the "Cover 1 copy" layer and choose "Clear Layer Style". This will leave us with the plain yellowish colored rectangle. Then press Command/Ctrl + T to resize it into something like this.

Take the Direct Selection Tool (A) and click with it anywhere on the surface of the yellowish rectangle. You are doing this to obtain the gray border around it. Next, click exactly ON that gray border, so that you have its Anchor Points visible, like this (you might have to zoom in to do this).

Step 9

Once you have the Anchor Points visible, take the Convert Point Tool (P) and clicking on the bottom-most anchor point drag a little bit, so that the handles become visible. Drag the handles so that you have this.

Ok, that will be our page’s base, so let’s rename it to "Pages Base" okay? Next, set your Foreground color to #d6bb8e and taking the Line Tool (also set to Shape Layers), set its weight to 20px. Create a new layer and on it drag to create a line like so.

Step 10

Okay, let’s finish this step and then we take a break for some chips & coke? Good, let’s take the Direct Selection Tool (A) again and doing exactly as in the previous step, drag the corner anchor points (zoom in a bit for that) so that you have something like this.

Then, taking the Convert Point Tool like before, curve the bottom & top sides a bit like this.

Step 11

Now it’s a good time to take a break: a hot bubble bath or something. Okay, back to work soldier! Ok, we’re at step 11 Let us add a texture of real pages to our latest shape, huh? Remember that pattern file from the beginning of the tutorial (in the resources section)? Download it, now it is needed. Make a new layer above all your others, and take the Paint Bucket Tool, set it to Fill with Pattern, and choose that particular pattern from the list and, well, fill. Press Command/Ctrl + T to transform the layer. Rotate it so that its lines are parallel to the edges of the Cover 1, and resize it to be about 50% of the original size like so.

Obtain a selection of the latest shape layer we made and on your pattern layer go to Select > Inverse. Then press Delete. Name this pattern-ed layer "Pages Black" for now. It won’t live long though. But for now name it like this. Obtain a selection of your Pages Black layer. Then create a new layer and set your Foreground color to #fdf8ea. Using the Paint Bucket Tool which you make sure to set to Fill with Foreground Color again Fill with the new foreground color that selection. On the newly created layer, of course! Now take the Move Tool (V) and move the whiter page texture a little bit to the left, so that it looks something like this.

Step 12

Name this layer to "Pages White". Next, we have to take care of the "Light Side" shape layer a bit. Right-click on it and choose "Rasterize Layer". Take the Burn Tool same settings as before, and burn it a little, especially around the "bottom" part. The use the same Dodge Tool as before to lighten the “top" part, so that it creates a realistic lighting.

Now merge the two lines layers with the "Light Side" layer, so that you make them into one. Make sure this newly-obtained layer’s name is "Light Side". Right now you layers palette should look like this.

To make it even better, take the Eraser Tool (E) and set it to a hard, round brush of about 1-2px in size, and start erasing slightly at the top of the "Light Side", like this.

Step 13

Let’s make the bottom side or the pages now. Take the Line Tool again with exactly the same settings as before, only difference being that you should now set the Foreground color to #9c8d6e, and draw a like above all your other layers, like so.

Next, use the same Direct Selection Tool (A) and Convert Point Tool as before to mold our shape into a book side, like this.

Step 14

Time to give it a similar pages texture!  Make a new layer above your others and taking the Paint Bucket Tool (G), set it to Fill with pattern and select the striped pattern as before, and fill that new layer with it. Go next to Edit > Transform > Rotate 90 degrees clockwise. As before, press Command/Ctrl + T to transform, and resize it to about 50% of the original size. Next, go to Edit > Transform > Warp, and make sure the lines are again somewhat parallel, like so.

Obtain a selection of the bottom side shape layer (the one we just created before) and then go to Select > Inverse, and press Delete. Next, make a new layer above it and do just like before: obtain a selection of it (of the lines pattern of course) and then on the newly made layer fill the selection with #a59d86 and, you know the drill. Move the lighter color a bit downwards, so that you get something like this.

Rasterize the shape layer as in the previous step, and using the burn & dodge tools we are already familiar with, give it a bit of good realistic lighting. You can then merge the pages pattern layer(s) with the rasterized shape one, and you can also name the layer "Pages Dark Side", Like so.

Step 15

Okay but only one side is no good, so let’s work on the second side as well huh? Now make sure your Foreground color is set to #9c8d6e and taking the Line Tool (U) (of course don’t forget to set it to Shape Layers) like before, with a weight of 20px, draw a new line, on the right side this time, like so.

Nice, now, as you did in the previous steps, take the Convert Point Tool and giving your anchor points their controls and then drag them something like this.

Okay, now make a new layer above the Line shape layer we created a few seconds ago, and fill it with the Pages pattern, yes, like before. Now resize, rotate, crop then go to Edit > Transform > Warp and give it a shape like so.

Step 16

Ok, now confirm the Warp transformation and right-click on the pattern layer > Create Clipping Mask. Now create a new layer and move it in-between the Shape Layer and the dark stripes layer, okay now our shape layer should have two clipping masks right? Sweet! Now set your Foreground color to #a59d86 and Command/Ctrl + click on the dark stripes layer’s thumbnail in the Layers Palette to obtain its selection. Next, use the Paint Bucket Tool (G) to fill this selection with the #a59d86 foreground color, on the last-created layer of course, like you did in the previous step. Then move this lighter stripes layer a bit down, like before in Step 14.

Now right-click on the shape layer, choose Rasterize Shape Layer, then use the Burn Tool like in the previous steps, setting your Burn Tool to a soft, round brush, about 50px in size, Range: Shadows, Exposure: 5% and Airbrush: ON. If needed, you can also use the Sponge Tool (O) setting it to Desaturate mode, Flow: 27%, again a soft, round brush. Also, if needed you can use the Levels and/or the Hue/Saturation adjustment to lower its Saturation (this helps give the shadow effect, since in real life when an object is in the shade its colors are less saturated, just think of that) Okay, well now you can merge the clipping masks with their "master" layer. And as a final result of this step, we now have this: 

Merge the resulting layer with the "Pages Dark Side" one. Now your Layers Palette should look something like this.

Step 17

Good! Now as a final touch, zoom in to around 400-500% and take the Eraser Tool (E), set it to a hard, round brush, size about 1-2px and erase slightly around the edge of the pages. Here is a comparison shot (I used pink background color to obtain contrast, for better visibility).

Now let’s work on the shadow. Remember that "Covers" group we made back in Step 5? Time to merge it. So, merge the whole group into one layer. Then create a new layer above the merged "Covers" one and right-click on it, choose Create Clipping Mask. Command/Ctrl + click on the thumbnails of the Gold Corners layer to obtain its selection like so.

Then on the new layer we just created fill this selection with the Paint Bucket Tool (G) using the #8c7330 color. After this, set the layer to Multiply blending mode, and then you can deselect. Ok, now we will take the Move Tool (V) and zooming in 2-300% we will press Command/Ctrl + T to transform it and resize it bit squeezing a bit from the 4 corners, then give the thingy a Filter > Blur > Gaussian Blur of about 0.2, like so.

Okay, create a new layer and make sure it is placed just above the "Gold Corner" layer. Set it to Multiply and then Command/Ctrl + click on the layer thumbnails of the Pages Dark Side & Light Side layers in the Layers Palette to obtain their selection, like this.

Fill this selection with the #8c7330 color we used before and then deselect. Using the Move Tool (V), move the "shadow" a bit down and a bit to the left, then blur it again with a 0.2-0.3 Gaussian Blur, like this.

Step 18

Now let’s take care of the pages. Take the Pen Tool (P) and let’s set it to Shape Layers, and set our Foreground color to #efd5a9. Then on a new layer above all your others make the shape of the pages.

Name this layer "Base Pages" for now. Now give your Shape Layer these layer styles.

Next, set your Foreground color to #b48455 and your background one to #efd5a9 and create a new layer above the "Base Pages" one, and then right-click on it to make it a Clipping Mask to the Base Pages, and afterwards take the Gradient Tool (G) and setting it to Foreground to Background and Reflected Gradient, drag from the middle like so.

Step 19

Now we’ll work on the flipping pages. New layer, above all your others. Set Foreground color to #cc9c6a and taking the Pen Tool (P) with same settings as before, draw the shape of the first flipped page.

Next, name this layer "Flip Page Left" and right-click on the "Base Pages" layer, choose Copy Layer Style, then go back to your "Flip Page Left" one and right-click > Paste Layer Style. Then create a new layer above it and transform this new layer into a Clipping Mask to the "Flip Page Left" one, and set your Foreground color to #f5e0b2 and you Background one to #cea06e and taking the Gradient Layer (G) set it to Linear Gradient, Foreground to Background and drag like so.

Good so far, now set your Foreground color to #fef9ed and taking the Gradient Tool again but this time set to Foreground-to-Transparent and Reflected Gradient, drag like so, to give your page a highlight.

Good, now your image should be looking somewhat like this.

Step 20

We’ll follow the same process for the Flip Page Right, and since it’s a repeat job I’ll just show the process through a series of images. Only specification is that we will make the "Flip Page Right" layer(s) under the "Flip Page Left" ones.

Step 21

Okay. Now let’s look at what we have until now. Well there’s something amiss, the pages aren’t casting any shadows now are they? That is an easy fix. Just go ahead and look at the "Pages Base" layer in the Layers Palette, see it?

Currently it has a clipping mask with a gradient on it, so let’s just create a new layer and move it to be a second clipping mask to the "Pages Base" shape layer, and make sure it is placed just above the gradient, like so.

Set this layer to Multiply mode, then set your Foreground color to #815130 and obtaining a selection of the two Flip Pages, fill this selection on the newly-made layer with the #815130 Foreground color. Next, transform it to get a result similar to this.

Now lower the layer’s Fill to about 80% or whatever number you think looks good. We’re not done with this yet, we need to Blur it but wait! Not the Filter blur, that’ll look weird you know, because the closer an object is to a surface, the more sharp its shadow is, right? And the further it is, the more blurred is its shadow! So let’s take the Blur Tool (R) and set it to a soft, round brush of about 50px in size, Strength: about 30% and blur the edges of the shadow, remembering what we just talked above. So that in the end you get a result similar to this.

One more thing for our shadow to be perfect! Take the Dodge & Burn tools and set them to: Dodge: soft round brush, about 50px in size, Range: Highlights, Exposure: 9% and Airbrush: Checked. Burn: Soft round brush of some 50px Range: Shadows Exposure: 5% Airbrush: Checked, Let’s Dodge a bit around the outer corners, and burn around the place where the "pages" meet, so that the outer edges get a reddish tint.

Step 22

Perfect! Sweet, now our icon is starting to look more like a book and less like a donkey, no offense Mr. Shrek-friend Donkey! Now let’s take care of the shadow effect which we SHOULD have around the place that the Flip Pages bind together okay? In order to do that we must have both our Flip Page layers in one single layer (well why, duh, because then we can use a nice Clipping mask which will spare us a lot of deleting trouble) So. Let’s look in the Layers Palette and Command/Ctrl + Click on the 4 Flip-Pages related layers (two shape layers and two clipping masks gradient layers) so that they are all 4 in a darker blue color like this.

Now press Command/Ctrl + E to merge them all into one. Re-name this new layer to "Flip Pages". Oh, one tiny thing, in the process of doing the merging, it is possible that your layer will become a Clipping Mask to the "Pages Base" layer, so just right-click on it and choose Release Clipping Mask. Now the Layers Palette should look like so.

Okay, so now what we’ll do it create a new layer above the newly-merged "Flip Pages" and convert it into a Clipping Mask for the last, then set it to Multiply mode. Set your Foreground color to #815130 and taking the Gradient Tool (G) set to Foreground to Transparent and Reflected Gradient drag like so.

Go to Filter > Blur > Gaussian Blur and give your shadow a 8,5 – 8,7 Gaussian Blur, so that you get a result like so.

Step 23

Well all good and nice but the shadow needs to be deeper a bit. So let’s press Command/Ctrl + E to merge this first shadow layer with the "Flip Pages" one and then let’s repeat the process of creating a new layer & transforming it into a Clipping Mask to the "Flip Pages" one like we did in the previous step. Make sure your layer is set to Multiply like before, then set your Foreground color to #49260f and with the same Gradient Tool as before drag in a way similar to before, only notice this time we drag for a smaller distance, like so.

Now lower the layer’s Opacity to about 60% Good, now create a new layer and move it in-between the "Flip Pages" one and the shadow one (so now the Flip Pages has 2 clipping masks) and taking the Foreground color of #815130 drag with the Gradient Tool as before. Set the layer to Multiply and lower its Fill to some 20% Now feel free to merge the Flip Pages layer with its two shadow-y clipping masks and you should get a result like this.

Step 24

Nice. We will now take care of the spine, after which we’ll add the mandatory text on the pages. Okay first thing’s first, spine time. Set your Foreground color to #7e7633 and take the Line Tool (U) and setting it to Fill Pixels mode and a Weight of 3px, drag to create a sort of, inverted V, like so (I selected it in the image below so that it’ll be more visible for you).

Okay, now give the layer these styles.

Name this layer "Spine V". So now our picture should look like this.

Step 25

Okay now let’s make the second part of the spine (the cover one you know?) Set your Foreground color to #544a15 and taking the Pen Tool set to Shape Layers, create a new layer under all your other book-related ones (so that this new layer will be the first one above the Background layer). Draw a shape like this.

Name the layer "Spine Base". Then, make a new layer above it and transform this new layer into a Clipping Mask. Now, set your Foreground color to #221500 and your Background one to #372705 and take up the lovely Gradient Tool (G). Set it to Foreground to Transparent and Linear Gradient. Then drag to create a shadow effect, like so.

Now, press X to reverse your Foreground color with your Background one (so now #ff8e72 is your Foreground color now). Create a new layer and move it in-between the gradient one we just made and the "Spine Base" shape layer. Take the Gradient Tool again, but this time set it to Foreground-to-Background and Reflected Gradient. Drag to create a left-hand side shadow effect on the Base Spine, like so.

And now give your "Spine Base" shape layer this layer style.

Now merge the three "Spine Base"-related layers (one "sire" shape layer, one dark gradient at the tip of the inverted V and one a lighted left-hand side shadow). To do this, Command/Ctrl + click on the 3 layers in the Layers Palette so that they are all 3 in a dark blue color then press Command/Ctrl + E to merge them. After you’ve merged, re-name the layer to "Spine Base" and take the Dodge tool (you can leave the same settings we used in one of the previous steps, but lower the brush size to about 20px) and gently brush around the right-hand side of the spine, like so.

Step 26

Ah, the moment we all have been waiting for. Text-adding time! Okay let’s start with the "Base Pages" first. Currently (unless you merged anything) your "Base Pages" shape layer should have 2 clipping masks. Like so.

See the shadow-y one? The topmost one I mean, the one I noted with "1" in the picture above? Okay, make a new layer and move the new layer in-between the shadow-y one and the gradient one (so, in-between 1 & 2). Then take the Pen Tool, set it to Paths mode and drag to crate a path like so.

Then grab the Text Tool (T) and choose a nice font (I used here Lainie Day SH). Set your Foreground color to #a17852 and start typing. After you have finished typing, set the layer to Multiply mode and lower its Opacity to about 85% Here’s my result of path-typing.

Okay, repeat the process once more to add a second path-text layer, move it upwards so only its bottom edges are visible.

Step 27

Okay now we’ll take care of the text on the Flip Pages. Make a new layer and move it just above the "Flip Pages" one. Take the Pen Tool as before and make a Path that follows the curvature of the page and type.

Then re-do this step over and over and over again so that you fill the two pages with text! Now for file-size economy purposes, Command/Ctrl + click on all these text layers to have them in a  dark blue color in the layers palette let’s merge them all in one layer. It’s looking much better now. Re-set the layer mode to Multiply, re-name the layer to "Text on Flip Pages" and you’re good to go.

Step 28

Okay, just one more thing on the book itself to take care of, and that is the bookmark. After we finish dealing with that bugger of a Bookmark, we’ll create the pen and well that’ll be it. So bookmark time. Create a new layer and move it just under the "Flip Pages" one, like so.

Take the Pen Tool set on Shape Layers, set your Foreground color to #c52114 and draw the shape of the Bookmark, like this.

Okay now name this layer "Bookmark". Create a new layer above it and transform the new one into a clipping mask to the Bookmark layer. Set your Foreground color to #480b04 and your Background one to #fa6e5c and taking your Gradient Tool (G) set it to Foreground to Transparent and Linear Gradient, and drag to create a shadow around the top side of the bookmark, as if trying to simulate the flip-page’s shadow, and then drag again but this time from bottom upwards to create the shadow effect for the "swallow’s tail" tip of the bookmark. Like this: (see the two shadows and the lighter-colored red between them? Try to get this effect).

Press the X key to reverse your working colors. Now take the Gradient Tool again but this time set it to Reflected Gradient, and still Foreground to Transparent. Drag a small distance to create a highlight effect on the Bookmark, like so.

Now it’s safe to Command/Ctrl + click on the Bookmark shape layer and its clipping mask and then press Command/Ctrl+E to merge them. You might have to re-name the layer to "Bookmark" again and perhaps use "Release Clipping Mask". Now Command/Ctrl + click on the Bookmark layer’s thumbnail in the Layers Palette to obtain its selection. Then create a new layer and move it under the Bookmark one, name it "Shadow Bookmark". Set the layer to Multiply mode and lower its Opacity to about 80%. Set your Foreground color to #480b04 and fill the selection with the foreground color, then you can deselect. And go to Filter > Blur > Gaussian Blur of about 2,3. Okay, and now, magic! We’re done with the book itself! Congratulations! This is what it should look like, or close.

Step 29

Pen time! Set your Foreground color to #d2a756 and take up the Pen Tool, which you need to set to Shape Layers of course. Create a new layer on top of all your others. With the Pen Tool, create a shape like this.

Good, now give it this layer style.

Okay, your result now should be something like this.

Step 30

Name the Shape Layer we just finished adding a gradient to "Pen Body Gold". Take the Pen Tool again and on a new layer above the "Pen Body Gold" and make this shape.

Next, give it this layer style.

Name it "Pen Body Silver", and now make a new layer above all your others. Then taking the Pen Tool (P) again draw this ringlet shape.

And give it these layer styles.

Step 31

Okay, now your image should look like so.

Name the ringlet layer ”Ringlet". Duplicate now that "Ringlet" layer, and move the copy upwards, like so.

Now only a little more distance to go!  Let’s do the tip of the pen. Make a new layer and move it right under the "Pen Body Silver" one. Taking the Pen Tool again, draw this shape.

Okay, now name this layer "Pen Tip" and then go visit the "Pen Body Gold" layer, right-click on it and choose Copy Layer Style. Return to the "Pen Tip" one and right-click on it, choose Paste Layer Style. Then get into the Pen Tip’s Blending Styles options, and go to Gradient Overlay. Increase its Gradient’s Scale to 31, like so.

Step 32

Make a new layer above the "Pen Tip" layer, and take the Ellipse Tool. Set your Foreground color to #593f11 and your Ellipse Tool to the Fill Pixels mode.  Draw an ellipse like so.

Okay now take the Line Tool (U) and set it to Fill Pixels mode, and weight to 1px and draw a line like so.

Name your layer "Details Pen Tip". Okay, good! Now our image should look like so.

Step 33

Okay, now let’s take care of the shadow which the pen body casts on the tip. Command/Ctrl + click on the "Pen Tip" and the "Details Pen Tip" layers in the layers palette and get them in a dark blue color, then merge them together. Re-name the layer to "Pen Tip" and then make a new layer above it. Convert this newly-created layer to a clipping mask for our "Pen Tip" one, and set it to Multiply mode. Set your Foreground color to #6a5428 and take up the Brush Tool. Set it to a hard, round, 6-7px in size brush and drag once to create a shadow, like so.

Okay, now lower the layer’s Opacity as you think best, here’s what I got.

Step 34

Now it’s safe to merge the shadow-y layer with the Pen Tip one. One more thing left to do: you see, our pen is currently a ghost! It doesn’t have a shadow! So let’s bring it back to life, we can’t write with a ghost pen heh? Okay, create a new layer under all your PEN-RELATED layers and set it to Multiply mode. Set your Foreground color to #663316 and then Command/Ctrl + click on the thumbnails of all the pen-related layers to obtain a selection of the total pen, like so.

Okay, now with the Paint Bucket Tool (G) fill this selection with the foreground color. Deselect. Press Command/Ctrl + T to transform it and rotate it like so.

Then go to Edit > Transform > Warp.

Next, let’s take the Smudge Tool (R), set it to a 80% hardness, round brush with about 30% Strength and Mode: normal See where the shadow goes over the page flip and book covers? In nature, try taking a book or pencil, and try to make it cast a shadow over objects placed at different heights, you’ll observe that the shadow makes a kind of “steps" So let’s give our shadow some "steps"! Drag gently with the Smudge Tool downwards, like so (you might have to zoom in a lot for this).

Much better, isn’t it? Nice, now you can freely delete all the shadow that goes outside of the boundaries of the book covers & all. Nice, now let’s take the Blur Tool (R) and with the same settings we used previously (only lower the brush size to about 30px), blur nicely on our shadow, blurring more the farther from the tip it is (you remember what we talked earlier about shadow fuzziness yes?) The aim is to get something like this. Now name this layer "Shadow Pen” and we’re done!

Final Image

  

In the first three parts of this series, we covered a lot of information about the anatomy of a typeface, and what kinds of things to look for when actually combining two fonts. Here, we’ll tie it all together.

Below are guidelines for combining fonts for paragraphs and headlines, as well as for other common type elements, like pull quotes and by-lines.

Headlines and Paragraphs

The headline and paragraph are two of the most basic building blocks of the typography of a design. In some cases, a heading and paragraph may be the only kinds of typographic information present in a design. Because of this, they’re often given great precedence in the design process.

So let’s start with these two elements, and we’ll expand from there. Here are some examples of effective typeface combinations, starting with the least difficult.

The absolute simplest way to create a headline/paragraph combination is to use the same typeface for both, but with different weights and sizes. Here, we’ve combined Adobe Caslon: Regular for the paragraph copy and Bold for the headline. It’s simple and formal, but can be a bit boring.

The next easiest is to select fonts from the same family. Here we have Fontin Bold for the headline and Fontin Sans for the paragraph copy. Again, change around the weight and size to get better contrast. There are a lot of typeface families that include both serif and sans serif typefaces, including Droid Sans and Droid Serif, and Museo and Museo Sans.

Probably the most common method of combining typefaces is to pair a serif with a sans-serif. In print design, serifs are generally used for the body copy, while sans-serifs are used as headlines. The opposite is more generally true online, though both can work in either setting. Here, we’ve combined Lucida Sans for the headline with Crimson Text for the paragraph copy.

Here we’ve combined Rockwell Bold for the headline and Gill Sans for the paragraph type. Both of these typefaces have a basis in geometric shapes, and therefore they work well together. If you look at the letter “o” especially, you’ll see that in both typefaces, it’s almost a perfect circle (the same is true for the bowls of the letters in both).

Both the typefaces here are clean and modern. The headline is SF New Republic SC and the paragraph is Hero Light.

Here’s another set with a similar mood and style, this time old-fashioned or antique. The headline is Tagettes and the paragraph copy is Goudy Bookletter 1911.

Mixing a strong typeface with a more neutral one can also be a great technique, especially on the web. Here, we have Dancing Script for the headline and Georgia for the paragraph copy.

The trickiest typeface combination technique is probably creating a combination from two radically different typefaces. It’s tricky because it’s so easy to go wrong. Just because two typefaces are radically different doesn’t mean they’ll automatically work together. And when one of those typefaces also needs to be legible as paragraph text, it makes things that much more difficult.

The example above combines Tallys for the paragraph copy with DayPosterBlack for the headline. Tallys is a decidedly traditional-looking typeface, with a fairly light stroke weight. DayPosterBlack, by contrast, is a strong, modern, almost sci-fi-looking typeface.

This is one of those techniques that’s best achieved through simple trial-and-error. Try out a bunch of different combinations and see which ones look good together. You may have to try out a dozen or more combinations before you find one that works well because of it’s contrast.

Beyond Headlines and Paragraphs

Headlines and paragraphs, while important, are only one small part of a lot of designs, especially blogs and news sites. Below are a few more types of typographic elements you may find yourself using.

Pull-Quotes

With pull quotes, there are a couple of different options. First, you can simply use the body copy typeface for your pull quotes, but in a larger size, and possibly a different weight:

It doesn’t look bad, but it’s also kind of boring having both the paragraph and pull quote in Times.

Another option is to use the headline typeface, in this case Dancing Script, for your pull quote. This is more interesting, and definitely draws more attention to the pull quote, but it’s not going to work in every situation. As a general rule, the more decorative your headline font, the worse it will work for pull quotes. You can get away with a script, but anything more decorative than that isn’t going to look right.

The other options with pull quotes is to use a typeface completely different from your headline and paragraph choices. In this case, we’ve used Anivers for the pull quote, Times for the paragraph, and Dancing Script for the headline. Consider the guidelines for combining paragraph and headline typefaces, and use the same general guidelines. In this case, since the paragraph text is a serif and the headline is a script, it made sense to use a sans-serif for the pull quote. Using a weight for the pull quote that’s roughly the same as the weight for the headline helps tie everything together.

Meta Information

Meta information is going to be found on virtually every blog or news site out there. This includes things like the category or tag information, the time the article was posted, and other similar information. Sometimes, it also includes the by-line of the author. Again, there are a couple of different ways to approach the typography for this kind of information.

The first thing you need to remember, though, is that meta information is usually displayed quite small, and sometimes in a lighter color. This rules out a large number of potential typeface choices, as you need something that’s legible at an 8 or 10 point size.

The first option is to use the same typeface you’ve used for your body copy, but in a slightly smaller size and/or a lighter color. Here, both the body copy and the meta information are Crimson.

Another option is to use a very neutral typeface, like Helvetica, for your meta copy. This choice is especially good if your body text isn’t highly legible at small sizes.

Captions

Photo captions should be treated much like meta information. Generally, the type used to caption images is small and sometimes in a lighter color than the body text. In a lot of cases, it’s included within the image border.

Again, you basically have two options for photo captions: you can use the same typeface as your body copy, or you can use a different face. If your captions are going to be very small, legibility may make the decision for you.

For example, look at the captions on the images above. Both are in 11pt, regular weight fonts. The top caption is in Tallys, a common typeface for body copy, which isn’t particularly legible in this instance unless you squint. The bottom caption, by contrast, is in Helvetica, and is significantly more legible.

Examples

Whether you’re combining two typefaces or eight, the same principles apply. You need to find typefaces with some kind of shared characteristics (except when using radical contrast) so that they work well together. Here are some examples of websites that have done just that.

Elysium Burns

Elysium Burns uses a combination of serif and sans serif typefaces, as well as a variety of styles (including all caps).

Good Magazine

Good Magazine also uses a combination of serif and sans serif typefaces, including Georgia for the body text and Arial for navigation and meta information.

Viget Inspire

The Viget Inspire blog uses a combination of sans serif and serif typefaces. Constantina (with Georgia as the primary alternate) is used for headings, while Georgia and Verdana are used for meta information. Body copy on the blog is Verdana.

The Morning News

The Morning News uses Georgia for their headlines and Arial for body copy. They use a variety of weights and styles (including italics and all caps) to set apart different kinds of copy.

The New Yorker

The New Yorker uses their own typeface for article headlines, and Times New Roman for body copy. Meta information and some navigation is set in Arial.

A List Apart

A List Apart uses Georgia for their headlines and navigation, and Verdana for body copy. For by-lines and meta information, they use a combination of Verdana and Times.

Design Wise

Design Wise uses various weights of a slab serif typeface for all of their typography.

Quipsologies

Quipsologies uses a variety of custom fonts for their headlines (p22-underground-pc-1 and coquette-1 most prominently). They also use custom fonts for body text (mostly p22-underground-1 and skolar-1). It’s a bold choice, made possible by web fonts.

sr28

sr28 uses Georgia for headlines and Arial for body text.

I Love Typography

I Love Typography uses web fonts from the same family for their typography, including ff-scala-sans-web-1 for their headlines and meta information, and ff-scala-web-1 for their body copy.

Burciaga

Laura Burciaga’s blog uses a combination of three primary typefaces: Dancing Script (for headlines), Droid Serif (for meta information), and Georgia (for most of the body copy). Combining two serifs is tricky, but it’s done really well here.

Black Harbor

Black Harbor uses Georgia for body copy and KnockoutHTF48-Featherweight for the headlines and navigation.

The Dollar Dreadful

The Dollar Dreadful uses a huge number of retro-styled typefaces for their headlines. Their body font is Georgia.

Matt Bango

Matt Bango uses a mix of Georgia and Helvetica, as well as another serif typeface (with Flash replacement).

Kari Jobe

Kari Jobe’s site uses a variety of typefaces, including Courier New for the body copy. Most of the typography on the site is done with images rather than web fonts.

Design Intellection

Design Intellection uses a variety of weights and styles of Proxima Nova, as well as a bit of Georgia (for block quotes).

The Old State

The bulk of the typography on The Old State is Georgia, though there’s a thin slab serif also used for the navigation and logo.

Poems Out Loud

Poems Out Loud uses Baskerville as their primary typeface for both headings and body copy (with Times as the secondary font). There’s also limited use of Helvetica Neue for navigation.

A Word on Web vs. Print

There’s a lot of conflict surrounding the best practices for typography on the Web when compared to print. In print, longstanding wisdom has pointed toward using serif typefaces for body copy and sans-serifs for headlines. On the web, the opposite is often touted as gospel: sans-serif body copy and serif headlines.

The truth of the matter is that both serif and sans serif typefaces can be perfectly readable both onscreen and in print. It’s all dependant on proper contrast and sizing. Some typefaces are designed to work well at small sizes (mostly by “hinting”), while others are not.

One general rule of thumb for optimal readability, though, is that slightly larger type works better onscreen. This is partly to do with resolution: printed materials are generally printed at 300 dots per inch and up. Screen resolution, though, is generally around 96 points per inch. Because fewer pixels/dots are used to make up the letterforms, they’re slightly less crisp onscreen than they are when printed. By making a type slightly larger, you’re using more pixels to represent the same forms, making the form sharper. The more detailed the letterforms (such as with serif typefaces), the more stark this difference becomes. This is why sans-serif typefaces are often preferred online, as their simpler shapes are better reproduced at smaller sizes.

Conclusion

Much of good typographic design has to do with being unafraid of trying new things and experimenting. Sometimes unlikely combinations work beautifully together, while at other times two typefaces that should look great together just don’t quite look right. The only way to learn what works and what doesn’t is to try new things.

Here are some very general guidelines for using typefaces for various parts of a typical design. Remember, these are just guidelines, and there will be exceptions to all of them.

• Small fonts are more readable if they’re less detailed to begin with. This is compounded when they’re being used online.
• Captions and meta information are generally a few points smaller than body copy, and should either be in the same typeface or a neutral alternative like Helvetica.
• Your typography should match the feel of your content. Formal documents should use formal type. Informal documents should use informal type. (In other words, don’t use something like Comic Sans for a corporate report, and likewise don’t use Times New Roman for a child’s birthday party invitation.)
• When in doubt, use Caslon.

More Resources

• Four Techniques for Combining Fonts
  A useful breakdown from Hoefler & Frere-Jones
• Mastering Font Combinations
  A short, basic article on combining typefaces.
• 19 Top Fonts in 19 Top Combinations
  A look at combining some of the most popular fonts used by designers.
• 10 Great Google Font Combinations You Can Copy
  Not only gives the ten combinations, but also the reasons behind combining them.
• Choosing Type Combinations
  An in-depth article from Layers Magazine.
• Best Practices of Combining Typefaces
  An article from our archives on basic rules for combining typefaces.

(rb)

Editor’s note: This tutorial was originally published on Psdtuts in January 2009.

Step 1

For this project, I used two nice images that suits for the manipulation; image1, image2. I would like to thank the author of this two great pictures, which is thiquinho and huibidos from sxc.hu. And before we continue with the steps, I need to inform you that this tutorial is written using Photoshop CS3.

Step 2

Let’s start with image1, open and duplicate this image by using the Image > Duplicate command from the menu bar. In the Duplicate Image dialog box, you can name it anything you like, but to follow this tutorial reference, name it "PassionFire" and hit OK. By doing this, we kept the original image. Be sure to save.

Step 3

With the "PassionFire" image active, duplicate the "background" layer. Set the foreground and background color to black and white by pressing D on the keyboard. Click the "background" layer again and fill it with the foreground color ~ which is set to black. See the images below.

Step 4

Reactivate "Layer 1," then press Command + Shift + U to apply desaturate command. Now invert the color by pressing Command + I. Your image should look like a film’s negative now.

Step 5

Duplicate "Layer 1," then apply the find edges filter from Filter > Stylized > Find Edges. Next, invert the color by pressing Command + I and change the Blending Mode to Hard light. There, your image now has contrast white line and a very dark background.

Step 6

To give the white line more contrast, duplicate the "Layer 1" copy then change the Blending Mode to Screen.

Step 7

Now we move to the second image. Drag image2 into "PassionFire" document image window using the Move tool. If the Paste profile mismatch dialog appears, just click OK to fix it.

Step 8

The fire image from "image2" should be in "Layer 2" now. Change its Blending Mode to screen, this will hide all the black colors in "Layer 2." If done right, your image should be similar to the one below.

Step 9

Duplicate "Layer 2" by pressing Command + J. Make sure you use the Screen Blending mode, same as the original "Layer 2." Next, make "Layer 2" become invisible by hiding it from the layers panel.

Step 10

Click the "Layer 2 copy" to make it active, then use the Free Transform command ( Edit > Free Transform) to rotate and resize the fire image like shown below. Don’t forget to press Enter when you’re done transforming.

Step 11

Still in the same layer, now use the warp command (Edit > Transform > Warp) to bend the fire image – so it following the hair flow. Press Enter when done. See the example below as a reference.

Step 12

If you feel the result is not quite good enough, simply use the Liquify filter to fix it. I assume you already know how to use the liquify filter; the Forward Warp tool and Twirl Clockwise tool is the only tool I used to get this result (see image below).

Step 13

Duplicate the "Layer 2" copy, then use the Free Transform command to resize and rotate the fire image in the current layer. Don’t forget to reposition the fire image too. Once you get this composition (see image below), hit Enter.

Step 14

Repeat the previous process to get the hair covered with fire. Just duplicate and modify the layer until you get all the hair part covered. If needed, use the Liquify Filter again. The end result of this process should look like the image below, notice how many layers are used.

Step 15

Okay, now activate "Layer 2" and make it visible again. Then Change the Blending Mode to Vivid Light. This step will colorize only the white line in the layer below it.

Step 16

Still in "Layer 2," apply the Free Transform command to resize and rotate the fire image like shown below. The purpose is to cover up the girl’s body and hair with the fire texture. Press Enter when you’re done transforming.

Step 17

We’re gonna blur the fire image in "Layer 2," To do so, apply the Gaussian Blur filter from the Filter > Blur > Gaussian Blur menu. Fill the Radius around 10 to 15 pixels, then click OK when done. Blurring the fire image will cause its texture to blend smoother with the layer below it.

Step 18

Now add a layer mask to "Layer 2." Then use a soft round Brush tool with Opacity at 100%. Set the brush size according to your need, then just mask until the fire outside becoming hidden. See the process below.

Step 19

Sure we will remove the white line shown in the image (marked in red rectangle below). First, add a new blank layer below "Layer 2." Then simply paint it with black using the soft round brush tool.

Step 20

Now go to the top most layer (mine is: "Layer 2 copy 6"), add two adjustment layers which is Hue/Saturation and Brightness/Contrast. Careful not to change the layer adjustment order, or the color effect will be wrong. Below you can see the setting I used to complete this step, also pay attention to the adjustment layer order.

By adding a Hue/Saturation adjustment layer, we unify all colors. The Brightness/Contrast adjustment layer brings more color contrast and makes sure the image color’s looks like real fire.

Step 21

I’m sure you notice the fire sparks effect. I create it using the Brush tool with this simple setting. No special brush needed, but if you have one that will be useful then feel free to use it. Below you can see all the settings I used within the Brush palette, of course you can change the setting as you like. Just make sure the brush spatter enough and vary the size.

Step 22

Now to use the modified brush, create a new blank layer below the adjustment layers ( mine is named "Layer 4"). Choose 50% gray from the swatches palette, then you can start creating the fire sparks. Remember not to be monotone, resize the brush size if needed. I start using a big sized brush, then reduce it to smaller size (you can change brush size faster by pressing the bracket keys on the keyboard ).

If you’re not sure how to do this steps, just imagine where and how the fire sparks will flow if it was real fire. For me, imagining stuff is very helpful.

Step 23

To make it more interesting, create a new layer and change the Blending Mode to Screen. Then use a normal soft round brush (not the one we modified earlier), with an Opacity of 50%. Just click in the part of body, neck, and hair. I’m not sure how to explain this, but you can see the difference between the above and below images.

Conclusion

And that’s all of it! Hope you learned something new and had fun. You can view the final image below or view a larger version here.

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

Detailed Video Instruction

This tutorial includes 14 videos that demonstrate the process of creating this project in detail so that you can better understand the techniques that were used in each step. Below is a clip from one of those videos. To view more clips you can Log in or Join Now!

Professional and Detailed Instructions Inside

This tutorial also includes full text and screenshots of each step. Premium members can Log in and Download! Otherwise, Join Now! Below are some sample images from this tutorial.

Final Image

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!

Here is what we will make, click on the image for the full size:

Resources to complete this tutorial:

• Social Icons
• This is Art2 Icons

Step 1: Setting up the Document

Open up Photoshop and create a new document 1200px x 1650px.

Make sure that you turn on Rulers by pressing Ctrl + R or by going to View–> Rulers.

Creating Guides

I didn’t use the 960 grid system on this tutorial so that we can practice creating our own guides. To show guidelines press Ctrl + ; by default nothing will appear yet because we haven’t created any guidelines yet. Now lets create our first two guides select View > New Guide. This guide will be the holder of the whole layout a total width of 960px.

Making Folder

To make things organized and easy to locate, create these folders.

Step 2: Working with Background

In the Background folder create a new layer and name it Background. Now select Linear Gradient and use the following colors:

• Color: #7fa7c7 Location: 0%
• Color: #a4c7e2 Location: 10%
• Color: #3d5466 Location: 30%
• Color: #57758d Location: 70%
• Color: #2c3e4c Location: 100%

Start dragging from the middle. You may have something that looks like the screenshot below.

Creating a Line Pattern

Next, we will add a pattern to create more texture in our background. Create a new 4 x 4 document. Now select Pencil Tool (B). Follow the screenshot as shown below.

To create a pattern make sure you select the top layer and go to Edit > Define Pattern

Now lets add a pattern to our background. Create a new layer above the Background Layer and name it Pattern. Select the Paint Bucket Tool (G), switch to pattern, and select the pattern we made.

Using Rectangular Marquee Tool(M) select 1/2 of the whole document and fill it with the pattern using the Gradient Tool (G).

Add this Blending Option:

• Color Overlay: #98c2e2

Add a mask to the pattern layer by pressing the mask button beside the fx button.

Now we will hide the portion of the pattern that we don’t want to appear in the background. Set the foreground color to #000000. Select the Brush Tool(B). Before you start brushing make sure that you select the mask in the layers panel then start brushing areas that you want to hide.

Step 3: Working with Header

Inside the header folder create a new layer and name it top. Set the foreground color to #334655. Now create a guide 5px Horizontally.

Using the Rectangular Marquee Tool(M) select the top portion within the guidelines and fill it. Before we proceed create three folders name them as shown in the screenshot below.

Logo

We will make a quick logo for this tutorial. I’m thinking of something like a glowing logo, I think it suits this layout. So select Text Tool(T) and select your favorite font. I prefer light and bold fonts so I select “Kozuka Gothic Pr6N”. I combined light and bold text.

Add this Blending Option:

• Outer Glow: #c1e4ff

Duplicate the text layer and transform the original layer by pressing Ctrl + T Right Click and select Flip Vertically, and move it down below the duplicated text.

Mask the Original layer and make sure the mask is selected. Select Linear Gradient with a fill color of black and white. Start masking beginning from the middle of the text to top. This will achieve a reflection effect.

Social Icons

Open up the social icons that you have downloaded from the resource and place them as shown in the screenshot below.

Navigation

Start by creating a new layer and name it nav-bg. Create a rectangle shape using the Rectangular Marquee Tool(M) or the Rectangle Tool with a height of 50px and a width of 960px, fill it with any color.

Add this Blending Option:

• Inner Glow: #ffffff

• Gradient Overlay:
• Color: #2b3d4b Location: 0%
• Color: #3a4d5a Location: 20%
• Color: #2f404e Location: 50%
• Color: #455764 Location: 80%
• Color: #546a79 Location: 90%
• Color: #2f414f Location: 100%

• Stroke: #2b3b48

Above the nav-bg layer, create a new layer and name it Shine. Using Pen Tool (P) create a shape and make a selection from it as shown in the screenshot below.

Fill it with a white color. Set the layer mode to Screen and Opacity to 10%.

Now select the Text Tool(T) and add these links.

Duplicate the text layer. Now select the original layer and change the color to #1c2730. Position it 1px above the duplicated layer to make it look like it’s beveled.

Now let’s add some dividers between our links. Create another folder and name it divider. Using Line Tool(U) create 2 lines. First line color will be #485d6c, second line color #2b3b48.

Search

Before we make our search bar. Let’s create a new guideline first. Follow the screenshot as shown below.

In the search folder create a new layer and name it search-bg. Using the Rectangular Marquee Tool(M) create a rectangle with a width of 260px starting from the 20px guideline we just created.

Add this Blending Option:

• Drop Shadow: #ffffff

• Inner Shadow: #000000

• Gradient Overlay: #2f404e, #546a79

• Stroke: #2c3c4a

Now open up the search icon and place it at the right side of the search bg.

Add this Blending Option:

• Drop Shadow: #ffffff

• Inner Shadow: #000000

• Color Overlay: #30414e

I also added an italic Mydrid Pro text color #cccccc.

Back to Navigation folder create a new layer above Divider folder and name it below. Using Rectangular Marquee Tool(M) make a selection 5px height 960px width as shown in the screenshot below.

Add this Blending Option:

• Gradient Overlay: #334553, 3e515d, 293743

• Stroke: #293743

Below nav-bg layer, create a folder and name it Client Login. Inside of it create a new layer and name it button. Using Rectangle Tool(U) create a shape about 130px width and 35px height.

Add the same Blending Option as we did in nav-bg layer. In case you didn’t know how just follow the screenshot below.

I also added text to the button using the Text Tool(T). I know you’ve learned how to make it look beveled, so I wont repeat it again.

Duplicate Client Login folder and rename it Sign Up. Select button layer and change the Blending Options as shown in the screenshot below.

Add this Blending Option:

• Inner Glow: #ffffff

• Gradient Overlay:
• Color: #ffbf60 Location: 0%
• Color: #d49c4a Location: 20%
• Color: #c5944b Location: 50%
• Color: #e7ad57 Location: 80%
• Color: #fec570 Location: 90%
• Color: #d09a49 Location: 100%

• Stroke: #ba8537

For the text, change the color to #b58742.

Step 4: Working with Slider

Select Slider folder and create new folder and name it display. Inside display create a new layer and name it slide-holder, now using Rectangular Marquee Tool(M), create a box with a size of 660 x 300 fill it with #2f404e.

Now grab some dummy pictures the same size or bigger than slide-holder. Place it above slide-holder and link them together by pressing Alt + Click on the line in between.

Create a new layer and name it Caption, using the Rectangular Marquee Tool(M) create a rectangle with a height of 75px and fill it with any color. Set the layer Opacity to 80%.

Add this Blending Option:

• Gradient Overlay:
• Color: #26343f Location: 0%
• Color: #5c6e7a Location: 30%
• Color: #5c6e7a Location: 50%

Add a caption using Text Tool(T)

Hover and Normal

Inside Slider folder create new folders named Hover, Normal. In each folder create a layer name it bg. Using the Rectangular Marquee Tool(M) create a shape 300 x 100 and fill it with any color.

Hover

For the Hover folder bg layer.

Add this Blending Option:

• Inner Glow:
• Color: #ffffff

• Gradient Overlay:
• Color: #d49c4a Location: 20%
• Color: #c5944b Location: 50%
• Color: #e7ad57 Location: 80%
• Color: #fec570 Location: 90%
• Color: #d09a49 Location: 100%

• Stroke:
• Color: #ffffff

Now we will add a shine. Using Pen Tool(P) create a shape as shown in the screenshot below and make a selection from it.

Select Linear Gradient, Foreground to Transparent set the foreground to white. Fill the selection with gradient starting from top to bottom and set the layer Mode: Screen, Opacity: 80%.

Open up This is Art2 icon set we have downloaded. Re-size it to fit, also using the Text Tool(T) add text as shown in the screenshot below.

Create new layer above shine and name it light. Using Elliptical Marquee Tool(M) create a shape as shown in the screenshot below and fill it with #fff070.

Go to Blur > Gaussian Blur to 5. Set the layer Opacity: 60%.

Normal

Duplicate all the layers in Hover folder and place it to Normal folder. All we need to change is the Icon, Gradient Overlay, Stroke, Text and remove the Light layer.

Add this Blending Option:

• Gradient Overlay:
• Color: #2b3d4b Location: 0%
• Color: #2f404e Location: 50%
• Color: #455764 Location: 80%
• Color: #4a5f6d Location: 90%
• Color: #2f414f Location: 100%

• Stroke:
• Color: #25333e

For the text change the color to #afdfff and #cccccc.

Shadow and Glow

Below all those folders inside the Slider folder, create a new folder and name it Shadow and also create new layer and name it Shadow-left. Create new guideline as shown in the screenshot below.

Select the Rectangular Marquee Tool(M) create a selection from the new guide. Now using Linear Gradient Foreground to Transparent. Set the foreground color to #000000 and fill the selection with a gradient. After filling it erase the portion that is circled as shown in the screenshot below.

Repeat this step for Left and Bottom. You may have something that looks exactly as shown in the screenshot below.

Create new layer and name it Glow. Set the foreground to #bae0fe. Using the Elliptical Marquee Tool(M) create a selection as shown in the screenshot below and fill it with foreground color. Now add some Gaussian blur radius to 5.0 px.

Step 5: Working with Body

Our Body includes Featured Project, About, Services so go ahead and create those folders separately. Lets first work on Featured Project.

Featured Project

Inside the Featured Project folder create new layer and name it holder. Using the Pen Tool(P) & Rectangle Tool(U) create a shape in separate layers as shown below. Name the Rectangle Front and the other to back.

For the Front layer.

Add this Blending Option:

• Gradient Overlay:
• Color: #2b3d4b Location: 0%
• Color: #3a4d5a Location: 20%
• Color: #2f404e Location: 50%
• Color: #455764 Location: 80%
• Color: #546a79 Location: 90%
• Color: #2f414f Location: 100%

• Stroke:
• Color: #1d2a33

For the Back layer.

Add this Blending Option:

• Gradient Overlay:
• Color: #1d2a33 Location: 0%
• Color: #151e25 Location: 100%

You will hopefully achieve a 3D like effect that looks exactly like the screenshot below.

Using the Text Tool(T) I added Featured Project Text with a bevel effect. Just remember to create the bevel effect. If the background is dark and your font is light, the shadow should be dark, and if it is dark then shadow should be lighter. Take a look at the screenshot below and you will know what I mean.

Now add some sample pictures for our gallery, it should be 150 x 150. Also, I added some shadow below.

Create new folder and name it Circles. Now using the Elliptical Marquee Tool(M) create small circles as shown in the screenshot below.

For the first circle.

Add this Blending Option:

• Outer Glow:
• Color: #ffffff

• Inner Glow:
• Color: #ffffff

• Gradient Overlay:
• Color: #ffbf60 Location: 0%
• Color: #d49c4a Location: 20%
• Color: #c5944b Location: 50%
• Color: #e7ad57 Location: 80%
• Color: #fec570 Location: 90%
• Color: #d09a49 Location: 100%

• Stroke:
• Color: #ba8537

For the remaining two circles

Add this Blending Option:

• Drop Shadow:
• Color: #ffffff

• Inner Shadow:
• Color: #000000

You should have something that is exactly like in the screenshot below.

About

For the About folder using the Text Tool(T) add some dummy text. As you can see in the screenshot below I used the same font settings as we did in Featured Project. That’s it for our About folder.

Testimonials

In our testimonial folder Using the Rectangular Marquee Tool(M) create a 290px x 220px box and fill it with #31a5db. Base some other info in the screenshot provided below. As you may have noticed, I added a shadow with an Opacity: 60%. First I used a Pen Tool(P) to create a shape and added a Gaussian blur on it to make it look like a shadow.

Services

In this step I simply copy the text and icons from our slider we did earlier. For the icons I re-sized them a bit. I also added a 3px #192229 border on each service and separated each with two lines. For the first line the color is #1a242b, second line is #455865.

Using the Rectangular Marquee Tool(M) make a selection as shown in the screenshot below. Now set the Foreground to #ffffff and select Radial Gradient Foreground to Transparent. Start dragging from right to left and erase some portion that not included.

Step 6: Working with Sidebar

I don’t need to explain this more, I know you’re already familiar with doing this in the previous steps. Just base it on the screenshot below and I’m sure you can do it on your own.

Step 7: Working with Footer

Inside the Footer folder create new layer and name it bg. Using the Rectangular Marquee Tool(M) make a selection as shown in the screen show below and fill it with #151d23.

Add this Blending Option:

• Inner Glow:
• Color: #ffffff

• Stroke:
• Color: #0f1418

Finally using the Text Tool(T) fill the footer with text. I duplicate the logo with no style and color it with #2c3e4c. I also copy social icons and place it below the logo. See the screenshot below for a clearer understanding.

We’re done I hope you enjoyed this tutorial and find it useful. If you have any questions or suggestions for the next tutorial just mention it in a comment. I’m here to help and teach you what I know about design. Thank you!

Final Design Preview: