Welcome guest, please Login|Register !

PSDThemes : free PSD themes

17

free PSD

20095

downloads

3257

members

welcome Register Tutorials What's new ? Blog

Username PasswordHere we go!ahh i forgot my password :|

Not member yet?Cmon you can't miss!

Contribute Affiliate program

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

Awesome Tutorial Portfolio DesignTags: Exlusive, personal, portfolio, tutorial

This tutorial

commented

since May 9 2009

45

Creator : serhat

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

Submit Query

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 clickFill/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 clickFill/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 blurradius 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 10pixels

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 almostfinished!

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, applymask  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 andselect 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!!!

Serhatproud member of Psdthemes.com Login or Register please!

say anything to others, let them know what you got?Name Comment

Email Website

Acburst June 17, 2009, 4:13 pm Great tutorial! When's the next one coming? :)Reply to this comment

Raymond selda June 12, 2009, 8:15 am Very comprehensive tutorial. I learned how to efficiently draw a pixel highlight and how to createletterpress (stamp) effect. Thank you for all you effort and keep up the good work. Reply to this comment

Matthew June 4, 2009, 7:28 am This is awesome, not too often that we see a tutorial like this from the ground up, now only if you showed us how to code this in css... thank you matthewi m just design noob =) you need to ask html/css tuto for AdrienReply to this comment

Maxisanchez June 2, 2009, 5:28 pm I´m tired, but so exited too :D Thank you Maxi!Reply to this comment

Eric shafer June 1, 2009, 8:37 pm This tutorial is fantastic.

Featured here: http://www.presidiacreative.com/web-picks-23/ Reply to this comment

Gustotech May 28, 2009, 10:48 am yo know awesome tuts!! thanks lot!! Reply to this comment

Davidmarimin May 27, 2009, 4:52 pm I still confusing what am I doing right now. Hi davidhow can i help you?Reply to this comment

Discobiscut May 27, 2009, 4:05 am Ok I know this is completly noobish and I am sorry.I love the tutorial. I have good photoshop skills and can reproduce your results I am working on a portfolio website, started in indesign but will take it to psd as you have done here.Ok here is the dumb question how do you then make that a website? Hi James, after finishing design you must slice them for HTML/CSS and then you need Content Management System (CMS) for easy upload/publish. You can look around for common CMS like Wordpress. But those steps need knowladge about website bulding becouse there lots of ways for it so i think when you done with desing, find a developer guy for converting design to real website.Reply to this comment

Alin ivana website May 25, 2009, 9:57 am Superb tutorial, detailed, keep it up Reply to this comment

Smeikx May 24, 2009, 8:01 pm Awesome!! Too bad I'm using GIMP :-( Reply to this comment

V. geld website May 24, 2009, 2:16 pm Nice tut, thanks! Your welcome^^Reply to this comment

Politis87 May 23, 2009, 1:58 am thank you very much.... Reply to this comment

Godsdreamer May 21, 2009, 8:39 pm i really like this one..i wanna try making it thank you dude, go fo it! if you finish it, show me your result pleaseReply to this comment

Patrick james May 17, 2009, 2:59 am Thanks for putting in the time on this tutorial! Wonderful result man. Very nice techniques. :) =)) HeyPatrick thank you dude! nice to see you again^^Reply to this comment

Ben swift website May 16, 2009, 10:37 pm This is a long shot..

I know you have to pay a membership for the resources pack, but is there any way you can either tell me where you got the wood texture from, or better, give me a copy :)

Thanks very much,

Ben

PS - If it helps, I can give some old PSD themes to you in return :) Hi Ben, i m not sure about wich one but; istockphoto or shutterstock.thx! =)Reply to this comment

Antrax_sounds May 15, 2009, 8:10 pm wow ! es muy detallado !

este sitio me a servido de mucho :D Reply to this comment

Radule May 13, 2009, 11:48 pm "Step 23Now I want to create stamp effected logo but before this,write Elune with Amorinda Alternativa font ( you can find this in your resources folder)."

Pls help me,how can i download this fonts??where the f**k is that recources folder? :(

BDW i love your site and your tutorials and themes are GREAT! :)))Give us more tutorials and i hope you will show us how to SLICE them and how to code them in Dreamweaver and prepare for publishing.

Thx a lot man! Hi Radule, thanks dude.if you go for Exclusive Membership you can get source files (PSD,texture,etc) =) maybe you think, "WTF is that exclusive membership and why?"< read here please, other way, ask to google for font please =)^^

p.s: i can't code, maybe Adrien(Dev of PSDThemes) will show you how to slice/code them^^Reply to this comment

Splat May 13, 2009, 6:36 pm I agree with that, all your tuts are really really detailed!! Reply to this comment

Fullmetalbabe May 13, 2009, 7:23 am Have I expressed enough how amazing this site is? i m glad you like it^^ thank you =)Reply to this comment

Young_investigator May 13, 2009, 5:44 am nice..i like it Reply to this comment

Anna May 11, 2009, 12:54 pm very informative.nice Reply to this comment

Pat May 11, 2009, 9:52 am I think I may just sacrifice more and pay for that $9 a month membership soon.

You really set a new standard for this kinda tutorials. So glad to see this. Be prepared to be uber famous!

I look forward to more in the future.

Keep up the good work Hey Thank you =) Friday new tutorial day^^Reply to this comment

Serpico May 10, 2009, 8:10 pm Awesome ! Thank you very much for this great work, if all tutorials on the web were like that the world would be very different ! :) wohoo i m glad you like it dude!Reply to this comment

Matthew heidenreich website May 10, 2009, 7:43 pm great tutorial, nice to see some other sites with some worth while layout tutorials :) Hey Matthew thank you, nice to see you dude^^Reply to this comment

Sandvik website May 10, 2009, 1:50 pm This tutorial is just great!!!

Very described, advanced and so cool design! Thank you dude^^Reply to this comment

Merwish May 9, 2009, 7:09 pm damn good job man! i love it. Reply to this comment

Serhat website May 9, 2009, 4:21 pm kaan tesekkurlerp.s mail atiyorum hemen Reply to this comment

Serhat website May 9, 2009, 4:19 pm thank you Shreedharcva! i m fan of your comments dude hahaha Reply to this comment

Shreedharcva May 9, 2009, 1:47 pm Just in a day I've become big fan of your designs. Reply to this comment

Kaan caliskan May 9, 2009, 8:31 am serhat, cok guzel bir calisma yapmissin. benimle iletisime gecersen sevinirim. Reply to this comment

Serhat website May 9, 2009, 4:22 am Damn i m sooooo tired but i finished muhaha =) 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 & UsageThe 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.

ReportIf 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 theme fullsite game glow grass

gray Green 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 | «Oh sure. Even communism works. In theory.» HJSoriginal websites