Good Graphic design and an Introduction to Inkscape

Workshop Objectives:
1. To understand what graphic design actually is and learn some of the best practices
involved.
2. To understand enough of Inkscape to fuel your curiosity to master it or any other
image-editing software in the near future.
3. (Bonus, depends on you) To create your very own certificate for this workshop.

Contents
1. Introduction to Graphic Design
• Meaning of Graphics
• Meaning of Design
• Examples of Good Design
2. Introduction to Inkscape
• Interface Overview
• Important Concepts
3. Exercises
• Quote Poster
• Event Banner
• Drop Shadow Logo
• Event Poster
4. Tips and Tricks

Lets talk about Graphics
The term ‘Graphic’ is inter-changeable with the term ‘Image’. Period.
Graphic Editing = Image Editing

RASTER GRAPHIC/IMAGE
A raster image is made of up Pixels or Dots, each a different
color, arranged to display an image.

VECTOR GRAPHIC/IMAGE
A vector image is made up of Objects or Paths, each with a
mathematical formula (vector) that tells the path how it is
shaped and what color it is bordered with or filled by.

RASTER GRAPHIC/IMAGE
Raster images are capable of displaying a myriad of colors in a
single image and allow flexible color editing.
Raster images are primarily used with photos, which is why
Photoshop is a raster editing program.

VECTOR GRAPHIC/IMAGE
Vector images are scalable, so that the same image can be
designed once and resized infinitely for any size application –
from business card to billboard.

RASTER GRAPHIC FORMATS
Examples of Raster Image formats are PNG, JPEG, PSD, XCF,
BMP, TIFF

VECTOR GRAPHIC FORMATS
Examples of Vector Image formats are SVG, AI, EPS

RASTER GRAPHIC EDITING TOOLS
• Adobe Photoshop(PSD)
• Gimp(XCF)
• Picasa
• Irfanview
• Paint.NET
Raster editors are more suitable for retouching, photo processing, photorealistic illustrations and collage

VECTOR GRAPHIC EDITING TOOLS
• Adobe Illustrator(AI)
• Inkscape(SVG)
• CorelDraw
Vector editors are often better for page layout, typography, logos, sharp-edged artistic illustrations (e.g. cartoons,
clip art, complex geometric patterns), technical illustrations, diagramming and flowcharting

De•sign [dəzajn] is a
method of problem solving.
The simplest definition. Design is so many things, executed in many different
ways, but the function is always the same. Whether it’s blueprints, a clever UI, a
brochure, or a chair – design can help solve a visual or physical problem.

What are the different kinds of Design?

1. Product Design
Industrial designers create physical products designated
for mass-consumption by millions of people. Motorcycles,
iPods, toothbrushes, and nightstands are all designed by
industrial designers.
These people are masters of physical goods and
innovation within the constraints of production lines and
machines.

2. Interaction Design
Interaction designers, on the other hand, focus on digital
products and interactive software design. Some examples
include web apps like Facebook and Pinterest, mobile
apps like Tweetbot, and operating systems like OS X.
While graphic design is meant to be observed, interaction
design helps humans experience or manipulate software
or interface with screen-based hardware in order to
achieve specific goals.

3. Graphic/Visual Design
Graphic designers work with graphical images, whether
they be illustrations, typography, or images, and on a
variety of media including print and web.
Graphic design is typically rendered in 2D – printed on a
physical surface or displayed on a screen.

Million Dollar question:
So what is Good design?

You convey information by the way you arrange a design's
elements in relation to each other. This information is
understood immediately, if not consciously, by the people
viewing your designs.
Design is communication

RED BLUE GREEN YELLOW PURPLE
Does your brain hurt yet?

Mahatama Gandhi was Assassinated
Comic Sans
Mahatama Gandhi was Assassinated
Times New Roman
VS

Open house tonight! Party till you die!
Times New Roman
Open house tonight! Party till you die!
Comic Sans
VS

When you're creating a design, you want to eliminate these
conflicts between the automatically perceived meaning and
actual meaning.

1. Typography
Font-style, Font-size, Font-weight, Letter and Word spacing
2. Colors
Fill color, Stroke Color, Opacity, Blur
Two important factors in Graphic design

Not too
many fonts
Not too
many
colors

What is Graphic design?
The art or profession of visual communication that combines
images, words, and ideas to convey meaningful information to
an audience.

SVG
• SVG stands for Scalable Vector Graphics. It is recognized by W3C as
standard format for vector graphics.
• SVG is essentially a language, but it is a file format too, just like HTML.
• Just like HTML, SVG is also a markup language. As a matter of fact .svg
files can be opened and edited any any text editor.
• But editing SVG files in text-editors is highly inconvenient. This is why
we make use of GUI editors like Inkscape and Adobe Illustrator.

