Inkscape Icon Tutorials

7/31/2019 Inkscape Icon Tutorials

1/10

(C)2011, WhiZTiM

1

This Tutorial will show you how to create a Save icon in about 510 minutes!

If you are a Programmer, you could use Inkscape to quickly and professionally create icons for your

Programs, either as a menu icon, Window Icon, or Desktop/User Icon.

If you are interested In design, you could also create icons for themes and more just about anything

vector.

NB: Im a Programmer (C++), not an Expert in Design. but at least I know elements and Concepts of

Design what we shall learn is very much simple but professional.

TIP: There are other ways to do most of these things one thing I suggest is to know the plugins you

have and their capability. This really helps a lot in any case you want to create something you dont

always have to build everything from scratch. Thats why other commercial Soware try to give you

ease and exibility. Inkscape does very much.

OK LETS GET INTO BUSINESS!

At the me of Publishing, Im using the recent Portable Version ofInkscape

0.48 from PortableApps.com

Inkscape is cranked up.

Sketchy-Graphix

Mini Tutorial

For: Beginners of Inkscape and Icon and Logo want to be Creators/Designers

Version 0.1 (C)MAY 2011
http://www.portableapps.com/http://www.portableapps.com/http://www.portableapps.com/


2/10

(C)2011, WhiZTiM

2

One Thing I suggest is to Learn to use Shortcuts I will Designate Menus in Bold and Arrows e.g

File->Save As (Ctrl + Sht + S);

PART 1: SAVE | SAVE AS icon

We are going to use grid lines for snapping and visual accuracy.

