Helpful Tutorials and Tips for Adobe Fireworks

Adobe Fireworks is a very old, but efficient UI development tool. It boasts a wide range of tools and features that are essential for any beginner or professional developer. Not only that, there are many online sources that offer downloadable resources to aid in your projects. However, Adobe Fireworks is slowly becoming a thing of the past due to Adobes decision to feature freeze Fireworks.

Back on May 6th 2013, Adobe published a blog post (the website can take some time to load). This post detailed their plans for Adobe Fireworks. This included them feature-freezing Fireworks on Version CS6. However, it did not mean that they will stop selling Fireworks. Instead, they said ‘We will continue to sell Fireworks CS6 as well as make it available as part of the Creative Cloud.’ There were also mentions that they would provide bug fixes if necessary and continue to develop Fireworks so that it runs on future versions of Windows OS and Mac OS X.

As it stands, there are still quite a lot of designers and developers that still prefer to use Adobe Fireworks. There are other programs that Adobe and other companies have developed which is slowly taking more and more people away from using Fireworks. Adobe are one of the companies that have been looking at creating new programs for designers and developers to use that further their capabilities. This is why they have been and still are developing programs like Adobe XD, Photoshop and Illustrator. These platforms offer some of the same tools and are in some ways, an improvement from Fireworks.

Fireworks still offers a wide range of tools, but it is slowly falling behind of other platforms being developed now-a-days. This is not only because it is an old platform which is slowly relying more and more on its community to create tools and advancements, but it is now struggling to run on the latest Mac operating system. Against all these points, there are still some designers that will use Fireworks for certain projects. This is because Fireworks CS6, with extensions installed, can still compete with the latest design platforms ad offer its users a very easy to use platform to create their product.

Extensions are available due to the large community of developers that have created them. These open new ways to use the pre-existing tools in Fireworks to further someone’s capabilities when developing icons or UIs. These are what cause some designers to keep using Fireworks as their go-to program when trying to develop a product. Some will combine the use of Fireworks with other programs as well.

In this article, I will go through some online sources that have tutorials on different tricks and effects that you can re-create yourself using Adobe Fireworks CS6.

Tutorials

Achieving Pixel Perfection when Designing in Adobe Fireworks

Adobe Fireworks excels when it comes to designing and developing UI’s and icons. It is an excellent tool that when used correctly, can create outstanding graphics for both apps and websites. Achieving pixel perfection isn’t as easy as what people would hope as there are just so many ways to create the same effect. Each method changes how the effect looks. In the article “How to Achieve Pixel Perfection in your Designs with Adobe Fireworks” by Ivo Mynttinen; you will discover some of the best ways to achieve pixel perfection.

From creating smooth glow effects using a feathered edge to getting the most out of your text; this article has a lot of useful information for both advanced and beginner users of Adobe Fireworks. When looking at trying to develop a new icon to creating a complete UI for a website; this article has some very helpful tips that will further your knowledge and skill base when using Fireworks.

Creating a Brushed Metal Effect

When developing a background for a website or creating a new icon, sometimes you will want to use a brushed metal effect. Again, there are many ways to create this effect which will mean the outcome is never the same. This video tutorial however will give you guidance in developing a good looking brushed metal effect. For those that do now know, brushed metal is a term used for metal that has a unidirectional satin finish which is produced by a special polishing process. This then creates the distinctive look we can see.

This video titled “Creating Brushed Metal in Adobe Fireworks” by Rogie King is one of the more complex tutorials out there where he shows you how to develop a stunning brushed metal background for two Rainboxx logos. Rogie King has done a video tutorial on designing this logo as well!

Pasting Attributes Video Tutorial

Another one of Rogie Kings video tutorials, titled “Pasting Attributes in Adobe Fireworks”, shows you how to copy and paste attributes between different objects within the canvas on Fireworks. This is especially helpful when looking at trying to use the same attributes elsewhere in your design. The option to copy and paste attributes is easy to master, but very helpful in the long run. Two commands can be used to make this process even easier and these are ‘Ctrl/Cmd+C’ and ‘Ctrl/Cmd+Alt+Shift+V’.

