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. The final image is below or you can view a full size image here.

Tutorial Details

• Program: Adobe Photoshop CS4
• Difficulty: Intermediate
• Estimated Completion Time: 1.5 hours

Resources

To complete this tutorial you need to download the 960 Grid System. Now let’s begin.

Step 1

Open the “960_grid_12_col.psd” template in Photoshop. It will look like the image shown below. The Grid System is useful because it allows you to align the layout quickly.

Step 2

Select the background layer and press Command + J. This is the shortcut to duplicate a layer. Using shortcuts will speed up your design process. For this new layer we’ll add a nice gradient color. Now go to Layer > Layer Style > Gradient Overlay and use the following settings.

Step 3

Now hide the Grid because to see the design better. Keep your grid visible because you can align the shape better. Select the Rounded Rectangle Tool, and create a shape on top of the layout.

Step 4

For this navigation bar add the following layer styles.

Step 5

Using the same tool (Rounded Rectangle Tool) create another shape and fill it with the color: #001424.

Step 6

Add the following layer style for this shape.

Step 7

Create another shape with the Rounded Rectangle Tool using white for the color.

Step 8

Also for this shape add some simple layer styles and change the Fill value to 10%.

Below is the result so far.

Step 9

Over this last shape place an image. I’ve use some images from some tutorials I’ve made for Grafpedia, which serve as good image examples for this design. You should use your own images though of course.

Step 10

Now you need to load the selection for this image. To load the selection, select the layer in your layer palette and then go to Select > Load selection. You will see a selection around the image like in the following image.

Step 11

Create a new layer on top of all layers by using this shortcut: Command + Shift + Alt + N. Select the Brush Tool, and choose a smooth round brush. Over the new layer draw a horizontal line. Hold down the Shift key when you make the drawing. In this way the drawing will be perfect horizontally.

Step 12

Press Command + D to deselect. Now use the Rounded Rectangle Tool to create another shape with the color #4b6e82.

Step 13

For both shapes add the following layer styles.

Step 14

Grab the Ellipse Tool and create a shape right under the sidebar shape.

Step 15

Go to Filter > Blur > Gaussian Blur and use the following settings. Photoshop will ask you if you want to Rasterize the shape, go ahead and press OK.

Step 16

As you can see from the previous step, we’ve created a shadow there. Now let’s accentuate this shadow by adding some lights. Select the Line tool, and set the weight of the line to 1 pixel and then create a vertical line as shown.

Step 17

Right-click on the layer and choose Rasterize layer.

Step 18

Select the Eraser Tool, and choose a smooth, round brush at around 100px. Use it to Delete the top part and the bottom part of the line.

Step 19

With the same technique create another line on top of the sidebar.

Step 20

Right under this white line create another one that is black.

Step 21

In the middle of the layout create another shape with the Rounded Rectangle Tool.

Step 22

Create some shapes with the Rectangle Tool. Over these shapes we’ll add some images later.

Step 23

Add the same layer styles for all these three shapes.

Step 24

Now it’s time to add the images over these white shapes. Also add some text with Horizontal Type Tool on the right side.

Step 25

Create a dashed line between the posts with the Horizontal Type Tool.

Step 26

Create another three shapes and place them under the Post Metadata text.

Step 27

Above the sidebar create a search box using the Rounded Rectangle Tool. In the same time you can see that I’ve placed some text over the navigation bar too.

Step 28

Please add the following layer styles for this search box.

Step 29

Now use the Rounded Rectangle Tool to create another shape. Place this shape over the previous shape. Also, add an icon on the right side.

Step 30

Right above the slide show create another white shape.

Step 31

Add the following layer styles for this shape.

Step 32

Hold down the Command Key and with the Pen tool selected press on the edge of the shape twice. The anchor point will become active and we’ll be able to modify the look of the shape.

Step 33

With the Command key still pressed select the following anchor point.

Step 34

Hold down the Shift key and press once on your Down arrow key from your keyboard. The anchor point will move down and you will have the following result.

Step 35

Use the Ellipse Tool to create a circle.

Step 36

Right-click on the layer and choose Rasterize Layer. With the Rectangular Marquee Tool make a selection like that shown below.

Step 37

Be sure you have the layer with this small circle selected and then press the Delete key. Drag this layer above the background layer in your layer palette. This is my result so far.

Step 38

Now we’ll add two buttons to allow the sites users to change the slide show image. You will need to use the Rounded Rectangle Tool to create the shape and then you can use the Custom Shape Tool to add the arrows.

Step 39

Over the sidebar create some white shapes as shown below.

Step 40

For all these white shapes please add the same layer styles.

Step 41

Add some banners in the sidebar. Also, add some social bookmarking icons on top of the site design. There are numerous free icons available across the web to choose from.

Step 42

Now add some text with the Horizontal Type Tool on the bottom of the sidebar. Also, add minus signs between the text using the Horizontal Type Tool to create dashed horizontal rules.

Step 43

Let’s add other details on the navigation bar. Use the Line Tool to create two small lines. Zoom into this image so you can see better what you’re doing.

Step 44

Select both layers inside your layer palette. To select both layers you need to hold down the Command key when selecting both layers. After you have the lines selected press Command + E to merge the layers into a single one. Select the Eraser Tool and use it to delete the top part and the bottom part of the lines. Please note that you need a soft, round brush with a size of 20 pixels.

Step 45

Change the blending mode for this layer to Soft Light. Duplicate it a few times and place the line between the other text buttons.

Step 46

Now create the text for this Wordpress layout’s logo at a size that looks good to you.

Step 47

Add the following layer styles for this text logo.

Step 48

Right above the “background” layer create a new layer (Command + Shift + Alt + N). With the Brush Tool make a highlight mark there with a soft, round brush as shown.

Step 49

Change the blending mode for this layer to Soft Light.

Conclusion

The design is completed! I hope you enjoyed creating! The final image is below or you can view a full size image here.

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

Final Image Preview

Take a look at the image we’ll be creating, as shown on the right below. We’ll be transforming the image on the left and giving it a rusty texture. Want access to the full PSD files and downloadable copies of every tutorial, including this one? Join Psd Plus for just $9/month.

Video Tutorial

Our video editor Gavin Steele has created this video tutorial to compliment this text + image tutorial.

Inspiration

With some imagination you can create stuff as easy and eye-catching as this one I created from SOSFactory.

Step 1: Removing Perspective

I searched the web and found a picture of a metal grille (I emailed to the image’s owner asking permission, which was granted, thanks to Prearco). You can work with an image of a metal grille of your choice for this tutorial.

This image doesn’t have a full frontal perspective so I’ve transformed it (Command + T), and then right-click and Distort, to remove the perspective. Make sure to use a high resolution image or it will become blurry when transforming.

Step 2: Adding Good Contrast

If we want to work with the fusion mode layers, we have to decrease the lightness and contrast in our image. You should use a Hue/Saturation Adjustment Layer, so you can always go back and make any correction (non destructive action). You need to do a selection of the grille (Command-click on the layer’s thumb) and click the Create New Fill Adjustment Layer icon button, as shown below.

A menu will pop up, I set the Saturation to zero and I decreased the Illumination to -50.

By decreasing the Illumination, the image looses contrast, so we better give the shadows some strength by adding another Adjustment Layer, this time I choose the Levels corrector and used the settings shown below. And now our object is ready to texturize!

Step 3: Adding Noise

