Graphic Techniques



In this tutorial you will learn how to create a beautiful header collage of 4 different pictures in a few simple steps using Fireworks CS4!

Below is the collage we will be creating in this tutorial. You need one background image and 3 foreground images for this tutorial. Using the technique of fading images and blending them with each other you can add as many images as you need.

Below are the images I have used to create the above collage.

To start, open Fireworks CS4 and create a new document by opening the background image that you have selected. As my background image is to be the trees, I will make the new file the same size as the background image; you can use <CTRL> + J later to re-size the finished image if necessary.

Next, use File Import to import the second image and place it where you need it to be displayed; re-size the image using the handles if this is required.

Choose the image and click on Commands/Creative/Auto Vector Mask.

Next Choose the way you would like the image to fade/blend in with the background. As I want the image to blend in with the background from right to left I have chosen the last Linear option as my selection. Later you can adjust the amount of fade and from where you want the fade effect to start (see below).

The black line running through the image controls the amount and direction of the fade. Move the square nearer the circle and more of the image is shown, move the square from side to side and it changes the side that has more image or more fade.

Import the second image and place it where you need it. I have placed this on the right and I have given the opposite fade effect i.e. from right to left. I have adjusted the fade effect by playing around with the black line to get the effect I wanted.

Import the last image, this is the image I want to place in the centre so I have applied the first shape option which fades the image from all sides in a radial effect. It blends the image beautifully with the background and there you have a beautiful header collage!



This tutorial demonstrates how to make use of the Command option to convert simple images to swirling, fading, dazzling graphics. Playing around with the four properties (steps, spacing, rotation and opacity) brings out the creativity in you!

I will start with this apple

Step 1
Paste a clipped image on your canvas. I removed the background with the magic wand and copied and pasted the image into a larger canvas. The apple was originally 460 x 460 so I will make the new canvas 800 x 800. I can always make it smaller later.

Step 2
With the image selected click on Commands>Creative > Twist and Fade

Step 3
Now, the Twist and Fade window is displayed.

Step 4
The main menu has the following options.

  • Steps - number of steps to produce
  • Spacing - spacing between each step
  • Rotation - degrees rotation between each step
  • Opacity - set the starting opacity of the image

Drag the sliders to set the values and view the live preview below.

The Options Menu has the options :

  • random effect - creates a random effect to the different steps,
  • convert to symbol - converts the final creation to a graphic symbol,
  • fade opacity - changes the fade opacity between the number of steps

Step 5
I've given the following values : steps - 8. spacing - 30, rotation - 15 and opacity - 100. Un-check "Step behind".

Step 6
Isn't this a wonderful effect!




Open a blank document in Fireworks

The first step is to create the object. We will select the spiral tool for this tutorial. Select the spiral tool from the shape tool in the left tool bar. If you are working in Fireworks, you can select the circle or square tool.

Draw a spiral in the document by clicking and dragging the spiral tool. Example given below.

Next, you need to place the picture of your choice behind the spiral. Example given below.

The last and final step is to paste the picture inside the spiral shape. To do this you need to cut the picture by selecting the picture and then clicking on "Edit" then "Cut"; the picture will vanish.

Next, click on the spiral and click on "Edit" then "Paste Inside". There, you have got the picture pasted inside the spiral.

The final effect is given below.

You can use this technique for any shape you create or any of the shapes that are already available in Fireworks.



When you draw a vector shape such as a rectangle or ellipse, Fireworks refers to the line that defines the shape as a path. These paths can be combined in many different ways.

Here I have drawn a rectangle and an ellipse.

I have also opened the "Path" panel, where paths can be combined, altered or edited. To open any panel, just double click on the panel name. Double click on the name again and the panel will close.

Select both paths by clicking on the first and then hold the <SHIFT> key down and click on the second any any subsequent paths.

I have applied 3 different combinations so that you can see the effects. The top one is "Join" where the paths are combined into a single path. The middle one in "Punch" where the resulting shape is created by in effect deleting the second path from the first. The bottom one is "Union" where the resulting shape is the outline of both shapes.

On this canvas I have drawn a single ellipse.

Click on "Modify" then "Transform" then "Numeric Transform..." to get this dialogue.

With this you can accurately transform a path. In this example I will use rotate to make copies of the ellipse and rotate each one. The top left shape is the effect of "Union", the bottom left is the original and the right hand shape is "Join".




FireWorks provides tools to improve or alter the look of photos. Some of its tools are similar to those in the more powerful Photoshop program.

Adjusting Levels

Levels allow you to adjust the dark areas, light areas and mid tones of a photo.

I have selected a photograph of some mountains at sunset and applied some of the bitmap image correction techniques that you might like to try.