3D Simulation with Reflection in Macromedia Fireworks 8

There are many effects that you will want to create to achieve your goal with the final design of your UI or icon. This might include creating a 3D simulation with a reflection. This makes parts of your design stand out and can be a great tool to have to hand. A step by step guide created by Lucian Dragomir and titled “Realistic 10-step 3D simulation with reflection in Fireworks 8” is available online to provide you with guidance to creating this effect yourself. As you can tell from the title however, this is not done using Adobe Fireworks CS6. Instead this effect is designed on Macromedia Fireworks 8 which was another one of Adobes platforms.

Website Design Tutorial

Website design is an extensive and quite long process when trying to create a brand-new template for your website. This tutorial goes through each step in the development of a website and what needs to be considered during this process. From the initial design stage to the final aspects of creating each aspect of the website; the “Web Site Design Tutorial: Wellknown.as Case” tutorial by Fabio Sasso provides information and tips you will need when designing your own website.

There are many ways to design a website and every designer will have their own way of doing things. Therefore, you might not agree with some of the processes mentioned in other website design articles or you might think of easier ways of getting the same results. However, you will find information that will aid in your own development; as well as lead you down the road to becoming a professional website designer and developer.

Creating Fading Light Vectors

This is an old article, published back in 2008, but it still offers some helpful tips when creating fading light vectors. Creating fading light vectors is an easy process that doesn’t take too long to get a good result. This tutorial was made using Fireworks CS3, but with the advancements up to CS6 you are still able to get a high-quality finish with these effects. The image used in the tutorial is also available for download within the article so if you wished to go through the process yourself, you can give it a try. Published by Caio Call, the article “Creating Fading Light Vectors in Fireworks” is the perfect place to find out more on the kind of lighting techniques available for you to utilise in your own designs.

LED Cinema Display in Fireworks

Sometimes, Fireworks is used to create displays like TVs or phones. The article “LED Cinema Display in Fireworks” by Fabiano Meneghetti explains the process involved when designing a LED cinema display. This can be used in a wide variety of ways, not necessarily to create a TV, but can be used to create astonishing frames for images or icons. The implications of these kind of design elements opens a lot of possibilities and will be helpful to have these kinds of skills under your belt!

Light Painting in Fireworks

Obviously, with the many programs available now-a-days that do the same things as Fireworks, doing some designing can be easier on different platforms compared to others. This was best shown by the author Fabio Sasso who went through to create the same effect in four different programs. His “Light Painting in Fireworks” article is one of his articles that explained the process through using Fireworks. The other three programs he was going to recreate this effect on were Photoshop, Pixelmator and GIMP.

He used Photoshop first and then went on to create the effect using Fireworks which proved to be a more difficult task as there were so many different combinations of effects and blend modes. He did however find the simplest combination that led to the same result as Photoshop.

Creating a Realistic Peelable Sticker Effect

There are many different effects available to be used in different designs. Depending on what the theme is and what it is you are designing, realistic peelable sticker effects are a great method to get someone’s attention and interact with your design. The “Creating a Realistic Peelable Sticker Effect in Fireworks” by Lucian Dragomir is a perfect example as to how simple it is to make, but also how good looking a peelable sticker looks.

Refining Your Design in Adobe Fireworks

This article is all about developing your own skills and knowledge when using Adobe Fireworks. This is a perfect guide for anyone that is new to or may not be as used to using Fireworks as others. From some features that Benjamin De Cock thought should be mentioned to techniques and methods that are to aid in improving your designs. In the article “Refining Your Design In Adobe Fireworks”, there are a variety of methods and techniques that you might have not thought of that will aid in furthering your skills and knowledge. The article is quite old, but it is still a great guide!

Designing a Rocket Icon

