TutsArena

Create a techno blog theme in Photoshop

by TutsArena - Templates, Tutorials

Today we will be creating a super-uber-techno blog theme from a space ship. The theme is from outer space, but it’s perfectly ok to get it coded and rendered on an Earth blog, of course.

Final result:

Click the image for a larger version:

Step One: The Background

First thing you should do is create a new Photoshop document. Go to File > New (I recommend to use keyboard shortcuts while working
with Photoshop, it will make your life a lot easier! In this case you can use CTRL+N to create new file). I used 1000px by 1400px for our TechBlog wordpress theme.

Now we need to apply subtle gradient to the background. Go to Layer > Layer Style. Create “Gradient Overlay”, for the first color use: #2a2a2a, for the second #424242.

Step Two: Blog Header

It’s time to create the blog header.

First, create a new group and name it “Header”. Inside this new group create new layer and name it
“Header Background”. Then with the “Rectangular Marquee Tool” (M) create 1000px x 210px selection.

Fill selection (ALT+BACKSPACE). Go to Layer Style and assign “Gradient Overlay” with those values: #696969, #adadad. Once we have background for our header, create a new layer, name it “Header Main”.Once again use the “Rectangular Marquee Tool” (M) and create 980px by 190px selection.

We need nice rounded corners, to make this go to Select > Modify > Smooth.

Type 6 and press OK.

Fill selection (ALT+BACKSPACE). Apply same Layer Styles as on pictures below

You should get same effect as on the picture below:

Let’s add some noise to make our header more realistic. Create new layer and name it “Header Noise”.
Copy “Header Main” selection (CTRL+LMB on layer thumbnail) and fill it with white color.

Change layer Blend Mode to “Multiply”.

Go to Filter > Noise > Add Noise and create 9% light noise.

Step Three: Blog Logo

It’s time to create logo for our blog! First thing we need to do is to create new group “Logo” and “Logo Background” layer inside it.
Create 310px by 120px selection, fill it with some color (color won’t matter because Layer Style will overwrite it).

Apply same layer styles as for “Header Main” but with reversed gradient (You can copy “Header Main” style by clickig
right mouse button on “Header Main” layer and selecting “Copy Layer Style”).

You should get same result as on picture above. Create new layer (with same 310px by 120px selection),
go to Select > Modify > Contract. Type 2 and press OK. Fill layer with #494949 color.
Name it “Logo Inner”. Apply same style as for “Logo Background” but disable “Gradient Overlay”.

Now, create new layer “Logo Frame” and make selection(4px width) like on image below

Fill selection with some color

Apply same style as for “Logo Background” but add “Drop Shadow” with those values:

Add text layer and put our name blog name into it:

Add same layer style as for “Logo Background” but with those values for “Gradient Overlay”: #b4b209, #8f8d07.

Step Four: Blog Menu

To create menu simply repeat steps covered in previous step (but with smaller scale), you should get something similiar to picture below:

For RSS button disable “Inner” dark-grey layer.

Step Five: Blog Quote

Lets create short sentence about our blog. We will place it on header, below menu area.
Create new layer, name it “Blog Quote”. Once again take the “Rectangular Marquee Tool” (M) and make 350p by 100px selection.
Add little rounded corner. ( Select > Modify > Smooth -> 6px ). Fill layer and assign same layer style as for “Header Main”.

Use Verdana(#282828) as font (You can also use other font as well).

Step Six: Header Decoration

Its time to add some nice decoration to our blog header. To do that, create a selection like on image below and fill it with some color.

Rotate selection by 15 degress.

Copy this part of decoration by following images below

Once you made decoration shape you should add Layer Style to it – use same style as for “Header Main”

Lets create second part of header decoration. Simply follow steps described on images below.

Apply same style as for previous decoration element.

To make our header more nice we need to add some additional decoration behind. Create 1000px by 30px selection

Copy selection from first decoration element, move it above and press DELETE.

Go to Layer > Layer Style. At first, select “Inner Shadow” and use : white for the color, Overlay for the
Blend Mode, 50% for the opacity, and set Distance and Size to 1px.
Next go to “Inner Glow”, again use white for color,set blend mode to Overlay, opacity to 40% and size
to 1px. Now lets create subtle gradient, go to “Gradient Overlay” and use those colors: #424242, #5f5f5f.
Last layer style we need to add is “Stroke”. Use black for color, set size to 1px and opacity to 20%.

Step Seven: Sidebar

Once we have completed header, its time to sidebar. Copy layer containing bottom header decoration and rotate it by 90 degress

We need to change Layer Style a little. To do that, disable “Gradient Overlay” and add “Color Overlay”, use #424242 for color.

Copy layer that we just create and move it to right. Now create body of our sidebar. Apply same style to it.

Create 4px width selection, fill it with #adadad.

Copy this line and move to right side of sidebar

We have base of our sidebar. Lets add some elements to it. First one is Newsletter. Create selection like on image below. Smooth it a little (4px).

Use the image below for reference.

Repeat the previous step a few times.

Create new layer behind. Then with the “Rectangular Marquee Tool” (M) create selection, little tighter than than Newsletter.

Apply same style as for Logo and Menu fonts.

Now we are ready to add input for the subscriber email address. Create selection same as on picture below and apply our base Layer style to it.

Create “GO” button, for text use same Layer Style as for Menu items.

Okay, its time to create “Friends” box. To accomplish that, follow same steps as for Newsletter.

create highlight ………… ? Fill it with #d0d00d

Apply base layer style and add “Drop Shadow” to it. Use following values: 22% opacity, distance 0, size 12.

We need to create friend image frame. Create selection like on image below

Go to Select > Modify > Contract and contract selection by 2px. Hit delete.

Use same style as always but add “Color Overlay” with this value: #cccccc.

Add image along with short description.

Copy it 3 times.

Using knowlegde collected in previous steps create nice box for blog archives.

Sidebar finished You can go ahead and add other elements, just use your imaginity.

Step Eight: Blog Post

Its time to create main element of each blog – post. Lets start with creating basic shape – background of post.

Out post need to have some decoration as well. Lets create it!

Once we have decoration we can build body of our post

Add some text..

Okay, you can add frame (use same style as for previous frames in “Friends” box), also add “continue reading” button and comments counter.

Creating post date is simply, all you need to do is follow same steps as for “Newsletter” box.

Finished!

Use the link below to download and use this template as you see fit. No attribution to the author or to TutsArena is necessary.