IT tutorials
 
Graphics
 

Adobe Fireworks CS5 : Designing the banner ad (part 1) - Adding the background, Editing gradient colors, Editing gradient direction and angle

7/14/2013 9:16:47 PM
- How To Install Windows Server 2012 On VirtualBox
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire

The banner you build in this lesson has many elements to it—imported assets, masks, gradients, text, layers, and so on.

1. Creating the document

Start by creating the new, basic document to hold all your further work.

1.
Choose File > New.

2.
In the New Document dialog box, set the dimensions to 728 pixels wide by 90 pixels high. This is a standard horizontal leaderboard banner size.

3.
Click the color swatch to set a custom canvas color.

4.
Choose black (#000000) from the color picker and click OK.

Ultimately, this document will use multiple layers. You will add those now.

5.
Double-click the existing Layer 1 name in the Layers panel and rename it background.

6.
Click the New/Duplicate Layer icon ( ) at the bottom of the Layers panel.

7.
Name the new layer main.

8.
Repeat step 6 to create one more layer, and name it text.

9.
Save your file as movie_banner_working.fw.png.

2. Adding the background

The background for the final banner is not just a flat color; it’s got some depth and variation in tone. You will create that now.

1.
Lock the text and main layers by clicking the empty box beside the layer names. This will force any new objects into the background layer.

2.
Select the Rectangle tool, and draw a rectangle the same size as the canvas (728 × 90 pixels).

3.
In the Properties panel, set the X and Y coordinates to 0.

4.
In the Properties panel, change the Fill Category to Gradient > Starburst.

5.
Click the Fill color box to open the Gradient editor.

3. Editing gradient colors

Now you will set the colors for the gradient.

1.
Click the far-left color swatch.

2.
Use the Eyedropper tool to select the black color swatch.

3.
Add a new swatch by clicking just below the gradient ramp, where your cursor becomes an arrow with a plus sign next to it. A new gradient color swatch appears.

4.
Click the color swatch, change the existing color value in the field to #535973, and press Enter or Return.

5.
Continue adding color swatches to the gradient by typing the following values into the field: 181C25, 000000, 6A7295, and 323647.

6.
Place the color swatches so that they resemble this figure, and click away from the Edit Gradient pop-up window when you’ve finished.

4. Editing gradient direction and angle

You can alter the angle and direction of a gradient by moving the gradient control arm (or arms).

With the rectangle still active, and the gradient applied, you should see two control arms. The arms are normally black, but we’ve outlined them in white here to make them easier to see.

1.
Select the Pointer tool from the Tools panel.

2.
Change the length and angle of the upper gradient arm by dragging the square control point until it is similar to what you see here. Again, we have outlined the control arms in white so it’s easier for you to see the change.

3.
Rename the rectangle background.

4.
Lock the background layer.

5.
Save your file.
 
Others
 
- Adobe Fireworks CS5 : Masking - About masks
- Adobe Flash Professional CS5 : Working Within the Flash Environment - Printing a Document in Windows
- Adobe Flash Professional CS5 : Working Within the Flash Environment - Printing a Document in Macintosh
- Adobe Flash Professional CS5 : Working Within the Flash Environment - Working with Page Setup in Windows
- Adobe InDesign CS5 : Working with Objects and Layers - Hiding and Showing Objects, Creating Inline Objects
- Adobe InDesign CS5 : Working with Objects and Layers - Locking and Unlocking Objects
- Adobe InDesign CS5 : Working with Objects and Layers - Rotating Objects
- Adobe Illustrator CS5 : Proofing and Printing Documents - Inserting File Information
- Adobe Illustrator CS5 : Proofing and Printing Documents - Checking for Print Problems, Using the Document Info Panel
- Adobe Illustrator CS5 : Working with Objects - Reshaping Objects with Envelopes
 
25 Inspiring Game of Thrones Quotes
 
Top 10
 
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
programming4us programming4us
 
Popular tags
 
Video Tutorail Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS