Design a single page site in Adobe Illustrator

Getting Started in Illustrator

Create a new document
Create a new document by clicking File > New.

To create a document for a web design, make sure the Unit and Preview Mode are set to Pixel. Also make sure the Color Mode is RGB and the Effects are set to Screen resolution.
Explore the toolbars and panels
The Application window has a toolbar on the left, contextual options in the top bar and a series of Panels that contain helpful tools and settings on the right.
Create site design guides
Create Guides by first turning on the Ruler, by selecting View > Rulers > Show Rulers—this will allow you to create guides quickly and see where you're placing them.

You can create a guide by clicking the ruler in the sidebar and dragging your cursor to any spot on the artboard. I like to create a center rule, and two rules for the outside of my design.
Edit your artboard
You can easily change the proportions of your Artboard by selecting the Artboard tool at the bottom left of the Toolbar.

Using this tool you can edit the size of your artboard by dragging it's borders, or using the Inputs in the top bar.

Extra Reading on Grids

The Grid System / http://www.thegridsystem.org

Golden Grid System / http://goldengridsystem.com
Illustrator file for project one
Click the attachment below to download the Illustrator file for project one.

Shapes! Shapes! Shapes!

Create shapes
In the toolbar, you'll find the Rectangle tool, this is the most basic shape you'll use to create web designs. You can hold down this button to select the Ellipse tool to make circles.

Holding down the shift while creating a shape will constrain the width and height to a perfect square or circle.
Edit your shapes
You can edit your shapes in many ways:
- Selection Tool - This allows you to move your shapes around
- Bouding Box - This allows you to stretch and resize your shapes
- Direct Selection Tool - This allows you to select specific points or areas of your shapes to edit individually
- Rotate Tool - This allows you to rotate shapes. Holding shift rotates by 45 degrees at a time.
- Scale Tool - This allows you to scale your shapes, making them larger or smaller. Holding shift constrains your shapes' proportions.
Explore the alignment window
The alignment window allows you to automatically align shapes, which comes in super handy when designing pixel perfect designs.

Align Objests - These tools allow you to take shapes and align them to a basic position (center, left, right) horizontally or vertically.

Distribute Object - These tools allow you to take shapes and position them with consistent spacing.
Group your shapes
Grouping your shapes allows you to select multiple shapes at one time and move them in unison. You can group a set of shapes by going to Object > Group (or cmd + g). Ungroup items by going to Ungroup (or cmd + shift + g).

You can edit items inside of a group by double-clicking the group. This will open the group for editing and allow you to move, size, and edit elements individually.
Create complex shapes
You can create complex shapes with the Pathfinder tool. The Unite tool is the one you'll use most often. It takes two shapes and combines them into one complex shape.
Putting it together
Create a header area and a series of testimonial bubbles!

Download the attached Illustrator file for project two.

Typography and Color

Using the type tool
The Type tool is located in the toolbar and lets you create type in two ways:
- Clicking - Creates a boundless line of text
- Dragging - Creates a text area that your text will be contained in.
Create a line of type and then a text area to see how the tool works.
Editing type
Type can be edited from two places in Illustrator: the Type Panel or the top toolbar. Use these to explore the various parts of type in Illustrator—most importantly sizing, fonts, line-height, paragraph alignment, and space-before/after.
Editing colors
The easiest way to change or edit a color is to double-click the color swatch in the toolbar—this opens the color picker.

Explore the color picker and notice the most important part of the color for web design, its hex (#) and RGB values. These are the values used in CSS for colorizing HTML elements.
Managing colors
Aside from the color picker, you can edit colors in the Color Panel.

You can also create a collection of frequently used colors using the Swatches Panel. This is perfect for establishing a simple color palette and having quick access to those colors.

Choose some colors in the Color Panel and drag them to the Swatch Panel to save them for future reference.
Putting it together
Add content and color to your design!

Download the Illustrator File for Project three attached below.

Adding Style

Creating borders
You can create borders for objects using the Stroke Panel.

Explore the Panel and take notice of the important aspects—stroke weight, corner, and alignment.

Take a shape and give it a stroke. Change the weight and align it to the inside of the shape.
Using gradients
You can create gradients using the Gradients Panel.

Explore the gradients panel and use the type, direction, and color pickers. Just create a shape, and select the gradient in the panel to edit it.
Creating shape effects
You can create Shape Effects by going to the Effects > Stylize menu. Explore the most important effects—drop shadow, inner glow, outer glow, round corners.

Try out a couple of effects and interact with the various settings for each effect.
Managing appearance
You can edit or delete any of your effects by selecting a shape and going to the Appearance Panel.

This panel shows all the attributes of a shape—just double click one to edit it.
Putting It together
Make the coolest button ever!

Download the attached Illustrator file for project four.

Working with Images

Adding images to your design
Add images to your document by dragging, copying or placing an image from your computer.

You can drag an added image anywhere on your artboard.
Using clipping masks
You can use a shape to mask an image (or another shape) with a Clipping Mask. To create one go to Object > Clipping Mask > Make.

Clipping Masks will use whatever shape is the set highest and use it as a container for any other image or shape you've selected. It's perfect for putting images in circles or other shapes.
Managing linked files
You can see what images or assets are linked to your document in the Links Panel.

Explore the panel, checking out the simple ways to edit the asset directly, or embed it.
Putting it together
Place images into your header and testimonials area!

Download the attached Illustrator file for project five.

Additional Resources

Typography Resources

Everyone loves good type, right? Here's a collection of links that might be useful as you explore typographic options that work well on the web.

Just My Type - A collection of pairings using H&FJ and Typekit fonts. You can see them in use and the pairings are fantastic.

The League of Moveable Type - Free fonts in numerous styles that you can use in your projects. All of these fonts are available for embedding in sites via Typekit.

Lost Type - Pay-what-you-want fonts from a ton of amazing designers (and myself), most of which are available for web-usage.

This is just the tip of the typography iceberg—if you come across some resources on your own, feel free to contact me and we can add them to the list!
Color Resources

Color is an important part of designing your website. For a little help with palettes, check our Kuler by Adobe to find options, view different styles of palettes, and find one that's perfect for your project.

Billy Hrncir

1

45