Final Image Preview

You can find the source files in the below link labeled "Simulated_3d" . You may wish to look through them briefly before we begin. A preview of the final image is below. You can view the large version here as well.

Download file : http://1malaysia-innovation.com/download/Simulated_3d.rar

Step 1

Using the Ellipse Tool (L) create a perfect circle. Then apply a vibrant 4 color gradient (G) from light to dark using complimentary colors. Command + F9 will bring the Gradient Window onto your screen. Make sure you have Show Options selected. You can add multiple points to your gradient by clicking along the bar in the Gradient window. Adding more points and changing their brightness and hue slightly is a way to spice up the color of your illustration.

Step 2

Select your first circle and while holding Alt drag your mouse down to create another copy of your circle. Then, scale (S) it up a 100+% (Hold shift to keep proportions).

Step 3

Double-click the Blend Tool (W). Change the Spacing to Specified Distance and the Distance to 0.01 inches. Keep the Orientation on Align to Page. Now that you have your settings for your Blend Tool hit OK. I hope you have at least 2 gigs of ram, a decent CPU, and good graphics card because this can get hairy. Illustrator can crash suddenly when performing graphical combat maneuvers such as these. Save often from here on in. Side note: before every use of Live Color also I recommend saving. This is another Illustrator tool that crashes the program often.

Step 4

Now, with your Blend Tool on, click on your small circle then your larger circle. This will create your three dimensional perspective shape! You can change the lighting of your circles by clicking on each circle separately and applying the radial gradient at different angle depending on your scene’s light source.

Step 5

As you can see, applying the Blend Tool to two shapes will create a path between them. You can manipulate this path by adding points to it! Select the path using the Direct Selection Tool (A). Next, use the Pen Tool (P) and then press + to access the Add Anchor Point Tool. Once you have done that, click on the center of your path. It should look like the picture below – a solid vertices point.

Step 6

Use the Convert Anchor Point Tool (Shift + C), left-click and hold, then drag your mouse and this will create arms on your vertices. Pull it into a fluid shape and let go of your mouse button. You should get something like the image below. You can manipulate your points/vertices at any time. Play around with it.

Step 7

By moving, resizing, your two circle endpoints individually and adjusting the Anchor Point arms with the Convert Anchor Point Tool you can really add some life to your tentacle. Try moving your circle endpoints around. In order to select each circle individually you need to use the Direct Selection Tool (A).

Step 8

Repeat this technique until you have enough arms to make an octopus. Keep each arm in perspective. The side arms will not reach as close to the foreground as the front arms. Above is the breakdown of the different arms I have made and the end paths for each arm. You need to put the background arms behind the foreground arm layers. To do this you must select the whole arm using the Selection Tool (S), then press Command + Left Bracket Key or Right Bracket Key to move the layer in front of or behind other layers. This is called layer stacking (at least that is what I call it…).

Step 9

After you have your tentacles in order you will need to put together some suction cups. Click and Hold your left mouse button on the Rectangle Tool to bring up your additional options. Select the Rounded Rectangle Tool and make a rectangle. If you want to increase or decrease the roundness of the edges, hit the up arrow or the down arrow while you are placing your rectangle on the artboard.

For color, use the same 4 point gradient as the tentacles; only increase the lightness of each point until you get a nice hot pink. Drag your gradient (G) from point a to point b.

Step 10

Now, use the Warp Tool (Shift + R) and drag from point a to point b. Make sure your brush size is big enough to envelope most of your rectangle. To change the size of your Warp Tool Brush hold Alt + Shift and drag your mouse as you would if you were going to scale an object larger or smaller. This took me a bit to figure out and thus it is a valuable piece of information! You should get something like the second image.

Step 11

Next, let’s make a suction cup from the top-down angle, as if we were looking into the cup from above. Create a circle with the Ellipse Tool (L), then copy that circle (Command + C), and paste the copy on top of the first circle (Command + F).

Select the newly created circle and scale it down by half using Scale (Command + S). After you have done this, select both circles and use the Pathfinder (Command + Shift + F9) option Subtract from shape area.

Next, reapply your gradient to show the roundness of your suction cup. Use your Gradient Tool (G) and apply your pink gradient from point a to point b.

Step 12

Now that you have your two different suction cups completed, apply them to the tentacles by copying them to the appropriate places. I have labeled the side view "Cup 1" and the above view "Cup 2." You will need to use Rotate (R), Scale (S), and even the Warp Tool (Shift + R) many times during this step. You will have to make sure that the suction cups that are behind a tentacle are below the foreground tentacle layer (Refer to Step 8).

Tentacle 3 and 6 are unique if you haven’t guessed already. At the tips of 3 and 6, the purple tentacle overlaps the pink suction cups slightly. To recreate this you must Direct Select (A) the end circle of a tentacle, copy (Command + C) and paste another circle above it (Command + F). This will be separate from the tentacle group and allow you to move that layer to the top thus overlapping the suction cups. This will also prove handy later on! Finally, after much tweaking I ended up with some pretty fierce tentacles for my octopus! Rarr!

Step 13

Now you’ve got to build a head worthy of "Mordor." To do this, I used the Polygon Tool located by clicking and holding the Rectangle Tool (M). Drag it out onto your artboard and make it a pentagon (5 corner shape). You can do this by pressing the up or down arrows while you are placing the shape on your artboard (See Step 9).

After you have a nice pentagon, apply your purple radial gradient that you used on your tentacles using the Eyedropper Tool (I). Click on a circle from the tentacle while you have your pentagon selected.

Step 14

Next, click Effect > Stylize > Round Corners and round off those hard edges. I have my settings set to 2.125 inch, but it will depend on what size your pentagon is. The goal is to make it like a ball.

Step 15