INKSCAPE
• Inkscape is an Open-Source, Cross-platform, Professional Vector Graphic Editing
software.
• Inkscape is 100% freeware and open-source.
• Supported by Windows, MAC and Linux Operating systems.
• One of the most popular graphic editing tools available today. Used by professionals in
multi-national enterprises to freelancers in start-ups.
• Has almost all the features of professional graphic editing softwares like Adobe
Photoshop, Adobe Illustrator, CorelDraw, Etc.

Now lets open up Inkscape
Bismillah :D
Click on the Icon

1. Document Properties(Ctrl + Shift + D)

2. Guides and Rulers
• The Rulers are graduated lines placed on top and left of the canvas. The first is called "horizontal" and the
second "vertical".
• Guides are user-defined 'magnetic' lines. Using Guides makes object alignment easy even with the mouse.
To use Guides, click and drag from the Rulers to the point where the Guide is to be inserted and release.
• Instead of using lots of Guides, it can be useful to activate Grids. Do this with the View > Grid menu or press
# (Shift + 3 ).

3. Important tools
• Selection Tool
• Rectangle Draw Tool
• Ellipse Draw Tool
• Create Text Tool
• Gradient Tool
• Other Not so useful Tools
Full Tools Box
Tool Control Bar. (Changes based on the tool selected)

4. Layers
• Layers are essentially transparent sheets used to organize content in the z-plain.
• In addition, layers can be locked and made invisible to ease editing of objects
within other layers of the document.
5. Groups
• Groups are used to organize objects temporarily in x-y plane.
• Sometimes several objects need to be manipulated together in a group rather
than separately.
• A group is treated as a single object, and for most operations it can be
manipulated as such.

6. Exporting
• Inkscape allows us to export and save files in multiple formats. PNG is the most
common format used to export images.
• Other formats that inkscape supports are compressed svg, eps(used for ebooks),
pdf, etc.

Exercise 1: You like inspirational
quotes?
Lets make a poster of your favorite one
:))))))))))))

Exercise 2: How about a nice banner
for your upcoming event?
You’re organizing one, aren’t you?
:))))))))))))

Exercise 3: How about a nice logo
for your future start-up?
The next Flipkart/Ola in the making?
:))))))))))))

Exercise 4: How about a nice poster
for your upcoming event?
Seriously, Adsophos is just around the corner. You’d wanna
be ready!
:))))))))))))

1. Focus on the design goals
• Focus on the design goals. Not on making something look good. Ask yourself:
Why am I doing this? What is this for? Who is my audience?
• Design has a lot of theory. Apply that theory to your designs. This comes with
practice and experience.
• Don’t just apply a fancy font for the sake of it. Think carefully before and tally
your design with your project goals.

2. Always take feedback
• Put that big ego of yours aside and learn to take feedback from your friends and
peers.
• Show initial prototypes of your design to your close friends and get their honest
opinions.
• Remember the more you fail, the more you improve. The faster you fail, the
faster you move towards your final design.

3. Simplicity is the key
• Forget sophistication. The more simple your project, the lesser the chances of
you running into the Stroop effect.
• Don’t use more than 2 fonts per design. Worst case scenario is to use 3.
Anything more than that is asking for all hell to break lose.
• Same thing for colors. Have a primary and secondary color. Enough.

1. Freepik.com
• Great resource for downloading free svg/ai graphics for your projects.

2. Unsplash.com
• Great resource for downloading free hd images for your projects.

3. dafont.com
• Great resource for downloading free fonts for your projects.

4. materialui.co
• Great resource for selecting Color combinations for your projects.

5. makerbook.net
• All in one resource. You’ll find everything.

Design a certificate for this workshop. Ensure it
has all the relevant logos and space for signature
of the branch counsellor and mentor. It must also
have relevant text such as award of certificate
statement, your printed name, etc. Doesn’t have
to be too fancy, anything simple will do.
Please Mail your designs with subject line exactly this: “Graphic Design Assignment”
Both SVG and PNG image to omar110894@gmail.com
Only participants who successfully submit their designs will receive certificates of
completion of the workshop. Last date of submission is 14th Feb 2016. Certificates
can be taken from room no 1115 on 17th Feb 2016.

Thanks a ton guys! Have fun! Go Graphic!

Good Graphic design and an Introduction to Inkscape

More Related Content

What's hot

Viewers also liked

Similar to Good Graphic design and an Introduction to Inkscape

Recently uploaded

In this document

Good Graphic design and an Introduction to Inkscape