[mini_prev]
[description]
I need a personal blog design. This blog will be used to collect all of my insterest in one place. I'm interested in Hiking, sucuba diving, outdoor sports etc. I want to show my twieeters on my blog page.

Basic navigation will work well; Home - Archive - Contact.

I will run on Categories for seperation. I m not planning to be global, targeted audiance is my close friends, inner circle of my life... I love texturized backgrounds like wood and I think it will match perfectly with my interests. I dont want to show lots of content on Homepage so for this reason I will use big picture and a few text for each blog posts.

Any color scheme is welcome, it's up to your creativity. Blog will be called RocknRolla and I don't have yet a logo. If you can write RocknRolla with nice font, it's going to do the trick!! So this is what I want =)
[/description]

[final] First you must find design elements in your design brief.Because, you are building your design based on your design elements and here is list of design elements for this blog design;

- Basic nav . About - Archive - Contact
- Logo with nice font
- Big pictures and less text for each post
- Categories at side panel
- Twitter at side panel
- Recent Posts at side panel ( he didnt say this but it's a blog,we can show recent posts etc)
- Texturized Background like wood
- some visuals for client interest (sucuba diving, hiking etc)
- try to work with shourtcuts, this is your best time saver knowladge.

and now visialize this elements in your mind. Start design in your mind =) you must arrange your design elements up to down in your mind. when you are ready, you can start to design easly becouse now you got all your needs for design a specific blog design =) let's start

[step]Step 1[/step]
Open your empty browser template Safari_Starterkit.psd (in your resources folder of this tutorial.)
i love working in browser template when I m designing a webpage,becouse it's good to see in browser. it's more true view of design what is look like in browser. you will catch difference between in work on browser design template.Trust me presentation of an work is another great art.

[step]Step2[/step]
We need to resize vertical size of our document. best easy way for this usign Crop Tool.Zoom out and push to "C" key(croop tool shortcut) on your keybord and select your document outline witc crop tool then change bottom line. See picture below

Hit enter when size it's enough for you.

[step]Step3[/step]
Select browser footer part from your layer panel inside of Browser Folder and move it to bottom (How to move objects in photoshop: hit V key and move your mouse down or push to down arrow =)). After that select "page Background" layer from your layer panel and hit CTRL+T for Transform. See picture below


[step]Step 4[/step]

Now we need a tiled background with wood effect.Find Wood_Tile.jpg from you Resources folder, inside of source files and open in photoshop.
Hit CTRL+A and select all document then from top menu choose Edit > Define Pattern, give any name then click ok and close it tile picture. See picture below


[step]Step 5[/step]
Now we are on our design document again.Select Page Background layer from you layer panel and click to fill/adjustments icon from bottom then select Pattern from list. See picture below


Keep scale %100 and hit ok.


[step]Step 6[/step]
and we got full page wood pattern but we just wanted to show this pattern in browser window. Now I will show you very usefull solution for this. you don't need to cut out side of pattern layer for match to background layer, because we can mask Page Background layer! with this way when we resize Page Background layer our patter will fit anytime!! yes it's great =)

How to mask?
Go you layer panel and push your ALT key (on windows) keep pushing ALT and move your mouse to horizontal line between Page Background and Pattern Fill 1 layer. if you are on line icon will appear like down arrow, left click and mask done! now our patter layer masking with Page Background layer. See picture below


[step]Step 7[/step]
Hit T key (Type Tool shortcut) and start typing "RocknRolla". Font "BULLDOZER" font size 24pt. color #000000.
go to your layer panel and double click on your type layer, it will open Layer Style and use following settings for this layer.

Gradient Editor settings: color #1a1a1a to #353535


if you do settings correctly, you will get final results like this. See picture below


Then for talk bubble, type Q with Versa, font size: 24pt, color #000000. I just typed "lore ipsum dolor" for bottom line motto for logo.

go to your layer panel again and push to CTRL key and select you logo layers " RocknRolla - Q - Lorem ipsum" while CTRL key pushed (keep CTRL pushed for multiple select in Layer window). Then hit CTRL + G for grouping layers. if you start to manage your file early,it will give you more flexibilty for future works( when you need to chance layout or something).


