Creating Stretchable Button Images

In a previous article, I described a couple techniques for putting buttons in a table. If you want your buttons to have a background color, and likely some kind of gradient, the trick is to use a custom UIButton. These are interesting because they can have an image that forms the background of the button, and this image can be stretched to fits the frame of the button. In this article I will describe how to create these stretchable button images that look nice in a table. I will demonstrate this using Inkscape, a wonderful vector drawing application that can be freely downloaded from here. What I will show is how to create an image that looks like this:

When this image is applied to a custom UIButton, with some text added, you get something like this:

This shows how the image is stretched in order to fit the button's frame.

Step 1. Starting Inkscape

The first step is to fire up Inkscape. We're only dealing with an image of around 100x40 pixels, so your canvas shouldn't be too big. Bring up the document properties (File>Document Properties) and set the custom size to something like 200 x 60 pixels. But this will make your canvas really small, so zoom in with View>Zoom>Page

Here is what your Inkscape window should look like:

Step 2. Drawing the Rectangle

Now we will use the rectangle tool to draw our image. I don't think the size of the image is terribly important, since Cocoa Touch will stretch it to fit. For this exercise, I will create an image roughly 90x40 pixels. Click on the rectangle and squares tool (F4). Now draw a rectangle on your canvas about 90x40 pixels in size. The size will be displayed in the status bar at the bottom and will adjust as you drag your mouse. Don't worry about fill or stroke color at this point; we'll adjust those later. Now you might have something like this (fill color uses whatever color you used last):

Step 3. Rounding the Corners

Time to make the rounded corners. If you don't see the little circle in the upper right corner of your rectangle, select the Edit Paths by Node tool (F2) and click on your rectangle. That should bring up the little circle. Now drag that circle down, which creates the rounded corners. Make them as round as you want, but I pulled the circle down about a ¼ of the way down:

Step 4. Filling with Color

Now we have to change the fill color. Bring up the Object>Fill and Stroke window. You may have to make the window a little larger to fit it on. Make sure the Fill tab is selected and click on the Flat Color icon at the top (the one to the right of the "X"). Now you can enter RGB values, or use the wheel, or any of the 5 methods to set the color just the way you want. I prefer to use the wheel to get to the general color, then switch over to RGB to fine tune it. For this example, I want a color with RGB values 0, 189, 0. Now my image looks like this:

Step 5. Coloring the Border

To set the stroke, you can make this whatever you want, but I prefer a stroke weight of 0.5 pixels. This allows the button to look more like a table row. This is set on the Stroke Style tab of the Fill and Stroke window. The stroke color is set on the Stroke Paint tab. I want a sort of gray color to match the table row borders. I think I am pretty close with these RGB values: 63, 118, 83:

Step 6. Adding the Glare

We're in the home stretch now, but this is the trickiest part: applying the gradient to give it that shining light affect. For this we will use the Create and edit gradients tool (above the eye-dropper tool on the left, or Ctrl-F1). Click in the middle of your image and drag the mouse up. This will create a gradient that gradually gets lighter as you go up. You can click on the endpoints and move them around to get your desired gradient affect:

You might want to add another point on the gradient line to give a more enhanced affect. To do this double click on the bottom handle. You'll see a dialog like this:

Click on the "Add stop" button, and this will add another handle on the gradient line in the middle. You can also drag this around. While the gradient editor is up, you can adjust the colors of each handle.

One problem is that the default settings for the gradient tool is to go towards a translucent color. This might look fine within Inkscape, but when you create a button with translucence, it will actually show the background through the button. This may or may not be a desired affect. If it isn't, you can change the color of each end of the gradient. Simply click on the handles and make sure the opacity is set to 100% and the color will now be solid. Unfortunately, this has the affect of hiding your gradient. Don't worry; just select each handle and adjust the colors the way you want them look. After fiddling with colors of each of the handles, I got an end product that looks like this:

Step 7. Saving your Work

