QR Codes are a quick way to get information with a camera. (Think modern evolution of a UPC Bar Code). Smart phones will scan them for you to quickly get information into your phone, such as a URL to browse, a business card, etc.
I was inspired by the BBC QR Code that intentionally distorts the image to insert the letters "BBC" in the middle. QR Codes have redundant information to offer error correction, and I am amused at the different ways you can abuse this.
First, this is what a QR Code for "http://beautifulpixels.blogspot.com/" looks like unmodified:
First, this is what a QR Code for "http://beautifulpixels.blogspot.com/" looks like unmodified:
"Pure" QR Code:
Now, the experiments:
Simple pixelated distortion in the center (similar to BBC code):
Any image could have just been overlaid, just like plopping a sticker in the middle, but doing it in the pixel grid feels nice.
The idea I like most is using a collage of images that form the QR Code. Where the collage gets the pattern right, there's no need for error correction. But there's slack for the collage to be off a bit. It's very tedious to do, so I only have this partial version, but I'm certain with patience a fully collaged version could be made:
Collage:
The collage might be automated too. Do an image search and then paste in images "fit" to the QR Code target.
There are several ways to play with color, as the scanners will just care about the luminance.
Pixel grid colorization:
Gradient:
There are several ways to play with the QR Code as conceptually just "dots".
Dots:
Dots merging:
Dots as images:
And on we go, a few more ideas:
Rounded corners:
Perspective:
I wasn't able to change the perspective to something as extreme as I thought, this was about as far as I could get it.
I also didn't have the patience to create several "natural media" QR Codes. But I thought sand art, pebbles, leaves, etc, done with real world materials would be great. Here's a synthetic Go board (the gaps maintain a valid game state, ;):
Go Board:
And I should show failures too. I had high hopes for a pen sketch, but it doesn't scan. :( I'm convinced it could work, though I think a more even contrast would need to be used.
Ink Sketch:
Except for the last, all of these scanned correctly for me using the ZXing Barcode Scanner 3.3 on my Android phone. Collage clip art included elements from flicker users greekadman, bombardier.
[Edit:] A Link from the comments that shows a good 'natural media' example:
Hello,
ReplyDeletenice experiments, here's one I made too with QR Code, although the result is not a QR Code meaning anything.
http://www.xgouchet.fr/blog/public/processing/qrlife.html
I like your work and i speak here : http://bit.ly/dCvfEk
ReplyDeleteCool! See also -
ReplyDeletehttp://www.youtube.com/watch?v=M5lAT3gVzFc
Some nice effects ;)
ReplyDelete-pd
Hello
ReplyDeleteLooks very interesting . I'm wondering what king of software did you use.
I used http://zxing.appspot.com/generator/ to create the initial code, and Photoshop to modify the images. The Go board was made with CGoban http://www.gokgs.com/download.jsp
ReplyDeleteCool designs. A lot of marketing firms get nervous about how well designer QR codes will work to access mobile landing pages. There's always a risk, so testing and playing with error correction levels is advisable. One company with lots of experience in both areas -- creating designer codes AND testing, mobile site design, etc. -- is Warbasse Design (http://www.warbassedesign.com)
ReplyDeleteI could read the "Ink Sketch" very easily with EZQR app (from Korean developper)
ReplyDeleteI was able to read the ink sketch also, but it was a one time deal. I kept rotating my EVO until i found it's sweet spot... which I have yet to be able to duplicate.
ReplyDeleteSuggestion, as you try different styles, use different shortened urls so you can track those that manage to get it. :) Kinda helps you see success by someone else. :)
Awesome fun though. I need to try more as well.
Can you suggest a software or a script to insert logo or other pictures automatically in a QR code?
ReplyDeleteThanks and congratulations, your design is very very cool!
Using Beetagg, I found the pixelgrid colorization, the perspective one, the go board and the Hi res image didn't work, all others worked fine. I guess it may depend upon the scanner/software being used.
ReplyDeleteWhile it may be nice to play with designs, to be effective it may be better to stick to plain vanilla!
Looked interesting, and the simple logo added certainly works reliably it seems, but trying the rest with a variety of devices and software, it seems only the Gradient, Dots, Dots merging and Rounded corners examples worked reliably across all platforms and software.
ReplyDeletePity, as I was looking forward to seeing lots of really elaborate QR codes on packaging soon.
You've inspired me to try my own hand-drawn QR code, and IT SCANS!
ReplyDeleteYou've also inspired a bout of insomnia like I haven't seen since college. Oh well. Did I mention IT SCANS!!!???
http://paparouxindy.com/QR-sketch.png
I'm trying to create my own using the pixel distortion technique in the first example above but seems i may be editing too much.
ReplyDeleteHow do you figure out the limit of what you can and can't change in the code?
Trial and error. ;) But, also check out the wikipedia link http://en.wikipedia.org/wiki/QR_Code and make sure you aren't modifying the position, alignment, timing, or version codes...
ReplyDeleteI like the "rounded corners" version. Did you do that manually, or is there a Photoshop filter that can create this result? Thanks!
ReplyDeleteRounded corners: take image, add Gaussian blur, then use Image threashold (or just boost contrast a lot, or use curves to do so)
ReplyDeleteThanks. I should have thought about that myself.
ReplyDeleteLooks very nice. I wanted to print one on my business card, pointing to an online VCF file, but then realised that Android does not know how to handle VCF files. Lame.
Looks like people often use MeCard when encoding in a QR code http://zxing.appspot.com/generator/ http://en.wikipedia.org/wiki/SPARQCode
ReplyDeleteThanks that works well!
ReplyDeleteI just dove into QR code manipulation and found your page helpful. I made an interactive sketch using Processing to do some manipulation. Thanks!
ReplyDeletehttp://www.markroland.com/project/qr-code
Thanks for sharing your QR code experiments! This opened up my mind to new design possibilities. :)
ReplyDeletethe last one did scan for me.
ReplyDeleteHow do you make a dotted qr code...,
ReplyDeletei'm interested in making stencils for qr graphiti, and it seems to be the easiest way, to make it happen.
Here you can find a QR Code flash game: QR Pacman.
ReplyDeletehttp://www.qreativeshirt.com/qr-pacman.html
As you can see this time the QR Code is already
dynamic and interactvie.
Really unique QR Code!
Hi,
ReplyDeleteI'd also like to know how you did the dot-style qr codes. If you have the time (or anyone else reading this blog), please give some further instructions.
Thanks for your time!
How to makes dots:
ReplyDelete- Create QR Code
- resize image so that one square is e.g. 20x20 pixels.
- Make a dot that is 20x20 pixels, define it as a pattern
- Fill a layer with the dot pattern.
- Composite the QR code and dot pattern layers with a blend mode such as Screen that causes everything to be white except where both layers are black.
Thanks a lot Vincent! That was a REALLY fast reply!
ReplyDeleteHi Vincent
ReplyDeleteGreat codes great ideas thanks for everything i have a question what will be the default size of the code in Photoshop that the each square will 20x20.
And also can we use any other shape as we use the dot?
I'll wait for your fast response.
Thanks
Create the code using e.g. http://zxing.appspot.com/generator/ and it will likely create an image where each QR code square is larger than just 1 pixel. You'll have to magnify the image, take a look, and figure out how big they are.
ReplyDeleteYou could then resize the image down such that there's one pixels to one QR code square.
Then resize again up to whatever size you want to have the squares be. E.g. multiply size by 2 and add a zero to have them be 20x20.
Of course you can use any other shape than a dot, experiment and see what works.
thanks a lot for your response.
ReplyDeletei am now going to try some thing new i'll cut all the squares with different shapes with pen and then color them after that i'll marge all the layers and blending mode to screen will it work?
Also where from i can get the qr code reader?
Thanks
it is not working can you tell me how can i change the shape of the blocks not dots i want to change it's corners round or sharp and how can i put the logo on the code some time it works and some time not it's really very interesting but i want to test different things can you send me any psd file of any qr code i want to see what method you use for it?
ReplyDeletePLZZZZZZZZZZZZZZZZZZZZZZ
here is my email address. khan_t112@yahoo.com
We made this :)
ReplyDeletehttp://youtu.be/56ghseE8Vf4
Do it online :)
ReplyDeletewww.unitaglive.com/qrcode
qrcode.kaywa.com
www.the-qrcode-generator.com
goqr.me
keremerkan.net/qr-code-and-2d-code-generator/
www.qrstuff.com
www.patrick-wied.at/static/qrgen/
www.qrhacker.com
http://radiolg.blogspot.co.uk/2012/01/el-smartphone-para-situacion-de-calle.html
ReplyDeleteDid you do it? Or someone took your QR code for it?
By the way.. the Go QR Code is simply amazing!
nice, i made photoshop actions to customize codes, you can download them here: http://bit.ly/QRactions
ReplyDeletethanks
ReplyDelete