First off, props to Dan Wiersema (my friend and Creative Director at Guifx) for being the brains behind this tutorial. Concept and wireframe were both developed by him. He also helped me iron out the creases in terms of rating my work from beginning to end.

In this tutorial, we’ll create a main menu interface for a fictional iPhone game. We’ll go through setting up Photoshop to accurately display target screen size, setting up a wire frame for the project, creating a background, making a logo, creating rock texture for the sidebar, and wood texture for the saved games-box and buttons. We’ll also add creating greenery for detail and good measure. This is gonna be a long one, so patience is a virtue. Also, coffee helps!

Final Image Preview

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

Step 1

Head over to pxcalc.com and follow the instructions. Doing this will allow you to view the design in it’s final size – The real life size of the actual iPhone screen – on your own computer.

Create a new document with a 480px width by 320px height, with a 164.83 pixels/inch resolution. Set color mode to RGB 8bit.

Step 2

I recommend creating a wireframe for your project like the one in the image below. The best way to do this is right clicking with your Zoom Tool selected and chose print size. If you followed Step 1, you will now be looking at your document at the exact size the end user will on his/her iPhone. This helps you determine how big the buttons should be in order to work sufficiently on a touch screen device. Note: Try physically clicking on the screen, and remember to take thick fingers into account.

Use the Rectangle Tool and drag out rough placement guides for the various elements. Keep the color of the shapes white and add a black 1px inner stroke. It’s also a good idea to mock the concept up using pencil and paper. Even if you’re not a good freehand artist (I’m not, but I still do it), napkin sketches help you keep your eyes on the prize!

Step 3

Create a new layer and name it "Background." Set your foreground color to #5e1114 and your background to #140306. Select the Gradient Tool, and with the settings pictured below drag from top to bottom like the arrow indicates.

Step 4

To the "Background" layer, apply the following layer styles.

Step 5

Reset your foreground and background colors to black and while by clicking the D key on your keyboard. Create a new layer and name it "bg_clouds." Now go to Filter > Render > Clouds. Set this layer’s blending mode to Overlay. Dab at it in random areas with the eraser tool, set to a 30-50% Opacity with a soft brush to create interesting highlights. Try to match my result below.

Step 6

Download this image from sxc.hu (Thank you Javier González). Call the layer "castle," resize it and place it roughly in the top-center of the stage. Set the layer’s blending mode to Multiply and the Opacity to 60%. Use the Eraser Tool to erase any harsh edges. Below is my result after this step.

Step 7

Okay, so far so good. Let’s start creating our logo. Grab your Pen Tool and create the outline of a dragon’s head. To do this you can either trace a random dragon image, or make up your own. This one will however end up with some heavy duty layer style effects, so try to keep the shape fairly simple.

There’s a wide variety of free shapes and dingbats you could use instead, if you don’t wanna spend time tracing or coming up with a dragons head. Where there’s a will, there’s a way.

Duplicate your shape 2 times (layer > duplicate layer…), so that you have 3 dragonhead layers. Name the bottom one "dragon_1," the middle one "dragon_2," and the top one "dragon_3."

Step 8

Time to make our dragon shine. This technique is heavily based on Elliot AKA TrueLovePrevails’ tutorial on how to replicate the warcraft logo style, so a huge thanx goes out to him for developing this fantastic technique, and for letting me use it. Click here to visit the original tutorial.)

Apply the following layer styles to each layer respectively, beginning with the “dragon_1″ layer

Now apply the following layers styles to “dragon_2″ and set this layer’s fill Opacity to 0%.

And again to “dragon_3″ and set this layer’s fill Opacity to 0%.

Step 9

Right, dragon looks good – check! Next up is the text.

Head over to Fontcraft.com and download or purchase Scurlock. Scurlock is free as a demo font, so make sure to read the terms of use, and do purchase a license if you wish to use this font for commercial purposes.

Select your Type Tool and set the size to 60pt. Type out the text "Dragon." Right-click the layer and select Convert To Shape. The reason for this is that we want to remove the underline of the “o.” To do this we use the Direct Selection Tool. Activate the vector mask by clicking the thumbnail and select all the nodes of the underline, then hit delete on the keyboard. If you can’t get them all in one go, hold down Shift to add to the selection.

Next, grab the Path Selection Tool and click the “o.” Go to edit > Free transform and drag the bottom center node down so the “o” looks like it belongs with the rest of the text. Now duplicate the layer twice, just like we did with the dragonhead. Name the layers from the bottom one and up "dragontext_1," "dragontext_2," and dragontext_3" respectively.

Step 10

Let’s hide the "castle" layer for now, since it’s of little importance to the layout, and mainly causing a bit of a distraction while designing.

Right-click the layer "dragon_1" and select "copy layer style." Now right-click the "dragontext_1" layer and select Paste Layer Style. Right-click the layer "dragon_2" and select Copy Layer Style. Now right-click "dragontext_2" layer and select Paste Layer Style. Change the shadow mode opacity under bevel and emboss to 43%.

