spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

Logo

HOME | EXPERTS | GRAPHICS| column 27

Color Power with Gradient Fills: Fireworks Gradients

Ellipse style with preset Copper color.

Same preset color as above, but set as a linear gradient.

Same settings, with texture added.

If you have not used the gradient fill feature in Fireworks, you are in for a treat. The fill works with all objects, text included, which leaves you with full editing options at any time. This is one of the nicest features in Fireworks.

Select the object you wish to fill with the pointer tool. Open the Fill window, and specify the gradient you wish to use.

Gradient fills are are set up in two stages in Fireworks, which provides a great deal of flexibility. In the Fill window, shown at the left, the first selection is set to Ellipse, which determines the shape of the gradient fill. The selection list immediately below provides preset colors. I have included a second sample to show the same preset color using a linear gradient instead of a radial gradient. The sample below shows text filled with a linear gradient and preset Copper color .

You can also add texture to your object at the same time. Choose a texture from the Texture list, and use the slider to set your texture level.

This does not sound like much instruction, but for the preset gradient fills, there is no more to say. The Fireworks vector base means all objects behave in the same way, which makes it very easy to learn how to apply effects.

 

 

 

Custom colors
You can take the power of the preset gradient fills and multiply it many times over by setting your own colors. You must start with a preset color, but since there are many, from simple black to white, to complicated wave patterns, you should have no trouble choosing a base for your custom gradient.

To edit a gradient, choose Edit Gradient from the fly-out menu at the top right of the Edit menu. The Edit Gradient window opens and you will see a color bar with color markers representing where colors change. Click on any color marker and the color palette pops up. Choose your color.

To add another color, click your mouse where you would like a new marker to appear. The marker is assigned the color in the gradient at that spot. Click on the new marker to choose a different color.

To move a color marker, click and drag. To remove a marker, click and drag it off the window.

The lowest sample at the left shows a color and position edit from the sample immediately above. The tan color was changed to dark aqua and moved to the right. The resulting gradient as applied to the text sample we have been using is shown below.

Have some fun with this versatile gradient effect. Carry on to the next page for saving your custom creations and applying transparency to objects with a graduated fill.

 

 

 

Next page

Color Power with Gradient Fills Tutorial Index

Color Power with Gradient Fills Start
Photoshop Gradient Fills
Photoshop Gradient Transparency
PaintShop Pro Gradient Fills
PaintShop Pro Gradient Transparency
Fireworks Gradient Fills
Fireworks Save Fills and Transparency

Front page234567

Developer News
Get Ready for Microsoft's 'Oslo' Modeling Tool
Latest Linux Hits Networking Flaws
Metasploit 3.2 Offers More 'Evil Deeds'



JupiterOnlineMedia

internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info


Legal Notices, Licensing, Reprints, & Permissions, Privacy Policy.

Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

Solutions
Whitepapers and eBooks
Intel Article: Using Power & Display Context in the Intel Mobile Platform SDK
Internet.com eBook: Real Life Rails
IBM SCA Center Article: Simplifying Composite Applications with Service Component Architecture
Intel PDF: Quad-Core Impacts More Than the Data Center
Internet.com eBook: The Pros and Cons of Outsourcing
Go Parallel Article: Scalable Parallelism with Intel(R) Threading Building Blocks
Intel PDF: Analysis of Early Testing of Intel vPro in Large IT Departments
Internet.com eBook: Best Practices for Developing a Web Site
Intel PDF: IT Agility through Automated, Policy-based Virtual Infrastructure
IBM CIO Whitepaper: The New Information Agenda. Do You Have One?
Microsoft Article: BitLocker Brings Encryption to Windows Server 2008
Microsoft Article: RODCs Transform Branch Office Security
Go Parallel Article: James Reinders on the Intel Parallel Studio Beta Program
Avaya Article: Advancing the State of the Art in Customer Service
IBM Whitepaper: How are other CIOs driving growth?
Adobe Acrobat Connect Pro: Web Conferencing and eLearning Whitepapers
Avaya Article: Avaya AE Services Provide Rapid Telephony Integration with Facebook
Go Parallel Article: Getting Started with TBB on Windows
HP eBook: Storage Networking , Part 1
MORE WHITEPAPERS, EBOOKS, AND ARTICLES
Webcasts
Go Parallel Video: Intel(R) Threading Building Blocks: A New Method for Threading in C++
HP Video: Is Your Data Center Ready for a Real World Disaster?
HP On Demand Webcast: Virtualization in Action
Go Parallel Video: Performance and Threading Tools for Game Developers
Rackspace Hosting Center: Customer Videos
Intel vPro Developer Virtual Bootcamp
HP Disaster-Proof Solutions eSeminar
HP On Demand Webcast: Discover the Benefits of Virtualization
MORE WEBCASTS, PODCASTS, AND VIDEOS
Downloads and eKits
Actuate Download: Free Visual Report Development Tool
Red Gate Download: SQL Backup Pro
Microsoft Download: Silverlight 2 Software Development Kit Beta 2
30-Day Trial: SPAMfighter Exchange Module
Red Gate Download: SQL Toolbelt
IBM SCA Download: Start Building SCA Applications Today
Iron Speed Designer Application Generator
Microsoft Download: Silverlight 2 Beta 2 Runtime
MORE DOWNLOADS, EKITS, AND FREE TRIALS
Tutorials and Demos
IBM IT Innovation Article: Green Servers Provide a Competitive Advantage
Microsoft Article: Expression Web 2 for PHP Developers--Simplify Your PHP Applications
Featured Algorithm: Intel Threading Building Blocks - parallel_reduce
MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES
webref The latest from WebReference.com Browse >
Anatomy of an Ajax Application · Popular JavaScript Framework Libraries: An Overview · Controllers: Programming Application Logic - Part 2
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
MS Access and MySQL · Cisco AutoQoS: VoIP QoS for Mere Mortals · While VoIP Adoption Explodes in Enterprise, Carrier Spending Lags


URL: http://www.webreference.com/graphics/
Created: May 27, 2000
Revised: May 27, 2000