PhoToShoP TuToRialS

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.