Experiment 6
— print (last updated: Jul 6, 2009) — print

Select font size:
The goal of this experiment is to create and manipulate images using Adobe Photoshop.
  1. Follow to the link "Images on Course FTP Site" and download the image file anderson-large.jpg to your Desktop.
  2. Create a folder ImageExamples and within this, create a subfolder images.
  3. Open HTML-Kit create the file samples.html in the ImageExamples folder and SAVE IT. Then add this content to the body (add the img elements through HTML-Kit's image generator for practice): 
    <p>
<img src="images/header.gif" height="100px" width="450px" />
</p>

An image, like this

<img src="images/anderson.jpg" width="120px" height="150px" />

should almost never be simply placed in text.
In the next section we'll create the first graphical image, header.gif.
  1. Open Adobe Photoshop. Create a new file. Select the width 450 pixels, height 100 pixels, resolution 72 pixels per inch, mode RGB color (the last two settings should be the defaults). In the Contents section below, select the Transparent radio button.

    You should see a checkerboard pattern indicating the transparent background.

  2. Using the palette, select the Type (capital T) tool. Select the text color of choice. Select the font of your choice, like Comic Sans at 30 point, Move the pointer onto the image and type: 
    My Website
    For variety you can change colors between each word.
  3. Select Edit Free Transform. The text you typed should be selected. By using the little markers on the edges and diagonals as well as dragging the image from the middle, make it fit exactly into the available space.
  4. Select the Marquee or Move tool (the top two in the palette). You should be queried whether to apply the transformation — say yes.
  5. Select File Save for Web. In the Save For Web dialog which comes up, adjust the graphic settings of the output file. Try different file types: JPEG, GIF. Observe the size for each variant.

    Choose GIF (GIF 128 dithered), and click Save. Name the file header.gif and save it in the images subfolder of ImageExamples.
  6. Close the Photoshop file you're working on. If you do want to continue working on it in Photoshop — of course, it's no big deal at this stage — you will need to save it. The file it is saved is a Photoshop specific file with the ".psd" suffix.
Now we're going to take the image file anderson-large.jpg obtained from a digital photograph (using a 3.2 megapixel digital camera) and "fit it" into this intended image slot for the second image.
  1. In Adobe Photoshop, open the file anderson-large.jpg. You should be able to do so by simply dragging it into the Photoshop application; otherwise use File Open.
  2. Right-click on the image top border and select Image Size... to get information about it as well as the ability to resize it.

    The suggested size from the document is 120x150 pixels. Change the width to 120 and take the height which is generated (probably 160). The proportions should be constrained so that the image isn't distorted. Change the resolution to 72 pixels/inch.
  3. Do File Save for Web. This time save it in the JPEG format (JPEG/high) as the file anderson.jpg in the images subfolder of ImageExamples.
Finally, we'll make a few other changes to samples.html.
  1. Change the height in the img tag for anderson.jpg to reflect the actual image height.
  2. This change illustrates the transparency of the GIF file. Change the background color of the entire document. Choose a named color from the choice in HTML Named Colors (err on the side of a lighter color). I'll use the color cornsilk for definiteness. Modify the body start tag to this: 
    <body style="background-color:cornsilk">
  3. The simple document we're working with illustrates that an image, when dropped into text, stays "inline", unlike headers or paragraphs. We can also center an image in a paragraph as we would text. Change the paragraph start element to this: 
    <p style="text-align:center">
One rendition of the overall effect is illustrated here.

© Robert M. Kline