web graphics

[fozzer]

Hi all i have recenly got into web deisgn i know some html and css. I now want to know how to make web graphics in phtoshop like naviagtion bars and buttons. I would like to know how to make nice gradients and the galss effect. How does one learn these skills. Thanks in advance.

 

[Hoogle]

Ok Here goes I have never done a tutorial like this before I usually record videos lol so Good luck lol.
Step 1 create a new document slightly larger than what you want your button to be

go to the shape tool and select rounded rectangle and draw out your button shape Does not matter what colour at this stage..
right click the button layer in the layers panel and select blending add a drop shadow if you like and then select gradient overlay.

Img1

Note how it goes from dark to the colour you want your button to be.

Step 2

Select the pen tool and and check the option create shape layer. Draw what you would think would be a highlight making sure you have no style selected and your colour is white. This is harder than it sounds for realistic results. And repeat this step for every highlight you only can do 1 at a tme for best results on there own layer. Then adjust the layer opacity so that it looks like highlights and not just white patches. these can be from very low opacities to quite high depending on highlight

image 2


I then tend to create a group at this stage as that is the button done.

Step 3 add a hue saturation adjustment layer so you can easily come back at any time and change the button to any colour you like in the future

image 3


Step 4

Choose your font and type your text for the Button I like to do it in white but that is your choice and I like to add a bevel and emboss using the same steps as step 1 under blending options just select bevel and emboss I will not give you settings as it will be different depending on button size and text size.

image 4


And that is your button done The final product looks like this (depending on your hue saturation adjutment layer of course)

 

[chitkaran]

Cool.. I learnt this too just now... [innocent]

 

[rickymartin]

Creating buttons in Photoshop it`s easy but you have to create them to fit with the website. For this it`s recommended to know different button effects so you can apply in different situations. Because time is precious, you don`t have to lose it searching for tutorials around the web. So, to help you find them easly I collected a bunch of tutorials that will learn you how to make different button effects in Adobe Photoshop.
​

 

[Rey]

What size canvas did you start with?

Good idea with the Hue/Saturation layer, by the way!

 

[sprucemagoo1]

It depends on how big your buttons are, though you can create gradients, inner glo and transparency with css.
The nav bar on this web site is just html and css. The less images that are on the page, the quicker it will load, which visitors will like.
View attachment 19983