Give the head some character by rotating the shape and moving each point around slightly. I like it if the top of the dome is higher than normal. Use the Direct Selection Tool (A) to select individual points then move them around. You could probably have done this much quicker using a circle… However, this is what I did and I found it gave me interesting and satisfying results.

Step 16

Using the Pen Tool (P), draw the head under the dome. This is where his eyes will sit. Remember to keep the gradient in the same direction as the light source of your scene, which in this case is the left.

Step 17

To create the eyeballs, make another circle (L) and apply a bright 5 color gradient (G) to it, like the top image above. Make the starting point on your gradient close to white and it will give his eye a nice shiny spot. Now, grab your Direct Selection Tool (A) and select the right vertices of the circle. Select the vertices arm labeled a. Now drag it to the shiny spot of your gradient. Next select arm b. hold Alt + Shift and drag it straight down. This will give you a sharp edge instead of a rounded one. Keep altering your vertices points until you get the perfect finished eyeball. Mean isn’t it?

Step 18

Place the eyeball on the left side of the octopus head. Then copy that eyeball, right-click on it, then select Transform > Reflect and set your Reflect options to Vertical at 90 degrees. Also, you will need to apply your gradient to mimic the glare angle of the left eyeball.

Step 19

Next, I drew an angry eyelid with my Pen Tool and used the Mesh Tool (U) and clicked on each point of the eyelid. You can move the mesh points around the same way you move vertices points (See Step 6 & 17). By selecting a point you can change it's individual color, this will create a gradient between multiple colors. Make the high points of the eyelid light purple and the lower overhang points dark purple.

Step 20

Now put your eyelid over the eyeball. Copy and paste another eyelid over the other eye. Next, Transform > Reflect the eyelid like we did with the eyeball in Step 18. You will also have to rotate and scale it to get it just right.

Step 21

Group the entire head together by dragging the Selection Tool (V) over the head, the face, the eyes, and eyelids then Group them all by hitting Command + G. Now place the grouped head where all the tentacles meet.

Step 22

This is an optional step. So far, I think this octopus looks pretty rad. However, if you want, you can make him wield some killer weapons or even try multiple toilet paper rolls. For me, my weapon of choice is the Wacom Stylus Pen. I quickly threw this one together. I'm going to assume you can think of something equally great for your octopus to hold and also create it just as easily without any helpful steps from me…

Step 23

Now we're going to place the object gently over the hand of the octopus. It looks stupid placed on top of the tentacle so we need to make it look as if our octopus is grasping the object. To do this, Direct Select (A) the endpoint circle of any given tentacle.

Next, hold Alt and then drag the circle to copy it. Then you must press Shift + Command + Right Bracket Key to bring that circle to the front layer. Now place that circle back on top of where you copied it from. Make sure you Scale (S) this circle up in order to cover and overhang from the original circle. It will look stupid if you don't. Repeat this step for ever tentacle that is grasping on object.

Step 24

Finally, you've got yourself a really cool, three dimension, stylish, killer octopus! But beware! The following steps are more fearsome than any so far, partially because I will not provide any screenshots for the next 3 Steps! Also, the steps take a lot of processing power…

Step 25

I wanted to give this octopus some depth of field, but I knew that doing this in Illustrator would blow up my computer. If I applied a blur to one of these monster blended tentacles, it would take up so much CPU and memory that it would crash Illustrator. The solution? Photoshop!

To get your vectors into Photoshop is relatively simple. First, you will have to group each tentacle. Use the Selection Tool (V) and hold shift then select every piece of an entire tentacle. This includes each suction cup, the pen, the blend mode tentacle, and the copied circle that is grasping the pen. Once you have them all selected, group them together (Command + G). Do this to each tentacle separately and also to the head so they are all in their own groups.

Step 26

Now open Photoshop and create a new document (Command + N). I wanted to make my octopus into a cool desktop background so I set the doc to 1680 pixels by 1050 pixels at 300 resolution. Once you've got your new document opened in Photoshop, switch back over to Illustrator. Once in Illustrator, select a tentacle group and then drag and drop it into your new document in Photoshop. This takes a lot of CPU and RAM so be prepared to wait a while. Repeat this until you have your whole illustration in Photoshop. Each time you drop a group into Photoshop it will create a new Vector Smart Object Layer.

Step 27

Make sure you place each layer appropriately above or below the other layers so that the foreground tentacles are on the top layers and the head is the bottom layer. You can drag the layers around by Click and hold while dragging the mouse above or below each other in the Layers window.

Step 28

I want to make the focal point the head of the octopus and also his left arm which he is raising in violent defiance. I have highlighted them in the top picture featured below. To do this, select the largest tentacle layer and click Filter > Blur > Gaussian Blur and give it a good 6 or so.

Step 29

As shown below, we'll follow three sub-steps here:

1. Click on the Smart Filter that has the Gaussian Blur applied to it.
2. Press B to select your Paint Brush Tool, then change the brush to a large feathered brush and make your foreground color black.
3. Paint from point a along the tentacle until you reach point b. This will give you a cool depth of field effect. Repeat this step on the other large tentacle and you will cause the viewer's eyes to be drawn to the head first every time. You can also apply this same step to the tentacles that are in the middle except only use a brush opacity of 50% and it will look more in focus but still blurred.

Step 30

To finish my Illustration off I created some shadowing against the white background. To do this create a new layer and pull it to the bottom of the layer stack, just above the white background layer. Turn that new layer's opacity to 50% and use the black feathered paintbrush to paint in the areas where the tentacles would cast a shadow.

I painted a primary shadow and a secondary shadow, both are separate layers set to 50% opacity. I also added some shading to various tentacles as they needed. The top screenshot shows the primary shading layer applied and the bottom screenshot features: 1. Primary Shading layer; 2. Secondary, more detailed, shading layer; 3. additional shading to the appropriate tentacles. It's not perfect, but I like it!

