Fireworks Final Files

Fireworks Recording

In this session, explore how Fireworks compares to Photoshop and why its particular feature set provides a great way to quickly sketch out web site user interfaces and communicate with others about design ideas. If you’re involved with the design of web pages, web graphics, icons for the web, or any online application, Fireworks is a useful tool.

Who should use Fireworks?

• designers who are designing things for online display (not for print)
• non-designers who need to communicate with others (including designers and developers) how you’d like a web page or application to look or work

In this session, we will cover:

• primary differences between Photoshop and Fireworks
• how Firework’s vector-based drawing tools allow you to quickly create artwork and interface elements
• using the Common Library to get common interface elements like buttons into the design
• using the Styles panel to quickly apply styles to interface elements
• rearranging and resizing elements
• the difference between Pages and Layers panels, and how to use them effectively
• exporting designs into PDF format for collaboration and feedback from others
• exporting designs from Fireworks into CSS-based layouts ready for Dreamweaver

The question that’s never asked is: “How do you come up with these colors?“  And by “these colors”, I’m referring to the 6-digit hexadecimal codes that we use throughout the Dreamweaver and Fireworks workshops to designate specific colors for display on the web:

What In The Heck are Hexadecimal Values?

Hexadecimal values are a way of encoding color information for the computer.  Each hexadecimal value corresponds to an RGB value. RGB is an acronym for Red/Green/Blue, and is the model by which monitors and screens display color; in fact, the first two digits of a hexadecimal value correspond to the amount of red in the color, the second two digits correspond to the amount of green, and the last two digits the amount of blue.
Most of the time in our workshops, however, we don’t utilize a nice-looking hexadecimal like #008000 for plain green; rather, we might type in a value like #A8CD12 for a specific shade of lime green. And then we’ll type in a different hexadecimal value to get a dark green that will look good next to the lime green.  Well, how do we find a set of colors that will work well together?

Understanding how color works (and how colors work together) is a field of study into itself, and it’s also big business. (For examples, see the Pantone Fashion Color Report or the Benjamin Moore Colors For Your Home 2009.) What if you don’t have a giant budget to hire color nerds or the time to engage in learning color theory?

Four Tools to Find a Pleasing Color Palette

Here are four free tools to help you find a color palette both for onscreen work as well as for desktop publishing projects:

