Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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.
Illustrator has a wide variety of tools that can be used to do some really crazy stuff, but in the end there are some things that Illustrator simply can't do that we need to use other applications for. And in many cases I find myself taking graphics from Illustrator and placing them into other applications like Adobe Photoshop in order to achieve some really neat effects. In this movie I'm going to be exploring how to place an Illustrator file inside of Photoshop as something called a Smart Object, which you can then run filters on nondestructively to make changes to it.
So I've got here a blank document inside of Photoshop, and what I'm going to do is place an Illustrator file in there. So I'm going to go to File > Place. Inside of my Chapter 12 file folder there is a bg_place.ai file. I'll click Place. It's going to bring up the Place PDF dialog box, and I want to crop it to the bounding box of this, and I'm just going to hit OK. It should come in full screen, and once it pops in there, I'll hit Enter or Return to commit to it, and there it is, on my background. And so what I want to do now, let's say I wanted to run a filter on this, like maybe Photoshop new Oil Paint Filter.
I can just go up to the Filter menu. Since this is a Smart Object, it allows me do that. I'll go up here and choose Oil Paint. That brings me in here, and I can maneuver this around to change it in many different ways till I get it exactly like I like it. And I'll hit OK. And once I commit to that, you can see that it runs the filter right there on that Smart Object.
Now the best thing about placing an Illustrator file into Photoshop is that I can double-click on that Smart Object and it will launch this in Illustrator. It will tell me here that this document has been modified out of Illustrator. That's okay. What I'm going to do is discard the changes for now and hit OK. That opens it up. You can see here it says Vector Smart Object. And so now I'm just going to select this background piece. And it's at 50%. I'm going to change that to 100%. There we go. Save that. And once I save it and jump back into Photoshop, you'll see the background update automatically, and then I can also change the filter as well.
So I can double-click where it says Oil Paint. It will bring me back into the Oil Paint dialog box, and I can change. So I can reduce the Shine, turn back the Cleanliness. Let's up the Stylization a little bit. There we go. And reduce the Scale, increase the Brush Detail, hit OK. Now I've got a nice background image that I could use for an application or even for a web site if I choose to, but I did that all from just placing that Illustrator file into the Photoshop document. And as long as I keep this as a PSD file, the Smart Object will exist there, and I can make changes to it anytime I want simply by double-clicking, making the change, saving it, and coming back in.
So the Adobe Illustrator to Photoshop workflow is actually pretty seamless. It works the same way if you wanted to take a Photoshop document and place it into Illustrator as well. All you would have to do is export out your PSD file and then go into Illustrator and choose File > Place and place the PSD file into Illustrator as well. So the next time you have a project that just isn't quite getting it done inside of Illustrator, try dropping it into another program like Photoshop, running some filters, and see what you come up with.
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.