An article titled “How to Design a Rocket Icon in Adobe Fireworks” by Fabio Benedetti is a great place to look if you are looking for inspiration or a tutorial on how to design an icon. From the initial sketches and idea collection to the development of your icon in Adobe Fireworks. This encompasses everything you will need to know when designing your own icon. The assets used are available within the article as well. This is so you can download the assets and recreate the same icon yourself.

We even have an article available on our own website for a guide to creating a simple boat. This is a quick guide contains the steps involved when creating the a small boat icon. Some of the steps are very similar to designing a rocket ship. The article “Designing a Boat Icon in Adobe Fireworks” will teach you how we made a small boat using Fireworks.

There are many tutorials online that will provide you with the knowledge and skills you need to develop further as a designer. From learning different tricks and effects to full methods of creating an icon from scratch; all of it can be found online.

Tips

1, Use online sources

All tutorials offer tips and explanations on why some effects or tools are better than others. People's opinions on what is happening on Fireworks can be found online as well. This is the same for designer's tips on the best ways to use the platform. These apply to anyone that is either planning or is using Fireworks for their own projects. To find out more on what you can use Fireworks for, look at online sources. They contain more information to aid in your projects.

2, Get used to the tools available

I have spoken to some designers and have got mixed responses. One of the main points that were brought up was that Fireworks boasts an easy UI. Another regularly mentioned point was the amount of pre-set shapes available in the vector tools. The tools available are much easier to work with in some instances than they are on other platforms. Fireworks enables the user to control each point of the vector more easily. You are also able to add multiple layers of shapes into your design. This, when used correctly, can be used to develop more complex designs.

3, You don't necessarily need to have extensions

The extensions that the community have developed will aid in your development in some instances, but the standard install version of Adobe Fireworks is still just as good. The standard install version still boasts a wide range of tools that are effective and helpful for a designer. From simply inserting and transforming shapes to creating multiple layers to create an astonishing final design; Adobe Fireworks ensures that any beginner or advanced designer can create the UIs and icons that they need to without issues.

4, Experiment with tools, shapes and filters

For beginners that are thinking of using Fireworks to further their designing talent, it is always best to have a look at any tutorials you see to try and get to grips with the different parts of the platform. Also, it is best to experiment with the tools you have available to you to see what you can create. Through doing this and using the different pre-set shapes and filters, you will slowly get to grips with how the platform works and how to make professional looking designs. No matter if the design is simple, using the right shapes, tools and filters can make the simplest of designs look professional. It is as simple as inserting a shape and adding a few filters. This shape is both easy to make and with the filters, it looks very professional.

Different effects work well for different applications. Some effects are best when trying to design a website while others are better used for icons. When designing buttons, they will often look better with subtle bevels for a little bit of a design flair that makes them stand out more within a design. However, when you are designing an icon, they often look much better when left flat with a slight gradient or glow effect. These different variations must be experimented with to get a better understanding of what works where.

5, Use web layer to export designs in smaller sizes

Making use of the web layer in Adobe Fireworks is also key for any user of Adobe Fireworks. This is because it allows you to slice up a more complex design into much smaller pieces. This is particularly helpful when trying to export your design. After creating a wondrous design, trying to export it completely might make the file size too big. Using the web later allows you to cut the design into pieces so that each part can be exported separately; keeping the file size much smaller. This tool is very helpful for email templates as the design can be developed as a whole in Fireworks. This can then be broken down into each element for it to be exported.

The Conclusion:

This article will have hopefully given you some advice and knowledge for using Fireworks. From adding effects to creating a whole icon; there are many tutorials and advice websites out there that will highly benefit any beginner or advanced designer using Fireworks.

Over time, there will be tools that will replace Fireworks completely. This is due to the advancements other companies and Adobe themselves are making. With more programs becoming available that offer the same kind of service, tools and effects; more and more designers will be going to these new tools due to the possibilities of even further developments. However, for now, Fireworks is still a viable and helpful tool for anyone looking to create an astonishing design.