and Preparing them for use in other Applications
Before you include an image in a
print document, a multimedia presentation or a webpage you will want to work
with that image to format it in a way that works best with where you plan to
use it. You'll be doing a balancing act between getting the highest quality
image possible and a file size that is appropriate for the medium that you'll
be using to display the image. As you prepare images for use on the web (or
in multimedia presentations) you'll want to aim for the smallest file size possible
while not compromising too much of the quality of the image. Use the information
below to see how this might be done.
This is an introduction to the four
steps we'll be using for Image Editing. For a fuller description of the different
processes involved in each step we'll be using the following additional resources:
When you're ready to begin
preparing your images for either the web or for multimedia presentations
you will probably want to invest in image editing software.
applications - There
are a variety of software based image editors available. Ranging from
freeware to commercial products you will be able to find a product that
you can use. The list on the right includes some of the most popular programs.
(Free for the Mac-converts pict files to gif files)
Knowing how you plan to use
your images will help you make decisions during the process of acquiring
the web: Resolution
should be set at 72 ppi. Images for print: Resolution should
be above 150 ppi.
3: Edit your images
a copy of your image and save the original in a folder called source.
Save it using your image editing default format. This way you won't accidentally
destroy your original image.
Using your editing software,
make whatever changes you want to make. The options available to you will
depend on your software. With most image editing software you can add
text, create layers, modify colors, add effects (like drop shadows) and
transform your images (scale, rotate, etc). Example 3.0 on the right is
an example of an image created in Photoshop.
A digital camera was used
to take pictures of student art work.
Pictures were brought into
Photoshop and arranged in layers.
A textured background layer
and border were added.
A title (with effects -
glow and drop shadow) was added.
The image was resized and
optimized for the web to be a 15K file size.
3.0 - Image created with Photoshop
When you're editing your images,
keep in mind how you will be using them. If you are putting them on a
webpage, consider whether or not you want them to be transparent (will
look like they're floating on the page). You can save .gif files as transparent
images, but jpgs are more difficult to make transparent. Sometimes it
helps to create the image on a background color that's the same color
as the background where you'll be using the image.
4: Export your images
you've created an image that you're happy with, you'll want to be sure
that it is the correct height and width for using in your application
and that you've saved it in the appropriate format.
In all image editing applications
you should be able to change the size of your image by using the text
menu at the top of the screen. Look for a command that refers to Image
Size. This is where you can set the height and width and the
resolution of your image. (Example 4.0)
4.0 -Image size in Photoshop
you locate where to change the image size, a new window will open up and
you can check resolution and height and width of your image.
You can usually set height
and width by pixels or by inches. If you keep the Constrain Proportions
checked, your image will always keep the same proportions as you change
the size. (Example 4.1)
If you're designing for the
web, you will want the resolution to be set at 72 ppi. (Example 4.1)
4.1 -Changing image size in Photoshop
you're ready to export this, you'll do 2 saves.
First save the original
document in the default format of the application you're working in
so that you can go back in and make edits at a later date. For our
example we saved it as a Photoshop document (.psd)
Then save your image based
on how you plan to use it. In the example to the right, we chose to
Save for Web. Sometimes you'll have this option and other times you
might find it under the Export command. Check out your editing software
to see what is available to you.
If you were working with
layers, it's a good idea to flatten your image before you export it
or save it for the web.
In our example we are using
Photoshop 6.0 and it has an option to Save for
Web so that is the option that we chose. (Example 4.2)
4.2 -Saving for the web in Photoshop
you choose Save for Web, a new window
will open up and you can view different options for how you want to compress
Use the panel on the right
to experiment with different settings.
You can change to different
settings i.e. JPEG, or GIF, (see red circle to the far right) and you
can choose the level of compression (jpg) or the number of colors to
choose from (gif)
You can also see how big
the file is (red circle to the left) and keep making adjustments until
you get the quality and size you want. (Example 4.3)
4.3 -Changing settings in Photoshop
you get the size and quality that you're looking for you can press OK
and it will open a new dialog window that prompts you to give it a name
and save it. (Example 4.4).
Use the L.E.S.S. format and
save it to a location where you will either use it or be able to find
it when you're ready to use it.