Step 31

For your final step, select all the layers (Click on the top layer, hold Shift, then click on the bottom layer) except your background layer and Group (Command + G) them into a folder. Click on your folder layer and then use the Move Tool (V) to move your final render into an interesting position on your artboard to make for a eye-catching desktop wallpaper.

Conclusion

So you see, Illustrator's power is comparable to that of the 1950s Soviet Union. It competes against even the most versatile 3D rendering programs out there. I hope you have all enjoyed this tutorial, even though the last thing the design world needs now is another octopus. I look forward to seeing these techniques put to use in the Vectortuts+ Flickr pool. The final image is below. You can view the large versions here and here.

Final Image Preview

You can find the Source files in the download link labeled 'Isometric Map' . You may wish to look through them briefly before we begin. A preview of the final image is below.

Download File : http://1malaysia-innovation.com/download/Isometric Map.rar

A Little Disclaimer

As a basis for my map I turned to Google Earth and happily made as many screenshots as I liked. I traced them, referred to them for place names, street names, service information etc. and this is no problem whatsoever. I was even able to use photography from contributors far and wide who publish their shots on Google Earth via Panoramio. However, in order for me to use these images for web-based tutorials I needed to comply with certain guidelines.

In accordance with their fair use policy, screenshots of Google Earth can be used as long as I clearly display their logo and the appropriate copyright statement. For photography I would have needed express permission from the individual photographers, for this reason, building photography I have used in this tut is my own, but be aware that Google Earth and Panoramio prove excellent image resources for projects such as this.

Step 1: Location, Location, Location

Owing to the fact that I'll be using a lot of my own imagery I've chosen somewhere in Brielle (a town near Rotterdam in South Holland) as a subject. Of course, your subject will be of your own choosing, or better still that of a client brief. Wherever it may be, you'll need as much visual reference as possible.

Step 2: Determine Your Composition

It may be that you've been asked to include certain features, certain view points or have been given precisely the area you need to focus on. Whilst deciding what your map will contain and from which angle it will be viewed try again to consider the usability.

