Thomas Wallace: Lectures and Resources - A collection of website design lectures and resources

Using Shapes, Text, and Photos to create Imagery for your site

In this exercise we will create a header image for your web site using some web-based resources and Fireworks. The imagery I create today is only an example. Feel free to create imagery that reflects your stylistic and design goals. Look at these steps as a loose guide to help you through the process.

  1. Collect any imagery that you would like to use in your image
  2. Open up Fireworks and Create New Document. Its dimensions will vary depending on what your needs are. The example I will be working on will be 700px wide and 100px tall. For those of you that used one of the fixed width templates, these dimensions would fit exactly into the header space provided on your page.
  3. Open any other imagery you will be using to create the image. In this example, I am going to open a photograph I found online and a piece of clip art.
  4. If you are going to use an image as a starting point for your image you'll need to crop or resize the image. To crop a image use the crop tool to highlight the area you would like to crop and press enter.

Crop

  1. Repeat this process for any other images you need to resize of crop
  2. From each of the image files you collected, copy and paste the images to the new canvas you created
  3. Save the file in your resources folder and name it masthead.png or another descriptive title.
  4. Once you have all of the image assets placed on the new canvas, create any text or shape objects that you would like to include in the image
  5. Now that we have all of our assets in the same place we can begin to arrange them to our liking on the canvas. If you need help in aligning objects on the canvas you can turn on a grid by going to the View Menu at the top of the page and select the grid option
  6. When you are pleased with the alignment of the objects on the canvas, apply any filters and or commands to the objects in your image. One thing to consider when applying filters is their consistent use. If you use a drop shadow on one object, use the same type on the other objects.
  7. Save the document.