[step]Step 8[/step]
Now navigation part. Hit P key (Pen shortcut) and draw shape like this.See picture below
(how to use Pen tool? download this pdf please: link)


[step]Step 9[/step]
After drawing shape go to your layer panel and click on Fill/Adjustments icon then select Solid Color, select random color from Color Picker panel (we gonna chance layer style,for this reason color not necessary), hit ok.


[step]Step 10[/step]
go to your layer panel and double click on shape layer and change layer style of this layer. Use following settings please.



Gradient Editor settings: color #1a1a1a to #353535


[step]Step 11[/step]
Follow Step 8 to Step 10 and create 3 buttons like this (keep in mind, layer arragement. wich button staying on top layer, it will be visible on top in your design):

[step]Step 12[/step]
Now we gonna create highlight effect on buttons for nice visual. go to your layer panel and hit CTRL key then left click on Vector Maskthumbnail for select button area. See picture below


[step]Step 13[/step]
then hit SHIFT key while pressig CTRL key for selecting multiple button areas. See picture below


[step]Step 14[/step]
Now we select all button areas together.go to top menu Select > Modify > Contract Selection and type 5 pixel > ok.


[step]Step 15[/step]
Hit B key (brush shortcut) and right click on your secreen and select soft brush 200px (master diameter) from brush list.


[step]Step 16[/step]
Change brush opacity to %40 from top panel.


[step]Step 17[/step]
open new layer top of buttons layer and keep brushing like this.


Your will get result like this


[step]Step 18[/step]
Our buttons are ready and now we can write button names. Type About - Archives - Contact with PTF Nordic Font. font size: 18px Color: #FFFFFF


[step]Step19[/step]
Change layer style of "About" layer to following settings


[step]Step 20[/step]
We can copy and paste layer styles easy for time saving. just right click on layer and select Copy Layer Style


[step]Step 21[/step]

Right click on "Contact" typed layer and select Paste Layer Style for apply.voilaaaaa!
(do this for archives layer too please)


Here is the final resaults of logo and menu section


[step]Step 22[/step]
Now we need post sample for our blog. Hit M key (Margue tool shortcut) and select are like this.

Notice:
cyan colored lines on this screen are Guides. you can use CTRL+H for show/hide guides.


[step]Step 23[/step]
After selecting area, go to your layer panel and click on Fill/Adjustments icon and select Solid Color, fill with #FFFFFF.


[step]Step 24[/step]
We got nice area for post and we gonna create shadow for this area. Right click on layer(Color fill) from your layer panel and select Duplicate layer.See picture below


[step]Step 25[/step]
Double click on Color Fill 26 layer and change color to black ( shadow color =))


[step]Step 26[/step]
Hit CTRL+T for free transfor then right click on your document, select Wrap from list


[step]Step 27[/step]
Move sides of shape and middle part will be bend like this


[step]Step 28[/step]
When your shape is ready hit ENTER key on your numpad for apply transform (You have two ENTER key in your keybord, if you are working on Photoshop normal ENTER key work for general Enter duty but right hand side ENTER key(your numpad ENTER key) small one work for APPLY,keep this is in your mind please)

[step]Step 29[/step]
Now we need to create blur for smooting our shadow edges. Go to your Filter tab at top menu and select Blur > Gaussian Blur and give 2px blur.


Final result will be like this.


[step]Step 30[/step]
Our post area ready with nice shadow. Now we need header part for blog post. Let's create.
CTRL+Click on layer mask and select area (See picture below). Then hit M key for Eliptichal Margue Tool, push ALT key and while keep pushing ALT key, you can deselect part of selected area for header selection.(if you push ALT key,your mouse pointer will change to [-] negative icon, it means you can deselect area of selected area) See picture below


[step]Step 31[/step]
From your layer panel click on Fill/Adjustment icon and select Gradinent.


Gradient Editor settings: color #1a1a1a to #353535


Final Result


