This tutorial will guide you through the process of designing a professional website with a funky colorful flair. The tutorial features some great colors, effects and layer styles in which you can use over and over for future projects. Let’s get started!

Final Image Preview

Take a look at the image we’ll be creating. Want access to the full PSD files and downloadable copies of every tutorial, including this one? Join Psd Plus for just $19/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.