when I'm working on websites or when I'm
working on any kind of graphic projects
quite often I request a vector image
from my client and the client may say oh
well we don't have such a thing or even
better yet what the heck is a vector
image right so so maybe that's the
question I have to answer first so a
raster image or a flattened image like a
JPEG or a painting or bitmap is it's
what's called a rasterized image so that
image is set to the dimensions that the
creator had saved it as so let's say a
video is 1920 by 1080 so if you have a
screenshot from that video that screen
shot is going to be 1920 by 1080 now you
can scale that down and it's gonna look
great you can shrink it and it's gonna
look fantastic however if you ever tried
to make it bigger so let's say you
wanted to fit it on a 4k screen well now
what you're doing is you're taking that
1080 piece screenshot and you're
stretching it and well how does a
computer stretch an image well it
recreates all the pixels it stretches
them and each pixel is stretched so
eventually when you get big enough
you're gonna get distortion you're gonna
get blurriness and this happens when you
take a logo it's a perfect example when
you take a little logo from a website
and you try to print it on a billboard
well that's not gonna look good and
somebody with some quality control is
gonna tell you don't do that we need a
vector image well what is the vector
image how can I get a vector image I
don't have one okay so then myself as a
graphic eye I'm not a graphic designer
but I'll use that term loosely in that
I'll take your graphics and I'll be
quality control and I'll make sure that
it's ready for you for your billboard
what can I do to help a lot of times you
have access to those graphics as raster
images but they're not vector so again
it's a logo if I scale it up if I make
that little logo that's meant for a
website and scale it up to a billboard
it's gonna get all grainy it's gonna get
blurry it's gonna get those like blocky
pixels it's gonna look terrible in the
end so you want to avoid that at all
costs vector is where it's at vector
images are basically the difference is
instead of a rendered image that has the
pixels all kind of saved on that canvas
it's a text file that directs well
here's a curve okay so if this is a
curve that curve is gonna be the same
either this big at that or this big at
that
that's what vector is it's gonna allow
you to scale it up and the curve is
gonna stay the same that the image is
gonna look just as good if you print it
on a 500 foot billboard versus and I
don't know if such a thing exists but if
it does you could print it with a vector
if you took a raster image and did that
it would be horrible but it often comes
up in my industry and and perhaps you've
encountered this where it's like I don't
have a vector so what am I gonna do so
today we're looking at how to use Linux
and free software in order to convert a
raster image into a vector now there are
online tools that allow you to do this
that's cool but if you ever look at the
source code you're gonna realize that
those online tools that do this for free
all they're doing is quite often not
necessarily all they always and it's not
always the case but quite often those
free tools are taking that raster image
and they're putting it in a vector and
then they're embedding the raster image
into a vector file so it's still raster
instead what we want to do is we want to
take that image and we want to trace
around all of the curves so if there's a
letter S
I want to trace around that letter s so
that when I scale it up it's going to
look absolutely perfect well how do I do
that that sounds like a lot of work
because we're thinking in raster terms
right we're thinking in the GNU image
manipulation program or Photoshop and
how we'd have to trace around everything
and it would just be absolutely brutal
but Linux makes it a lot easier so let's
jump into my terminal I'm going to bring
up my computer here and all we need is a
simple program which I'm going to
install first but then we're gonna grab
a logo off of the web so I'm gonna
become root so on Linux Mint it's sudo
su or su do su for those purists and
enter your password now that I'm the
super user so I'm the root user now I
can type apt update and that's gonna
grab my latest repository information
from the web so these are the online
available Linux applications and I'm
gonna go apt install and there's a
really simple command here p.o trace
that's gonna grab a program called I
don't know if it's called Poe trace or
Pio trace we'll call it Poe trace and
I've said yes now that is installed so
if I type Poe trace - - help I should
get a help dialog there that's fantastic
alright so we've got it installed now
let's jump on the web so I'm gonna get
on here and let's actually you know
let's let's grab the category 5 dot TV
logo let's see how that's gonna work so
there it is it's on the web and if I
right-click on it and go open image and
new tab let's click on that and there's
my image wow that's really really tiny I
don't know how well that's gonna scale
you probably you know that makes me
think about the initial quality control
as we're doing this we want to try to
get the biggest image we can we want to
try to get it as something that has an
alpha layer like a pin for example that
would be perfect and we want to make
sure that it's as clear as possible if
it's got did there
or a drop shadow behind it it's not
going to render well as a vector because
vectors are completely different than a
raster image they're not colorized but
they can be colorized on the like when
you display them so you can say okay
well that part is going to be this
Pantone and that part is going to be
this Pantone but it's a lot different
because it's not saving it as the same
raster
image so what I might want to do with my
category 5 TV network logo that you see
there on my screen is I might want to do
something like grab the master image
that one looks like it's got some drop
shadowing going and I could probably go
to wiki dot category-five dot TV and on
my wiki I could find branding and go to
the category 5 branding and I can grab
one of these full-scale images so maybe
something a little more like this would
be to my liking so at the bottom here
I've got a word mark file and you can do
that by you know even just getting on to
Google Images or something and finding a
larger image for the images that you're
looking for so something like that will
look pretty good but notice that this is
actually a ping file yeah it scales well
but it's a ping so let's save it I'm
going to throw that on my desktop and
it's called word mark underscore light
dot ping so you can see it right there
so there it is so it's a raster image
yes I happen to have one that's seventy
four forty four by two one eight seven
pixels it's gonna do really really well
regardless it's a giant image but what
if you've got something else like let's
go on to Google Images
and just do a quick search for I'm gonna
do a search for logo and let's see what
we can come up with all right we got
Burger King we got McDonald's we got
IKEA let's grab the IKEA logo we have no
rights to use that but this is for the
sake of the demonstration so fair use
says hey we're showing you how to do
this there we go so we've got two logos
on my desktop we've got the category 5
TV logo and we've got the IKEA logo
sound good so with this program
installed so I've got PO tres installed
and now I'm gonna go to my desktop and
look at the images that I have there and
both of those are ping images now one of
the things with PO Trace that we need to
keep in mind is that PO trays only
supports bitmap images so for the sake
of the demonstration and just for the
ease of use and for familiarity I want
to use BMP files so back on my computer
I'm going to bring up the GNU image
manipulation program remember I'm doing
this all from Linux Linux is a free
operating system the GNU image
manipulation program is a free image
editor everything that I'm doing here is
available absolutely free to anyone who
wants to do this if you're on Windows
and saying oh but how do I do this on
Windows you know what you can install
Linux and that's one way that you can
achieve this all right so I'm going to
export as so I've got the category 5 TV
logo I'm going to export this as a
bitmap so I'm just gonna change the
extension B M P and hit enter now it's
going to ask me a couple of things here
it's going to say ok compatibility
options let's open that and make sure
that this is not checked do not write
color space information now we
absolutely need color space information
that's a requirement of PO trace in
Advanced Options we can see 16-bit
24-bit and 32-bit the default is 32-bit
a RGB that stands for alpha red green
blue now we do want RGB but we
do not want 32-bit because PO Trace is
probably gonna have problems with that
instead we're gonna go with 24-bit RGB
so I'm going to click on that and now
RGB 24-bit is selected and i'm gonna
click export so now on my desktop i
should have another file here called
word mark light BMP and when i
double-click on that it is my logo look
at that
it's still a raster image if i if i
scale that too much i'm gonna start
losing quality i wonder if i can
actually show you that you can see that
if i zoom way in do you see those
pixelated edges see how grainy that is
and how blocky that is that's a raster
image because it saved each and every
pixel so instead we're going to create a
vector based on that file remember the
first step is that I do need that bitmap
file so whether it's a ping source or a
JPEG or whatever it happens to be you
need to convert it first to a bitmap and
then Poe trace will be able to work with
it so now I'm going to type Poe trace
and there's a couple of things now you
can do - - help to learn more see how
this works and what you want to do you
can kind of scroll up here and see what
kind of options are available to you but
I'm gonna tell you what I think is gonna
work just fine for us and we'll see here
live on the air if this is gonna work
I'm gonna do - s which means I'm gonna
save this as an SVG vector image then
I'm gonna say - group and - group is of
is an SVG option and what that does is
it groups related paths together so it's
gonna merge all those into a single
basically a vector like traversal point
I don't know the technical terms but
rather than having a whole bunch of
separate things in your SVG file it's
gonna merge those together so let's
group those together keep things nice
and clean now I want to tell it my
output I'm gonna call this logo dot SVG
SVG being a scalable vector format and
then the next thing that
can do this is optional but I'm gonna do
- - tight and what - - tight does is it
if there's a lot of white space around
your logo that you're working with it's
gonna bring that in it's gonna basically
auto crop that vector for you so that
you don't have a bunch of white space
from a vector perspective I think that's
a good idea and then the next thing is
my input file so that file was called
word mark light dot BMP now I'm just
gonna hit enter and as soon as I hit
enter if everything Oh what did I do
it says PO trace invalid option - - zero
oh why did I push zero that was supposed
to be an O for output there you go so
remember - oh not - the arrow enter and
did you see how quickly that popped up a
logo dot SVG file on my desktop so if I
double click on that file now you can
see category five and it's stripped away
the green so that's a problem for me but
this is in fact a vector so why did it
strip away the green well it's grayscale
right so maybe I can work with that I
can look at the options that are
available to me let's see if gray
scaling it would do some kind of
difference so looking at our output
options here let's get a closer look and
see what kind of options we have as far
as the colorization goes we've got
resolution scale stretch rotate margin
left margin bottom margin page size all
these things Oh - color set foreground
color fill color opaque but if you're if
you're not sure there are ways to do it
there are ways to have it dither for you
but there's something that we can do
here so remember we created that bitmap
ourselves right and remember that what a
victor is is basically the outlines of
this file so let's export that again
let's create a new export before we do
that I'm gonna go image mode grayscale
and then image mode RGB again so I've
just gray scaled it let's see if that's
gonna do it for us
there's still a lot of white there I'm
gonna overwrite that file set the same
settings I want to be 24-bit and export
that all right I'm just gonna minimize
that and see what happens here so let's
poet race that again and see if that's
made any difference and it hasn't so our
color is causing a problem with this
particular vector because it's trying to
get those edges and it's seen the black
but it's not seeing the green so how can
I fix that and it's not seeing the white
either it's seen that as like a
background color so back in the GNU
image manipulation program I can turn on
alpha hold so this is locked the Alpha
Channel and then choose black and right
click and go edit fill with foreground
color and so I've created that as a
completely black image now I can go file
export as word mark light dot BMP export
and replace set my settings and export
so now I've got an image that's a bitmap
that is all black so now if I run that
command again you don't have to be
afraid to experiment and try things out
that is the actual vector so this is the
logo SVG this is the logo dot BMP so
with the logo dot BMP
I'm gonna hit 1 and then I'm gonna hit +
1 - can i zoom in one - ctrl + 1 2 3 4 5
and then I'm going to hit I'm going to
come over here so this is the bitmap you
see those edges how can i awful those
are 1 2 3 4 5 see that jagged edges
right so let's do the same thing let's
go back to our SVG file that we've
output
and let's zoom into that and let's go
zoom in a whole bunch of times and move
over here notice the background has gone
to see how clean that edges because now
we're working with a vector file I've
zoomed in a hundred fifteen hundred
times and you can and it's really really
hard to scroll because I'm scaled in so
close but now okay I'm zoomed in two
thousand times which is the absolute
maximum and you can see that that edge
has absolutely no jagged edges
whatsoever so I can scale that up too no
matter what I want it to be and it's not
going to be jagged edge if I open that
with the GNU image manipulation program
now it's an SVG file so what is it
saying hey this is a render scalable
vector graphic this is the width and
height and what do you want to do well
let's make it a ridiculous amount let's
make it thirty thousand pixels wide you
think this is gonna crash my computer
let's hit OK it might crash my computer
that's ridiculously high res there we go
I'm gonna view it at one times and look
at that see those edges that is actually
one of the letters in our logo they're
absolutely perfect no jagged edge
because this is legitimately a vector
and I mentioned there that some of these
online tools that do this for free are
gonna cause you to have like a
rasterized image within a vector that's
not gonna scale up like that
so let's actually see how we can
determine that so if i open with and
let's actually open our SVG file with a
text editor and i can see that those SVG
paths have been traced by PO trace so
these are actually the paths of the
vector now what you'll see if it's not
vector if it's just like a fake vector
is that you'll see that it has like an
embed with like some pain data well this
is a true vector so there you have it
and I mentioned about this IKEA logo so
let's actually see what happens here
with the IKEA logo because I want to see
I want you to know that this is not
something that I'm just pretending I'm
gonna export that one and I'm gonna save
that on my desktop as dot what dot BMP
enter compatibility options make sure
that the color space information is
saved and you notice I'm trying to click
on Advanced Options and it's not letting
me do that well why is that okay
something wrong here if we cancel out
one of the things I can see about this
image is that this particular image is
indexed color do you remember back when
I was working on the category 5 logo I
had to switch back to RGB well if I
right click on the image and go image
mode you can see that it is selected as
indexed let's change that to RGB now
that it's RGB I can export as a bitmap
so export as change it to BMP and now
look at that I've got my Advanced
Options back and I can click on 24 bits
which was the default for this logo make
sure that the color space information is
saved and hit export so now on my
desktop I've got a nice little image
file a duplicate it looks like a
duplicate but this one is a bitmap so
now back in my terminal let's try that
one so I'm just gonna press the up arrow
on my Linux keyboard and remove the
source image from the last command and
instead change that to IKEA underscore
20:19 logo dot BMP and hit enter and
instantly I see a new IKEA oh no it
saved as logo SVG because of the - Oh
command let's see what that looks like
tada
so that's a vector of the IKEA logo well
that's not exactly what I would want
remember vector is not saving the color
information it's saving the paths right
the color information is going to be
separate that's something that you're
gonna provide to your graphic designer
or maybe your logo doesn't have a whole
lot but watch this so if I do that
command again now I'm going to add to
that command I don't know if I can do it
at the
but I'm gonna type - - invert and now
that I've typed - - invert and I open
that image again look at the difference
its inverted that logo for me and now I
have a perfect vector that looks like
so again if I open that in the GNU image
manipulation program and I'm only doing
that because this is a raster program
but I want you to see that this is
indeed a vector image now if I take that
and I make it fifty thousand pixels wide
eighteen thousand seven hundred eight
pixels high it says I don't have enough
memory for that let's try a little bit
smaller open with GNU image manipulation
program you see it is vector
let's try ten thousand pixels wide 3742
pixels high there we go alright hit 1
and you can see those edges are flawless
well how's the round edge look let's
jump up look at that my friends
absolutely beautiful there you have it
so that is one way that we can actually
very very quickly convert a ping to a
bitmap make sure that it's grayscale or
that the colors are going to convert
properly into a vector and then actually
use a free tool that's available through
our repositories I used apt - I used apt
install pote Reis you can use app - get
install pote race or you can use yum
install PO tres depending on your
distribution i'm on linux mint and so
apt install po trace got me there and as
long as I've got a bitmap image that's
going to be compatible with it I can
convert that to a vector image very very
quickly I've done it before I've
manually retraced images in order to
create a vector and it's a brutal
process you saw it live how long did
that take we did it let me know below
comment below how that has helped you as
far as your logo creation process
converting images to vector and now you
can take that
image and scale it up as big as you want
it it doesn't matter if you want to
print that on the 500 foot wide
billboard it's gonna work for it it's
going to look fantastic
[Music]