A QR Code, or Quick Response Code, is a symbology that was developed in Japan by a Toyota subsidiary (Denso Wave) during the mid 1990s in order to efficiently track the various parts of automobiles during the manufacturing process.
A QR Code consists of a two dimensional arrangement of modules which forms a unique code. This code usually drives traffic to a website offering a product, service or other information. Actually, QR Codes can be used to transmit data for any number of purposes including, but not limited to:
Drive traffic to your website
Send an email, text message or tweet
Call a phone number
Download a calendar event
Download an App
QR Codes can also help track advanced metrics associated with the web traffic they help generate.
It is important to remember, however, that QR codes can be used for malicious purposes, such as:
Linking to a dangerous website with browser exploits
Exposing a user's sensitive data such as passwords, files, photos, transactions
Corrupting privacy settings
Spreading viruses and spyware
Consequently, the same cautions employed when surfing the web should also be employed when scanning QR codes.
There are a number of free QR Code generators available either in the form of apps one can download or websites which will perform the task of generating the code for you. Other apps which offer more options can be purchased inexpensively.
Some code generators will allow you to track the metric data results of your code use. You can choose a code generator which enables you to track this information or you can use Google analytics on your website. The ability to track these metrics can make QR Codes an important part of your marketing strategy.
Should you decide to use a QR Code as part of your marketing strategy, it would be wise to decide up front exactly what you want the code to accomplish. Consider how you want to track the results of using the code, then put into place all the necessary means of doing so in order to evaluate how effectively your QR Code is serving your marketing strategy.
Ultimately, a QR Code must be scanned. That being so, the most efficient QR Codes have just enough information to accomplish the intended goal, making them easy to scan. Too much information and you risk having a failed experience with a code that does not scan efficiently.
Many code generators will give you the option to output your code in PNG, EPS or JPEG formats. I suggest using EPS as this format (unlike the other two) is a scalable vector graphic format that does not suffer loss when enlarged. Be careful to scale your code proportionally. Stretching or distorting it can lead to a failed scan.
Location, Location, Location:
Code placement is important. Here are some ideas:
Newspaper, online magazine and TV advertising,
Posters, billboards and banners
Trade show displays
T-shirts and Uniforms
Trucks, Vans and Buildings
A QR code can be placed just about anywhere but you should consider placement carefully. You can put a QR Code on a billboard or on the side of a truck or bus, but are those the best places (or the safest places for that matter) to put your code if you want people to scan them? Wherever you place your QR Code, it should be positioned so that it is easy to scan.
Your code should be clearly distinct from its surroundings. If it blends in too much with its surroundings, it may not scan well. A clearly defined border around the code can help in that instance. A QR Code should be no smaller than about 1" square but can be made large enough to fit on a billboard. Keep in mind a 10:1 ratio when creating your code. If your code is 1" square, it can be easily scanned from a distance of 10".
Push the Envelope:
Most of us think of QR Codes as rather ugly, generic looking eyesores. But you don't have to settle for this. A QR Code output with a high correction level is flexible enough to handle some tweaks in appearance.
This QR Code, designed for Loui Vuitton by Takashi Murakami actually works on some devices.
You can change color, use blends, ad graphics, use rounded corners or even drop shadows. This may require you to bring your code into Adobe Photoshop or Illustrator (another reason to output the original code as an EPS file). It takes some experimentation and ultimately you need to test your code on several devices to be sure your client will not be disappointed in the end by a failed scan, but if handled carefully the result can be quite pleasing. Essentially, if you generate your code at a 30% correction level, you can safely obscure about 30% of the code with a logo or graphic. Adding a white outline around your graphic also seems to be helpful.
I didn't go quite as far as Murakami with my QR Code. I'm just not a flowery, panda bear type of guy.
More Tips to Remember:
Don't be redundant in your design. Design space is valuable real estate so why use your code to repeat information you have already communicated to the customer when you can use it to drive the customer to the next step of their experience with you, your product, information or service.
QR Codes are new enough that there are plenty of people who don't know what they are or how to use them. Give directions such as, “Scan this with your smart phone.”
Not everyone has the means of scanning a QR Code. For those who do not, it is wise to still provide a URL so they can still access your website.
Test your QR Code before you go live with it and if possible test it with multiple devices. A highly designed QR Code may not scan on every device. You must carefully consider the trade-off between appearance and usability.
A well made, well positioned QR Code can be an effective tool to help drive traffic to your website. What will the user experiences when they get to your site? Well, that is another subject all together.
Brenna Roth, 10 Best Practices for Emplying QR Codes. (https://www.x.com/devzone/articles/10-best-practices-employing-qr-codes)
Tara Hornor, Custom QR Code Best Practices, November 14, 2011. (http://marketingzeus.com/article/custom-qr-code-best-practices)
Anna Pfeiffer, 7 Best Practices for QR Code Success, November 23, 2011. (http://bronto.com/blog/mobile-marketing/7-best-practices-qr-code-success#.TtlaS5heH8s)
Judd Wheeler, QR Code Best Practices for Print, October 11, 2011. (http://www.themobilists.com/2011/10/11/qr-code-best-practices-in-print/)
Hamilton Chan, How to Make Your Code More Beautiful. (http://mashable.com/2011/04/18/qr-code-design-tips/)
Some time ago I was asked to create a magazine ad for a tile store. The client wanted imagery that highlighted the unusual creative flair of the store and it's products and services. To do this, I created the ad around a theme based on the character Dorothy from The Wizard of Oz in which I showed Dorothy (her feet and legs only) wearing the famed Ruby Slippers and walking on a golden-tiled road. Dorothy represents Valerie (the store owner). The client was very happy with the ad.
The first ad I created for this client. (Click all photos for a larger view).
When I received the new request for an ad announcing that Valerie is moving, I wanted to continue the Oz theme I had created for the earlier ad, only this time showing Dorothy (I mean, Valerie) on the move. I imagined a pretty woman in ruby shoes sitting on suitcases, taking a moment to rest from her travels along Yellow Brick Road.
There was no budget for hiring a model, renting props and hiring a photographer for a photo shoot so I was stuck using stock photography. After much searching, I found several photos which I could use to create the image, one of which matched my idea almost perfectly. There was still going to be a significant amount of photo manipulation but I expected as much with such a conceptual ad.
This is the original photo I found on Photos.com
Working in Adobe PhotoShop, I first wanted to make some adjustments to the model. Using the Smudge Tool at a low setting I began by “painting” along her hair and skin. The effect is very subtle but it helps to minimize noise in the photo and give the model a slightly polished look.
Ruby Slippers and...Hat?
With whatever photos I might find, I fully expected a need to change the color of the shoes to red. The fact that I had found almost the perfect image to match my idea and the shoes were already red was a nice surprise. They aren’t the style I was imagining but I do believe they will work just fine. To give the impression that the shoes are made of rubies, I used the Brush Tool with a soft edge and a few adjustments to the Shape Dynamics and Scattering Settings, painting sparkles in varying sizes all over the shoes. I like working on multiple layers so I can have more control should I need to make changes later on. I used three different size sparkles (so three different layers). I also added sparkles to the hat. After all, the stylish lady has to accessorize and if she wears ruby shoes she’ll have to have a ruby hat!
The inset image shows the blend layer before I adjusted
it to the blending mode and opacity I wanted.
I liked the overall lighting of the image and the fact that it looks like the sun is just rising (or setting). And while I liked the warm glow that is falling on the model, I think the landscape looks too much like Kansas and not enough like Oz. Also, the sky lacks color. To change this I added a layer and filled it with a blend from cyan to dark blue with the blending mode set to Color and the opacity adjusted to 16%. I also added two other adjustment layers affecting the Brightness/Contrast and the Hue/Saturation of the overall image. This helped brighten everything and color of the sky so it looks more blue than gray. I’ll do more to the sky later.
Red dress changed to blue.
At first I liked the red dress with white polka dots but I began to think the wardrobe had too much red. I decided to change the color of the dress to blue with white polka dots. I did this by first isolating only the red areas of her dress with a mask I created from alpha channels. Loading the alpha channel as a selection, I added an adjustment layer (hue/saturation) swinging the color to blue and reducing the saturation to reduce the color intensity.
For Yellow Brick Road, I found a stock photo image of gold tiles. Using Edit/Transform/Distort, I contorted the tile image so I could apply it to the road surface in the foreground. I added some shadows and adjusted the color slightly.
For the distant parts of the road I sampled colors from the foreground tiles to create a blend. Then I created an alpha channel and filled it with noise. Loading this alpha channel as a selection, I filled my background road with golden noise then applied a Gaussian Blur to soften the road so it would appear to be in the distance.
Next I wanted to apply an effect that has to be done to a flattened version of the image but I didn't want to lose my individual layers. To flatten my image while also keeping all of the layers, I hold down the option key while selecting Merge Visible from the Layers Pallette. This creates a new layer above all the others (which is actually a flatten version of the file) while keeping all the other individual layers intact. Next I used Image/Adjustments/Variations and chose More Blue. This cooled the previously too warm cast of the image and brightened up the greens and the sky.
However, I didn’t like the effect this had on the model and the rest of the foreground because I wanted them to keep their warm glow. To fix this I use a layer mask to remove the foreground elements from this layer, allowing the original warmer layers below to show through.
Hot model...cool, blue sky
I still wanted the sky to be more blue so I added a new layer and filled it with a radial blend from blue to no color, setting the blending mode to Multiply at 53% and masking out everything but the sky.
I tend to be a minimalist when it comes to my designs. I like to boil everything down to where I have just enough to accomplish the task. Anything more is excess baggage. I had been fighting the urge to put Toto into the ad throughout the whole process. I kept telling myself that Toto was not crucial to the message. No matter how hard I fought to put down Toto, the idea kept coming back. I've learned to trust my gut. “After all,” my gut reasoned, “Toto may not have been crucial to the story (technically, you could have The Wizard of Oz without Toto) but Toto was most certainly crucial to Dorothy! ”
I found a couple of nice stock photos of dogs. I chose the Yorkshire Terrier and added it to the foreground. I flipped the dog image so it is looking in the same direction the model is looking. I also added accompanying shadows and made some color adjustments so the dog would blend into the rest of the scene.
Finally, I added some larger specular highlights to the ruby shoes and hat. Now the image is ready for the text.
Importing the image to an Adobe InDesign document, I set the text in Linoscript medium, Spectrum semibold and Futura bold condensed.
This is one lady who knows exactly where she’s going.
This is the first header I made for this blog page (with my updated logo).
It features my illustration of Gil-galad.
I’ve created a series of headers using my logo against different backdrops and environments. I started out with the idea of simply using some of my illustrations as backdrops for the logo so I could add some variety to the look of my blog page, swapping out headers from time to time. The project became more interesting as my imagination began going in different directions and I could envision my logo in different environments.
Below are some more variations featuring my illustrations. Click any of the images below for a larger view.
This is where my imagination began taking the idea in different directions as I added the logo to various photo composite images which I created.
It's has become a fun distraction for me to create these headers and I hope to make many more in the future.
My latest logo design is this wordmark for the company WeatherLoc™, a company which specializes in home insulation — specifically that type of insulation that is blown directly into the walls of you home.
It was the client's desire to communicate the energy and cost saving benefits of their product. This priority was met through color choice and through the visual of the green leaves positioned over the letter t. The leaves were originally placed atop the letter h but were moved at the client’s request.
The target customer of WeatherLoc is the average home owner (not builders or professional contractors) so we agreed to avoid using any technical symbols that might not be well known to the average consumer. Instead, we decided to focus on the benefits of locking-in energy and savings. I capitalized on the shape of the letter o in the second part of the company name by making it into a lock. This also helps remove any confusion that may arise as a result of the divergent spelling choice of changing Lock to Loc.
Purposeful misspelling, employed for special effect, is called sensational spelling, or divergent spelling. It is a popular technique in advertising and is used to create a unique word or identity that will attract attention and can be trademarked. While the risk of losing the meaning of the word is minimal in this case, visually reinforcing the lock concept helps to further drive home the message and also provides an easily memorable visual.
In one of my early designs for the logo, I made the lock element look more like a padlock. The client requested the removal of the shackle on the top of the lock.
Round 1 version sporting a shackle type padlock.
Note also the leaves placed over the letter “h.”
In addition to creating a standard logotype that can be printed in 1 or 2 colors and also reversed out of a color background, I included a version featuring leaves and lock elements that are more illustrated, for possible use in high-end printed materials, signage or websites.
The font usage for the logo is Univers 53 Extended which I have modified to be unique to this logo. The same font is used unmodified in the tag line. Univers is a neo-grotesque san serif typeface designed in 1957 by Adrian Frutiger.
Areas of modification are circled in red.
The colors used for this logo are black and Pantone 376 C.
PostScript Type 1, TrueType and OpenType font formats are all multi-platform, outline font standards. Multi-platform (or cross-platform) means that the fonts can be used on different types of computer operating systems, Windows and Mac for example. The term “outline” means that the font defines the form of the letter (the character or glyph) through mathematical formulas which define lines and curves. TrueType and PostScript fonts each use different mathematics to describe their outlines while the OpenType format can use both TrueType and PostScript outlines.
PostScript Type 1: The Postscript Type 1 format, created by Adobe, requires two files for each font, namely the screen font (containing the metrics and other information needed to display the font properly on the computer screen) and the printer font (containing the actual PostScript typeface). PostScript is an industry-standard page description language (PDL) used to describe text, graphics and images for printed pages in publishing and graphic design. Consequently, the PostScript font format has traditionally been the preferred font format for use in those industries. Back in the day, when I wanted to send a completed design job to a print shop, I had to include the fonts that were used with the job. If I used Type 1 fonts I had to make sure I included both the screen font and the printer font files. With PostScript being the industry standard in high-end print shops, I invariably used PostScript Type 1 fonts in my designs.
Type 1 fonts are limited to approximately 256 glyphs per font. PostScript font files are also platform specific, meaning that there are different versions of PostScript fonts for use with either the Mac platform or the Windows platform.
Adobe Font Icons
TrueType: TrueType fonts were originally created by Apple but the technology was then licensed to Microsoft. TrueType is a cross-platform format meaning it can be used on both Windows and Mac platforms. TrueType fonts require only one file per font with both the screen font and the printer font components contained in that single file. Like Type 1 fonts, TrueType fonts are limited to 256 glyphs per font.
TrueType Font Icon
OpenType: OpenType is the newest font format and is likely to supersede both Type 1 and TrueType. It was developed jointly by Adobe and Microsoft. It is a cross-platform font format working on both Windows and Mac platforms. Like TrueType, OpenType fonts consist of a single file which contains all the necessary font components (the outline, metric and bitmap data). Unlike Type 1 and TrueType, Opentype fonts can contain up to 65,000 glyphs. An excellent description of the OpenType font format can be found at Adobe’s web site.
OpenType Font Icon
OpenType fonts come in two varieties, namely CFF and TTF. OpenType fonts of the CFF type are designated by the file extension .otf and are PostScript Type 1 fonts. OpenType fonts of the TTF variety are designated by the file extension .ttf and are TrueType fonts. TTF (.ttf) Opentype fonts are a better choice if you are working on a Windows platform or are doing work that is only going to be viewed on a computer screen. This is because TrueType fonts have better “hinting”. Hinting involves embedded instructions which control how an outline font is rasterized and determines how clearly and legibly the font displays, especially at low resolutions. CFF (.otf) OpenType fonts are the best choice if you are working on a Mac platform or are doing print work.
Free Vs. Commercial Fonts: There are several reasons to only use fonts purchased from reputable font foundries as opposed to free fonts. Some TrueType and Opentype fonts can contain restrictions which do not allow them to be embedded in a PDF file. These fonts are not licensed for commercial use. Such restricted font files should not be used in print production. Also, free fonts often lack the quality and craftsmanship found in commercial fonts and they tend to be very limited in their character sets. There are also ethical considerations, since some free fonts may actually be commercial fonts which someone purchased then posted on the web.
Finally: According to Printing.org, “You can use TrueType, OpenType and Type 1 fonts interchangeably in your page layout. Each typeface will produce equal results and print properly on all up-to-date RIPs. (http://www.printing.org/page/2775)
Oil on Strathmore Illustration Board Click for a larger view
33 Immediately what had been said about Nebuchadnezzar was fulfilled. He was driven away from people and ate grass like the ox. His body was drenched with the dew of heaven until his hair grew like the feathers of an eagle and his nails like the claws of a bird. (Daniel 4:31-33 NIV)
34 At the end of that time, I, Nebuchadnezzar, raised my eyes toward heaven, and my sanity was restored. Then I praised the Most High; I honored and glorified him who lives forever. (Daniel 4:34 NIV)
This painting focuses on a moment from one of my favorite passages in the Old Testament. Daniel Chapter 4 is a very short chapter (only 36 verses long) and can be easily read in about 2 minutes. This chapter is fascinating in that it is written in the words of Nebuchadnezzar himself, the mighty king of one of the greatest empires in history. . . Babylon.
In the year 605 BC, this pagan king began his invasion of Judah which would end in his victory and the exile of the people of Judah to Babylon. Nebuchadnezzar, no doubt, viewed this conquest (one of many during his reign) as a triumph for himself and his pagan deities. What he did not know, however, is that he was just a tool in the hands of an almighty God and he had just been given temporary custody over the people of this God. As a result, this king’s whole worldview was about to change.
I used a lot of reference material for hair, lighting and expressions of insanity, including some photos I found in a news article about citizens of Iraq suffering from insanity. Iraq is the modern day name for the land that was once called Babylon.
In my original sketch, you can see more detail in my handling of his beard than is visible in the final painting.
The challenge for me was to try to show a man awakening from insanity. I chose to do this through his eyes. One eye is still veiled or lost in an induced stupor. The other is awakened, humbled and repentant. I also used his hands for this purpose. One hand is still tightly clutching a bunch of grass, the food of an animal some of which still clings to his lips, while the other is open and surrendered.
The only hint that we are looking at a once noble man are the few remaining jeweled beads woven into his beard. I don't know if ancient Babylonian men decorated their beards in this way, it's just an idea I had so I went with it.
In Daniel chapter 4, we read the words of a man steeped in pagan thought who is, at the same time, trying to get his brain around a new understanding of a God he previously did not know, but whom he now understands rules everything:
"Now I, Nebuchadnezzar, praise and exalt and glorify the King of heaven, because everything he does is right and all his ways are just. And those who walk in pride he is able to humble." (Daniel 4:37 NIV)
If you want to read the whole chapter, BibleGateway.com is a great resource where you can read the same passage in 26 different translations and 43 different languages.
Here are two graphics I've created for two very different clients to be used in their respective trade show displays. One is for Liberty Pumps and the other is for the Rochester Institute of Technology, Center for Imaging Science. Since these graphics are intended to be viewed within a large trade show setting, they have to be able to compete with neighboring (possibly competitor’s) booths. Company branding is very important as is the need to draw attention through compelling graphics.
This past December, the Rochester Institute of Technology, Center for Imaging Science held their ceremony for 2010 inductees to their Hall of Fame. I was once again commissioned to draw the portraits of scientists whose discoveries have contributed to the advancement of imaging science. I so enjoy working on these portraits and learning about the very interesting work and discoveries of these scientists.
In addition to Mr. Lippman above, here are the other 2010 inductees.
John Logie Baird
Herman Ludwig Ferdinand von Helmholtz
Click any of the images above to see a larger view of these portraits.