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.
Many web designers use more than one application to create their web site designs. They don't just stick with something specifically like Illustrator or Photoshop. So we have to be able to move our files from one application to the other. And lucky for us, Illustrator has a built in Export feature that allows us to share our documents as other formats. In this movie, I'm going to show you how to move a file from Illustrator to Photoshop by using the native PSD Export feature. First things first: I need to go up to the File menu and choose Export.
And once I do that, I'm going to select a destination for this. I'll just save this out in my Chapter 12 exercise files folder. And I'll save this out as a PSD file, Photoshop document, and I'll click Export. Once I do that, I get to select a color model. Of course this is a screen graphic, a web site graphic, so I want to keep it on RGB. You do have the option of doing CMYK or grayscale, but in this case I want RGB. Resolution, well since it's going to the web, I think I'm going to stick with 72 pixels per inch. Now, I can also choose to do it as a flat image.
If I choose Flat Image, that means no layers. So, if I want the layers to be preserved going forward, I need to choose Write layers. I need to also choose whether or not I want to preserve text editability, so if I want to be able to change that, and maximum editability, meaning do I want objects to be able to be edited and resized and scaled and things like that if at possible? Yes. Anti-aliasing. If you don't know what this means, you can hover over this. It tells you it's best suited for text objects. Text anti-aliasing settings will be honored, and so I try to leave that on.
Then whether or not you want to embed the ICC profile, again, this is up to you and how you manage your color in your applications. In this case, I'm going to leave this checked to embed the sRGB profile, because I want to keep my color consistent from one document to another. So I'll hit OK. It will tell me here that some containers in the AI document have been flattened. That's okay. I'm going to hit Don't Show Again and hit OK. That's going to write a Photoshop file for me, and now if jump over into Photoshop and hit Command+O or Ctrl+O to open up a file, I'll go to Chapter 12, there is my color_share.psd. And if I open that up--I'll close my Swatches panel so you can see it and bring my Layers panel out-- you can see I have my header layer, which is turned into a Photoshop group; my content layer, which is a Photoshop group; I have my footer; my background; and then of course my background group, which also has the rays of light, and the rays of light have actually been masked out using a layer mask right here, which is absolutely awesome.
So I can actually select individual pieces of content, move it around. So if I want to go into the header, I could find different pieces of the header and turn them on and off. See there, I'm turning off the search box at the top, turning off the menu bar at the top, again, the header at the top there. I can open up the content area and see the different parts of that. So, the logo, for instance, if I wanted to move the logo, I can move that. Every piece is independent just as it was inside of Illustrator. Now, do you lose some things in translation? Absolutely. For instance, the shapes that were once vector inside of Illustrator are no longer vector inside of Photoshop.
Photoshop is a pixel-based application, so I lose the scalability of these things. That's why it's probably better to design your mockup in one application or the other and then use assets from a particular application. So basically, if I wanted to work in Photoshop, I would create the shapes and all the stuff inside of Photoshop first and then bring in things like the logo, the rays of light, and stuff like that, as Illustrator files placed as Smart Objects, to maintain their vector editability and scalability as well, because you never know what you're going to have to change.
But if you needed to send this to somebody who just absolutely had to work on this in Photoshop, you could simply do that by using the native PSD Export, sending it out to Photoshop, and then they can open it and manipulate it as they see fit.
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.