21

free PSD

25916

downloads

12653

members



« Learning without thought is labor lost; thought without learning is perilous. » Confucius

Description and Design Brief Hi dudes, our new awesome tutorial! I think this is most detailed and long web design tutorial on the web  with 175 screenshots!!! This tutorial include lots of  trendy photoshop effects like:

• Shine/glossy effects


• Stamp effects


• Tab menu


• Wood texture


• Big typo usage


• Artistic feeling


• Fake 3d


• Big icons usage

The Final Result

Let's Start the Tutorial

Step 1

Open your empty browser template Safari_Starterkit.psd (in your resources folder of this tutorial.) if you read our first tutorial, i had explained why we are working in browser template psd.

Step 2

First we need safe area for our design. You must keep your work in safe area based on general user screen sizes. I'm using 980px wide .  Hit M and select Rectangular Margue tool and open your info window (F8 shortcut on window) then select area 980px wide.

Step 3

Hit CTRL+R for show/hide rules and drag two on vertical guide lines to stage. See picture below. (How to create guide lines? : if you want to create vertical guide line, go to on vertical rules, staying left hand side on your work space. Left click on vertical rules and drag a line to stage)

Step 4

Change your background color to #1b1b1b

Step 5

Now we create top side of our design. Hit M key and select Rectangular Margue tool and select area like this

Step 6

go to your Layer window and fill selected area with gradient.

Step 7

Use following setting for gradient. Colors  #5bd6ae to  #5b9bd6

Step 8

Now fun part starting =) . Hit M key select Rectangular Margue tool and select area, after selecting area right click on it and select Feather from list.

Step 9

Set Feather Radius to 100 pixel

Step 10

We got smooth corners! but not finished. Once again right click on it and select inverse from list.

Step 11

Now hit Delete key 2-3 times.

Stop when get result similar to this

Step 12

We just erase left and right side of our shape and looking great. Now we need to do same style for bottom part. Hit M key and select area.

Step 13

Right click in selected area and set Feather Radius to 75 pixel

Step 14

hit delete again and again.

Step 15

Yes! we got great and smoot graphic but it looks like little muted. So just duplicate it =)

Close up detail

Step 16

Now i need 1 pixel highlighted line at top of my shape. Select Pencil tool and right click on your work area and get 1px brush from library

Step 17

Draw a horizontal line from A to B point

Step 18

We need to erase left and right of our line for nice looking. Get eraser and select 300px eraser brush from library

Step 19

Set eraser brush opacity to %20 and erase it slowly =)

Step 20

When you finish erase, set your drawed line layer mode to Soft Light. Wo-hoo!

Step 21

You know we erased our shape. If we  put anything below of our shape, it can't be hide because our shape has erased/smoot bounds. So we need to create solid color behind of our shape. After this we will create tabs menu! Hit M and select area

Step 22

Go to your layer window and click Fill/Adjustments icon from bottom of panel and select solid color with #1b1b1b  (our background color)

- White bg color just showed for demostration

Step 23

Now I want to create stamp effected logo but before this,write Elune with Amorinda Alternativa font ( you can find this in your resources folder).

Step 24

Select your document area and click to Align Horizontal Center icon.it will align our Elune text to middle of selected area. See picture below

Step 25

Double click on Elune layer and change layer style with following settings

Final result !

Step 26

Let's create menu tabs =) Select Rounded Rectangular Tool, set radius to 8px and draw a shape like this one

Step 27

Hit CTRL+T (free transform) and push CTRL+ALT+SHIFT together and change bottom part of your shape. see picture below

Step 28

Go to your layer window and click Fill/Adjustments icon from bottom of panel and select Gradient from list. Use following gradient settings

Color #427289 to  #427289 (right hand side color opacity must be zero for transparency)

your final result should looks like this

Step 29

We need to resize this shape. Get Direct Selection Tool from your pshop toolbox and select only right side of our shape.

Step 30