Most people feel naturally comfortable viewing a map with North pointing upwards (I'm not even going to begin on the subject of how men and women read maps differently!) so this would usually be a good starting point. However if this angle looks like it will present design problems such as vital roads being obscured, unfamiliar views of significant buildings etc., try turning the view just off North. Your map will include a compass, so bearings shouldn't be too problematic.

Below is the segment of Brielle which I've chosen to illustrate. North is currently upwards.

Step 3: Prepare Your Map Image

You've taken a screenshot or you have your aerial photo of the subject, now place it in Illustrator (File > Place…) on a suitably sized artboard (this illustration could get quite finely detailed, so work large). Click on the layer in the Layers panel, give it a name, lock it and determine that all images on that layer should be dimmed to 50% (or however dim you choose).

Step 4: Lay Down Some Tarmac

It actually doesn't matter where you start drawing your map. There are certain base elements which you'll need to concentrate on, all of which will be distributed to individual layers for improved workflow. I'm going to begin with the streets, then i'll look at borders, water, buildings etc afterwards.

Use your Pen Tool and build simple paths along the street centerlines. Give them appropriate stroke weights as shown below. Again, to make your map informative and clear, use a limited number of stroke weights. Try to establish a standard whereby main roads have a thickness of (for example) 18pt, minor roads have a weight of 12pt, back streets a weight of 8pt and so on. I've given my streets a pale shade of #F7F4E8.

Step 5: Curves

Somewhere else I'd recommend you keep uniformity; the curves. By all means draw curves on your streets by hand, but by giving all street corners the same curvature you'll make your illustration easier on the eye. For example, in my drawing there's a Church which has a small road going right around it.

I began by drawing a simple polygon with straight paths and then I went to Effects > Stylize > Round Corners. In the Round corners dialog I entered a value of 4mm, checking the effect by having Preview selected.

This curvature was appropriate for most of my street corners so I could then apply it to other paths by selecting them and going to Effects > Apply Round Corners. Rounded corners of the same value were then applied to whatever I had selected.

Step 6: Land

Once you're satisfied with the streets you've drawn, the density of them, their thickness, curvature and color – make their layer invisible and create a third layer. Call it "Land" or something of that nature, and begin tracing the land outlines. In the case of Brielle, there is a significant amount of water in the form of a moat; perhaps you'll have rivers, a coastline, or perhaps regions which would form appropriate boundaries. I've given my land a color of #E8E1B4.

Step 7: Check For Neatness

Having drawn a basic outline for the land, make your streets layer visible once again. As you can see in my case, the streets cross the water in two places and the land I've drawn underneath looks pretty scrappy. I now want to tidy that up and make sure the land runs parallel with the street at these points.

Step 8: Tidy Up

Make a copy of one of the relevant streets and paste it onto your "Land" layer. Go to Object > Path > Outline Stroke.

Now go to Effect > Path > Offset Path and enter a value of your choosing (in my case 3mm). Then expand it by going to Object > Expand Appearance.

Use the Direct Selection tool to ensure no bits of land are sticking out from behind this newly made street path.

With the Pathfinder's Add to Shape tool, combine your land with the new object. First give the new object the same color as the land; the resultant object will inherit the color of the uppermost contributing object.

Step 9: Last Bits of Land

OK, take a good overall look at your land and streets, tidy up any straggly bits and make sure it's looking clear, uniform and tidy. Now you can add any secondary land elements (districts, regions, parks etc.) which will have a slightly different color to distinguish them. In my case I've highlighted the main shopping area and a park area surrounding the church. You can see I've also cut out a canal from my main land object. Next we'll add some water to clarify what we're looking at.

Step 10: Flood

Add a new layer underneath your land layer and call it something recognizable. "Water" would be a good name – hadn't thought of that had you? Draw a rectangle covering a large enough area to cater for all your water, and give it a suitable blue color (#90C1D1 for example).

Step 11: Labels

Depending on what's needed for your map, now would be a good time to add some information. This is by no means a tutorial on Google Earth, but by checking Roads in Google Earth's Layers panel you'll highlight not only the roads, but their names too. Very useful. Use this information to label your own map.

Step 12: Where The Streets Have No Name

Begin by duplicating the streets layer (for reasons which will become clear) and calling it "street names." Now lock your "streets" layer to avoid confusion. Adding street names may be a little difficult to get visually right the first time; we're going to vertically scale the map later and this may have unpredictable results, particularly with text intended to be legible.

Choose a typeface which you think appropriate for your illustration, should your choices be inappropriate you can change them later. I've used a bold Trade Gothic on account of its condensed and legible form. You'll also notice that I've set the tracking to 75 to give more spacing between my letters.

Step 13: Adding Street Names

You could simply choose to rotate and position your street names manually, but for extra fine control it's advisable to use the Type on a Path tool. You already have the necessary paths as you've duplicated your streets, so select the Type on a Path tool, click on one of the streets, and enter a street name.

Step 14: Type on a Path Options

Perfect! Right? Well perhaps not.. We'll need to open the Type on a Path Options to organize things a little. With your street name text selected go to Type > Type on a Path > Type on a Path Options…

In my case, I've had to flip the text so that it's no longer upside-down (this has also resulted in the text beginning at the opposite end of the path as it's aligned to the left). I've also Aligned to the center of the path, making the text run down the middle of the road, including around corners.

Step 15: Position your label

Finally, by using the Direct Selection tool you can position your text along the path by dragging the grab handles at either end.

Step 16: Finishing The Street Names

When you've finished labeling all the streets you need, get rid of the excess paths which are no longer necessary. Select one of them and go to Select > Same > Stroke Color. This will select the streets which you haven't needed to label. Press delete and you'll be left with just the street names on that layer. Give them whatever color suits your drawing. I choose a very dark blue (#07152D), nice and contrasting, but not black, which I try to avoid using.

Step 17: Building Basis

Open a new document, or move to a part of your screen which is free from clutter – we're going to draw an element which you'll use repeatedly. In the following step you're going to place building footprints all over your map, but for reasons which will become clear we need them to represent the rooftops. A simple rectangle split into four individual objects is what we're after. Replicate what you see below using the Pathfinder tool and group the four objects together.

This rooftop example represents a very simple roof and it might well be that your buildings have more complicated footprints. In this case you'll need more elaborate rooftop shapes which you'll have to judge yourself.

Step 18: Buildings

Create a new layer and call it "buildings." On this layer we're going to place.. well, if you can't work out what we're going to place on this layer you probably haven't made it this far. Make your "land" and "water" layers invisible to allow you to trace your screenshot once again.

Select a suitably visible stroke color for your building footprints and start to place the buildings you need in position. Duplicate your rooftop for each building, rotate and scale them as necessary. At this point they needn't be 100% perfect in terms of scale, but try to angle them correctly in line with whichever street or border they run parallel to.

Step 19: Final 2D Features

At this point we've almost completed the 2 dimensional elements of our map. Should you want any other labeling, contour lines, grids, rulers, or other elements, then now is the time to throw them onto your artboard. Before I start playing with dimensions on my map I'm going to place a compass on it.

Illustrate your own or download Peter Rempel's PR Compass Rose font and install it on your system. This font contains plenty of compasses for placement on your map. I chose a fairly simple, but functional compass rose symbol, placed it on my Artboard using the Glyphs panel (Type > Glyphs) and then converted it to outlines using Type > Create Outlines.

Adding some letters including a large N at the top is all I needed to do to give users a sense of direction. Place your compass somewhere on your map; it's exact position isn't yet important, that can be decided later.

Step 20: Save!

You've completed all your 2D elements and therefore your basis is finished. In the coming steps we're going to perform tasks which remove some of the editing capabilities from your illustration, so it's a good idea to save what you now have as a separate file. Should you need to add or edit anything in the future, you can always refer back to the original. Go to File > Save As and call your file "Map 2D Basis" (or something like that).

Step 21: Get Some Perspective

We're now going to scale what we've made so far to give us our perspective (though actually, there will be no true perspective at all). We're illustrating for informative purposes, so we won't be using a vanishing point as the diagram here demonstrates. If we were to use a vanishing point, buildings and other elements would become unclear as they disappeared off into the distance.

Step 22: Vectorize

So that's the theory, now before we practice it, we need to ensure that we won't get any strange results. Firstly, you can get rid of your screenshot layer, we're done with tracing. Secondly, select all your street paths and go to Object > Path > Outline Stroke. Lastly, select all your street names and go to Type > Create Outlines. With everything now suitably turned into objects, you can scale your map.

Make sure it's rotated to whichever angle you find most suitable, unlock all layers, select all (Command + A) and go to Object > Transform > Scale. Choose to vertically scale to 60% (I've found this to be an appropriate amount) and click OK.

Step 23: Building Blocks

Open a new document and place on the first layer some suitable photos of one of your chosen buildings. In the layer properties, choose to dim images as we did with our screenshot at the beginning of the tutorial. Lock the layer and create a second one on which to begin drawing your building.

Step 24: Easy does it

Keep these building drawings simple. Begin with rectangles to establish the main areas, keep everything nice and aligned and use a limited color palette. Your building needs to recognizable, but we don't want any unnecessary detail.

Step 25: Measure Twice, Cut Once

Now you need to refer back to your original drawing. The dimensions of your building's original footprint (of course, it's since been scaled) will determine the dimensions of your building's faces. Given that the footprints were likely rotated, the bounding box won't give you the correct dimensions any more. Instead, select the Measure tool and measure (fairly accurately) the two relevant sides of the building.

