Photoshop Week Day 5: Create unique Web 2.0 buttons
This quickfire technique will allow you to create your very own customised and personalised Web 2.0 style buttons, perfect for adding to a blog or website
This quickfire technique will allow you to create your very own customised and personalised Web 2.0 style buttons, perfect for adding to a blog or website.
Use the following technique to create customised web buttons. Experiment with shape, colours, effects and fonts to create bespoke buttons.
01. Start by selecting the Elliptic Shape tool, drawing out your circle.
02. Select Inner Shadow from the ‘Add a layer’ style options.
03. Set Blend mode to Multiply, 35% Opacity.
04. Set Distance and Choke at 0px and 0%, and Size at 10px.
05. Still in the Layer Style options choose Bevel and Emboss. Set Style to Emboss, Technique to Smooth, Depth at 100% and Direction to Up. Set Size at 40px, Soften at 14px.
06. Set Highlight Mode to Screen at a 75% Opacity. Set Shadow Mode to Overlay at the same percentage. Select Gradient Overlay, again in the Layer Style options.
Double-click the Gradient bar, accessing the Gradient Editor options. Select a Background to Foreground gradient, then change the colour scale using your shape colour, to a darker version of this tone. Do this by selecting individual Color Stops, using the Stops>Color option. Click OK once this is done.
07. Now set a Radial Style at a 90% Angle. Set Scale to 150%. Select the Ellipse shape tool and draw a white oval shape, covering the top of your button. Ctrl+click your shape layer and select Rasterize.
08. With your white shape layer still active Ctrl/Apple+click your button layer thumbnail, press Ctrl/ Apple+Shft+I, and hit Ctrl/Apple+X. Ctrl/Apple+click the white shape layer, then choose Select>Modify>Feather, setting a Radius of 50 pixels.
09. Finally, hit the backspace key once and lower Opacity to 30%. Now merge your shape layers only, and apply a Black to White Gradient, with an Overlay Blend Mode at 50% Opacity.
to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
The instruction #7 to Rasterize the oval—I was unable to select rasterize as it was grayed out.
I did finally get a button finished, but am not sure it has the same reflective/gradient quality as your sample.
Step #9 asks to merge layers, but is that necessary? It would be hard to edit with the layers merged
thanks
I don’t understand why some people like to design everything in Photoshop. I prefer Illustrator because vector art is scalable. Sure, there are a few effects that are easier to achieve in Photoshop, but once you make it yea big, you can’t do much else with it except shrink it.
And Sue’s argument can also be applied to Fireworks vs Photoshop. Fireworks is designed for web graphics, it is less complex than Photoshop and I find it does everything I need. The product is still current yet it never gets a mention by WDM.
When using photoshop for web graphics it is often necessary to rasterize before applying an effect (see step 7) with the effect that a resize of the graphic means starting again. Same is true for Illustrator effects such as dropshadow – once applied it can’t be changed.
This propensity for Photoshop and Illustrator to stop you reediting effects is in itself a good reason to use Fireworks. Everything in Fireworks remains a vector and so can be re-edited/re-sized adinfinitum.
This is a nice Photoshop tutorial. However, for those who does not have Photoshop or knowledge of designer and wants create their own button with easy, I will suggest Cool Button Designer. Cool Button Designer can generate buttons for all three states on the fly, mouse over, mouse pressed and normal states. It gives you ability to control the light and reflection, add icon to your button, to gazillion of shapes, etc… Very nice software to create Web 2.0 style button. Cool Button Designer also generates you the HTML code for you to use. It saves the templates, that you can resize any time without loosing the quality of your button.
You should try it, its not a joke, and with 3-5 minutes you can build this button from scratch.
I am using it myself for my projects, and very glad to find it.
Try it, google for Cool Button Designer. Official website has a free trial, limited with watermark only.