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.
- Collect any imagery that you would like to use in your image
- You might try Google or one of the many free stock photography resources online. Store all not web ready imagery in your resources folder.
- Create a color scheme
- Open up your image editor and Create New Document. Its dimensions will vary depending on what your needs are. The example I will be working on will be 800px wide and 150px tall. These dimensions will vary from project to project and depend on whether you are using a fixed-width layout or some thing more responsive. Regardless this process can be adapted to suit your needs.
- 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 another vector drawing.
- If you are going to use an image as a starting point for your image you’ll need to crop or re-size the image. To crop a image use the crop tool to highlight the area you would like to crop and press enter.
- Repeat this process for any other images you need to re-size or crop
- From each of the image files you collected, copy and paste the images to the new canvas you created
- Save the file in your resources folder and name it masthead.png or another descriptive title.
- 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
- 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
- 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 treatment on the other objects.
- Save the document.
- When you are ready to place in your web page follow the instructions on optimizing and exporting images for the web.