Here we go!

Username
ahh i forgot my password :|

Password

Not member yet?Cmon you can't miss! Welcome guest, please Login|Register !

PSDThemes : free PSD themes

17

free PSD
20099

downloads
3259

members

welcome Register Tutorials What's new ? Blog

Contribute Affiliate program

Submit Query

Learning without thought is labor lost; thought without learning is perilous. Confucius Tutorial RocknRolla Blog Design
Tags: Exlusive, How to, personal, tutorial This tutorial commented since April 28 2009 28 Creator : serhat Description and Design Brief 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 =)

Let's Start the Tutorial 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 1 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.

Step2

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.

Step3

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 4

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 5

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 6 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 7

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 8 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 9

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 10

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 11

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 12 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 13 then hit SHIFT key while pressig CTRL key for selecting multiple button areas. See picture below

Step 14

Now we select all button areas together.go to top menu Select > Modify > Contract Selection and type 5 pixel > ok.

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

Step 16

Change brush opacity to %40 from top panel.

Step 17 open new layer top of buttons layer and keep brushing like this.

Your will get result like this

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

Step19

Change layer style of "About" layer to following settings

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

Step 21

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 22

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 23 After selecting area, go to your layer panel and click on Fill/Adjustments icon and select Solid Color, fill with #FFFFFF.

Step 24

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 25

Double click on Color Fill 26 layer and change color to black ( shadow color =))

Step 26

Hit CTRL+T for free transfor then right click on your document, select Wrap from list

Step 27 Move sides of shape and middle part will be bend like this

Step 28

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 29 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 30

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 31 From your layer panel click on Fill/Adjustment icon and select Gradinent.

Gradient Editor settings: color #1a1a1a to #353535

Final Result

Step 32

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 33 Double click on this layer and change Layer style with following settings

Final result

Step 34

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 35

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 36 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 37

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 38

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 39

Now we need picture are. Hit M key and select area like this.

Step 40 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 41

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 42 Hit T key and select Type tool and create sample blog post. Remember step 38 please. Font color : #666666

Step 43

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 44 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 45

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 46 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 47 Now I wanted little color effect for continue button. CTRL+Click to layer mask on continue button layer and select button area.

Step 48

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 49

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

Step 50 Reduce opacity of this layer to %50

Step 51

and type "Continue Reading"

Final results

Step 52

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 53 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 54

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 55

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 56

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 57

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 58

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 59 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 60 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 61 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 62

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 63 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 64

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 65 Use following settings for Recent Post box

Step 66 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 67

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 68 Dublicate latest created solid shape and hit CTRL+T and change vertical size. See picture below

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

Step 70

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 71 Dublicate our logo group from your layer panel and move it to footer.

Step 72 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 =) So RocknRolla!!!

Login or Register please! say anything to others, let them know what you got? Name Comment

Email

Website

Eco website June 18, 2009, 4:05 am good job!!! Reply to this comment Tnt June 13, 2009, 3:32 pm WOW! Thx for sharing this site:D Reply to this comment Morpheo June 6, 2009, 5:07 pm OH MY GOD!!!!!!!!! Thank you very much for doing this. Really, thank you. Reply to this comment Filipe June 6, 2009, 9:04 am Thx for sharing, it is really awesome!! Reply to this comment Adilfranck June 3, 2009, 12:37 am I don t find it cool at all yu cant download the resources unless you pay ! just say it is not free it would help some people not to waste their time. @Adilfranck somethings you should be willing to pay for in life instead of being a fucking leach dumb ass.

Yes you can think this, if you just scrolled down and down again "where is that fucking dowload button" in your mind... Reply to this comment Politis87 May 23, 2009, 2:07 am Thank for your time,awsome tutorial!!! Reply to this comment Gatekeeper May 5, 2009, 7:45 am great tutorial.... can we get some more ? ^^ new tutorial coming. Check again Friday please =) Reply to this comment Mrtones May 4, 2009, 8:30 pm where do i download the resources? mrtones, you need to be exclusive member. http://www.psdthemes.com/register.php Reply to this comment Tri vuong May 4, 2009, 5:24 pm This is awesome. Keep up the good work. Thanks dude^^ Reply to this comment Andrei May 3, 2009, 1:24 pm Nice work ! :) Keep it this way. thanks Andrei, another one on the way to go but %60 of done and 145 th step =) taking little long time to create Reply to this comment M4321na May 2, 2009, 7:01 pm Wow...this is really great!! Very useful. Thanks a lot Reply to this comment Serhat website May 2, 2009, 4:46 pm Hi Seashby, wich part? can you explain more please. Reply to this comment Seashby May 2, 2009, 4:05 pm I love this... but How do I build this in the browser template. I'm using the Safari browser, but I can't seem to make it work like you did in your example. Reply to this comment Monsieuralex974 May 2, 2009, 10:17 am Stunning ! Wow!

Reply to this comment Deusexmachina May 1, 2009, 11:18 pm Impressive, but the download is unresponsive. Thanks! Impressive, but the download is unresponsive. Thanks!

Oh Noes, sorry about that. i just fixed! please try again dude! Reply to this comment Patty May 1, 2009, 11:13 pm cool new site... Reply to this comment Serhat website May 1, 2009, 10:40 pm Thank you so much Makka! Reply to this comment And24 May 1, 2009, 10:31 pm You misspelled dublicate(duplicate) other than that the tut rox! Oo thx for notice =) and welcome Reply to this comment Makka May 1, 2009, 9:52 pm Killer dude! loving the new site Reply to this comment Serhat website April 28, 2009, 4:29 pm get some skill dude!! WTF! Reply to this comment Affiliate Program Join Our Affiliate Program and Earn With Us! Spread the love of psdthemes.com and get %35 - %40 on every referal! Members Plan

Free Membership Get lots of high quality and free webdesign themes! Details

Exclusive Full Acces to Awesome Fullsite designs PSD files and tutorials sources! Details

Developer Full Acces to XHTML/CSS versions of exclusive webdesign files! Details

Latest TutorialRSS for designers

Awesome Tutorial Portfolio Design

Tutorial RocknRolla Blog Design

Copyright & Usage

The effects and techniques in tutorials and Themes on the site can be used in whatever manner you wish without attribution. All files under NonCopyrigt Licence. Click here for details of NPC Licence The text, images,icons,pictures and tutorials themselves are the copyright of their respective owners. You cannot copy whole tutorials, either in English or translated to another language. You cannot redistibute or resell downloaded files.

Report
If you think that we've done something wrong just tell us please. We are always open mind for any words. Contact Us Dude!

Tags I want to be a webstar! Tell Us

awesome black blog blue Bright brown clean Colorful concept Corporate Dark Exlusive experimental flash Flex free
gray Green

theme fullsite game glow grass

grunge How to news old onepage paper personal portfolio psd purple red slick Slide show texture Tiny trendy tutorial UI video Video player web

2.0

white wood

2009 PSDThemes.com | Woo-hoo. Four-day weekend. HJS original websites