Create A Wickedly Cool Horizontally Oriented Website Design

Are you in the mood for something different? I’ll guide you in the process of creating design of Stuff – horizontal-oriented blog and portfolio. Make sure you visit Stuff online version to see the final result!

Step 1 Create A New Document in Photoshop

Make it 1300 x 800 px. All that space isn’t really necessary, but it’s good to feel the panoramic character of the design while we work.

Step 2 Creating The Background

Create a new fill layer using the solid color #bfc6cd

Adding Noise To The Background

Convert new layer to a “smart object” (right click > Convert to Smart Filter) and apply the filter > Add Noise (you can adjust it later if needed thanks to smart filters feature). Lock the layer. To keep the project clean and organized, you can delete the layer’s mask and make it the default background layer (optional).

Step 3 Creating The Big “Stuff” Arrow

Create a new arrow shape using the “shape tool” preset. Then use the Direct selection tool adjust shape to make it look nice (move the points around as you see fit).

Select Free transform tool, move the arrow 310px from top, then grab and move the horizontal ruler to create new guide. Snap it to the middle of the arrow. From now it will represent the main horizontal axis of the site.

Add 4 styles to the arrow (by double clicking on the layer): drop shadow, inner shadow, outer glow and gradient overlay (from #cbcbcb to #ffffff).

Add a new text layer above the arrow layer.

Add styles to text: inner shadow, gradient overlay and stroke. For a better depth effect, make the stroke visible only on the bottom half of the text by using a “gradient” stroke with the alpha settings of the top half set to “0″ opacity.

Outer and inner shadows give the arrow more 3D look, but to make it even better, let’s create a simple glossy light effect. Create a new rectangle and use the Convert point tool modify its shape to create a slight curvature. We’ll mask this over the Arrow layer to create a glossy effect.

Set this layer fill to 0% and add gradient overlay style with subtle vanishing white.

To avoid the light layer go beyond the arrow: ctrl+click on the arrow layer to make a selection add layer mask to the light layer

Step 4 Adding backlight

To focus viewers’ attention to the logo, make a light to stand the arrow out of the background. You can use a primitive method which is:

• Create new layer (ctrl+shift+N)
• Select gradient tool
• Reset (D) and reverse (X) colors
• Select white-to-full-transparency radial gradient

• While holding shift drag a line creating the gradient

• Make the gradient layer opacity 80% (8)

Step 5 Create the Content Holder Template

Create a white 240px width rectangle (the height should be a bit taller than the document).

• Duplicate it (ctrl+d) and change the color – it will represent an image in blog post,
• Transform it (ctrl+t) – set size to 216 x 130px, and move its center to page axis,
• Add vertical guides to mark borders of the future content

Step 6 Add Text

Above the photo, create new text box and fill it with blog title. Use a condensed font like League Gothic (free at the League of Moveable Type). Below the photo, create another new text box for the general content.

Step 7 Styling the Content Holder

Make a selection for the content and create a new mask layer for the big rectangle. Change the mask density to 80%

Add outer (black) and inner (white) glow styles to the strip layer for the more 3D look.

Step 8 Adding Meta Text

Add meta info text above the post. I’ve used 12px Georgia italic, 17px line height. Remember to make use of guides to keep texts in one line

Step 9 Creating the “Read More” Button

Create “read more” text below the post

One layer below it, create new rectangle to be a read more button.

Add gradient and stroke styles to it. Tip: make the stoke inside, to have perfectly sharp corners of the button

Add a subtle gradient to text layer too.

Step 10 Creating a Post Badge

To create the badge use another rectangle, add text (I’ve used Arial), and rotate both layers together 45 degrees.

Add mask to rectangle layer to hide unnecessary corners

…and add 2 small rectangles as an illusion of the badge going under image.

Add a subtle shadow to the badge. Tip: for shadow blend mode use Normal instead of default Multiply, so it will take effect even if you use the badge as the transparent PNG file

Step 11 The Menu

Create a new text layer. Instead of black color (which can feel unnatural on light backgrounds), use dark gray to achieve more natural look.

Tip: To create horizontal lines instead of using line tool create not anti-aliased text using underline glyph “_” It will be always pixel-sharp and spaces between the lines will be easy to control thanks to line-height parameter. Use the same line-height as in menu text and create as many lines as menu items, minus one. Make the lines longer then needed.

Set this layer fill to about 15% and add a white shadow.

Add mask to lines layer and paint with smooth brush on it to achieve vanishing edges.

Step 12 Create the Search Form

Create rectangle with rounded corners (3px) for a search input.

Add inner shadow to the box and make layer’s fill to 70%

Above it add search text and create custom shape as a submit arrow. Add inner shadow to the box and make layer’s fill to 70%

Step 13 Where to Get Social Media Logos

As vector images are recommended for this purpose I suggest to find needed logos in www.brandsoftheworld.com service. In most cases it’s the fastest way. Open the logo in the Illustrator, copy outlines and paste in Photoshop as shapes. You can also use the Buddy Icons from Orman Clark.

Set layer’s fill to 0% and add styles (drop shadow, inner shadow and color overlay) to achieve the 3D look. To get the logo in the active (lightened) state, change color and intensity of the Color Overlay style.

Copy this style and copy to other logos (right click on the layer / Copy Layer Style)

Step 14 Creating the Comment Box

To add comment box, create another rounded-corners rectangle about 520px wide and add Drop Shadow style.

Select the bigger part and add mask to this layer.

Duplicate the layer and invert it’s mask. Make the new layer’s fill 25%.

In the blending settings check “Layer Mask Hide Effects” option, to avoid inconsistency in the shadow line of both layers.

Create black vertical line on the border between these boxes, make it’s fill also 25% and add 1px white shadow directed right.

Add some sample avatar and texts using previously used colors.

Step 15 Creating Arrows for a Portfolio Slider

Create circle shape and paste layer styles from the logo arrow. Cut the arrow shape from the circle using Custom shape and cutting mode.

Below this button layer create another circle – same size or smaller, and paste the gradient style from logo. Tip: If some layer has many styles, and you want to copy just one, you can drag the style while alt pressed and drop it to another layer.

Add light (the same way as above to the logo arrow).

If you want to make some small improvement, which nobody will notice, create separate lights for button and arrow-shaped hole, and move the second one a little down. And if you already have two separate lights, you can easily (without additional masking) make the button light stronger to be better visible on the very bright button.

Select all button layers and create Smart object of them.

Duplicate layer, move and flip horizontally. Now if you edit one arrow (double click smart layer) both will change.

That’s It!

All other elements can be done by copying, pasting and resizing the existing elements that we’ve designed.

Tip: League Gothic font and other cool freeware fonts with web designer-friendly licenses can be found at www.fontsquirrel.com

Would You Like to Create the HTML or WordPress Version of Stuff?

OK, so you have PSD more or less ready, and would like to go further. As Stuff needs some different approach to content, because of its horizontal character, it’s really tricky to code it properly. I don’t know many horizontal websites which managed to avoid common errors (e.g. not working mouse scroll). Please leave a comment if you would like to know the best ways of coding this design and we’ll see if we can’t bring the tutorial to the site!

Anyway, if you want to save some time and have it all on the silver plate, you can download HTML template or WordPress version of Stuff for a few dollars. Thanks!