Activity 8

Intent:

  • Create a 3D light field to further develop your vector design skills in Adobe Fireworks,
  • Learn how to create a vector lens flare,
  • Learn how to use feathering,
  • learn how to use blending modes.

example

Task:

  • Create a new Activity 8 subfolder in your unit 1 folder
  • Create a new document:
    • 1000 x 800
    • background colour: #000011
    • Resolution: 150

canvas

  • Add a new text layer.  Put “your name” (I used  font: calibri, #FFFFFF, size: 80 and used “Sisler Web Graphics”).
  • Add a glow effect to it with the following settings:

glow

  • Create a new layer below the text layer and name it “Background Glow”.
  • Copy the text from the text layer and paste it in the “Background Glow” layer.
  • Select the text in the “Background Glow” layer and press Ctrl + Shift + P to change it into path (alternatively, right click on the text and select Convert to Path). The Background Glow layer should now contain:

capture

  • Change the properties of this path group to Feather 5:

properties

vector unit activity 8 part 1 from Digital Voices on Vimeo.

  • Create an ellipse in the “Background Glow” layer as shown in the screenshot below and apply the following properties.  Make sure this layer is under your title with glow layer.
    • Blend mode: Heat
    • Fill colour: Radial Gradient.
    • The first colour stop should be set to: #FFFFFF, 100% opacity; Ending: #FFFFFF, 23% opacity, Feather: 123%

heat

vector unit activity 8 part 2 from Digital Voices on Vimeo.

  • Use the pen tool to create a quadrilateral and place it as shown in the figure below:

qud 2

  • Change the edge to Feather 70. Add a Linear Gradient Fill:

 

quad

  • Change the blend mode to Luminosity and opacity to 50:

blendingmode

  • Copy the layer 5 more times and place them as shown in the figure below. For the bottom right, draw two ellipses and place them accordingly:

lights

  • Draw an circle as below and keep it at the top of the “Background Glow” layer….and change the properties to a linear gradient gradient and a feather edge of 130.

Vector Unit, Activity 8 part 3 from Digital Voices on Vimeo.

circle

With this we have created the background glow. Your Background Glow layer might look like this: Posted Image

  • Create a new layer and name it “Foreground Glow” and place it above the initial text Layer.
  • Draw an ellipse (fill #FFFFFF) as shown in the image below

foreground glow

…and change its properties to:
soft light

  • Change the blend mode to “Soft Light”.
  • Draw another ellipse (fill #FFFFFF) and place in on the opposite side of the text.  Now apply Feather 100, Blend mode: Soft Light.

circles

  • Create two small circles and place them on two letters, I used the “a” and “p” of the text as shown

Vector Unit, Activity 8 part 4 from Digital Voices on Vimeo.

feasther 10

change their properties to Feather 25 and 10 respectively.  Create an ellipse and place it across the two letters

  • change its properties to Feather 16, Opacity 65:

opacity 60

The foreground glow is completed now and might look like this:
Posted Image

Time to make the Lens Flare!

  • Create a new Lens Flare layer.  Draw a slanting line across “a” to keep the elements of the lens flare aligned.

lens flare

  • Proceed to create each of the small elements in the flare. There are 14 different geometrical figures in all.
  • This process mainly uses gradient colours, feather strokes and blur effects for most of the elements.
  • Lock all layers (except the Lens Flare Layer) and disable the visibility of all layers (except for the title layer).
  • Draw an ellipse with a solid white fill on top of the “a” location.

Vector Unit, Activity 8 part 5 from Digital Voices on Vimeo.
lock

  • Make a rectangle and set its fill to radial gradient with blue (#0066CC) on both ends. Set its outer edge to 0% opacity. Put it underneath the ellipse.  Resize the rectangle and the gradient appropriately, but make sure the gradient centre is in the centre of the white circle.  There should be a blue glow.

start grad

  • Copy the ellipse layer.  Reassign the bottom ellipse layer fill to #000000.
  • Now using the sub-selection tool, select white circle on the top layer and select the top vector point and delete it.

deleted anchor

  • Set the edge to Feather, value 70. Put it between the logo and the glow. Now you have a more interesting glow.

 edge 70

 

  • Now copy and pastes the black ellipse.  Place it above the white semi-circle ellipse.  Set the fill to radial gradient, white on both ends and outer edge 0 opacity.

radial grad

  • You will get a white glow in the center, then move the gradient position to the bottom left. This is where we want the ‘light’ to leak out, but you can position it anywhere you want.  Along the red line guide.

leak

  • This step is a little long. Draw a line using the Vector Path Tool and shape it with the free transform tool or the sub-select tool into a semi-circular line outlining the bottom side of the white ellipse. It does not need to be exact.

line

  • Now configure the line to the following:
        • Colour: #CCCCCC
        • Edge: 20
        • Texture: Chiffon 30%
        • Brush: Oil>>Splatter
        • Edit Stroke>>Advanced: Spacing: 60%, Size: 48

 

splatter

splatter2

 

  • Draw series of  4 small white circle with Feather edge 100%. Move it to the ‘leak’ point. In this case its the bottom left 9follow the red line.

line of circles

Vector Unit, Activity 8 part 6 from Digital Voices on Vimeo.

 

  • Draw a bigger circle with invisible fill, and white outline. Set the outline to size 15 and 100% edge, and its opacity to 5%. Position that on the ‘leak’ point.

stroke opacity

  • Delete the red line guide.
  • Time for tweaking layers.  Delete the black ellipse layer.
  • Unlock and turn the visibility to all layers.
  • Now move the two white ellipses and the rectangle with the blues gradient to the “background glow layer.  You may want to lower the opacity a little.
  • Feel free to change the text in the “title” layer to a colour in background

last

  • Save as: firstlastname_activity8.png in your activity 8 folder.

Posting your work:

Create a new Activity 8 subpage under your Web Graphics Unit.  Upload and insert your image.

activity adapted from:  http://www.fireworksguruforum.com/index.php?showtopic=15827