Tutorials » Stylish Blue Blog Layout
Step 1

Create a new document with a good width and height to work with, I have chosen to use 1200x900px. Fill the document with #222222.



Step 2

Create a new layer named 'main bg' and make a selection of 1000x800px in the middle of your document and fill the layer with #ffffff. Apply a Stroke to this layer.



Step 3

Now that we have the backgrounds out of the way, create a new folder named 'top banner' (we will be keeping most of our layers in folders so that they are easier to work with). Create a new layer named 'bg' and make a selection of 840x100px and add a gradient from #005071 to #004866. Apply a Pattern Overlay using this pattern.



Step 4

Create a new layer named 'logo' and add a logo that you have made, for this tutorial I am just using Adobe Photoshop's logo.



Step 5

Create a new text layer and add in your website's name. The font that I have used for this is Times New Roman, Regular, 24pt, Sharp, #ffffff and #a4e4ff.



Step 6

Now add in a banner or something for an advertisement, I have put in my buytuts.com banner ad. Add a Stroke to this layer.



Step 7

Now we can close that layer (click the arrow by the folder icon). Create a new folder named 'main links', make a new layer named 'top line', make a selection of 840x2px 1 pixel under the 'top banner' group, and fill with #3e3e3e



Step 8

Create a new layer named 'gradient' and make a selection of 840x60px under your 'top line' layer. Make a gradient from #1e1e1e to #000000.



Step 9

Create a new layer named 'shine' and select the top half of your 'gradient' layer (select your 'gradient' layer - Ctrl + Click layer icon and then subtract the bottom half of your selection using the Rectangular Marquee Tool and holding down the Alt key) and fill with #ffffff. Lower the opacity of the layer down to 7%.



Step 10

Create a new text layer and add some global links. The font that I have used here is Arial, Bold, 14pt, Crisp, #a8a8a8.





1 2 3 Next »
Random Tutorials