Photoshop, a bitmap program
Image Resolution Tools
and Techniques for Removing Backgrounds with Paint Sho...Draw
Dotted Lines With Phot...Alpha
Channel - Graphics Software GlossaryGraphics Software - StepBySteps
images (also known as raster images) are made up of pixels
in a grid.
Pixels are picture elements; tiny dots of
individual color that make up what you see on your screen.
All these tiny dots of color come together to
form the images you see.
The typical computer monitor has 72 or 96 pixels
per inch, depending on your monitor and screen settings.
Look at the
example of the eye and nose blown up to 1600%. At 100% the image looks like it
has smooth lines but at 1600% you can see the individual pixels. Each pixel has
a separate color that together forms the image.
Bitmap images are resolution dependent.
refers to the number of pixels in an
image and is usually stated as dpi
(dots per inch) or ppi
(pixels per inch).
(pixels per inch) refers to screen resolution,
(dots per inch) refers to print resolution,
LPI (lines per inch) refers to halftone
Often images are referred to as high resolution (hi-res) or
low resolution (low-res).
resolution would be an image intended for print, generally having 300 dots per inch or more.
resolution refers to images only intended for screen display, generally
having 100 pixels per inch or less.
When scanning in an image, creating a new image or working with a digital
image, you will need to know what your resolution is.
When creating a new document go to : File-new
OR shortcut control +N to input the resolution
When working with an existing digital image you
go to: Image-Image size to see the
Look at the examples below to see the input fields
for resolution in the Image size window
and the New Document window.
ex. Of Image size window………………...ex. of New document
for bitmap images that will be viewed on the web
Resolution for bitmap images viewed on the
computer screen are referred to as ppi
The bitmaps are displayed at standard screen
resolution of 72 or 96 ppi.
It doesn’t matter if you put a high number in
the resolution field, the screen will still display it at 72ppi or 96 ppi.
is why when we make web images the resolution is set to 72 or 96.
Make a new image in photoshop,
put in 200x200 pixels at 72 resolution.
Then make another new image and put in again
200x200 but this time put in 300 for resolution.
The image size looks the same but the difference is in the file size:
the larger resolution number adds to the file size, making it larger and slower
for the web!
Creating image size for web images
Web images are measure in pixels.
Width and height are set in pixels, not inches!
Resolution stays at 72, which is common screen
How does image resolution
play out on my computer monitor?
Computer monitors are
set to particular resolutions as well.
The larger the screen,
the larger you likely have your screen resolution set.
If you have a 17"
monitor, likely you have it set at 800X600 pixels.
If you have a 19"
screen it is likely set at 1024X768.
Now, if your monitor
is set to 800X600 and you open up an image that is 640X480,
it will only fill up a part of your screen.
If you open up an
image that is 2048X1536 then you will find yourself moving the
slider bar around to see all the different parts of the image. It just
When designing web
pages, take into account the screen resolution of your target audience.
Take a look at some image sizes on the web to
get an idea of common pixel sizes. To view the pixel dimensions, right click on
the image and click on properties.
images for the web
width set in pixels
consideration the monitor resolution of your audience the most common resolution
is 800x600. So, make you images so they can fit into that space plus leave room
for the title bars, and menus.
share over the web may be 300x200 pixels, as an estimate.
will become part of navigation bars or buttons will probably be around 100x50
Resolution for Print Images
However, when printing bitmaps, your printer
needs much more image data than a monitor.
Resolution for bitmap images that are going to
be printed are referred to as dpi.
In order to render a bitmap image accurately,
the typical desktop printer needs a resolution of 150-300 dpi.
The confusing part—
Photoshop only gives you a field for ppi (pixels/inch) not dpi, since you view the images on the
Ppi and dpi are often
used interchangeable. It will not affect your image if it is in dpi or ppi.
It is for your benefit to know that ppi refers to pixels-and the images that are using pixels
are images that will be on the computer screen
Dpi refers to dots per inch and that refers to
the dots that printers put down to map out the bitmap image.
Images for print on your monitor
We saw that pixel images stayed the same size regardless
of their resolution.
Print images that are in inches will appear
different on your screen depending on the resolution.
Create an image in Photoshop that is 4x5 inches
at 72 ppi
Repeat but put in 300 ppi
The second image appears much larger.
Because bitmaps are resolution dependent, it's difficult to increase or
decrease their size without sacrificing a degree of image quality.
When you reduce the size of a bitmap image through your software's resample
or resize command, you must throw away pixels.
When you increase the size of
a bitmap image through your software's resample or resize command, the
software has to create new pixels.
When creating pixels, the software must estimate the color values of the new
pixels based on the surrounding pixels. This process is called interpolation.
Because a bitmap uses a fixed or raster
graphics method of specifying an image, the image cannot be
immediately rescaled by a user without losing definition!!!
Create a photoshop new
image that is 2 pixels by 2 pixels. Fill the image with 2 black squares.
Resize the image by going to Image-Image size.
Put in the new dimensions of 4 x 4 px.
The edges become blurry because photoshop has to guess what colors to fill in when you
increased the pixel dimension of the image.
What is the answer to resizing?
How to look at Photoshop’s resize window.
There are 2 sections to the window: top and
Set your pixel dimension for a web image in the
top height and width field.
part involves resampling an image(adding or
taking away pixels)
resizing (print size and resolution move in-relation to each other-moving
the print to a larger size lowers the resolution but the pixel amount stays the
The default is set up to open the window for resampling
If you are going to work with an image for print
To use resizing
Turn off resampling by
clicking in the box at the bottom. This will allow you to work with just the
When you are changing the onscreen size of an
image you usually want to select the resample checkbox, modify the pixel
dimensions, and set the resolution to 72.
When you are changing the print size of an image
you will generally want to leave the resample box unselected, and either adjust
the print dimensions or the resolution to get the results you need.
As you increase the print dimensions, your
resolution decreases (thus, print quality decreases).
As you increase resolution, the print size must
decrease based on the amount of pixel data available.
If you have to resize/sample
If you have to get your image
larger and you can’t go back and scan it in at a higher resolution or if you are
bringing it in from a camera with a limited amount of pixels then use stair
Some folks have discovered that
you can get better results when upsampling by
increasing the image size in several small increments rather than one extreme
step. This technique is referred to as stair interpolation.
The concept of stair
interpolation is simple: rather than using the image size command to go
directly from 100% to 400%, you would use the image size command and only
increase, say, 110%. Then you would repeat the command as many times as it
takes to get to the size you need.
If you do not have enough pixel
data to get the print size and resolution you need, then you'll have to resample
the image and Photoshop will create new pixels. This often results in poorer
quality print results, so you need to judge which is the lesser of two evils:
the loss in quality from reduced resolution or the loss in quality from resampling
Scanners, Printers and Digital
camera all have their maximum amount of resolution.
Even if you have planned out how
much resolution you need to scan in your image and how much you need for your
output, your have to consider your hardware limitations.
EX. If you have an image that is 2x3 inches that
you want to scan in and increase the size to 8x11.5 you need to scan it in at
approx. 750. Not all scanners can scan at that high a resolution.
Ex. If you have an image that you want to print
out at 600dpi but your printer only has a resolution of 300, the extra 300dpi
are thrown away.
Ex. a 3.1 megapixel
camera has a standard size of 2041x1560 pixels. That will come into photoshop at a resolution of 180 and 8.5 in.x 11in. If you want to print it a t a resolution
of 250, the image size drops down to about 9x7in.
Vector graphics are made up of many individual
Each of these objects can be defined by
mathematical statements and has individual properties assigned to it such as
color, fill, and outline.
Vector graphics are resolution independent because they
can be output to the highest quality at any scale.
Since each object is a self-contained entity,
you can move and change its properties over and over again while
maintaining its original clarity and crispness without affecting other
objects in the drawing.
These characteristics make vector-based
applications ideal for illustration, in which the design process often requires
individual objects to be created and manipulated.
Software used to
create vector graphics is sometimes referred to as object-based editing
Common vector formats
include AI (Adobe Illustrator), CDR (CorelDRAW), CGM
(Computer Graphics Metafile), SWF (Shockwave Flash), and DXF (AutoCAD and other
Vector graphics tend
to have much smaller file sizes than raster-based bitmaps.
Photoshop uses vectors as shapes and as text.
But if you want to
manipulate text or shapes (add filter effects or layer styles) they will need
to be rasterized (essentially turned into a bitmap-pixel
by pixel image)