Get a free year on Tuts+ this month when you purchase a Siteground hosting plan from $3.95/mo
This tutorial aims to introduce many of Adobe Illustrator's tools which are essential to any designer's toolkit and would help beginners and intermediate Web Designers gain confidence in using Illustrator for Web Design. We will start by setting up the document for the web and discuss how Artboards can be used to set multiple screen sizes. We'll learn how to Create a Baseline grid (Inspired by Teehan+Lax's Baseline Grid using Illustrator's built-in tools). We'll also learn how to use Symbols, Alignment Tools, as well as Character and Graphic Styles to create a consistent design with ease. Not only will this aid us in wire framing but also in experimenting with the design's appearance far easier than Photoshop would allow.
Ah... Adobe Illustrator. Often a neglected part of a web designer's toolkit, however, happens to be one of the most powerful web designing tools available. Not only is it much more stable than Photoshop, but it also allows us to create precise and consistent layouts with precision and ease. If you haven't yet experimented with Illustrator as a wire framing tool, or integrated it in your web design work flow you are missing out. Not to worry, the day can still be saved.
I have attempted to be as comprehensive and thorough as possible in order to appeal to beginner and intermediate users alike, however, a step once detailed may not be repeated and some details would be left to the reader to fill in. Furthermore, this tutorial will teach how to set up Artboards and grids for three separate screen sizes, however the design itself would be for the screen size.
We're going to begin by creating a 1280 x 800 pixel document with 3 Artboards, one for Screen, Tablet, Mobile respectively. I've decided to lay them out horizontally and at a distance of 400 pixels so that the other document doesn't distract us from working. The more important details concern the Units (set to pixels), the Color Mode (set to RGB) and the Preview Mode (set to pixel). All of these may be evident to you save for the preview mode perhaps.
Since Illustrator is a vector program, any graphic created can be infinitely zoomed and retain its accuracy. While particularly advantageous for maintaining retina compatibility and staying lossless, it may distort our more refined pixel-pushing taste we've all grown to love. Setting the preview mode to pixel would allow us to zoom in and see our artwork in pixels. You can toggle between Pixel and Preview using Ctrl + Alt + Y shortcut.
With that out of the way, we will go to Edit > Units > Preferences and set all units to pixels, if they had not been done so already.
As you'll see you have 3 Artboards sitting in front of you. Open the Artboards panel (Window > !rtboards) and adjust the settings for the Artboards however you want. In our case, I'll use the 1280 x 800 px size for the Screen artboard and rename it as such. For the Tablet and Mobile Artboards I will chose the built in presets for iPad and iPhone. Also, set the Mobile artboard to portrait mode and continue onwards.
Now we'll create the grid. Create a blue (can be any color) rectangle with the following sizes. The width is meant to be the size of the grid, while the length is arbitrary and easily adjustable. Since I know beforehand the length of the document I'd end up creating I've chosen the grid for the 'Screen' artboard at 4920 px.
With the rectangles created, select the one in the 'Screen' artboard and go to Object > Path > Split Into Grid. This provides a powerful tool for creating grids. I've chosen 12 columns and a 24 px gutter for a total size of 960 (The column width is automatically calculated). This splits the rectangle into 12 grids and we must group them first in order to move them around as a single object. To create the guides, we'll duplicate the grid we just created and press Ctrl + 5 or View > Guides > Make Guides to create the guides. Repeat these steps for the Tablet and Mobile Artboards with the settings listed below. A final step for the grid is to set the Opacity to 40%.
For the baseline, we're going to draw out a 1px Stroke Weight line across the length of all three Artboards and use the Transform effect to make copies at fixed intervals. This gives us the benefit of being able to re-adjust the baseline or even extend it by simply re-adjusting the number of copies or the interval in between. For this baseline grid, we'll stick to Teehan+Lax's 6 pixel baseline grid. Set the Opacity to 20%.
Et Voila! Our Baseline Grid is created. All that's left is to lock the layer and we're good to go. Create a new layer and name it header. We'll be organizing a different section for each layer as the sections come up.
For the header we're going to have three elements. The first is the logo, the second is the navigation and the third is the typographic treatment. The logo is created by drawing out a 140 x 168px rectangle with a 15 point start with an out radius of 48px and inner radius of 42px. You can manually create the star and adjust the number of points by holding the mouse button and pressing the up and down arrow keys. The inner radius can be adjusted by pressing the Ctrl keys and dragging the mouse with the button still pressed. Use "League Gothic" at 48px for the logo text.
The navigation is a rectangle 795px by 48px. The ribbon is created by adding an anchor point on the middle of the right-end edge and dragging back the anchor point as shown. The navigation items are created individually using a 16 px "Goudy Bookletter" Font. The inactive links are given a separate character style which at this point is a lighter color. To equally distribute the navigation items, go to the align tool. If the Distribute Spacing option is not available, then click on the panel drop down and show options. Align the objects to a Key Object. In this case you'll select Home and distribute spacing by 36 pixels.
The typographic treatment has two elements with ribbons. The first ribbon we'll create by drawing out three rectangles. For the two equal-sized rectangles at the back, add anchor points in the middle and drag them back to create a ribbon as we did previously for the navigation. Select both shapes and Unite them using the Pathfinder panel and make a Compound Path (Ctrl + 8) out of them. Then select the rectangle at the middle and Offset Path by 4 pixels.
Select the Offset Path and the ribbons at the back and subtract the paths. Add the resulting shapes to achieve the desired outcome. Use "Ostrich Sans" to add in a "Hello" at 72px Bold and we're done with this particular ribbon.
The second ribbon is created using the same method. Create a ribbon. Then duplicate and mirror it using the Transform effect.
Offset Path and subtract the resulting path from the ribbon behind. Use "Ostrich Sans" at 40px Bold.
Now that our ribbons are made we will go ahead with the type treatment. This is the part where I'd hold less hands and more or less hope that the visuals are easy enough to follow. The text itself is easy to create without explanation. The strokes vary by 1px, 3px, and 6px thickness. The circular strokes are achieved by creating dashed lined of size 0px with a gap of 12px and a rounded radius edge. The repeated star effect is made by creating a single star and using Transform effect copies every 18px.
In new layer called "About" we'll create the next section. Lock the previous section created by now. First, we'll create the Heading and its background. We're going to use the same ribbon as in the logo, with the only difference being the size. Create two rectangles with the following settings. Unite them and make a Compound Path (Ctrl + 8).
We'll also convert this into a symbol so that we can reuse it for other sections. Save the shape we just created and save it as a Graphic symbol. The Heading uses the "Chunkfive" typeface at 21px. We will save this as a Character style called H2 - Section Heading.
For the about section, I've decided to have a lot of text and two floated images. Illustrator can simulate such an effect. Start by creating the two paragraphs. The first paragraph will have emphasis and will be saved as a Character Style (Emphasis) whereas the Paragraph would deserve its own Character style to be reused across the design.
Create a 304 by 247px rectangle on top of the text we just created. Go to Object > Text Wrap > Make to create the a floated image. We will adjust the margin to 24 px by going to the text wrap options through Object > Text Wrap > Text Wrap Options.
Repeat these steps for another image and place it as shown.
As we have already created the symbol, we will simply drag it in this new section (Layer : Portfolio) and Type out the text and apply the H2 - Section Heading character style. For the portfolio item drag out a rectangle and create text as shown.
Once the portfolio item is created, we'll make a symbol out of it for reuse. Create a Portfolio Item Graphic symbol, and drag out two of its instances below and evenly distribute them by 64 pixels.
By now we're just repeating the same things. The block quote is floated around using Text Wrap.
The Horizontal Rules are created using Effect > Transform & Distort > Transform at an 30px interval with the relevant number of copies.
Grab The Vector Social Icons from Graphic Design junction for the social media buttons.
For the footer we'll copy the logo from header and paste it here. We'll also add the the site menu and the copyright notice.
Our wire frame should look like this by now. You can click on it to get a larger preview.
And now the fun bit. We'll start working on appearance, beginning with the background. Create a new layer on top of Guides and below every other layer. Draw a rectangle to cover the entire artboard using RGB (247, 94, 80). For the textures we'll create two separate fill layers, both colored RGB (0,0,0). Use Texturizer under Effect > Texture > Texturizer to apply a Grain effect and a Note Paper with Opacity of 5%, Blending Mode Overlay and 10% Overlay respectively. Lock this background layer so that we don't end up accidentally moving it (Illustrator takes out a pretty big toll on the Computer otherwise as a result of an accidental movement).
Create a new Swatch group in the Swatch Panel and add in colors with the following settings: RGB (247,94,80); RGB (233,200,97); RGB (232,223,156); RGB (145,192,158); RGB (125,119,105). Illustrator has a color guides panel which gives color options such as Tints/Shades, Warm/Cool and Vivid/Muted
Apply roughen to the header at a relative size of 0.05% and set detail of 100. Set the fill layer to RGB (63,60,53). Below this fill create another fill RGB (247, 94, 80) and apply Transform effect to it (Effect > Distort & Transform > Transform) with the following settings.
For the last fill layer, we'll first create a pattern. Zoom in at 6400% and create a 4 x 4 white rectangle. Create 1 x 1 px squares across the diagonal. With a pixel pattern created, just select it entirely and drag it to the swatches panel. You will now be able to use it. Create a new fill layer and apply the pattern we just created and set Opacity to 40% and Blending Mode to Multiply. Also apply the Transform effect at 4px Horizontal and 6px Vertical. Finally save this as a graphic style in the graphics panel.
Use the Graphic style we just created and apply it to the navigation and the ribbons in the main text. For the logo, go to Effect > Stylize > Round Corners and set the radius to 5 px. Set a 1px stroke colored RGB (63,60,53) and then apply a Transform effect scaling the stroke down to 93% for a total of 3 copies. Next create the fill layer colored RGB (237, 211, 129) with a 2px (X and Y Offset) Drop Shadow set to 8% Color Burn mode.
For this effect, set the fill layer to RGB (233,200,97). Create a fill layer below it at RGB (55, 52, 46). Apply a Horizontal and Vertical Transform of 1px to this layer and create three copies (which creates a 3d text effect similar to dragging the whole thing out after duplication in Photoshop). We're going to use a 2 x 2 px version of the pattern we made earlier. Create and drag this pattern to the Swatches panel and apply it to the new fill layer below. Set it to 50% Opacity and Transform it by 6px Horizontally and Vertically. Save this as a Graphic Style.
For the regular dark text we applied a Roughen effect of a relative 2% size and with detail set to 7. The various strokes are created using the pattern we created at the beginning or by using roughen of a relative size of 0.1% and detail set to 100. This is how our typographic treatment looks like.
For the strokes I used combinations and variations of patterns used earlier along with the Roughen effect.
It is now a simple matter of re-applying styles we've created earlier. This is better left understood visually which is why I'd suggest taking a look at the images. Select the text and you'll see the relevant character style appear. This is where our initial effort pays off. Modify the text you selected and go to the panel options and select Redefine Character Style and this will apply everywhere the character style has been used in the document.
The last appearance style that we'll create is the Image Placeholder. Set the stroke to 4px inside with white color. Apply a Drop Shadow of 2 px (X and Y offset) and set the Blending Mode and Opacity to Multiply at 35%
Keep working onwards. You will have to Double-click the symbol so that you can edit it. Apply the character and appearance styles we've grown to re-use endlessly. Once satisfied with the result, hit Esc to exit isolation mode, and you will see the effect applying across the other portfolio items. (An alternate way would have been to break link to the symbol, edit the style to your heart's content and later redefine the symbol.)
Patience, perseverance, hard work and repetition yields a clearer picture fleshing out.
And here is the final result. I hope you found the tutorial useful and are just brimming with excitement. You can try working on the Tablet and Mobile versions, as well as adding in Illustration and, perhaps, more depth and experimentation with layout and coloring. I've added social media icons on the navigation bar as well. I would love to see what you make as a result, so do share.