Hey everybody, today we will be learning how to design a dark blog theme. I’m also releasing the coded wordpress files, and xhtml/css files for free! Hope this helps somebody, lets begin.
Ok, before we get started lets get all the patterns/supplies we will need step one. Save the pattern below (Open it in photoshop then go to edit>define pattern).
Also, download the 960 grid system. You can download it here.
Step 1: New Document
Ok, now that were all set up, open a new document 1000×1000. Leave the
background transparent. Open up the 16 column 960gs template, unlock the folder, and drag it too the new document we just opened. Center it. You can uncheck the eyeball making it invisible for now.
Step 2: Background
Go to edit>fill, and fill the background with the pattern I had you save. It should look like this:
Step 3: Rectangle
Ok, now that we got our background set up, create a new layer, and grab the rounded rectangle tool. Set the radius to 10px, and set it to fill pixels. Now create a rounded rectangle 960px (across all 16 columns of the 960gs) by 35~px. The color doesn’t matter as well be applying gradient overlay. Move he bar about 120px from the top.
Step 4: Blending Options
Open up blending options on the bar layer (layer>layer style>blending options), and apply gradient overlay and bevel and emboss with the settings shown below.
Step 5: Text
Grab the horizontal text tool. Set the font to “arial”, the size to 17pt, and the color to #535353. Type out whatever links you want on the navigation bar. Put 5 spaces between each one, and use all lowercase letters. Mine says “home tutorials about contact”. Place it on the right side of the navigation bar.
Step 6: More Text
Now lets add some header text. I used the font “edwardian script itc” with the size at 90pt. Make the first word blue (#27b3a4), and the second word white. Mine says “legittutorials”, place it above the navigation bar on the left side.
Step 7: Blending Options
Open up blending options on the header text and apply gradient overlay and drop shadow with the following settings.
Step 8: .COM
In the same font type out .com in white, size 38pt. Place it right below your header on the right.
Step 9: Sidebar
Ok now lets make a sidebar. Set your foreground color to #1c1c1c, and create a new layer. grab the rounded rectangle tool, with the same settings as before, and make a rounded rectangle the width of the 5 right bars (on 960gs) and 600~ pixels tall.
Step 10: Text
Now lets add some text to the sidebar. All the fonts, sizes, and colors are labeled in the picture below. To make the divider just create a new layer, set your foreground color to #212121, and draw it with the pencil tool. For the bullets I created a new layer set my foreground color to #, and used the elispse tool.
Step 11: Post Box
Ok now lets to the same thing for a post. Make a post box (on a new layer) the same color with the rounded rectangle tool. Make the width the size of the remaining 960gs bars and the height around 450px.