Design a Vintage Style Swissair Travel Poster In Photoshop

    written by Nikola Lazarevic

    Follow this step by step Photoshop tutorial to create a modern, clean, travel poster design for Swissair, and then learn how to transform into vintage poster design. We will use useful techniques related to patterns, visual organization with Photoshop guides, grunge texture to give a distressed look to the composition and adjustment layers for final retro touch.

    Learn how a range of Photoshop techniques pull together the various elements to create the final design.

    Preview

    Click on the preview image to see the final result in full size.

    Tutorial Resources

    Step 1: Create Photoshop Document

    Fire up Photoshop and create a document with your desired poster dimensions (File > New) and choose white for the background color. If you are planning to send your work to the printing press, use a high DPI (between 150-300dpi) and CMYK Color Mode.

    For this tutorial, I created a document sized at 800x1135px, RGB Color at 72dpi (for web use).

    Design A Vintage Style Swissair Travel Poster In Photoshop

    Add 2 Vertical Guides (View -> New Guide) at 15px and 785px.

    Design A Vintage Style Swissair Travel Poster In Photoshop

    Step 2: Add Mountain

    Download Matterhorn 1 photo from stock.xchng and import it onto design (use image below as refference).

    Design A Vintage Style Swissair Travel Poster In Photoshop

    Select photo and press Cmd/Ctrl + U to open the Hue/Saturation window. Check “colorize” and enter the following settings:

    Design A Vintage Style Swissair Travel Poster In Photoshop

    Add one more guide (View -> New Guide), but this time Horizontal at 878px. With Rectangular Marquee Tool (M) make selection,

    Design A Vintage Style Swissair Travel Poster In Photoshop

    then go to Layer -> Layer Mask -> Reveal Selection to apply layer mask.

    Design A Vintage Style Swissair Travel Poster In Photoshop

    Design A Vintage Style Swissair Travel Poster In Photoshop

    Step 3: Add Text

    Pick up Horizontal Type Tool (T), for the font choose Helvetica, and type “MATTERHORN”.

    Design A Vintage Style Swissair Travel Poster In Photoshop

    Lower the Opacity of text layer to 60%.

    Design A Vintage Style Swissair Travel Poster In Photoshop

    As you can see it’s a bit hard to read the text, so we’re going to fix that.
    Create new layer (Cmd/Ctrl + Shift + N) below text layer,

    Design A Vintage Style Swissair Travel Poster In Photoshop

    Cmd/Ctrl + click on image layer mask to make selection (this way operation will only be applied to selection not the whole canvas),

    Design A Vintage Style Swissair Travel Poster In Photoshop

    set the Foreground color to #204660, choose the Gradient Tool (G) and select the Foreground to Transparent preset in the Gradient Editor,

    Design A Vintage Style Swissair Travel Poster In Photoshop

    and draw a few gradients to create subtle background below the text, so the text can become more visible and easy to read.

    Design A Vintage Style Swissair Travel Poster In Photoshop

    Step 4: Add More Text

    In this step we are going to add more text to poster design. Before we start adding text, we need to make order using Photoshop guides.

    If you take a look at final design you can see that there are 5 columns: 4 columns with text and 1 column with Swiss flag. So it’s time to do some math.

    We added 2 Vertical guides at the beginning (15px and 785px) so the availabe space for columns is 770px. The width of each column (including gap between columns) is 154px (770px/5=154px).
    I set gap between columns to 10px, this means that each column is 144px wide.

    Go to View -> New Guide and set the Vertical guides at:

    • 159 (end first column)
    • 169 (beginning second column)
    • 313 (end second column)
    • 323 (beginning third column)
    • 467 (end third column)
    • 477 (beginning fourth column)
    • 621 (end fourth column)
    • 631 (beginning fifth column)

    Design A Vintage Style Swissair Travel Poster In Photoshop

    Add one more guide, Horizontal, at 893px. With this we set the distance between image and text to 15px.

    Design A Vintage Style Swissair Travel Poster In Photoshop

    We can start adding text. With Horizontal Type Tool (T) create text box,

    Design A Vintage Style Swissair Travel Poster In Photoshop
    300% zoom

    and type text. I started with German description of Matterhorn from wikipedia.

    Design A Vintage Style Swissair Travel Poster In Photoshop
    300% zoom

    Add short descriptions in French, Italian and English language using the method above.

    Design A Vintage Style Swissair Travel Poster In Photoshop

    Step 5: Create Swiss Flag

    With Rectangle Tool (U) create red (#d52b1e) rectangle, sized at 108x108px, in empty column.

    Design A Vintage Style Swissair Travel Poster In Photoshop
    300% zoom

    Next, with Line Tool (U), create 20px weight, vertical white (#ffffff) line.

    Design A Vintage Style Swissair Travel Poster In Photoshop
    300% zoom

    Duplicate this layer (Cmd/Ctrl + J), go to Edit -> Transform -> Rotate 90 CW.

    Design A Vintage Style Swissair Travel Poster In Photoshop
    300% zoom

    Step 6: Add Even More Text

    Go to View -> New Guide and add one more Horizontal Guide at 1120px.
    Grab Horizontal Type Tool (T), for font choose Helvetica Bold, set font size to 30px, color to #3d6989 and type Schweiz.

    Design A Vintage Style Swissair Travel Poster In Photoshop
    200% zoom

    Using the same method type name of Swiss country in 3 more languages (French, Italian and English).

    Design A Vintage Style Swissair Travel Poster In Photoshop

    Design A Vintage Style Swissair Travel Poster In Photoshop

    Design A Vintage Style Swissair Travel Poster In Photoshop

    Step 7: Swissair Logo

    Jump over to wikipedia (nifty resource for us designers), download 200px Swissair logo, and insert into our design.
    Convert the logo layer to a Smart Object so we can perform nondestructive transforms on it. With Free Transform Tool (Cmd/Ctrl + T), scale it down a bit (make it smaller) and place it like on the picture below.

    Design A Vintage Style Swissair Travel Poster In Photoshop
    200% zoom

    Set the logo Opacity to 75%.

    Design A Vintage Style Swissair Travel Poster In Photoshop

    And this is what we have done so far:

    Design A Vintage Style Swissair Travel Poster In Photoshop

    Step 8: Red Circle

    Invoke Ellipse Tool (U), hold Cmd/Ctrl + Shift and draw red (#d25934) circle.

    Design A Vintage Style Swissair Travel Poster In Photoshop

    Change the Blend Mode to Color Burn and lower the Opacity to 70%.

    Design A Vintage Style Swissair Travel Poster In Photoshop

    Step 9: Create And Add Diagonal Lines

    Create new document using 10 pixels for the width and 10 pixels for the height, with transparent background. Set the Foreground color to #02152a and with Line Tool (U) draw diagonal line.

    Design A Vintage Style Swissair Travel Poster In Photoshop
    3200% zoom

    Go to Edit -> Define Pattern. Name the new pattern the way you want it, and you will have a very cool diagonal pattern.

    Back to our design, add a layer on top and fill with white. Open the Layer Style dialog window by double-clicking on the layer. Add Pattern Overlay effect, using the pattern we created.

    Design A Vintage Style Swissair Travel Poster In Photoshop

    Select “Blending Options” in Layer Style window and reduce Fill Opacity to 0%. By doing this we removed white color (fill) but pattern overlay remain visible.

    Design A Vintage Style Swissair Travel Poster In Photoshop

    With Rectangular Marquee Tool create selection around image and then go to Layer -> Layer Mask -> Reveal Selection to apply layer mask.

    At this point we can stop!
    We have created cool, clean, modern poster design. Click on the image to see it in full size.

    Design A Vintage Style Swissair Travel Poster In Photoshop

    In next 2 steps I will show you how to transfrom this modern, clean poster design into retro/vintage looking poster.

    Step 10: Add Texture To Composition

    Import awesome Grunge texture by ~darkrose42-stock into our design and place it just below red circle layer.

    Design A Vintage Style Swissair Travel Poster In Photoshop

    Change the Blend Mode to Hard Light and set Opacity to 30%.

    Design A Vintage Style Swissair Travel Poster In Photoshop

    Step 11: Final Vintage Touch Using Gradient Map

    This is the last step in the tutorial. We will use an adjustment layer to give our entire composition the color theme we are going for.

    First, let us go to Layer -> New Adjustment Layer -> Gradient Map to add an adjustment layer above all the other layers.

    Design A Vintage Style Swissair Travel Poster In Photoshop

    The Gradient Map adjustment layer alters the image by applying a gradient map to the image. Gradient map applies the gradient by using the lightness and darkness values in the image as a map for how the gradient colors are applied.

    Set a gradient going from dark purple (#640270) to dark yellow (#dcb201), then lower Opacity of adjustment layer to 40% to give our design a faded vintage feel.

    Design A Vintage Style Swissair Travel Poster In Photoshop

    Here Is The Final Result!

    Get free online printing quote for your photo poster printing from PsPrint.com

    Your Turn To Talk

    I hope you enjoyed this tutorial and I look forward to hearing your thoughts in the comments. Thanks for following along with me!

    Authored by

    Web Designer, Blogger, M.Sc in Electronic Engineering from Nis, Serbia. Founder of webexpedition18.com. You can find me on Twitter.

    Enjoyed this story?

    Please leave your comment about this post on the comment section below. If you liked it tell your friends by tweeting it. You can also subscribe to our feed by rss or email.

26 Comments
ADD COMMENT
  • Tomas says:

    February 7, 2011

    Love these details, colors and composition. Awesome tutorial Nikola!

    • Nikola Lazarevic says:

      February 7, 2011

      Thanks Tomas. I’m glad you liked it :)

  • Bill Chambers says:

    February 7, 2011

    Very nice! Love the style and how you achieved the vintage look! As soon as I started reading it, it reminded me of one of my favorite tutorials, your Annapurna Expedition: 1970 tutorial! Keep it up Nikola!

    • Nikola Lazarevic says:

      February 7, 2011

      Thanks Bill! I have that strange obsession with mountain peaks :D
      Glad you like the outcome and I didn’t know that Annapurna is one of yours favorite tutorials.
      Thanks man!

  • Sneh Roy says:

    February 8, 2011

    This is gorgeous artwork Nik! Very nice tutorial!

  • Milos says:

    February 8, 2011

    I’m with Bill on this one, huge fan of the vintage look.

    Great tut, Nik. Looking forward to the next one.

    • Nikola Lazarevic says:

      February 8, 2011

      Thanks buddy :)
      Hope to write new tutorial soon!

  • janersa says:

    February 9, 2011

    Simply beautiful… and a very nice tutorial.

  • dumazz says:

    February 10, 2011

    I like the retro design style. Very cool tutorial.

  • jose says:

    February 11, 2011

    Buddy after this one i really expecting for the next´s! really nice detail tutorial. The poster is already great after that vintage look… so the final step for me is the most important to archive what i everyone should do to get that old style.

    Once more, keep going the good work. Im really expecting to see the next ones :D

  • Pixelbot says:

    February 11, 2011

    Great, very helpful. Thanks!

  • Kiki says:

    February 14, 2011

    Nice poster and interesting approach. However a lot of details are not paid attention, e.g what do you mean when you say to fill the layer with white? No explanation how that is done. Need to pay more attention to details cause its not a video tutorial and you don’t want to be wasting people’s time.

  • Kiki says:

    February 14, 2011

    The gradient at the end when applied comes out looking darker than yours is. When a layer mask is applied to the image as you instructed, it doesn’t leave a black border like you have in your poster and you did not mention that you applied a layer blend mode to one of the layers …..

  • Nikola Lazarevic says:

    February 14, 2011

    @Kiki I’m so sorry if missed something but as much as I can recall all steps are explained very well. This is not a basic tutorial, so I didn’t take time and space to explain how to fill layer with white color, it’s quite simple.
    Poster does not have border around it so there is no explanation for that, it’s just the way I presented final image using CSS.

  • Tom Durkin says:

    February 15, 2011

    Awesome! Will definitely be trying this tomorrow!

    Tom

  • patrick james says:

    February 17, 2011

    Wow. that looks great!

  • Tutorial Lounge says:

    February 18, 2011

    stunning work you did in this beautiful tutorial. thanks

  • adam says:

    February 18, 2011

    Very nice tutorial, and great outcome.

  • david says:

    February 19, 2011

    Good work! Nice color!

  • vicki smith says:

    February 21, 2011

    Really really enjoyed doing this…always wanted to know how to create such an effect and now I know!! Thanks so much!

  • alice says:

    February 22, 2011

    This is totally awesome ! Thanks !

  • Nikola Lazarevic says:

    February 23, 2011

    Thank you so much! I’m so glad you enjoyed this tutorial.

  • Resimleri says:

    February 24, 2011

    Amazing tutorial. Thanks a lot.

  • Ferg says:

    February 28, 2011

    Really in depth…thanks Nikola :)

  • Kiki says:

    March 2, 2011

    Thanks Nikola,
    I will do it all over again from the top and find out where I missed it. Sorry for my hasty conclusion. Thanks also for the tutorial.