View
233
Download
0
Category
Preview:
Citation preview
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/7/31/2019 Inkscape Icon Tutorials
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.
7/31/2019 Inkscape Icon Tutorials
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.
7/31/2019 Inkscape Icon Tutorials
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
7/31/2019 Inkscape Icon Tutorials
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
7/31/2019 Inkscape Icon Tutorials
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/31/2019 Inkscape Icon Tutorials
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.
7/31/2019 Inkscape Icon Tutorials
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!
7/31/2019 Inkscape Icon Tutorials
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.
7/31/2019 Inkscape Icon Tutorials
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..
whizm@student.com or captainibro@gmail.com
Mind you, Im just 17 yo!
This is my rst me of Contribung to the Open Source Community
Recommended