STEP 8: Add logo title

For this part you can use any of the many custom shapes provided by photoshop, but I will use a simple circle. Select the Elipse tool and while holding shift, create a small elipse shape.

Now with the newley created elipse layer selected, go to Layer>Layer Style>Gradient Overlay, from the drop down gradients, select the rainbow gradient you saved from Step 7, and change the Style to Angle:

Now using the Horizontal type tool, click on the right of the rainbow elipse and in white text type your website name. You want to use a bold font to put emphasis on the website name, I used a font called “GEIST KNT” size 27, you can download it for free. For Anti-Aliasing I suggest to set to: smooth.

You can also add a slogan or proffesional title, with the type tool click under the logo and title, and use Verdana size: 10, color: #585858. If the slogan text is too wide or narrow to fit nicely, you can change the space between letters in the Character window. If you cannot see your character window, go to Window>Character. Also, you can make all the letters capital by selecting the “TT” image in the character window. For the slogan I set my Anti-Aliasing to: none.

STEP 9: Insert your content

Using the Horizontal type tool, add your content and title text, and using your Rectangular Marquee tool create a 1 px line under each title and fill with black color. You can also use the type tool to add footer text. For any text in your content, it is suggested that your Anti-Aliasing should be set to: none. I used size 11 Verdana for all my content text.

To add text in your content, instead of simply clicking with your type tool, hold it down to create a text box to contain all your text. This makes it much easier to play around with spacing and alignment.

If you want to add image thumbnails into your design, you can use a similar method to earlier steps when you created the main rectangular shapes. Use the Rectangle tool to create a darker gray rectangle and add a suble change using Edit>Transform>Distort, I used the color #202020.

Once you have created and decided where you want these shapes, you can use the Rectangular Marquee tool to set up a place holder shapes where you can insert your images.

After that, to add your own images all you have to do is bring your image into the file, in the layers pallet place it right above the place holder shape, right click on your image layer and choose Create Clipping Mask. That will cause your image to only show within the boundries of your place holder shape.

If you want to let your audience scroll through images, you can add simple arrows to make your page more interactive, the easiest way to do this is using the Rectanglular Marquee tool to select, fill, and then use the pencil tool to create a pixel arrow:

STEP 10: Adding light and shadow

To enhance the look of your designs, you can use the brush tool to add some light and shadow.

First find your main content shape layer, the one that is gray and has 30% opacity. Select it and create a new layer (so it will be right above the shape layer). Right click on this new layer and choose Create Clipping Mask, and set the layer’s opacity to 60%. Now select the brush tool, and with 0% hardness, a large size, and black color carefully click and hold down as you move the brush a bit to the left and right. Do this in a way that you are only using the edge part of the brush:

If you have something very different from what I have, make sure your brush settings are similar or the same as that of the picture above.

Now to add some light, create a new layer and in the layers pallet place it under all your content shapes, so it is just above the background and pixel pattern layers. Set this layer’s opacity to 60% as well. Using the same brush, but with a white color, click once around the upper center of your content:

FINAL STEP: Adding Hire Badge

Many artists and designers like to have a visible graphic that says, “Hire me” or “For Hire” so those who want to seek their service can quickly figure out if they can hire. To do this, find the Custom Shape tool in your tools window, and find the shape called “Seal”

Note: If you cannot find this shape in the drop down shape menu, click the small arrow icon in the top right of the drop down menu, and select “All,” that shape should show up now.

While holding Shift, create this custom shape on the right of the bottom section of content. Make sure the color of the shape is black. Then, while the shape layer is selected, go to Layer>Layer Styles>Stroke. Set the stroke to 3px, Inside, Style: Angle, Fill type: Gradient, and select the rainbow gradient you have saved from Step 7.

Then using the type tool, click on the shape and add your white text, I used the following settings for the character of my text.

Lastly, create a new layer and select the Eliptical Marquee tool. While holding shift, create a marquee inside the shape you created, and use the gradient tool to create a color to transparent gradient within the marquee. Set the layer’s opacity to 30%, and use the marquee tool to clck outside of the selection.

That is all, you should now have a finished website design that looks like:

I hope you enjoyed and learned something from this tutorial! The trick is not to learn how to make identical designs, it is to use the techniques and apply them for your own web layouts.

Download the PSD file here

Note: This photoshop file is available strictly for educational purposes, you may NOT use it as any part of work you claim as your own creation, you may not sell any of this file’s content, if you see anyone breaching these terms please report it back to me.