Using Retro Style Images And Banners For Advertising

Posted in Quick Tips, Text Effects, Tutorials3 years ago • Written by 4 Comments

Retro style images and pop art graphics like those of Roy Lichtenstein and Andy Warhol is a popular style adopted by graphic designers for web and print design. They are chic, fashionable, eye-catching and add to the ‘cool’ factor of the company and its products. Lots of stock images are available for download which can be used for web designing, however if you want something unique or customized it’s better to grab a pencil and paper and do it yourself.

Step 1: Visualize the layout


If you are designing a website, it is important that you choose the image while constructing the wireframe as it should fit your overall layout accordingly. Have a look at some examples to get an idea. It is popular to use them like banners or as full body depiction which encompasses the entire page. Some examples are below
Mailchimp retro

istockphoto

Tagetscope retro layout

Step 2: Sketch


Once you have decided on the layout, its time to work on the image. Start with a few pencil sketches and try to capture the essence of the product. In this case my client was a mobile app company, so I decided to create an image of a lady displaying a standard touch screen mobile phone. To make sure that the original product gets the deserved attention I decided to sketch the lady and use a real phone image so that it remains highlighted and looks like a fun combination as well.

Retro image sketch

Step 3: Scan


Photocopy the pencil sketch so that the original sketch is preserved and can be re-used later. In this step you can either scan the sketch and add the details digitally (like details of hairstyle, dress etc) using Photoshop and a Wacom device, or if you feel more comfortable on paper, try to sketch the details on the photocopy and then scan it.

scan retro image

Step 4: Digitally enhance


Once you are satisfied with the scan, open it with Photoshop (or a similar editor) and plug-in your Wacom (or similar device). First use the magic wand tool in Photoshop to select as much area as possible from the image and save the structure in a new layer. Now use the pen tool to select around a shape and copy on a new layer. Finally use the brush tool and with careful movements of the Wacom pen add finishing touches to the image.

a. Using the magic wand tool to select and copy areas from the scanned image, and reconstruct them on a different layer (say layer2)

magic wand on retro image

b. Zoom and use the pen tool to copy the finer details on layer 2

pen tool on retro image

c. Use the brush to reconstruct the details on layer 2.

brush tool on retro image

Step 5: Integrate


Add the mobile phone (or any other product) to the image and adjust the size and contrast of the image for smooth integration. Add the entire image to the banner or the web layout. Try a few different backgrounds to see what works best.
retro and pop art inspired banner
retro and pop art inspired banner

3 Written ArticlesWebsite

Prithu Banerjee a.k.a. Prit is a graphic design consultant. He lives in Sweden and has recently started his firm twopointzero.se which specializes in web 2.0 consultancy for startup and mid sized companies. He loves traveling, exploring and experiencing different cultures and cuisines.

4 Comments
  • Morgan

    Wednesday, December 7th, 2011 23:18

    1

    Awesome tip, thanks Prithu!

    0
  • Maria Wendt

    Monday, April 9th, 2012 14:56

    4

    Haha, yep it did! I really like this article and just stumbled across it again!!

    0
  • Rean John Uehara

    Tuesday, February 28th, 2012 21:34

    3

    Magic happened and the spam comment disappeared! :D

    0
  • Maria Wendt

    Tuesday, February 28th, 2012 21:32

    2

    Sheesh, you’d think they’d delete such an obvious spam comment! Very great tutorial…wish I had a Wacom…:(

    0
  • Morgan

    Wednesday, December 7th, 2011 23:18

    1

    Awesome tip, thanks Prithu!

    0
  • Maria Wendt

    Tuesday, February 28th, 2012 21:32

    2

    Sheesh, you’d think they’d delete such an obvious spam comment! Very great tutorial…wish I had a Wacom…:(

    0
  • Rean John Uehara

    Tuesday, February 28th, 2012 21:34

    3

    Magic happened and the spam comment disappeared! :D

    0
  • Maria Wendt

    Monday, April 9th, 2012 14:56

    4

    Haha, yep it did! I really like this article and just stumbled across it again!!

    0

Comments are closed.

54.204.144.96 - unknown - unknown - US