Preview of Final Results

3D Textured Text Photoshop Tutorial

Step 1

Open up Illustrator, and with the Type Tool type a letter or text, I typed the letter “C” I used the font Adobe Caslon Pro, you can use any font that you like, just make sure that it is a bit thick font to yield better results. I set the font size to 400 pt & scaled it horizontally & vertically to 150% through the Character Palette, though don’t worry about the font size too much because we’ll be pasting it as Smart Objects in Photoshop so we can adjust the size at any given time. The color I used for the letter is #8CC63F.

Step 2

Now go to Effect>3D>Extrude & Bevel, make sure that Preview is on. Use the settings shown below, apart from specifying rotations for x, y & z axis, I chose Tall-Round from the Bevel drop down list. The settings will more or less depend on the font, so if you have used a different font play a bit, though I will advise to stay away from the fancier Bevel settings, mostly None setting works best. You can also make it more thick by increasing the Extrude Depth.

Step 3

After you’re happy with your 3D effect, it will be time to move on over to Photoshop. Open a new document in Photoshop. Now, copy your 3D text/letter from Illustrator & paste it as Smart Object in Photoshop, press Enter key or checkmark to commit. You can now resize your text to whatever size you want, in fact, bigger the better, but for the purposes of this tutorial, I will stick to a small canvas.

Power Tip: If for any reason, you want to edit the pasted 3D Smart Object, just double click on the Vector Smart Object thumbnail in the Layer Palette, press OK on the resulting window, the Smart Object will automatically open up in Illustrator, do the changes or editing you want, then go to File>Save & close the file & tadaa the changes will reflect in your Photoshop file.

//
//

// <![CDATA[
ord = window.ord || Math.floor(Math.random()*1E16);
document.write('');
// ]]>// <![CDATA[
document.write('');
// ]]>//


 

Step 4

Now, lets begin with the Photoshop magic, we will be adding various texture on the different layers & will spice them up with the variety of blending modes, the key is to experiment & choose the settings that will best suit your purpose.

Open the texture image that you would like to use, for the first layer I used a texture, lets call it Texture 1 from a texture pack on deviantArt. Go to Select>All & then Edit>Copy to copy the entire texture image, Now we are going to paste this image into our letter, but you have to tell Photoshop where to paste it. So return to your 3D text document & pressing down Ctrl/Cmd Click on Vector Smart Object thumbnail, this will select the entire text/letter, in our case, the letter “C”, now go to Edit>Paste Into (Shift+Ctrl/Cmd+V) to paste the texture image on “C”. Change the blending mode of the texture layer to Overlay.

Now, your image & layer palette should look like so:

Look at your layers palette now. You see your texture image there and a mask has been made that allows only the letter part of the image to show.

If you’re using different images, play around a bit with blending modes, mostly Overlay, Soft Light, Hard light, Multiply will give the desired results.

Step 5

Repeat the procedure prescribed in Step 4, but with a different texture. I used one of the texture from this pack.

In brief, open the texture image, Select All (Ctrl/Cmd+A), Copy it (Ctrl/Cmd+C) & return to your original document, pressing down Ctrl/Cmd Click on Vector Smart Object thumbnail to select the letter/text & go to Edit>Paste Into (Shift+Ctrl/Cmd+V) to paste the texture in the letter “C”. And, change the blending mode to Multiply.

Step 6

Now, its again time to do the same thing as mentioned in Step 4 & 5, but with the different texture image. This time I used a more colorful texture from a another texture pack over at deviantArt. And, this time I choose the blending mode to Soft Light.

This is how my image & Layer Palette looks like after step 6.

Power Tip: If you need to edit the filler texture image or if you don’t like how it looks within the letter, you can still change it! Just choose the Move Tool (V) & drag over with your texture layer selected. Also, if you need to resize the texture image select Edit>Transform to resize it.

Step 7

Now, select the Background layer & fill with a Gradient Tool (G). I used Linear Gradient & the colors for the two stops are as prescribed in the screenshot. Drag the gradient tool diagonally from bottom to top.

//
//

// <![CDATA[
ord = window.ord || Math.floor(Math.random()*1E16);
document.write('');
// ]]>// <![CDATA[
document.write('');
// ]]>//


 

Step 8