When it comes to texturizing a rusty object, noise is the key. To add noise, I create a new layer and put it in Overlay mode. Then I fill it with a mid gray (#808080) and I use the filter Noise > Add Noise with the settings shown below.

As you can see, the layer in Overlay mode with mid gray and noise is the equivalent to add noise to the image itself, but we have the advantage that our original image won’t be modified (non destructive action).

Step 4: Adding Color

To color the image we add a new layer in Overlay mode and fill it with the color #551c08 (just double-click the color picker in the tools palette and paste the code at the bottom).

Step 5: Adding Dirt

Now I create a new layer, and I added some stains courtesy of Gomedia (you can download numerous freebies from them here), with variations of the same brown I used before (#551c08). You can use the Dodge Tool, the Burn Tool, layers in Multiply mode, cut, paste and rotate… until you get something similar to that shown below.

Try to be creative, our purpose is to get different tones. Then we put the layer in Overlay mode and play with opacity, which gives us the following result.

Step 7: Blurring the Noise

I repeat Step 3 to add noise, but this time I also add some blur to make the grain blur a bit and mix everything. Notice how it manages to make the lines not so perfect or clean.

Step 8: More Levels Correction

The image is too dark so I added another Adjustment Layer and modified the Levels again to give the image more lightness and saturation.

Step 9: Color Correction

The image is a bit monochrome, so we are going to vary the highlight and midtones a bit. I add a new adjustment layer and choose the Color Balance modifier for this.

Step 10: More Stains

Let’s add a little more dirt on the top. So repeat Step 5, but this time put the layer in Multiply mode with 44% Opacity.

Step 11: Backup and Flatten the Layers

OK, we’re almost done so I’m going to group all the layers and save a backup:

1. Select all the layers but the gray background.
2. Click Command + G to group them.
3. Drag the group to the new layer button at the bottom of the layers palette to duplicate it.
4. And finally select the second group and press Command + E to flatten all the layers. This is our final image and the group is our backup.

Step 12: Adding Some More Grain

I used the Dodge Tool with a grainy brush to add a little more grain and saturation to certain areas – especially the edges.

Final Image

You can continue adding noise, blurring, modifying the colors, adding different modes of layers, until you get the effect you want. If you’re creative, you can make very eye-catching creations. The final image is below.

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

Final Image Preview

Take a look at the website design 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 the full-size image here.

Step 1 – Document Setup

Grab the “wireframe_final.psd” we exported in our last tutorial in this series (Build a Promotional iPhone App Website Wireframe in Fireworks). Rename this file to “final.psd,” or your preferred name.

Notice below how the imported file opens fairly well in Photoshop. There is an issue with the text boxes being longer than the document though (second image below, notice how the box is long and continues past the bottom of the document). I don’t know a quick way to fix this. It’s a peculiarity I mentioned in the last tutorial. If anyone knows a good fix, definitely let me know. So, go through and copy the text of each element, then recreate a new text box and paste the text back in place, or just leave it as is.

Also, go ahead and delete the “Notes” folder as well, as we don’t need the notes here.

Step 2 – First Dominant Visual Element

I often like to work on the dominant (and more important) visual elements of the design first, and then build from there. So, let’s get started with the “promotion” area.

We’re going to add an aurora illustration to the background here. Ian Yates wrote an awesome Illustrator tutorial on Making an Aurora Borealis Vector Sky in Illustrator. There are a few benefits to using a vector graphic here. One is that it stylistically stands out with a unique look. Also, we can use it for other sized branding areas as well.

After completing the aurora borealis vector tutorial go ahead and import your unique result into Photoshop. You can see that the only change I made was flipping the design. You should of course create your own for your work. I pasted the illustration in as Pixels because I don’t need to make any changes to the vector source file after bringing it in, so no need to use a Smart Object.

Now drag the vector mask from our promotional background shape onto our aurora borealis design.

This will apply the vector mask as shown below, just make sure it lines up as you want it.

Step 3 – Adding an iPhone Image

There is spectacular freebie of an iPhone image with lots of iPhone GUI graphics. Go ahead and download the iPhone GUI PSD 3.0. Open the file and drag the iPhone image into your working document. Then scale it and line it up with the guides as shown in the second image below. Be sure to grab the image as shown. The only screen component grabbed other than the phone is a transparent angled screen glare.

Now we’ll add the aurora borealis illustration to the iPhone. This just makes the design look a little more interesting. In the final website a video file would look good here, which shows the app in action though. Bring in another copy of the aurora borealis illustration. You can bring in a smaller version of it this time, as we’re filling a smaller space. Paste it in as Pixels again.

Now with the illustration placed over the iPhone in the position you want it in, and the illustration selected, go to Layer > Vector Mask > Reveal All. Then grab the Rectangle Tool (U), make sure it’s set to Paths in the top-left corner, and draw your screen. If you don’t get it the exact size you need the first time, then hit Command + T and resize the rectangle vector mask as needed.

Be sure to keep your layers organized as we continue to build this design.

Step 4 – Working on Our Color Scheme

We just added two dominant elements on the page. Also, the aurora illustration we added is a great source to grab some color from to make this page’s color scheme. Go ahead and double-click on the default “Background” layer to unlock it, name it “background,” and place it in a new “background” folder.

Grab the Paint Bucket Tool (G), then change the Foreground Color to a dark bluish-gray (#536475), which I selected from the illustration. Now change the primary navigation background located in the “header” folder a dark blue (#212b3f), which was also sampled from the illustration. Give the “bottom” area background the same dark blue color for the background.

We’ll also change the color of some of our navigation buttons at this point as well. The image below shows where we’re at so far in this design. Change the primary navigation button background colors to a slightly lighter grayish-blue (#5e7285) than the page background, except for the current page button. We want to give the current page button the impression of being pressed in. So, make it the same color as the page (#536475). We’ll enhance this greatly a little later in the tutorial when we add styling.

In the “secondary_nav” area select the larger background behind the Aurora icon and change it’s color to a grayish-blue (#475665) that is slightly darker than the page background. Again, we’re going to make this look indented. Also, go ahead and use the same lighter grayish-blue (#5e7285) as the primary navigation buttons on the footer buttons.

Step 5 – Changing Our Text Color and Basic Styles

You can see how going dark with our page design makes it painfully obvious that it’s time to work on the text colors. We designed the text mostly with dark on light for the wireframe, but now we need to go to light on dark. Change most of your text to white. I’ll point out the few exceptions below. Also, clean up any text, reposition elements, and experiment with font weight as you go through this.

I’m setting some of the text in Myriad Pro, though in areas that will be coded and not images I often used Helvetica for this design, which is ubiquitous on computer systems. I also used Helvetica for some areas that I wanted to have a slightly different look than the Myriad Pro being used. I set the Aurora name in Futura Condensed Extra Bold where it was to be used for branding.

You can see the text in most of the “header,” “secondary_nav,” “promotion,” and “body” is white. A few exceptions are the logo area (which will is just a placeholder for now), the “Aurora App” text that is dark blue (#131828) to help it stand out, and the headings for the body that are the same dark blue.

We also need to work on the “bottom” section text as well. I set all the headings in Myriad Pro Bold at 20pt. The color is a bright baby blue (#85a1bc). I used that same blue for the text links. I set the rest of the text in white using a smaller Helvetica Bold.

The “footer” has just a couple color changes. The links were changed to an even brighter baby blue (#97b8d8), except for the active link which is white and underlined. The copyright text is 12pt Helvetica and darkish blue (#212b3f).

Step 6 – Bringing in the Logo Design

First, take a screenshot of our PSD file of the area we’ll be placing the logo into (with the logo placeholder text turned off). Fire up Illustrator. Place the screenshot on it’s own layer and lock it. I also turned off the artboard visibility (Shift + Command + H). Now create a layer for your logo and insert the text “iLoveMyApps,” which is serving as the company’s name for this tutorial. Set the text in Cooper Std Black Italic at 30pt, and give it a white fill, as shown below. Now with the text selected, go to Text > Create Outlines, then ungroup the text (Shift + Command + G). Also, delete the “o,” as we’ll be replacing that with a heart.

Now let’s work on the heart shape. First, turn on the grid (Command + “) and turn on Snap to Grid (Shift + Command + “), which will allow you to draw the shape easily. Go ahead and create a half heart shape with the Pen Tool. Now go to Object > Transform > Reflect and apply a Copy with the settings shown below. Now line up the inner edge of both half heart shapes, then in the Pathfinder palette click on Merge, which gives us a final heart shape.

Now scale the heart shape down and place it as shown. Also, work on spacing out each letter of the text until it looks right to you. I wanted the entire text to appear as one, but I spaced each word out just a bit to increase legibility. It still reads as one word though. Now copy and paste the final logo as a Smart Object into Photoshop.

Step 7 – Starting to Add Style To Our Design

We’ll continue to work our way down from top to bottom, but keep in mind that as you’re designing you may bounce around more to various areas of the design, and experiment with different looks and styles, which is great and feel free to do that.

Within the “header” section, select the background, then apply the layer styles shown below. This gives the top of the body area a small highlight and a subtle shadow is cast on the header area, which pushes it back a bit.

Now apply the styles shown below to our logo. For the gradient overlay the gradient goes from gray (#c0c4c9) to light gray (#e3e5e7).

Step 8 – Adding Style to Our Primary Navigation

First we’ll work on the non-active primary link background styles, which means all except for the “Apps” link. Apply the styles shown below and use colors that look right to you. Note: I got lot’s of inspiration from the Meta Lab site for this part of the design. I love the work done by this company, check out their folio while you’re there.

It’s always important to imagine where the light source is in your design. We’re applying some subtle lighting effects, which will give this design a modern feel, though we still need to keep the light source in mind.

Imagine that there is a light source coming from the top of the page shooting straight down, which is giving us the light direction for many of the styles we’ll be adding. Of course you can imagine more than one light source, and you can deviate from this somewhat, but keeping the light primary light source in mind will help to make the styles you apply make sense and work together visually.

Now apply the styles shown below to the “Apps” link background, which is our active link and will make it look like it is pressed down.

Now apply the following Bevel and Emboss style to the text within the primary navigation to make it stand out a bit. The effect on the text is subtle, but noticeable.

Step 9 – Applying Style to Our Secondary Navigation

First of all let’s add our iPhone app icons. For the main Aurora icon, use the same aurora illustration as used in the promotional area. Drag the vector mask that is applied as a gray square currently, onto a scaled down version of the aurora illustration, refer to Step 2 on how to do that. Now let’s add some style here. Add the following layer styles to the icon.

Apply the same styles to the outer icon background as we did to the “Apps” background button in Step 7. Control-click on the layer thumbnail of the “Apps” button background and select Copy Layer Styles. Then select the outer background, Control-click its layer thumbnail and choose Paste Layer Style, as shown below.

Step 10 – Applying Style to Our Secondary Navigation Continued

Now we’re going to add some style to our other application icons. These are just place holders to show the client where other icons would go. So I want to give them a similar look as the Aurora icon, but not make them stand out much. So, let’s start by filling them with a pattern. First we’ll make the pattern.

Open a 4px by 4px new document set up for the web. Grab the Pencil Tool, set the brush size to 1px and paint four rectangles as shown below. The darkest rectangle is #05020a and the lightest is #251440 this color. Hit Command + A to select All, then go to Edit > Define Pattern and name it “Purple Rain.” Yes I did where a shirt with this pattern on it in the eighties back in grade school.

Select the first placeholder icon. Notice how it is a shape layer currently. We need to rasterize that. So go to Layer > Rasterize > Fill Content, which keeps our vector mask in place, but rasterizes the fill. Notice the result is a rasterized layer with a vector mask applied to it – quick and simple. Go through and do this for each placeholder icon.

Grab the Paint Bucket Tool (G), and in the top-left corner choose Pattern from the drop down, make sure our “Purple Rain” pattern is selected, then click once on each placeholder icon to apply the pattern. Now Control-click on the Aurora icon thumbnail and copy the layer style, then paste it onto each placeholder application icon. Also, adjust the spacing of the application names to make room for the styles.

Let’s also adjust our default app store placeholder button over on the right of this section. A simple way to make this button blend in better to our design is to change the background color. Go to Image > Adjustments > Hue/Saturation and apply the settings shown below, or those of your choice.

Step 11 – Applying Style to Our Promotional Area

Let’s start with the background and buttons. First we’ll apply style to our large background area. Select the aurora illustration and apply the following layer styles. This gives us a highlight at the top and a stroke around the area.

Now apply the same styles to the top-right price area background, but also add the styles shown below. The colors used for the purple gradient overlay are sampled from the aurora graphic. The colors of the gradient go from purple (#68448f) to darker purple (#320580) and then back to a mid purple hue (#65428c).

Apply the same layer styles to our main “Light Up Your iPhone” heading, as we did in Step 7. You can copy and paste the layer style from there. Apply the same Bevel and Emboss style to the price text and the sub heading, as we applied to the primary navigation text in Step 7. You may want to change the Opacity of the Highlight Mode or Shadow Mode for the shading though, experiment with what looks best to you. Also, select the horizontal rule, which is a 1px high shape, and change it’s color to black. Also, apply the settings shown below to it.

Step 12 – Applying Style to Our Main Call to Action Button

Now apply the following layer styles to our main call to action button. We’ve placed a drop shadow on this so that it stands out from the background more. It has a bright color, which will attract attention. It’s placement also attracts attention. The gradient overlay has similar colors to the one used for the price background, but it only has two colors applied instead, which go from purple (#68448f) to dark purple (#320580). We’ll add an arrow in just a moment to make it stand out more as well.

Now grab the Ellipse Tool (U), and use it to create a shape layer as shown below. The color doesn’t matter because the styles will overlay it anyway. Rearrange the button text to look balanced with the added element. We’ll be using this circle to place a download arrow inside shortly. Apply the following layer styles to the button (the colors in the gradient overlay go from #9cc67e to #3a4f66).

Now we’ll create our arrow, place it into Photoshop, and style it.

Open Illustrator and create a web document. Turn on View > Show Grid and View > Snap to Grid. Use the Pen Tool to draw an arrow utilizing the grid. The size doesn’t matter. Now resize it to a shape that is about the size of the larger arrow shown below. Now go to Effect > Style > Round Corners and apply with a Radius of 0.139 in. Now copy the arrow and paste as a Vector Smart Object in Photoshop. Note: I’m using black below for demonstration purposes, but the arrow should be white.

Now apply the same styles to the arrow as we did our logo in Step 7 and scale to fit the space. The result is shown in the second image below.

Here’s what we have so far. The top section is looking good. Now let’s move onto the body next. We’ve got the bulk of the site styled now. It will be smooth sailing from here.

Step 13 – Applying Styles to Our Body Area

There aren’t too many styles that need to be applied here – just a few. Let’s start with the titles. We want to make them look indented by highlighting the inner bottom character edges, which is a style often used in Apple sites. Apply the style shown below to the “Aurora” title text. Also, apply the same style to the “Screenshots” and “Features” titles. With these later two titles, change the Opacity to 40% though (everything else in this Drop Shadow Layer Style is the same).

Apply the same layer style to the bullet points under the “Feature” column, as applied to it’s title. The results so far are shown below.

Now copy the horizontal rule from the “promotion” section, change the color to dark blue (#131828) and scale it to fit the area above the “Screenshots” title. Notice how the style is retained.

Now copy this same horizontal rule and use multiple copies of it in the last column of this section, as shown below. Be sure to delete the existing unstyled horizontal rules.

Now follow the same steps for these placeholder images here as you did in Step 10. Apply the same layer styles and “Purple Rain” background pattern fill. This is just a quick way to make this area look good for client review before you get ahold of the actual photos that will go there later. The final “body” section is shown below.

Step 14 – Apply Style to the Bottom Section

First, let’s apply the same Bevel and Emboss layer style to our titles here as we did to the text in our primary navigation in Step 8. Now drag four copies of our stylized horizontal rule down and resize as necessary, or apply the same styles and coloring to the existing horizontal lines as we did to them in the “body” section.

Replace the remaining horizontal rules of this section with dashes. You can use the Type Tool and the Dash Key for this. I used Myriad Pro at 14pt for this. This is something that will be coded in CSS, but we want to make sure we’re communicating this effectively in the design.

Apply the same layer styles to our buttons as we did in our primary navigation. Just copy those layer styles down. Be sure to stylize the text of the buttons as well. Now replace our twitter bird with a full-color version, which you can download free in the Practika Icon pack from Smashing Magazine.

Apply the following layer styles to the background of the “bottom” section and we’re done!

Conclusion

There are lots of creative website solutions you can create using just a handful of chosen elements, an interesting color scheme, utilization of appropriate styles, and attention to subtle light effects. The final image is below. You can view a larger version here.

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

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.

Tutorial Details

• Program: Adobe Photoshop CS4
• Difficulty: Intermediate
• Estimated Completion Time: 1.5 hours

Video Tutorial

Our video editor Gavin Steele has created this video tutorial to compliment this text + image tutorial.

Step 1

Just as painters exercise their skills with real life drawing, icon designers create existing objects to study form, textures and lighting. For this tutorial we’ll create a piece of contemporary furniture, Isamu Noguchi’s 1944 coffee table. Do a Google search about it then fire up Photoshop.

Create a new blank document and set both width and height to 512 pixels, the maximum icon size required by operating systems today. When you create icons, you start with the biggest size then create the smaller images, adjusting the details to keep the icon crisp. Our coffee table has a symmetrical glass top so let’s add some guides to help us draw it.

Step 2

Activate Snap from the View menu (Shift + Command + Semi-Colon key). Using the Pen Tool in Shape Layers mode, draw the right half of the glass top, snapping to the guides we drew before (2a).

Right-click on this layer and choose Duplicate Layer. Flip the new shape horizontally and position it to the left of the middle vertical guide (2b). Now right-click both layers and choose Rasterize Layer. Finally select both layers and hit Command + E to merge them together. Name this layer “top.” In the Layers palette reduce the Fill to 0%, then apply the following layer effects: Gradient Overlay, Stroke, and Inner Glow (2c). The top surface is done (2d).

Step 3

Make a copy of the “top” layer, move it underneath it, and rename it “bottom.” Clear the Gradient Overlay effect, leave the Inner Glow intact and make the Stroke darker. This way the bottom surface will shine through the top, keeping some ambient shading without adding opacity to the glass pane (3a).

Copy both the “top” and “bottom” layers. Command-click the “top copy” layer to select its outline, select the “bottom copy” layer and hit Delete to erase those pixels (3b). Rename this layer “thickness” and discard the “top copy” layer. We have a horizontal curved strip to fill so let’s apply a dark Gradient Overlay with a couple of light spots at the corners (3c).

Step 4

Let’s add a reflection to the top surface. Duplicate the “top” layer and rename it “reflection.” Hit L to select the Lassoo Tool and draw a diagonal wedge on the bottom half of the surface (4a). Delete this selection. Apply a white Gradient Overlay in Overlay mode and reduce the layer’s Opacity to 60% (4b). Group all layers (4c).

Step 5

On to the legs. With the help of perspective guides draw the side of the left leg with a Shape Layer (5a). Copy it. Hit Command + T, right-click and select Flip Horizontal, then Flip Vertical. With the Direct Selection Tool (A) skew and adjust the new shape to make the right leg’s side. Add dark-to-medium gray Gradient Overlays to both shapes and name them “side” (5b).

Step 6

Now comes the complicated part. We need to add thickness to the legs. Read the instructions but refer to the images for easier understanding of the procedure.

Make a copy of the left “side” layer, hiding the original. Name this copy “inner thickness.” Erase all the outer points, leaving only those shown in image 6a. With the path still selected go to the Paths palette and create a new path, naming it “inner profile” (6a). Create another copy of the left “side” and move it to the left and up (6b). Make a copy if this layer, name it “outer thickness” and follow the same method outlined above, erasing all outer points then naming the new path “outer profile” (6c).

Step 7

In the Paths palette select the “outer profile” path. On the toolbar choose the black arrow (A) and select the path on the canvas. Hit Command + C to copy it to the clipboard (7a).

Now select the “inner profile” in the Paths palette and hit Command + V to paste the “outer profile” path into it. Discard the “outer profile” path from the Paths palette (7b). With the Pen Tool (P) connect the two paths with straight lines (7c). Command-click the path in the Paths palette to select its outline.

In the Layers palette create a new layer, name it “inner thickness” and move it under the “side” layer. Hit Alt + Backspace to fill the selection on the new layer with the foreground color, any color will do, just make sure you can see it (7d). See the result below (7e).

Step 8

Using a similar method draw the outer thickness of the left leg. Refer to the image sequence for the necessary steps. It’s easier done than said.

Step 9

Add thickness to the right leg. Again refer to the image sequence for the necessary steps, which is easier done than said.

Step 10

We’re done with the legs. Just add a soft, light blue shadow beneath the table and you can call it a day!

Conclusion

This tutorial has taught us that even simple objects require painstaking attention to detail to be rendered correctly. It’s this approach that gives the most convincing results. They say crime doesn’t pay, but quality does!

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.

Tutorial Details

• Program: Adobe Photoshop CS3
• Difficulty: Intermediate
• Estimated Completion Time: 60-120 Minutes

Step 1

Create a new document 1200 pixels by 1160 pixels with a white background. Once you’ve created your document were going to setup two guides which will aid in keeping the layout 850 pixels wide. To create the guides we need to go to View > New Guide, in the box that pops open select vertical and enter 175px.

Go to View > New Guide once more only this time enter 1025px, again make sure the guide is set to vertical.

You should now have two guides on either side of your canvas both 175px from the edges of your document. The space in between the guides should be 850px wide. Everything we create from now on will be created within the guides.

Step 2

Were now going to fill our background and for our background were going to use a radial gradient. Set your foreground color to white (#ffffff) and background color to light gray (#e1e1e1). Select the gradient tool with a radial gradient.

Step 3

Apply the gradient to your “background” layer. When applying the gradient start from the top-middle of the canvas and drag half way down, this should give us a nice sized effect. If you hold down the Shift key while dragging the gradient down it will lock the gradient line vertically.

Step 4

Select the Type tool, then in the top-left corner against the left guide add your website title using the color pink (#ff008a). By the side of your website title also add your website’s catchy slogan.

Step 5

On the same level as the website title but against the right guide, create two rectangles next to each other using the Rectangular Marquee tool. The first rectangle is going to be a search field so it needs to be quite long, the seconds rectangle is going to be a submit button so should be fairly small.

Step 6

Now add these layer styles to the search field rectangle.

Step 7

Once you’ve added your search field layer styles add these layer styles to your button rectangle.

Step 8

Finally select the Type Tool and add some text to your search field and search button. The layout so far should look something like the image below.

Step 9

Select the Rounded Rectangle tool, once selected at the top of the screen underneath the Photoshop tool bar you will see some options. Within these options change the type to Path and the Radius to 15px.

Step 10

Starting from the left guide drag out your rectangle, the height of the rectangle should be roughly 215px and end over at the right guide. Once you’ve dragged out your rectangle right-click inside it and go to Make Selection.

Step 11

While the selection is active, select the Gradient tool with a radial gradient, set your foreground color to a really light gray (#fefefe) and your background color to a slightly darker gray (#e1e1e1). Starting from the top-middle of the selection, drag the gradient past the bottom of the selection.

Step 12

Once you’ve added your radial gradient add these layer styles.

Step 13

Command-click the rectangle layer you just created, doing this will load the rectangle’s selection. Once you’ve loaded the selection contract the selection by 15px by applying Select > Modify > Contract.

Step 14

Create a new layer above your big rectangle then fill it with any color. Once filled, Deselect the selection by pressing Command + D.

Step 15

Add these layer styles to your new smaller rectangle layer.

Step 16

Were now going to create a bokeh effect for our smaller inner rectangle. Create a new document 600 pixels by 600 pixels with a transparent background. Select the Elliptical Marquee tool and create a big circle inside the canvas.

Step 17

Once you’ve created the circle we need to adjust the circles appearance a bit. Add these layer styles to your circle.

Now go to Edit > Define Brush Preset and save your new brush.

Step 18

Head back over to your layout and select the Paint Brush tool from within the brush menu, then set your brush size to 50px.

Step 19

Bring up the brush options screen with the F5 key then add the following brush options.

Step 20

Your brush should now be ready to use, create a new layer above your multi-colored inner rectangle. Using the color white (#ffffff), and with your brush drag out some circles, try and keep the circles within the inner rectangle. You only need a few to start with as we’ll be building up the circles over 3 layers. Once you’ve brushed out some circles blur them using the Guassian Blur Filter > Blur > Gaussian Blur.

Step 21

Create a new layer above your first circle’s layer. With your custom brush start to brush more circles filling in some of the blank spaces. Once you’re done set the Opacity to 50%, then add an outer glow using Photoshop’s default settings.

Step 22

Finally, create another layer above your last circle’s layer. With your custom brush once more brush out some more circles. Once you’re done, set the layer Opacity to 75% ,then add an outer glow using Photoshops default settings.

Step 23

Now that the bokeh effect is complete, select the Type tool and add some text over the rectangle. The font used for the dummy heading is Helvetica Neue LT pro, the short paragraph underneath is set in Verdana. Finish off this step by adding a sleek icon to the left of the dummy content. The icon used is from an icon set designed by “Navdeep Raj” for Smashing Magazine.

Step 24

We’re now going to create a simple navigation. Select the Rounded Rectangle tool and change the radius to 10px. The rectangle should be about 54px in height and be stretch right against the left and right guides.

Step 25

Right-click inside the rectangle path with the Pen tool and go to Fill Path. Once you’ve filled the path add these layer styles.

Step 26

On the navigation add some sample links. In between each sample link create a small bullet point using the Elliptical Marquee tool. Fill the bullet points with the color pink (#ff008a).

Step 27

Now the navigation is complete lets move onto the content boxes. Select the Rounded Rectangle tool, leave the radius set to 10px. Drag out a rectangle about 335px in width and 196px in height. Fill the rectangle with any color for the time being, then move it against the left guide.

Step 28

Add these layer styles to your content box.

Step 29

We’re now going to make the right folded part of the content box. Select the Polygonal Lasso tool and make a triangular selection around the top-right corner.

Step 30

Once you’ve made the selection, Cut (Command + X) and Paste (Command + V) the corner to a new layer. Select the corner layer then rotate it 180 degrees (Edit > Transform > Rotate 180).

The corner would have lost all its layer styles when we cut it so we need to re-apply them. You can do this quickly by right-clicking the content box layer and going to Copy Layer Styles. Right-click the corner layer and go to Paste Layer Styles. Finally, place the corner so that the top straight edge is over the straight edge of the content box.

Step 31

Fill in your content box with some dummy content. Add an icon on the left with a nice bold header and dummy paragraph underneath. The icons used are from an icon set designed by “Navdeep Raj” for Smashing Magazine.

Step 32

Duplicate all the content box elements, then create two more boxes. Now place them underneath each other.

Step 33

On the right side of the layout, inline with the first content box, add a long dummy heading using the settings below.

Step 34

Underneath the long heading add some more dummy text, maybe an image or two and a simple unordered list just to give the layout some life. Color the dummy text in a dark grayish color (#8a8a8a). The image in the middle uses the same layer styles as our content boxes and was created in the same way as our featured area.

Step 35

For the footer we’re going to re-use our navigation. Go to the Layers Palette and right-click your “navigation” layer. Select Duplicate Layer, then drag the duplicated layer to the top of the stack.

While the “footer” layer is selected, hold down the Shift key on the keyboard, then press the Down Arrow key until the footer reaches its place at the bottom of the layout. Doing it this way instead of using the mouse will keep the footer lined up with everything else that we have created so far. Finish off the footer with your footer text.

Conclusion

The final image is below and have fun creating more website designs using these techniques and playing with these types of funky layouts and styles.

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

All we need to do is open up Photoshop, create our final image and animate it the way we want it to move the single elements to achieve the final effect. Additionally, we’ll stop by at the beautiful GraphicRiver website, where we’ll download their logo, which we’ll use to create our GIF.

Final GIF Preview

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

Step 1

First, open up Photoshop and create a new 125 pixel by 125 pixel document. In our case, a 72 pixel/inch resolution and the RGB Color mode with a white background will be sufficient, since we’ll use it on the web.

Step 2

Now, unlock the Background layer, call it “BG” for Background and select the Paint Bucket Tool (G). Instead of using the rich black (#000000) for the background, I use the slightly brighter #111111 black, which looks better. Click to fill the layer.

Step 3

Gradients in designs, layouts or images are very popular and give your final product an extra glance. That’s why we’ll now select the Gradient Tool (G). Choose the Radial Gradient from the options bar and make sure the gradient goes from white to transparent. The images below show you how to do it.

Step 4

After selecting the Radial Gradient, going from white to transparent, it’s time to operate. Put your mouse in the center, click and hold, and drag it to the right. For a straight line and better control, press the Shift key while dragging. The image below shows you how it should look afterwards. Make sure you give this layer a name like “Gradient” and play with its opacity for a smoother look.

Step 5

You might not have noticed it, but our final image includes a nice dark gray one pixel border, which helps emphasize the logo and text, which we’ll add later. There are multiple ways of creating this border, but the way I did it in this tutorial, was as follows:

First, select the Rectangle Tool (U). After that, open up the Rectangle options in the Options bar to set a fixed size of 123 pixels by 123 pixels. The color isn’t important, just make sure you align it properly. Click inside the canvas to create a square. Make sure it covers the Background layer, but reveals it at the edges. I called this layer “Extra.”

Step 6

Now, it’s time to open up the Layer Style window. To do that, double-click on the Extra layer. What we need to do, is bring down the Fill Opacity to 0 and give it an inner 1 pixel stroke with a dark gray (#4d4d4d) color. Take a look at the images below for reference.

Step 7

As mentioned earlier, we’ll now jump over to graphicriver.net to download the nice pre-designed logo files. I highly recommend signing up to graphicriver.net to join the Author Program, or simply shop beautiful graphics.

Should you already be a member, make sure you check out the Referral Program where you can receive a 30% commission from the first Cash Deposit a referred user makes! By selling or buying different graphics and layered files, you’ll be able to either earn money or support other designers with your work.

Now click on the Make Money button in the main navigation to reveal the sub-navigation. Click on Referral Program and scroll down until you can see the Referral Graphics. You can choose between the different marketplaces and download their logos and graphics in high quality. I chose the graphicriver.net logo, but from this point, you can choose the one you like the most. Please make sure you read the Copyright Policy to avoid problems.

Step 8

This is how the logo will look like inside of Photoshop. As you’ve noticed, each Graphic Pack comes with layered PSD files. What we’ll do now, is drag or copy and paste the logo to our animation project.

Step 9

In this case, the logo fits perfectly, but should it be too big or small, just transform it. As you can see in the image below, I placed the logo at the top and added additional text at the bottom-left side. Those are just a few things that you can find and buy on graphicriver.net. Make sure the logo and text are on separate layers. It is important to place them on separate layers, since we later want to turn single layers on or off to create our animation.

Step 10

In the next step, I’ll be using Illustrator to create the waves, which we’ll place at the bottom right side. Some of you might think: why isn’t he just doing it inside of Photoshop? I could, but the reason why I’m doing this inside of Illustrator is because I want to explain the difference between Smart Objects, Pixels, Paths and Shape Layers while importing. If you don’t have the opportunity to use Illustrator, then just grab the Pen Tool inside Photoshop, or use any other technique you like to create the nice waves.

Step 11

As you can see in the image below, I grabbed the Pen Tool to draw two triangular, but curved shapes. Make sure there’s no border set and the shape color is blue.

Step 12

We don’t want two similar colored waves so make sure you use two different tones. These are the ones I used.

Step 13

And this is how it should look like. It doesn’t matter how big it is at the moment, since we’ll only use the curved part of it and the rest will be out of sight. Select both shapes and copy and paste or drag it over to Photoshop.

Step 14

Photoshop will instantly ask you how you would like to paste the object. As mentioned earlier, you can choose between: Smart Object, Pixels, Path or Shape Layer. Some of them will obtain quality while others will make subsequent changes – without quality loss – impossible.

• Smart Object: Pastes the art as a Vector Smart Object that can be scaled, transformed, or moved without degrading the image. As the art is placed, its file data is embedded in the Photoshop document on a separate layer.

• Pixels: Pastes the art as pixels that can be scaled, transformed, or moved before it is rasterized and placed on its own layer in the Photoshop document. As soon as you confirm the changes, the object will be rasterized which will result in quality loss, should you want to change it at a later time.

• Path: Pastes the art as a path that can be edited with the pen tools, Path Selection Tool, or Direct Selection Tool. The path is pasted into the layer that’s selected in the Layers panel.

• Shape Layer: Pastes the art as a new shape layer (a layer containing a path filled with the foreground color). This can be useful in some cases, but we don’t need this for this project.

Select the Smart Object option and click on OK.

Step 15

We won’t need the entire object, so feel free to resize and position it the way you like. I did it as shown below.

Step 16

Now, it’s time to create the cool shine effect which hovers over our logo and waves. It’s a very simple technique, but the outcome is cool. The first step is choosing the Elliptical Marquee Tool with a 10 pixel feather. I’m using a Feather of 10 pixels on it because we don’t want it to be sharp-edged, which would definitely not look good. Make sure the selection is still inside of our 125 pixel by 125 pixel canvas with enough space around it to be filled with a bright color. Select the Paint Bucket Tool and click inside the active selection.

Step 17

As you can see, we now have a bright, smooth and highlighted ellipse, which will build up the nice glow effect. But one thing’s for sure, it doesn’t look nice this way. We have to limit the highlighted area to the logo, text and waves.

The way I did it, is by selecting the single objects one after another by Shift-clicking on the proper layer thumbnails to create a quick selection of the elements. Now obtain the selection, click on the “Glow” layer and choose Add layer mask.

The layer mask will black out and hide the unselected area, while the white area will display the glow effect on the logo, text and waves. Should the glow be to intensive, simply adjust the brightness by changing its opacity. That’s it. Our final image is done. In the next step, we’ll take a look at how to animate this design.

Step 18

Normally, the animation panel isn’t visible, but you can open it by going to Window > Animation. By default, the Animation panel will open up at the bottom.

Step 19

This is how it will look like by default. It’s the Timeline view, which we don’t want to use in this project. Instead, we’ll work in the Frame view where we can see each animated frame listed inside the Animation panel. To change the view, click on the little fly-out menu button and select Convert to Frame Animation. The images below show you how to do it.

Step 20

In Photoshop, you use the Animation panel to create animation frames. Each frame represents a configuration of layers. The first image below, shows you the Frame listing I mentioned above. The second image, shows you exactly how to configure your layers to achieve the final animation.

Simply select the first Frame, turn on, off or move the elements like mentioned below and you’re done. Work off each Frame after another until you have six frames listed in the Animation Panel. In the next step, we’ll create the tweening, which will add additional frames to create our smooth fade in or moving animation effects.

Step 21

The first step in the animation process is to specify a delay (the time that a frame is displayed) for single frames or for multiple frames in an animation and the tween. As you can see, I’ve changed the frame delay time to 0, which will result in an abrupt switch between the frames.

To make the switch more smooth, we’ll use the Tween command to automatically add or modify a series of frames between two existing frames. You can either tween with the previous frame or the next frame. In this case, we’ll tween with the previous frame. By doing this Photoshop will create the appearance of movement and smooth fade.

To add additional frames, click on the Tween command, enter a number and hit OK.

• Frame 1 – Frame 2: Add two additional frames.

• Frame 2 – Frame 3: Add two additional frames.

• Frame 3 – Frame 4: None.

• Frame 4 – Frame 5: Add five additional frames.

• Frame 5 – Frame 6: Don’t add additional frames, but make sure you give the sixth frame a two second delay, since we want it to stay there before looping the animation.

Step 22

You can of course use the play option at the bottom of the Animation Panel to play the animation, but we’ll skip that and export the animation as a GIF directly. We’ll save our project as a GIF file for viewing on the web.

To open up the Save for Web & Devices Window, go to File > Save for Web & Devices. There are a lot of different options for you to play with, but for this project we can use a predefined setting. Make sure you choose GIF as your output file type, play with the settings and hit save. Give your GIF a name and save it to a directory you like. That’s it!

Conclusion

I hope all of you guys reading this tutorial, will use the tips and tricks to create your own animated images inside of Photoshop. The best thing to do is later uploading them to Graphic River for the others to see and buy.

Unfortunately, there aren’t many GIF’s or animated images on Graphic River yet, so your job is to change that! Make sure you sign up on GraphicRiver and upload your designs. That’s it for now and I hope this tutorial was useful for you and informative. Feel free to leave a comment. I’ll try to answer your questions, should there be any. Thanks!

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

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.

Introduction

One thing you will notice as you proceed through this tutorial is how easily this website could be transformed to a blog about design, a software company’s homepage or an open source community. All of the modules on the right and left sidebars could be swapped and moved around with ease and the content is designed to be flexible.

Throughout this tutorial you will see a big emphasis on the design principles and useful Photoshop methods to improve your workflow and design of web sites. While this site has its own style, the main aim of this tutorial is not to replicate that style exactly, rather the hope is that you gain a better perspective of web design in Photoshop that can improve your approach and quicken your production.

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 – 960 Grid System

If you aren’t already, skip over to 960.gs and familiarize yourself with the 960 grid system and why it is going to be so useful for this tutorial. While you are there be sure to download the template.

Once you have downloaded the file, unzip it, and open "960_grid_12_col.psd" which can be found under 960_download > Templates > Photoshop. When you open up the file it will be evident how quickly this will allow you to create and maintain structure in your web designs. Take special note of the guide lines, they will allow you to create objects that snap perfectly aligned with the grid.

If you follow the guides up to the ruler, then you can clearly see the exact pixel dimensions of the grid – with 60px wide columns and 10px on either side (creating 20px between each column). If you do not see the ruler or wish to get rid of it, then you can toggle it with Command + R.

The guides are almost overpowering; once you start designing they will really get in the way. You can toggle them by clicking View > Extras or simply using the shortcut Command + H.

You will need more space on your canvas for this tutorial. Expand the canvas (Command + Alt + C) to 1400px by 1340px. You can delete everything except the background layer. Double-click on your background layer and press OK to unlock it. Rename it "BG."

Save (Command + S) this file as "my_web_tut01.psd" in its own folder named "my web tut" After every step in this tutorial you should hit Command + S and every couple of steps hit Command + Shift + S and save a new copy "my_web_tut02.psd," "my_web_tut03.psd," etc… Saving seems like a no brainer to a lot of designers, but I’ve found that still doesn’t stop a lot of professionals from slacking on this.

Step 2 – Working with the Grid Part I

OK, you have prepped the canvas, now you need to draw in the background and top area. Drag on the top ruler to create a new guide; bring it down to 120px. This will be the lower boundary of the header space. Bring down two more guides to 130px and 140px. Now there is the same width of space between the header and content as we have between columns. It’s starting to look like a proper grid!

Use the Rectangle Tool (U) to draw a black rectangle across the header area. This assumes you have the default black set as your foreground color, if not you can simply press D to reset it. Start your rectangle outside of the canvas along the guide and end it outside to the other side as well. The benefit of extending this element is that you won’t see any of the effect applied to the perimeter that you may want applied to the bottom edge of your rectangle, like a stroke, inner glow, etc. Name your rectangle "Header BG."

Step 3 – Working with the Grid Part II

It’s time to start blocking out your grid. This design is comprised of three content columns – the left sidebar will span three columns, the middle/main content will span seven columns and the right sidebar will span two columns.

While it works great for the header to put in guidelines, the rest of the design will be a more fluid process, so you won’t be drawing horizontal guides between each section. Don’t despair! You will still be able to achieve pixel perfect spacing by pressing Shift + Arrow Keys while you have the Move Tool (V) selected. Each time you do that the layer selected will move 10px.

You will be creating rounded corners for this design. Rounded corners make so that your content is very visibly sectioned. Look back to the final image; do you notice how on the "Twitter Feed" module there are many boxes within one box with rounded corners? Now consider if the corners were all sharp – the "Twitter Feed" would not feel like a single module as much.

You must also take into account that colors, gradients and fonts are helping to make this a defined entity, but the rounded corners definitely help. Additionally be aware that just because rounded corners work for this design, there are thousands of beautiful sites that don’t use rounded corners. Take a look at Psdtuts+ – every corner is sharp; however, other strategies like contrast and strokes are used to keep the layout clear. Further reading can be found here and here

Enough design talk! Select the Rounded Corners Tool and set the corner radius to 8px. Draw a box in the top of the left and right columns; give yourself some space to add content later.

Step 4 – Typography

First, create a text area in the middle/main content area and fill it in with a catchy one liner like in the final image. Use the font Rockwell or another slab-serif at 40pt with 48pt Leading (Line Height). Rockwell can be downloaded here.

Next, add some dummy text below and set in Verdana at 12pt with 20pt Leading. Also add in a couple sub headers that are Verdana Bold at 17pt with 30pt Leading.

Now that you have the specifics, let’s talk typography. One general rule that you will find repeated throughout the web design community is that a website should only utilize two fonts. In this layout I have chosen to use the fonts Rockwell and Verdana. Verdana is a web safe font while Rockwell is not. Because of this, all instances of Rockwell will need to be images when this design is converted to XHTML/CSS.

This means two things for you. First, to keep the load time low, you should consider a minimal use of non web safe fonts. The final image contains fewer than ten instances of Rockwell, the majority of them sit over top of some graphical element like a button that will already be an image when coding. Second, you can add effects like drop shadows and gradients to the text. These two reasons combine with the inclusion of Rockwell, which is best suited for the traditionally more decorated elements of a design like headers, titles, and buttons.

There is one last consideration that may or may not apply to your design and that is taking into account any future Search Engine Optimization (SEO) work. All text that is image based – any instances of Rockwell for this web design – are not crawled and analyzed by the Google bots. This means that you will need to design so that there will be plenty of web safe fonts where keywords can be picked up by Google.

The next point on typography, and web design in general, is consistency, consistency, consistency! If you use Rockwell for a button, use it for all buttons! If you make some links pink, make all the links pink! Being consistent will allow your design to look sharp and cohesive.

Lastly, a word about usability and typography. Your copy needs room to breathe, give it a decent line height and you’ll notice a world of difference. The site ilovetypography.com suggests that your line height should be at least 140% of your font size. Also, you should be aware that a text area wider than 600px is a strain on the eyes, but if you are going to go wider it would be a good idea to increase the line height proportionally. There is always more to learn about typography – here is a good start.

Step 5 – Color

Black and white is boring, time for some color! The colors of this design were inspired by the Hash One Wordpress theme

I could show you how to create a custom swatch to load with your site’s colors, but I don’t use this myself. Instead, using the rectangle tool, you can just draw a grid of big squares in the margins of your canvas and fill them with the colors you will be using. I find this method quicker and more accessible.

The colors selected provide a great contrast to give the website some depth. Feel free to use any combination that you would like, but, please consider contrast, readability and harmonies when choosing your colors. If you’re having trouble with you colors, try using the Color Scheme Designer.

The colors of this tutorial are (from left to right, top to bottom):

• Dark Grays are #090909, #232323, and #4f4f4f
• Pnks are #f35455, #ff7c7d, and #ffb9ba
• Cyans are #49afe9 and #67c8ff
• Light Grays are #afe2ff, #a8bdc4, and #eaf0f1

Add all of these rectangles to a folder and name it "SWATCHES." Using all caps for folder names makes it visually easier to find folder layers when the layers start getting muddled. Now would also be a good time to start your "HEADER," "LEFT SIDEBAR," "MAIN CONTENT," and "RIGHT SIDEBAR" folders. One more good practice to get into is coloring your layers to improve your workflow. Simply right-click on the eye icon next to each layer to select a color.

Step 6 – Gradients Part I

Gradients can really improve your design; however, if you’re not careful, gradients can really disable your design. Here is my suggestion: Go crazy with your gradients, just make them all very subtle.

Double-click on the "Header BG" layer and select Gradient Overlay. Click on the gradient that comes up to open the Gradient Editor. Delete all the swatches except the first two – foreground to background and foreground to transparent. Now create a gradient from the darkest gray to the middle gray and press new to add it to the Presets. Repeat this until you have eight new gradients – four darks to mids and four mids to darks. Click on save to save these in a new folder called "Assets." Then place it in the root folder for this project. Now whenever you come back to this project or you will have all the gradients right there.

For your "Headers BG" layer, use the mid to light gradient from the dark gray swatches.

Step 7 – Gradients Part II

For your gradient on the "BG" layer you’re going to want to create a bit more complex gradient. There will actually be two gradients in the "BG" gradient. When it comes time to code they will be separate image files, but for us we just need to make one complex gradient.

Notice how there is a small section of the gradient that is going to be the same color? This will be the background color of your HTML file and will allow the web page to grow, but the gradient at the top to stay at the top and the gradient at the bottom to stay at the bottom.

Step 8 – Working with Illustrator Part I

Photoshop is an amazing program, but if I find out that you are creating logos in Photoshop I’m going to report you to Adobe. Logos should be created in a vector program – for this tutorial we’ll be using Illustrator.

Open a new file in Illustrator and create your logo (Note: In real projects you should never be starting your web design before you have a logo). While the logo in this example uses Rockwell, having a third font for your logo is not much of a concern. Save your logo in the "Assets" folder where you put the gradient file.

Once you have this logo, we must bring it back into Photoshop for some styling. Simply bring up Illustrator and Photoshop next to each other and drag the pieces of your logo over to Photoshop. Since each piece will have a unique styling, dragging them over individually as opposed to as a whole will help when you start styling.

To align the separate pieces bring in one version of the whole logo, lower the transparency and use as a guide for matching. Delete it when you’re done. Shift-click all the layers of the logo and press Command + G to group them in a new folder. Rename this folder "LOGO" and place it inside the "HEADERS" folder.

Each piece will automatically transform into a smart object. This means they will still act as a vector object like in Illustrator – you can use the Transform Tool (Command + T) freely without losing quality.

Step 9 – Effects

After you’ve sized and placed your logo, you’ll need to style it. Use the gradients that you created before to give the logo some depth – mix the colors up, but keep the darker color of the gradients on the bottom for both of the words.

Next add a drop shadow to one of the pieces. Set the Blend Mode to Multiply at 100%. Make sure you have Use Global Light selected and set it to 120 degrees, with 1px distance, 0% spread, and 1px size. By enabling Global Light you will set all effects with shadows to be the same degree – remember consistency, consistency, consistency!

I’ve read around people showing how to copy and paste a layer’s style, while that’s a good method for layers that are very far apart, here are some quick ways to move and duplicate effects. Just like when you want to multiply a layer on the canvas and in the Layers Palette by holding down Alt and dragging a new copy of that layer – you can duplicate effects with the same method.

Alt-drag on the fx symbol in the source layer to the new layer and you will replace the new layer with all of the effects of the first layer. If you only want to duplicate the Drop Shadow though, instead of the fx symbol, then Alt-drag the individual effect on to a new layer and you will only replace that one effect, or add it on if the new layer doesn’t have it enabled. Use this method to ensure that all layers of the logo have the same drop shadow.

Step 10 – Graphics

Select the "Header BG" layer. Open the effects and add in a 1px black border with the position set to Inside. Next, give it an Outer Glow that has the blend mode: Multiply, Opacity at 40%, Color of black, and Size of 9px.

Go back into Illustrator and create some interesting and creative shapes that will be used as the light background for the header area. Color the shapes white, drag them over to Photoshop, set their blend mode to Screen and their Opacity in varying amounts from 2-10%. Take another look at the final image, you will notice there are many circles and strokes of circles used, these were all created in Photoshop. For the more complex shapes, Illustrator is faster, but for circles you’ll actually save time just creating them in Photoshop.

Now we’ll make a circle with just the white stroke showing in Photoshop. Create a black circle with the Ellipse Tool, then open the effects for that layer and give it a white stroke. Close the effects and then set it’s Blend Mode to Screen, you will see everything but the white stroke disappear. The biggest advantage of this is the ability to change the width of the stroke by simply opening the effects and editing it.

Spend some time messing around with this, experiment with different opacities and compositions – create some funky shapes that can help you individualize this design. Don’t worry if some of your shapes are visible below the header, we’ll take care of this in the next step.

Step 11 – Masking

Select all of the shapes and put them into a folder above the "Header BG" layer. Command-click on the vector mask (the gray box) of "Header BG" to see the entire header selected on the canvas. Now, select the folder you just created and click on the little button at the bottom of the layers window called "Add Layer Mask"

Masking is something I really don’t see enough of in my professional practice, it’s very useful and quick, and the best part is that it is a non-destructive method. Consider that you could have just flattened the shapes into one layer and deleted the area sticking out. But then you wanted to change some part of the composition or the stroke on one of the circles – masking makes going back and making changes faster.

Step 12 – Graphics Part I

Below the header you’ll notice some graphics that resemble upside down rolling hills. Utilizing your swatch colors and playing with the transparency you can achieve this look. Eventually, these will need to be tweaked to tile horizontally.

Let’s consider for a second these and the rest of the non-functional elements of the design. There are a decent amount of, well, just somewhat random graphics. What contribution do these add to the design? First, graphics like this are a great way to direct the feel and mood of a website, a great way to help a brand propagate.

While I don’t nearly have the expertise to be explaining branding, I will attempt to give you a quick rundown so you can put this all in perspective. A brand is everything about a company that a consumer feels – the emotions, memories, sounds, colors, experiences, etc. Marty Neumeier, in his book The Brand Gap explains extremely clearly that "A brand is not what you say it is. It’s what THEY say it is." So what does this all have to do with the graphics? Well, while you can’t construct a brand, you can help it grow in a customer’s mind by continuously providing visuals that are evocative of the essence of your company.

OK, so take a look at the final image, what does it say to you about this company? My focus was to make the colors and shapes translate a sense of fun and funkiness, but the structure and strict grid layout give a sense of professionalism and seriousness. Is this the exact brand that every company aims to build? Certainly not, each company should be unique and each website extrude a differentiated aura.

Step 13 – Working with the Background

Hide everything but the "BG" layer. The background of this design is framed by a large rounded rectangle. This adds a little more structure and depth to your design. Since you won’t be giving the main content its own box like the sidebars, this is a good approach to washing out the background graphics and improving readability. The white rounded rectangle has an 8px radius, the same as the boxes – another consistency detail. You’ll find more effects details in the image below.

Using the same method as with the header, bring in some shapes from Illustrator and move them around to make little graphics. As you continue designing you’ll probably find yourself fidgeting around with them to find a composition that works well. Mix your shades of dark colors and transparency.

You may notice the icon from the logo is used a lot, a kind of subliminal reminder. I had a film professor in college who taught me that an image, color, etc. needed to be repeated at least three times in a film for a user to remember and take meaning from it. I try to use that principle with my design – the logo has been repeated numerous times (tastefully and within reason) with the hope that the user will become familiar with the company and remember the icon.

Step 14 – Links, Hover States and Designing Functions

The navigation of this design is heavily influenced from my current favorite website – aviary.com.

The little home graphic and the word Home are a bit brighter and there is a lighter gray background behind it – this is to improve usability. Think like the user! Let them know easily which page they are on. Common ways of doing this is through tabs, color, underlines, highlights and extra graphics. Think about these options and be creative with your approach.

For links and buttons, a hover state is a huge improvement for your usability. Look back again to the final image and look at some of the links. A well thought out design will consider what these will look like and how they will function. If you don’t code your own sites, use a little image of a link cursor to indicate to programmers what is going on. Hidden functions like a drop down menu (pictured below) must be considered and fully designed. Waiting to find your beautiful design is paired with some hideous drop down menu will drive you crazy. If you are the designer, it’s up to you to consider all of these.

The link cursor image can be found as a PNG along with some more free design resources here.

Step 15 – Pixel Fonts

Did you notice that NEW! badge? I just broke one of my first rules! Well, we’ll make a small exception for pixel fonts! Pixel fonts don’t have any anti-aliasing, so it makes them very crisp. This crispness can often be unsightly for a regular sized font, but pixel fonts function wonderfully at small sizes. Take a look at how illegible Verdana and Georgia are at 8pt vs. the pixel fonts, a big difference, yes?

Pixel fonts are popular in Flash, they load faster and maintain that crispness, but they work well in web design too! OK, so now that you know about the joys of pixel fonts, be sure to use them sparingly. For applications like this small NEW! badge it works great, but for the most part you shouldn’t be using them for many other applications – no one wants to read more than a few words in a pixel font. The font used in this example is called Uni 5063 and can be downloaded for free from Miniml.

Now, examine the rounded corners of the drop down menu. The white background is actually constructed out of three rounded corner rectangles. The third has been turned inside out with the Direct Selection Tool to make a rounded inner corner.

Step 16 – Text Styling

Turn your sidebars white and create guides that give each of your sidebars a padding of ten pixels. Add in all the dummy text you’ll be using and duplicate the sidebars as needed. To extend or contract them vertically use the Direct Selection Tool to select the bottom four anchor points and nudge those down or up with the keyboard. The next step is fine tuning the style of all the text.

All of the text has been arranged in a hierarchy of importance and focus, and this is signaled through the styling of that text. The largest font size and darkest color (read: highest contrast) is reserved for the main content headline. The sub headline is bigger and darker than the main body and the main body is bigger than the sidebar content, and so on. Be aware that all of the colors are from the swatches – consistency, consistency, consistency!

Step 17 – Styling the Sidebars

Now that you’ve organized all of the sidebar boxes and the text is colored appropriately, you can start styling the boxes. Give each entry a very light background gradient and use the Line Tool to draw a horizontal line at the top of the gradient. These will visually separate each entry. Give the sidebar box a light drop shadow.

For the background of the title area of sidebar sections, draw a rectangle underneath the other styling/shapes and add a Gradient Overlay of pinks and a 1px stroke filled with a horizontally reflected gradient of pink to white. Then give the title background layer a Layer Mask in the shape of the sidebar box.

Repeat these steps for all of the sidebar boxes your design has. If you’re interested in creating the newsletter signup box, leave room for it and we will cover it in the next couple of steps.

Step 18 – Working with Illustrator Part II

To create that little graphic at the bottom of each sidebar box it will be much faster if you work with Illustrator just a little more. Illustrator is often set up to be in the color mode CMYK; however, since you are designing for the screen the color mode will need to be changed to RGB. Switch over to Illustrator and go to File > Document Color Mode > RGB Color. Next you will need to draw out your desired footer graphic.

Now switch back to Photoshop, select the three middle swatches of dark gray, pink and cyan – drag them over to Illustrator. Use the Eyedropper Tool (I) in Illustrator to color the graphic as desired. Drag the graphic into Photoshop, size and place accordingly. You can add some effects too, I went with a light Drop Shadow and a subtle Gradient Overlay (black to white, with a Blend Mode of Multiply, and Opacity of 10%)

The advantage of this procedure is having one smart object that is already colored. If you were to drag this into Photoshop and the attempt to color the individual pieces it would be a longer process that would require you to rasterize the smart object and create more than one layer.

Step 19 – Graphics Part II

I won’t get too crazy into the ideas behind the graphics and branding like before, but I want to touch on some of the foreground graphics in the site. In the final image there are a number of graphics similar to the one in Step 18, but they’re a little more complex. Once you have drawn the shapes of your graphic open up the effects and add a Gradient Overlay.

You can see how the colors are arranged in the gradient to give the appearance of a sharp divide between the lighter shades and darker shades. Keep in mind that there are a number ways to accomplish this, including using white rectangles and layer masks.

These graphics are great for enclosing and personalizing icons. Like the question mark in the main body section Did You Know… any icon or symbol could be placed in there. The examples below use icons from the free pack Simplicio and many more free icon packs can be found at Icon Pot.

Step 20 – Buttons

Surprisingly, for me, one of the hardest parts of web design is creating custom buttons. These buttons follow what has been dubbed "Web 2.0 Design" by the web design community.

First, let’s examine some of the buttons on the final image. For consistency the text on every button is Rockwell bold except the login button because of its small size – Rockwell doesn’t function well at such small sizes. Additionally, all the styling of the text and the background buttons are the same.

Looking next at the zoomed in button you can see some of the effects more closely. A lot of the effects used are very common to creating that Web 2.0 style, especially a 1px stroke around the button, drop shadows on both the text and the box, icons, something to give the impression of 3D and gradients. You can see the Follow Us button uses all of these. To create the 3D effect an Inner Drop Shadow was applied to the background box. Look closely and you will see that the text has a very sharp drop shadow – this creates the same impression as if you were to duplicate the text. Color the bottom copy black and move it down and to the right one pixel.

Don’t feel that there is any right or wrong way to create buttons. Take a look at what is out around the Web, play around with some of the effects and settle on something that you feel both looks like a button and is an appealing match for the web design you are working on.

Step 21 – Breaking the Grid

As important as it is to have your web design follow the grid, occasionally breaking the grid here and there can help give your design some character. The primary place that the grid is broken in this web design is in the header area near the logo. This graphic mashup eases the tension of the grid structure and gives the site a funkier and differentiated feel. It should be noted that the design and the content break the grid visually in this area. The description of the company adheres to the column, but breaks in the row and the graphics are almost random in their placement. The graphic mashup is comprised of shapes, gradients and drop shadows; you should be very familiar with these by now

Another place the grid is broken is down at the newsletter signup with a trendy little ribbon wrap. The wrap doesn’t do a whole lot to break the grid visual, but it gives the content a little extra room to push the margins of the content out. The desired effect of the ribbon was that it would steal a little focus and give the page a bit more style. The breaking of the grid is small and subtle, but it really helps improve the design.

I’d like to mention one last little thing concerning designing function. Under the Recent Articles you’ll notice some more ribbons, one for each article. I’ve designed these with the idea that when a user hovers over the article then the number of comments slides out. It’ll take a little AJAX fidgeting in development, but the desired effect can enrich the experience of the website while providing some additional information.

Step 22 – Advertisements

This design would be easily converted to a blog layout or WordPress theme and a common practice to in the blogosphere is to place advertisements. Ads in general are pretty easy to place and design for. When designing you should use real ads and not just leaving blank areas, especially when presenting to clients. For a good selection of banners, I usually use some of the banners in the portfolio of RightBanners or just visit any number of websites and blogs that have ads like PSDTUTS.

When placing ads, the biggest concern is that it’s above the fold, mostly because marketing people and advertisers believe in it religiously. While there is significant evidence that the average user is aware of the illustrious scroll function, it’s going to be a while before everyone accepts it. Realistically, if the content is engaging then users will scroll to see the rest of the page. The fold is generally around 570-600 pixels down on a 1024×768 monitor.

Conclusion

While I hope you’ve learned something from this tutorial, I’d like to take a moment to talk about things I don’t like about this design. No website is perfect and there are many factors that are matters of personal taste. Additionally, since this website was designed without a specific brief and no real purpose, the design lacks a strong focus.

In my opinion, this design is a bit too busy and cramped. While I tried to really give the type some breathing room, the padding and margins are still very tight. Sometimes this is a must if your website has a lot of information that must be displayed, but the amount of graphical elements might be a tad too much. While I really am in support of using graphics and color to enhance the mood, feel and emotions of a website, be sure that your content does not get lost.

I think that’ll be plenty for now, I’m eager to see what you come up with after reading and following this tutorial!

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

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.

Step 1

First of all you need to make a quick sketch of the icon you have in mind. It doesn’t need to be very artistic (I know ours is not) but it must illustrate a simple idea of what you will create.

Step 2

Create a new layer, then use the Pen Tool (P) to trace the rough sketch and create a final shape of the car.

Step 3

It is time to add some color to the car. Use this code #ff6d00, then into a new layer start painting the color. Place the layer below the sketch you made in Step 2.

Step 4

Now you need to erase the excess color using the Pen Tool (P). After you made the path around the car, simply press Command + Enter and transform the path into a selection, then in the end press delete.

Step 5

Create a new layer and in this layer you will have to select the windows, tires and a lower bar of the car. Now fill them with black.

Step 6

Next create a peaceful hippie logo. Use the Ellipse Tool and the Rectangle Tool (U). First, create the circle then extract part of the circle with the same tool. Next use the Rectangle Tool and create the three lines.

Step 7

After you finish creating the logo, merge those three layers. Now double-click on the layers thumbnail to enter the Blending Options. THen apply some Bevel and Emboss and a Gradient Overlay.

Step 8

Let’s create the spotlights. Using the Elliptical Marquee Tool (M), first create a new layer then Right-click, select stroke, and use 3px for the stroke. The color used for this stroke is #7a7a7a.

After you have achieved the shape you need, double-click the layer to enter the Blending Options and add a Bevel and Emboss with the settings shown below. Repeat the step for the other spotlight.

Step 9

Now it is time to start adding some gloss on the spotlights. Create a new layer then make a selection inside one of the spotlights. Use the Radial Gradient Tool set to White and Grey as shown below.

Step 10

Create a new layer and make a new circle using the Elliptical Marquee Tool. Use a white to transparent Linear Gradient and apply some gloss, like in the image below. In the end, repeat these two steps for the other spotlight. Also, decrease the Opacity of this layer to 80%.

Step 11

In this step we’ll create the bumper. First, create a new layer and name it "bumper." Now use the Pen Tool (P) to make a path and transform the path into a selection. Next, fill the layer with the same orange and desaturate the layer.

Using the Burn Tool (O), brush over the lower side of the bumper. Also, if you want to, you can add some soft noise to make it look more real.

Step 12

Now we’ll add some simple lines that will define the car’s shape better. Using the Pen Tool, draw two paths like below. Set the brush to 1px and black. Next duplicate each line two times, press Command + I to inverse the color and make them white. In the end, place them beside the black strokes. You can also use the Eraser Tool (E) with a soft brush and erase the line heads.

Step 13

Repeat Step 12, but this time you need to create these lines in a different area of the van. After you create the black stroke, duplicate it and move it above it. Also, transform it into white by inverting the colors. Use the Eraser Tool and softly erase parts of the line.

You also have to create another similar line like the white one, but this time leave it black and move it below the first one. Also, you should add a soft shadow using the Burn Tool on the orange layer.

Step 14

Next you need to change the color of the hood. Create a new layer and name it "Hood." Now make a selection as shown below and fill it with #006c00.

Step 15

Let’s add more gloss on the hood. Make a selection like in the image below. Next, use the Radial Gradient Tool set to White and Transparent to create a new layer. In this layer drag from left to right to obtain something similar to the image below, then duplicate the layer and move it to the other side.

Step 16

Add another gloss on the bumper by creating a new layer, then make a selection like in the image below, and fill the selection with white. Now set the layer Opacity to 60%. Next, duplicate the layer and move it to the other side.

Step 17

Add a gray light on the bumper using the same techniques we’ve covered. Then duplicate the layer and move it to the other side.

Step 18

It is time to work on the tires. Create a new layer, and use the Lasso Tool make a selection like in the image below. Fill the layer with #424242. Then using a soft black brush, draw over the edges of the layer.

Step 19

Continue creating the break-apart for all the elements. Look at the image below for reference. Also, use the splatter brush for greater effect.

Step 20

In this step, we’ll add some more gloss to the hood. Make a selection as shown, and then use a white to transparent Radial Gradient to create the gloss. Use the Eraser Tool and remove the excess gloss. Also, set the layer to 90% Opacity.

Step 21

Create a new layer and make a selection using the Pen Tool. Fill the selection with white, then set the Opacity of the layer to 70%.

Step 22

Create a new layer again. In this layer, use a black brush to add a soft shadow.

Step 23

Using the Pen Tool stroke a 1px black line as shown.

Step 24

Create two more glossy layers on top of the van.

Step 25

Now we need to create the smaller spotlights. First of all, we’ll create a red circle with a black stroke and a white inner glow of 1px for both. Rasterize the layer then apply another white stroke. Then using a white soft brush, add the glossy effect.

Step 26

It’s time to work on the windshields and make them transparent. Use the same techniques as before: create new layers, make selections, fill selections with white, and then erase or decrease opacity.

Step 27

Now we’ll add some more reflections to the glass. These lights are supposed to be the reflection of neon.

Step 28

Repeat Step 27, but this time make the reflection on the side windows.

Step 29

In this step, you’ll create the mirrors. Create a new group and a new layer and name it "mirror." Fill the layer with the color, then start adding new layers for each reflection, light and shadow applied.

Step 30

Add the shadows below the car using the Brush Tool and Eraser Tool.

Step 31

In the last step, we’ll create the windscreen wipers.

Step 32

Using Icon Composer and Candy Bar add the icon to your favorite application.

Conclusion

Hope you learned some new techniques and had fun while doing so. You can view the final image below or view a larger version here.

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

Final Image Preview

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

Step 1

Let’s the design begin! First of all, this isn’t a basic tutorial, so I’ll skip some basic explanations. Anyway, anyone with an intermediate – advance level of Photoshop skills will be able to do it. Second, it’s really hard to obtain exactly the same result that I’ve got, and you must use your imagination and good taste to get something similar or better than my design. And third, this was designed by considering application into a Wordpress template, but you can quickly convert it into another engine’s theme, or even a custom website.

Moving forward then! Create a new document 960 pixels by 1000 pixels and RGB. Draw some guides to mark the limits and go to Image > Canvas Size to resize the document making the canvas’ width bigger (1460 x 1000 px). This way you’ll have your design centered into a big document and see how it looks on widescreen resolutions. Also, draw a guide to mark the header height.

Step 2

Draw a horizontal guide in the middle of the document and use it to fill the "Background" layer with a dark blue Radial Gradient (#0D2B53 – #010D1F). I’m also adding a few guides as bounds of the main page’s padding on the left and right.

It’s very possible that we’ll change the document’s height later, so add a New Fill Layer (#010D1F) below our "Background" layer.

Step 3

Since one of the PSDTUTS readers suggested using real pictures instead of the classic Clouds filter, we’ll try that this time. Paste this picture of some storm clouds into a new layer named "Clouds" and change its Blending Mode to Overlay. Then go to Layer > Layer Mask > Hide all, and draw a Radial Gradient from white to black (#FFFFFF – #000000), which goes from the middle top to almost the middle bottom. Then adjust the "Clouds" Levels a little bit to make the clouds darker.

Step 4

Now paste this nice skyline of a spanish shore into a new layer named "skyline." Then create a new Adjustment Layer > Channel Mixer… and select Black & White with Blue Filter (RGB). Then to apply that effect just to the "skyline" layer in the layers palette, hold the Option key and click between the Channel Mixer layer and the "skyline" layer. Finally, change the "skyline" layer’s Blending Mode to Overlay.

Step 5

Apply a Layer Mask > Reveal all to the "skyline" layer. Then using a big and black (#000000) soft Brush hide the borders of the image, then select a Grunge brush (I’m using this Grunge Brush set by Kelzky13, especially brushes 250 and 181) and make the borders a little bit more irregular.

Step 6

Next type the title "Magic" using the Scriptina font. Then apply the layer styles shown below: an Outer Glow (#9EB6D0) and a Gradient Overlay (#70ABF6, #FFFFFF, #B4CBE7, to #FFFFFF). Also, now is a good time to organize our developing design into folders. Put all the layers into a new folder named "Background" and the text inside another folder named "Logo."

Step 7

Now we’ll add some stars to our design, you can use any star Brush set but I’m using this set: Star field brushes by BL1nX. Then using the brush 550 of the set, paint the stars in white (#FFFFFF) into a new layer inside a folder named "Stars." Notice that I’m putting the brightest star over the dot of the i. Then apply a gradient overlay using three colors (#3A8FEF, #FFFFFF, and #66C9FC) to the "Stars1" layer.

Step 8

Next, using the brush 615 of the stars field set, add more stars to the sky into a new layer named "Stars2," then with a soft Eraser, delete the stars over the buildings. Next, add a Outer Glow (#8AB2FF) to "Stars2."

Step 9

Add more stars to the "Stars 2" layer all across the design, then using the Eraser tool, delete some areas of the stars. Finally, apply a Gradient Overlay effect to "Stars2" layer, using four colors: #6AB1D1, #FFFFFF, #94CFED, and #FFFFFF.

Step 10

Now download these Star Brushes by jen-ni and keep the brushes handy because we’ll use them several times in this tutorial. Select a 65 px brush (I’m using number 148) and draw a white (#FFFFFF) star into a new layer just above the dot of the i. Then apply an Outer Glow (#00BCF9) to the star to make it brighter.

Step 11

Duplicate the "Magic" text, select the text, and type the word "Night" in it’s place. Next, set the Outer Glow to white (#FFFFFF) and the Gradient overlay to three colors (#F9DA5B, #FEAE00, and #FFD403), see the image below to check the filter’s values.

Step 12

Let’s add some clouds to our night! Download redheadstock’s Clouds II brushes. Next, select the brush number 2464 and set its size to 960px (matching the design layout’s main width). Set the foreground color to #234B7F and paste a single cloud into a new layer named "cloud1." To keep the layers organized, I’m putting the clouds into a separate folder inside the "Background" folder. Now stretch the "cloud1" height a little bit.

Step 13

Following, Dodge and Burn the cloud a bit. Notice that I’m lightening the areas next to logo star and darkening the cloud’s bottom. Also, change the "cloud1" Opacity to 50%.

Step 14

Add one more cloud into a new layer named "cloud2." You can use any cloud you like, but use this color as a foreground: #5F83A5. Dodge the bottom of the cloud a little bit to improve the lighting sensation.

Step 15

Repeat the previous step but this time using another brush with this color: #36638C and place it above the "cloud1." Resize it, then Dodge and/or Burn the cloud if necessary.

Step 16

Select a big soft Eraser and delete the bottom of the "cloud1" layer to create a fade out effect.

Step 17

This is actually a critical step, we’ll add the main container background, you must never forget you’re designing for the web. Using the Rectangle tool draw a vector rectangle (#0A1D37) into a new layer all below the "Clouds" folder. Notice that my rectangle is inside the padding Guides. Then select the rectangle layer and go to Layer > Layer Mask > Reveal all… and draw a white to black gradient, which adds a nice effect at the rectangle’s top. Finally, drop a Guide below the Rectangle’s fade in, which will help us when we turn this design into HTML + CSS. Notice, that from the guide to the bottom of the background color should be plain.

Step 18

Now add another rectangle but this time as the Sidebar background, again help yourself with a Guide, and use the color #091525. Then, apply to the new rectangle a Layer Mask a little bit just like in the previous step.

Step 19

At this point, we’ve got the basic header background done. Now it’s time to add some details. I’ll put a unique RSS icon on the header. Copy this picture of the full moon and paste it into a new layer named "moon-rss." Then adjust the Hue / Saturation values to make the moon a little bit more yellow, and add both Inner and Outer Glow filters (see the values shown below).

Step 20

Add a small cloud shape with the color #7997B3 into a new layer above the moon in the layers palette. Then using a big soft eraser, delete some areas of the new cloud.

Step 21

Add the classic RSS shape (#DCA30B) into a new layer in front of “moon” layer but behind the “cloud” layer. Then, apply to it the filters shown below (a Gradient Overlay, an Outer Glow and a Drop Shadow). Finally, add a star somewhere over the RSS shape (see Step 10).

Step 22

Paste this image into a new layer, we’ll use it as background of our main pages navigation bar. Since the original image is a little bit stretched, we need to make it more wide, I played with both selections and the Move (Free Transform) tool to increase the scroll’s width. Then Warp the scroll just a little bit using the Flag warp.

Step 23

Dodge some areas of the scroll to increase the shadows and to improve the warp illusion.

Step 24

To improve scroll’s texture, apply a Gradient Overlay filter (#045F96 and #FBF4BD) and a Pattern Overlay as well.

Step 25

Now add a Drop Shadow to the scroll. You can use the Drop Shadow filter or do what I did, duplicate the scroll layer, and on Hue / Saturation adjust the Lightening to -100, Blur the black copy a little bit and distort it with the Free Transform tool to make it irregular.

Step 26

Next, add a cloud over the scroll, Dodge, Burn and Delete just like in Step 15. Then add the Pages link’s text using Georgia – Italic font. Use the color #0B1827 for the standard links, and the color #211808 for the hover link. Also, add some additional details like stars on the background and a line as the hover effect. You can see the layers’ structure at the bottom of the image below.

Step 27

As a final detail on the pages navigation bar, create a new layer above the scroll and using a particles brush, draw a line like it is a watercolor painting (see the image below). Do it a few more times but using different colors. Also, down the navigation bar "Stars" Opacity below 40%.

Step 28

Add the RSS related text. I’m using 10 px Aria, with yellow (#F2C90D) and white (#FFFFFF). Don’t forget to set the Anti-aliasing Method to None because most of the browsers renders the text without any anti-aliasing (IE7 and Safari are the exceptions).

Step 29

As an additional detail add this picture of a nice balloon. Extract the balloon from its background and place it somewhere below the logo, add a Color Overlay (#1F416E – Blending Mode: Overlay) to the "Balloon" layer to match the scene colors. Also, you can Burn the balloon’s left side just a little bit.

Step 30

Next using the brush 615 of the star field brushes (see Step add more stars above the balloon and the scroll. I’m also adding a chord to the balloon by painting a white curved line with a 3 px solid brush. Also, use the Eraser here and there to reduce the amount of stars.

Step 31

It’s time to add a post. First, add the title and the metadata row into a new layer named "Post." See the image below to view the Character values. Also, I’m adding a little star near the metadata as a visual detail.

Step 32

Let’s add more info into the "Post" folder, since the list on the homepage will have a preview of several post. We’ll add a preview image at left (200 px by 200 px with a 1px Stroke effect) and a brief text at the right. Also, we’ll add a preview of how many comments the post has on top right. For the comments field, create a new folder named "Comments" and add a tiny background with a small cloud and some little stars. Basically, just repeat one of the previous steps when we were designing the header, but in a tiny measure. Then add the comments number and the word Comments below.

Next, add a Tags line below the post and add a little star at the right of that line. Add a little star field as a background for the post, just if you want to. Finally, draw a divider (#1D324F) for the post using the Line Tool.

Then duplicate the "Post" folder and edit the copies to create two or three different posts. It’s very possible that your document’s height needs to be increased at this point, just do it by using the Crop tool or Image > Canvas size, jut like in Step 1. When you have resized your main document, increase the height of both the main background and sidebar background as well.

Step 33

Let’s work on the sidebar now. We’re going to add the Search form. Create a new folder named "Sidebar" and inside of it create another folder and name it "Search." Draw a cloud into that folder and dodge and bur it to make it look like the following image. Then using the Rounded Rectangle Tool, draw a rectangle over the cloud. Apply a 1px Inside Stroke effect (#697372) to the rectangle and change its Fill value to 50%.

Step 34

Add some white stars above the cloud layer using any star field layer, remember erase all the extra stars. Then duplicate, reduce, and Edit > Flip horizontal the "balloon" layer of Step 29 . Put it into the "Search" Folder. Also, add the title text using Georgia Italic and a nice yellow (#D5A934) color. Next add the search instructions and the button "Go!". You can see the Character’s values at the bottom of the following image. As a final detail draw a single bright star behind the text.

Step 35

Add the sidebar content text, titles, links, and put each section into a separate folder. Also, add a soft star field background on each folder and a shiny star behind each title. Besides, add a shiny star as an example of the hover effect on any link. Don’t forget both padding and margin Guides.

Step 36

We’re reaching the end. Let’s add a footer for the sidebar. First, fade out a little bit of the bottom of the sidebar’s background painting with a soft brush on its layer mask. Next draw a few clouds, then Dodge and Burn them. Make sure that the clouds do not invade the main content background or exceed the sidebar’s width. Then add a white star field behind the clouds and duplicate the balloon once more. I’m saving all this into a Folder named "Sidebar Footer."

Step 37

Finally, we’ll create the footer. First on the main content background’s layer mask using a big soft brush, hide the bottom to fade it out. Then select some cloud brushes and paint them all across the bottom of the design. I’m combining big dark blue (#0B1C38) clouds and small blue #223E63) clouds, as shown in the images below. Remember, those clouds will become a background image, so try to not cross a Guide between content and footer. Besides, remember to put all the footer’s related layers into a new folder named "Footer."

Step 38

Burn the lightest clouds. Then, paint a white star field by using brush 615 of the stars set. Following, paint a brighter star field with a different brush, in this case number 656 of the set. At last, delete the star field with a soft big Eraser.

Conclusion

I hope you found this tut useful. PLUS Members can download the PSD file and modify whatever you want, add or remove details and create your own starry design.

.

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