View->Grid Shi+3 or (#)

Aer turning it on, you should see some grid lines.

*Next using the Rectangle Tool (the tool pane by your le) or Hit |F4|

draw a rectangle like this dont worry, your color may be dierent from mine we can work on that

later. You can zoom your Workspace using the |+ | and| -| keys

Use these Rounding Handles to make the rectangles edge curve look like mine.

Hold Ctrl (For Size Constraint) and drag only one of the two Handles ll you are sased.

Next, you click The Fill and Stroke Editof Pane or (Ctrl+Shi+F) or |F12|.

A Pane should appear Normally docked to the le of Inkscape Window.


3/10

(C)2011, WhiZTiM

3

Type this Value b1bc64f into Yours

In the RGBA Box

And Opacity at 57

Next We go to the Stroke Paint tab, click the Flat ll

This kind of Icon

Use RGBA of000000f.. Or any color of your choice

Next, We go to the Stroke Style tab, set the width to 6.000

You can experiment with other things there...

Using the Selecon tool |F1| or |Space Bar|,

click on the Image and Press Ctrl+D or

Edit->Duplicate.

Go back to the Rectangle Tool |F4| or |R|.

Move The Edge Rounding Handles to the vertex

so that your Box has sharp ends

Next, Press |F1|,

Next, Press |Page Down|, to move the Layer be-

low.

Next, Set the Opacity (in the Fill and Stroke) to

about 19.0. You should have this. ->>

Remember to Save your Work!

I saved mine as Save.svg using Inkscape SVG

format and Titled it as Save Icon.


4/10

(C)2011, WhiZTiM

4

Next, we select all Edit->Select All or Ctrl+A .

Next, Duplicate Edit->Duplicate or Ctrl+A

Zoom out of your Workspace |-|, With the Selecon tool, Move the Box (Duplicated) below

//This step is not too necessary but.

Press Ctrl+G or Object->Group

The Status Barshould read like this

Using the Top Resize Handle, resize the Box to a smaller Rectangle and drag below the Original Box

Next, Ungroup the Object . Object->Ungroup or Ctrl+Shi+G. Click an empty area the click the center of the

Smaller Box

REMEMBER: Always zoom In and Out using |-| and |+| keys for details!

Set the Stroke Width to 6.000

Now Tweak the Rounding Handle to the image show below or to your Sasfacon


5/10

(C)2011, WhiZTiM

5

Now, Use the Ellipse tool, While holding Ctrl + Shi Click and Drag on the center of the Big Box ll you get a

nice Circle almost lling the width of the box Then Tweak the Colors and Stroke Paint and Stroke width

to your Sasfacon.

Duplicate your Tweaked Circle. And Resize it smaller while holding down Ctrl + Shi. Then Tweak again

Mine is .below


6/10

(C)2011, WhiZTiM

6

Remember to Save your Work!

Mine Crashed!

Now, Press Shi+F6 or |B| The Bezier / Straight Line tool and draw an Arrow like this

Next Click on the Gradient Tool or

Press G.

Draw a Gradient from the lower to

the upper part of the Arrow.

Edit the gradient in the Fill and

Stroke pane.

There are two stops by default.

Click on the drop down box and edit one of the stops

Edit the color the way you like

If you want mulple gradient, click on Add stop and you can

edit the oset If youve Used any of Adobe Design suites be-

fore, you may or may not enjoy this one.. Here is Mine below


7/10

(C)2011, WhiZTiM

7

And Finally, Aer Wrapping Up. I Added Some 2 Circles, and a Line.

Some blur and the rest The good thins is that aer knowing it, You can make a simply but faily realisc

one in FreeCAD, Blender, or Proprietary etc.

Here Are Some Final Screenshots

As we can all see, Its a bit Beauful but

some irregularies Can you spot one?

The Original Base Box is sll Poping out at

the side of the Rectangles giving it an Aw-

fully bad avor

Think of what you can do with those edges

without deleng them if nothing, delete to

your wish. But there is

Common Give them a curve, expand and

make edges

Another is: for the Color combinaon of the

last one, Rounded edge is not good for it

Fix IT!

If you zoom out or resize the Picture to less than 32pixels or

16pixels. You will find that The first and Second Icons are

better, preferably the First.. Why? Because of color Match.


8/10

(C)2011, WhiZTiM

8

Using the Bezier Curve tool, Click a point in the Circle then Click and Drag at the second point, The drag-

ging will Set the tangent Line

Do not Worry about the shape Yet.

Use the Text tool and Type any name you

wish on any Font. But make it reasonable

Using Selecon tool, and holding down

|Shi|, Select the Name and your Path.

Click the Menu item Text->Put on Path.

It should look like below

Next, Using the Node editor, |F2|

or |N|

Drag any or all three nodes (tangent

inclusive)

ll you get it in track like this ->

Like I said in the page before, you could use those straight line/sharp edged Rectangles to do some-

thing good.

Remember to always zoom In or Out for precise selecon but somemes, labeling your objects

helps in selecon you can label any object by Le-Clicking on it and Click on Object Properes

then change its ID to a reasonable ID you remember.

I zoomed in, selected the stray Rectangles and gave them both a good Edge Rounding.

Next, I increased the Opacity.

Oh! And for the spirals in the third image of the previous page, I created it using Spiral tool |F9| or

|I| changed the length with Node Editor |F2| or |N|.

Please dont worry if you are not geng this part, you can take a break and do something else

then come back the following morning if you are no in a haste to learn..

It took me days to learn how to compile a simple Hello WorldC++ program!


9/10

(C)2011, WhiZTiM

9

Well Here is One Professionally Looking Buon

Except that for a very small icon, much detail is not needed. This One already has quite some details

HERE IS MY FINAL TWEAK

Ok, Let me explain a bit of what I did.

First, Leaving the Grid Lines on |#|, I changed the Fill of the Arrow to Radial Gradient and Made Polished Cyan

Inner, then Red the Outer gradient.

I used the node Editor, |F1| or |N|, Clicked an empty space in the Arrow Some nodes will appear. One like L-

Shape, and one on each end of the Arrow.

The ones on the ends of the arrow was dragged to be on the same vercal plane as the arrow width.

On the Path Line looking like L-Shape, having 3 nodes. The Vercal was dragged to a shorter Length (thereby

making the Inner gradient look like a aened ellipse.

Using the Selecon tool, I dragged a selecon over the front of the Hard disk (Image). Then grouped it (Ctrl+G) and

holding Ctrl, moved it up a bit into the bigger rectangle. Then I Ungrouped it

Selected the Base Rectangle of the front and increased its Opacity to 100.


10/10

(C)2011, WhiZTiM 10

In Our Next Tutorial, we will try and Create a Folder Icon

Something beer than my rst dra below..

TIP: Make sure you have a color theme throughout your design.. For tutorial, I dont have any.

Please Give Me any Lile feedback.

Comments, Suggesons, Mistakes, Cricisms, and Praises are Welcome..

[email protected] or [email protected]

Mind you, Im just 17 yo!

This is my rst me of Contribung to the Open Source Community

Inkscape Icon Tutorials

Documents

Transcript of Inkscape Icon Tutorials