Step 1: Set the groundwork

In Photoshop, create a new document, 800 pixels width x 340 pixels height. Add a new guide – 70 percent from the top border of the document:

Add a dark background (I chose #292929), add a text layer and type out your words. The text settings are: 100 pt in size, color #ffffff, and type is “Myriad Pro – Black Italic”. Note that if you don’t have the same font – use something a similar italic, block type font.

Now, delete all the letters in your text layer and duplicate the layer for each letter. What we’re trying to do is have a layer in its own layer like below. Nudge each letter so they’re quite close to each other:

Step 2: Create the Text Effects

Now we’re ready to create the text effects. Double click the first letter and apply the following effects:

Drop Shadow:

Inner Shadow

Gradient Overlay

Add the following colors for the gradient (to do this click the gradient box from above). Move the color handles in the bottom bar to the position indicated. Leave the colors at #000000 and #ffffff.

Step 3: Copy and Paste the Layer Styles

Right click the first letter layer, select “Copy Layer Style”

Go to the next letter layer, right click and select “Paste Layer Style”

Continue doing this process to all the layers.

Step 4: Final Touches

Adjust your letter positioning according to your text content. The point is to just have enough spacing for subtle shadows to appear onto the next letter. I also decided to change the font color to the word “flyer” to #d30000 to match my color schema – choose your own color for yours.

Finally, create a new layer just above the background layer. Using the brush tool with these presets: (choose a really soft tip, adjust to 300 pt, with color #ffffff, opacity level to 24 percent). With just one click – daub right in the center of the document to give it that really soft glow in the background.

Conclusion

There you have it, a simple yet beautiful logo from nothing more than layers of text subtly overlapping each other. Play with the effects to your heart’s desire. You can even adjust the vertical positioning of each letter – just to add a bit more kick. Feel free to Download the PSD file.

The Output

Below is a preview of what we’re building. The aim is to have a mock up that is fully layered, so we can optimize for the purpose of SEO and page performance. Ready to get started – Let’s begin:

Part 1 – The Fold

We’re going to design the page from the top to bottom. The fold is first part of a web page can see – without having to scroll downwards. In our case, this includes the header and the big red feature bar:

If you aren’t familiar with 960.gs – it’s a CSS framework that follows the standard 960 pixels page width rule. Download the photoshop template and check out the guides – we are building the page following the 960 grid rules:

Create a new layer – this will be the fold layer. Select the full page width, with approximately 380 pixels in height. Fill it with a solid color – in my case I chose a bright red #730701:

Create another layer for the header bar, select the full page width and 48 pixels in height. Fill this with another solid color – in my case, #bcbcbc for light grey.

Where the header bar and the fold meet, we want to add an “etched” effect. We achieve this by using 2 lines using the “line” tool. Create 2 horizontal lines at 1 pixel each (make sure you hold the “Shift” key) as you drag it across the page. Nudge one line so that they sit just on top of one another. The rule is to use a lighter shade for one line, and a darker for the other (it is important that you play with the colors, and zoom out and test if the etched look is achieved). Add a subtle gradient fill for the header bar as well.

The next step is to add a large feature image. This sits on top of all the layers to give it that 3D effect. Place in at almost half the 960 pixel page width, overlapping some part of the header and pass below the fold. Include the effects as shown:

Immediately to the left of the feature image, add your large slogan text. This is to be your attention grabbing statement, and is important to be the most prominent. I chose Rockwell at size 36 pixels, with -50 tracking. Also add the following text effects:

• Drop shadow – Normal blend mode – #000, 90 degrees angle, 1px distance, 0 spread and 1px in size
• Inner Shadow – Normal blend mode – #FFF, 90 degrees angle, 1px distance, 0 choke and 0px size
• Gradient Overlay – use default settings, reduce opacity to 34% and 90 degrees in angle

Add a gradient effect to the background layer named the fold. The rule is to use a slightly lighter color than the existing background as one color, and the same background color as the secondary color. Fill by pressing the shift key and releasing simultaneously.

Add another 2 horizontal lines right underneath the slogan text. *Use the rule as described in the previous line tools used in the header and the fold separation. Add a smaller set of text – I used Arial with 14 pixels in size, #FFFFFF color.

To complete the fold – we add a glow effect to the bottom area where the borders separate the large text and the small text. Select a small area (shown below), grab the brush tool, select white for the color, increase the brush radius (shown below) – reduce the opacity all the way to 12 percent and daub a quick light stroke.

Part 2 – Below the Fold

Below the fold technically includes everything under the fold. But for the sake of this tutorial – it includes all BUT the footer section. The reason is – this will be the only part that will need to grow. If there was additional content to be made – it will be inside this section. The fold and the footer remain static in height.

We start by creating a new layer. With the selection tool, select everything below the red feature section below. Fill this selection with #f3f2ed using the paint bucket tool. *Note that the large image layer should be placed on top of all the other layers.

We then create a new horizontal guide. This guide should be right below our feature image (allow a few pixels extra for the added shadow effect). This guide’s main purpose is to know where we will slice our divs (which I will cover once we start coding) and where our gradient ends. Grab the selection tool once more and start from where the red area ends – down to the new guide. Using the gradient tool, select #e1decf primary color and #f3f2ed and fill with a straight line (hold shift).

We then add that same “etched” look where the two layers meet. The same technique is used – create two lines with one darker and one lighter. In this case the upper line has #670600 fill and the second #faf9f3.

Next step is to create the sub heading. With the type tool, choose the Rockwell font at 24 pixels in #292929 color and type the word “TESTIMONIALS”. Directly to the left of the text – I imported the “users_two_48” icon from WeFunction and scaled the image down to 60 percent and desaturize (Ctrl + U, slide the saturation all the way to the left). Add two horizontal 1 pixel lines (#e5e5e2 and #FFFFFF) directly underneath (by this point of the tutorial, I’m going to assume you have this technique down already).

*Tip – Create a group called “sub headings” and add all the above elements in it. We will be duplicating this sub heading in following sections.

Directly below the Testimonial subheading – we create 3 text boxes with some dummy text. I used Verdana at 14 pt, 20 pt leading. Make sure you allow enough padding and margin around each surrounding box. Align according to the grid. Note that this part of the design acts only as a marker. We will use actual text for these boxes.

Duplicate the two horizontal lines from the sub headings section. Move these 2 lines right below the 3 text boxes that you have created. Create a new layer, select 124 pixels (width) x 25 pixels (height) and fill with #FFFFFF with the paint bucket tool. Move this layer right below the two horizontal lines. Using the text tool, use 10 pt Verdana, color # 6b6b6b and type the words “more testimonials” – move this directly on top of the new layer we’ve just created. This acts as end marker for the testimonials section with a button that displays more testimonials.

*Tip – create a new group for the above elements and name it “end marker”.

Next, we add a “Previous Work” section. Remember that we created a group called “sub headings” a little while back? Duplicate this group and name it “sub headings 2”. Using the down cursor in your keyboard, move the new group approximately 560 pixels downwards. Change the text to say “PREVIOUS WORK” and use another icon, scale it down and desaturate.

An image gallery will showcase our portfolio’s “Previous Work” section. Similar to the testimonials area, we are dropping some dummy thumbnails in our photoshop file, just for mock purposes. We are going to span 4 thumbnails across at 210 pixels each in width. Make sure the thumbnails align to the grid, taking 3 columns each with enough paddings in between each other. Add the following effects for each thumbnail: Drop Shadow (settings shown in below screenshot) and an inside stroke of 6 pixels and #FFFFFF fill color.

To complete the “Below the Fold” section – we create an end marker for the “Previous Work” area. Duplicate the group “end marker” and name it “end marker 2”. Move this newly created group approximately 380 pixels downwards. Change the text in the button to say “more previous work”. Our next quest is the Footer. Keep going!

Part 3 – The Footer

And now we come to the final piece of the design process – the Footer. I enjoy designing footers because they represent completion; they’re also the most overlooked section of a page that I feel that it deserves the same attention as the other parts.

The height of the footer is approximately 375 pixels. If you haven’t already done so – extend your canvas size to an additional 375 pixels – but be sure to click the anchor all the way to the top.

Create 3 new horizontal guides: first is where the “Below the Fold” background ends, then approximately 35 pixels below, and third – another 30 pixels down (this is where the footer background layer starts). Make a selection from the first guide to the next one down, make sure you’re on the “Below the fold” background layer, and do a gradient fill: primary color #e3e0d2, secondary #f3f2ed. Next, create a new layer for the footer background and add a gradient fill: primary color is #361f01 and secondary #493215. Do 80 percent for the primary fill. Finally, create 3 horizontal lines with the line tool at 1 pixel each with the following fills (in the following order): #ffffff, #000000 and #624825. Line them according the last guide you’ve created (see below).

Duplicate the text layer for the slogan (The Fold), change the content to say “Hire me for professional work”, drag downwards to the footer, and place on the left half of the footer area. Add another text area, use Verdana, 12px #ffffff, enter some dummy text, and place directly below the large text.

On the right half of the footer, we’re placing a rounded rectangle for the background of the contact form. Using the Rounded Rectangle tool – create a rectangle, center between 6 columns in the grid. Add a drop shadow and stroke effect as shown below:

Create a new layer and make 3 rectangles inside the rounded rectangle we’ve just created. These will act as the form fields. Note that these are just as markers which will not really be used in the output. We’re using real form fields in the code. Fill these rectangles with #ffffff using the paint bucket tool.

What’s a contact form without a pretty submit button? Using the rounded rectangle tool – create a button and add an inner shadow (66 percent opacity) and a 1px inner stroke – #85827e. Add the text “Submit” on top of this button using “Rockwell” at 14px.

Finally, remember I said the footer should have the same detail as the other parts of the page? We’re going to add a nice glow in the background which will highlight our large text and the contact form. Select the footer background with the selection tool. Next, pick a soft round brush at 500 pixels, select color #ffffff and decrease the opacity of the brush to 10 percent. Center the brush horizontally and halfway above the footer – click once and Voila – instant glow in the background!

And there you have it. We’ve just created a full page mockup in Photoshop. Next will be coding the HMTL and CSS – so stay tuned!

You can download the .psd from this link

Argyle’s Drudge has a very narrow content area of only 746 pixels. I chose to stay away from the standard 960 grid design because I find that grunge layouts don’t seem to play well with it. Speaking of grid based design, find this article about lining up your posts perfectly within the grid. As I was saying – the whole point of grunge is random and spontaneous – conforming to a grid just doesn’t fit.

More Details:

The pale blue watercolor splash background is courtesy of my Backgrounds etc. The beautiful hand sketched fonts is known as “Fail Font” and can be downloaded from DaFont.com. Note that since “Fail Font” is free – it’s the perfect opportunity to use Cufon in your coding. Cufon is the technology that enables you to use any kind of font in your pages (read article).

Argyle’s Drudge is completely free to use for your next theme of choice. May it be WordPress, Blogger, Typepad: all I ask in return is for you to follow my updates in Twitter or leave a comment below.

Download Argyles Drudge.

The project I envisioned was a full website turn around. The company was still using static pages with old style tables and in line styling. My proposal was to completely overhaul their site into WordPress.

As you can see from above I planned on using WordPress as a CMS. A large section that will house a jQuery Content Slider or another form of slideshow that leads viewers to try out the demo. Directly below are a set of three column containers which will pull posts from different categories. A slightly different approach for the footer – which contains six mini columns as the main sitemap.

Feel free to download this fully layered and grouped PSD file from this link. Hopefully you can find a good use for the template. If one of you should become successful in taking some company away from static pages – then I’m happy.

The Traffic Logo is done by another designer which was required to stay intact. You can download the .psd files from this link. Please feel free to comment below or follow me in Twitter.