Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In Fireworks CS5 Essential Training, author Jim Babbage gives a detailed overview of Fireworks CS5, Adobe's software for creating and optimizing web graphics and interactive prototypes. This course includes a detailed tour of the interface, the enhanced PNG format, and the image editing toolset in Fireworks. Critical concepts, such as prototyping for HTML applications and working with symbols, the heart of an efficient workflow in Fireworks, are covered in detail. Exercise files are included with this course.
Deciding on what colors you are going to use for a Web design or an application, or even just an illustration, can be pretty challenging at times. But thanks to the Adobe Swatch Exchange support in Fireworks, we can now use Adobe Kuler to help us pick our colors. So let's take a look here. I've got a little sample image here, and I want to pull the top five dominant colors out of this particular image. Now I can do this through Adobe Kuler online. So I am just going to hop over to my Web browser, and I'm already logged into Adobe Kuler. Now one of the things I really like about Adobe Kuler, other than the fact that it's a community-driven Web site, is the fact that I can create my own custom colors from any kind of graphic that I can upload.
So I'm going to Kuler to Create option, and this brings me into the Create Section, and what I want to do is create From an Image. I can also create From a Color if I want to as well, but I'm going to work with an image. Now this isn't the one that I want. So I am going to upload an image from my hard drive. So I am going to choose Upload, and I am going to go into my Desktop, go to my Exercise Folder, and locate my olive_colors image. And this is a PNG file. It is a Fireworks PNG file, but PNG format is handled quite well by the Web, regardless of whether it is a Fireworks document or not.
It's just as a Fireworks PNG, it happens to be a lot bigger than your average PNG. So I am going to open this up, and as soon as the file loads, you'll see that Kuler has already gone in and picked my Colors based on a Mood. Now in this case, it chose Colorful. And if I scroll down a little bit, here you'll see the colors that are being pulled up from that specific design. I can go with Bright, and you see as I choose these different Moods, Kuler adjusts the color range for me. And not only can I pick from this particular image, but I can select any one of these individual sampling points.
And once it's selected, I can use my arrow keys to reposition that sampling point to pick a different color, which is also kind of interesting. So I can get a head start with Kuler, and then I can customize it a little bit myself. Now once I have got something that I like, I can give it a name. I am going to call this olive oil. I can add some Tags in here, if I want to be searching for it. I am going to type in the word olive and green, and I am going to Save this. Now before I Save it, I am going to switch to a Public Color Scheme, so anybody can actually share this, and I'll Save it.
And I am brought back to the main Kuler screen, and you'll see that my five color samples are now part of one of the themes that I can pick from. And that, itself, is kind of neat. I've got all these different ones I can look at here. But what I want to do with this is I want to turn this into a set of colors I can use in Fireworks. So if I move over to the right-hand side of Adobe Kuler, I have got the option, right here in this icon, to Download this theme as an Adobe Swatch Exchange file. So I am just going to click on that button and I will quick Save. So that set has now been downloaded to my computer, I can hop back over to Fireworks.
I can go back to my Swatches panel, and I can choose to replace those existing Swatches with my new set. There we go. There is olive_oil right there. You select it. Click Open. Now I've got my five predominantly darker deep toned colors from that specific image. I can utilize these in my designs, filling vector shapes, working with text, but the great thing is I know that the colors were sampled from a professionally designed piece of Artwork, and the colors are designed to work together. Now another option you have got when it comes to Kuler is working with the Kuler panel right within Fireworks.
We go up to your Window menu > Extensions, there is an option to launch a Kuler panel right inside of Fireworks. So I can click on that and the Kuler panel will load up, and I can search for different Themes based on Popularity, Highest Rated, the Newest Colors, Random Search, Saved Searches, or even create my own Custom Search. I can also search based on Timeframe. Now once I have found a color that I like, oh, I think I'll go with the Untouchables, with mouse over it. I get a little bit of information about the color scheme. And if I click on it to select it, and I click on the little expander triangle here, I can choose to Edit the Theme.
I can add it to my Swatches panel. Or I can even go right out to Kuler and view it online. What I think I am going to do is I am going to use the set of Swatches as a new Swatch file. So first thing I am going to do is go over to my Swatches panel, clear out the existing Swatches, so an empty panel. I'll go back to the Color Theme, and I'll add those Swatches to my panel. And there they are showing up inside Swatches panel. And in order to turn this into an ASE file that I can use in Fireworks or share with Illustrator or Photoshop designers, just click on the Options menu and choose to Save Swatches.
And then I can go ahead and Save this Swatch File. I have two format options here, but I am going to stick with ASE, and just click Save. So if you are having difficulty picking colors for your Web site, you might want to check out Adobe Kuler and see if it can help you out.
There are currently no FAQs about Fireworks CS5 Essential Training.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.