Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In Illustrator CS5 Web and Interactive Design, Mordy Golding shows how to create pixel-perfect graphics for use in web sites, video compositions, and mobile apps. This course covers a wide range of workflows, from creating online ad campaigns, web sites, icons, to taking art from Illustrator to Flash Professional. Sharing tips, tricks, and creative techniques along the way, Mordy provides insight and instruction for taking projects from initial concept straight through to production. Exercise files accompany the course.
Up until now, we've been using Save for Web & Devices to preview artwork as it might appear on a web site. However, we know that we can of course design graphics that may be displayed on mobile devices using Illustrator as well. For example, I already used Device Central to generate the correct file sizes necessary for a wallpaper design, maybe for BlackBerry Storm device, which I have right here on my screen, and now I may want to preview what this is going to look like on that BlackBerry Storm device. So I'm going to use Save for Web & Devices to actually allow me to preview this directly in Device Central.
So I'm going to go to the File menu. I am going to choose Save for Web & Devices. This is why in recent versions Adobe added the word "& Devices" at the end of this. In older versions it would just call Save for Web. And at the bottom over here, I can choose now to launch Device Central. Of course, first I'd want to make sure that this image is going to be set to the right settings, so for example maybe I want this to be a JPEG, so I'll choose JPEG, and let's do maybe Very High, get some nice quality here. That looks okay. Now I'll click on Device Central, which opens up the application, and it previews that image on a device. Right now where it says Info, Content Type is set to Wallpaper, and I can choose many Fullscreen or other ones, but this is actually being designed as wallpaper.
And because I've already loaded by BlackBerry Storm 2 profile into Device Central, I can double-click on it to see what my content is going to look like on that device, which is pretty cool. Although right now what I've designed really is just wallpaper, just a static image. So I can't really do anything. One of the great things about Device Central is that you have the ability to interact with your device. So, for example, you notice here when I kind of go on the screen here, I will have the ability to base the kind of content that I have to interact with this, like for example where it says Key Pad.
I can actually type in different numbers or simulate different types of behavior on my phone. So let me give you an example of that, where I go to Display, for example, right now I'm seeing what this looks like when the Backlight is set to 100%. But you know sometimes when the battery starts to kind of go down a little bit to preserve some battery power the phone may actually not display graphics as brightly. So you can actually see what this artwork would look like when the backlight is kind of turned down. In addition, sometimes mobile devices are being viewed outdoors.
So right now Reflections are set to None, but I can choose what this might look like if I were outdoors or what it might look like to a user in direct sunlight. You know in reality, the way that we think about how people interact with our content with mobile devices, it's very different than you might expect people to interact with content that's displayed on a monitor or in office or at home. So Device Central has all these settings that allow us to really get a better idea of what our content is going to look like. So maybe, for example, we can add more contrast, use more brighter or vibrant colors, or adjust our content in a way to try to ensure the content that we create is going to be viewable and accessible by the person who is reading it.
Now, in this case here like I said I'm taking a static image called wallpaper and bringing it here into this phone. However, if I were to create some kind of a Flash animation inside of Illustrator, or I was creating a graphic that had some hotspots in it, for example, where you can click on it and go to a URL. We'll see that if I display that content in Device Central on a phone that supports that kind of content, that would support playback of Flash content or that had a web browser, I would be able to interact with that content, view the animations here as well, so again I get a much better idea of what that concept going to look like when displayed on these types of devices.
In fact, we can almost think about Device Central as if it were Save for Web, but specifically for devices. So if you know you need to create content that's going to be displayed on those devices, you can use Device Central on the beginning to first create your artwork and now also towards the end of the workflow to preview and test that content to make sure that it looks great.
Find answers to the most frequently asked questions about Illustrator CS5 for Web and Interactive Design.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
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.