Heads up! To view this whole video, sign in with your Courses Plus account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Exercise Your Creative!
You have completed Exercise Your Creative!
Preview
How do you design for your favorite brand? In this episode of Exercise Your Creative, Mat designs a pair of shoes and a marketing campaign for the legendary skate shoe company, Vans.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[treehouse presents]
0:00
[Exercise Your Creative]
0:04
Have you ever had a great marketing idea for your favorite brand or product
0:07
and never acted on it?
0:10
Do you ever find yourself wishing you had more personalized work in your portfolio for clients?
0:12
I'm Mat Helme, and in this episode of Exercise Your Creative,
0:18
we're going to take a look at taking that great thought and putting it into action.
0:20
[??] [The Idea]
0:25
My favorite line of shoes are Vans Authentics.
0:32
I've been wearing them for years.
0:34
One day I realized how much the shoe is so similar to a blank canvas.
0:36
I thought, wouldn't it be great to create an ad campaign
0:40
incorporating the shoe in the ad as artwork?
0:43
Then the tagline hit me: Always Authentic, Always Vans.
0:46
I was so passionate about the idea, I knew I needed to put it into action.
0:50
Before sketching, I wanted to check out some books,
0:55
so I hit up the local bookstore in search for some old retro designs and skate books.
0:58
I found a couple of books, such as books that had old stickers from the 1980s.
1:03
As I continued searching, I kept coming across the name Jim Phillips.
1:07
Then I found the book Surf, Skate & Rock Art of Jim Phillips.
1:11
Most of this art from that era was from one guy, Jim Phillips.
1:16
He basically set the standards for all of the art still used in the industry today.
1:21
I then knew this was the book I needed,
1:25
so I bought the book and started sifting through his amazing work.
1:27
Come to find out, Jim was the creative director for Santa Cruz Skateboards back in the 1980s.
1:30
One design in particular grabbed my attention.
1:36
I actually remember seeing this particular skate deck when I was super young.
1:38
I knew this was the direction I wanted to go in.
1:42
Right below the design was a caption quoted directly from Jim Phillips.
1:45
It read, "Powell, one of our biggest competitors, had everything with bones and skeletons."
1:49
"To me, the only fun thing left was fleshy monsters..."
1:56
[??] [The Process]
2:00
Previously this year, I had been tampering with a style with these fuzzy characters in my fine art
2:04
and knew this would work well with this project.
2:10
For almost all my conceptual projects I create a creative environment.
2:13
To do this, I use mood boards.
2:18
I took the pictures I got from the books and did some searching online
2:20
to get a good direction with the design that I wanted.
2:24
I gathered about 100 images together in total.
2:27
Now it's time for the sketching process.
2:30
The tools I use for this are an assortment of pencils, sketch book, and some Sharpies.
2:33
When I began sketching, I knew I wanted the eyes on the shoes
2:39
and have the shoes coincide with the surface the shoes were going to be on.
2:42
However, I didn't know what kind of eyes I wanted or the color,
2:46
so I began drawing an assortment of eyes on the shoes.
2:49
After a couple layouts, I then wanted to test the markers
2:52
to see what kind of color scale I could get with saturation and blend.
2:56
I knew stippling would help this out a bit.
3:01
For those of you that aren't familiar with stippling,
3:03
it's a drawing technique used to create grayscale and depth using dots.
3:06
I really liked the green and purple layout, but it's the same as The Hulk's colors,
3:11
so I didn't want to use that.
3:15
However, I did like the eyes I used in the illustration.
3:16
I also really liked the way the yellow color combo popped,
3:19
so I started playing around with the yellow to orange scale.
3:22
I felt the blend was too hard between the yellow and orange,
3:25
so that gave me the idea of getting grayscale markers.
3:28
I figured I could create the illustration in grayscale
3:31
and then change the color in Photoshop, so I tried that and it worked really well
3:33
but a little bit too well for this project.
3:37
After that illustration session, I went home kind of frustrated.
3:40
So I slept on it, knowing and thinking positive, eh, I'll figure it out.
3:43
Then right before I went to sleep, it came to me.
3:47
Why not put the colors and grayscale together?
3:49
Let's just say it was kind of hard getting to sleep after that.
3:52
So then the next day I hit up another illustration session starting with the color
3:56
and then the grayscales, and it worked.
4:00
At this point, my illustration and layout color combo was complete.
4:03
I knew if I had these nailed down, I was ready for the shoes.
4:07
Also, I knew if I just did graphics in the front panel of these shoes,
4:11
they could actually be mass produced,
4:14
reason being there isn't another panel to line it up to.
4:17
[The Product] Who knows? Maybe Vans will like the design enough to run a couple of lines.
4:20
When drawing the shoes, I used the following tools: masking tape, pencil,
4:25
markers, and paint markers.
4:29
Now it's time to start sketching on the shoes.
4:32
My first step is to sketch with a pencil where the heavy, thick line would be.
4:34
Next I ink the shoes with a black marker.
4:38
Before even testing the markers, I knew the ink was going to bleed on the canvas material.
4:40
It's super porous.
4:44
So I taped off the shoes with the masking tape
4:46
to make sure it wouldn't bleed out onto the rubber sole.
4:48
When coloring, you want to start off with light and then go dark,
4:51
so I laid down the yellow and then the darker gold
4:54
as well as the light purple to dark purple and the same for the blues, light to dark.
4:58
After that, I laid down the grayscale to give the shadow effect.
5:03
Then I added the black stippling where the shadows were deep.
5:07
Lastly, the white stippling over the light areas.
5:11
This really added a pristine texture to the shoe.
5:14
The ink did bleed in the white area a little bit, but it's nothing I can't fix in Photoshop.
5:16
Now that we've completed the shoes, it's time for the photo shoot.
5:21
For this, I used an iPhone and a large piece of white paper.
5:24
Then I took some photos and sent them to my email at actual size.
5:28
Next I cut the shoes out and touched them up a bit in Photoshop,
5:31
deepening the contrast and brightness of colors,
5:35
really giving it a blown-out retro look.
5:38
Lastly, I printed the shoes out.
5:41
Now that my shoes are complete, it's now time to design the surface of the ad
5:42
as well as the content.
5:46
Like I said before, I wanted to use the tagline Always Authentic, Always Vans,
5:49
so I started to play around with the idea of making a brain out of the laces.
5:53
It seemed like a great idea, but it just didn't work,
5:58
so I made a couple of different mouth layouts and ended up reverting back to the fine art style
6:01
from my previous paintings and illustrations--furry and fun.
6:05
I then grabbed a typeface called Lavanderia by James T. Edmondson
6:10
and used it as a template for my lettering.
6:14
With tracing paper and a pencil I illustrated the interlocking laces reading Always Authentic.
6:17
At that point I was ready to take some images with my iPhone and bring them into Illustrator.
6:22
Before I jump into the process, let's take a look at the techniques I used with Adobe Illustrator
6:27
in this episode's Technique Breakdown.
6:32
[??] [Technique Breakdown]
6:35
We're going to go over 4 techniques in this Technique Breakdown.
6:37
The first technique, we're going to create a custom calligraphic brush.
6:41
Second, we're going to create a custom art brush.
6:44
Third, we're going to create a custom pattern.
6:46
And fourth, we're going to use multiply and overlay over a color.
6:48
For the first 2 examples, we're going to be using a Wacom Intuos4 tablet.
6:52
This tablet will allow us to draw using a pen with the tablet,
6:58
and it will allow us to apply pressure to the brush,
7:02
allowing us to create a thick to thin line technique.
7:05
Let's scroll down and let's create a custom calligraphic brush.
7:09
To do this, we are going to grab the Paintbrush tool and head up to Brush Definition,
7:13
select New Brush.
7:19
With Calligraphic Brush selected, select OK,
7:22
and let's name this A.
7:26
For angle and roundness let's just leave those at default,
7:29
and for size let's make this a 5 point, change Fixed to Pressure, and Variation of 5.
7:33
This variation of 5 basically says the lighter we press, the smaller the line.
7:42
It will vary with 5 point, so it will go 0 to 5 or 1 pixel to 5.
7:48
Again, the lighter we press, the thinner the line.
7:54
Then select OK and then with this A brush selected and our Paintbrush tool selected,
7:59
make sure we have a solid color fill. Okay.
8:08
You can see if I start off really light with the pen, it's really thin.
8:12
The harder I press, the thicker it gets. You can lighten up.
8:18
This works great for shadowing.
8:22
Say if I were to create a nose, underneath the nose there would be a deeper shadow
8:24
because the light would be coming down from the top.
8:30
That's how you create a custom calligraphic brush.
8:33
Next let's create an art brush.
8:36
To create a custom art brush, grab the Ellipse tool
8:38
and change this stroke color to the fill color, and let's just create an oval.
8:42
Head over to the Swatches palette, select Brushes.
8:49
Let's drag that oval into the Brushes panel, select Art Brush, select OK.
8:54
Now let's name this B.
9:01
For width let's change this to Pressure and drop down to 1% and leave that at 100%.
9:04
Keep the Stretch to Fit Stroke Length selected,
9:14
and where it says Colorization, Method, we want to change this to Tints and Shades.
9:19
Select OK.
9:25
Let's go ahead and delete that oval and select our brush.
9:26
You can see we have our B brush that we just made, our art brush.
9:32
What this does is it stretches the oval across the whole brush.
9:39
So if this were really short, you can see it's the oval.
9:47
Let's change this color to make it a little bit darker.
9:53
[??]
9:58
There's the red, and we're on Tints and Shades, so to draw it just a little bit in opacity.
10:01
This also works with pressure too, so if I start off really hard and then go down soft,
10:06
it lightens up there a little bit.
10:15
[??]
10:18
This works great when coloring.
10:20
You can get a great buildup with the multiply and overlay,
10:22
and I'll show you how to do that when we get to technique number 4.
10:24
But next let's create a custom pattern.
10:27
To do this, let's grab the Star tool.
10:31
With the Star tool I'm going to create a bunch of little stars,
10:39
and we're going to create a little star pattern.
10:42
[??]
10:44
Okay. Let's select all of them, go to Object, Pattern, Make.
10:47
Now by default it sets it up as the Tile Type to Grid.
10:52
We can change this to Brick by Row. It's on a 1 to 2 offset.
10:56
We'll just push it over every other. We can change that to 1/3, 1/4 and so forth.
11:02
Let's just leave that at 1/4 for right now, let's leave it at Grid,
11:09
and we can also add spacing around it by Size Tile to Art
11:13
and then change the H and V Spacing and 30. It adds space around it.
11:18
For the Copies let's do it in 5 x 5 right now, and Dim Copies is at 100%,
11:25
which is the patterns around it.
11:30
Show Tile Edge, that's this box right here.
11:34
Say if we got the spacing down to 0. Everything is lined up.
11:38
Back on the pattern, say we grab the Star tool shape.
11:44
Right now we have a fill of this red color.
11:51
Our new pattern is in our Swatches panel.
11:54
So as you can see, with the star shape no matter how big we make it,
11:57
it keeps multiplying that pattern inside of it.
12:01
If we double click on it, we can edit it and add 10 pixels, go back.
12:04
You can see it adds 10 pixels here.
12:09
That's how you create your own custom pattern.
12:11
For our fourth technique using multiply and overlay,
12:13
select the Ellipse tool.
12:16
Let's give this a color of blue.
12:20
What we want to do is have this sphere appear 3D.
12:23
So let's grab the Brush tool and let's select that brush that we made, B. That's the one.
12:29
Let's select the Transparency panel right here and select Opacity and put that at 50.
12:36
For the Blending mode, let's put that at Multiply.
12:43
Let's make this black.
12:46
You can see when we build up here, you get this darker color.
12:50
When we apply this over a color, you can see we get this nice shadowing.
12:55
And with this buildup the harder we press, the wider it gets.
13:03
Say if the sun was hitting this way, from this direction this would be lighter,
13:06
causing this to be darker.
13:11
When we kick up the stroke, you can really see we can get a nice buildup here.
13:13
So this will be all shadowed out.
13:16
We can make all of these a darker blue,
13:19
and it blends a little bit nicer.
13:23
Now, if we want to use the overlay technique,
13:27
again grab the same brush and select white,
13:30
and then you're going to want to go back to your Transparency,
13:36
switch Multiply to Overlay, and now when you paint over the sphere,
13:40
you can see it gets lighter.
13:47
For this you're probably going to want to drop your opacity down to 30.
13:50
You can see we can get a nice buildup here.
13:56
Now when we change the color from blue to green,
13:58
instead of using a light green here and then a darker green,
14:04
we're able to just simply change the background color to any color we want,
14:08
then the multiply and overlay changes.
14:13
[??]
14:18
And that's it for our Technique Breakdown.
14:21
[??] [The Build]
14:24
When starting, I knew I needed to illustrate the face and worry about the content later.
14:29
Also, I wanted to create closed eyes under the shoes
14:33
in case it was ever used as an installation piece or in motion graphics.
14:37
I realized the brain idea wasn't going to work,
14:42
so I thought to myself, where is the tagline going to go?
14:44
I then went for the next best thing.
14:48
Why don't I just make him eating the laces
14:51
and then having the laces coming out saying Always Authentic.
14:53
Perfect.
14:57
Next I tried using the stippling effect in Illustrator but ended up not using it in the end.
14:59
I found that a custom pattern looked a bit better,
15:04
and it was much easier on a processing rendering speed.
15:07
Just like the Sharpies on the shoes, I laid down the colors light to dark.
15:10
Instead of doing a darker color, I used the multiply and overlay effect for 2 reasons.
15:14
One, in case I wanted to change the color.
15:19
By doing it this way, it's much easier.
15:21
Second, you get a very similar effect to the markers.
15:24
I also used the custom brush to create a multiply and overlay stippling effect on the laces
15:27
and on the facial features.
15:32
From there I spent a good amount of time fine-tweaking the colors and shading
15:34
until I was satisfied.
15:38
Like I said before, when you design for something you're really passionate about,
15:39
you tend to develop some sort of OCD, and you need to know when to stop.
15:43
With the piece final and several thousand Illustrator paths drawn,
15:48
it's now time to lay out the ads. [Final Layout]
15:52
I have 3 types of media to place this on, 2 print and 1 digital.
15:55
So I treated this ad as if this line of shoe were to hit the shelves on November 9th, my birthday.
16:00
The main purpose of the ad is to push the viewer to a splash page
16:05
to see the product and to pre-order.
16:10
I completed the layouts from large to small.
16:13
I first laid out the poster, then the magazine ad, and then the digital ads.
16:15
For the digital ads I wanted to use the basic 300 x 250, 160 x 600,
16:20
then 728 x 90 pixel layout.
16:26
These are typical banner ad sizes.
16:30
When you lay out, make sure you use them in this order:
16:32
the 300 x 250, 160 x 600, and 728 x 90.
16:35
It's easier to manipulate the graphics this way.
16:40
You'll save so much time.
16:42
Also note you can't always use the same content for all of the ads
16:45
since you are limited digital real estate.
16:48
Simply make sure you ask yourself this question:
16:51
What do I want the user to see?
16:54
The shoes, of course.
16:57
Don't forget to make sure your files for print are CMYK
16:59
and your digital ads are RGB.
17:03
CMYK for print and RGB for digital.
17:07
It's time to show it off.
17:10
Post it to your portfolio, let your friends know about it,
17:12
maybe get some feedback and make some revisions.
17:15
You can do this on Dribbble, Behance, or Forrst.
17:17
Also, send your design to your favorite brand and let them know what you have made.
17:21
Show of your skills and design that you worked so hard on.
17:27
You might be thinking to yourself, I'm not an illustrator, I'm a web developer.
17:30
I build web applications. How does this apply?
17:33
This exercise is perfect for creating just about anything that you're passionate about.
17:36
Maybe you could redesign a website for your favorite brand.
17:40
We all know big industries are a bit behind when it comes to cutting edge.
17:44
Perhaps you could design a mobile app for them, maybe something game
17:47
or multimedia related.
17:50
The only wrong action is inaction.
17:52
Create and share.
17:55
People don't know what they want until you show them.
17:56
As always, have fun and exercise your creative.
17:59
[Exercise Your Creative]
18:03
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up