Upon clicking and dragging your Measure tool, the Info palette will pop up giving you all the relevant information about what you're doing. For the Distance of what you're measuring, refer to the D value (in this case 12.991mm, but we can safely call that 13mm).

Step 26: Transform

With each of your two (grouped) faces, use the Transform palette and scale proportionately to match the appropriate wall dimension. Once you've done both, make sure their heights are equal.

Step 27: Position Your Walls

OK, you've worked out the dimensions of your walls as they would be in the 2D version of your illustration. Now go back to your scaled version and grab a copy of the building footprint you're working on. Paste it to wherever you're working on your building and position your two walls flush with each other, their corresponding corners matching along with the footprint as shown below.

Step 28: Skew

Select one of your walls. Now choose the Free Transform tool, click on the middle anchor of one of the wall edges, press Command and drag. Skew the walls into place along the footprint. This will require some good eye-work, but you can adjust and readjust until you're happy it all matches nicely.

Step 29: Hoist The Roof

Your walls are in position. Now it should become clear why we chose to create the footprint elements as rooftops. Select the rooftop (locking the walls with Command + 2 will make this easier) and with Shift held down drag it directly upwards until it meets the top of the walls.

I've switched to Outline View (Command + Y) in order to clearly see where my paths are. This is advisable to make sure all your corners meet properly and it also makes the following step easier.

Step 30: Pitch

Your roof needs pitch, so with the Direct Selection tool select all the adjoining central anchor points. Either use the Up Arrow Key or drag with the mouse, until your roof has reached it's correct pitch. It's likely you'll be able to see only two or three rooftop faces of your original four, depending on how steep the roof is. Color them and unlock your walls.

Step 31: Let There Be Light

Now you need to decide on where your light source is. In my case, light is coming from the bottom left, so the left-hand faces of my buildings will be lit and whatever is on the other side will fall in shadow. Copy (Command + C) the necessary objects for one side of your building, paste them in position (Command + F) and join them with the Pathfinder tool.

Give them a shady color of #937C6A and a Multiply Transparency. Place a small piece of shade on the ground (wherever is appropriate), you'll also notice in this case a secondary piece of roof, added afterwards and running parallel to the smaller of the outer walls.

Group your building together and make sure it's correctly placed on your map, preferably on a new layer for 3D buildings.

Step 32: Other Buildings

The principle remains the same for all buildings:

1. Draw visible walls.
2. Measure unscaled footprint dimensions.
3. Apply corresponding widths to your illustrated walls.
4. Position walls with scaled footprint.
5. Skew walls to match footprint and scale horizontally as you do so.
6. Position rooftop.
7. Apply pitch to rooftop.
8. Place shade on appropriate face of building and on ground.
9. Position on map.

Now you need to continue with your buildings. As you position them on your map, they may well throw up some other issues. You can see on the image below that at least one of my street names had to be moved to allow for a building – this can be done by simply selecting and repositioning, or by altering the original and going through the scaling process again. You can also see here that the shadow of one building falls against another, these sorts of details will add authenticity to your final illustration.

Step 33: 3D Land

Let's give our land a bit of a 3D feel too. Make a copy of your land form (Command + C) and paste it in place (Command + F) on a new layer. Now just move it directly downwards, either with the arrow keys or your mouse.

Step 34: Polish up the Land

Make sure your new 3D land edge have a slightly darker shade than the existing land, and then begin neatening up the corners. Use your Pen tool to add anchor points where paths need raising or lowering.

Then use your Pathfinder tool to create extra pieces where there should be shade (according to your light source). Make these objects a suitable degree darker.

Step 35: We Want… A SHRUBBERY!

(Sorry to those who have never watched Monty Python). In any case, now is a good time to start decorating your map. Greenery is a good way of giving your map some atmosphere, so go and make some bushes and trees. Remember that whatever you draw should be based upon it's overhead footprint, scaled vertically to 60%, just like the buildings and the map itself.

Make a few different things and scatter them around your map (all together now..) on a new layer…

Step 36: Number Crunching

Should you need to identify the buildings or areas on your map, adding some numerical reference would be a good idea.. You could do this by placing numbers in the same way as the street names; scaled and as though they are lying on the ground. Alternatively, clear differentiation could also be advisable. Simple 2D circles and numbers will allow easy identification of your buildings.

Step 37: Welkom!

It's in Dutch, but we'll just put that down to authenticity.. Welkom in Brielle, typical of the kind of sign you'd see entering any town or village in Holland, so we'll add a welcome sign to our map. It's fairly important that people know what they're looking at after all.

Conclusion

Having tied together all your elements (plus an unlimited amount of possible other elements) you'll have a finished map. It can always be edited in the future, either by directly editing the 3D illustration or the 2D basis which you saved earlier. Whether your map is of a town, a room, a University campus, the theory remains the same. Don't forget; the important thing is that information is conveyed quickly, logically, attractively and clearly. I hope you have fun with this one!

Final Image Preview

You can find the Source files in the download link labeled "Ball Python" . You may wish to look through them briefly before we begin. A preview of the final image is below.

Download File : http://1malaysia-innovation.com/download/Ball Python.rar

Step 1

Even when creating vector art, you’re drawing is the basic guide for your final illustration. Spend a fair amount of time getting your drawing perfect before you scan it into the computer.

Step 1A

Once your drawing is scanned in, start by using the Pencil tool or Pen tool (whichever you prefer), and trace the basic shapes of your drawing. Use transparency to see what your drawing looks like while your tracing.

Step 1B

