web design | graphic design | javascript | css | html | tutorials of photoshop, flash, dreamweaver

Posts Tagged ‘web 2.0 style

The one who are in the field of  website designing and web developing has requires some quality icons. As icons are very necessary for saying about something in terms of small image. Icons are use in website widely but for some time that trend gone and people prefer simple text link. But now that trend is return as in web 2.0 style design’s one feature is use of 3d icon. So icons are in widely use in web 2.0 style design.

Here is some links for free icons:

Free Icon Set for Web Developers – Web Injection

icon_post2

Project Icon Set

icon_post3

Avatar Icon Sets – Beauty!

icon_post4

Social Media Mini Iconpack

icon_post5

Software Companies Brand Icon

icon_post6

Windows Icons

icon_post1

Web 2.0 and Developers Icons

icon_post7

Free Glossy Blogging icons Set

icon_post8

200 Free Exclusive Icons: Siena

icon_post9

20 Free Exclusive Icons: Calabria

icon_post10

55 Free High Quality Icon Set

icon_post11

Icon Docks Icon Set

icon_post12

44 Must Have Icon Set

icon_post13

Hope you like this and this post will useful to you. Bookmark this link so that you can use it in future as this type of icon collection is necessary for website designers and web developers. Keep visiting I’ll give my best to you always.

Hi friends now once again i am with some new things for you as i promice you. I like glassy effects too much.so here i am with glassy top menu bar for your website. yes you can create web 2.0 style glassy menu bar for your website and when you are designing website for you clients. As this is mostly use in website design so I think every web designer should know this glassy effect. It’s so simple to create glassy top menu bar for website.

Ok ok don’t get bore I stop my mouth and start our tutorial as i promice you that I’ll always give new tutorials here about graphic design, web design, css, html, javascript, flash. So keep visiting and don’t forget to put comment so that i can improve this place to make most suitable to you.

Step1: Open Photoshop and press ctrl+N to open new document. Set value as per your website’s requirement here i set widht-500 px and height-75 px resolution-72 px / inch. Fill black color in it.

Step2: Press shift+ctrl+N to create new layer. Put guide as shown in the second image below. Go to View menu and make Snap setting as given in below first image. Now press ‘U‘ or select Ronded Rectangle Tool and make selection as shown in below second image after setting it’s redius to 10px.

step2a

step2

Step3: Fill black color in it. Go to blending options and make following settings for Gradient Overlay. After doing this click on the area highlighted with red border to edit gradient colors. Set gradient colors as given image below. You can set your own colors to match with your website’s colors. This is the main portion of the glassy effect so set values carefully.

step3 step3a

Step4: Duble click on the same layer or manually go to blending options. select Inner Glow and make settings as given below.

step4

Step5: Now last but not list Duble click on the same layer or manually go to blending options. select Stroke and make settings as given below.

step5

You are done now your glassy top menu bar is ready you just need to put text links in it and your result will look like below given iamge.

glassy_menu

How simple and you can do this web 2.0 style glassy menu in just simple 5 steps. In simple 5 steps you’ll get awesome output. I am sure you learn something important related to graphic design and web design.

Keep visiting,

Keep commenting,

Keep learning.