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
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.
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.
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)
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.
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.
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.