Each element of your drawing is important, so pay attention to little details such as the under belly of the snake. The Pen tool is useful for this area of the illustration.

Step 2

Once you have the basic elements of your drawing finished, experiment with colors and add a basic color for your background.

Step 3

With the Pencil tool or Pen tool, add some tonal values in the head of the snake. Once you have a shape you're happy with, scale back the Opacity to around 20%.

Step 3A

Spend a little time shading the head. You can achieve shading by drawing tones and adjust the opacity. If you have ever had a painting class, shade the same way in illustrator, as if you were painting on a canvas. Add darker tones with a higher opacity near the edges of the head and light tones near the middle.

Step 4

Now spend more time drawing in the spots of the snakes. Have fun by loosely drawing spots throughout the snake. Since these spots are still part of the drawing, they can be done on the same layer as the overall snake drawing.

Step 5

Double-clicking the Pencil tool will bring up options for controlling the tool more accurately. Experiment with these setting until you're happy with the results. Now create a new layer and start adding more color to the snake by adding some yellow tones around the basic red tones added before. Add color around each shape, which will help move the color around adding life to the piece.

Step 5A

Continue this process throughout the snake.

Step 5B

Once you're finished adding the yellow your layer will look somewhat like this figure below.

Step 6

To help blend the two tones, select a color that will help soften up the hard edge between the two colors. I choice an another orange color. Draw an abstract shape, which will overlap the yellow and red. Then change the Opacity to about 55%. This will soften the edges.

Step 6A

Once your finished, your layer should look like this figure below.

Step 7

Create a new layer and label it "shadows." Instead of using a black, pick a color like purple. Next, draw shades around the edges of the snake with the Pen tool. After drawing them, change the Opacity to 10% or 15%. Draw many of these swoosh shapes around the edges of the snake. This will help add depth to the illustration.

Step 7C

Once your finished, your layer should look like this figure below.

Step 8

Now that the snake is almost complete, lets play around with adding some texture to the background. Draw a few basic objects in the background. Then, select the Twirl tool, then twirl the objects which you drew until your happy with the results.

Step 9

Now for the finishing touches. Add some finishing highlights to the snake by drawing a few swoosh shapes with the Pen tool. Next from the Effects Options, click on the Blur section, and select Gaussian Blur. Only add a few points to add just slight burr to the edges.

Conclusion

Now look over your finished illustration and add any additional highlights or shadows you mite need. Our finished illustration is shown below.

Final Image Preview

You can find the source files in the download link labeled "cactusking" . You may wish to look through them briefly before we begin. A preview of the final image is below.

Download file : http://1malaysia-innovation.com/download/cactusking.rar

Research

Before getting started with the artwork, it helps to find reference images. Once I've decided what it is I want to create, I find the reference images that will give me enough information to feel I understand the subject.

Now, I don't live anywhere near a desert so the internet is where I did my search. Funny enough I found an image I could've used for reference after I finished the character. Note: Please respect the ownership and copyrights of the materials you use.

Step 1

There isn't any particular size for this project so I've selected tabloid for the new document size in Landscape Orientation. Once that page is open, save the file to the directory of your choosing.

As your progress with this or any project, it is super important that you develop a strong save habit, and save often. It so easy to get caught up in making a new shape or playing with a color idea that you lose track of the last time you hit save, and that is inevitably when the power will go out or on your computer a hick-up will cause you to lose all the work you've done.

Step 2

You can use the pen tool for this and pull bezier points to create the shapes for this character, but I would encourage you to give the pencil tool a go. First thing I want to do is create the basic shape of the character. This may take a few attempts to get it to the point where you're happy, but just keep at it until you get a shape you like

Step 3

Close up end by drawing over the area making sure to start on the line and move across the area to wish to close.

Step 4

Next I create the arms in the same way I created the body. Save.

Step 4b

For this image I'm able to copy and flip the first arm to create the foreground arm. I use the reflect tool and then scale the shape up to create the feeling of perspective. Select all three object and fill them white. Now you can start to see the perspective effect.

Step 5

The next step is to create the shapes that will form the ribs. I create the ribs making sure they help to contour the body.

Step 5a

Make small adjustments to each rib to make sure they add to the overall contours of the basic body structure. This will be important later when creating the strokes around the final piece.

Step 5b

Here I've filled the shapes to better show how they are drawn. An additional rib is needed for the front of the body to allow for more visual structure once gradients are dropped in.

Step 6

Here's a shot of the layer structure so far. I try to always keep them labeled (although they sometimes get out of control). Have you been saving?

Step 7

After unifying the line weights to (.5), I move on to the face. I draw shapes for the basic features until I'm happy. To create the illusion of holes cut into the surface, I duplicate the shape and scale it down to the desired size and reposition.

Then copy the first shape (Command + C), select the inner shape you just created and then paste in front (Command + F). Now select both objects and hit (Command + 7) to create a clipping path. Note that objects grouped together will be clipped as a group.

Step 8

Create the hint of a third mouth hole on the far side of the body by copying and scaling one of the mouth shapes. This needs to be done for both the main body shape and the rib shape. Duplicate the object to be used as the cutter. First select both the cutter shape and the rib object the cut is to be applied to. Then select Pathfinder > Minus Front. Repeat this for the body shape below.

Step 9

After looking at the front arm, I decide it needs some tweaking. I contoured the area that connects to the body to give more definition to the ribs.

Step 10

SAVE!!!!

Step 11

Next we'll make the needles. Stylistically, I decided that big, fat cone shapes would be the best look for this guy. I can get away with only two angles of cones to create all the needles.

Step 11a

Use a circle to create the first cone. With the Convert Anchor Point Tool, click the top anchor. This will reset curves.

Step 11b

Then using the Direct Selection Tool, extend the height of the cone.

Step 12

