332 CHAPTER 9: Android Graphic Design: Making Your UI Designs Visual
You could simply have your ImageButton draw a ring on top of your galaxy imagery; however,
this would allow the “corners” of the galaxy image to stick out beyond the ring, and that is not as
professional of a result. Let’s make this graphic that you are creating look completely “button-like,”
and teach you some advanced features of GIMP at the same time, since, after all, this is the graphic
design chapter of the book, and I don’t want to leave you wanting more!
What we are going to do in the next section is to go into detail regarding how to leverage the
transparency inside of your ImageButtonRing.png image asset, in order to surgically cut the Milky
Way out of the center of the original source galaxy image. This will point out to you the “modal”
(or modes of operation) nature of the GIMP image editing software, and how to use this as an
advantage, by selecting a “selection set” using one layer, and applying an operation to a different
layer using that selection set, as it will still be actively selected. Pretty cool advanced graphics
moves!
You will do this by selecting the ring image asset, as is shown in the Layers palette (in blue), in
Figure 9-17, as well as the Fuzzy Select Tool, also shown selected in blue in the top-center of
the screenshot, and Shift-clicking (which adds to the selection as you click different areas) in each
corner of the ring image. Shift-clicking means holding down the Shift key on the keyboard to add
selection areas each time you click. This will select the transparent (and unused, in the galaxy image)
corner areas around the ring UI element.
Finally, before you hit the “Delete” key on your keyboard, you will strategically (cleverly) select the
ImageButton1source.png layer, which will then allow you to (brilliantly, if I may say so) utilize that
selection set that you “culled” from the ImageButtonRing.png layer in a delete operation that you
will then apply to the ImageButton1source.png layer. This will remove the rounded corners from the
galaxy image, and make it match up seamlessly with the ring image element.
Creating an Alpha Channel: Fuzzy Select Tool
I have encircled (ensquared, actually) the Fuzzy Select tool (called the Magic Wand tool in
Photoshop), and the Tool Options palette containing the default setting which we will be using, in
Figure 9-18. Since GIMP is modal, and because you must have certain operational modes selected,
you will need to have GIMP “set up” exactly as it is shown in Figure 9-18.