Have you ever wondered how to create awesome UI graphics for your mobile game or app?
Do you know the main differences between Vector vs Raster artwork?
Not a Graphic Designer? No worries… keep reading and I’ll show you a few tricks of the trade for quickly creating great looking vector-based graphics.
In the posts on Creating a UI Button in Corona SDK (Part 1 and Part 2), we used a custom-made button image. In this post I’ll show you how to easily re-create that custom-made button, setting the stage so that you can go on to create more complex and beautiful looking graphics for your own mobile apps and games!
Simple custom UI elements like buttons and icons can be easily created in your favourite Vector-based program. When I started out back in 2013, I had absolutely no formal graphic design experience or training. But after learning the ropes with the free and open source program Inkscape™, I can now quickly and efficiently create custom-made graphics for rapid prototyping in my own apps and games.
I want to show you how you can do the same without having to constantly fork out money to a professional graphic designer for every single design task during development.
And hey, even if you don’t want to do all the graphic design for your mobile app or game, keep reading and you’ll gain an appreciation for what is involved… so you can better estimate how much time and how much money a particular graphic design task should be.
In this tutorial, I will be using my personal favourite Inkscape™, but you can follow along by implementing the general principles in any other Vector-based graphics software such as Adobe Illustrator or Corel Draw.
Vector vs. Raster: A Personal Creation Workflow
There are several different work flows you could take when creating art and graphics for your game or app. What are the pros and cons when comparing Vector vs Raster art?
Whether you start in a Raster-based program like Photoshop or begin in a Vector-based program like Illustrator, for most SDK’s the actual file to be loaded into your game or app must be a Raster-based file (bitmap). In two of my favourite tools, Corona SDK and iOS/xCode, the API for both of these platforms support only Raster-based files.
For the API call to create an image object within Corona SDK, the documentation states that the calls to display.newImageRect() or display.newImage() support both the PNG and JPG formats. The are Raster-based (bitmap) formats.
Similarly, when developing natively in iOS with xCode, the documentation for the API call to UIImage with iOS states that the following file formats are supported –
So even if you start off in a Vector-based program like Inkscape or Illustrator… you will need to export your vector graphics to a raster (bitmap) format to load into your game or app.
So you might ask… well why wouldn’t you just stick with a Raster-based format from the beginning?
The workflow that I will describe is first starting out in a Vector-based program like Inkscape, and then exporting the graphic to the PNG (bitmap) format for loading in your game or app.
But first, what exactly is all this Vector vs Raster business?
What is the difference between Vector vs Raster and what are the tools available with each option?
Vector vs. Raster: The Differences and Options
Vector-based images and graphics are made up of basic geometric primitives such as points, lines and curves. Behind the scenes there are mathematical relationships that describe how the shapes exist and relate to each other in the image space. One major advantage of creating graphics in the vector format is that they can be scaled up or down with absolutely no loss in image quality. The major selling points that made me choose vector at the start of my workflow was –
- Ability to scale up or down without loss of quality (appropriately sized raster exports can be made easily for different resolution devices)
- I had some previous experience working with AutoCAD (also vector-based)
- I am not a trained graphic designer
The heavyweight options for vector-based drawing software include Adobe Illustrator (which you can get as part of a Creative Cloud membership) –
And my personal favourite which is both Free and Open Source, is Inkscape –
Raster-based images and graphics are made up of a grid of individual picture cells, also called pixels. Each pixel is assigned a specific colour value represented by a particular bit-depth (the higher the bit-depth the greater the range of colour variation that can be represented in the image). Raster images are resolution dependent so the workflow generally starts with creating the image in the largest resolution assumed to be required, the image can then be scaled down later as required.
The heavyweight options for raster-based drawing software include Adobe Photoshop (again.. which you can get as part of a Creative Cloud membership) –
A major Free and Open Source alternative, is GIMP –
Now you know the main differences between Vector vs Raster artwork along with a few of the major tools available for each technique.
As mentioned, next up I’ll show you my workflow to create simple art and graphics using the Free and Open Source vector-based software Inkscape.
Let’s get into it !
Create a game UI Button: Using Inkscape
If you haven’t installed Inkscape yet, head over to https://inkscape.org. Click on the “Download” menu item, second from the left in the menu. You can download the software for either Linux, Mac or Windows. The current stable version of Inkscape is 0.91 at the time of writing this post. Follow the instructions on how to install Inkscape for your particular O/S.
The native file drawing format in Inkscape is the SVG (Scalable Vector Graphics) which is an open XML-based W3C standard.
Open up Inkscape, go to File-> Document Properties, and set the size of the document page area to the intended size of your graphic. In this case, set the canvas area to 120 px wide and 120 px tall.
Next, use the Zoom to fit page button – (you can also Zoom dynamically by holding down CTRL + Mouse Scroll on Windows or CMD + Mouse Scroll on Mac)
First, select a default fill colour by clicking on any colour in the colour palette at the bottom of the window (not shown below) . Next, select the Circle icon in the left toolbar to create a circle, ellipse or arc. Here we’ll be creating a uniform circle so hold down CTRL + Left Mouse Button (CMD + Left Mouse Button on Mac) and drag away from your click at a 45 degree angle.
With the circle still selected, click the lock button and modify the size of the width, W to 120 px.
Next, position the 120 pixel diameter circle into the center of the content area by selecting the Align and Distribute icon. The Align and Distribute menu panel should appear (shown on right below), from the pull down list select Relative to: Page. Then click the alignment buttons for Center on Vertical Axis and Central on Horizontal Axis, as shown below.
Next, create a duplicate of the 120 px circle by going to the top menu and selecting Edit -> Duplicate (or just hit CTRL+D, or CMD+D on Mac). With the next circle selected, drag it slightly off the overlapping dark blue circle behind it. Select a new colour for the new circle. I chose Aqua below. With the second Aqua coloured circle selected, click on the Lock button and modify the width, W to be 113 px.
Select the first circle and click on the Fill and Stroke button. A new menu panel will appear (as shown in the right side below). With the Fill tab active, ensure the Flat colour box is selected and in the RGBA field enter in f44b00ff.
Then select the second (Aqua) circle, and within the Fill and Stroke menu panel ensure the Linear Gradient box is selected. Next, select the Edit button from the Linear Gradient menu to open up the Gradient Editor. There will be a pull-down box within the Gradient Editor, leave the first “Stop” select and enter in fb9e00ff for its RGBA field. Next, select the second “Stop” within the pull-down box in the Gradient Editor. In the RGBA field enter in f44f00ff.
Close the Gradient Editor, and double left click or select the Edit Path by Nodes tool.
Position the gradient transition bar so that it looks similar to that shown below. The transition bar has two nodes. The node with the square should be near the top of our circle, the node with the tiny circle should be near the bottom of our circle.
Using the Align and Distribute menu panel, position the 113 px circle in the center of the 120 px solid colour circle.
Next, Duplicate (CTRL+ D, or CMD + D on a Mac) the 113 px circle that we added the transition fill to. Move the new duplicate 113 px circle to the left of the main button image.
Create another Duplicate of the 113 px circle and select a solid colour to distinguish it from the previous (like blue). Select the new blue 113 px circle and hold down the SHIFT key, then drag the object arrows left/right and drag the object arrows up/down to create the oval shape similar to that below.
Position the blue oval on top of the extra 113 px circle similar to that shown below. Select the 113 px orange circle, then hold down the SHIFT key and select the blue oval. Both object should be selected as indicated by the dashed boxes around each object as shown below. From the top menu select Path -> Intersection and you will be left with remainder of the two overlapping objects.
Drag the remainder object (created using Intersection above) over top of the button. Select the colour White for its fill. Next open up the Align and Distribute menu panel. Select the 113 px circle in the middle of our button. Then, holding down the SHIFT key select the White remainder object. Both objects should be selected. From within the Align and Distribute menu panel, use the drop-down list to select Relative to: First selected. Then, select the buttons Center on Vertical Axis and Align Top Edges as shown below.
Select the White hemisphere created earlier and click on the Fill and Stroke button. From within the Fill and Stroke menu panel ensure the Linear Gradient box is selected as shown below. Change the Opacity for the object to 75 %.
Select the Edit Path by Nodes tool (on the left side menu bar). Position the gradient transition bar so that it looks similar to that shown below. Again, the transition bar has two nodes. The node with the square should be near the top right quadrant of our White hemisphere, the node with the tiny circle should be in the bottom left quadrant the bottom of our White hemisphere. See below.
Next we need to our arrow or chevron to go in the center of the button. From the left side bar, select the Create Rectangles and Squares button. Hold down CTRL + Left Mouse Button (CMD + Left Mouse Button on Mac) and drag away from your click at a 45 degree angle. With the square select as shown below, from the top menu select Path -> Object to Path.
Now that our square can been convert to a Path type Object, we can manipulate its nodes. Select the square and from the left menu bar select Edit Paths by Nodes. Holding down the SHIFT key, select the top left and right nodes of the square. With these select, click the button Join Selected Nodes from within the Node menu bar. The nodes should then merge at the midpoint creating a triangle, like that shown below the square in the image below.
Next, we want to change triangle to a chevron or delta-wing type object. To do this select the bottom left node of the triangle, then hold down the SHIFT key and select the bottom right node of the triangle. Select the Insert new nodes button from the node menu bar and you will see an additional node created at the midpoint.
Next, select only the node at the midpoint that we just created (at the bottom of the triangle). See below. Next, hold down the CTRL key and drag the node vertically upwards so that the arrow now looks like a chevron (or delta-wing) as shown below.
Open the Align and Distribute menu panel. Ensure the chevron (or delta-wing) is selected. From within the Align and Distribute menu panel, use the drop-down list to select Relative to: Page. Then, select the buttons Center on Vertical Axis and Center on Horizontal Axis as shown below. Select the Fill colour of the chevron (or delta-wing) to be White (ensure Opacity is back to 100% for this object).
Next, select all four of the objects (use CTRL + A or go to Edit -> Select All) and from the menu in the top select Group selected objects (or use CTRL + G).
Now the only thing left to do is export the button to a Raster-based (bitmap) format. Once we do that we can use it in our app or game as we did in the previous post on Creating a UI Button in Corona SDK (Part 1 and Part 2). The native bitmap export format within Inkscape is a PNG file.
Go to File -> Export Bitmap. This will open up the Export Bitmap window. Ensure the Page button is select, which should automatically tailor the bitmap size to the canvas area we set up initially to be 120 px by 120 px. In the Filename field, select an appropriate name and location to save the bitmap. Finally, click on the Export button in the bottom right corner of the window. See below.
You Did it !!
And that is it, you have created a UI button from scratch using Inkscape. Make sure you save your file (it will save as a SVG file). To create larger sizes for higher resolution devices you can now easily scale the entire graphic to whatever pixel size you desire and then export to a bitmap file as we did above.
Who said Programmers can’t create graphics right ?! (Okay… at least some simple stuff with primitive shapes, lines and nodes.) Here is the output file below. (Send me yours or a link to yours and I’ll feature it at the bottom of this blog post !) Happy Inkscape-ing!
So go ahead and experiment… and definitely check out all the fantastic resources for Free with Inkscape tutorials.
Looking for a good reference book on Inkscape? Check out – The Book of Inkscape: The Definitive Guide to the Free Graphics Editor
Don’t have time to Do-It-Yourself? Looking for top quality? If yes, then check out 99designs.com –
Don’t have time to Do-It-Yourself? Need a bare basement price? Try out a graphic designer over at Fiverr.com- Get things done!