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.
The step in any web design process is to plan out the project itself. This means determining exactly what you are building, where it's going, and who the intended audience will be. Going forward, that will be your driving force throughout the entire design process, and the planning stage is very important, although it might be a little bit tedious. But it can also be really simple. Take this example that I have here onscreen for instance. I made this small sketch markup using a tablet application called Adobe Ideas, which is available from the Apple App Store.
This is a great application which allows me to free-hand draw using my finger or a stylus and easily mark up ideas as they come to me. I can then export those out and place them into file in Illustrator and then use that as basis for my design going forward. Let's assume here that I am designing a WordPress theme inside of Adobe Illustrator. As you can see in this markup, I have a header piece; I'll have a content slider, several video thumbnails, a bit of text, an image flush right, and then a footer at the bottom.
Now this isn't the end of the planning stage. Once I get the sketch into Illustrator, I have to determine a lot of things about the project. How wide is the overall web site I going to be? How much space does the slider take up in the overall scheme of things? How big are the thumbnails? Does the text overtake more of the image, or does the image overshadow the text? The footer, is it full-width footer? Does it just encompass the area of the theme? I have a lot of things that I have to decide, but at least I have this sketch to go from in order to keep things organized in my mind. Once I have a sketch inside of Illustrator, I keep it open, but then I start to create a brand-new document.
That document then turns into my mockup, which then becomes my full-blown design. So without this starting point here, I might not ever get where I need to go. Again, the planning phase is totally up to you on how you do it. You can sketch things out on paper, you can use a tablet application. Whatever you do, find something that allows you to get the ideas out of your head and into usable form, so you can bring it in the Illustrator and then start mapping out the remaining parts of your project. So now, I am ready to create a new document. I'll go to the File menu and choose New.
Once I am inside the New Document dialog box, I am going to call this Blank Mockup. For the Size I am going to leave Width at 1280. For the Height I am going to increase this to 2000 pixels. I want to make sure that my color mode is RGB, PPI is 72, and Align to Pixel Grade is set to Yes, so that everything is nice, crisp, and clean. Once I have that done, I will hit OK. I now have a new blank document which I can go and use throughout my entire design process for the rest of this WordPress theme that I might be mocking up.
From here, my task is to define the overall size and dimensions of all of the different aspects that are within this sketch that I created earlier. In order to do that, I am going to utilize shapes, grids, and even some guides here inside of Illustrator.
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.