Designer Passport: Oasis Art & Graphics

In this series, we take an opportunity to spotlight great designers from around the world. Each month, Designer Passport brings you new art by a graphic artist we love (created from Shutterstock assets, of course), along with a step-by-step guide on how you can create it (or something equally awesome) yourself.

Ranganath Krishnamani is a designer and Illustrator living in Bangalore, India. His illustration here is one letter out of a series from his ongoing “Alphabet City” project. The idea behind oasis art and graphics is to find creative ways to organically build letters by matching them to the modern landscapes in which we live and work.

Step 1

Before working in Illustrator, I put together a rough composition of a harbor scene on paper to help visualize the various elements and angles. I normally create a 1000×1000 pixel file to provide enough room to add the necessary details to the illustration. Since the illustration that we’re about to create is an isometric view, which requires an angular grid, draw a diagonal line across the canvas that’s at roughly a 45-degree angle. Click Effect > Distort and Transform > Transform from the menu and increase the number of copies to 15 to make a vertical grid. Similarly, draw a horizontal angular line and follow the same steps above to make a horizontal grid.

Step 2

With the grid as the foundation for the entire illustration, we can now start to build the base of the illustration by creating the letter ‘H’ in an isometric angle. You can use the pen tool to draw the basic shape. Once you have the basic shape in place, click Effect > 3D > Extrude and Bevel to add depth to the shape.

Step 3

Next, add some stacked cargo containers to create the harbor scene. Use the pen tool to draw an angular square that follows the grid laid out in the background. Click Effect > 3D > Extrude and Bevel to create a quick reference for the cargo container. Switch to the “Wireframe” mode in the Surface dropdown to get a better view of the angle. Use the pen tool to draw over the wireframe surface with different shades of blue to create an illusion of light. Group them together, and you are now ready to duplicate the same shape and stack it up to create cargo containers

Finally, you can create a 3D cargo container by adding shadow to the composition. This can be done by drawing an angular shape (using the pen tool). Use a darker shade of color to fill the shape and select “Multiply” in the options provided under the “Transparency” menu.

Step 4

The next step is to create the cargo ship. For that, we can start by drawing a basic rectangular shape along the angular grid and extruding the shape to give it depth. With this in place ,we can now start to build the basic body of the ship using the pen tool. We can duplicate the same cargo containers and tweak some of the colors of the ship to add detail to the ship’s surface.

Step 5

Add shadow to the ship to give it depth and volume by creating a rectangular shape, and select Multiply in the options provided under the Transparency options men’ to create a shadow effect.

Step 6

To add windows to the the ship, draw a square shape using the basic shape tool, select the shape, and click Object > Transform > Shear. Tweak the shear angle to align with the ship’s surface. Once you have one angular window created, use the Effect > Distort and Transform > Transform option to create more windows along the same angular path.

Step 7

To create a park amid the harbor, make a rectangular box along the grid, or use the Shear option found under the Object > Transform menu to align the shape to the angular surface of the letter “H.” Add trees and other details to the park using a reference image to create a view of the park.

Step 8

You can now create a series of buildings around the harbor by drawing a simple angular square shape and extruding the shape to give it depth and volume. Alternatively, you can reuse the same shape and tweak the width and height of the square in the “Extrude and Bevel” options dialog to create variations of tall, short, and rectangular buildings.

Based on your desired final output, you can keep adding details to each of the building exteriors.

Step 9

The next step is to create a simple lighthouse using basic shape tools. Ellipses and squares will help build the shape of the light house. Add the standard multicolored red and white stripes to make the structure stand out from the rest of the shapes. Alternatively, you can use the “Mask” effect by drawing the three stripes across the rectangular shape and masking the stripes to take the contour of the lighthouse stem.

Step 10

It’s time to add shimmer to the water around the harbor. I used basic triangles and reduced their size and opacity to create a simple pattern that can be reused around the extruded harbor.

Step 11

Import the texture from another reference image and select the Shear option from the Object > Transform menu. Tweak the shear angle to visually match the texture to the angular grid.

Once you have the texture mapped to the grid, you can now select an area to fill with a lighter green, then another for darker shades of green. Finally, add an opacity of 30% to the texture so that it blends well with the the overall illustration. Alternatively, you can add multiple layers of texture and follow the same process highlighted above to create a more detailed sea effect.