[step]Step 32[/step]
Header part ready, now we need date area for our blog posts. Select Rounded Rectangle Tool for your Photosop toolbox.


Change radius to 10px from top panel


and crate shape like this


Go to your layer panel and click on Fill/Adjustments icon select Solid Color from list.

[step]Step 33[/step]
Double click on this layer and change Layer style with following settings


Final result


[step]Step 34[/step]
Nice buddys. We got good one transparet date area.Let's work on details of this date area.
CTRL+Click on this shape layer mask and select shape area. See picture below


[step]Step 35[/step]
Then Hit M key for Eliptichal Margue Tool, push ALT key and while keep pushing ALT key, you can deselect part of selected area.(if you push ALT key,your mouse pointer will change to [-] negative icon, it means you can deselect area of selected area) See picture below


Get selected are like this


[step]Step 36[/step]
Go to your layer panel and clik on Fill/Adjustments icon and select Gradient from list.
Gradient Editor settings: color #2084FF to #054984


Final result


[step]Step 37[/step]
Now we need date format. Hit T key for Type tool and write dates. See picture below

Font colors : #a0cbfd for "21" and # 5d727c for "Sept"


[step]Step 38[/step]
Now next step is post header creation. Hit T key again and create type area and write some dummy text lorem ipsum. www.lipsum.com for dummy contents. (you can create type area with Type tool, draw rectangle with your type tool). See picture below


Font color #e5e3e


[step]Step 39[/step]
Now we need picture are. Hit M key and select area like this.


[step]Step 40[/step]
Open random picture in photoshop and hit CTRL+A (select all document) then hit CTRL+C (copy) and switch to your design document.


Now i'll show you good trick; we alreadygot selected area at Step 38 and we have copyed picture in photoshop memory, now hit CTRL+SHIFT+V for paste in place. photoshop automatically creating mask for your picture!!what a great features =) See picture below


[step]Step 41[/step]
Go to you layer panel and close it layer anchor for picture layer. this is important because if you didn't close it anchor for masked picture layer, they can't move together. With this linkage mask and picture will move together. See picture below


[step]Step 42[/step]
Hit T key and select Type tool and create sample blog post. Remember step 38 please.
Font color : #666666


[step]Step 43[/step]
Now we will create simple talk bubble for comments. Select star icon from your toolbar(in rectangular shape list) and right click on your document for shape listing. Select talk shape from list


[step]Step 44[/step]
Draw shape with talk bubble and fill it with solid color black then type " tagged as etc " with Lucida Sans font color: #666666 font size: 10pt


[step]Step 45[/step]

Our first post area almost ready, we just need a "read more", "continue" button. Let's create one.
Select Rounded Rectangle Tool ( hit U for shortcut) and change radius to 6px from top panel and create a shape. See picture below


[step]Step 46[/step]
We can use same style for "continue button" like we created for date area. Go to your layer panel and select date area shape layer and right click on it. Select Copy Layer Style from list and then select "continue button" layer, right click > Paste Layer Style! taadaa!


[step]Step 47[/step]
Now I wanted little color effect for continue button. CTRL+Click to layer mask on continue button layer and select button area.


[step]Step 48[/step]
i just wan't to select bottom area then Hit M key for Eliptichal Margue Tool, push ALT key and while keep pushing ALT key, you can deselect part of selected area for header selection.(if you push ALT key,your mouse pointer will change to [-] negative icon, it means you can deselect area of selected area) See picture below


[step]Step 49[/step]
Go to your layer panel and click to Fill/adjustments icon and select Solid color from list.
Pick a solid color: #63b1d2


[step]Step 50[/step]
Reduce opacity of this layer to %50


[step]Step 51[/step]
and type "Continue Reading"


Final results


[step]Step 52[/step]
Our first blog sample ready!!! haha.
Now go to you layer panel and select layers created for single post sample and hit CTRL+G for group layers.


[step]Step 53[/step]
We need three box for homepage blog posts (check fineshed work of this tutorial) but we don't need to create each box one by one. We can Duplicate layer groups!


