Illustration is a lovely trend in web design. It fits the medium well. Great Illustrators though, often don’t think in terms of the web when they do their illustrations. Take a look at this very nice sky/hill cityscape illustration I found on shutterstock:
I think this illustration would make a great base for a web design, but clearly it isn’t prepared for such a task out-of-the-box. Lets do some manipulation and prepare it the web.
Get it into Photoshop
It is fantastic that the illustration is vector. That means we can make it any size we need to without any loss of quality. Our goal will be to make this scene sit in the top center of of the browser, so let’s get it into Photoshop at the maximum with of the main content area of our website. Say, 960px. Make a new Photoshop document 960px wide and taller than it needs to be to fit.
Open your illustration in Adobe Illustrator and Select All. Copy and Paste into your Photoshop document. Make sure to paste it as a Smart Object. This will let it retain it’s vector nature, allowing you upscale it without losing quality. It may come over as too small. No worry there, just scale it up to fit into your 960px wide document.
Extending the Edges
Browser windows are not fixed width environments like Photoshop documents are. We need to prepare our illustration to look nice when the browser window is wider than our base 960px. Let’s go ahead and increase the canvas width of our document to 1280px so that we have some room to work with.
Our goal here is to have the the edge of this illustration end in something that will be horizontally repeatable. The person slicing up this document will need something like this to make this design work for the web. Ultimately this slice will be the background for the <body> element of the webpage, with our main illustration sitting on top.
I’ll take a small sliver of the right edge of this illustration and “float” it up onto it’s own new layer (Command-J).
Now we can Free Transform this new little slice (Command-T) and expand it horizontally off both sides of the document. Because the gradients were created nice and vertical, this extension works nicely off the right side. The right side though, looks much too abrupt, with the hill, bush and road being cut off suddenly.
Obscuring the Transition
Rather than do anything too fancy and try to merge these two layers together, let’s obscure that harsh transition by placing a foreground object directly over top. This illustration could do with a bit of extra depth anyway.
This vector mailbox will do nicely.
Delete everything except the mailbox itself and paste it into the illustration as a Smart Object just like we placed the original illustration. A little resizing and placement and we have the perfect element for obscuring the transition in backgrounds.
The Main Content Area
Our illustration is going to make for a lovely header and background, but for the actual content of the website, we’ll need some kind of large block of white. Lets drop a white rounded rectangle right on top with a bit of a drop shadow to set it off.
Filling Out the Bottom
With the horizontal edge now nicely obscured, we can fill out the color on the rest of the bottom of the website mockup. Sample a color (with the Eyedropper tool) from the way bottom most pixel of the illustration and then fill our bottom-most empty layer with this new color.
This main content area is now going to be a breeze for any decent web designer to slice up.
Final Touches
Throw a nice little welcome message up in the sky and we have ourselves a nice looking illustrated web mockup. Because we have thoughtfully taken care of both horizontal expandability and vertical expandability, this illustration is now perfect for conversion into real web markup.
Stay tuned on CSS-Tricks where I will be converting this into a real webpage in the next few weeks.
Why use Photoshop for this task at all?
[...] ยป Preparing an Illustration for the Web [...]
Why not use photoshop? Photoshop is a good tool for images for web, not for vectors like this image but good one for layouts(tutorial idea).
[...] Creare un semplice illustrazione vettoriale per il web Vediamo un semplice tutorial di come creare un illustrazione per il web da usare per cartoline o per la stampa [...]
Thanks for the tip! Photoshop is magic!