Activity 4

Intent

Students are to…

  • learn how to create title graphics for the web,
  • find online web resources such as patterns and textures,
  • download and extract zip files,
  • add new textures and patterns to Adobe Fireworks,
  • Use the teacher video tutorials to support learning

Adobe Fireworks tools/features covered in Activity:

  • Textures
  • Patterns
  • Shape tool
  • loading new patterns
  • Layers
  • Blending modes

Criteria

Students are to:

  • find free online resources for web design,
  • download and extract a zip file,
  • load a new pattern,
  • create a title graphic,
  • upload images to student portfolio website

Task:

Part 1:

This activity has been adapted from: http://www.fireworkszone.com/grunge-text_684.html activity.

STEP 1: Folder creation and Download zip file to a folder

What is a ZIP file? Click on image to view in full screen!

 

STEP 2:

Create a new file with a transparent background in Fireworks, set your dimensions to 500×500 px and keep the resolution at 72. You’ll need a texture for the background by inserted a rectangle with no stroke and load the pattern of a rusted metal plate (pick one of the six metal grunge patterns).

Canvas and saving Information:

  • Title: firstlastname_activity 4
  • Size: W – 500 X H – 500
  • Resolution: 72 Pixels/Inch
  • Mode: RGB
  • Contents: Transparent

HINT: Monochrome textures seem to work best for this particular purpose. If you have a colour image that you want to use as a texture, convert it to black and white first. Import the image and plunk it down on the canvas. You could resize the image to fit your canvas, but it’s not strictly necessary. Change the bitmap layer to transparent black & white using the Filters>Other>Convert to Alpha

 

STEP 3:

Add a new background layer by using the rectangle tool. Use a light grey for the fill of the new backgound layer. I have used #CCCCCC. Use the Modify>Arrange>Send to Back command to place it beneath the bitmap. Adjust its size to the dimensions of your canvas and change the x and y values to ‘0’ using the property inspector.

 

STEP 4 :

Next, insert your text using the Text tool. Use a thick font so you will have more area for your grunge pattern variations to show through. I used Tw Cen MT Condensed Extra Bold in black and all UPPER case letters. Feel free to experiment with a different font.

Duplicate your text layer by dragging the layer thumbnail to the little plus sign next to the trashcan at the bottom-right of your ‘Layers’ panel, you will be using the top text layer for the grunge texture.

 

Step 5: Use the property inspector to change the fill of the top text layer from ‘solid’ to ‘pattern’, scroll down to the bottom of the choice list for ‘Other…’ then navigate to, and select the same image file (pattern) that you used for the background texture bitmap.

While still on the top text layer, use the fill handles to resize the pattern so that it is the same size, and bottom-left corner matches the position of your background texture layer. You may have to zoom out to see the handle tips if your pattern file has larger dimensions than your canvas. Aligning bottom-left will prevent the repeat-lines of your pattern from showing, since Fireworks places the pattern’s bottom left corner in the dead center of your text-box. Again, resizing is not a strictly necessary step, it just helps the text pattern match the background, as if the text color was ‘rubbed away’ in the rough spots, to the background texture beneath.

When students complete steps 1 through 5, your saved work must be submitted to your portfolio site. Create an Activity 4 page and post your images.

 

Step 6:

Once you have got the pattern placed where you want it for a nice texture in the text, change the top text layer blend mode to ‘Linear Light’. You can experiment here too, the ‘hard light’ and ‘pin light’ blending-modes might work also. This allows the dark color of the text layer beneath to show through the grunge texture.

 Part 2:

Canvas and saving Information:

  • Title: firstlastname_activity 4b
  • Size: W – 500 X H – 500
  • Resolution: 72 Pixels/Inch
  • Mode: RGB
  • Contents: Transparent

FInd your own texture and repeat Part 1 but save as: firstlastname_activity4b.png (work file).  Now use the export wizard and export for web as: firstlastname_activity4bforweb.png

Posting

Create a new Activity 4 sub-page and post all four files

 

teacher example

 

Step 7:

Now repeat the the above to create a textured title graphic for your company.

Canvas and saving Information:

  • Title: firstlastname_activity 5
  • Size: W – 500 X H – 500 (recommended, but not restricted to)
  • Resolution: 72 Pixels/Inch
  • Mode: RGB
  • Contents: Transparent
  • Save as firstlastname_activity4b.png (work file)
  • Export for web as: firstlastname_activity4bforweb.png

Posting

Video Tutorials:

Setting up the file in Fireworks and using patterns in Adobe Fireworks CS5

Patterns with Text and Saving: