Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
This course reveals how designers can create vibrant web graphics, wireframes, and complete web site mockups with the strong layout and color management tools in Adobe Illustrator. Author and Adobe Certified Expert Justin Seeley covers topics such as building responsive layouts with artboards, producing custom color palettes and swatches for web graphics, and making vector shapes and text that seamlessly scale. The course also explores adding drop shadows and other live effects, setting up interface elements such as forms and tabbed interfaces, optimizing and exporting different types of graphics, and speeding up your workflow with reusable image sprites and Smart Objects.
As the mobile device ecosystem continues to expand, we have to keep up with that and we have to be able to create documents that correspond to the various screen sizes that we're going to encounter with all of these devices. So in this movie, we are going to be exploring how to create a document for a mobile device. I'm going to start by going up to the File menu and choosing New, or you can hit Command+N or Ctrl+N on your keyboard. And let's go up here to the Profile section. And new to Illustrator CS6 is this Devices section, and when I do that, it's going to dropdown and give me some sizes down here that correspond to different devices, things like iPad, iPhone, Xoom, Fire/Nook, and Galaxy S.
Now when I switch to the iPad, you're going to notice that it changes everything to be 1024 x 768. If I switch to the iPhone, it gives me 320 x 480. I'm going to discuss why this is a little tricky here in a moment. And we have the Motorola Xoom, which is 800 x 1232. We have a Fire or Nook tablet, which is 600 pixels wide by 1024 tall. And then finally, we have a Galaxy S, which is an Android device which is 480 x 800. Now most of these sizes do cover the full gamut of devices that you're going to see, but there are occasionally going to be some oddball sizes that you're going to have to create on your own.
For instance, when I look at the iPhone document, it tells me that the Width is 320 pixels and the Height is 480 pixels. That may have been true for the first- generation iPhone, but the newest iPhones--the iPhone 4 and 4S--both utilize a 640 x 960 dimension. So I have to be able to account for that. Unfortunately, I can't do that from right here. So what I need to do is actually create a new document based on that size. So I'll go with 640 pixels wide by 960 pixels tall. Everything else remains the same.
Now in this case, it's telling me not to align it to the Pixel Grid. I'm going to drop that down, and I am going to align the new objects to the Pixel Grid. Why? Because I want everything to be "pixel perfect" as I'm designing it. I don't want any weird anti- aliasing or anything like that. I want everything to snap into place and be right aligned with the Pixel Grid. So I'm going to close that back up and now I'm going to hit OK. So now I have a 640 x 960 document corresponding to the iPhone 4 and 4S. And I'm going to go to the File menu and choose Save as Template, because I cannot save a new document profile so I have to go ahead and save a template to use.
It will jump me into my Templates directory. I'm going to call this iPhone4, and I'll hit New Folder, and I'm going to create a folder called Mobile and hit Create. iPhone4, I'll hit Save. Now I have that. I can close it, and in any time I need to get back to that I can go to the File menu and choose New. And then if I need that template, I can go to Templates, select Mobile, and grab iPhone4. So anytime a client comes to you and has to have a graphic or a design for a specific screen size for a mobile device that isn't listed inside of the default sizes, like iPad, iPhone, et cetera, you can just come in, set the size to the pixel dimensions that you need, and then save it out as a template to easily get back to that device at any given time.
In any case, the devices that are listed here inside of Illustrator do give you decent break points and cover a wide enough gamut of device sizes that you should be okay for now. But in the event that the client comes to you with something oddball at least now you know how to do it. And then once you are finished, hit OK, and you're ready to continue working.
Find answers to the most frequently asked questions about Illustrator for Web 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.