7 Essential Adobe Fireworks Tips for Web Designers
Adobe Fireworks is one of the best options for web designers who want to create and prototype graphics and interfaces for the web or mobile applications. No matter what other programs you’re used to using, Fireworks has what it takes to take your web design to the next level. Plus, it’s simple to use, and it easily interacts with other Adobe products.
Here are a few tips to help you make the most out of Adobe Fireworks:
1. Use it with Photoshop
While you can use Fireworks as a standalone program for all your web design needs, it frankly doesn’t have as much functionality for image manipulation as Photoshop. If you want the absolute best images and a bit more artistic freedom with photographs and graphics, then you should definitely learn to use Fireworks with Photoshop. Photoshop will make it easier to get professional-looking images, while Fireworks will allow you to optimize them for the web or mobile interfaces. Since they’re from the same company, they work together smoothly, and you can easily take files from one to the other.
2. Use it with Dreamweaver
Dreamweaver and Fireworks also go together quite smoothly, since you can take a design from Dreamweaver, paste it into Fireworks, and then put it back into your Dreamweaver interface. It’s a very efficient process, and using both together makes it easier to design complete, professional-looking web pages.
3. Consider some extensions
Another option for adding functionality to Fireworks – besides just using it with other Adobe programs – is to add some extensions. There are many great, popular extensions out there that can help you get more out of Fireworks. For instance, Harmonia helps you create perfect color schemes by picking one color from the color spectrum and automatically providing you with complimentary, triad, split-complementary, and analogous colors. Bend 1.0.2 adds a bloated or spiked effect to a path, so you can create more interesting designs. Adding extensions like these means you can do more in Fireworks without having to use a completely new program to get the functionality you want.
4. Learn to create swap images
Swap images allow your website design to incorporate more images without becoming cluttered. These images make the website more interactive, as well, which is something that website visitors love. If you want to create a much sleeker website, swap images that go along with links is definitely the way to do it, and creating them using Fireworks is easy.
5. Create images in particular shapes easily
One of the best things about Fireworks is that you can easily paste an image inside of a shape so that the image takes on that exact shape. First, just make the shape from your toolbar, and size it where you want it. Then, select and cut your image, and paste it inside of the shape. You can move the image around inside the shape so that you get it exactly where you want it. This can be really helpful when creating photograph-based web graphics for your website.
6. Play around with effects
The only way to get to know everything Fireworks can do is to play around with all of the different effects that are available. Set aside some time when you first start using Fireworks just to play around with different effects. You can do everything from photo optics to feathered edges to transparent images, but you’ll never know what you can do until you’ve spent some time working with Fireworks and just getting to know the program.
7. When purchasing/upgrading Fireworks, use your business credit card
Daniela Baker from CreditDonkey says, if you are freelancing or have clients, you might as well expense your software expenditures. If you’re a web designer, start your relationship with Adobe Fireworks by purchasing it with a business credit card.
These seven essential tips will help you get to know Adobe Fireworks better so that you can make the most of it. This is a great web design tool that will be really simple to use if you have familiarity with other Adobe products. Even if you don’t, though, learning to use the Adobe Creative Suite is the first step in becoming a better web designer!
I haven’t used Fireworks since Adobe took it over. Have they updated it in the last 6 yrs? What is it that Fireworks can do, that Photoshop can’t?
Another good tip for a webdesigner such as myself as at the moment I use Photoshop but Fireworks has been recommended to me. However the actual content of the article is severely lacking – where’s the ‘essential’ tips?
Sorry but this is a pointless article showing that Fireworks simply isn’t worth using without making changes to it which is wrong.
I have designed many good sites in Fireworks without Photoshop, Fireworks and Illustrator go perfectly together.
I use Fireworks all the time for simple designs. I think it’s much easier to use than Photoshop. I’m a fan of both programs, but seem to use Fireworks more often.
Very Great tips, i am new in Graphic design industry, so this will gonna help me :) thanks for sharing :)
well I have Fireworks and Dreamweaver cs5 but I dont know how to get dreamweaver to open the designs I made in Fireworks?
reasons for using Fireworks and not Photoshop when creating on-screen graphics:
FILTERS
PS: Adding a blur to a shape, you have to rasterize it.
FW: You can add any filter to any object
PS: Suddenly you can’t use a certain filter for a certain layer. There are no explanations on why this is the case and you can’t even see the fly-out menu with filters that “used to be there”.
FW: You can apply anything to anything at any time
VECTORS
PS: Shape layers are more confusing than they have to be. You can’t apply effects to vectors in Photoshop.
FW: You can interact with vectors directly in the artwork, just click on it and you can move it around without having to pay close attention to which layer the object is on.
OBJECT PROPERTIES
PS: Rounded rectangles: You can’t change the radius after drawing it. You can’t see the result of the radius until you have drawn it.
FW: Each object can be reviewed and analyzed quickly by looking at the property inspector when the object is selected. A rectangular shape has a “rounded corner” setting and when changing the value it updates in real time.
CONTROLLING & SELECTING
PS: You can select an object from the canvas by holding down ctrl (PC) but after adding a few objects to the artwork you basically have to work from the layers if you don’t want to interact with pop-up dialogues telling you layers are empty or locked etc. You basically have to name every object you create in order to find it again. Selecting something from the canvas when you get a complex document is just impossible. You end up “searching” for your objects for way to long. This makes it trickier to “sketch” or make something quickly in PS. Example: Draw ten lines on top of each other in random directions. Try moving or changing one of the lines without interacting with the layer panel. It’s pretty much impossible without naming every object. The objects you draw are “sinking into the artwork” and the more you create, the harder it will be to get hold of them.
FW: Every object lights up as soon as you hoover over it, letting you know you can select it by just clicking. If you need to select an object that lies below the highlighted one there is a “select behind” tool
PIXELS
PS: Nudging a pixel when zoomed in further than 100% or less than 100% and the object will move in half-pixels (etc). There isn’t even a setting to get the nudging to snap to pixels.
FW: One nudge click equals one pixel. You can set each object to be anti-aliased or not, there is even a “snap to pixel” fuction for objects that might be off-pixel, real simple (when using sub selection tool you can move anchor points to half-pixels)
LOCKING
PS: Even if a layer is locked you can accidentally select that layer.
FW: A locked layer is locked and you will not be bothered by it.
TRANSFORMATIONS
PS: When a transform is ongoing, or a text field is being altered, you can do nothing except work with the transformation. You can’t close a document, you can’t “unselect” by clicking on the outside, in other words you are locked until you press enter (or ctrl-enter when working with text). Because of this you have to let go of the mouse/pen and interrupt your workflow.
FW: You hold down ctrl and press outside of the object and you are ready to interact with other objects. A very quick way to work.
HIDING
PS: When you press ctrl-H it means you want to hide all the stuff around an object but when you do that for a text you still have the “transformation box” around the string.
FW: Ctrl-H hides everything and you can see the artwork clearly.
MULTIPLE OBJECTS
PS: If you want to apply a layer blend mode for more than one object you have to do it one object at a time. When selecting two at the same time, PS “forgets” what modes they have. Even if they have the same mode.
FW: You can select multiple objects on multiple layers and create the same blend modes for them. You can add the same effects to them etc. Even if they have different properties before.
COLORS
PS: When selecting a color for an object or a shape you might want to select other colors than the ones in the artwork, say for instance the color of a shape in the layer panel. You can’t.
FW: You can sample colors from anywhere on the screen, even from the FW GUI if you would like to.
GRADIENTS
PS: Handling gradients is cumbersome.
FW: Every vector object can be set to have “Gradient fill” instead of “Solid fill” in the property inspector. The gradient is then controlled from either the property inspector or the actual object. Like in Illustrator but in a more straight forward way.
– – –
Other benefits with FIREWORKS:
– PAGES. Great (and fast) way of organizing your work.
– QUICK PROTOTYPING with linking and toolboxes filled with functional UI elements
– SYMBOLS. Well developed in FW. Compared to PS and AI the handling of symbols (smart objects) is superior.
– PROPERTY INSPECTOR. Instead of showing effects etc in the layer panel you see and alter the effects by clicking on the object.