Total Followers 132,503
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.
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
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.
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.
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)
b. Zoom and use the pen tool to copy the finer details on layer 2
c. Use the brush to reconstruct the details on layer 2.
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.
Get The Only Freelancer crash course you will ever need to read!
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.
Wednesday, December 7th, 2011 23:18
Awesome tip, thanks Prithu!
Tuesday, February 28th, 2012 21:32
Sheesh, you’d think they’d delete such an obvious spam comment! Very great tutorial…wish I had a Wacom…:(
Tuesday, February 28th, 2012 21:34
Magic happened and the spam comment disappeared! :D
Monday, April 9th, 2012 14:56
Haha, yep it did! I really like this article and just stumbled across it again!!
Get The Only Freelancer crash course you will ever need!
If not, then it's time to learn how to:
You can trust 1stWebDesigner to help you become a better web designer!
- Jacob Cass | Just Creative
Just enter your name and email below and click Get Updates!
Morgan
Wednesday, December 7th, 2011 23:18
Awesome tip, thanks Prithu!
Maria Wendt
Monday, April 9th, 2012 14:56
Haha, yep it did! I really like this article and just stumbled across it again!!
Rean John Uehara
Tuesday, February 28th, 2012 21:34
Magic happened and the spam comment disappeared! :D
Maria Wendt
Tuesday, February 28th, 2012 21:32
Sheesh, you’d think they’d delete such an obvious spam comment! Very great tutorial…wish I had a Wacom…:(