Adobe Fireworks Tutorial: From UI Design to CSS

adobe fireworks tutorialWhile it may not be as well known as Adobe Photoshop, Adobe Fireworks is one of the most frequently used apps in any graphic designer’s toolkit. Built specifically to handle the needs of graphic designers, it’s a powerful bitmap and vector editor.

Although Adobe officially announced that Fireworks would be phased out early last year, the software remains immensely popular. In this Adobe Fireworks tutorial, we will look at some of the amazing things you can do using Adobe Fireworks CS6.

Are you new to Adobe Fireworks? Learn the basics of Fireworks CS6 by enrolling in our course, Fireworks Web Workflows. From vector icons to jQuery themes, learn how to use the power of Fireworks CS4 and get your website designs converted into HTML and CSS quickly and easily.

What is Adobe Fireworks?

To the layman, Adobe Photoshop is the application of choice for all things involving digital design, from websites to photo editing. Adobe Fireworks is built specifically for rapidly creating designs that would be time consuming to make in Photoshop.

Adobe Fireworks also offers several features that are missing – or far more difficult to use – in Photoshop. Users can add hotspots to their designs and rapidly built web interfaces, symbols, and other elements to their designs.

Fireworks CS6 also integrates with other Adobe applications like Dreamweaver and Flash, making it an excellent choice for designers that use Adobe’s software suite to built websites and application prototypes in a single software suite.

Adobe Fireworks is the application of choice for thousands of web designers and UI specialists around the world. Learn how you can create amazing web graphics with Fireworks by enrolling in our Instant Web Graphics course.

How is Fireworks different from Photoshop?

Think Fireworks sounds like Photoshop? Don’t worry – you’re not alone. There’s a debate among web designers over which application is best. Is it Fireworks, with its simplicity and convenience, or Photoshop with its raw image editing power?

One of the biggest benefits of Fireworks is the simple way it handles both bitmaps and vectors. Since all of the graphics you create in Fireworks are vectors, you don’t lose any quality when you scale them up or down in size.

Fireworks also has simple built-in tools for creating complex shapes that would take far longer to make in Photoshop. Squares with rounded corners, for example, are an absolute breeze to make in Fireworks compared to Photoshop.

Ultimately, both applications are powerful, and both can be used for similar work if they’re used properly. However, the convenience of Fireworks makes it an easy pick when it comes to quick and simple prototyping and user interface design.

Finally, the simple CSS integration in Fireworks makes it an incredibly valuable tool for web designers. Instead of writing CSS manually, you can export CSS directly from the Fireworks interface using the CSS Properties panel.

Are you choosing between Fireworks and Photoshop for web design? Learn how to design graphics for your website using Fireworks and edit HTML and CSS with our course, Basic and Advanced HTML Lessons.

Creating product mock-ups in Fireworks

Ask a designer what word pops into their head when they hear ‘Fireworks’ and they might answer ‘mock ups.’ Fireworks is a great tool for building visual prototypes for web and mobile applications in minutes.

Fireworks is a complete WYSIWYG (what you see is what you get) editor. This means that what you see on the screen while you’re editing your design is exactly what you will get once you save it.

Do you want to piece together a web interface? Just select elements from the sidebar and place them on the page. Fireworks has powerful vector tools that make building a sidebar, dropdown menu, or any other on-page element remarkably simple.

Better yet, you can quickly edit your vectors to create on-page icons, user interfaces, and other objects that would take hours to design in Photoshop. From basic buttons to data entry forms, designing application elements in Fireworks is no problem.

Building functional HTML/CSS websites in Fireworks

Do you remember designing websites in Adobe Photoshop, slicing your work into divs manually, and exporting a page of mangled code? Adobe Fireworks makes the once complicated process of HTML and CSS exporting remarkably simple.

Since Fireworks is completely compatible with Dreamweaver, exporting your web design work as HTML and CSS files is easy. In fact, your website’s HTML appears as you’re designing it in the background, making the process unbelievably easy.

Want to change the color of a border? Either edit the CSS value or use the Fireworks interface to make the change. Want to make a new class for parts of your design? It’s easy – either pick the parts in Fireworks, or make a one-step edit to your CSS files.

Unlike most other WYSIWYG website design programs, Fireworks exports exactly what you see on the page. It’s also compatible with modern design standards like HTML5 and CSS3, making it the perfect tool for any web designer’s arsenal.

Do you want to learn how to build responsive websites in minutes? Enroll in our course, Building Websites with Dreamweaver CS6, and learn web design using Fireworks in over 47 lectures and 9.5 hours of video.

Exporting CSS properties from your Fireworks creations

Have you designed an video progress bar, a navigational sidebar, or a cool social widget in Fireworks? Export the CSS so your design looks exactly as good on your website as it does in the Fireworks interface.

Fireworks generates CSS properties on the fly as you create and edit objects. This makes adding styling information to your CSS files as a new style or ID as easy as copying and pasting.

Let’s say you’ve designed a grey rectangle in Fireworks with a 2px shadow. Select the CSS Properties panel and click on the vector object and you’ll see the CSS data, from background-color to width and height listed inside a table.

Below the table, you’ll find the CSS in raw code, complete with a series of optional checkboxes for optimizing your code for Firefox, Webkit, Internet Explorer, Opera, or to include comments. It really couldn’t be easier, could it?

Copy and paste your CSS into your favorite text editor (like NotePad++) and get to work tweaking it to your liking. Need help with CSS? Enroll in our Learning CSS course to master the basics of CSS style sheets in 33 detailed video lectures.

Is it worth learning how to use Fireworks?

Since Adobe is ending support for Fireworks, some graphic designers have argued that learning to master the application isn’t a smart time investment. Others claim that, since Fireworks is still widely used, it’s an important platform to master.

Although Fireworks is due to be phased out in the coming years, becoming a skilled Fireworks user still has huge benefits. From user interfaces to simple web design, it remains the application of choice for almost all digital graphic design projects.

What’s great about Fireworks is that its user interface is very similar to other Adobe applications. This makes the transition from Fireworks to Photoshop or Illustrator a quick and simple process.

Try it for yourself today to become an expert at using Adobe’s most flexible and convenient vector and HTML and CSS editing application!