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.
Although there are ways to create really complex shapes and artwork inside of Adobe Illustrator, some of the most useful tools happen to be the ones that create the most simple of artwork. And so in this movie I am going to exploring how to create basic shapes inside of Adobe Illustrator, and I am going to try to explain to you why creating these basic shapes is such a useful thing inside of Illustrator, especially when it comes to a web design process. So I am going to create a New Document by going to File > New, and once I create this new document, it doesn't matter how big or how small it is, in this case I am going to do 1024 x 768, and I'll just hit OK.
I am going to then open up all of the shape tools; I am going to do that by coming right underneath the Type tool, I'll click and hold to open up this toolbox, and then I am just going to separate these into their own floating tool panel by clicking this little arrow. And then I'll move them out just like this. And so I'll select a Rectangle tool. With the Rectangle tool selected, I can actually come out here and start to develop lot of different assets pretty easily. And so if I click and I do something like 468 x 60 and hit OK, that's a standard web banner size.
I have just created a small mockup for a web banner. Or if I click and do 300 x 250, again, another standard web banner size. We can come here do 125 x 125. It's a small graphic size for the web, an advertisement. And again, we'll do 125 x 125, hit it again. It puts it in play. If I want to line that up, I can kind of move it just like that, so now I've got a graphic here, two on the right, one in the middle. Pretty easy stuff. I just created a web banner package, essentially, right there, which I can in design on top off.
I could also do something like buttons, so let's do a rounded rectangle here. And I'll click somewhere over here to the right, and I'll do something like 200 pixels Wide x 45 pixel Tall, a Corner Radius of about 6. Anywhere between 4 and 8 is going to be good for rounded rectangles for buttons and things like that. So, go and hit OK and that creates a button for me. And if I want to do another one, that's easy enough. Just click, hit OK, and I am just lining these up with Smart Guides. If you don't have Smart Guides turned on, just go View, and enable Smart Guides and they'll come right back on for you.
And then once you are out here drawing, you'll see these little green lines appear and you can easily line things up and create them. So there are a few buttons that I have created. I can also do some round buttons, so let's line these up here and let's do 100 x 100. There we go. And line this up. There we go, 100 x 100. There we go! And so you can see just how quick you can start to mock things up simply by employing these basic shapes that you might have otherwise thought were just too primitive to use in anything. But the faster you get with creating these shapes, the faster you can get into the creative process of adding things to these shapes to make them look like something.
And then you can hand these off to a developer or code them yourself into working HTML and CSS Objects, which can then be interacted with on the web. It's a really cool process if you think about it, because you go from these little skeleton pieces that we have created into a full-blown working prototype in a very short amount of time. But until you can get the speed and precision down of creating these graphics, you may not be able to crank through this process quite as fast. So learn to use these tools. The point-and- click method is by far the best, in terms of creating web graphics, in my opinion, because if I were to try to utilize the Rectangle tool to create something and I had to click and drag, I would have to wait until the pixel count got just perfect and I couldn't really get that each and every time. I may have to go up and change some stuff in the Control panel, and so using this point-click-and-entering- in-values method is a great way to create precise wireframe graphics really quickly and really easily.
So hopefully by now you have a better understanding of the basic shape tools that you have available to you inside of Adobe Illustrator, and then how to use those to quickly create these skeleton pieces which we can then start to throw a little bit of creativeness on top of to create some really stunning web graphics.
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.