"How to Make a Website" was retired on March 24, 2020. You are now viewing the recommended replacement.

Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Adobe Illustrator for Web Design

Well done!

You have completed Adobe Illustrator for Web Design!

Sign up for Treehouse Back to Library

Adding in Vector Art and Colors

2:06 with Ashley Burke

Begin bringing life into the wireframe by adding color and the new logo.

Don't forget to check out the Downloads tab for your project files

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    [MUSIC] 0:00
    To give you a preview of what we're gonna be working towards, we're gonna 0:04
    be taking the design of our wire frame here all the way to a final page mockup. 0:10
    It will include our new logo, social media icons, 0:15
    photography and we'll make color and font choices. 0:20
    Generally, the prevalent idea within the design community is less is more. 0:25
    Because I'm trying to communicate an idea, 0:30
    I don't want to distract from the content, so I'm gonna be going for simplicity. 0:32
    As a designer, you'll spend a lot of time in this phase experimenting 0:37
    with colors and shapes, really trying to find the right voice. 0:41
    For us, our first step is going to be to import 0:46
    our color palette we were using earlier on the logo. 0:49
    So the way you do this is pretty cool. 0:54
    Let's open up our swatch panel here. 0:56
    And in the bottom left hand side, 1:00
    click on the libraries button, go to other libraries, and you just 1:04
    choose the illustrator file that has the swatches inside it that you want to use. 1:09
    So my files are on the desktop. 1:15
    It's our pencil logo. 1:17
    Open and here you go. 1:19
    There it is, which is awesome. 1:22
    So I'm just gonna drag this up here and now I have instant access to these colors. 1:25
    And while we're right here I do know that I want my header and 1:33
    footer to be this light blue color, 1:37
    the accent color from earlier because that will be behind our pencil logo. 1:39
    I can select all of these holding down shift and 1:45
    clicking and then choose the swatch here, and they all change that color. 1:51
    And then, command click off to release that. 1:56
    Next, we're gonna add in our logo and replace these placeholders. 2:02

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up