15 Useful Adobe Fireworks Web Design Tutorials

If you’re interested in improving your skills with Fireworks, here are some of the 15 best adobe fireworks tutorials for web designers.

The Power of Adobe Fireworks: What Can You Achieve With It?

Finding the answer to this question is not so easy. Is it a prototyping or wireframing tool? Or is it a powerful graphics editor? Is it a Photoshop competitor, but for Web design only? Is it none of these, or all of the above?

fireworks-cs5-splash-screen-12

Refining Your Design In Adobe Fireworks

While certainly not as well known as Photoshop, Adobe Fireworks is a great tool for creating user interfaces, website designs and mock-ups, wireframes, icons and much more. However, most designers who have been using Photoshop for years may find Fireworks a bit awkward at first. Fireworks does have a slightly different workflow and requires a slightly different approach than you may be used to.

bdc-monochrome-icons-1

How To Create a Slick Navigation Bar In Adobe Fireworks

I believe Fireworks is better suited for web-design work and I usually prefer it over Photoshop. After all Fireworks was created with web-designers in mind and it allows us to quickly prototype and design for the web, so let’s see what it can do.

nav-2

The Power of Symbols in Adobe Fireworks

In this zippy tutorial, I talk about using symbols in Adobe Fireworks and how they can be used as a powerful construct and time saver when using repeatable graphics.

fireworks-3

Extracting Logos Using Levels In Adobe Fireworks

In all the years that I’ve been using Adobe Fireworks, I have always had to perform one task in every project: remove the background from a logo. Most of the time, it’s because the client doesn’t have the original raw file that their previous designer used to create their company’s logo, or because I need to work with a bunch of affiliate logos that I downloaded from the Web and not all of them have transparency information.

elul-final

The Abduzeetles Rockband Website in Fireworks

What’s up guys, this tutorial is a kind of special for me, since I saw for the first time this site I was amazed with the colors, the shapes and the real life that it appears to be. I’m talking about The Beatles Rockband’s website, it’s simply wonderful. And thinking on it I decided to redesign it in Fireworks, but now our own site, that we’ll call the Abduzeetles Rockband!

Resultado_5

Creating a Basic Wireframe Using Adobe Fireworks

Wireframes are essentially the backbone to your website’s overall design. Whether you are using complicated programs or a pen and paper, a wireframe is the road map for site navigation, design elements and overall effectiveness of the layout.

cawuaf-6

Build a Promotional iPhone App Website Wireframe in Fireworks

Fireworks is a great tool for creating a wireframe and while it doesn’t work perfect with Photoshop, you can export over there and then build off your wireframe. We’ll cover the design process of creating a wireframe for an iPhone application website in Fireworks. For those of you not familiar with this program, it will be a good jumping off point for using it to wireframe your web design projects. This is a first part of a multi-part series and will be fun!

ipjsk-7

CSS Sprite Sheets in Fireworks CS6

Sprite sheets allow designers to combine multiple images in one place and then call different sections of the image to display. By loading an entire sprite sheet into memory, it helps to avoid image swamping that will slow things down. Brand new features in Fireworks CS6 will slice up an image, give each part a name and export the CSS to use with them.

css-sprite-8

How to Design a Website with Fireworks

In this video tutorial, we’ll teach you how to design a home page for a website using Adobe Fireworks CS4 . Over the course of the video, you’ll learn numerous tips and tricks to accomplish the final design, including how to work with a grid.

web-design-9

Web Site Design Tutorial: Wellknown.as Case

So in this tutorial I will show you a little bit of how I created it using Fireworks. Of course you can do the same thing in Photoshop, the commands will change a bit but the process is practically the same.

site-10

Create Interactive Prototypes With Adobe Fireworks

Prototypes are also essential in Web projects. For example, when you plan an online ordering process, you have to be sure that every step is correct and that no critical elements are missing. Usually, you would create different screens for all pages of a website, ordering process or application workflow, and then describe the connection between them. This way you can see whether the interactions work as expected, you can test the product with different users, and your client can review it.

prototypes-11

Create a Call to Action Button With Adobe Fireworks CS4

Call to Action is a web design term used to describe any type of element that solicits a response from a user. In this 11 minute video tutorial I demonstrate how to create a call to action button using Adobe Fireworks CS4. In this tutorial I demonstrate several features of Fireworks CS4 including how to use gradients, add shadowing, create shapes, and add filters and effects.

create-call-to-action-button-fireworks-13

Image Slide Show in Adobe Fireworks

How do you create a slide show without having to write a bit of code? The answer is Adobe Fireworks.

feature_green_14

Grooveshark design style in Fireworks

For this tutorial we’re not gonna apply any great effect or use a unknown tool, but only show you a simple way of making neat effects that will make the difference in a layout.

fw-15

Leave a comment

Please be polite. We appreciate that. Your email address will not be published and required fields are marked

This site uses Akismet to reduce spam. Learn how your comment data is processed.