Shape resized and now i wan't to create a highlighted line for this tab. Push CTRL key and left click on mask layer of our shape. Great we select shape area! =P

Step 31

Open new layer and Hit M then right click on selected area and select Stroke from list. Select white for color.

Step 32

Get eraser tool and erase bottom parts, it will give little smooth transition to highlighted boarder.

Step 33

This tab shape has transparency too and i don't want this because we will put wood texture behind this. CTRL+left click to our shape mask and select shape area

Step 34

go to your layer window and click Fill/Adjustments icon from bottom of panel and select Solid color. Fill it with #1b1b1b (our background color)

Step 35

Tab menu design finished but we need three more. So select tab menu layers and merge them (CTRL+E) and duplicate this merged layer

Step 36

Let's put our wood texture to behind of tab menu. Open Wood_texture.jpg from your resources folder and hit CTRL+A (select all) and hit CTRL+C (copy :P) then close it wood texture file.

Step 37

Hit CTRL+V and paste into your work space and drag to top. You see wood texture width larger then our document width. So go to your layer window and move your mouse pointer between wood texture and Page Background layer. When you see two circle icon, it means you can mask your wood texture to Page background layer.

Step 38

Duplicate Elune layer, change font size and write your menu texts on tabbed menu =)

Final result

Step 39

I just want to create little differece between active(selected) - unselected menu items. Double click on home typed layer and open layer style. Give Outer Glow with following settings Color #4f9bbe

Final result

Step 40

i want more visual effect for active menu item nihihi [pathetic designer laugh]. Select Ellipse Tool and create a shape like this :

Step 41

Go to your layer window and click Fill/Adjustments icon from bottom of panel and select Solid color. Fill it with #55c2f1

Step 42

Yes we need smooth edges so go to top menu bar  Filter select Blur and select Gaussian Blur Set Gaussian Blur Radius 11 pixel

Ayaaramba glowing!!!

Step 43

Type someting like this with big fonts

Step 44

And my favorite part starting. Showcase area! Hit M key and select area then go to your layer window and click Fill/Adjustments icon from bottom of panel and select Solid color. Fill it with #000000

Step 45

Open wood_texture.jpg and copy/paste into your document. Then Duplicate wood_texture layer.

Step 46

Mask two of wood texture layer to black filled shape (remember step 37)

Step 47

Hit  M key (Rectangular Marguee Tool) again and select area inside of our latest created shape then go to your layer window and click Fill/Adjustments icon from bottom of panel and select Solid color. Fill it with #000000

Step 48

CTRL+left click to layer mask and select area.

Step 49

Go to top menu "Select" > Modify > expand Expand by 1 pixel

Step 50

Open new layer top of black shape layer and then right click in selected area. Select Stroke from list Use following stroke settings

Final result

Step 51

Change stroke layer mode to Soft Light and reduce opacity to %50. Yay we got nice deepth!

Step 52

Now we need nice shadow for showcase area. CTRL+left click on layer mask and select base area. Go to your layer window and click Fill/Adjustments icon from bottom of panel and select Solid color. Fill it with #000000

Step 53

Hit CTRL+T for free transform Move points like this one :

After moving points, now we need nicely bend effect for middle. Right click in transform area and select Warp get similar result like this and hit right side enter key on your keyboard, it will apply transform.

Step 54

We create shadow shape but we need smooth edges for more realistic shadow look. Go to top pshop  menu and select Blur > Gaussian Blur Set blur radius to 8 pixels

Step 55

I don't want to see shadow staying at outside of base shape so CTRL+T and move left and right edges of shadow shape. See picture below

Final result and general look of our design

Step 56

Let's put some sample work  in our showcase area. Ctrl+Left click to our black shape layer mask (staying at top of showcase layers) and select area and go to your layer window and click Fill/Adjustments icon from bottom of panel and select Solid color. Fill it with #000000

We need little space between wood texture and sample work image.So go to top menu again and "Select" > Modify > Contract Set Contract by 10 pixels

