To get the best effect, it’s advisable to use an image that is looking down on your subject. An image such as a busy street scene viewed from a multi-story building or where the camera is above the horizon line, works perfectly. Alternatively, you can also download the image I’ve used in this tutorial.

Step 1: Increasing the color saturation

We’ll start off by increasing the color saturation. This makes the effect more noticeable.

After opening your image, create a new Vibrance Adjustment Layer. You can do this by selecting the half-filled circle at the bottom of your Layers palette or from the Layer > New Adjustment Layer > Vibrance… menu option. The amount you increase the Vibrance & Saturation will depend on your particular image. For this image though, I’ve increased both to +40 to really exaggerate the colors.

Step 2: Adjusting the curves

Next, add a new Curves adjustment layer. Again, you can select this from the half-filled circle at the bottom of the Layers palette or from the Layer > New Adjustment Layer > Curves… menu option. Increase the highlights and decrease the shadows slightly to provide further contrast between the colors. The amount of adjustment required in the curves dialog may vary depending on the particular image used.

Step 3: Simulate the depth of field

The main effect in a Tilt-Shift image is the shallow depth of field. To simulate this, we first need to blur the image. Select your background layer (or the layer that has your image) and press Ctrl-J (Command-J on Mac) to duplicate this layer. If it’s not already, select this new duplicated layer and then select Filter > Blur > Gaussian blur… menu option. Blur your image with a Radius of 4.5 pixels.

With your blurred layer still selected, add a new Layer Mask by selecting the Add Layer Mask icon at the bottom of the Layers palette or by selecting the Layer > Layer Mask > Reveal All menu option. Make sure your Layer mask (not the image) is selected by clicking on it. Select the Gradient Tool and in the options palette, select Reflected Gradient (4th Gradient icon from the left). Also, ensure that the ‘Reverse’ checkbox is unticked. Next, drag the gradient vertically over a small portion of the image. To make sure it’s perfectly vertical, hold down the Shift key while you drag. What you are doing here is creating a mask on the blurred image so that the original image sitting on the layer below, can be seen. Since we only want to simulate a narrow Depth of Field, the gradient should be quite small. It may take a couple of goes to get the correct effect. Once you’ve added your gradient to the Layer mask, you should find that the area you dragged the cursor over will no longer be blurred.

Step 4: Fine tune your image

To ‘fine tune’ your gradient, click the small “link” icon between the image and the Layer mask (in the Layers palette) to turn it off. Making sure your Layer mask is still selected, select the Move Tool and use the Up & Down arrow keys to fine tune the position of your mask. The subject matter of your image will influence where best to position the mask to get the best effect.

Step 5: Grab a coffee

Once you’re happy with the placement of your mask, your image is complete. You can now sit back and contemplate what you’re going to “miniaturise” next

I’ve also published this tutorial on The Web Squeeze.

If you found this tutorial interesting I’d love to hear so please leave a comment. Thanks.

You can control whether this grid is displayed or not using the View > Show > Pixel Grid menu option.

If you don’t see the pixel grid menu option, then you most likely haven’t got OpenGL enabled in your Photoshop preferences. To fix this, select the Edit > Preferences > Performance… menu option. Make sure that Enable OpenGL Drawing is checked.

I personally find the Pixel Grid really useful. Do you? Leave a comment, I’d love to hear.

Guides can be dragged from the Rulers on the edge of your document, or you can also use the “View > New Guide…” menu option.

When using the menu option, as well as entering in the guide location using px, mm or whatever Unit measurement you’d like, you can also use percentages. This is a simple way of dividing your  document up into a neat grid or for getting those guides aligned perfectly down the center.

If you have any other tips on how you use your guides in either Photoshop or any of the other Creative Suite apps, leave a comment because I’d love to hear them.

At first, it can take a little bit to get use to. The good thing though is that it’s a simple change in your preferences to get your “floating windows” back. Simply “tick” or “untick” the checkbox in the relevant preferences dialog depending on whether you want your windows docked or not. Here’s where you can find the options for the three main Creative Suite applications, Photoshop, Illustrator and InDesign.

Photoshop

Select the “Edit > Preferences > Interface…” menu option.

Illustrator

Select the “Edit > Preferences > User Interface…” menu option.

InDesign

Select the “Edit > Preferences > Interface…” menu option.

It’s that easy! I hope you found this tip useful. I’d love to hear what you prefer so leave a comment. Me? I’m still undecided about the tabs. For the time being, I’ll use them a little while longer

The above image is one that I cooked up earlier so that you can see the finished layout

Ok, let’s get started…

First off, create a new document. Since you’ll be most likely using this effect within a website layout, the dimensions aren’t that important for this tutorial. Since it’s for a website though, the Resolution only needs to be 72 pixels/inch and Color mode is RGB.

I like to have my Photoshop documents organised neatly using layer groups. This makes it a lot easier to find your layers later on, especially when you have a large number of them.

Create a new Layer Group and within this group, create a new blank layer. Select the rounded Rectangle Tool and in the options bar, set Fill pixels and change the Radius to 5px. With the Foreground color set to #0e1219, create a rectangle that is 95px wide and 35px high.

Create a new layer above this existing layer then hit Ctrl+Alt+G (Cmd +Option+G) to create a Clipping Mask. Ctrl+Click (Cmd+Click) the original layer we created above to create a selection around it. Now, holding down the Alt (Option) key and using the Marquee tool, deselect the bottom half of this selection. What you should have remaining is a selection that covers the top half of your layer. Set your foreground color to #515253 and your background color to #929393. Select the Gradient Tool. In the options bar, select Foregrond to Background gradient and the Linear gradient type. Drag your gradient from the bottom of your selection to the top. If you hold down the Shift key, it will create a perfectly straight gradient. Ctrl+D (Cmd+D) to deselect.

Click the “Add a layer style” button on the bottom of the layers palette and select “Stroke” to add a new style to this layer. In the Stroke Layer Style dialog, set Size to 1px, Position is Inside, Color is #0e1219. Click OK to apply this layer effect.

Change your forground color to White and select the text tool. Add some text to your button. I’m using Verdana 12pt and calling this tab “Home”. Center the text horizontally and vertically align the middle of the text with the botttom of the gradient.

To make a “roll-over” or “active” state for your button, select your layer that contains the top half of your Tab (the one with the gradient). Click the “Create new adjustment layer” button from the bottom of the Layers palette and choose a “Hue/Saturation” layer. Select the “Colorize” checkbox and change the Hue, Saturation and Lightness values to a suitable color. I’m using 215/30/0 for Hue/Saturation/Lightness. Close this dialog. If it’s not already, add this Hue/Saturation Layer to your clipping group so that it only affects this one Tab.

To finish of your Tab, select the original layer we created (the one with the Tab background). Click the “Add a layer style” button on the bottom of the layers palette and select “Drop Shadow” to add a new style to this layer. Change the Opacity to 40% and change the Distance, Spread and Size values to 3.

To finish off, we’ll simply add a horizontal bar above our Tab layer group. Position the bar so that it overlays the bottom portion of the Tab. Duplicate your Tab layer group and change the text to complete your row of Tabs.

If you’d prefer not to add a layer to cover the bottom of your Tab, you could also hide the bottom of the Tab by using a mask on your Tab group. See, I told it was useful to keep your file organised with groups.

Did you find this tutorial useful? Let me know by leaving a comment.