Now you need to save it. This is a very confusing part of the Inkscape interface. When exporting a bitmap, Inkscape saves it as a PNG file, the perfect format for the iPhone. Select File>Export Bitmap. Make sure the Selection tab is selected and that the entire image is selected. Click on the Browse button. The browse button brings up another dialog where you select the directory and enter a filename. There is a save button on this dialog, but don't be fooled. This does not save the file. It really behaves like an Ok button, so go ahead and click it. Now you can actually save the file by hitting the Export button. Copy the resulting .png file into your XCode project, and use it as described in the article mentioned above. I hope this was clear and helpful.

Tab Bar Icons (part 2)

In part 1 of this article I talked about general guidelines for the icons in a tab bar view. In this part, I will go into specifics as to how to actually create tab bar icons. One thing I noticed is there is little documentation or help out there on the Web regarding tab bar icons, so hopefully this information will be beneficial. Since I wrote part 1, I have found that the Apple documentation may be incorrect when it states that the icons should be 30x30 points. By making icons exactly that size, I found the icons were too big and they were truncated. I have since changed over to icons the size of 30x30 pixels and that seems to work well. In fact, the iPhone Human Interface Guidelines does specify "about" 30x30 pixels. There definitely is extra space to grow, but 30x30 pixels will be my starting point and only increase in size if I need the extra space. As a reminder, we're looking to create these type of icons:

1. PNG
2. 30x30 pixels
3. no color, as alpha values determine the image and shading
4. transparent background

Drawing without color is basically impossible, so I use black & white. Even the black and white colors are thrown out since the tab bar just uses the alpha channel data. By using black and white, it allows me to draw without fussing with colors. One important thing to realize is that tab bar icons are inverted. Things that you draw black come out white; things that you draw white are black. If you're old enough to remember film negatives, it is the same concept. You might be tempted to make your icons already inverted so that they look "normal" in the tab bar, but I believe this would be a mistake. Judging by the Apple application tab bar icons (You Tube and iPod), it is expected for the icons to be negatives. Another important point is that when you draw a black line, you are not applying a black color on top a white canvas. Drawing with alpha channels is a bit of a paradigm shift. Think of this way: you have a black canvas. You draw on this canvas using white paint. If you use really thick paint (a high alpha value), then this will show as bright white. If you thin your paint (a low alpha value), then some of the black from the background will bleed through, making is less bright and more gray. This is exactly what an alpha value is: it is the degree of transparency. A low alpha value means it is completely transparent. Using an alpha value of 0 means none of the white shows. As you increase the alpha value, the white color becomes less and less transparent, thus becoming brighter. When the alpha value is at its max of 255, it is completely opaque and you cannot see through the paint at all. Thus it shows up as white. Hopefully you aren't totally confused by now! An example will help demonstrate some of these concepts. Let's say we want to create a typical "documents" icon, three pages of paper stacked on one another. The top page could have some super tiny text on it. A "normal" icon for this would look like this:

When this is displayed in the tab bar, it looks like this:

See how this is a negative of our original icon? Everywhere you see white means those lines have an alpha value of 255. If this negative effect drives you crazy, you probably could draw using white paint on a black background, and then remove the background just before exporting the image. Again, the black and white colors are meaningless here; you could use purple and pink if you wish. It is the alpha values that are important, so make sure your white paint (or pink) has a high alpha value. So, how do we make such an icon? Icons can be created with numerous tools, but I will focus on one that I feel is best suited for this task, and the price is right (free). Inkscape is a Windows, Linux, and Mac OS vector graphics editor. It is freely available and can be found on the web here: Inkscape homepage. If you are installing Inkscape on Leopard, you may have a problem with it hanging while caching fonts. This is a bug that is easily fixed by going into the terminal and typing this:

$ mkdir ~/.fontconfig

After this, it should start normally. I didn't experience this when I installed version 0.46, so this may be fixed already. When you fire up Inkscape, you see a blank canvas that looks like this:

