Create A Wickedly Cool Horizontally Oriented Website Design
Final Product What You'll Be Creating
Step 1 Create A New Document in Photoshop
Step 2 Creating The BackgroundCreate a new fill layer using the solid color #bfc6cd
Adding Noise To The BackgroundConvert 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” ArrowCreate 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).
Step 4 Adding backlightTo 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 TemplateCreate 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 TextAbove 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 HolderMake a selection for the content and create a new mask layer for the big rectangle. Change the mask density to 80%
Step 8 Adding Meta TextAdd 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” ButtonCreate “read more” text below the post
Step 10 Creating a Post BadgeTo create the badge use another rectangle, add text (I’ve used Arial), and rotate both layers together 45 degrees.
Step 11 The MenuCreate a new text layer. Instead of black color (which can feel unnatural on light backgrounds), use dark gray to achieve more natural look.
Step 12 Create the Search FormCreate rectangle with rounded corners (3px) for a search input.
Step 13 Where to Get Social Media LogosAs 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.
Step 14 Creating the Comment BoxTo add comment box, create another rounded-corners rectangle about 520px wide and add Drop Shadow style.
Step 15 Creating Arrows for a Portfolio SliderCreate circle shape and paste layer styles from the logo arrow. Cut the arrow shape from the circle using Custom shape and cutting mode.
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.