Step 57

Then open any image from your comp (I got this one) and open in photoshop. CTRL+A then CTRL+C and CTRL+V (paste :P) into you work area. Mask it with 10pixel contracted shape  (remember step 56)

Step 58

Yes we need next and prev buttons now! Get Ellipse tool and create a shape like this ( sure fill it with solid color dude)

Step 59

Open wood_texture.jpg again and copy a piece of wood texture. see picture below

Step 60

Paste into your design document Mask it to circle layer (remember step 58)

Step 61

Now we need little emboss for button. CTRL+Left Click to circle shaped layer mask and select area.

Then go to your layer window and click Fill/Adjustments icon from bottom of panel and select Solid color. Fill it with anycolor. We will change layer style, color dosent matter =)

Double click and change layer styles to following setting * important notice: your new solid colored layer must be stay top of created button layers.

Result and general looking

Step 62

Let's play with details of our button. Create a shape with Polygonnal Lasso tool and fill it with white.

Step 63

CTRL+left click on shape and select area

Open new layer from your layers window and then right click in selected area and select stroke from list

pic a color #47ebf9 for stroke

Reduce layer opacity to %33

Result

Step 64

Select all created layers for button and hit CTRL+G (group layers) and right click on group folder then select Duplicate Group, drag it to right side of showcase area

Step 65

Select duplicated group layer and hit CTRL+T (transform) right click in transform area and select Flip Horizontal. yes yes our showcase area almost finished!

Step 66

Need a header rite, select area like this and fill with black and please type "i love you" on it =P Font settings : Georgia 12pt color white

general look

Quick Tip: don't lost your self in details of design document, sometimes go far from your design and look and look again. %1600 zoom view of details or %10 view of your total work must be balanced for every look.

Step 67

I'm happy with general look of this design and top part almost finished  so lets play little details of menu. Select menu glow layer (we create at step 49) from your layer window and duplicate it. then hit CTRL+U (Hue/Saturation) and change every glow color to

Result

Step 68

Now  i m gonna show you how to create stylish content box. Hit M key and select area from

hit CTRL+SHIFT+C (copy merged) and CTRL+V (paste:P)  it

Duplicate and flip horizontal

Bring them together like this and merge this layers (CTRL+E)

Step 69

Yes it looks like we need more vertical area for this box and now magic will happen =) Hit M and and only select 1 pixel from bottom.

then hit V key (move) and while keep pushing ALT key hit down key again againnn and voila!!!

Step 70

Box graphic ready let's create stylish wood header on it. Open wood_texture.jpg again ahahahhaah you know copy/paste =) after that:

1. Create a shape with Raunded Rectangle tool and hit CTRL+Enter for selection

2. Mask it wood texture layer

3.CTRL+left click to mask area

Step 71

I wanted 1 pixel highlighted line on this wood header too. already we got selected area so just open new layer , Hit M and right click in selected area then select Stroke

Step 72

We need to erase bottom part of this box, like we do at first parts of this tutorial. Select blueish shape layer and Hit M, select area and right click in selection and select feather from list. Set feather Radius to 50 pixels

Step 73

Uhuu we got smooth edges again, hit delete again again. try to get a result like this :

Step 74

And yes this blueish shape transparet too and we need to fix this tranparency. Hit M and Select area.

Fill it with solid color #1b1b1b ( our bg color)

Please pay attention layer arragements

Step 75

Create a header for this box

Step 76

And some dummy texts =)

Wo-hooo general look and feeling are great!

Step 77

Just need little fine tune on "latest blog posts" box. i don't like line seperators between blog posts headers. Let's change them with dotted lines.

Get Pencil tool 1 pixel brush

Step 78

Now we'll learn new photoshop brush feature =) open your brush window and go to Brush Tip Shape tab and set brush spacing rate to %400

Step 79

Just draw it, ta da dotted lines! =) Reduce layer opacity to %20

Step 80

