GRAF 1031 – Week 4
Fireworks Banner
Bitmap Masking: use one of the marquee tools to create a selection on a active bitmap layer in FW. When you are satisfied with the shape, click the mask button on the layer panel.
Vector Masking: use the pen tool to draw the shape of the mask, or select a vector shape, then choose Edit>Copy, then select the bitmap image and choose Edit>Paste as Mask
Banner basics
In Fireworks create a new canvass 770 x 250 - white background
Background rectangle
change the layer name to bg
Create a new rectangle: 540 x 175, x = 210, y = 70, rounded corners - 10, no stroke
gradient fill - bars - horizontal - left = #8DB9D2, right = #547794
note: rotate the gradient so that it is runs vertically (not horizontally). dark at the top and bottom, light in the center.
Globe
Open the globe.jpg, and drag the image into the first document
rotate the image 90 degrees counter clockwise using the scale tool.
create an elliptical selection (with the oval marquee tool) around the globe, then click the mask button on the layer panel
add a glow and change the layer mode to "tint", and
(I also
changed the saturation to -45. You can find this option in the Filter menu)
Business woman
open the woman.jpg
then Modify>transform>flip horz
use your pen tool to draw a vector shape that traces the women
copy the vector path, then select the bitmap image of the woman, and choose edit>pasted as vector mask
copy and then paste her on in a new layer in your banner
set the X to 490 or simply line her eyes line up with the top edge of rectangle
with the image selected, choose to flatten the selection from the layer panel - then you can use your marquee tool to cut off the excess below the bottom of the rectangle
to alter her jacket colour, draw a bitmapped or vector image (choose a similar blue colour from the doc) that is the same shape as the jacket. then change that images properties as shown:
...then add some stars, and anything else you like to jazz it up
Banner text
Create a new layer and add some text with a drop shadow to look like this:
Logo
Create a rectangle with a fill color of #7CA1B7 - no stroke, rounded the corners to 30
I used the donuts tool a couple of times, flattened it, and using feathered marquee tools, erased portions.
Nav text
add the following text and images under the logo
I also added dotted lines, and circles with light grey stoke and white fill, and for the arrows use the polygon tool (just change the number sides in the property inspector to 3)
Slicing
when you have the banner looking exactly like you want it - slice it up.
just make sure each of the nav items above have their own slice, then slice the rest how ever you want
Rollovers
duplicate the current frame (options menu - frames panel)
then in frame 2 move the text to the right 5 clicks with the arrow keys and change the color blue (something sampled from the design)
fill the circles with the same blue
click the first nav slice, and choose add simple rollover behavior
Slice and export it as a fireworks html banner
Dreamweaver - Part 2
Folder setup
Open Dreamweaver, and define the businessCo folder as a new site
Table layout
In DW, create a new page, and save it into your main root as index.html
T1 insert a table 1r, 1c, 770px wide:
Select the table, and in the property inspector change the alignment to "center"
T2 nest a table 4r, 1c, 770px wide:
T3 nest a table in the 2nd row of T2, 1r, 5c, 770px wide.
T3 column width's: 210, 320, 20, 200, 20. Here's what you have so far:
you can add content as you go. i.e. insert the banner (Fireworks html) into the first row of T2.
continue nesting tables for the content. See screen shots below:
T4 nest a table in the 2nd column of T3
T5 nest a table in the 4th column of T3
T6 nest a table in the 4th row of T2, 1r, 2c
T7 nest a table in the first column of T6
...and one in the 2nd column
Additional images for the site
you'll find in the images folder
CSS
Together we'll create font and link styles