Pressing down Shift key select all the layers in the Layer Palette except the background layer & Link all of them. Also make sure to link the Layer Mask thumbnails with their corresponding layer thumbnails by clicking once between them.

Step 9

Now, we will do the reflection of our letter “C”. For that, select all the linked layers & duplicate them.

Step10

Merge all the duplicated layers & name it Reflection.

Step 11

On the Reflection layer, go to Edit>Transform>Flip Vertical & place it beneath the letter “C”. Adjust its perspective if the need be.

Step 12

The next step is to add a layer mask to the duplicate layer. To do this simply click on the add layer mask button in the layers palette.

Now pick the Gradient Tool (G) and draw a gradient (black to white) in the direction from bottom to mid top.

Finally just reduce the opacity of the duplicate layer and you are all done. I reduced the opacity to 20% , there is no golden rule about the opacity % , just play with the opacity setting & choose the one that suits your image.

Step 13

Finally, with the Type Tool, I wrote the words “for creativity” with the settings as shown in the Character Palette.

The font used is Larissa & can be downloaded from here. I also rotated the words a bit via Edit>Transform.

Then I applied the layer style, as shown in the screenshots below.

//
//

// <![CDATA[
ord = window.ord || Math.floor(Math.random()*1E16);
document.write('');
// ]]>// <![CDATA[
document.write('');
// ]]>//

Step 14

To add a bit of finishing touch, I added Outer Glow to the Vector Smart Object layer, as shown.

And, that’s how my Layers palette in end & final image looks like.

Here, is a another example of image, I made with the same technique.

To take it further, play & experiment with various textures, the blending modes, also changing the various Adjustments options like Invert, Posterize, Hue/Saturations settings etc. gives the different results. You can also make the text look grungy or rusty using grunge textures, its just the matter of exploring the powers of Photoshop & tapping your creativity!

Step 1

First of all create a new document with the dimensions: 1080 by 880 pixels. Now we are going to fill in the background with a solid colour by going Edit > Fill, and use the colour #CDECFF.

Step 2

We are now going to be creating the navigation background. Create a new layer (Layer > New > Layer) and using the rounded rectangle tool make a selection (860 by 120 pixels) in the center, at the top of the document so that only the bottom curves are showing (hide the top ones outside the document by moving the selection up). Fill (Edit > Fill) the selection with the colour #151515 using the same method we used in the first step.

Step 3

On the navigation background layer go Layer > Layer Styles > Gradient Overlay and enter in the settings below. Clicking on the picture beside “Gradient:” brings up the window on the top.

Now your navigation should be looking like this:

Step 4

Now we are going to be adding in some text links to act as the navigation for the site. Select the text tool from the tool box and add in some names of pages that you’d have for a photography site. I’ve chosen home, about, portfolio, services and contact. The font I’ve used is Verdana (16pt) and the colours are #EAEAEA for the links and #010101 for the bars between the links.

Step 5

Next up we are going to be adding in the logo / header for the site. So create a new layer and using the rounded rectangle tool again make a selection of about 200 by 240 pixels (with a radius of 10 pixels) on the right hand side of the navigation, and using the technique we used for the navigation background make it so that only the bottom curves are showing (not the top ones). Select the gradient tool and set it to radial. Set your foreground colour to #E0E1E1 and your background to #F1F1F1, fill the selection with a gradient (left click somewhere near the top center and drag to the bottom and release).

Step 6

Now we are going to be adding a layer style (an outer glow) to the logo background. To do this we go Layer > Layer Styles > Outer Glow. I’ve used the settings below.

Your layout should now be looking like this.

Step 7

Using the text tool add the name of the site and a small description underneath. I’ve made up a name “PhotoSmart” for the site and the description is “Professional Photography” – alliteration The colorus I have used are #272727 (for the darker colour) and #7b7b7b (for the lighter colour).

Step 8

Now we are going to be doing the actual logo of the logo If you don’t want to make a shape from scratch for your logo, just use a custom shape from Photoshop. I’ve filled my tick with the colour #85c7ff and added a small white outer glow (Layer > Layer Style > Outer Glow).

Step 9

Create a new layer (Layer > New > Layer) for the top content background area. Using the rounded rectangle tool make a selection of 860 by 590 pixels and fill (Edit > Fill) with #181818.