For the other cone I start with an ellipse. Then using the Direct Selection tool, extend the height of the cone.

Note: The Direct Selection is the white arrow not the black arrow shown.

Step 12b

Then with the Convert Anchor Point Tool, click the top anchor. This will reset the curves. Draw in the handles to sharpen up the point.

Step 12c

Done!

Step 13

Place the cones along the ribs. Rotate and scale each cone to create the illusion of perspective…

Step 14

You can see the diagram below uses color to indicate the placement and variation of rotation and scale using the two different cone shapes.

Step 15

Apply the same technique on the "body" layer and other arm. In the second image, I've shown with color the placement and variation of rotation and scale using the two different cone shapes.

Step 16

You can see the separation and groupings of the elements below.

Step 17

Next is to create the fat strokes. I start by selecting the arm branch parts, then copy and paste in front (Command + F) of the needles positioned at the back of the layer. By Shift selecting the background needles and then pasting in front (Command + F) you will insure that your stroke is on top of those objects.

Step 18

Add stroke weight of 10pt and shift the shape to the left.

Step 19

Repeat this for body and other arm. Save!

Step 20

I had some tapering strokes at the elbow joint show the contour of the arm.

Step 21

Now it's on to adding a stroke weight to the needles, but instead of a stroke weight, I'm able to copy and paste in back then scale up to a size that feels good. Repeat this for each needle.

Step 22

At this point it's ready for print out and shade key test. This is where I might play with my felt markers and drop in some shadows just to experiment, but for this tutorial it'll stay digital.

Step 23

Time to get started in on the color. I’ve isolated the first piece to show the size of the gradient circle needed to create the illusion of volume. This technique is repeated for each rib.

Step 24

Some ribs require the use of Radial gradients.

Step 25

Moving on to the arms, a smoother gradation can be used here. Note the colors are spaced a little further apart.

Step 26

Again I adjust the size of the gradient to suggest the shape of the back arm. Note the colors of the gradient are in the reverse order with the dark on the inside.

Step 27

Add a small highlight under the arm.

Step 28

The face uses the same radial gradient but with a fourth lighter green added to add more pop.

Step 29

Adjust the radial of the gradient to form the spheres of the eyes.

Step 30

Eye sockets and inside the mouth need some extra drama. I used a redish purple to very dark purple radial gradient here. This image is a comp of the different radial for the eyes and mouth.

Step 31

Needles are treated with either a radial or liner gradient depending on lighting.

Step 32

I adjust the outline of the needles to a deeper color to match the gradient fill.

Step 34

Add colors to the other strokes on the needles and a deep green around the body and arms.

Step 35

Notice that the three layers are still intact.

Step 36

Use the Pen Tool and the same technique to create rocks and grass to add to the scene

Step 37

Place each rock and grass set on their own layer in front and below the main "body" layer. Although you can group and hide the objects when needed, it's nice to be able to simply make the layer invisible and not have to worry about other hidden objects popping up when you unhide all.

Step 38

What would a King be without a crown? Create one layer for the basic cactus flower adjusting the angle of each peddle so they're not too acute. Then create the first inner peddle shape and scale it down. Repeat this a few times to build up the shape.

Step 38a

After building up the shape, fill them with a gradient, as shown below.

Step 38b

The base and all subsequent shapes of the flower get filled with the same gradient that goes from dark to light pink. Select the peddles of the crown, copy and paste in back. Then while still selected use the pathfinder Unite tool.

Step 38c

Apply a stroke weight to this united shape as shown.

Step 39

The shadows help tie it all together. The technique of applying the shadow is simple. I always use this method when building this type of shadow. Once you've determined the direction of the light source, follow these steps:

Perform a Pathfinder Intersection operation.

Step 40

Using the Pen Tool and the same technique, I create rocks and grass that are to be added to the scene.

Step 41

As with the needles, the shadows are placed below (under) or above (over) objects on their relative layers. All of the shadows were made using the method from Step 39. I've isolated the different shapes and colors. There is room to experiment with the shadow shapes, so I will just show you the end-result. Any shapes that overlap may need to be united to eliminate dark spots.

Note: When creating shadows it's generally better to not use black. This tends to visually flatten out the image. For a richer result, try using a deeper value of the color you are casting the shadow on, or try various other colors to see what happens.

Step 42

Finally, let's work on the background. I'll use a circle as a frame. Now create the sand dune shapes using the Pen Tool, and fill them with a subtle gradient of light to medium tan to look like sand.

Step 42a

Use a square shape for the sky, and fill it with warm orange to yellow gradient.

Step 42b

Group the sand and the sky objects, then use a circle shape at the upper most level to apply a clipping mask (Command + 7).

Step 42c

Here is the result of the clipping mask.

Step 43

Having done this, I can now select all and create a copy of all the objects and paste them into a new layer in front temporarily.

Step 43a

To make a copy of the circle used in the clipping mask, double-click to access isolation mode and copy the circle. Click Artboard to return to normal mode. Paste the circle into the layer with the copy of the character.

Step 43b

With all the other layers hidden, select all of the objects in the temporary layer and select Pathfinder > Unite.

Step 43b

Move the layer containing the now united shape to a position below that of the character and circular background image. Now apply a double-stoke weight to the appearance.

Final Image

Drop in a warm gray gradient behind it all and it's done. I hope you enjoyed this tutorial! The final image is shown below.

Whether analogue or digital, the more you practice the sharper your illustration and design skills will get. But don't forget, the most important tool is developing a strong creative process. This is what will truly bring your work to the next level. If you are patient, stay focused, and remain true to your inner voice your characters will rule!

Final Image Preview

You can find the source files in the download link labeled "Cute 3D vector robot" . You may wish to look through them briefly before we begin. A preview of the final image is below.

Tutorial Details

