creating a tech blog or site layout in adobe photoshop
TRANSCRIPT
-
8/6/2019 Creating a Tech Blog or Site Layout in Adobe Photoshop
1/12
Creating a tech blog or site layout in Adobe
Photoshop
This is what the result will look like:
1 -Lets start by creating a new document. The size is 1280*1200 pixels. Fill the
background with black (#000000).
2 - Create a new layer named content. Pick up the Rectangular marquee tool and
draw a 976px wide rectangle. Fill it with white (#FFFFFF).
3 - Still on the content layer, use the rectangular marquee tool to draw the sidebar.
The width is 331px and background color is #E9E9E9.
-
8/6/2019 Creating a Tech Blog or Site Layout in Adobe Photoshop
2/12
At this point, your design should look like this:
4 - Create a new layer set named header. Were now ready to create a nice header
background. To do so, I have first downloadedthis picture
http://www.flickr.com/photos/kevineddy/2103439353/http://www.flickr.com/photos/kevineddy/2103439353/http://www.flickr.com/photos/kevineddy/2103439353/http://www.flickr.com/photos/kevineddy/2103439353/ -
8/6/2019 Creating a Tech Blog or Site Layout in Adobe Photoshop
3/12
and imported it into Photoshop. Once the picture is imported, select Filter, Blur,
Mottion blur and apply the effect with the following parameters:
5 - Once done, import the modified picture in the design. Crop it to 972*188px. Then,go to the Image menu and select Ajdjustments, Color balance. Add blue on
-
8/6/2019 Creating a Tech Blog or Site Layout in Adobe Photoshop
4/12
highlight, shadows and midtones.
The header should look like this:
6 - Time to draw the navigation menu. Pick up the rectangular marquee tool and
draw a 972*53 pixels rectangle in a new layer called navigation. Fill it with #080808.
7 - On the Layers window, right click on the navigation layer and choose Blendingoptions. Once the Layer style window is open, add a Gradient overlay. Setting are
65% opacity, #000000 on left and #3F3E3E on right.
8 - Now, select the text tool and start adding navigation links on the nav bar. I chose
Arial bold, 18pt. Color is white.
9 - For the active/hover state of the navigation links, select the rounded rectangle
tool and draw a shape around one of the links. The rounded rectangle radius is 10px
-
8/6/2019 Creating a Tech Blog or Site Layout in Adobe Photoshop
5/12
and the background color is #6589A7.
10 -Its time for us to add a logo to our blog design. I have chose the Futura bold font
with 72pt font size and black color (#FFFFFF). Simply type the text you want, and
duplicate the layer once youre done with typing.
11 - On the layers window, make sure the first text layer (Not the copy) is selected,
right click and select Blending options. Were going to add a nice, very technology-
like gradient on the text. Select Gradient overlay and add the gradient. Left color is
-
8/6/2019 Creating a Tech Blog or Site Layout in Adobe Photoshop
6/12
#EEEFF0 and right color is #4E4D4D.
12 -Once youre done with the gradient, select the copy of the layer (which is plain
white). Pick up the Move Tool and use the keyboard arrows to move the layer 1 pixel
on the right and 1 pixel on the bottom.
-
8/6/2019 Creating a Tech Blog or Site Layout in Adobe Photoshop
7/12
After the 3 latest steps, your blog logo should looks like this:
13 -Were done with the header, and its time to create our posts. The first thing to dois to create a new layer set named post. Then, get three or four 200*200px images to
illustrate the posts. Such images can be found on my other blogsCats Who Codeand
WpRecipes. Import one 200*200 pixels image into the design, and place it 18px from
the edges of the white container.
14 - The font used for the titles is #222222 Arial, bold, 36pt. Type the text you want
for a post title, and select it using the Text Tool. On the Photoshop menu, go to
Window and select Paragraph. Set the AV to -75, according to the screenshot below:
15 - Pick up the text tool again and write the author name, the post category, the
number of comments or anything else. Select white (#FFFFFF) 12pt Arial bold font.
16 - Select the rectangular marquee tool and draw a rectangle around the text you
just entered. Fill the rectangle with #6589A7. Make sure the text layer is above the
shape.
17 - For the post excerpt, I have choosen Arial font, 12pt, Italic. Color is #555555.
http://www.catswhocode.com/http://www.catswhocode.com/http://www.catswhocode.com/http://www.wprecipes.com/http://www.wprecipes.com/http://www.wprecipes.com/http://www.catswhocode.com/ -
8/6/2019 Creating a Tech Blog or Site Layout in Adobe Photoshop
8/12
18 - Select the Line Tool and draw a #CCCCCC line below the post. The post should
looks like the following:
-
8/6/2019 Creating a Tech Blog or Site Layout in Adobe Photoshop
9/12
19 - Copy the post layer set as many times as necessary to fill up the content space:
20 -Time to create a cool sidebar for our blog design. Lets start by creating a new
layer set named sidebar. The first thing to add to the sidebar is some 125*125px ads.
Download some from your favorites blog and import it into the design. In the psd, I
have choosen to display 4 ads, but of course it is just an example.
21 - In order to draw a sidebar widget title, create a new layer set named widget, pick
up the rectangular marquee tool and draw a 342*40 pixels rectangle on the sidebar,
starting from the left edge. Fill it with #6589A7.
22 - Use the Zoom Tool to zoom on the right side of the newly created rectangle. Pick
up the Polygonal Lasso Tool to draw a shape like the one in the screenshot below.
-
8/6/2019 Creating a Tech Blog or Site Layout in Adobe Photoshop
10/12
Fill the shape with #4F667A.
23 - Add some text in the widget title. The font used in the example is 12pt Arial bold.
Color is white (#FFFFFF).
24 - Add some text below the title. Font used is #222222 12pt Arial bold. Once done,
your sidebar widget should look like this:
25 - Duplicate the widget layer set as many time as needed to fill up the sidebar space.
-
8/6/2019 Creating a Tech Blog or Site Layout in Adobe Photoshop
11/12
26 - Our design should now looks like the screenshot below:
27 - Finally, the last step of this tutorial is to create a simple, but nice looking footer
for our blog design. Start by creating a new layer set, named footer. Then, Create a
new layer (Also named footer) and draw a 972*34 px rectangle using the
Rectangular Marquee Tool. Fill it with #6589A7.
28 - Add your copyright message (or whatever) to the footer. The font I used was
Arial bold, 12pt. The color is white (#FFFFFF). Once done, align the text to the right
part of the footer.
-
8/6/2019 Creating a Tech Blog or Site Layout in Adobe Photoshop
12/12
29 - Repeat steps 10,11 and 12 in order to have a smaller version of your logo in the
footer. You should also dusplicate the logo layers and scale it, of course.
30 -Youre done! Look at what you just created: