In Part 1 we got as far as creating the inner glow for the button, and really all there is left to do is create the highlight. Start off by taking a copy of the inner glow and reducing the feather I bumped mine right down to 2.5 pixels. Also, change the colour to white while you’re there.
Finally, apply a linear transparency, from the top this time, and take it just below the center of the object. By this point, your rectangular button should almost be done, play with the feather & transparency until you’re happy with the button.
There are two options for creating the highlight on the circle. The simplest is to create an ellipse, above the center and fill it white, now apply a linear fade from top to bottom, and feather the object, in this example I feathered by 6.5 pixels.
You could also create a rectanglular highlight, and distort it by right clicking and choosing convert to editable shapes. Then, using the shape editor tool (F4) click and drag the edges till you have the shape you want.
From here the process is the same as the elliptical highlight, feather it, make it white, and apply a linear fade.
Have a play around with the different shapes and find one that looks good for your design. When you’ve finished your buttons, why not add a comment with a link to the finished images?
This tutorial was inspired by the collection of glass effect buttons at Bittbox check out the rest of the totorials there too, fantastic!
Ebuyer have been in the news a couple of times recently for plagiarism of other sites, but when I worked for them, we’d regularly find other stores that had ripped off the whole site, html, T&C’s … everything.
We used to love finding sites and sitting round a desk pulling them apart to see which bits had been kept and which had been redone. There were certain comments left in the HTML that were dead giveaways. A lot of places just took the whole shebang and changed the images.
This one however took the site, and then went to the trouble of converting it all to tables. Well done chaps.
Stubblog 