• Program: Adobe Illustrator CS3
• Difficulty: Beginner to Intermediate
• Estimated Completion Time: 60 minutes

Download File : http://1malaysia-innovation.com/download/Cute 3D vector robot.rar

Step 1

Start with sketching the character in a blue line using the Brush Tool (B), just a quick loose sketch.

Step 2

Trace the sketch in a new layer. Fill all the shapes with a white fill and a black stroke. This should be a quick job since most of the shapes are very simple.

Step 3

Start coloring the head with a white to blue gradient. I want the main light coming from the upper-right so I drag the gradient from the upper-right to the bottom-left. I'm not too good with RGB color so I work in CMYK mode. Feel free to use whichever mode is suitable to you.

Step 4

On second thought, I'd like to add a secondary yellow light source at the bottom-left. That means I have to add yellowish lights on the object. To do so, I add a yellow color to the gradient, as shown below. To have a more dramatic effect I need to have a strong yellow light, so I move the right diamond slider (between blue and yellow) closer to the blue one.

Step 5

I'd like to have the visor made from LCD with a black surface and digital eyes within. So I fill the visor with a grey to black gradient.

Step 6

Make a diagonal line as shown below, select the line and the visor then trim them, ungroup and fill the right part with black. Now it has a close resemblance to a glass-like material.

Step 7

Make the eyes with a simple ellipse and fill them with light grey.

Step 8

I need a light area at the top of the head, so I Warp an ellipse with the Arc set as shown below.

Expand the outcome by going to Edit > Expand Appearance, then fill it with white. Set the blending mode to Overlay and change the Transparency to 37% as you position it to the top of the head.

Step 9

Next I work on the ear, starting with the hole first.

Fill the ear with a red gradient. Apply the same light treatment to it as in the head.

Step 10

Make a line with a the Pen Tool (as shown below in blue), duplicate it and place them over the antenna. I'm going to cut the antenna into three pieces using those lines. Select the lines and the antenna, then click the Divide button in the Pathfinder palette.

Step 11

Ungroup (Command + Shift + G) the objects. Fill the middle one with black and the others with a white to black gradient, set the gradient from top to bottom as shown.

Step 12

Next I will create a highlight reflection on it. The highlight should go on the thick side of the antenna, since the main light source comes from the top.

Make a couple copies of the antenna and position them as shown. Select them both and click the Subtract From Shape Area button in a Pathfinder palette. Fill the subtracted object with white and set the Opacity to 65%.

Step 13

Now it's time to move onto the body. I apply the same gradient to the body as in the head.

Step 14

Create a logo to be placed on it, in this case a modified letter "V" will be use as the logo. Go to Object > Path > Offset Path to duplicate it, set the number to -0.05cm or whatever you like. The negative (-) means that it will have the duplicate object smaller than the original. Move the duplicate a few pixels to the right so it will look proportional and fill it with yellow.

Step 15

I want the logo to have a lighting effect that comes from the inside the body, so I apply the Outer Glow with orange as the color source.

Step 16

I'm thinking that the body is assembled from two different parts, the top and the bottom. So it's going to need a joint line? Make a line across the body from left to right with a Pen Tool. Set the stroke to white then Expand it (go to Object > Path > Outline Stroke).

Duplicate the object and place it in front, make it smaller and also adjust the anchor point position using the Direct Selection Tool (A). Fill it with dark blue. Place them below the logo when it's done.

Step 17

Duplicate the body (red color) and paste it right in front. Make an ellipse to subtract it. We're going to use the results as a highlight area. Fill the subtracted shape with white and 43% Opacity.

Step 18

Add a shadow of the head (the head is floating) to the body, fill the shadow with black and 27% Opacity, then set it to Multiply.

Here's what I have so far.

Step 19

Let's move to the left hand. Fill the arm and all the fingers with a white to blue linear gradient. Apply different angles for each.

Color the hole as shown below. Add a joint line as in the body (Step 16), also add a shadow underneath it.

Step 20

Do the same for the right one.

Step 21

Lets move to the spark board. Fill it with a white to red radial gradient with a color combination shown below. Set the direction from right to left.

Step 22

Make a thickness effect on it by creating a highlight reflection using the same technique as I did for the antenna (Step 12). Make two copies of the spark board, offset the above one and subtract the below one with it. Adjust the result if needed, fill it with white and set the Opacity to 20%.

Step 23

Create a highlight at the back of the spark board. Use the same technique as previous ones. When it's done add a drop shadow of the body above as shown.

Step 24

Apply a radial gradient to the tire with the color combination shown below. Set the angle direction close as the tire. Color the axle end cover with the same gradient as the spark board.

Step 25

Now I'm going to make a radial blur to give it a moving effect. First make an ellipse and fill it with 20% black, Rotate it about 15-20° left. Then go to Effect > Blur > Radial Blur and apply the settings shown below.

Step 26

Copy the blurry ellipse and overlap them at the left and right side of the tire. Create the inside area of the spark board and place it behind.

Step 27

Next, create a drop shadow by applying Object > Blend > Create to the two objects as shown. The small one is filled with gray and the large is filled with white. Now use the Direct Selection Tool (A) to select both shapes, then set the white shape Opacity to 0%, this will make the shadow blend more softly to the background.

OK, it's almost done.

Step 28

Apply the same light treatment to the balloons.

Step 29

Work the background into a new layer below the robot layer. I used retro style stripes as the background.

Step 30

Now I'll add scattered circles in front of the stripes. The quick way to do it is using brushes. I make three different size black circles and drag them into the Brushes Palette. Choose Scatter Brush when the dialog box pops up and apply the settings shown below.

Step 31

Apply the custom brush to the background, experiment with color and opacity to have the best outcome.

Conclusion

Done! I hope you enjoyed making this vector robot.