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.
In addition to working with vector artwork inside of Illustrator, you can also work with and manipulate photographs as well. Although Illustrator is not the best program for manipulating raster-based graphics like this-- that's better served in a program like Photoshop-- it can handle raster graphics. You can actually place them in here much the same way you can in Adobe InDesign. So, in this movie, I'm going to be exploring how to bring photographs and other artwork into Illustrator that might be of a raster-based nature. So I'm going to do that by going to the File menu, and choosing Place.
So, let's pretend here that I'm bringing in some product shots that I'm going to be selling here on the Robot Toys web site, and I'll just go out and grab inside of my Chapter 8 exercise files folder, there's a folder called Assets, and then there's a folder called robot photos. I'm going to select car_bot1, and I'll place that in. And you can see it comes in just as a regular object. Go to File > Place, bring in green_bot2, hit Place, and I'll make sure these line up. And I'll put this one sort of in the center. And then finally File > Place and we'll get red_bot1, place that in, and line him up, something kind of like that.
Then I'll grab all three and I'll make sure they're aligned up by aligning to the vertical center just like this. I want to make sure that my settings are set to Align to Selection. Then I will horizontally distribute them evenly across each other. And now I'm going to copy those, and I'll paste them on top of each other with Command+F or Control+F, and then move them down just to create another row. So there are my products. It should be noted that each time you place a file into Illustrator it is linked to the original file, and if you happen to move this document or the original document, you'll get a warning box from Illustrator open saying that the file is missing and needs to be replaced.
In order to alleviate that, what you can do is select an object like this and you can choose to embed it into the document. The problem with that is embedding raster- based graphics, especially high-res graphics or Photoshop documents with a lot of layers, is that you increase the file size of the Illustrator document immensely, and that might not be such a good thing if you are sharing things across a network or trying to show things to clients or even someone in your own workgroup. So you might want to think twice before doing that. My suggestion is to open the high-resolution photographs that you have up in a program like Adobe Photoshop, open them up, crop them, optimize them, save them for the web, and then place them into this document.
It makes the file size a lot more manageable. If you'd like more information on how to crop and optimize images for the web and Photoshop, you might want to check out my Photoshop for the Web course that is now available in the lynda.com online training library. Once you have your documents in here like this--these are just JPEGs--you can manipulate them, move them around just like you can any other Illustrator object. There's no difference between them other than the fact that they are not scalable vector artwork. They're just standard raster-based graphics. In addition to the JPEGs, you can also place Photoshop files in here as well.
So, if I go to the File menu and choose Place, I can navigate out to my Chapter 08 folder, and there's a repairbot.psd file in there. I can place that in, and that comes in just like this. And I can move it up into place, something like that. You can see here that it needs to be actually behind the logo. The logo needs to overlap that a little bit. So in order to do that, what I'm going to do is toggle open the content layer, and I'll move the Layers panel out so you can see it.
I will move the logo to the top of the stacking order like so, and then I can just reset my workspace, and there we have it. I'll zoom in a little bit so you can see exactly what's going on. So this is just a banner ad that I've created for their REPAIRBOT service, repairing the broken robots. And this is nothing more than a Photoshop document. And anytime I want to make a change to this, I can select and hit Edit Original. Adobe Photoshop will launch and that document will open.
When I open this up, it may give you a warning saying that some text layers contain fonts that are missing. That's okay. I'm not going to be changing any of the fonts, so I'll just hit OK. So, once I'm in here, I can make any changes to this I want. So if I needed to move the robot a little bit, I could select layer 1 and just kind of move him over a little bit to the left. Then I'll save that. If I can go back into Illustrator, it's going to tell me that some files were modified. Would I like to update them? Yes, I would. See, the robot moves over to the right. And so anytime I make a change to that outside of Adobe Illustrator, Illustrator is going to know that and it will automatically update.
But, as I said before, placing big Photoshop documents into your Illustrator file really increases the file size, especially if you embed them in there, so you might want to be cautious when you are working with files like that. In this case, it's not that big of a file, and I could always go back in later and save this out for the web inside of Photoshop and then bring it back into Illustrator as a flattened JPEG or something. But for now, for the mockup purpose, I think this works pretty well. Maybe the client is still working on it and would need to make changes. So it keeps it flexible by leaving it as a placed PSD.
So, hopefully by now you have a better understanding of what Illustrator's capabilities are when it comes to placing images into your web design mockups, and also the best practice for how to get them in here, as far as opening them up somewhere else and optimizing them ahead of time. And even though we try to incorporate as little imagery as possible into our web designs so that things load a little bit faster, on the web, you still can't get around using graphics altogether. Not everything can be replicated through HTML and CSS.
You can't replicate photos that way. You have to use some sort of photographs, and so this is the quickest and easiest way to do just that.
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.