Step 10

Create another new layer and make a rounded selection of 860 by 400 pixels at the bottom of the background (leave a 10 pixel margin at the bottom). Fill this selection with white (#FFFFFF).

Step 11

Add in some fill in text for the top content area. The colour I have used for the titles is #85C7FF.

Step 12

Now we are going to be adding a divider between the two paragraphs. On a new layer make a selection of 40 by 180 pixels (however high it is between the top and bottom of the black section). Fill the selection with a linear gradient from #181818 to #1e1e1e using the gradient tool.

Step 13

Duplicate the divider layer and go Edit > Transform > Flip Horizontally. Move the duplicated layer to the right so there is a one pixel gap between the original and the duplicate.

Step 14

Add in some fill in and footer text in the white content area and you are complete.

Final Results

Add some finishing touches, maybe a brush in the background underneath the navigation and you’re complete. Click on the image below to see the full version.

//
//

Preview of Final Results

Clean White Navigation Bar Photoshop Tutorial

Step 1

To start off with, create a new document, for the purpose of this tutorial I have chosen 500 by 200 pixels. Fill the background with a radial gradient from a medium-dark grey to a darker grey. You can do this by selecting the gradient tool from the tool box and setting it to radial. Set your foreground colour to #45443f and your background colour to #31302c. Left click in the middle of the document, drag to the right and release.

Step 2

Create a new layer (Layer > New > Layer) and select the rectangular marquee tool. Make a fixed size selection of 440 by 50 pixels in the middle of your document.

Step 3

Fill the selection with a linear gradient from #f4f4f4 at the top to #d9d9d9 at the bottom.

Step 4

We are now going to be applying a couple of layer styles to this layer.

Layer > Layer Styles > Drop Shadow

Layer > Layer Styles > Outer Glow

Result:

Step 5

Now using the text tool add in some text links. The font settings I’ve used are Verdana, Regular, 13 pt, Sharp, #686868 (and #ac0000 for a hover effect).

Step 6

Lastly, we are going to be adding some dividers between the links. Firstly, create a new layer and select the rectangular marquee tool again. Make a selection of 1 by 50 pixels between the first two links. Fill (Edit > Fill) the selection with the colour #b4b4b4.

Step 7

Now move the selection across to the right by one pixel (left arrow key on your keyboard). Fill this selection with the colour #d9d9d9.

Step 8

Duplicate this layer and move the duplicate layer along to the right so it is between the next two links (hold down the shift key while moving the divider to the right to keep it in-line. Repeat this process for the rest of the links and you are finished. I’ve also lowered the opacity of the layers by 50% so they don’t stand out so much – but that’s up to you

Earnings Example
» You view 10 videos per day = $0.10
» 20 referrals view 10 videos per day = $1.00
» Your daily earnings = $1.10
» Your weekly earnings = $7.70
» Your monthly earnings = $31.00

The above example is based only on 20 referrals and 10 daily video views. Some days you will have more videos available, some days you will have less. What if you had more referrals? What if there were more videos available?

Join now and receive a $0.05 Sign-up Bonus

Rate

http://adf.ly

Step 1: Create a new document

First of all create a new document 500 by 500 pixels. Now we are going to be filling the background with a dark brown colour, to do this go Edit > Fill and use Color with the colour number #2C241f.

Step 2: Draw the box

Secondly, we are going to be creating the actual box that we are going to be sticking everything into. So create a new layer by going Layer > New > Layer (or Ctrl + Shift + Alt + N for the shortcut). Select the rounded rectangle tool and set the following settings.

Now click somewhere in the document around the middle so you have a outline of a rounded box. Now right click and go Make Selection.

Set your foreground colour to #483A2E and your background colour to #30271F. Now select the gradient tool and set it to linear gradient (and make sure that it is going from the foreground colour to the background colour). Left click somewhere in the top left and drag to the bottom right of the selection and release.

Now it should be looking something like this.

Step 3: Draw the header

Next up we are going to be applying an outer glow to our box. To do this we are going to be going Layer > Layer Styles > Outer Glow and fill in the settings below (the colour is #1e1815).

This is how your box should be looking now:

Step 4

Thirdly we are going to be creating a header for the box. So select the area of your box (Ctrl + Click the layer in the layers window). Select the rectangular marquee tool and while holding down the Alt key drag across from the bottom right up to the top left (leaving 30-40 pixels at the top) – this will deselect most of the selection so we are just left with the header part.

Set your foreground colour to #d0d63e and your background colour to #819026. Select the gradient tool (this time set it to radial gradient) and left click near the top left and drag to about the middle of the selection and release.

Step 5: Add a reflection

Using the move tool move the selection down about 20-30 pixels so that the top of it is in the middle of the header (hold down shift so that it does not go sideways when you are moving the selection).

Now go Edit > Fill and fill the selection with the colour white (the hex number is #ffffff). You can deselect (Ctrl + D) now because you don’t need that selection anymore.

Select the area of the green header like you did before and invert the selection (this will select everything except the header – the shortcut is Ctrl + Shift + I).

Hit delete on your keyboard and you should be left with something like this.

Now set the blend mode of the white layer to Soft Light and the opacity level to 30%.

Step 6: Add a title

Using the text tool add in some text for the header of the box.

Step 7: Add the thumbnails

Lastly we are going to be adding in some Flickr images to show you what it would look like. So get some Flickr images (I’ve got some 75 by 75 pixel ones) and stick them with 10 pixel spaces between each other.

Now we are going to be applying a stroke to the Flickr images. So go Layer > Layer Styles > Stroke and enter the settings below (the colour is #483a2e).

Your completed box should look something like this

Preview of Final Results

Blue on Black Navigation Bar Photoshop Tutorial

Step 1

Firstly, create a new document – the size I’ve used is 540 by 220 pixels. Now for the background I’ve filled it with a black colour. To do this go Edit > Fill with the colour #0d0d0d.

Step 2

Secondly, we’ll be making the background for the navigation buttons to go inside. Create a new layer (Layer > New > Layer) and select the rounded rectangle tool. Make fixed size selection of 480 by 50 pixels with a radius of 5 pixels in the middle of the document.

Fill this selection with a linear gradient from the colour #151515 to #050505 using the gradient tool. Deselect – Ctrl + D. Set the fill of the layer to 60% (the setting underneath the opacity in the layers window). The difference between opacity and fill is simply opacity changes the opacity of the entire layer and fill changes the opacity of everything except the layer styles.

Step 3

Now we’ll be adding a couple of layer styles to this navigation background.

Layer > Layer Style > Outer Glow

Layer > Layer Style > Stroke

Now your document should be looking something like this.

Step 4

Next up we’ll be adding in the buttons. Create a new layer and using the rounded rectangle tool again make a selection of 150 by 40 pixels (with a radius of 5 pixels again) on the left side of the navigation bar.

Fill this selection with a linear gradient from #323232 to #161616 using the gradient tool. Set the fill for this layer to 50%.

Step 5

I’ve applied three layer styles to this button to give it some depth and make it look cooler.

Layer > Layer Styles > Inner Glow

Layer > Layer Styles > Gradient Overlay

Layer > Layer Styles > Stroke

Your navigation bar should now look something like this.

Step 6

Select the text tool and add in some text – the font styles that I have used for the text are Bell Gothic Std, Bold, 20 pt, Crisp, #ffffff.

Step 7

Now repeat the button steps so you have two new buttons – I’ve decided that I’d make the middle one a different colour to stand out (this can be like a mouse over effect or something if you decided to code this navigation bar for a web layout). The blue colours I used for that are #14b9ef and #054573.

Step 8

Because we have set the fill of the layers to 50-60% we can adjust the background and it can be half see through – below I’ve put a radial gradient with colours used in the vista theme.

Preview of Final Results

Create Custom Photo Brushes Photoshop Tutorial

Step 1

Open Photoshop and open a photo to use as a brush. It should be something that would work in a pattern, where the content of the photo is obvious as various sizes. I’m using this “blue angel wing” I found on iStockPhoto. IT should be relatively large, perhaps 1000 pixels for both width and height. If you create a brush at a small size, setting the brush to a larger size than originally created will cause it to lose resolution. But making it smaller is no problem, just like resizing a photo.

© ISTOCKPHOTO/DON WILKIE

Optional: You can download this file to use at http://www.istockphoto.com/file_closeup.php?id=130023 or use a similar one.

Step 2

To first define a brush, we need to select the area. Click the Rectangular Marquee tool on the toolbar.

Step 3

Click-and-drag a selection around the photo. We don’t need to remove the white pixels first because they will be transparent in a brush.

Step 4

Go to Edit>Define Brush Preset.

Step 5

Name the brush something that matches the image, and click OK.

Step 6

Now that we have the brush defined, go to File>New and create a new file at 1024 x 768. Click OK.

Step 7

Click the Brush tool on the toolbar.

Step 8

Click the arrow on the Options palette which will bring down the brush styles and size options. Scroll down and click the brush we just created. You can change the size here, or change it by pressing the left and right brackets to make the size smaller or larger. Bring the size of the brush to something much smaller, such as 100.

Step 9

Go to Window>Brushes to bring up the Brushes palette. This palette has a lot of options for the Brush tool. Change the Shape Dynamics to these settings by clicking on Shape Dynamics then sliding the sliders. The brush can rotate to a certain degree as we brush. Try various settings as the preview shows how the brush will look.

Step 10

Change the Scattering to the settings shown here. Scattering does just that—scatter the brush as we brush. Try various settings as the preview shows how the brush will look.

Step 11

Change the Hue Jitter to 12%, because we want to somewhat adjust the hue as the brush is clicked-and-dragged, but within a certain range. Setting it to 100% would cause it to include the entire color range.

Step 12

Now for the fun part: click-and-drag with the Brush tool in a curve.

Step 13

Whatever color is selected in the Foreground in the toolbar is the color of the brush. You can have a jitter between the foreground and background color as well as hue jitter from the foreground color.

Step 14

If you create a second curved brush path like this, click on New Layer on the Layers palette first, so that we can adjust the layer blending mode on the Layers palette. In this example, I adjusted the top layer blending mode to Multiply.

Step 15

Try various photos and converting them to brushes using the same steps here. Brushes with added Shape Dynamics and Scattering can help create a unique background, such as this one created with a photo of Polaroids.

Step 16

This one was created with a scan of tape. Besides creating unique paths, backgrounds are often created with such brushes.

Preview of Final Results

Decorating Text Photoshop Tutorial

Step 1

Before we start on the actual image, we first need to create a simple pattern which we will use later. Create a new document with dimensions 20x20px then go edit>preferences>grid… and use these settings. Create a new layer (Shift+Ctrl+N), hide the background layer then set the foreground color to #808080. Now recreate the image shown here using whatever method you feel comfortable with, the polygonal lasso tool is a good choice for what we want to achieve. Now save the pattern by going edit>define pattern, after saving, close this document. When making patterns like this one it is important to make sure that they will repeat when tiled, there are various methods of achieving this like the offset filter, however with a pattern this simple it easy enough just to visualize it.

Step 2

Create a new document, this time with dimensions of 1024x768px then select the gradient tool (G) and open the gradient editor. Click the arrow in the presets box and choose pastels, select the first gradient in this set. Using a linear gradient drag from the bottom of the page to the top, holding Shift to keep it vertical. Lastly change the opacity of this layer to 75%. A gradient is always a strong way to begin a piece like this but does require a texture over it.

Step 3

Here we will create our background texture, first find a simple image of clouds, the one I used can be found here. Copy and paste this image then resize it to fit the page. Next invert the colors (Ctrl+I) and set the blending mode to screen. Now add a bit more depth to the background by doing exactly the same with another image of clouds like this one. When adding a texture to any piece on Photoshop, always experiment with all the blending modes as some will look better than others depending on the texture you use.

Step 4

Before you start on the foreground, a good idea is to set up some swatches that you will use regularly throughout this piece. Double click on the foreground color and create a swatch of these three colors; #b5005e, #39d336, #00baff.

Step 5

Okay now for the text, start by creating a new layer group named ‘foreground’, it will become clear why we did this later on. Select the text tool (T) and draw a text box that goes from the left of the page to the right. Type your text in then highlight it all and go window>character to bring up the character settings. Use all the same settings as shown here. The reason for the wide character spacing is to allow enough space for the borders we will add.

Step 6

Right click on the text layer and select blending options and add a drop shadow, outer glow, bevel and emboss, color overlay, pattern overlay and a stroke. Use the settings shown below. You will notice that, although we used the drop shadow and the outer glow, we just mimicked the effect produced by a stroke. The blending options can be very powerful when used in this way so take words like drop shadow as a guideline rather than an instruction.

Step 7

The next few steps will show how to add some goo and drips to the text. Set the foreground color to the purple swatch then create a new layer group named goo directly below the text, still within the foreground group. Create a new layer within this group (Shift+Ctrl+N). Use the line shape tool (U) and create lines like the ones shown here, make some with the weight set at 2px and some with weight at 3px to add some variety.

Step 8

Create a new layer within the goo group. Select the brush tool (B) and use a round brush with a size of 3px and a hardness of 100%. Zoom in to about 400% and draw some droplets at the bottom of each line, also draw some beads of liquid on the line.

Step 9

Create another new layer within the goo group. Using the same brush, decorate the text a little more to achieve a result similar to below. This step can take a few tries to get right but is quite enjoyable at the same time.

Step 10

If you try Ctrl+clicking on the text layer you will notice that the selection will not include the border around the text, this will become a problem in the next few steps as you will see. The easiest way to overcome this is to first duplicate the text layer then drag it below the original text, now create a new layer directly below the new text layer then select the new text layer and merge it down (Ctrl+E) then name it ‘selection’. Now if you Ctrl+click this layer you will notice the selection covers the border of the text and we also still have our original text which can be edited easily.

Step 11

Create a new layer group named lines, this time above the text layer although still in the foreground group. Create a new layer then select the pen tool and draw path, making sure to hold and drag after each point to ensure the path is smooth. Next right click on the path and select stroke path and don’t check simulate pressure. The result should be similar to below. On these brushes, using simulate pressure will blend out both ends of the line which is not what we want here.

Step 12

Now select the eraser (E) and use a 100px diameter, 0% hardness and 30% opacity to fade out the end of the line. Also use the blur tool (R) with a similar brush to blur some parts of the line.

Step 13

Now we will use that layer we created back in step 10 to remove parts of this line accurately. The concept behind this method is to use our selection layer to select all our text then create a new selection manually and intersect these selections, let’s see how it works. First Ctrl+click on the selection layer then select the polygonal lasso tool (L) and in the main toolbar change it to intersect mode. Choose a part of the line that you want behind the text then draw round that part of the text then select the layer with the line in it and hit Delete. So in the image here, I want the line to go behind the left part of the ‘H’, note that I didn’t draw accurately around the ‘H’ this is because only the parts included in both selections will become our final selection. Continue using this method for other parts of the line to give the impression it weaving in and out of the text.

Step 14

Try adding some more lines using the same method shown in the last three steps. Try also changing the brush size to either 2px or 1px or switching on simulate pressure.

In this example I used a 1px brush with simulate pressure on.

Here I used our green swatch, again with 1px and simulate pressure on.

For this effect I used a 2px brush with simulate pressure on and when creating the path, held Shift to get a straight line.

Step 15

A quick way to make some random dots is to first select the brush tool, using a 2px hard brush then hit F5 to open the brush editor. Use the same settings as shown here and use the blue swatch we created earlier. For this brush we can drag it, note how the dots will be random and will give different effects depending on how fast you move the cursor.

Step 16

For this step you will need to have a floral brush set, lots of these can be found here, download one and install it, note that you may need to restart Photoshop after installing it. Create a new group behind the text and in a new layer; use the purple swatch and go wild with these brushes, making them flow from the letters and the lines. My set included some leaves which I dotted around using the green swatch. Using the floral brushes was just an idea, other vector style brushes can give good results too, one which is worth trying is using tree brushes on the top half of the letters.

Step 17

Another nice detail that is simple to make is these blue lines. First create a new layer then select the blue swatch then the brush tool and use an 8px hard brush. Use the pen tool to create a large arc, mine went roughly from the ‘H’ to the ‘O’, now stroke the path and make sure simulate pressure is checked. Use the eraser tool to get rid of half of the line and to blend it slightly. I created three of these.

Step 18

Duplicate this layer, with all three lines in it then hit Ctrl+T and rotate the lines roughly 180° then move them to below the text as shown here.

Step 19

The text is looking nice now however the foreground and background are like to separate images at the moment so we will learn a few ways to make them harmonize better. A good way to approach this problem would be to create an in between layer which is kind of half and half and can bridge the gap between foreground and background. Start by creating a new group within the foreground group but below everything else in that group. Create a new layer in this group then go image>apply image then edit>transform>warp and drag only the boxes here to warp the image, make sure that when your warping the image it still covers the entire document or else you will be left with sharp edges.

Step 20

Now select this layer then go layer>layer mask>hide all, change the foreground color to white then use a few of the following brushes with medium opacity to unhide some of the content on this layer, make sure the layer mask is selected rather than the layer itself.

1. A grungy brush of any size, this can be a brush you have downloaded or one that comes with Photoshop like the spatter, charcoal or chalk brushes, these work well when used at a larges size and dotted rather than dragged.

2. A floral brush of medium to large size. This looks good on a slightly higher opacity brush as well as on low. Never drag these brushes, it just doesn’t work.

3. A really good effect can be created when using the pattern stamp tool (s), although it requires a few tries to get it right. Try using the pattern we created earlier and also some of Photoshop’s like the checkered one.

Optionally you can repeat these two steps again to add more detail as you are trying to get a fine balance between the foreground and background.

Step 21

You will notice with the image we have at the moment, the clouds are only in the background. Let’s solve this problem; we have to choices here, we either add more in front of the foreground group or we can take something away from the foreground. I’ve found that the taking away method produces a more realistic result. However if you have some cloud brushes kicking about feel free to use them but in this image I didn’t. First let’s check where we are at in terms of layers; at the moment you should only have a foreground group, a background group and the white background layer, everything else should be contained within these. In the background group duplicate one of the cloud layers then drag it out of this group and to the very top of the layer stack. Change the blending mode to normal then go select>color range and pick the very darkest part of the image and use the settings shown below, OK. Now you should have a rough selection around the clouds, hide this layer then select the foreground group and in the layers panel click the layer mask button at the bottom.

Step 22

The last step is to add some color adjustments to the whole image. Start by creating a new layer above the foreground group then select the gradient tool and create a gradient like shown here. Use a radial gradient setting an create a blurry circle, go back to the gradient editor and change the color and do this again until you have something that resembles below. Lastly change the opacity of this layer to 50% and the blending mode to color. One last adjust that I save until last is to move that cloud layer that we duplicated to the top of the layer stack, unhide it then change the blend mode to soft light; I’ll let you decide on the opacity this layer should be.

//
//

Preview of Final Results

Design a Web Template using the “960 Grid System” Photoshop Tutorial

Step 1

Whenever I’m mocking up a web template in Photoshop I use a generic grid called the ’960 Grid System’. This grid system has become very popular in web design, however I still believe that grid systems like this shouldn’t be followed too strictly so the main reason I use this system is because the PSD files come with lots of guides set up already which saves a lot of time. So I’d advise downloading the grid system free from here. Once you’ve downloaded it open the 12 column PSD file in Photoshop and you should have something that looks like the image below.

Step 2

Try turning the guides on if they aren’t already; do this by going View>Show>Guides and View>Snap_To>Guides. Below you’ll see that I’ve drawn a rectangle showing the container where all the content will go, you don’t need to draw this rectangle as the background will be whit anyway but if it helps then go for it.

Step 3

Create a new layer then select the gradient tool and choose a gradient going from white to black. Holding shift drag horizontally to get a gradient looking like the image below, you may have to try a few times to get it right.

Step 4

Select the rectangular marquee tool and drag from the top left corner down to the bottom and snapping to guide which was at the left side of the box shown in step 2. Now go Layer>Layer Mask>Reveal Selection and you should be left with something that resembles the image below.

Step 5

Repeat the last two step again for the other side and make sure its symmetrical.

Step 6

Create a new layer group by clicking the folder icon in the layers panel. Then drag both these gradient layers within the group then change the opacity of the group to 10%.

Step 7

Next I added some rectangles that look a bit like stitches, If you were doing this in CSS then you could use a dashed border so you don’t really need to do this step too accurately. I’ve got a good tip for doing this; first create a new layer then make one small rectangle then duplicate this layer. Now hit Ctrl+T and move the rectangle down slightly then just hit Ctrl+Shift+Alt+T a few times. What this does is remembers the first transformation then the key combination mentioned duplicates the layer then applies the same transformation. If this seems a bit complicated then just create each one manually. Afterwards merge all the rectangle layers by selecting them then hitting Ctrl+E. You can now just duplicate this layer then move each layer to either side.

Step 8

Now add a title and a tagline, the one that I’ve used was created using only text and the font, ‘Rockwell’. I used the same blue here as the stitches and if you are familiar with swatches then a good idea would be to set a blue and grey swatch that you can use again.

Step 9

Now create the menu by using a sans serif font like Helvetica or Tahoma. Now just type a few words in uppercase using the same blue color. Another thing that I tend to do especially when using all uppercase is to increase the tracking (horizontal letter spacing) of the letters, to do this go Window>Character then highlight the word and change the tracking. I did each of the menu items in a different layer.

Step 10

Now duplicate all these words and change the color of each of them to the grey color. So now you have a set of layers with the menu items in blue and a set of the same menu items in grey. This is just so that you can see what the words would look like if you were to hover over them in the real site. Only make one of each menu item visible at a time.

Step 11

Next I made a custom RSS feed icon which you only really need to add if you were planning to have RSS feeds available on the site. First I drew a rectangle using the blue color then I added the word ‘RSS’ using the font, ‘Rockwell’ in white. For the actual feed icon you can download it from here in the ‘Developer Kit’ and place it into your document. I then put the icon in a new layer group then duplicated the group then changed the blue rectangle to a grey rectangle, again to show what it would look like when hovered over.

Step 12

I thought that a kind of slideshow element would look good on the homepage so to figure out what it would look like I copied in a stock image which matched the color scheme, if you;re interested the image can be downloaded from SXC here. Paste the image into your document then scale it down and position it like so.

Step 13

Select the rectangular marquee tool and drag a selection box over the image (the part which you want to keep) then select the layer with your image in it then go Layer>Layer Mask>Reveal Selection and you should be left with something that resembles the image below.

Step 14

Using the font ‘Rockwell’ again type a wee caption with the text tool. Next create a new layer and drag the layer below the text then draw two white rectangles behind the words then change the text color to the same blue that we used before.

Step 15

To the right of the slideshow image I left a space for a small quote or maybe a ‘welcome to our site’ thing. I put in the quote by drawing a text box then typed a a few words in a sans serif font in the grey color. Next I added some oversized quote marks by doing each one in a separate text layer and boosting up the pt size and positioning them accordingly.

Step 16

In the middle of the page I wanted to display some news items in a sort of blog format. First I typed ‘news’ using the grey color and ‘Rockwell’ as the font. Next I created a new layer group called ‘Item 1′ where I would put in all the the elements that make up the first news item. Type the title of the first news item and place it within this group.

Step 17

Next I added some text which would make up the news item then a date at the top right. I put all this within the same news item group.

Step 18

Using a light grey color draw a rectangle around the first news item like shown in the image below.

Step 19

Now right click on the layer group and duplicate it then move it down and change the title. Now do this again so you have three news items then delete the rectangle layer from the second news item.

Step 20

I thought a good use of space in the sidebar would be a Flickr group display which is quite popular in design sites now and can be seen on sites such as PSDlearning and Fuel Your Creativity. Firstly put in a suitable title in the same style as the news title. Now add some images with dimensions; 75x75px, If you want you can copy the thumbnails from the sites I mentioned above then paste them in. Now just arrange them like I’ve shown below.

Step 21

Select all of the thumbnail image layers then hit Ctrl+E to merge them. Now right click on this layer then go to the blending options and add the styles shown below then with another line of text you should have something similar to the bottom image.

Step 22

I added an advertising space box using a simple rectangle with a stroke applied then some text within it. You can personalize this advertising box if you want so I’ve not gone into much details her.

Step 23

Next I added a footer area which gives some extra information like external links, clients etc. as well as a copyright notice. By know you should know exactly how to put this together so I’ve just shown a couple of images of it.

Step 24

The last thing I did was to add some thin lines that would act as dividers and make the page look more organized. Create a new layer. Select the line tool and set the weight at 1px and the foreground color to a medium grey. Now draw some lines in the same places that I have, using the image below as a reference, remember to hold shift to get horizontal and vertical lines.