Big Typography Snowboarding Poster

By   |  Stashed in Design & Drawing

I’m thrilled to announce this is my second tutorial that is a direct result of someone using the Community Suggestion Box. Here’s what tripdragon suggested…

BIG Crazy text typography. Like those seen in articles like ilovetypography and http://www.smashingmagazine.com/2008/02/25/breathtaking-typographic-posters/

I know how to do it. Create outlines in illustrator. But, I seek tips on using text the most that you can before creating outlines. Err, just more info on the design process would be awesome!

I did some research on the awesome posters he linked to and found some more inspiration at sites like vi.sualize.us and flickr. Another cool reference that I found was Typography is Sexy Part I, II and III over at Fuel your Creativity.

I quickly realized this was a bit of a vague and challenging subject to write about. However, big typography has always inspired me, so making a tutorial on this was something that I welcomed with open arms.

Below is the Final Results of my Efforts:

Here’s How to Create It:

Step 1

Create a new document in Photoshop at the size you’d like, I used 1024×1500. Hit ‘d’ on the keyboard to reset your colors to the default black and white. Then hit ‘alt + backspace’ to fill your background layer with black.

Step 2

Find a picture that you’d like to use as you main subject. I used the snowboarder below. Your more than welcome to follow along using that as well. Open up that pic in a separate file in Photoshop.

Step 3

Now it’s time to extract the snowboarder from the picture. The next few steps are my suggestion for how to extract the snowboarder, however you’re welcome to use whichever technique you know the best. Grab the pen tool and begin taking the time to extract the snowboarder, although it’s tedious this will ensure crisp results. Within the shape layer that the pen tool is creating, I prefer to drop the opacity to around 15% in order to see my selection better. Go around the entire outside of the snowboarder.

Step 4

Make a copy of the background layer by clicking on it, then pressing ‘ctrl + j’. Delete the original background layer and put a blank layer at the bottom, so that your layers look like the ones below.

Step 5

Turn the shape you just drew in step 3 into a selection by pressing ‘ctrl + click’ on the shape thumbnail in the layers palette. Then click, ‘ctrl + shift + i’ in order to select the inverse. Lastly, with the snowboarder layer selected (if you followed along ‘background copy’) press ‘ctrl + x’ to cut the background.

Step 6

Repeat the same extraction techniques to get rid of the sky showing between the board and his leg. Have both the black canvas and the snowboarder image up. Grab the move tool (shortcut ‘v’ on the keyboard), click and drag the snowboarder onto your poster. Position him like below.

Step 7

I wanted the snowboarder to have a graphic, drawn kind of look. I discovered a pretty nice effect just using a couple of filters. First, click Filter->Artistic->Cutout. Change the settings to what is shown in the image below:

Step 8

For the second filter I used watercolor. Click Filter->Artistic->Watercolor. Use the image below as a reference for the settings:

A Little About Color Theory

I’ve spoke about it before in my Design Inspiration with a Yellow Focus post, but I really enjoy the simplicity and elegance of a one-color theme design. It was because of that inspiration that I decided to keep my colors for this poster simple. Given the eventual poster saying (‘Go Big or Go Home’), and the snowboarding culture, I felt the poster lent itself beautifully to a bright, vibrant color. You’d be amazed at just how much our minds associate certain colors with distinct feelings. Cymbolism is a newer site that attempts to learn more about the connection between color and mood. Or to put it in their words:

Color is the ultimate tool a designer has at his or her disposal to communicate feeling and mood. Cymbolism is a new website that attempts to quantify the association between colors and words, making it simple for designers to choose the best colors for the desired emotional effect.

Step 9

With that color theory fresh in our minds lets use a Hue/Saturation adjustment to get the vibrant green that we are going to use throughout our design. Click Image->Adjustments->Hue/Saturation. Check the colorize box and move the sliders to the following settings:

Step 10

I wanted the contrast to be even more exaggerated so I adjusted the levels. Click Image->Adjustments->Levels. Change the settings to something like below:

