Fundamentals of Adobe Illustrator for Web Design: Getting Started with the Basics (I)

Ryan Clark, Creative Director at Virb

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
6 Lessons (1h 5m)
    • 1. Getting Started in Illustrator

      9:24
    • 2. Creating and Editing Shapes

      18:13
    • 3. Typography and Color

      13:19
    • 4. Adding Styles & Effects

      7:29
    • 5. Adding Images

      15:48
    • 6. Explore Design on Skillshare

      0:37
19 students are watching this class

Project Description

Design a single page site in Adobe Illustrator

Getting Started in Illustrator

  1. Create a new document

    Create a new document by clicking File > New.

    f0de310d

    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.

  2. 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.

    d5361480

  3. 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.

    82cceb27

    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.

  4. 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.

    4879d079

    Extra Reading on Grids

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

    Golden Grid System / http://goldengridsystem.com

  5. Illustrator file for project one

    Click the attachment below to download the Illustrator file for project one.

Shapes! Shapes! Shapes!

  1. 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.

    19f90390

  2. 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.
  3. 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.

  4. 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.

    1ced808b

  5. 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.

    3181840a

  6. Putting it together

    Create a header area and a series of testimonial bubbles!

    Download the attached Illustrator file for project two.

Typography and Color

  1. 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.

  2. 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.

    68913544

  3. 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.

    15577242

    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.

  4. Managing colors

    Aside from the color picker, you can edit colors in the Color Panel.

    14b328f7

    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.

    cb89c20e

    Choose some colors in the Color Panel and drag them to the Swatch Panel to save them for future reference.

  5. Putting it together

    Add content and color to your design!

    fc8e6894

    Download the Illustrator File for Project three attached below.

Adding Style

  1. Creating borders

    You can create borders for objects using the Stroke Panel.

    1585d389

    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.

  2. Using gradients

    You can create gradients using the Gradients Panel.

    ed90fedd

    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.

  3. 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.

    c6a9f2bb

    Try out a couple of effects and interact with the various settings for each effect.

  4. Managing appearance

    You can edit or delete any of your effects by selecting a shape and going to the Appearance Panel.

    9e1d9ad7

    This panel shows all the attributes of a shape—just double click one to edit it.

  5. Putting It together

    Make the coolest button ever!

    47c1e09e

    Download the attached Illustrator file for project four.

Working with Images

  1. 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.

    2bb3fb6e

  2. 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.

    e1c0f090

    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.

  3. Managing linked files

    You can see what images or assets are linked to your document in the Links Panel.

    eef68d0b

    Explore the panel, checking out the simple ways to edit the asset directly, or embed it.

  4. Putting it together

    Place images into your header and testimonials area!

    bbb115a4

    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. 

Student Projects