Now i want to add little fun thing into this design. it's a light dimmer! Actually I don't know how to develop this (edit by adrien: using jquery that's easy) light mood changer on live version of this design but i can design =P  open mini lamp icon  in pshop and copy/paste in to your design document (lamp icon in your resources folder) place it to top.

Duplicate it and hit CTRL+U to change Hue/Saturation

Step 81

Select Rounded Rectangle tool and create a shape then fill it with solid color #241009

we need to change layer style of this shape, double click on this shape layer and change following layer style settings

Step 82

Now we need little dimmer key. Yes no more wood_texture.jpg =) just select area from top wood texture.

Step 83

Select Rounded Rectangle tool (set shape radius to 15 pixel) and create a shape on mini wood texture then hit CTRL+Enter for area selection, apply mask  to mini wood texture layer. ( I hope you remember how to mask? If not please read first steps)

Duplicate little wood textured dim button and copy/paste our showcase prev/next button layer style on it (we already create style for buttons, so we can use this easly).

Step 83

Select 1 pixel Pencil tool, set color to white and draw line between two lightbulps

Change layer style of this line layer, add a gradient overlay and use following settings please

Step 84

Little details on dim button

It's little large for top, group it all "light mood" layers and resize it please

General look

Step 85

Now! Let's create one more box. So we have empty space at bottom right. Dublicate latest blog posts box (did i tell you  group em before? hmmm can't remember but Frodo you are more than one little hobbit! Find them and bring them all one layer group Frodo!!!!)

Step 86

Yes right side box need to be large then left one. So select blueish shape layer and hit CTRL+T and resize it.

Step 87

We need to fix top rigth side wood texture. Select wood texture layer mask and hit M and select top area.

Quick Tip: Actually our wood texture layer very large but we are limiting visible areas of wood texture with mask. This is the reason why we are using masking Vs deleting parts. If you work with masks, you are more flexible...

Push Alt+Backspace fo fill mask area. See picture below for details

Step 88

Yep our top highlight 1 px line must fit with our new shape witdh. So hit M key and follow details

Final result of top highlighted line

General look

Step 89

Let's put mini icons for our life stream box.

Select and group(CTRL+G) all mini icons

Set groupped folder layer mode to Luminosity. Wohoo nice colors =)

Step 90

Click and drag twietter icon to outside of the group. Now we got selected life stream icon feeling.

Step 91

Lets more focus on this selected item thing. Select Pencil tool 1 pixel brush and draw little down arrow bottom side of twee icon get matched color with eyedropper tool or if you are lazzy like me #a6c4ce

Step 92

And now dudes you'll really loving this effect! I know nihahha. Fake 3d feeling!. Hit M key and select area like this

go to your layer panel, click to Fill/Adjustments icon at bottom of panel and select Gradient from list then use following settings

pay attention to this gradient style : Reflected (otherwise u can't get depth feel)

uh uh look at this boy

Step 93

One more gradient for complate 3d look =) Hit M and select are like this go to your layer panel, click to Fill/Adjustments icon at bottom of panel and select Gradient from list then use following settings

pay attention to this gradient style : Linear

Ayaaa rambaaaa!

General look

Step 94

Footer part : duplicate and drag to bottom your Elune lovely stamp effected type logo! Sweet general look again (yup i add 2009psdthemes.com and footer links, do it =)

Step 93

Final touches with big icons ( i just want to show you alternativ looks, those icons are not necassary)

Finito! Voila ! done ! Bitti! =)

I hope you guys love it new tuto, if i spell someting wrong sorry about that, but this tuto took me 3 plain days and I think it worth to made!

Don't buy us cofee or beer =) We have different life concept ideas, if you wan't to do someting or  if you like it please go for pay&go montly exlusive membership and get the source files of this super duper tutorial!!!

Serhat
proud member of Psdthemes.com

Affiliate Program Join Our Affiliate Program and Earn With Us! Spread the love of psdthemes.com and get %35 - %40 on every referral!

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!