This is the original image (on the left) opened in Fireworks.

Applying Auto Levels. FireWorks provides an AUTO LEVELS filter that tries to automatically repair the colour levels of a photo. Select the POINTER TOOL and click on the image. In the PROPERTIES panel, click on the ADD FILTER icon, highlight ADJUST COLOUR and select AUTO LEVELS.

This is the effect, it has made the image lighter.

Manually Adjusting Levels. The levels can be adjusted manually if you want more control over the way the photo is changed. In the PROPERTIES panel click on the ADD FILTER icon, highlight ADJUST COLOUR and select LEVELS. The LEVELS dialogue box is opened showing a histogram of the colour levels in the photo like this.

Drag the centre marker under the histogram to about 1.7 and the image becomes much clearer. It is excluding some of the darker colours from the right of the histogram.

Adjust the LEVEL markers until you are happy with the results and select OK.

You will see something like this.





Here I have the text "Crawdale" in Fireworks. The text size is huge (200), the stroke (the outline) set to black and the fill set to "No fill"

Find the image that you want to fill the text. Paste it over the text. If it is not big enough to cover all of the text then stretch it so that it does. Hold the shift key down whilst doing so in order to maintain the aspect ratio of the image.

Use "Edt" then "Cut" to remove the image and then "Edt" then "Paste inside" to fill the text with the image.




This is a beautiful text effect! Follow these simple steps to give this glassy text effect. This is probably best for your programme.

Step 1

Choose an image for the background of your text.

Step 2

Type some text on the image and position it wherever you want it to be. In this tutorial, two texts are used as you see in the image i.e. Crawdale and Festival.

Step 3

With the text "Crawdale" selected, got to the Properties window below the screen, select Filters>Bevel and Emboss>Raised Emboss.

Step 4

The default depth of the emboss is normally "2" but I have increased it to "10" so that the effect is significant. The option Show Object should not be checked.

Step 5