Step 11

That looks pretty good for our purposes, however I didn’t like the board being so white and there were some other places worth cleaning up. So make a selection of the board and any other parts you want to fill. Sample a portion of the bright green using the eyedropper tool (shortcut ‘i’ on the keyboard) and fill your selection with that color till you get something like the image below.

Step 12

Next up we are going to add a simple glow effect to our snowboarder. Select the snowboarder by ‘ctrl + clicking’ on the thumbnail in the snowboarder layer. Then click ‘Select->Modify->Expand’. Choose 5 px for the amount.

Step 13

Add a new layer below the snowboarder, then fill your selection with white. Then click ‘Filter->Blur->Gaussian Blur’. Change the amount to 5.

Step 14

Add another new layer below both the snowboarder and the snowboarder glow. Grab some simple grunge brushes. I highly recommend trying out 33 Subtle Grunge Textures and Effects from WeFunction. Using the the same green color drop in some subtle grunge effects behind our snowboarder. Drop the opacity of this layer to around 50%. Here’s what my grunge effect looks like.

A Little Bit About The Type I Used

I tried to keep the fonts pretty simple, just like the color. Robin Williams (no, not the comedian) is an awesomely talented graphic designer and writer. One of her books, “Design Workshop, Second Edition” is a personally favorite of mine. She writes often about 4 basic principals that will help you become a more professional designer. They are:

Contrast - Don’t use typefaces right next to each other that are too similar. It’s a good idea to use the same at different sizes or completely contrasting typefaces, like a san serif and a script.

Repetition - Consistency throughout a design can really pull the whole theme together. A good example of this is when you see portion of a logo in stationary big and very faint in the background.

Alignment - Way too often in amateur designs every element is centered. Don’t be afraid to left or right justify things.

Proximity - Another common amateur mistake is to overcrowd design. White space can be a very good thing!

Step 15

Click on the text tool, switch to a nice grunge font, I used Tiza, which can be downloaded for free at DaFont.com. Type in the word ‘BIG’. Sample and change the font to the green color. Hit ‘ctrl + t’ to bring up the free transform tool. Size and move your text into place. Then go to a corner till your cursor becomes an arched double arrow. While holding shift down click and drag to rotate the text at 15 degree increments. Rotate it -30 degrees.

Step 16

Add the other text elements. I used a white for the color and put ‘GO’, ‘OR GO’ and ‘HOME’ all on separate layers and made them all slightly different sizes. When you rotate home don’t forget to hold down shift in order to rotate it incrementally. It should be rotated 60 degrees. Here’s where I’m at so far…

Step 17

I thought it would be a cool effect to extend a couple lines off the text. Create a new layer and grab the paintbrush tool (shortcut ‘b’ on the keyboard). Change to a round, hard, 90px brush, with the same green color you’ve used throughout. Click once towards the bottom left part of ‘BIG’ hold down shift and click again to the left of the canvas trying to maintain the angle of the text. If you don’t get it right the first time, just hit ‘ctrl + z’ to undo it and try again or hit ‘ctrl + t’ and rotate it into place.

Step 18

Add a layer mask to that layer. Click ‘Layer->Layer Mask->Apply’. Change your foreground color to black and grab some of your favorite subtle grunge brushes. Paint away some grunge over the ‘BIG’ extension you drew. Keep it subtle.

Step 19

Repeat the same effect for the extension off of ‘HOME’.

Step 20

Next up I wanted the poster to have a little more interest. So I went on the search for some fun snowboarding quotes. Here’s what I found:

I tell you the truth, The Kingdom of Heaven is like the brave snowboarder who enters through the narrow opening in the trees. He finds many fresh turns there, and blessings of all kinds. And there is weeping and gnashing of teeth on the icy groomed runs for the lazy snowboarder who takes the wide open path.

Everyone knows that no one is in control, really, but at the same time, if you’re gonna be out of control, at least do it where you can land it, and not end up broken and lost.