Select "dragontext_3" and set the fill Opacity to 0%. Then apply the styles shown in the image below. When finished, repeat Steps 9 and 10 for the "Storm" text (naming the layers stormtext_#) and place the text roughly as shown below.

Step 11

Command-cick the vector mask thumbnail of "dragontext_2" layer to load the selection. You’ll see the marching ants appear around your text. Make sure "dragontext_2" is your active layer, as this will make sure we place the adjustment layer we are about to create just above "dragontext_2."

Now click the Create New Fill Or Adjustment Layer button located below your layers palette. From the list select Color Balance and apply the settings below. Afterwards, click Command + D to deselect. Now do the same for the "swordtext_2" layer.

Step 12

Details speak for themselves, so lets throw in some more text for added effect. Type out "Scroll of the Wicked" using the Scurlock font again, at a size of 18.5 pt. For the "Scroll" and "Wicked" text, set the text size to 14.5 pt. For "of the" text, use #C9C9C9 as the text color and apply the following layer styles.

Step 13

Hopefully you’re still with me. Let’s move on to the sidebar.

Using your Pen Tool, create a block-like shape like the one in the image below. Be creative here. There is no right or wrong when making stuff like this, so just throw a shape together without paying too much attention to detail. Duplicate this layer and call the the top one "sidebar_base." Name the bottom one "sidebar_perspective." Now apply the following layer styles To the layer "sidebar_base."

Step 14

Nudge the "sidebar_perspective" layer 6px to the left, right-click it and select Rasterize Layer.

Set the Burn Tool up using the settings below, and paint the perspective edge – keeping the light source from the concept sketch in mind – where the light is least likely to hit it. With the Dodge Tool, paint the opposite areas. When doing this for stone textures, I find that it’s effective to dab rather than stroke, as this creates the illusion of a rough surface. Finally, give the layer a drop shadow.

Step 15

Download this brush set by Lee Richardson. Create a new layer above "sidebar_base" and name it "sidebar_texture_1." Now, Command-click the "sidebar_base" layer to load the shape selection. Without releasing Command press Shift to add to the selection and click the "sidebar_perspective" layer. Next Grab your Brush Tool and select the second brush of the set you just downloaded. With your foreground color set to black, click once inside the selection and hit Command + D on your keyboard. Set this layer’s Opacity to 50%.

Step 16

Set your foreground color to #160A02 and create another layer. Name this one – you guessed it – "sidebar_texture_2." Repeat the process from Step 15, this time using the fourth brush of the set. It’s smaller, so you’ll need two clicks to cover the entire surface. With this layer selected, go to Filter > Blur > Gaussian Blur. Set it to a radius of 1.5 then click OK. You should have something like the image below.

Step 17

Let’s add some imperfections to the rock surface. Create a new layer and name it "cracks." Select the Brush Tool and vary between a master radius of 2px to 5px, Hardness 60% to 80%, and keep the brush Opacity at 55%. Try not to worry about getting it right. The layer style will do most of the work, and the weirdest shape may turn out great. When you are happy with the cracks, apply the following layer style and become even happier.

Step 18

Create yet another layer, this one above the "cracks" layer, and call it "edge_bumps." Select the Pencil Tool with a master diameter of 1px and draw in some imperfections in black color along the highlighted line below. set the layer Opacity to 76%, then apply the following layer style to the layer.

Step 19

Create a new layer above the "edge_bumps" layer. Command-click the "sidebar_perspective" layer. Grab any one of Photoshop’s default spatter brushes and dab here and there down the edge, while still keeping the brush Opacity at 55%. Copy the layer style from the "edge_bumps" layer and paste on to this layer. Set the layers Opacity to 55%.

Step 20

Let’s move on to creating the wood. Make a shape like the one below for our big wooden saved games board. Set the color of the shape to #463118. Call the layer "saved_games_base" and apply the following styles to it.

Step 21

Using your Pen Tool, try to replicate the shape you see below, and place it below the "saved_games_base" layer. The important edges are highlighted in red. Name it "saved_games_perspective" and set the color of this shape to #14100D. Also, apply a drop shadow as shown.

Step 22

Download the first texture from this texture set by cgtextures.com. Drop it onto your stage and resize/rotate it until you like how it looks. Place it above and over the layer "saved_games_base" and rename it "wood_texture_1". Command-click "saved_games_base," then Command + Shift-click "saved_games_perspective" to add to the selection. Select "wood_texture_1" and click the add layer mask button, located underneath the layers palette. Set this layers blending mode to Soft Light.

Duplicate this layer once, name it "wood_texture_2," set the blending mode to Overlay and Opacity to 15%.

Step 23

Repeat Steps 20-22 for the buttons. Try to vary the gradient a bit, and use reflected instead of radial. To keep track of your layers, you may want to add the button layers to a group. Try to match the results shown below.

Step 24

Let’s lighten things up a bit. select the top layer of the document, and click the Create New Fill Or Adjustment Layer, just like we did in Step 11 for the text. This time select levels from the list, and drag the center node to 1.39, which is a little to the left.

Command-click the "stormtext_1" layer, now press Command-shift and click both the "dragontext_1" and "dragon_1" layers. Select the levels layer thumbnail and go to Edit > Fill, and fill the selection with black. Now the text and dragonhead won’t be affected by the levels layer.

Next we are going to add a brightness/contrast adjustment layer, using the exact same method we used for levels, including making sure the “Dragon Storm” TEXT ONLY this time is not affected by this layer by masking it out. Set the Brightness to 25 and Contrast to 35.

Step 25

With your Rectangle Tool, above the "wood_texture_2" layer, create a square shape like in the images below. Name this layer "inset_rim," now duplicate this layer and call the top one "inset_base."

Apply the following styles respectively, starting with “inset_rim” and using a Fill Opacity of 0%.

For “inset_base,” use the same settings and a Fill Opacity of 60%.

Duplicate both “inset_rim” and “inset_base” twice and place as shown in the bottom of the below images.

Step 26

Download "Livingstone" by PrimaFont from dafont.com. Type out all the text you see below, using #ECDECB as the text color. Size isn’t too important, just try to match roughly what is shown below. Then apply the following style to all of these text layers.

Step 27

Set your foreground color to #636363 and create a new layer below the buttons. Using your brush tool set to 85% Hardness with a master diameter of 1px, paint a O shape, like in the image below. See the marching ant selection. Duplicate it, and place the copies as shown.

Step 28

Do the above step for all the areas in the image below that has chains and apply the following style to all layers. It’s going to be many layers, so use groups to keep track of them.

Step 29

Let’s make the "castle" layer visible again. Since we’re moving in to the detailing stage of this project it’s nice to get a clear view of what the end result will be.

Now, using your pen tool again, with black set to your foreground color, create a shape like the one inside the saved games box below. Make it mainly square, but cut the corners to give it a more interesting shape. Call this layer "tablet". Apply the following layer styles:

Step 30

Using the font Livingstone again, type out the text you see in the saved games stone tablet below, and apply the following layer styles. When finished, duplicate the whole tablet and place it in the second box, as shown in the image below.

Step 31

Set your foreground color to #2E343A, and with your Pen Tool create a small diamond shape (about 10px by 10px). This is going to be the base of our rivets. Name the layer "rivet_inset," and duplicate it twice. Name the middle rivet layer "rivet_base" and the top one "rivet_style." Add the following styles respectively, beginning with “rivet_inset.”

Now apply the following layer styles to the “rivet_base” layer.

Now apply the following layer styles to the “rivet_style” layer.

Now duplicate the whole rivet three times and place one in each corner of the saved game box, just like in the image below.

Step 32

Create 4 small circles (about 4px by 4px) at the base of the saved games box, using the ellipse tool and #CCB55A as your foreground color. These will be the page indicators often found in iPhone applications. To the first three, apply these styles.

Change the color of the fourth circle to #FFA200 by double-clicking the shape color thumbnail. Then apply the following style.

Step 33

Time to dive into the last and probably the most difficult step. This could in fact be a whole other tutorial in itself, but I’ll try to keep it basic. I’m gonna try to explain this to the best of my ability using images, but it’s gonna be a learning by doing experience for anyone new to this technique.

• Create a shape, using the Pen Tool, that somewhat resembles a leaf. Doing this in a separate document is a good idea (see image 1 below).
• Rasterize the shape you just made, and grab the Burn Tool.
• Vary the settings for the brush (size and exposure) and try to replicate my result (picture 2).
• Grab the Dodge Tool and try to replicate the results shown, again varying the settings of the brush (picture 3).
• For good measure, also draw a line down the center of the leaf using the Burn Tool (picture 3).
• Use the Eraser Tool, set to a Hard Brush to further shape the leaf (picture 4).
• Zoom in and add additional detail using dodge and burn (picture 4).
• Go to Filter > Noise > Add Noise, and use the following settings: Amount of 1%, select Gaussian and check Monochromatic (picture 5).
• Resize the leaf to the actual size you need it to be, and create a new layer above it. Now with a soft 1px black brush, draw in the veins. set this layers Opacity to 20% (picture 6).
• Change the foreground color to white and the brush Opacity to 70%, and draw in some highlighted areas around the veins (picture 7).
• Add a simple drop shadow using layer styles, and merge the whole leaf into one layer (picture 7).

Optionally you can also add an unsharp mask to the leaf if you want crisper detail. Settings would be along the lines of Amount 50%, Radius 0.5px and threshold of 0 levels.

Conclusion

Add greenery, here and there to make it look more interesting. You could go even further than I did and add some on the saved games box as well. Thanks a lot for following along with this tutorial and I hope you learned some new techniques. Below is the finished result.

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

Apparently, I’m supposed to read my clients’ minds. I’m supposed to know exactly the style, content, and length of every project a client wants taken care of, typically on the basis of a one-line email.

I’m pretty sure I’m not the only freelancer who is expected to offer telepathy as a form of client communication, either. Actually becoming telepathic isn’t particularly likely, but there are a few ways to get a better idea of what a client is actually thinking.

1. Ask every question you can think of

Every client has different needs — and it seems like the clients who expect us to read their minds always have a few out-of-the-ordinary requirements. That means asking every question you can think of will pay off: if you can get the answers that will tell you what your client is thinking, you’ve eliminated the guesswork. Even questions that seem like they should have obvious answers can have surprising answers.

There’s one question in particular that I’ve found crucial — asking a client what his goals for a project are can provide an immense amount of information, especially if you’re working with a client who isn’t quite sure on the details of what he wants yet. Goals are often the key to knowing whether the design or copy you have in mind will actually be what your client wants. If a client comes to you asking for a website and offering no other information, for instance, it’s easy to assume that the client wants something that provides his customers a way to find him online. It takes more of a leap to automatically assume that a client wants to sell products through this new website. Knowing that information in advance will make the design process much easier.

2. Ask for work examples that the client likes

I’ve had clients who weren’t happy with a project simply because it didn’t look like a website operated by someone else in the industry — a website I wasn’t even aware of. Simply knowing what those clients really liked ahead of time would have lead me to take a very different approach to the project, rather than having to try to graft a few elements on to my design at the last minute. It doesn’t have to be much, either: a website or two can be enough to give you insight in to what your client likes. I also make a point of asking exactly what the client likes about a particular design or piece of copy.

You do have to be a little cautious of how closely you follow an example your client sends you. I’ve actually had a client ask me to copy a site pretty much intact and just swap in their information. Trying to explain that you can’t do that — especially after you’ve specifically asked for examples that the client likes — can be difficult. But making a point of explaining that having an identical website, brochure, or other project won’t actually help a client set himself apart from the competition seems to do the trick.

3. Provide extra drafts or mock-ups

If you’re still uncertain about exactly where your client wants you take a project, it can make sense to create a mock-up or draft earlier in the process than you might otherwise. On a blogging project I did recently for a client, I wrote up a list of a month’s worth of titles, with a short description of what each post would include. The time spent writing those descriptions was minimal — but wound up saving me a whole lot of trouble and grief down the road, because the concept my client had of what her blog should include was very different than what I had understood from our discussions.

It can slow down a project a little bit when you add in extra drafts or mock-ups: it’s very tempting to just get in there and get the project done, rather than offering a client lots of opportunities for revisions. But offering at least one chance for the client to review what you’re working on early in the process can reduce the number of times you hand a project over to a client only to hear complaints that they hadn’t gotten what they wanted.

A note about clients: They seem to want everything done yesterday. So it’s no shock when a client will come to you with a “rush” project.

As freelancers, it’s easy to get excited about a new gig and want to automatically accept it, but you should set some boundaries to make sure you don’t get wrapped up in your client’s drama—or get yourself into a tizzy!

See if it’s a real “rush.” Some clients want to give you an hour or a day to complete something but don’t consider that a rush. Other clients will come to you stating that they have a “rush job.” My best piece of advice if the client doesn’t specify the job to be a “rush project” is to determine on your own if it’s a rush. That is, get the full scope of what’s entailed and ask the client for the deadline. (If they don’t have one, it’s likely not a rush, just something they want done promptly.)

If you need to decide if it is a rush job (to therefore charge a “rush fee”), you can do that by looking at your schedule to see if the project and its deadline will force you to hurry. If so, it’s okay to charge a rush fee. Make sure to include time for things like getting a signed contract or a deposit. Many freelancers sometimes waive these important must-haves in order to simply get the job. Then they simply get screwed.

Determine if you can make the deadline. You may want the job terribly but have other obligations in the way that you can’t rearrange. If you know in your heart that you are not sure if you can turn around the work by the client’s deadline, it is not fair to accept the job. I never take a rush job if I think I can’t complete it in time. I have to know that I can get it done, even if that includes a little overtime. I have to make sure I’m comfortable with the timeline, and I think all freelancers should do the same.

You don’t want to wind up fried—it’s not fair to yourself or the client. If you get too frazzled, the work will not be your best and you may not want to claim ownership of the project, not to mention the client will be ticked. Be fair to yourself and the client as to whether or not you can accept a rush project.

Set the “rush rules.” Let’s say that you’ve been told or have decided that the project is a “rush job.” Clients that come to you and know they’re pushing it will likely be more apt to pay a rush fee, while clients that just think they’re giving you a “tight deadline” may be more apt to put up a fight when you include a rush fee. I have found the best way to deal with these things is to establish open and honest communication with the client. If I think I can complete the project in the time allotted and want to accept the job, I let the client know all of my specifications and what I need from him or her to get the job done.

For example, if it is Monday and the client wants the content Friday and I know I can deliver it by then, I let them know if there will be a rush fee, how much it will be, and what time they can expect the first draft by on Friday. I also let them know that I will need the deposit by the next day, for example, and the contract faxed back that evening. (I always try to get the contract first if I know the money will be naturally delayed in the mail.)

You do not always have to let the client know there is a rush fee—you can simply add it into the quote and have the client approve it. It is, of course, up to you based on how you do business, but many freelancers include rush (or pain-in-the-butt) fees in their quotes. If the client asks why the fee is higher than normal, I let them know that I’ve included a rush fee based on their imposed deadline. I have never had someone ask what the fee is for, but if they did I would simply tell them that the fee ensures that I will stay up all night if I have to in order to deliver their project on time. I do not think I would get many arguments.

Take time for project processing. It’s important to allot time for project processing, as in, getting a signed contract returned to you and a deposit if you require one. If you find about a project on Monday that is due Friday and it takes till Wednesday to get everything you need to start, you really only have two days to finish when you thought you had four or five. Let the client know that you can complete the project by the deadline provided that you have everything you need (background material, signed contract, deposit, etc.) by a specific day.

This is why it’s important to assess the full scope of the project. If you’re waiting on other people to give you material in order to start the project, that could delay the project and you could wind up causing tension between you and the client. When you set the rules, be sure to let the client know about everything you need in order to get started and deliver the project on deadline—including the red tape.

Say no. If you have to say no, it’s okay to say it. You are not obligated to complete a client’s every request. Just be sure to give them a prompt response. If I need time to decide if I can take a project, I simply ask them when they need to know by. This is basic common courtesy. Being open and honest—even if you have to turn down a project—will likely earn you trust and respect with a client, which can be beneficial for jobs in the future.

So you’ve taken the rush job. You’ve got everything you need to start and the only thing ahead of you is to complete the task and submit the work on time. Now that everything is set, there’s one more thing you’re likely to need: coffee.

Kristen Fischer is a copywriter and author who lives at the Jersey Shore. To learn more about her, visit www.kristenfischer.com.

We have another Psd Plus tutorial exclusively available to Plus members today. If you want to take your illustrative compositional skills to the next level, then we have an exciting tutorial for you. Discover how to use numerous photo and design elements, then combine them to create an effective free flowing digital illustration. As usual, loads of great tips and techniques in this two part tutorial! You’ll see Part II come out next week.

Learn to Combine Techniques in this Psd Plus Tutorial

In this two part Psd Plus tutorial, we’ll take a look at another popular web topic. While the entire piece will be build around the main subject, we’ll add lots of eye-catching detail by using self made photos, free online resources, and hand drawn ornaments.

Plus members can Log in and Download! If you’re not a member, you can of course join today! Below is the final image after both tutorial parts.

For now though, we’ll get this far in this first part of this two part series.

Precise and Detailed Instructions Inside

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

PSD Plus Membership

As you know, we run a premium membership system here called ‘Plus’ 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 Plus and Vector Plus, too. If you’re a Plus member, you can log in and download the tutorial. If you’re not a member, you can of course join today!

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

In our last Linkswitch, we had a look at a NY Times article on the “self-employed depression.” While it’s true that recent events have made making a living harder for many people who put themselves in the self-employed or freelance category, many freelancers are finding that business is as good as ever. A few days after, we published a piece by Martha Retallick on surviving the economic downturn. It’s clear that the state of the economy is an important issue for freelancers, as tiresome a topic it can get with the media milking it for all it’s worth.

So here’s what we want to know: how many of our readers are doing well despite it all, and how many of you are facing difficulties? Is the depressing and rather biased NY Times piece accurate or just another story written to sell? Cast your vote in the poll and then feel free to vent your economy frustrations in the comments.

When we started FreelanceSwitch back in April 2007, the site consisted of just a couple of blog posts and an about page. Over time we upgraded the design to v2, added forums, a job board, podcasts, resources like an hourly rates calculator, spun up a Twitter account and of course boosted the number of blog posts!

Today I’m very happy to unveil the latest iteration of FreelanceSwitch which introduces a bucketload of new features including a directory of freelancers complete with search facilities, profile pages for users, unified logins for the forums and the rest of the site, a resource directory and of course a fresh design for the whole site.

Accounts, Profiles and the Freelance Directory

The biggest change in version 3 is that we’re introducing a much more robust user account system. Previously we used to have forum accounts and job board accounts. We’ve now merged the two into a single FreelanceSwitch account system.

There are two types of accounts:

Free Accounts …

If you sign up to a free FreelanceSwitch account you’ll be able to:

• Chat on the forums
• Create a basic Profile page with contact details, description, external URL and a couple of skills tags
• Appear in the Freelancer Directory

Paid Accounts …

For $7 a month you get to:

• Apply for jobs on the job board
• Additional Profile features including extra URLs, extra tags, testimonials and work samples
• Appear at the top of any searches of the Freelancer Directory and have more details shown with a larger profile image

What the Profile Pages look like

You can see a sample profile page that I’ve made for myself:

The New Design

The new design is an evolution of the previous look and retains many of the same elements, just repackaged with a bit of freshness.

Some things you might be interested to note are:

• The whole site from forums to job board to blog has the same unified design now
• We’re pulling in fresh jobs into the sidebar
• We’ve got a fairly unorthodox comment layout which emphasizes big text for readability
• We’re using sIFR to render out the FreelanceSwitch font in our headings. It means a slight lag in page loads, but it just looks so damn neat!
• We’ve added a welcome panel to the homepage to help clients use the site
• The site is designed so it looks like the old site … but newer!

Here’s a little look at how FreelanceSwitch has evolved over the years:

New Forum Skin

6 months ago we moved the forums over from Vanilla (which was having some problems) to BBPress – a neat forum app made by the same people who make WordPress.

Because it was done in response to a sudden crisis, we didn’t have time to skin the forums. I wanted to take a moment to thank all our community for putting up with the bare bones BBPress theme for half a year!!

It’s taken us a long time, but finally we’ve got a nice new outfit for you all. And we won’t be reverting to the birthday suit ever again!

Resource Directory

Some of our most popular posts here on FreelanceSwitch are posts listing useful web resources for freelancers. That’s why we’ve compiled a special resources directory of useful links to services and sites that freelancers can benefit from.

We’ll be adding to it over the coming weeks to get it really complete. If you have a suggestion, feel free to Submit a Resource.

The directory is built using a custom WordPress plugin which we’ll be making open source via Nettuts+ later this week!

Features, Features, Features

Along with all our other changes you’ll see a few new minor features and tweaks including:

• Subscribe to Comments via Email
• Search Jobs, Directory, Forums, Resources or Blog Posts from the header
• Recent Jobs in the blog sidebar
• A Press page
• A listing of all our fantastic contributors and authors
• Tweet This counter on posts
• Better author profiles on posts
• Related articles that doesn’t break!
• Threaded comments

And doubtless there are a few more features that I’ve forgotten all about!

What We’re Working On Now!

While the new site is up, we are actually still working on more features and upgrades. In particular we’ll be working to integrate the blog comments system with the new account system. We’ll also be adding a little user badge system so you can figure out who has complete profiles, who is a writer and more.

You can also look forward to more features and utilities in the Paid Account system as we work to increase the value you get for your hard earned cash.

Bugs, Fixes, Feedback

If you notice anything which doesn’t appear to be working as it should leave a comment below, or send us a ticket. Because of the complexity of the site structure and the fact that we’ve had a 24 hour shift getting the site launched, there’s bound to be a few teething issues but we’ll get them within the next couple of days!

The Freelancers Who Worked On This

As it always has been FreelanceSwitch has been put together by a team of freelancers. So I’d like to take a moment to say awesome job to:

Derek Herman who coded up all my Photoshop work, the guys from Instinct who built the Resource Directory plugin and Mathias Meyer who is not only a FreelanceSwitch writer, but also a very good Rails developer!

The site is a really tricky mix of WordPress, WP Plugins, BBPress and Ruby on Rails, and it’s taken a very talented and dedicated team of freelancers spread over four different countries to pull it off!

With another month in the books comes the roundup of the best content on the net for June. The tutorials featured this month explain basic and advanced techniques for Photo-Manipulation, as well as two types of digital painting tutorials – that each have very different
results.

There were also some very interesting and informative articles featured this month, for example who knew that Twitter could make you a better designer? Read along and find out how. Finally, we have a set of freebies that will keep you busy downloading all day!

Tutorial Wrap

• 

  Super Cool Water Color Effects

  Our first tutorial of the month focuses on using watercolor brushes as well as textures to create a nice looking design that gives off the effect that it is being painted with watercolor brushes. The effect is very easy to achieve and the author of the tutorial also gives us the brushes he used as well as the texture. This was inspired by more complicated and intricate versions of this type of style, but if you are into it this, then it’s a great start to mastering this type of design.

  Visit Tutorial

• 

  Digitally Painting Portraits in Photoshop

  This tutorial focuses on digital painting techniques that would be associated with comics. The final product is a cross of
  realism and comic book art, so this if you have a tablet and are willing to sit down and paint, then you should check this tutorial out. It is very detailed, 6 pages worth of information. Everything that you would need to do this is included in the tutorial, so this is really something every aspiring digital painter should check out.

  Visit Tutorial

• 

  Self Initiated Abstract Art Tutorial

  This tutorial focuses on something called Self Initiated art. This type of art comes about from low time and budget situations. And the author of this tutorial will show you how to take advantage of a bad situation and make something abstract and new. The author also promises that by the end of the tutorial you’ll have two new libraries of elements to use in your future art. A very interesting tutorial with a creative and abstract result that is worth checking out.

  Visit Tutorial

• 

  Creating an Abstract Floral Explosion

  This is another fairly simple Photoshop tutorial that focuses on the use of stocks. Eight different elements are used in this tutorial to create a nice visual effect of an abstract floral explosion. The techniques used here aren’t very advanced, so this tutorial is geared for more of the novices to Photoshop. None the less every step is explained in good detail, so check this one out.

  Visit Tutorial

• 

  You Will Stand Alone Photo manipulation

  Like our last tutorial this one also doesn’t boast an amazing final product. What is does do is show the newcomers to Photoshop how to
  properly blend stocks together. The use of filters is also a big part of this tutorial, showing how filters can bring all the different stocks you have
  together. There is also a good attention to detail which makes this tutorial a good read for the
  beginners.

  Visit Tutorial

• 

  Design a Space Dancer Scene with Nebula Textures

  This tutorial is a little more advanced then the last two. In this tutorial you will learn how to use textures to bring an immense
  amount of color to your artwork, in this case a Nebula texture is used. And after reading the tutorial you will see why they are great to use. On top of all of that the author focuses on explaining the importance of layer masks and filters.

  Visit Tutorial

• 

  Drawing Fairy Tale Characters in Photoshop

  This tutorial will teach you how to draw and paint a character in Photoshop. You can say this would be the novice version to the Digital Painting tutorial we just featured. The author will teach you how to use the Dodge and Burn tools to color your character. This tutorial gets very detailed by explaining how to color different types of fabric on the character as well as facial features.

  Visit Tutorial

(FREE!) Download Picks

• 

  Furry Monster Icon Set

  This icon set comes from the Spoon Graphics Blog, they feature a set of four furry multi-colored monsters. The icons are compatible with both Macs and PCs. Along with the icons comes a tutorial showing how to create these furry monsters yourself. So download these icons or make your own and personalize it with all the features you want.

  Visit Download Site

• 

  Twitter Icons For your Blog

  We all know the immense amount of popularity that twitter has right now. A lot of the most popular blogs have links to their twitter accounts, so if you want to do the same then these icons are for you. You will get a set of twelve icons varying in different sizes, and varying in context. Some of the birds have clever Twitter sayings like “Follow Me” or “Tweet It.”

  Visit Download Site

• 

  Grass Texture

  Here are some more textures from Bittbox’s popular texture Tuesdays. This week’s pick is a set of high-resolution grass textures. There are five different textures in the pack and each one is a different type of grass. The textures range from freshly cut vibrant green grass to dull old grass. Each texture is around 3000px by 2000px so they are massive and can be used for plenty of things.

  Visit Download Site

• 

  50 new and Beautiful Wordpress Themes

  If you are looking to start a new blog, then you must check this set of freebies out. It’s a set of 50 brand new Wordpress themes. There is a large variety of themes ranging from gaming to business. Each one of these themes has a very sleek design that is sure to be an eye catcher. So download a theme of your choosing and start blogging.

  Visit Download Site

• 

  Fresh Free Fonts

  This is a very cool freebie filled with four awesome looking fonts. The styles range from a grunge army font to a poker-face font, and more. There isn’t much to say about this, so check it out for yourself.

  Visit Download Site

• 

  87 Mind Blowing Nature Wallpapers

  The title says it all. These are really mind blowing scenery shots that will definitely be on a lot of desktops soon enough. We all know the beauty of nature, and now we have a small reminder about some of the wonders in this world. From animals, to
  beautiful sunsets, to flowers, everything is covered in this great wallpaper pack.

  Visit Download Site

• 

  Watercolor Icon Pack

  This is a unique set of icons that are brought to us by Tutorial9. They are cleverly designed so that the background of wherever you place them will seep through, giving it a real water color painted effect. The set contains 36 icons varying from the all popular Twitter to other things like mail and RSS.

  Visit Download Site

Article Wrap

• 

  How Twitter Helps Designers

  This is an interesting read because most Twitter users don’t associates it with becoming a better designer. But the author of this article begs to differ, he lists six solid reasons why the networking giant helps designers learn more about their work and become better.

  Visit Article

• 

  Hardest Part of Being a Graphic Designer

  Since our last article focused on the positives of being a designer, I figured it would only be right to shed some light on the negatives of being one. This article is an interesting because you get the answers from several designers, each giving their two cents about the topic.

  Visit Article

• 

  Web Design Polishing

  This article focuses on turning bland websites into something more vivid and attractive to the perspective customer. The author breaks it down into 10 different things you need to focus on, and he gives links to informative websites that focus on perfecting web design. So for the web designers out there, this one is a must read for you.

  Visit Article

• 

  18 Fresh Font Designs

  Here we have a little inspiration article for all the devoted typography nuts out there. This article features 18 fresh and new-age font designs that are catching the eye of many people right now. The type of font designs mentioned in this list are sure to inspire you, so check out all of the designs as well as their creators.

  Visit Article

• 

  Taking Design From Good to Great with Gradients

  This article focuses on the use of gradients to turn a bland design into something a lot more appealing to the eye. The author gives seven great examples of good gradient use, and also highlights the type of gradient used in the design. Along with all of that, the author gives her own demonstration of making a design and showing how much a gradient benefited the illustration.

  Visit Article

• 

  Improve Usability On Your Site On A Low Budget

  This article gives ten really great tips for the struggling website owner who needs to better their sites interface on a low budget. The ten solutions that are given are paired websites you can visit to learn more about the idea that is introduced in the article. Every website owner should check this out because everyone could make their blogs or websites a little more efficient, and who wouldn’t want to save money while doing it?

  Visit Article

• 

  Common Mistakes in Logo Design

  All of the logo designers should really read through this one because the author points out ten of the most common mistakes that a designer can make when creating a logo for a client. All of us probably have made these mistakes once or twice and the article shows us a simple and easy solution to these common issues. Some of the common mistakes include making overly complex logos and relying too much on color. Each mistake listed is illustrated with a logo so the readers can get a visual example of what went wrong.

  Visit Article

• 

  Designers Favorite Fonts and Why?

  Our last article of the month focuses on the favorite fonts of different designers. Jacob Cass, the author of this article sent out a “tweet” on Twitter asking designers what their favorite font is and why. And in this article the results are posted. 19
  different fonts are mentioned by a lot of different designers. So check this article out and see why you should be using some of these fonts.

  Visit Article

“In this tutorial, we’ll learn how to take splattered paint Photoshop brushes and apply them to the contours of a model’s face. This is a relatively simple technique, which yields excellent artistic results. Let’s get to it!” Justin Van Genderen

Here is a link to the written version of the tutorial How to Mold Paint Splatter to a Face in Photoshop and the video version is below.

The initial concept was the creation of an ‘atmosphere’ – a background for the car. Using images and some painting techniques over that images I made a fantasy scene. This tutorial will explain some of those techniques and how various Photoshop tools work. Let’s get started!

Final Image Preview

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

Resources Used

Stock Images:

• Creation and 3D modeling Clicheria
• Tikal Temple by ryanweis
• Seagulls by dtmiRRor
• Fernando de Noronha por by Baltar
• Thailand by devers01
• Irish Abbey by annsam
• Ruin by liesie
• Dunnottar Castle by macieklew
• Looking East-Northeast by djwudi.
• Ocean Lake and Alamere Falls by brothergrimm

Brushes:

• Grass brushes 2 by *Katikut
• Hair Brushes III by Scully7491
• Hair Brushes by Darkresources
• hair brushes by WCS-Wildcat

Step 1

Usually before I start to do a manipulation, I go through an initial process: sketches, looking for references, images, stocks, inspiration…I recommend that you do two things before you start to do the manipulation itself:

• Define what you will do, and how you will do. I recommend sketching, but some people are abler to only keep what they want to do in their mind, and work from that.
• Search some references: all kind of things related to your initial concept. That will help so much.

These steps, are extremely important, principally the sketch. Try to define the sources of illumination in the sketch, you will need it.
About the references, I searched specifically for car ads, and I found the website of 6B Estúdio. I found some awesome references that served as inspiration for this illustration.

Step 2

Now I start a quest for stocks that fit with the initial idea that I had. I started searching for the platform where the car will rest. I started searching on stock.xchng for some cliff edges, but didn’t find anything that was flat enough or with a compatible perspective.

I started looking on Flickr, and found some really good images and made a preliminary collage. One thing: make sure the owner of the image allow the use of the photo. I continue to find each image individually and just put them together. The sketch help so much on this step…

Step 3

Now we’ll start to collage our images together. As the name suggests, it’s about cutting and pasting each stock into our work. Each kind of image is a different type of render after cutting. Mainly, I use the Pen Tool, but I’ll show some others too.

Pen Tool

I think that is the best cutting tool, because it uses paths, so the final result becomes more anti-aliased and more smooth. The Pen Tool can be used to render any non-organic material, I mean: we can render cars, motorcycles, clothes… But the Pen Tool doesn’t work well for organic images like peoples, animals, landscapes, trees (these are really difficult to get good results with the pen tool).

You can access the Pen Tool (P) in the Tools Menu. Also, enable the Path option, so when you trace with the Pen Tool, you will not create a Shape layer.

The last resource that I like to turn on is the Rubber Band. To enable it, you click on the arrow after the Custom Shape Tool icon, then a box will be opened.

When you’re rendering with the Pen Tool, you need to trace a little inside the original stroke of the image. This avoids the leftover bits from the background of the image.

After tracing, you just need to click with the right button and select the Make Selection option.

Tip: if you pressing Shift after you closed your trace, you may then create more selections.

Eraser Tool

The Eraser Tool (E) is very useful to render irregular surfaces or blurred images. Also there are a lot of specific brushes to render grass, hair, and some others. These brushes can be downloaded on the resources list at the beginning of the tutorial. They save work and your work will look more realistic and professional.

The Eraser Tool combined with a Graphic Tablet can be very useful, because the pressure sensor of the tablet will make for more precise traces. Let review how this works.

I used a background with a different color, this way I didn’t leave leftovers on the image. I don’t care about the cut quality because I can correct it later.

Tip: you can expand your workspace by pressing the Tab key. This will hide anything and you’ll only see the image workspace. To make them appear again you just need to press Tab again. Also, if the brush tip disappears, make sure Caps Lock isn’t turned on.

Other Methods

There are a lot of another methods to render images, like masks, plugins, selections by color and the Magic Wand Tool too! This tool, I bet you already tried to use, but maybe you are unhappy with the final result. This tool would be the perfect solution to rendering, but the final quality of the cut-out render is too bad. See the result of a render with the Magic Wand Tool below.

Observe that it left white parts and it is really serrated. One solution for this is the Defringe Tool. It is found by going to Layer > Matting > Defringe. It will fix the white issues on the image a little. But I really recommend that you don’t use these methods for objects that stay too close. I mean, you can use the Magic Wand Tool to render minor images that stay far away in the illustration, but not for large images and especially not those that are the focal point.

Further Resources

For more information on Selection Methods visit the Psdtuts+ tutorial A Comprehensive Introduction to Photoshop Selection Techniques.

Step 4

After you found all stock images you will need to do a collage, cut-out every image using your preferred method and put them together. This step shows how important the initial sketch is, because you can lose yourself when you’re doing the collage. Don’t worry about realism for now. Just put them together, on some areas I need to use the Clone Tool (S) to fill it. See the screenshot below.

Step 5

Using the Clone Tool is quite easy. I don’t cover the details of how to use it here, so I recommend you read this clone stamp tutorial. The collage steps don’t need to be perfect, you really don’t need perfect realism at this stage.

Tip: keep every image on a separate layer. It’s really recommended because sometimes you will need to edit one thing separate of the others and if you keep everything on the same layer you will had some problems.

The process was quite simple, I just clone some parts of the original image in another layer, and use the Pen and the Eraser tools to cut and make the continuity of the image. See the original images (I deleted some parts to fill better with the cloned layer).

Below is my semi-finalized image, I just put the images in their respective places and cut/cloned some areas.

Step 6

Each photograph was taken under different circumstances, places, lighting, and times. In other words, it’s very hard (maybe impossible) to find different images with the same exact characteristics. That was one of the hardest things on this job, because the two images that I found of the ocean had so many differences.

To give the same tone to both, I used some adjustment tools. I think it will be easier and will create a better effect if I edit the right image.
I think it’s very unnecessary to show a lot of values that don’t necessarily apply to other images. So, I’ll show some of the tools I used and I’ll leave to you the task of making the images match as closely as possible.
There’s no secret to it, you just need to observe and experiment with the different tools. I’ll show some tools, their functions, and use:

Levels

Access Levels via Command + L or Image > Adjustments > Levels. This tool controls shadows, midtones and highlights individually. Take a look at the diagram below.

This diagram shows three tones: all images had darker or highlighted areas and some of of them are mid tones. In our case, the first image is too saturated, in other words: the image has few midtones and many shadows and highlights.

The predominance of extreme tones causes an impact. But the second image is completely desaturated, all the image are in the same lightness and midtones. The shadows and desaturated image aren’t too far as the highlights ones.

If you don’t have much experience with manipulations, then I think it will be hard to see these details, but as the time pass unconsciously you will start to see that better. So don’t be hurried and calm down, they are abilities that come with time. See some functions of these tools below.

Color Balance

We saw how edition the lightness of images works. We can control if the image will be more dark or clear, but how do we adjust the image’s colors?
There is a specific tool for it, it’s Color Balance. This tool allow us to change the balance to darker, mids and brighter colors. Let review the functions of these tools.

Gradient Map

One of my favorite tools. The Gradient Map gives a gradient for certain tones. It’s hard to explain how it work, I made a diagram to try to explain it. This tool can make some really nice effects if you play with the Blending Modes. I hope you understood how these very useful tools works.

Step 7

After I did the background collage, I started to find some stock images for the sky. Normally I try find some images on sxc.hu or on DeviantART, but this time the size of the final work was very large, so I looked for images in CGTextures. This site has high-resolution images. There are many great stocks on the site.

Again, I just did some collage here, and didn’t worry about the differences between the images. I just took care to create a visual logic between the images. I create clouds that seemed more distant and the others were made to appear closer. The tools I used were basically the Clone Tool and the Eraser Tool with brushes set to Hardness of 0. After I made the collage, all I needed was to apply the tips of the sixth step to standardize the lighting, shadows, contrast, etc. The final manipulation of the clouds is shown below.

Step 8

One of my references was this old job (please don’t laugh, he he). I took the floating island idea from this work, but after I put the island on the manipulation, I had the impression that something was missing.

So I had the idea of making the island emerge from the water. For this I painted water dripping with a tablet. The island was made separately from the rest, and for Psd Plus members you can review how this was made closely in the included PSD files. The final manipulation of the island is shown below.

Step 9

I used three images for the island. I used a stock of two mountains as the base and an image from another island for the top of the island.
I made a preliminary collage, just rendering and pasting the images defining the composition of the island.

The base of the island was made using only one of the mountains. It seemed very empty to me, so I used both mountains to mount the base of the floating island. The idea from the temple that was designed after I had placed the island in the original image and the island looked too empty for me. My idea would be to maintain the island as it has always been there, floating on the ocean.

Step 10

My preliminary island looks like the image below.

Step 11

Now we’ll work on the lighting. I had in mind that it came from a point on the horizon of the image. So the back of the island will be the lighter side. If you look for some references, you will see that in images where illuminated source come from behind, the borders look more illuminated then the rest of image.

On the image below, the red arrow represents the original illumination of the top of the island. The blue ones shows the original illumination of the base of the island. The orange part shows the desired illumination.

To make the illumination I usually create Layers normally set to the Screen or Color Dodge Blending Modes and paint using brushes with a light color. I just use the Burn/Dodge Tools to do a quick correction. But don’t worry, use whatever tool you want, it’s just a correction. We’ll improve it later…

Step 12

Having finalized the island, I placed it in the manipulation, but thought it lacked something. I had the idea that the island could have simply emerged from the ocean, something more impressive. Water is one of the easiest elements to paint, at least in my opinion. I made a small guide to explain how I painted the water.

References

They always help in the case of paintings: details and texture can be observed in reference images. You can find references in any site, a simple search for images on the web will bring you many images to review, but remember, you cannot use them in the picture, just observe them, respect other peoples works.

Brushes and Settings

To the water, I generally use a Hard Brush (with Hardness at 100%). You can decrease this value if you need. Keep the opacity low (around 20% in light areas and dark areas at 5%).

Painting

Painting water is not difficult, however, is easy and even pleasurable, but we must maintain a logic when painting. In this case, as the island had already emerged from the ocean the water was dripping back to the sea.

Note the track that water makes to fall into the sea. In places with greater volumes of water I formed waterfalls, where there is little volume of water. It flows only to fall. The arrows in red show the track made by the island. The water follows the opposite, attracted by gravity.

Note when the water falls in the sea it forms waves and will be expanding, lose strength, and go away. See the painting without many details and the water is only a variation between shades of white with more or less opacity.

In this diagram, you can see (again) the track of water. In relation to the volume of water there is a greater volume at the beginning of the waterfall and when it fall in some area, there is shock and water is thrown about.

In regards to the lighting, instead of using shadows (I showed the image shadows, but for better viewing) in the areas of lighting, the opacity can be increased, contrary to the darker areas, where the opacity must be less . In the figure of the previous step you can see this with better clarity.

Step 13

After finish painting the water, I decided on some details. This is another element that is easy to paint, and follows almost the same logic of the water. I just fixed some details such as lighting, cracks and some patches in the images, my images (semi) final was that shown below.

Step 14

You must have noticed (or maybe not) that I didn’t mentioned the stock of the car. It is because it is a special case. As I said, the initial idea was the creation an atmosphere for the car. That car used is a 3D render, in my opinion it’s easier to work with 3D images in some cases.

The first difficulty was the perspective of the car, which was in a very bad angle. This hindered my search for stocks, then instead of looking for something to adapt to the car, I had to make the car fit the background.
Notice how the car’s angle is completely different from the image.

Step 15

Using the Perspective Tool (Edit > Transform > Perspective) you can adjust the angle and perspective of the image. Another tool I used was the Warp Tool (Edit > Transform> Warp), but we must be more careful with Warp because it may distort the image too much. I leave a picture as reference for the perspective. I recommend that you use guide lines to help.

Step 16

Okay, placing the car at the right perspective was relatively easy. Now the problems…the first one is the shadow. Indeed, it is not a problem but a matter of finding good references. Analyzing the reference images is one of the first steps, after all, we don’t record all the details in our minds.

You can search for reference images by using Google, Flickr, deviantART and even sites of paid stocks, or the free ones. But you should never use the reference images. Respecting the work of others is the first step to being respected. But finally, search some images for the shadow of the car, you can use any source you find, I used Google Images.

I see on the references that the shadow of the cars is almost straight, square or a rectangle a little unfocused. When the shadow is more straight, I like to work with Shapes. I do the initial form of the shadow using the Pen Tool, and I blur and delete what is necessary.

Another good tip is to make multiple layers with different opacities alternating the Blending Mode of each layer.

Step 17

But finally, do not go on deleting everything. We need to keep the logic in place. The parts with higher incidence of light are those that have less shadows. The thought here is that the main point of light comes from the horizon.

I made an example showing the main points of illumination of the finished image to use as reference for the shadow. In the diagram + is the intensity of illumination and - represents the intensity of shade.

Step 18

In the example above notice that there are two main points of illumination. The circle in red and the other in blue.

The main light comes from the red circle, and reaches the car and the platform where the car is. The blue one reaches only part of the ocean and the coast on the right side. There are still some points with a third source of lighting – very low. This is the case of a space in the clouds, in the rear of the car and all other places are painted in pink.

There is also a part where the shadows are prominent. You may notice how the car is a visible part and relatively light. The car is the main focus. This is a concept that always applies to every type of work, but in ads a special care must be taken because the emphasis should be on the product. Sometimes you exaggerated a composition, leaving the main product to the side, then the final result is not good.

I do not like the color of the car. This was the first of a series of changes that I do on the car. To change the color of the car, I only duplicated the layer of the car and and use the Hue/Saturation adjustment. To select it go to Image > Adjustments Hue/Saturation (Command + U). As its name suggests, this tool changes the Hue/Saturation of the image.

Additionally, you can change the lighting (Lightness). It is almost like a merge of the Color Balance Tool and the Levels Tool, but it is so much simpler. The Color Balance can also be used, but I particularly think it is easier to use the Hue/Saturation. Anyway, let’s see how it works below.

Step 19

In this case, I just changed the values of Hue. The concept that I had is that the lighting would be predominantly orange, giving a volcanic feel in the image. But the red car was breaking this uniformity. So I decided to leave the car with a tone closer to the orange lighting.

Step 20

Now let’s fix the lighting of the car. Based on the diagram of level of lighting, I’ll provide a guide to create the lighting of the car. Note that the original lighting of the picture is completely different from the lighting required.

Step 21

To do this I used light brushes with Hardness set to 0, and four main colors: white (#FFFFFF), black (#000000) and two variations of orange (#E6BC72), and brown (#5B3B13).

Using a low opacity, I did the most lightening of the car on the front. And the back was made darker. I put that layer in a Clipping Mask, so it will only occupy the limits of transparency of the image. That is, all effects will only reach the car. Note in the picture, the front looks pretty desaturated, but I’ll fix that later.

Now I did a series of adjustments in the car.

A. Painting the Brake

The brake of the original image was in a gray almost without emphasis, therefore, decided to paint it in red. The process is very easy. With a brush in red (#ff0000), I began to paint the area of the brake in another layer. Then I put a layer on Soft Light after the regular opaque one, then delete the parts that remain.

B. Adjustments in the Wheels and Lighting

I decided to give a greater emphasis on the wheels, therefore I used the Burn Tool (O) in the area of the wheels on the Layer that was setting the color of the car.

The Burn Tool is an interesting and useful tool, though I do not use it much. It edits specifically one of three tones in a simple and easy way through brushes. Like most of the tools in Photoshop, you can select which tone will be modified (shadows, midtones and light tones). The Burn Tool darkens each desired tone in the layer you’re working with.

Now I decided to correct the lighting of the car (so the car seems more saturated than before). A tip on the Burn Tool and Dodge Tool is to change in tone extremes (Shadows/Highlights) generates a more impressive effect. The Midtones soften the impact between the extremes of tone, remove the image results in alleviating much more impressive. But beware, you can’t exaggerate, also you cannot do this with very realistic work, for example.
Using the Burn Tool, alternating between editing the Highlights and Shadows came to the result shown below.

C. Reflections of Car

Some surfaces reflect the environment around them. I advise you to look for references, because when this reflection happens there is often a distortion as well. The references helps in the creation of any reflective object: water, metal, glass, mirrors, while taking into account how each object reflects. It is impossible for a wood floor, for example to reflect the same as a mirror.

To create the reflection, I used parts of the backgrounded, cropped them, always keeping them in the separated layers, and putting them into the Clipping Mask of the Car Layer. Also, I distorted these images using the Warp Tool (Edit > Transform > Warp) and Eraser Tool to delete some areas. Note that the reflection will occur mainly in places near the ground and to a lesser intensity on the roof, windows, lamps, and other…

The image shows the pieces of the copied file (each piece is on separate Layers). The next step is to define what Blending Mode to put the Layers. I had better results with the Blending Modes of Lighten and Screen with an opacity at 70% or less. There is no a basic rule for Blending Modes which is better, but I recommend you experiment until you find a good combination.

D. Chroming

I am particularly a fan of chromed details. I decided to chrome some areas of the car, only the details. To do this, use the Pen Tool to create shapes in the places you want the chrome. I chose the color #D9D9D9 to draw the shapes with.

Having made this shape with the Pen Tool, I duplicated the layer and change the Blending Mode. I put the first one in Saturation and the another on Overlay.

Now you ask, why? Simple, one layer will clear the saturation of the original image, and keep the same lighting, but will leave that area completely without color. The other layer simply adds luster to the chrome. With a few minor adjustments, we have finalized our car.

Step 22

Relax, this huge tutorial is coming to the end. After making the whole composition, I look at all the locations of the images to add detail. I really think that everything is in the details.

If you take a picture of a house, it’s not just a house, many years of events, might be a reform, or anything that has left marks in that house, and those are the details that make the difference in photo manipulations. After searching some places of the image, I found this part shown below.

Step 23

I decided to paint over the image to add improvements. When painting, I often use small brushes with the Hardness set between 60% and 100%, with low opacity, and use just using black and white.

It is difficult to explain the process of how to painting. In fact, I don’t know for sure how I do it. The only thing I take into account is the position of the main lighting. I tried to make it a more detailed and interesting mountain by playing with the brushes, and came to the result shown.

Step 24

This step is more a reference to details that you can add to its manipulation then a guide in itself. But at a certain point, references and good sources of inspiration are almost as important as tutorials and guides.

As part of the island, I made a few cracks and the effect of wet areas on the island. To make the cracks is relatively easy. I used a dark color with high opacity and other high-clear with low opacity. After making the cracks using the dark, you must clear one of the edges, using as reference the lighting of the main image. For the wet, I painted the water with a low opacity brush with white color, and just highlighted the borders.

Step 25

Finally, after cutting and pasting the images, adjusting levels, colors, creating effects, shadows, and all of the previous steps, we arrive at the step that will impact the work the most. This part is the most important of all because it changes the overall look of the work. To see the difference, review the before and after images below. Let’s go ahead and go through the steps that move us from the left image over to the right result.

A. Focus

Our initial focus is on the car, I think you are tired of knowing that, but I do not think we talk about our secondary focus, which is the Island.
After all, it is what makes the image so fanciful and incredible. To create the focus generally dim less important parts and try to lighten the most important. Usually the layer of focus is more or less like this.

You may have noticed, both the areas of the island and the car are in evidence (white), the other areas are darker. This layer was in Soft Light with a low opacity. It may not seem like much, but the subtle effects are what make the difference.

B. Lighting

The lighting is nothing more than to create something that fits with the initial concept. Always try to keep in mind the points of light. As explained in Step 17, this diagram was in my head, I knew where they came from each source of illumination.

Creating lighting is not difficult, it just requires a little attention.
I usually work with Color Dodge and Linear Dodge to create the lighting, but also use other Blending Modes.

A Long time ago, just when I started using Photoshop, I read a tutorial that basically explains lighting of signatures for forums. I do not know if you had contact with this type of work, but by that line that I stated. And this tutorial was a very valuable tip that I never stopped using it.

I just paint a layer background with black, and put it to Color Dodge, or Linear Dodge, and use a light color, which gives a very nice effect as shown below.

You can see that the places where it is painted in orange are places of strong lighting. The effect generated by the Color Dodge is below.

C. Final Effects

The final effects basically transform the image. At this stage I adjust lighting, color, brightness and other things, not individually as before, but now the whole image will be edited. I recommend you play with all the tools in Photoshop adjustments, changing the Blending Mode, creating and experimenting with new ways and effects.

The following is a guide and not a rule. Play with the colors of the gradients, using filters. Experiment and see the result you will understand what is behind this effect. There are theories that point, everything can be done, without exaggeration. I got these result with some Blank and White Gradient Maps set to Multiply. The final image is below.

Conclusion

I really hope you liked and learn from this tutorial. I focused myself to explain the tools, not just putting values and more values, so can understand the methods used in this tutorial. You can see a final version with a larger resolution here.

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

This is a new pack of Photoshop brushes available exclusively from Psdtuts+ for Psd Plus Members. We have a new set of Floral Scribble Brushes for you. They are great for adding an artistic and chaotic touch to your next project. This set of high quality brushes is available for Psd Plus members to download today!

New Exclusive High Resolution Photoshop Brushes

This new CS4 Photoshop Brushes Pack is created by Sean Hodge and is available for Psd Plus members today. This is a set of 18 Brushes, which are all high resolution at around 2500 pixels by 2500 pixels. This set of Scribbly Ink Floral Brushes were designed in Illustrator, but have an organic feel, and some have a bit of a Rorschach inkblot test feel to them. If you put these brushes to use, feel free to leave a link to the work in the comments below. Enjoy!

Members can Log in and Download! Otherwise, Join Now! A preview of the brushes are below.

See the Brushes in Action Below

Members can Log in and Download! Otherwise, Join Now!

Psd Plus Membership

As you know, we run a premium membership system here called Psdtuts+ Plus that costs $9 a month (or $22 for 3 months!) which gives members access to the PSD files for tutorials as well as periodic extra tutorials, like this one! If you’re a member you can log in and download the tutorial. If you’re not a member, you can of course join today!

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