The following values are given for the properties of the text Blue Skies : Width - 8, Contrast - 100%, Softness - 0, Angle - 90. (These are the properties starting at the top left and going clockwise.




I am not sure where you might use this but the effect is quite astounding when it is done.





As a key part of the "Elements Table" it is necessary to create a copyright statement. In the Uk The "Intellectual Property Office" provides advice and guidance (dull boring but very accurate) on using images.

There are a number of issues to resolve. If the image is used for "Instruction" then fair use says its use is fine provided it is acknowledged. However, your images will have commercial use and such permission is not sufficient.

You need to create a statement that says (in your own words) that either the image is your own, is copyright free (and you can demonstrate this), is available under a creative commons licence, falls under the rules for "fair use" or you have sought permission for its use in your product.

The University of York has some useful advice for the use of copyright material in academic work.

The Joint Information Systems Committee has this advice for students.

Some useful advice from an American perspective.





You must exhibit your graphic products in an eportfolio along with supporting evidence.

You must treat the eportfolio as another graphic product and include appropriate graphic elements on the context pages. You should consider the scenario when selecting the elements.

Make sure you have all the evidence you need in your PRODUCTS and EVIDENCE sub folders.

How should it be structured?

It is important that the structure of your eportfolio is logical so that the moderator can find all the evidence.

You may wish to produce a structure chart for your eportfolio showing how the pages link together.

The eportfolio should include:

  • a home page showing:
    • your name and candidate number, centre name and number
    • the title of this SPB (DA203 Food Festival)
    • the browser and resolution that should be used to view the eportfolio
    • links to the context pages
  • context pages with commentaries to introduce and link to the required evidence
  • appropriate graphical elements on the pages.

Preparing the evidence

The Digital Applications moderators’ toolkit specifies the file types that all moderators can view. It is your responsibility to ensure that your eportfolio only includes files that can be read using the toolkit.

The Digital Applications moderators’ toolkit is published on the Pearson website.

Building the eportfolio

Create your eportfolio. Remember that you must comply with copyright.

Make sure that there are clear, working links to the products and all other evidence.


Test your eportfolio to ensure that it works properly even when it is on a 
stand-alone computer.

Make sure that you specify the browser(s) you have used for testing.

Check the size

Make sure that your eportfolio is not too big.  The recommended maximum file size is 30 MB.




You know by now how to make a website. It must use css; anything else would be a disaster.

Setting up your site.

Your website needs to be in the DA203SPB folder that you have placed your evidence and products in.

I have given the site the name "Crawdale" and checked that the home folder is the "DA203SPB" folder.

Make sure that your selected folder lets you see the two folders "evidence" and "products". If you want to make an images folder for your website images then do so - the button images would be ideally placed in an images folder. Check that you can see the correct folders in the files section of the DreamWeaver environment.

Making the pages

Choose a simple layout that you can work with and make sure that you can construct the pages so that all of the content that you have made can be found from the website. If it is not part of the website then it will not be marked. Choose a layout with a sidebar and at least a header. Ensure that you select "Create new file" as before so that DreamWeaver will create a separate css file and not embed the css in the page.

Give the css file a sensible name such as "Crawdale" or "CiDA" or "Festival" or even "Food".

Save the web page as index. DreamWeaver will add the file extension for you.

Make a button in Fireworks. I would use a canvas that is say 200 x 40 with a transparent background. Then add a regular shape - I have used an oval but you can use any sensible regular shape such as a rectangle. Add the text of the button - in this case "Home". I would use a simple font; do not use a fancy one that cannot be read easily.

Save the button as the up version and then change the background colour and save it as the down version. Make a series of buttons in pairs, one for each of the pages that you need.


This is the set of buttons that I made.

Edit the side bar slightly, change the heading and remove most of the text. I have added the comment about the browser as well.

Make a space under the heading. Save the index page and then save it again as the next page, "proposal" and so on so that you have the set of pages.

Click on "Insert" then "Image objects" then "Navigation bar" to get this dialogue.

Ensure that you change the insert option to be "Vertically".

Name the first element "Home".

Browse to the various button images and then browse to link the button to the target page.

Press + for another link. Repeat this process until you have made all of the links; one for each button.

When you have added all of the links press "OK" to save the navigation bar. Copy the navigation bar from the index page to all of the other pages.

Create a suitable banner for the website. this banner is 1024 pixels wide. If you want to use your street banner then use <CTRL> + J to change its size and then copy it onto the web banner. Your banner might have the important candidate information on it if you wish.

Open the css for the header and select the background option. Browse for the web banner.

Now select the "Box" option to set the size of the header to match the banner. Make sure that the padding is set to 0. Press "OK".

The header will now go happily berserk. This is because the header is part of the container and the container is set to be a different size.

Open the container settings in css and select the "Box" option. Mine was already set to 80%. It needs to be set to 1024 to match the header.

This is the container box corrected.

The web pages are now ready for their content. Check that it works in a browser. Mine did not work in Explorer but works fine in Chrome.

How should it be structured (in more detail)?

It is important that the structure of your eportfolio is logical so that the moderator can find all the evidence.

You may wish to produce a structure chart for your eportfolio showing how the pages link together. Good idea - this is a site map that shows at a glance where the content can be found. Do this at the end if there is time.

The eportfolio should include:

  • a home page showing:
    • your name and candidate number, centre name and number
    • the title of this SPB (DA203 Food Festival)
    • The name of your festival
    • the browser and resolution that should be used to view the eportfolio - the width of the page can be fixed at say 1024 in css so that you know it will be correct in all pages.
    • links to the context pages - a navigation bar with simple rollover buttons:
      • home
      • proposal
      • elements table and copyright statement
      • street banner
      • blimp
      • programme
      • market stall frame
      • market stall skirt and canopy
      • evaluation
    • have images of the finished products on the home page
  • context pages with commentaries to introduce and link to the required evidence
    • Each product page should have the same four elements;
      • the success criteria for that product taken from the proposal
      • an image of the finished product in situ
      • a link to the design log for that product
      • the evaluation of the product
  • appropriate graphical elements on the pages. The minimum that you can have is the image of each product on the appropriate page. If you have time to highlight a specific technique or use rollovers to show something change then this would be great.
  • The design logs need to be saved as "PDF" files and linked to the appropriate page.
  • Each product needs to be evaluated in the design log and on the evaluation page.
  • The complete DA203SPB folder containing the products, evidence and website needs to be no more than 30Mb so you may be required to reduce the file size of some of the images. In effect, a set of no more than 12 candidates' work should fit on a 650Mb CD.

You are now in a position to showcase your project and demonstrate to the examiner what you can do.


Test your eportfolio to ensure that it works properly even when it is on a stand-alone computer.

This is crucial. It is your responsibility to make sure that it works correctly when it is sent to the examiner.

Make sure that you specify the browser(s) you have used for testing. I would test it in both Chrome and Explorer.

Check the size

Make sure that your eportfolio is not too big.  The recommended maximum file size is 30 MB. Right click on the folder and choose "Properties" to get the folder size.




You must carry out a review of your finished products.

Ask end-of-project reviewers to evaluate the products.

The review must include:

  • your evaluation of the finished products
  • consideration of feedback from end-of-project reviewers
  • suggestions for improvement.

Evidence Produce your review.






(000) 000-0000 x12387


1234 Somewhere Road #5432
Nashville, TN 00000
United States of America