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.
It seems these days everybody is got some kind of mobile device in which they can book a flight, order takeout, buy baseball tickets, you name it. And if you are a mobile application designer, Fireworks is here to give you a hand with its new integration with Adobe Device Central. This integration is so important that device central is actually bundled with the stand-alone version of Fireworks. So let's have a look at how we can work with these two applications to come up with, and preview differ mobile designs. So I've got an application design open already in Fireworks. It's got three screens. I can see the three different elements right there.
Now when you are thinking about building a mobile application, one of things you need to figure out is what devices you are actually going to make that application for. There are lots of devices out there, and there are lots of different standards in terms of screen sizes and so on. So a good place to start is in Device Central, and we can get there right from Fireworks by going to File > Device Central. When Device Central opens up, it lets you browse for a range of different mobile devices, not just cell phones, but a whole range of different devices. I can search for different devices by putting in a keyword, such as maybe Nokia, or maybe a screen resolution of 240, just a couple examples of ways you can search short list your choices.
Now this device list here is not on your hard drive, all these devices are being downloaded live from Adobe's Web site. The idea of being that as new devices become available, Adobe can make the profiles available, and every time you boot up Device Central, you get the latest and most up-to-date version of what's available. So I am going to scroll down a little bit here, and let's see, see what we can find for a phone, that looks like interesting one here, all right. So there is a Nokia 5310, and if I want to, I can double-click on that. I can get a larger view of the phone.
I can read about its different specifications, get lots of detail on the actual device itself. If I'd like to use is as a testing device, all I've got to is drag it over to the Test Devices panel, and I've already got a little folder set up here called olive game test, so I am going to drag this phone into that folder. It gets downloaded to my hard drive, and now you'll see its part of a list of different phones that are all part of my testing devices here. Now once I've chosen a phone, what I need to do next is probably create a document to start working.
So we've got an option up here called Create, and when I make that choice, we'll see a little snapshot of the phone and also a blank document. Now I can also choose different software in which to design my application if I want, but I am going to stick with Fireworks here, and all I've got to do is click on Create. And Fireworks will generate a brand-new empty document at the specific dimensions of that particular mobile device. Now in our case, we've already got a design put together here, three different pages, and what I'd like to do is preview the design in some of the phones that I've got in my testing devices folder.
I am going to choose File > Preview in Device Central, and the last phone that was currently being used as a test model shows up first, and this particular phone model actually isn't the right screen dimensions. So you can see right away that it's not really going to work, my design is not going to work in these smaller screen phones, but that's okay. I've got my other ones to check out here as well. There's my Motorola. I can just double-click on it, and you'll see my application show up inside the window. I can check with any one of these devices and see how my application is going to look inside of those devices.
Now as well as being able to see the application screen, I can also play around with different settings. I can see how this particular device handles, for example, Reflections, Indoor reflections, Outdoor reflections, Sunshine, so I get a sense of how well my application is going to hold up under different kinds of lighting conditions. I can even adjust Contrast and Gamma as well, and I can also - I'll just switch back to no reflections - I can play with the Backlight, so I can see what the application looks like when the phone is maybe in a battery saving mode. Once I'm done my previewing, I can go back to File > Return to Fireworks, and then I can continue on either adding to my initial mockup, or if all my design work is done, I can hand off the file to my developer, and they can start building the application.
So if you're getting into mobile application design and your preferred design tool is Fireworks, I think this integration is going to be quite helpful for you.
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.