IT tutorials

Adobe Fireworks CS5 : Using document templates (part 1)

12/15/2011 6:02:23 PM
- Windows 10 Product Activation Keys Free 2019 (All Versions)
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire
Many designers love Fireworks because it lets them get in and get out quickly. Expediting your workflow is indeed a key goal of Fireworks.

One feature that may help you in concept and prototyping stages is document templates. Fireworks comes with a number of prebuilt templates you can use to jump-start a brand-new project. The template options range from common document sizes for web and mobile projects, to grid layouts for creating original web-page layouts and wireframes, to mobile application and website prototype samples. You will use one of these templates to quickly generate a series of web banners to promote a website.

Opening a document template

You’ve been asked to create a series of web banners from some supplied artwork. This is a great chance to see how document templates can save you time.

Choose File > New From Template or select the From Template option on the Welcome screen. The New From Template dialog box opens directly to the main Templates folder.

You can choose from one of five default categories.

Open the Document Presets folder and select the Web banners template. In Windows, a preview window appears automatically. On the Mac, click the Preview button to open the preview window.

Use the playback controls below the preview image to browse through the various design options.

Choose the 728 × 90 – Leaderboard page and click Open.

The entire document opens, with the 728 × 90 Leaderboard template as the active page. Note that all the other banner sizes are still part of the document, including a summary page that has all the banners on a single page. This is already saving you time because you don’t need to research banner sizes or create the banner files.

Assembling the banners

The main graphics are already created for you as separate files. It’s up to you to use them in a variety of ways to create unique banners. We’ll walk you through the process for the Leaderboard and skyscraper ads.

Building the leaderboard banner

Once again, you will be using the Import command to speed up your workflow.

Choose File > Import (Ctrl+R on Windows or Command+R on Mac) and browse to the meridian_header.png file. This is a flattened PNG, with no special layers or effects.

Click Import, then Open (Windows) or Open, then Open (Mac) and place your import cursor at the top left of the banner rectangle.

Click once to import the image at its original dimensions. On the Mac, you may need to click once to set the focus to the Document window first.

Hold down the Ctrl or Command key and press the down arrow key once. The image is moved behind the banner rectangle.

Select the Pointer tool and click on the banner rectangle.

Press Ctrl+X or Command+X to cut the rectangle.

Select the image and choose Edit > Paste As Mask. The banner rectangle now masks the image at the correct dimensions for the banner.

In the Layers panel, select the image rather than the mask.

On the canvas, locate the blue control handle and reposition the image within the mask. Your final X and Y coordinates for the image (not the mask) should be X: –206 and Y: 32. Don’t use the Properties panel to do this; use the image control handle within the image.


If you want to numerically control the position of the masked object, rather than drag it with the mouse, first break the link between mask and masked object by clicking on the chainlink icon found between the two objects in the layers panel. Then select the image itself and use the Properties panel to alter its location.

In the Properties panel, reduce the opacity of the image to 50%.

Save your file as meridian_banners_working.fw.png.

- CorelDraw 10 : Converting Documents to Web Pages
- Adobe Flash Professional CS5 : Manipulating Symbols in 3D Space (part 2) - Transforming symbols with the 3D Rotation tool
- Adobe Flash Professional CS5 : Manipulating Symbols in 3D Space (part 1) - Controlling the camera view: Perspective and vanishing point
- Adobe InDesign CS5 : Working with Clipping Paths
- Adobe InDesign CS5 : Creating a Compound Path
- Adobe Flash Catalyst CS5 : Merging Changes from Catalyst into Flash Builder
- Adobe Flash Catalyst CS5 : Running a Project in Flash Builder
- Adobe Illustrator CS5 : Selecting Layers & Deleting Layers
- Adobe Illustrator CS5 : Creating Layers - Create a New Top Level Layer or Sublayer with Options
- Dreamweaver CS5 : Establishing Optional Regions (part 3) - Template expression examples
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