Content-Aware Responsive Web Banner Tutorial

Posted by on Apr 1, 2013 in Graphics, Tutorials, Web |

Responsive Web Banner Tutorial

 

I was asked to make a tutorial for a potential use for photography. Since I love code and I’d recently learned about responsive web design, I wanted to learn (and, ultimately, teach) how to make a web banner that can adapt to the screen resolution. Beyond simply scaling down, the “content” of this banner (the plant cutout) scales at a different rate from the background.  It’s easier to understand if you see it in action. Try grabbing the edge of the browser window and dragging it in and out to see the banner change!

I created the tutorial itself in InDesign.  The sprout and the background are images of mine.