Convert Photographs to Illustrations Tutorial

Creating the Minneapolis Web Design Building

mwd-home-2010Bringing our office at the Day Block building to life on the web was all too appropriate. After all, we do live here!

Back in 2010 our web designers focused on digitizing every little detail—from the home team jerseys hanging on the balcony, to our feathered friends. But we didn’t just recreate what we see everyday. We wanted to bring what we do inside to the outside, so we showcased some of our finest local work on the walls.

Here’s how we did it…

Bringing the Building into Photoshop

1. Getting the Right Shot
– Since we were recreating the Minneapolis Web Design building, we figured the best place to start was from the source. We took shots of the building from different angles and decided the best route to go would be a direct shot of the back of the building. Since it represented the most interesting side, we chose the back of the building as the starting point for our main “Portfolio” page of the site.

2. Cutting Out the Building, Brick-by-Brick
– After we got our photo, it was time to upload it into Photoshop and start cutting it up. Since we decided the web version of the building was going to be a hybrid, consisting of real and illustrated images, we took the most interesting parts of the photo and saved them as individual .psd files.

To cut out our individual elements we used the “Polygonal Lasso Tool” (L), gave it a feather of 6 – 8 and simply selected certain sections of the building to cut out. When a section was highlighted with the tool, we would copy (⌘+C) the image and create a new, transparent document (⌘+N) in Photoshop. (The document will already be the actual size of the copied selection so there is no need to resize the file.) We then pasted the image in the new document (⌘+V) and saved it as its own Photoshop file. (ex. roof-grunge-right.psd)
After doing that 40 or so more times we were done with Photoshop.

Building the Building in Illustrator

1. Starting from Scratch – Now that we had a good idea of our building layout, we were ready to get started in Illustrator with the vector art. We set our new .AI document up at 960px wide and 2000px tall so that we had plenty of room to work with. The easiest way to match our building’s layout and color was to trace over the building itself. The next step was to bring in that same photo we used in Photoshop. Choosing “File” and then “Place”, we imported that file into our document. Time to start using the “Eyedropper” (I)…
2. Creating Swatches & Patterns – With the “Eyedropper” (I) selected, we started going through the different sections of the photo and grabbing the most commonly used colors. To do this, click the color with the dropper, grab the fill color and drag it to the swatches pallet. (As a side note — if your swatches pallet has several colors already populated, click the dropdown arrow in the pallet and choose “Select All Unused” which will highlight all the colors that are not currently being used in the document. You can then remove them by clicking the trashcan icon underneath. This will keep the swatch pallet tidy and the file size down.) After selecting all the main colors for the building bricks, windows and trim we are ready to make some brick.

To create the brick we made a <"Pattern Swatch">, which consists of a very small image that will repeat no matter how wide or tall and will never scale. After creating the brick swatch we started creating symbols.

3. Symbols – Since the building’s windows, decks and doors are all the same style we were able to save space in our document by making them symbols. We recreated a window with the “Pen” (P) tool. We traced around the window frame and ledge below and then used the appropriate matching swatch colors we had picked out earlier. To make the symbol, we just select all the window layers (minus the photo layer) and drag them into the “Symbols Pallet”.
4. Using the Pen Tool – At this point, all our swatches, patterns and symbols had been created and we were quickly able to move forward with assembly. With that photo sized to the 960px document we use the “Pen” (P) tool to trace around the outside of the building. The only part that matters at this point is the upper roof portion of the building. Everything underneath that unique roof area was setup as a repeating background for our website to save on load times. With the top area traced we dropped our brick pattern inside and continued creating layers on top for the gutters, post and little extras.
5. Bringing in the Photoshop Files – The building has been created as vector art and is ready for our Photoshop files. So we placed all those files on a new layer and matched them up to our new vector art.

Preparing for the Web

1. Divs? Absolutely – The “Portfolio” page is unique in the fact that it is built much like an Illustrator or Photoshop file with several layers. Since this page would be set at a fixed height, all the elements contained inside would be positioned absolutely in unique divs. Pretty much everything on the “Portfolio” page is in a different layer. The logo, navigation, windows, decks, billboard, “Easter eggs” and clouds are all examples of absolutely positioned elements, which are contained inside a relatively positioned containing div with a width of 960px and {margin: auto} to the left and right sides.

2. Adding the “Easter Eggs” – Throughout the “Portfolio” page there are client links in the form of graffiti, signs, clothing, etc. These images were all created with Photoshop and Illustrator and then sliced individually. They were then saved as transparent .png files and were placed on the building in divs with unique ids. Most of them were setup as basic tags .

Closing Comments

So there you have it! In this tutorial you learned how we recreated our building in Illustrator. You can use this method to transform any other inanimate object into an illustration. Now go show us up, and build your own!

We hope you had as much fun testing out this tutorial as we did making it! Check back often as we update with more instructional tips showing off our fancy design skills.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>