Edit the properties of this to get what we need. Select the menu File>Document properties... Set the size in the "Custom size" box. Make sure the units is "px" (pixels) and the width and height both to 30. You might also want to disable snapping, which I find annoying when trying to position drawings exactly where I want them. This is the "Enable snapping" checkbox on the snap tab. Close the properties window. Now, your canvas is probably really small, so select the menu option View>Zoom>Page to zoom the canvas to fit the window. To get into black and white mode, select grayscale from the color palette on the bottom. You can bring up the color palette window by clicking on the little triangle I circled in red in the lower right of the picture above. Inkscape automatically has a transparent background, so there is nothing more you need to do there. The area inside the gray border is your canvas. Even though this is white, remember it will be black on the tab bar. So the first thing we want to do is create the top page. Choose the "rectangle and square" tool on the left tool bar, or hit f4. Click where you want the top left corner and drag. Put the rectangle a little low and to the left to leave room for the other pages. We can center everything later. Once you have your rectangle, we need to fix it up. Select menu item Object>Fill and Stroke The fill is what is inside the object, and the stroke is the outline around the edge. What we want is a stroke with a high alpha (255) so that the border of the page shows as white, but the fill should be black, meaning an alpha of 0. The diagram below shows setting the fill alpha to 0:

Alpha values are the A at the bottom of the RGB tab. At the far left of the alpha scale it shows a checkerboard pattern. This indicates transparency. As you go higher, the checkerboard disappears and black replaces it. You could also hit the "X" button to remove the fill altogether, which will result in a transparent fill. Now we show the properties for the stroke paint. We want the stroke to have a high alpha value so it looks white in the tab bar:

You can also go to the "Stroke style" tab and play around with the line thickness and line pattern. Now we need to put pages in the back. You might be thinking that since this editor can do layers, you can simply copy the top page, shift it over some, and then put that layer underneath. Well, that won't work (at least I don't know how to make it work). Because the top page has a transparent fill (alpha of 0), the border of the bottom page shows through. What you end up with is this:

This is not what we want. Here lies a problem with using alpha values. It makes it very difficult to layer objects. It's best to think of creating a "flat" picture. All impressions of depth are fake. So instead of layering another page below the first one, we cheat and just draw the outline of the page edges next to the top page. When you're working with icons, it's also best to turn the grid on, which makes drawing lines easier. View>Grid. Use the Bezier curve tool to draw straight lines. Click once to select the starting point and move your mouse (don't hold the mouse button down). When you want to change direction, click to set another point. Double click to create your final point. For the right angle shown below, it consists of:

1. click to start, then move mouse right
2. click to form angle, then move mouse down
3. double click to end

Draw the third page the same way. Or to make it easier, duplicate the second one via ctrl-D, then drag the third one into place:

I will leave the "text" on the top page as an exercise to the reader. (Hint: use the bezier curve tool to draw lines, then adjust the stroke style of each line to be dotted.) Let's save it and try it out. To save as a PNG file, it is a bit non-intuitive: File>Export bitmap... select "Page" for the Export area select "Browse" button and choose location to put file. Find folder and type in filename. Inkscape will provide the .png extension for you. Hit "Save" This doesn't actually "Save" the file. You then need to hit "Export" button What you have is an icon that looks like this:

When I insert this into my tab bar, I get this result:

Notice how the large icon doesn't look like much, but when it is shrunk down to icon size, it doesn't look too bad. You even can see the 3-D effect that is not apparent in the full-size version. This is due to the loss of detail when it gets smaller, and your eyes/brain fill in the gaps. Think of it as the "Monet affect", where his paintings just look like a bunch of dots up close, but as you step back, you lose detail and the picture morphs into something beautiful. To help you visualize your icon as you are drawing your image, Inkscape has an icon preview mode which shows your current drawing in various icon sizes. Select menu View>Icon Preview... to bring up that window. That should be a good start to get you going on creating your own tab bar icons. I strongly urge you to learn more about Inkscape; it is a very powerful tool and can also handle all your other icon needs. Good luck and create something beautiful!