Today I'm going to show you how easy it is to create your own “Website Under Construction” illustration using Adobe Illustrator. Hopefully this quick tutorial will inspire you to create something unique of your own which you can then unleash on the web. So grab a cup of coffee and open up Illustrator so that we can get started.
1. Plan Ahead
Since the purpose of doing this type of illustration is to bring some character to your website that is currently under development, you should consider a few key points that may affect the final product.
To do this, you’ll have to answer two relatively easy questions:
Number one: How wide will your main content container be?
This is actually really important, since you’ll want to have your illustration fit within a certain space (viewport), especially if you’re doing just the design and not the coding part.
By doing so, you’ll have a basic idea of the size (Width and Height) of your illustration, which is something that you’ll need to pin down by yourself or with the help of your coding buddy.
Now whether it’s a 960 px wide container, or something bigger (1024 px), you should always take a second and decide what other visual elements you will be using, which takes us to the second question.
The way you center your information is really important, since you will want to have the user focus on a specific part of the page. Whether it’s a bunch of social links or a subscription form, you’ll want the illustration to be the center stage, where everything else happens, since the whole idea is to make something useful and visually appealing at the same time.
In my case, I decided that using a 960 x 480 px size should have me covered, since the composition would theoretically be used on a white background and take up the center spot.
Of course, if you’re doing the illustration for an actual project, you
can always go bigger depending on the way your content will be displayed, but
for now I hope that the 960 px
Width will be a perfect match for most of you reading this.
2. Let Your Brand Show
According to the Online Business
Dictionary, a brand can be defined as a “unique design, sign, symbol,
words, or a combination of these, employed in creating an image that identifies
a product and differentiates it from its competitors.”
In today’s market, it’s really important to set your company apart by creating an image that can be easily recognized using a couple of simple visual triggers.
The whole idea behind the project for this tutorial is to build something appealing that can actually be put to use as soon as you finish creating the final product.
I encourage you to make your design your own by “branding” the illustration, so that in the end you’ll have a unique version of it.
How, you might ask?
Well, here are some starting points.
Use a Unique Color Palette
Color is easily one of the most helpful tools when it comes to building brands, since the right value can easily set you apart from your competitors, as long as you make it interesting.
I’ve gone with a nice yellow for the accents and main focus point, but that doesn’t mean you have to stick to it.
Let the Illustration Talk About Your Product or Business
Once you’ve figured out your color scheme, you can show off your brand or company by taking on a theme that describes its core business. This is where you can get down and creative and reflect on the visual elements that you want to communicate.
For example, if you’re building a website that is going to be dealing with data analysis, you could create something that uses graphic charts and percentage indicators, in order to give your viewers a little taste of what your business is all about.
Or, if you’re dealing with a digital product, let’s say a piece of software, you could create an abstract window with some little functions from within the actual program, which would give them a hint at the nature of your product.
In this particular tutorial, I’ve decided to go with something a little
bit more generic, since I thought you might use my version as a starting
point and build on that.
That being said, let’s stop wasting precious time, and get creative.
3. Create a New Document
Bring up Illustrator, and create a New Document (File > New or Control-N) using the following settings:
- Number of Artboards: 1
- Width: 960 px
- Height: 480 px
- Units: Pixels
And from the Advanced tab:
- Color Mode: RGB
- Raster Effects: Screen (72 ppi)
- Align New Objects to Pixel Grid: checked
Quick tip: As you might have already guessed, we’re going to be creating the illustration using a pixel-perfect workflow, so I strongly recommend you read my tutorial on how to create pixel-perfect artwork, which will help you a lot.
4. Isolate Your Composition Using Layers
Before we start building anything, I strongly recommend you identify and separate the illustration's main sections on their own layer, since it will be easier to target and edit them later on if you need to.
Taking a look at our composition, we're using six layers, giving them easily recognizable names which will help with the process of identifying a specific element from the whole.
- Layer 1: background
- Layer 2: ground line
- Layer 3: dumpster
- Layer 4: macbook
- Layer 5: crane
- Layer 6: pretend image
5. Start Working on the Illustration
Once you’ve layered your document, we can now start working on the actual illustration, and we will do so by creating the ground line and the background.
Step 1
Position yourself on the ground line layer, and using the Rounded Rectangle Tool create three different width shapes with a thickness
of 6 px and a 3 px Corner Radius. Color them using a dark reddish-grey (#3f3838)
and then make sure to position them about 8 px from one another.
Then group them using the Control-G keyboard shortcut, and center them to the Artboard using the Align Panel’s Horizontal Align Center option, making sure to leave a gap of 46 px between them and the Artboard’s bottom side.
Step 2
Position yourself on the background layer, and using the Ellipse Tool (L), create a 536 x 536 px shape which we will color
using #efefef and then partially mask in order to hide the bottom section that
goes underneath the ground line.
Then, add another smaller 46 x 46 px circle towards the top right corner, and color it using
the same value (#efefef).
Quick tip: if you want to use a different color for the background you can easily do this, but when you end up exporting the file, try and remove it, since a transparent PNG file could be a better fit, especially when your content width is larger than the illustration itself.
Step 3
Start working on the MacBook by creating a 426 x 24 px base with a round bottom, which
we will color using #e2e2e2 and then give a 6 px outline (#aaaaaa) using the Offset Path tool.
Quick tip: You can learn how to create outlines by taking a look at my in-depth comparison between Offset Paths and Strokes used as methods for creating line icons.
Step 4
Once you have the main shapes for the base (1), start adding some
details to it, such as the lighter top section (Width: 426 px; Height: 16px;
Color: #e2e2e2) (3), the 426 x 6 px thick divider line (#3f3838)
(2), the subtle highlights (Color: white;
Blending Mode: Overlay; Opacity: 80%) (4), and the touchpad
area (5) in order to make it look like an actual laptop and not a dinner plate.
Step 5
Start working on the MacBook’s top section by creating the lid and the actual display.
First create a 364 x 220 px rectangle
with an 18 px Corner Radius applied
to the top left and right corners. Color the shape using #756c6c and then give
it a 6 px outline (#3f3838) (2).
Then, create another 184 x 328 px rectangle,
color it using your brand color (which in our case is #edd87e), give it the
same 6 px outline (#3f3838) and then
position the two towards the center of the lid, leaving a gap of just 6 px between them and the MacBook’s
base (3).
Add a couple of highlights and a shadow to give the piece a little more polish (4).
Step 6
Once you’ve created the MacBook, you can start working on the theme of your website, so take your time, get creative and figure out exactly what it is that you want to show your viewers.
In our case, it’s a simple website layout, with a top navigation menu, an image placeholder, a call to action button, and a couple of funny elements such as the ladder and the white unpainted area.
When you’re done, don’t forget to group all the MacBook’s elements together using the Control-G keyboard shortcut, and then lock its layer, so that we can move on to the next section of the illustration.
Step 7
Start working on the crane, and see if you can add the brand color or colors to some of its composing pieces, in order to create some accent colors to help you carry out the theme.
In our case, we’ve used our sunny yellow (#edd87e)
for the crane operating cabin and the small side elevator.
Step 8
Continue working on your theme by adding elements which would be relevant to your website, or simply fill in the empty space so that the illustration won’t end up looking unbalanced.
I decided to keep things simple by adding a little dumpster towards the right side of the MacBook, which could be a metaphor for the things that were recycled during the construction of the site.
Step 9
Finish off the illustration by adding the last piece of the puzzle, which in our case is the little “pretend image” that is held by the crane’s arm.
It's a Wrap
So there you have it—a nice, straightforward guide to building an interesting "Website Under Construction" Illustration, which can help your personal or company brand stand out from the rest.
Thank you for your time and attention, and be sure to show us what you've come up with after reading this piece.
P.S.
Since I know this is a quick tutorial, and I didn’t have time to walk you through the entire creative process behind the illustration, I'm going to give you the editable source file, so that you can tinker with it however your heart desires. See the download link in the right sidebar.