I added those two quotes in a gray colored Myriad Pro font and angled them again.

Step 21

Lastly, I dropped in the two quote marks in the background using a dark gray. The font for this is call Downcome. Here’s the finished product.

I hope you enjoyed this tutorial on big typography. Definitely drop me some feedback using the comment form below. And if you come up with a cool design I would love to see it! Upload it to the MyInkBlog Flickr group.

About the Author

Andrew is a primary contributer for MyInkBlog. He is a full time web developer for Niagara University. When he's not working there, he's a blogger, twitter'er, wordpress'er, silverstripe advocate, blessed father and husband.

More posts by

Website      

  • http://naldzgraphics.com NaldzGraphics

    nice!!!.i like your style my friend:)

    NaldzGraphics’s last post was… Last Week Advance Photoshop and Illustrator Tutorials Must Not Miss

  • http://www.oneoftwenty.com oneoftwenty

    Very cool! That Tiza font is pretty slick. I’m definitely gonna have to go grab it.

  • http://ajdf.co.uk Alex

    Great but I think it could lose the glow…

  • http://craigsnedeker.blogspot.com/ Craig Snedeker

    Awesome tut!

  • http://www.psdfan.com Tom Ross

    Cool tutorial! That grunge font is really nice, as if the final effect you get :)

    Tom Ross’s last post was… Give Your Photos Awesome Lighting in Just 10 Steps!

  • http://www.myinkblog.com Andrew Houle

    Naldz, Haha, love the comment.

    oneoftwenty, Yeah Tiza rocks, I found it not too long ago and it’s already one of my favorites!

    Alex, I kept going back and forth about the glow. I think it adds something, but you could definitely leave it off. Mostly, I like the technique and I wanted to share it with you.

    Craig, Thanks!

    Tom, Thanks, Tiza is certainly a great grunge font. Downcome is the one I use for the quotes and that’s also an amazing free grunge font.

  • http://rwsoft.method8.net/ Simon SC

    Pretty good tutorial. Well explained!

    However the tilted body text doesn’t really look good, the baseline is all over the place, and it looks “jittery”, if you know what I mean. This is a known Photoshop problem so don’t sweat it :)

  • http://www.myinkblog.com Andrew Houle

    Simon,
    I’m not entirely sure what you mean? Do you have any suggestions for how you would handle it differently. Thanks for the reading, and dropping some advice.

  • http://rwsoft.method8.net/ Simon SC

    Andrew, don’t worry too much about it. I first learned about it here: http://ministryoftype.co.uk/words/article/watch_the_baseline/

  • http://www.myinkblog.com Andrew Houle

    Simon, Thanks for the link. I always want to keep improving, so it’s not so much worry, as it is a desire to better my design skills. Thanks again for the advice, keep it coming.

  • tripdragon

    Cool! You came through with it.
    I see the error of the baseline as well. Sadly I was hoping for a bit more on the rules of typography and when to break them.

    For example the “or go” in this case leads the eye out and off of the page. And the lines point no where as well. And to much time was spent on the snow boarder.

    I know it’s not the kinda comment you wanted after my small request. But I am really stubron when it comes to why things work.

    Thank you again

  • http://www.myinkblog.com Andrew Houle

    Hi Trip, thanks for getting back to me and dropping your thoughts. I now see what the comment with the baseline means. From what I can tell their doesn’t seem to be a ton you can do within Photohop to fix that.

    I think I do understand now that you wanted something more on the general theory of using big typography. A lot of it is finding what works with your style and your subject matter, so it is difficult to write on something as abstract as that. I hope this did help you a little. And thanks again for your suggestion.

  • http://www.myinkblog.com Andrew Houle

    Trip, I just wanted to add that Specky Boy has put together a list of 11 Amazing Tutorials Combining Great Typography and Skillful Vector Art. It’s a great list, some of which may be right up your alley.

  • tripdragon

    OH! That last link is AWesome! Many thanks dude. I still have ya book marked cause your content is good and getting better !

  • danneh

    love the tut…but i also love the vibe in the posts + the Andrew Houle’s attitude! keep it up man!

  • http://www.myinkblog.com Andrew Houle

    @danneh Thanks! I love the vibe of this comment :)

  • http://www.ptcmaster.com PTC Master

    Thanks very much!
    it’s great!

    PTC Master´s last post was… ARA-BUX Paid Me!

  • http://ptcmaster.com PTC Master

    I cant do this :D

  • me

    Hey, I love it … thanks for the tips and sharing … I work in a commercial environment that requires instant turn around … there is always room to do something better, but when you have less than an hour to turn out a finished graphic this is reality … and it looks darn good

  • Boob

    cool cool cool i love it. i like the angles used i think it would look good in blue too.

  • http://elearningking.blogspot.com/ elearning

    Thanks alot for this great tutorial. You inspired me so much!

  • Skweekah

    Radical dude. You make it look like a stroll through the botanic gardens on a crisp spring morning, where the coffee just tastes good and the secretaries are smokin!

  • nikki

    Is this available to order? It would look great in my sons room. Either way you did a great job and I like how you incorporated the scipture.

  • http://www.myinkblog.com parikh

    A real good tutorial! Loved it!
    Thanks a lot.
    Pls do keep them coming.

    Parikh
    India-Mumbai

  • Electric

    The tut is rad, kudos!

    And about the baseline issue; would it be a good idea to take this finished piece into Illustrator and redo the text? Keep the photoshop text as a guide to where you wanna place the text — make it invisible in the psd file as soon as the vector text is in place.

    I imagine this way you get super crisp and clear text, and the baseline issue is fixed — am I right?

    Once again the whole design concept is solid; many thanks for sharing. Hope to see more of this.

  • http://www.myinkblog.com Andrew Houle

    @Electric Glad you liked it :) I agree, bringing the poster into illustrator for the text should fix the baseline issues… good call!

  • http://rss.turkishinet.com/ Rss Web

    Thanks So Much, Great!

    Rss Web´s last post was… Jon Stewart Talks Twitter Frenzy

  • http://eeshanicus.wordpress.com Eeshan Srivastava

    thanks a lot man!!!
    that was brilliant…..great imagination and skill!!!

    Eeshan Srivastava´s last post was… The Knights of Asetonia

  • http://tuts.cgbaran.com/ CgBaran Tuts

    Nice design

  • http://www.presidiacreative.com/ Eric Shafer
  • http://www.tamil-united.blogspot.com kissmo

    Thanx for the great designs..

  • http://www.tutoriallounge.com tutorialslounge

    i really like your work in this informative tutorial. thanks
    .-= tutorialslounge´s last blog ..25+ Animations in Photoshop Tutorials =-.

  • http://flowsnowboardbindings.com Flow Snowboard Bindings

    Dude killer tutorial! And I extremely suck at photoshop, and was able to do a pretty good job with your steps. Bookedmarked this for future use.
    .-= Flow Snowboard Bindings´s last blog ..NEW 2008 Flow M9 Freestyle Snowboard Bindings Black Medium Step In =-.

  • http://www.psprint.com/postcards Ashley Adams : Postcard Printing

    I wish I could do something like that. I’m crazy about posters and you have posted a brilliant idea here. I must give it a try. Thanks

  • http://www.thejibshow.com Todd

    great info trying to use this for a poster for an event snowboard or die

  • http://www.bigdreamssnowboarding.com snowboad boots uk

    very interesting and informative, i will link ya in a tweet

  • http://www.cratercomets.com Mike Rogan

    Andrew

    Outstanding – I introduced this today in class to my students (~60 11/12th graders) and they loved it. Great instruction and step by step – the work produced was tremendous. Thanks for you time and effort – it is appreciated.

  • k. wags

    Great tutorial. Fun and not too difficult either. I used royal blue instead of green and a picture of my brother playing basketball too. Came out cool! thanks for the help!