September 09, 2005
Creating Glassy Buttons in Photoshop!
Just been reading and working through a really great photoshop tutorial about how to create glassy buttons like:
It works through everything from making and saving non-rectangular parts of an image, to creating and loading selections from channels, to partial transparent gradient fills, to drop shadowed text, etc. Nice introduction into many graphics editing concepts.
Also, since all of the tutorial works with transparent selections and fills, etc, it's also easy to make families of buttons with differing colours, text, etc, that still remain partially transparent with a document background.
I definitely found it worth the time it took to get everything working.
Posted by crafterm at September 9, 2005 03:49 PM | TrackBackHey Marcus,
do you really use photoshop? Did you give seashore a try? It's kind of GIMP with a Mac OS X ui.
http://www.drunkenblog.com/drunkenblog-archives/000621.html
Cheers,
Mariano
Hi Mariano,
Yes, starting checking out Photoshop when I got my Powerbook and I'm quite impressed with the amount of support and tutorials out there on the internet.
It's been fun experimenting and trying out different effects and learning how various things (like the glass buttons for example) are done.
I used (and quite liked) the Gimp under Debian, but on OS X it required X11 and GTK2 rather than Cocoa/Carbon, etc, so it's good to see both of them being combined in Seashore - I'll take a look mate, thanks.
Cheers,
Marcus
Posted by: Marcus Crafter at September 9, 2005 05:58 PMIf you are to create a number of buttons, consider using a vector-drawing program such as Illustrator or Inkscape and saving in SVG. You can then process the SVG using XSLT and automatically produce variations (e.g. text and color) using Cocoon and the SVG serializer.
We used this technique on a large webapp where each button had to be an image, translated in 4 languages! Saved an awesome amount of time!
Posted by: Sylvain Wallez at September 12, 2005 12:20 PM