1. Color Scheme Designer (http://colorschemedesigner.com/): The Color Scheme Designer allows you to play on a color wheel, and the designer will keep your color choices on track within a particular color grouping (monochromatic, complementary, analogic, etc.) and show you a preview of a suggested color scheme. As a bonus, this is the only tool that allows you to adjust the color scheme to see what it will look like to people who have color blindness or other color vision deficiencies.
   
2. Color Palette Generator (http://www.degraeve.com/color-palette/): Here, the idea is that you’ll provide the URL of an image you like, and the Color Palette Generator will assemble a color palette for you based on the colors in the image, complete with hexadecimal values.
   
3. Kuler – available via: kuler.adobe.com, Photoshop CS4 (In the File Menu, go to Window –> Extensions –> Kuler), or Fireworks CS4 (in the File Menu, go to Window –> Extensions –> Kuler): A cross between a social networking tool and a color palette generator, Kuler allows users to create and submit color palettes for rating by other users. It is possible to browse and search user-submitted palettes, and, once you find one you like, to edit it and create something new. While the user interface is not quite as simple as that of the Color Scheme Designer, it also allows you to limit colors within groups (monochromatic, complementary, etc.) and adjust the brightness easily.
   
4. Colour Lovers (http://www.colourlovers.com/): A site dedicated not only to color palettes, but also individual colors and patterns suitable for web page backgrounds. Like Kuler, it supports browsing or searching, and once you find a palette you like, you can download it in various file formats (once you complete the free site registration, that is). Also a nice resource for color inspiration.
   

Adobe is one of the largest software companies in the world, and while most people are familiar with their core apps, like Photoshop, Dreamweaver and Flash, there are many applications included in the suite that you might not be familiar with. In this post, we’ll take some time to examine all the different applications that you can install with the various Adobe suites. We will focus on the applications in Design Premium CS4 and Production Premium CS4. There are many add-ons and extra technology included in the installers, but we will look only at the applications included.

Design Premium CS4

The Design Premium suite is probably what most users will download first. This package includes the most common applications that Adobe offers. Let’s look at what’s included.

Photoshop – This is Adobe’s flagship application, and the one most people are familiar with. It is a professional quality photo editing program. It can be used by basic users, but is designed for advanced and professional users. Some tasks you could complete in Photoshop include resizing images, color correcting, making a collage of images, and even saving as a different format. More complex tasks can include retouching and repairing damaged images, or removing distractions.

Dreamweaver – Dreamweaver is a website creation program designed to allow users to see the web page they are creating as they are creating it, rather than typing in code. As the user creates parts of the web page, Dreamweaver writes the code in the background, which the user can view and alter as necessary. Dreamweaver also offers Cascading Style Sheet integration, and the ability to add code in several popular web programming languages like PHP and ColdFusion.

Flash – Flash is an animation and application development platform. You can create simple or complex animations, and use the ActionScript programming language to create full featured web applications. Because it combines animation and programming, it can become a very complex application, but it also means that you can create very impressive applications once you have some knowledge.

Acrobat Professional - Acrobat is a program that creates and edits PDF documents. PDF documents are designed to be read by anyone with the freely available Adobe Reader, but with Acrobat Professional, we can create these documents and add special features. We can create PDF forms, and add links, bookmarks, and file attachments to standard PDFs. We can also add security features to our PDFs with this program.

Illustrator – Illustrator is a program designed for the creation of print graphics. It is a program designed for artists, and requires good knowledge of the use of the tools and drawing in general to get good results, but with some time and effort, most users can become proficient with the tools.

InDesign – InDesign is a page layout program that can be used to create newsletters, brochures, flyers and even more complex publications like magazines and books. InDesign works very well in any instance where text and graphics need to be placed precisely. Again, it is a program that benefits from a solid knowledge of the tools and design principles, but is usable for basic users.

Fireworks – Fireworks is a lightweight graphic editor that is focused on web graphics. We can quickly optimize web graphics, and create web specific graphics like animated GIFs, image maps, and navigation bars. It is excellent for quick re-sizing and saving in web based formats like JPG, GIF and PNG.

Production Premium CS4

The Production Premium suite is focused on video editing and creation. These programs are likely less familiar to a broad audience. Also, Photoshop, Flash and Illustrator are included with this package, which are discussed above. These programs are almost universally more complex than the Design Premium applications, because the concepts are so much more complex.

Premiere Pro – Premiere Pro (not to be confused with Premiere Elements, a separate program) is a high-end video editing program. It is a complex program that requires a good deal of skill and know-how to use proficiently. Basic users are probably more interested in the more basic Premiere Elements (available as a separate download for IU staff and students from IUWare), or Windows MovieMaker, which is available by default on Windows computers.

Soundbooth – Soundbooth is a sound recording and editing program that comes with the Production Premium suite. In this program you can alter pitch and tone, change the sound levels, remove and add audio, and even add special effects to your sound recording.

After Effects – After Effects is a program that allows you to add special effects to videos like animation, or screen overlays. It can also do video touch-ups, much like the healing tools in Photoshop can touch-up photos. It is another program that requires a lot of knowledge of video formats and the tools to get good results.

Encore – Encore is a fully-featured DVD creation program. It allows us to create a DVD with all the features of a professional DVD, such as multiple audio tracks, animated menus, chapter lists, and even includes DVD burning. Encore is a DVD creation program only, and it relies on the other programs in the suite like Photoshop, After Effects, and Flash to create some of these more complex assets, but with some know-how, a basic user could create a simple DVD fairly quickly.

OnLocation – OnLocation is an organizational program to help keep track of video files as they’re being shot. It can track a shot list, including the camera that was used, the time of day, and other information essential to a large or small production. It is designed for professionals working on a complex video shoot, and is probably not of much use to the basic user.

Adobe Media Encoder – This is a program designed as an add-on to Flash and Premiere, but can be used as a standalone application as well. It converts video files from one format to another with great precision. Basic users can use the presets, and experiment with different settings to find a good balance of size and quality.

This has been a brief overview of the programs included in the Adobe Creative Suites. If you want to learn more about these programs, and how to use them, keep an eye on this blog or try these sources:

• http://ittraining.iu.edu – IT Training & Education offers in-depth classes on all of the programs in the Design Premium suite.
• http://www.adobetv.com – For shorter video tutorials, Adobe TV can give you specific tips and skills on all of the Adobe products.