Skip to content

Instantly share code, notes, and snippets.

@kirilkirkov
Created October 15, 2015 14:09
Show Gist options
  • Save kirilkirkov/0617098daca9dd28646c to your computer and use it in GitHub Desktop.
Save kirilkirkov/0617098daca9dd28646c to your computer and use it in GitHub Desktop.
Photoshop vs Illustrator: Raster vs Vector
Understanding the differences between Illustrator and Photoshop
can range from confusing to downright frustrating for those who are
new to graphics and image editing. Which application should you use
for your project? Should you use a combination of the two together, or
just stick with one? Having a household name as Photoshop does, many people
simply turn to Photoshop for all their work, but that may not be the best
choice for all your graphics work.
It really boils down to having an understanding not only of what you wish to achieve,
but also having a firm grasp on the key differences between Photoshop and Illustrator;
what are their strengths? Their weaknesses? And how can we use each to our advantage to
minimize our workload and work much more efficiently. Let's take a closer look.
Before we can compare Photoshop vs Illustrator, we must understand the difference between raster
and vector graphics. I'm sure you may have heard these terms before, but do you know what they mean?
### Raster and Photoshop
First off, a raster graphic (also sometimes called a bitmap graphic,
but not to be confused with the .bmp file format) is an image that's
comprised of tiny blocks of colour called pixels. Zoom in close enough on a
raster image, and it begins to pixelate, like a mosaic. Raster graphics are what we
call "resolution dependent" images. Essentially what that means is that quality is
always a concern. Without getting into a lengthy conversation about resolution and
re-sampling, let's just keep it simple for now and say that resizing your raster graphics is
where problems, sometimes major problems, arise.
Examples of raster-based images include photographs,
scans, digital paintings, website components like buttons
and header graphics, and any other image that's made up of a lot (like, millions) of colours. Raster-based
file formats include JPEG, GIF, PSD, PNG, and a few others.
So if there's a bunch of up front know-how, why even bother with raster graphics? Cuz they're cool! And this
is where Photoshop comes in. Photoshop is our raster image editor. This is where we'll be doing all our colour
correction on our photographs, touching things up, or creating special effects (like putting two heads
on your mother-in-law...I recall there's a menu command for that one). Conceptual artists, digital painters,
and comic book artists also turn to Photoshop for a lot of their work, too. As a web designer, I constantly use
Photoshop to help mock up layouts, create web interfaces, and develop a lot of graphical components for sites
I'm working on. As you can see, Photoshop is very flexible.
### Vector and Illustrator
Next, we have the world of vector graphics. Unlike raster graphics, vector images are "resolution independent,"
meaning you and I don't have to worry about quality, pixels, resolution, or re-sampling. Rather than being based
on pixels, vector graphics are based on mathematical lines and curves. Of course, this is where Illustrator
comes into play. And what I love so much about Illustrator is I can take something I've created, like a cartoon,
and I can scale it larger or smaller, and not give a second thought to quality. A vector graphic is always
top quality. Usually, but not always, vector graphics are images that are comprised of solid blocks of colour,
like a cartoon, a company logo, or a block of text. So who's making use of Illustrator? Graphic designers,
visual artists, apparel companies, and even technical illustrators. Vector-based file formats include AI, SVG,
and Flash's FLA and SWF.
So I hope this (albeit brief) discussion helps demystify the differences for raster vs vector;
and Photoshop vs Illustrator.
Before deciding on which app I want to go with, I take a moment and think about what it is
I want to achieve with the project at hand. That usually determines which app is the best for the job. Have fun!
@kirilkirkov
Copy link
Author

RASTER
ill_vs_ps1

File Formats: PNG, JPG, BMP, GIF

@kirilkirkov
Copy link
Author

VECTOR
ill_vs_ps2

File Formats: EPS, PDF, SVG, AI

@kirilkirkov
Copy link
Author

scr

SVG Bowser Support in IMG Tag. Copy from caniuse.com

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment