How to Build Your Portfolio by Designing for Your Favorite Brand18:05 with Mat Helme
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.
[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 up