Wednesday, June 08th

I never understood Illustrator. Photoshop was so much more natural to me. Why doesn't the little paint can fill my shape with a color? The answer to that question and all my frustrations was found in only a few articles of actual research. Once I understood the difference between vector graphics and raster graphics, I was hooked on SVG (Scalable Vector Graphics)! Vectors are scalable, small, and can now be dynamically manipulated by JavaScript. 

I don't have a copy of Adobe Creative Suite for Mac, nor do I have an interest in paying for Adobe Creative Cloud, which leaves me creating vectors with an open source project. Don't let that last sentence fool you into thinking I am moving down a step however. I am SO GLAD I found Inkscape and will be a forever-user--even if someone decides to buy my a lifetime subscription to Adobe CC.

Anyways, you wanted to learn how to make an app icon. This took me about ten minutes and looks like this:


Step One: Make a square with the square shape icon on your toolbar.


Step Two: Round the corners

Grab the little handle thing and drag it up and down to adjust your border radius.


Step Three: Change the color by clicking on the current fill color.


Step Four: Make a cool metallic background.

Choose the gradient icon. Click edit gradient. Click one of the nodes that appears on your drawing to change its color.

BIG TIP: Double-click anywhere on the gradient node path (the line between the nodes) to create a new node. For metallic appearances I follow a dark > light > dark > light > dark pattern.


Step Five: Add Text

Click on the font you'd like (I chose Helvetica, because that is what Massimo would have done.). Don't worry about the font-size. Simple CTRL+Drag the arrow to scale it up proportionally.

You'll want to learn how to align things in your drawings. So click this to align your text to your icon.

To use this fantastical Inkscape functionality, select one object that you want to center, then hold SHIFT and select the object you want to align it to. Finally, click the Center-Vertical and Center-Horizontal buttons:


Step Six: Add an inner shadow to your text for a cool effect.

At your top toolbar click Filters and then the option below.


Step Seven: Add a drop shadow to your icon.


Congrats!

Post a link to yours in the comments!

Subscribe

Subscribe