Beginning HTML: Creating Images
Option 1: Find an Image
There are hundreds of sites for free images on the web. You can
also use some clip art disks (with the warning that they are mostly designed
for printing so some dont look good on the web). Try these sites or search
"free images" on Google.com:
Option 2: Scan an Image
Scan an image using one of the scanners in the lab.
Open your scanned image in Photoshop to make modifications (crop,
color adjustment, etc.) and save as a gif or jpeg by using the steps below.
Option 3: Create an Image
Use Adobe Photoshop to create a Title Image and Background Image.
- Find Adobe Photoshop on your hard drive and double click the
icon to open the application.
- Photoshop now asks for the dimensions of your new document.
Mode=RGB, Resolution 72 -max. screen res. Follow the suggested guidelines
below according to the type of image you are creating.
Background Gradient: 1024 pixels wide by 5 pixels high. The image
should span the entire width of the largest monitor. Because a background image
is tiled, the height can be small. This decreases file size.
Title Image/Banner: 525 pixels wide by 95 pixels high. This is
an average size used on the web. 525 is the maximum number of pixels that would
fit on a printed piece of paper.
You should now have a new image window on your screen. Go to either
"create a gradient" or "create title image" below.
To create a gradient:
- Choose colors by clicking on the color swatches in the toolbar
- a color table will appear, pick colors.
- Then double click on the gradient tool in the toolbar. This
tool looks like a box with a gradient from black to white - a gradient folder
- Specify if you want the gradient to go from foreground color
to background color or to transparent. Choose linear gradient - do not choose
- Choose View/Actual Pixels from the menu bar and then use the
scroll bar to scroll left.
- Drag the mouse pointer from left to right across the image.
If you dont like your gradient choose Edit/Undo immediately. Repeat
the process until you are happy.
To save as JPEG: Because this image contains a gradient,
save in JPEG format.
- Layer/Flatten Image
- File/Save As
- Name your image: backgd.jpg (remember the 8.3 character rule)
- Pull down the format pull down menu and choose JPEG from the
list. This is very important. If JPEG is grayed out your image may not be
flattened. Repeat the previous step: Layer/Flatten Image.
- Save backgd.jpg into your "images" or "pic"
folder in your "yourname" Folder in the students folder on
To create a Title Image:
- Click on the text tool in the toolbox. This tool looks like
a Capitol "T". Click on your new image.
- Choose a font and font size from the dialogue text box and
type your title in the box below.
- Be sure that aliasing is unchecked. Click ok.
- The text should appear in your new image. Arrange the text
so that it fits in the image window. You can work on layers by going to Window/Show
To save your image as a JPEG follow the steps above.
To save as a gif:
- From Export drag mouse to Gif89aExport.
- For Pallet select: Adaptive
- Interlaced: unchecked- loads solid image; checked- loads image
in sections. Click OK.
- Gif89aExport automatically adds the .gif extension and saves
as a gif format.
- Keeping the .gif extension, name your images with fewer than
8 characters, lower case, and with no spaces.
- Save to your "images" or "pic" folder in
"yourname" folder in the student folder on the desktop.