Tutoriales de Fireworks Excelentes
- Archivado bajo: Fireworks, Tutoriales
- Fecha: May 6,2008
Adobe Fireworks is the industry leader for prototyping and rapid web-site building. Some of you may not be aware of this, as you may be using Photoshop for each phase of web-site production. The articles, tutorials, and resources gathered here will convince you of the power of this application.
Fireworks uses the native PNG format to keep layered file sizes down. It has multi-page rapid prototyping abilities. It can quickly export code for client reviews at each stage of the design process. It has industry grade exporting and image optimization abilities. In fact, it is the tool of choice for information architects and web designers that build large corporate websites. Why? Well, there is a good reason behind it.
For rapid prototyping and site layouts Adobe Fireworks is definitely an option worth considering.
What is Fireworks good for?
There is a lot of confusion about what exactly Adobe Fireworks is, what it is good for and why one should actually use it instead of Adobe Photoshop or Adobe ImageReady. The answer is simple: Fireworks isn’t a replacement for both tools, but rather a more effective, integrated environment for designing site layouts and quick mockups.
As Stéphane Bergeron puts it, “Fireworks was designed from the ground up specifically for the task of creating website layouts and graphics in an efficient, flexible manner. It is a creative powerhouse that can really do it all, from the creative visual design stages to the slicing, optimization, and exporting of finished web graphics.”
In fact, Fireworks offers a lot of benefits for web developers:
- you don’t need to switch between applications to accomplish different tasks because its tool set is deep enough to cover most of your needs. Both bitmap and vector tools are integrated in one single environment allowing developers to manipulate the layout right away,
- you can select any object and immediately read and set its size and location — Photoshop doesn’t offer such level of flexibility,
- you can use high-quality output and efficient optimization features, reducing the size of Web-ready images while you are designing the layout,
- you can use libraries and templates with Web-elements such as e.g. form buttons — you don’t need to draw them first,
- you can export your Fireworks-mockups to other applications — Fireworks is designed to integrate with other former Macromedia products, such as Adobe Dreamweaver and Adobe Flash.
Adobe Fireworks offers Photoshop and Illustrator integration, multipage support and intelligent scaling.
Fireworks is an optimal tool for quickly prototyping and building web-sites. It is more intuitive and more light-weight compared to other titans of the industry. It is also included in the Adobe’s Creative Suite 3. Below you’ll find Fireworks tutorials which will help you to improve your skills and become more efficient when designing web-sites. Hopefully, they’ll also help you to produce professional and maintainable results.
Fireworks Tutorials
- Glowing light trail
Learn how to draw glowing lines and shape them into a colorful design. Download is available as well.
- Creating an icon in Fireworks
Best practices for icon design in Fireworks are reviewed. Then a step by step tutorial on creating an attractive icon is covered.
- Apple Air Banner in Fireworks
The tutorial author states that the reasons for creating this tutorial are to showcase the simplicity and beauty of apple style design in Fireworks. Follow along and you’ll be able to create these designs quickly as well.
- Rapid Fire #1: Photo-Realistic
The website SixThings has a professional multi-part tutorial series showing quick techniques for improving your imaging abilities in Fireworks. This is part one. As of the time of this writing the series is up to eight rapid fire parts.
- Create a Night Scene
This step by step tutorial shows you how to draw an attractive night scene. The techniques for creating the clouds and moon are especially creative.
- Water Drop
This quick Fireworks tutorial will leave you with the ability to create a water droplet that looks like you could reach out and touch it.
- Motion Blur in Fireworks Tutorial
If your considering adding new filters to your Fireworks setup then check out this tutorial that reviews a Motion Trail filter.
- Create Vista-like Wallpapers with Fireworks
Popular wallpapers available for modern operating systems can be created just as professionally in Fireworks as Photoshop or Illustrator. Learn the Fireworks way in this tutorial.
- Fading An Image Into The Background Color
This video shows how to quickly apply image fades in Fireworks. The commands for doing this are built into Fireworks and take seconds to implement.
- Aqua-effects with Fireworks
A set of tutorials for creating Aqua-effects with Adobe Fireworks. Unfortunately only inSpanishPortuguese. (thanks, Rodrigo!)
- Fireworks for Illustration
Alex Walker gives some tips for improving your drawing skills in Sitepoint’s Design View newsletter. He has this to say, “Fireworks has evolved to become an exceptionally good illustration tool. In fact, over the past 18 months, Fireworks has been the primary drawing tool that I’ve used to prepare SitePoint’s feature article illustrations.”
- Shiny Glass Tutorial
This tutorial will show you how to produce shiny glass letters.
- Gettin’ Gritty with Fireworks
In another issue of Sitepoint’s Design View newsletter Alex Walker shows us how to add some texture to soften the hard clean lines of Fireworks vector tools.
- Creating a Collage with Fireworks
Learn techniques for creating a digital collage in Fireworks bound with digital tape.
- Using the 3D Rotate command in Fireworks CS3
Get access to this command to add to your Fireworks install. Then learn how to use it in this tutorial.
- Vector Masking Interlocking Letters
This is just one of many Fireworks video tutorials available on You Tube. In this tutorial learn how to create overlapping vector letters quickly with the mask tool.
Fireworks PNG Downloads
Downloading artwork and reviewing its layers reveals how it was created. Adobe has some excellent source files available for review at Fireworks Developer Center - Samples. Some of these samples are shown below.
- XD Brownbag Poster
This is a rare example of an image being created in Fireworks and destined for print. The drawing techniques are well worth your time to download and review this source file.
- Logos
Exclusive sample logos created with Adobe Fireworks, shared to show Fireworks users how they were made. You can download the zip file for free.
- Pen and gradient tools showcase
Download and review this creative website template design created in Fireworks - of course.
- Web 2.0 styles for Fireworks
A free set of 48 Web 2.0 styles for Fireworks 8 & CS3.
- RokWebify
The designers at Rocket Theme release new Joomla template designs every month. They switched from using Photoshop to using Fireworks to take advantage of Fireworks rapid website design abilities. Download and review one of their sample templates available through Adobe.
Fireworks Forums
Sometimes it’s easier to ask an expert directly instead of browsing through hundreds of tutorials trying to solve a problem by yourself. Fireworksguruforum will help you to find answers to your question. Besides, the forum also provides a number of tutorials and resources related to Fireworks. Below are some of the Tutorials and PNG downloads posted to this forum.
- A Teddybear
As a tutorial this is short and incomplete. Though it is a beautiful and fun icon design created in Fireworks. The way that each piece is shown will give you an idea of how this was created. The artist also give some tips as well.
- A Simple Little Pencil
This is also an image that shows the pieces that make up its total design. A good learning resource and an excellent icon design.
- Using Blend Paths to Create Wavy, Abstract Background Effects
This is a step by step tutorial that shows you how to create linear blends and popular wavy abstract line designs. These types of designs make great header backgrounds.
- A computer mouse in 7 layers
Another design that shows how each piece fits together breaking down its construction process. A good design to learn from.
Articles About Fireworks
- Wireframing with Fireworks CS3
This articles reviews Fireworks features such as UI Widgets, Multiple Pages, and other built in goodies that make Fireworks a great choice for website wireframing. - Rapid prototyping in Fireworks CS3
“Adobe Fireworks CS3 is a fantastic tool for quickly building out rich Internet applications. Adobe has recognized this ‘niche’ and, in Creative Suite 3, added a number of new features that make it even more compelling in the specific area of rapid prototyping.” Learn the process of making real world application prototypes with Fireworks.
- Using Fireworks CS3 to design effective, interactive site presentations
This article reviews the process of telling interactive stories with Fireworks. Learn the process of creating interactive design presentations. - Enterprise Fire-Flow
Key points about the benefits of Fireworks are reviewed in relation to workflow in a Fortune 500 company. - Export CSS painlessly from website comps in Fireworks
A Technical article showing you the process of setting up and exporting CSS in Fireworks.
- Creating user interface mockups with Fireworks
This is a good beginner level article to begin learning the process for creating interface mockups in Fireworks. - Fireworks: The Things You Might Have Missed
There are often interesting or powerful features that are missed by new users of any program. Review a set of tips aimed at showing you these often missed features of Fireworks. - Why Choose Fireworks?
Choosing to purchase Fireworks will depend on your needs. Review this article for more information on choosing Fireworks.
Further Resources
You can find more Fireworks tutorials and resources in the links below.
- Adobe Support: Fireworks Tutorials
Getting Started: Tutorial and Article Index from the Fireworks developers. - CommunityMX: Fireworks tutorials
An enormous collection of Fireworks tutorials, however not for free. - Free fireworks 8 video tutorials
Learn how to slice up web pages and export in any format in a few easy steps all with Fireworks and video-tutes free video tutorials. - Qrayg Fireworks Tutorials
Learn advanced Adobe Fireworks tutorials that can help you better understand how to make your site more visually appealing. These tutorials were written for users who have a very strong understanding of Fw.
- Adobe Fireworks Design Center
- Adobe Design Center Videos
- Adobe Video Workshop
A bunch of free and professional Fireworks video tutorials. - Tutorialized.com
Over 100 various tutorials for Adobe Fireworks. - Firetuts.com
- Firework Zone
- Fireworks Product Page
- Adobe Fireworks Developer Center
You might also want to take a look at the following tutorials round-ups which we’ve presented in our previous posts:
- Adobe Photoshop Tutorials: Best of
This article provides professional Adobe Photoshop tutorials which can enrich your design skills and improve the quality of your works. - Adobe Illustrator Tutorials: Best Of
A collection of excellent Adobe Illustrator tutorials for beginners and advanced designers. - Adobe Flash Tutorials: Best Of
Hand-picked professional Adobe Flash tutorials. - Tutorials Round-Up
Over 200 Ajax, CSS, Flash, JavaScript, PHP, MySQL, RSS, XML as well as ASP, C++, Perl, Python and Java tutorials.
Sean Hodge is the creative mind behind AiBURN.com, a weblog about design, creativity, inspiration and graphics.
