Create A Wickedly Cool Horizontally Oriented Website Design
Tutorial Details
- Applications: Adobe Photoshop CS3+
- Difficulty: Beginner
- Estimated Time: 1-2 Hours
Final Product What You'll Be Creating
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!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Kubasto
Sign up now!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Webdesigntuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Nice tutorial Kubasto! I’ll admit, Stuff is one of my favorite site designs that I’ve seen in a while (and I’m talking all sites, not just templates). Very innovative and fun to play around with – can’t wait to see more of these funky layouts in the future :)
Nice tutorial but I would like to see a tutorial about coding it into a WordPress theme.
Agreed. I’d love to learn how to code something like this into WordPress!
Please do it!
Ditto..thats why i opened this link..this should have been on psdtuts otherwise..but thanks
Wowww!!!
That’s a really amazing template, thanks for sharing such a good inspiration Kubasto.
Great tutorial and awesome design!
Yep… I would love seeing a tute on coding this into a WP theme or a Joomla theme.
Yes, coding methods is in high demand for this template…it’s gorgeous and such a unique and innovative layout. I’ve seen very few (if any) of these designs out there that function like this. Pretty nice.
I love it when people think outside the box with blog themes very nice tutorial
Very unique design! I saw it on Themeforest a while ago and loved the idea. Thanks for showing me how to create it in Photoshop.
Wow i learned some new photoshop tricks from this! Thanks!
Also it would be great to see psd->html for wp tutorial. And using html5 with css3 for shadows of course!
I’m glad this tut came about now. I’ve been bouncing back and forth between a typical vertical layout or a horizontal one for my site rebuild. I’ve been doing some heavy research on the topic of horizontal sites. It seems that the usability issues surrounding this type of layout are plentiful, but not so extensive as to totally discourage implementing one.
One key feature that should be included is the ability to scroll the layout in the x-axis using a mouse wheel. I’ve found a few sites that do this successfully, such as http://www.makepretend.net/ – although cross browser support is sketchy – and some include the ability to drag the layout. But for the most part what I’ve seen are horizontal layouts that require scrolling either by use of the browser’s scrollbar, or by clicking some sort of navigational buttons.
Perhaps a tut on coding this one into a WordPress theme would help, especially if that includes cross browser, horizontal mouse wheel scrolling.
Using the arrow keys could come in handy too for horizontal scrolling.
According to me, the best could be a combination of different solutions to make it as intuitive as possible.
Have a look at Jquery toolkit too fot the navigational buttons.
I REALLY would like to see followup!
That looks really good. Thanks for sharing. It looks simple but in a good way. :)
Hi all,
Since web tutorials were moved to webdesign tuts, you guys are not providing the source files at the members area?
Why?
I am going to be completely honest. I usually have a very negative reaction to horizontal layouts. They just seem to annoy me. But this one; this one is pretty cool. I felt like the content was presented in a great way and the functionality that is built in was pretty great. I, like many others, would love to see some of these features (hidden/reveal search bar) coded in the future. But they may be more suited for Nettuts+.
Great work, Author and I hope to see more stuff in the future!
TY , i would like to see a tutorial about Create the HTML
I’m so sick of seeing these tuts. I KNOW HOW TO USE PHOTOSHOP. Show me how to code this to WordPress. jesus.
“Web DESIGN tuts” – If you are interested in coding go to nettuts.
We’ve actually started launching “combo” articles with nettuts where we code these designs… so look out for more of them in the future :)
Great idea Brandon, would be really good to see how different developers go about coding up the PSD and Fireworks design tutorials shown at Webdesign Tuts.
Please! publish a tutorial about the coding methods!
yes please
just wondering.. what are the copyright/left on the tutorials found on the tutsplus network ? Am I allowed to use them in commercial product without authorization (don’t get me wrong there, use part from here & there.. not an entire tutorial) ? For example, on nettuts, am I allowed to use a piece of code I found without asking the author ?
and also, awesome design, awesome tutorial, thank you for the inspiration !!
most awesome of the awesomeness! Very good!
great post!
i love this style of layout for image gallery pages especially for fashion designers or photographers’ sites. cant wait to see the code tutorial on this from tuts+. personally i just use “whitespace:nowrap” and set each post or image to “display:inline”, but its great to see just how many ways there are to do essentially the same thing and im curious to see what you guys would recommend.
in the meantime here’s an excellent tutorial that i’ve gone over many times (as the horizontal scrolling site comes up a lot in my freelance projects) that delves into some of the ways possible to code such a layout: http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/
Love the design! Thanks for the tutorial!
Awesome tutorial! I read a bunch and don’t always learn something new, but I picked up a few good rips from this one. I would love to see this coded for wordpress! Keep up the good work!
Wow, this is amazing. I love site builds, such a great way to inspire creativity and get new skills. I would absolutely love to see the HTML version of this tutorial.
Really simplistic Design, Like it. Looks awesome!
Yes! CODE CODE CODE!!! AWESOME TUTORIAL!
CODE TUTORIAL!!!! WP TUTORIAL!! PLEASE!!! awesome !!!!
Great tutorial, would love to see the convert to WordPress tutorial!!
Great tutorial. I love the look of the site.
Really!! Great Tut But I need coding This Layout !!!
Love this layout. I would definitely like to see how to code this into HTML and/or WordPress.
Well, if you need to convert this one to html / wordpress just get the premium account and check jeffrey ways PSD to HTML to WordPress tut out. It’s really good and explains everything step by step. If you know a little about slicing and cssing psd elements it’s not going to be a hard walkthrough, it’ll just take a while..
Nice Tutorial :) thanks for sharing , have a good day/night!
Would love to see it coded as a WordPress theme! Great look!
For the coding tutorial, I like to see your thoughts and thinking before or during the coding of the PSD file like for every step. For example “If you want to know how to place the comments on the side, you have to do this do that etc instead of just giving us the code or else we’ll just end up copying and pasting every line of code and put it into our html without fully understanding how it works and how you came up with that code in the end.
wow really this is awesome design ..:)
Great stuf…
Thank you so much…
Kubasto witam napisz proszę w czym zrobiłeś ten układ horyzontalny? jak przekonwertowałeś plik PSD w gotową stronkę. Uważam że odwaliłeś fajną robotę. Pozdrawiam z WWA
Really what i was looking for! thank you!
Alessandro
http://www.non-solo-arte.com
Very sharp design, nice and simple but straight to the point, sweet one.
This blog is really very helpful for updating my knowledge…