[step]Step 54[/step]
From your layer panel select grouped post and right click on it and select Dublicate Group from list. After dublicating layer group hit V key (move shortcut) and move down your new post sample! taadaa! Repeat this for one more time for showing three boxs on homepage.


[step]Step 55[/step]
Our box's ready now we need side panels. Let's create Categories side panel. Select Rounded Rectangle Tool and change radius to 8px from top panel and draw shape like this


[step]Step 56[/step]
After that fill you shape with solid color, any color will be ok because we will change layer style. We can use our logo layer style for this shape. Select your logo layer from your layer panel and copy / paste layer style to side panel shape box ( please remember Step 46 for how to copy and paste layer style)

Final result of side panel


[step]Step 57[/step]
Now we need header shape for "Categories" box. Select Rounded Rectangle Tool and use same radius 8px and draw shape like this then fill it with solid color.


[step]Step 58[/step]
I used special premade layer style for this header part and description of this layer style will take too long on this tutorial. you will find layer style file in your source files of this tutorial, there is a info txt about how to install layer styles into Photoshop.

So open your Layer styles panel (if you can't see on your photoshop workflow, go Windows > Styles ) and select this style." see picture below


[step]Step 59[/step]
Hit T key and type "Categories" header and type subheaders "Music,Movies,etc..." based on following settings


Then double click on "Categories" typed layer from your layer panel and use following settings please



[step]Step 60[/step]
Yes it seams our box Vertical size little large but we can reduce very easy. Because our created shapes are vector shapes. Let me tell you how to chance shape size easy:

From your toolbox select Direct Selection tool (white arrow, pay attention this is not Arrow tool (V), it's staying below of normal arrow tool on your toolbox) then go to your document screen and select bottom part of your shape with Direct Selection Tool. See picture below


Notice:
After selecting bottom part of your shape, you will see empty mini squares at left and right corners on your shape. Empty squares are means selected squares, black squares are means unselected squares.

[step]Step 61[/step]
Now we need line seperators between categorie subheaders. Select Pen brush(B) from your toolbox and right click on your document, select pen size 1px and color #FFFFFF


[step]Step 62[/step]
Go to your layer panel and create new empty layer top of categories box layer ( How to open new layer: there is a icon at bottom of your layer panel like empty page icon, staying left hand side of trash icon, click on it for new empty layer) and draw a line between categorie headers then change layer Opacity to %10. See picture below


if you draw all line between categorie headers, final result will be like this


[step]Step 63[/step]
Now we gonna create three more boxes; one for RSS, one for Recent Comments and another one for twitter. go to your layer panel and dublicate our categories box layer then follow Step 60, change box sizes.


Three boxs created


[step]Step 64[/step]
After creating your new boxes, let's work on RSS Feed section. Get icons from this link.Open RSS icon in your photoshop, copy and paste into your document and use following settings for fonts.


Font color settings: use #FFFFFF for "RSS Feed" and use #9f9073 for "Ream my posts..."

[step]Step 65[/step]
Use following settings for Recent Post box


[step]Step 66[/step]
Get twitter bird from icons folder and use it like this.


Notice:
Our browser design template has allready made guides. Just push CTRL+H for show/hide guides.
Your final result will be like this


[step]Step 67[/step]
and now we gonna create last part of this design, footer. Go to your layer panel and select your background pattern layer ( we are selecting this layer because we will create footer part on this layer) and select footer area like this. See picture below


Fill it selected are with Solid color pick a color white.

[step]Step 68[/step]
Dublicate latest created solid shape and hit CTRL+T and change vertical size. See picture below


[step]Step 69[/step]
Copy our categories header bar style and paste to footer bar layer.See picture below


[step]Step 70[/step]
Open premade graphics from your resources folder and put below those footer layers. Please pay attention on layer arragements. Premade graphics must be stay back of footer bar graphics.


[step]Step 71[/step]
Dublicate our logo group from your layer panel and move it to footer.


[step]Step 72[/step]
Hit CTRL+T and resize it and reduce layer opacity to %20.


Thats it! your finals result will be like this. I know all post images are same but you can change easy rite? hahah =)

[step]So RocknRolla!!![/step]