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
Preview
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
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