CHAPTER 9: Android Graphic Design: Making Your UI Designs Visual 337Once you paste in this new transparent layer, with this circular galaxy image component on (in)
it, into the composite, as shown in Figure 9-22, you can click the eye icon next to the original
ImageButton1source.png source image layer, and turn its visibility off. This will make the white
layer background color for that layer invisible, and you will see only the Clipboard layer and the
ImageButtonRing.png layer. You will also see that what we now have looks like a custom image
button UI element. You can also use the Select ➤ None menu sequence if you wish, to remove the
marching ants selection, as that selection set is no longer needed.
If you want to, you can now double-click on the word “Clipboard” in the middle layer, which will
enable the layer name for editing, and you can type in ImageButtonTransparency and hit the Enter
key to enter it, as is shown in Figure 9-27, where the Layers palette is finally not being obscured by
GIMP menus anymore.
Now we are ready to enter the phase in our work process where we export (save out) the
imagebutton1normal PNG file format in the various resolutions that Android OS will use to match
different device resolution density screens. This 500-pixel source image will be the highest-resolution
asset, and will go into the /drawable-xxhdpi resource folder. It will be used on super high-resolution
screens such as the 2560 by 1440 Samsung Galaxy S5 and 4K iTV sets, which have the 4096 by
2160 screen resolution.
Figure 9-22. The final composite image result with the original source image turned off, showing layer lock icons