Project: Skyscraper City Scene

To look at how we can use perspective in Illustrator, open perspective_start.ai. Save a copy of the file if you want to practice. Refer to Figure 13-2.

This file has three layers. The Background with a horizon, sky, and moon; the City layer, on which you are going to use the Perspective Grid tool; and a Clouds layer for which the visibility is turned off, as it is not required in this part of the project. To create the start of the city, select the City layer.

Now you want to select the Perspective Grid tool from the Toolbars panel. Refer to Figure 13-3.

This brings up a preview of the Perspective Grid with the Active Plane widget that looks like a circle surrounding a cube. Refer to Figure 13-4.

View ➤ Perspective Grid

The grid, before you start to draw, can be altered in several ways. It is always good to set up the grid and decide on a perspective before you start to draw so that you do not have to redraw parts of your artwork later.

Viewing options for the grid can be found in the menu under View ➤ Perspective Grid. Refer to Figure 13-5.

Here you can choose to Hide the grid after working with it (Shift + Ctrl/CMD + I), or go to View ➤ Perspective Grid ➤ Show Grid if it is not visible.

Show Rulers: Specifically for the Perspective Grid.

In this case you want to keep Snap to Grid selected, as you will need it with the Smart Guides to assist you as you draw. It allows parts of your path to snap to the grid lines.

Lock Grid: You can lock the grid to keep parts of it from being altered or moved as you use the Perspective Grid tool. Then only the visibility of the grid and plane position of the left, right and horizontal grid can be moved using their lower handles which we will look at shortly in the custom grid section of the chapter.

Lock Station Point: When enabled ensures that the left and right sides of the grid’s vanishing point move together. In this case, I kept these settings unlocked so that both vanishing points can be moved separately, as well as the station point, which we will look at in a moment.

Define Grid: Allows you to create custom grid settings from its dialog box. Refer to Figure 13-5 and Figure 13-6.

While in the dialog box, you can create and save preset custom perspective grid settings for the following:

Type: The type of grid you want to use; from the list choose One Point, Two Point, or Three Point Perspective. Refer to Figure 13-6.

Units: The settings by default are set to Points, but you can change this to Inches, Centimeters, or Pixels. Refer to Figure 13-6.

Scale: Set a scale ratio; the default is 1:1. Refer to Figure 13-6 and Figure 13-7.

Gridline every: This sets your grid at 30 pt on the Artboard. Currently based at the scale set of 1:1, at True Height Line, 1 pt on the Artboard represents 1 pt. This is specifically for the perspective grid and is displayed when View ➤ Perspective ➤ Show Rules is enabled. Refer to Figure 13-8.

You can then set the Viewing Angle, currently at 45°, Viewing Distance, 480 pt, and Horizon Height, 250 pt. Third Vanishing Point is grayed out and is only available for the Three Point Perspective type, where you can set the X and Y coordinates. One Point Perspective only uses Horizon Height. Refer to Figure 13-9.

Grid Color & Opacity: This section lets you set the color and opacity for the Left (Blue), Right (Orange), and Horizontal (Green) grids from either the list or the computer’s color picker. Use the Opacity slider to set the opacity for the grid overall. By default, it is set to 50%. If you have made changes, you can click OK. But in this example, keep it on the default settings and click Cancel to exit. Refer to Figure 13-10.

The lower half of the Perspective Grid menu allows you to choose various preset perspectives that have already been created specifically for One Point, Two Point, and Three Point Perspective. Refer to Figure 13-11.

One Point Perspective: [1P-Normal View] shows up as a two-sided grids of left and horizontal lines moving into the center of the page and disappearing into the horizon. This is good for a path, road, or train tracks. Refer to Figure 13-12.

Two Point Perspective: [2P-Normal View], which you will be using to build your skyscraper, has the horizontal grid, but also has left and right grids that converge as though you are looking at the corner of a city block or building at ground level. Refer to Figure 13-13.

Three Point Perspective: [3P-Normal View] This also could be used for a cityscape and also uses left, right, and horizontal grids. However, it is better suited for when you are looking down at objects, like when you are flying in a plane or standing on top of a higher building. Refer to Figure 13-14.

In this project, make sure that you are using the Two Point Perspective [2P-Normal View]. Refer to Figure 13-15.

Making a Custom Grid

While in this project we are going to use the preset grid, alternatively, you could move the various handles on the grid to create your own custom perspective grid.

While using the Perspective Grid tool you can move the lower handles, which will move the sides of the grid left, right, or horizontally up or down to a new location. These are the Right (orange), Horizontal (green), and Left (blue) grid planes controls. The point at which they all converge, or the white circle, is known as the station point or origin. Refer to Figure 13-16.

Likewise, you can use the Perspective Selection tool to focus only on moving these grid handles. Then switch back to the Perspective Grid tool for more options. Refer to Figure 13-16 and Figure 13-17.

The lower white station point circle changes the dotted grid point when dragged. When moved, this is then called the changed ruler origin point. Refer to Figure 13-16 and Figure 13-18.

The upper white diamond point on the horizontal grid can also adjust the plane when dragged up and down. This controls the grid cell size for all grids. Refer to Figure 13-19.

The diamond handles on the left and right of the grid can expand and/or contract the grid on the horizontal. These control the extent of the grid and can be adjusted independently. Refer to Figure 13-20.

The upper top diamond handle between the left and right grids moves the perspective up or down for squat or tall buildings and is also known as the vertical grid extent. Refer to Figure 13-21.

The other handles are part of the green horizontal. The lower diamond handles allow you to move the entire perspective to a new location and change the ground or horizon level. Refer to Figure 13-22.

The upper diamond handles allow you to move the horizontal up or down to adjust the horizon height. The green line between the two diamonds is known as the horizon line while the diamonds themselves are called the horizon level. The space between this horizon line and the ground level is known as the horizon height. Refer to Figure 13-23.

The inner circular handles, which are resting on the horizontal horizon line, are also part of the left and right grid; they allow you to move the sides of the grid in or out. They are the left and right vanishing points. Refer to Figure 13-24.

For your own project you can create your own custom grid, and if you want to save that grid you can, from the View menu, choose Perspective Grid ➤ Save Grid as Preset. Refer to Figure 13-25.

This brings up the Save Grid as Preset dialog box. It has the same settings as the Define Perspective Grid dialog box, so you can refer to that section. Clicking OK will allow you to name and save a custom preset and add it to the main menu. Refer to Figure 13-26.

If you need to remove this preset at any time, go to Edit ➤ Perspective Grid Presets, locate the perspective grid in the dialog box, select it, click on the Delete button, and then click OK to commit and exit. Refer to Figure 13-27.

Note

In this dialog box, you can also add a new preset, and edit, import, and export grid presets for other users. You cannot delete the default presets. You can also see a summary of the preset settings for each preset. Refer to Figure 13-27.

In this case, reset your grid back to View ➤ Perspective Grid ➤ Two Point Perspective ➤ [2P-Normal View]. Refer to Figure 13-28.

Drawing on the Perspective Grid

To draw the two sides of a building in perspective, you can use the Rectangle tool to draw while the grid is on the Artboard. Refer to Figure 13-29.

However, before you start, make sure you know which side of your Active Plane widget is active. Refer to Figure 13-30.

In this case, it is set to Left Grid(1). This means that if you draw, you will be using the left grid to maintain perspective wherever you are on the Artboard. Here, you can see me drag out a rectangle on the left side of my grid. Refer to Figure 13-31.

Now switch to the Right Grid(3) and drag out another rectangle on the right side of the grid. Refer to Figure 13-32.

You can then use the Selection tool to select the rectangles and change their colors. I used a gray on the right and black on the left—both with no stroke. Refer to Figure 13-33.

If you want to add a sidewalk on one side of the building, click on the Perspective Grid tool again and switch your Active Plane widget to Horizontal Grid(2). Refer to Figure 13-34.

Now, with your Rectangle tool, add a sidewalk on one or both sides of the building. Refer to Figure 13-35.

The fourth option of the Active Plane widget is No Active Grid(4). You can use this setting when you do not want to draw in perspective, but still want the grid visible on the Artboard. Refer to Figure 13-36.

For additional Perspective Grid tool and Perspective Selection tool options, you can double-click on the tools in the Toolbars panel. Refer to Figure 13-37.

This dialog box indicates whether the Active Plane widget will be visible and where it will be placed on the screen while you work. By default, it is in the top-left.

It also gives advice for automatic plane positioning when you drag the handle points with the Shift key selected to temporarily move the active plane to a new location. While holding down the shift key and double-clicking will hide inactive plains only showing the active. Clicking off the active grid reveals all grids. For the plane positioning. You can also select the options of the Anchor Point of Perspective Artwork and the Intersection of Gridlines check boxes. In this case, both settings are enabled and if disabled can affect the interaction of the Perspective selection tool and dragging or double-clicking while pressing the Shift key and interacting with an active plane. Refer to Figure 13-38.

Another thing you can try with the Rectangle tool is to create windows for the building. Make sure to set either your left or right grid first with the Perspective Grid tool’s Active Plane widget, and then use the grid to add a few windows with the Rectangle tool. Refer to Figure 13-39.

Later, with your Selection tool and Control panel, you can color them CMYK yellow to make it look like the light is on in some of the rooms. Refer to Figure 13-40.

Now, if you want to copy some of the windows in perspective, you can use the Perspective Selection tool (Shift + V) and select one of the windows. Hold down the Alt/Option key and drag a copy to a new location on the same grid plane on the building. Refer to Figure 13-41.

If you want to move a copy to another plane in perspective with the Perspective Selection tool, then, while dragging, hold down the number of the grid; for example, if you are currently on the right grid, to copy to the left grid press Alt/Option + Drag +1, and this will allow you to copy that path from the right grid onto the left grid. Refer to Figure 13-41 and Figure 13-42.

Add the Alt/Option key to any of these combinations to copy and/or the Shift key to constrain the movement. You can also use the command Object ➤ Transform again (Ctrl/CMD + D) to repeat a similar movement on the current plane.

Use the Perspective Selection tool to scale and move objects while on the grid.

In all cases, the Location field is set to 0 pt and Object Options are set to Do Not Move. This means that if I were to move my plane to a new location, the current objects on that plane would not move with it. However, setting a new location via the dialog box and changing to Move All Objects or Copy All Objects and then clicking OK would cause the object to either move or be copied with the grid. Refer to Figure 13-44.

If you have tried this setting, you can use Edit ➤ Undo to undo that last step or click the Cancel button in the dialog box. I left the settings at Location: 0 pt and Do Not Move.

Additionally, you can use other shape tools with the Perspective Grid tool. In this case, I use the Rectangular Grid tool on the right plane with the following settings, which I first set when I double-clicked on the tool in the Toolbars panel: I set my Horizontal Dividers to 16 and my Vertical Dividers to 3, left my skews both at 0%, and made sure that Use Outside Rectangle as Frame was enabled and Fill Grid disabled. The default width and height do not matter, but the registration point is in the upper left. Refer to Figure 13-45.

You might have to use different settings, depending on the size of your building and grid.

Use the Control panel to set the fill to none and the stroke to Black 1 pt. Then drag out your rectangular grid. Refer to Figure 13-46.

Use the Direct Selection tool to move some of the horizontal lines so that they conform to the grid and appear as frames around your windows. View ➤ Smart Guides and View ➤ Perspective Grid ➤ Snap To Grid can assist you with this. Refer to Figure 13-47.

Remember to zoom in with your Zoom tool and use your Hand tool (spacebar) to navigate as you adjust the lines, and you should end up with something like this on the right side of the building. Refer to Figure 13-48.

Additionally, you could keep adding more windows or even add more buildings to your street. You can see how I did that in my file perspective_final.ai. In this file, I have also made the Clouds layer visible. Refer to Figure 13-49.

Remember, if you need to move a shape in front or behind, use the Selection tool and choose Object ➤ Arrange and one of the commands from the menu. Refer to Figure 13-50.

When there are a lot of objects to bring forward or backward, use your key commands Forward Ctrl/CMD+ ] or Backward Ctrl/CMD+ [ multiple times to move selected objects quickly, without having to use the menu. This is important when you want to have the grids over windows or building to appear behind one another. Refer to Figure 13-51.

I hope that this will get you started using the Perspective Grid tool and Perspective Selection tool. So, as you can see, working with the perspective tools allows you to create your own creative city landscape.

Additional Perspective Commands

Finally, I will point out that in the Object ➤ Perspective menu there are four other commands. Refer to Figure 13-53.

Attach to Active Plane: If you have an object selected with the Selection tool and want to add it to the selected plane as seen in the widget, then choose this command. It will now be part of that plane. However, you will still need to use the Direct Selection tool to adjust the anchor points so they are in perspective with the grid. Refer to Figure 13-54.

Release with Perspective: Keep the object in perspective, but have it no longer be part of grid and able to be moved with the Selection tool. Refer to Figure 13-55.

Move Plane to Match Object: When you want to draw or bring objects in perspective at the same depth or height as an existing object, select the existing object in perspective. Then choose Object ➤ Perspective ➤ Move Plane to Match Object. This will bring the corresponding grid to the desired height or depth. You can now draw or bring new objects in perspective. This is best used when you are just starting to create the grid, as this creates its own plane for that selected object, which you can then modify with the Perspective Selection tool. Refer to Figure 13-56.

Edit Text or Edit Symbol: This works with both text and symbols once they are within the perspective grid. Symbols and text cannot be added to the perspective grid directly. To do so, you need to select the text or symbol with the Perspective Selection tool and then drag and move it onto the grid side you want to apply the symbol or text to and then scale the text or symbol. Refer to Figure 13-57.

Both have now become perspective objects. In the Control panel, you can use the options of Edit Text or Edit Symbol, Edit Perspective, Opacity Transparency settings, and Isolate the selected object. Refer to Figure 13-58.

Editing allows you to go into Isolation mode for text or Symbol Editing mode for symbols. For either alert, click OK and then use the upper-left arrow to exit Isolation mode. Here is an example with a symbol. Refer to Figure 13-59.

Make sure to save your work at this point.

For additional details and guidance on Perspective Grid tools as well as working with symbols and type, you can visit the following links:

https://helpx.adobe.com/illustrator/using/perspective-grid.html

https://helpx.adobe.com/illustrator/using/perspective-drawing.html

Rotate (Classic)

This effect is ideal if you want to just rotate a graphic and text without applying any actual 3D effects other than adjusting the image within the X, Y, and Z 3D axes. It’s good for flat objects that need basic perspective. In this case, select the grouped object of the coffee cup with the coffee text. Refer to Figure 13-61.

Then go to Effect ➤ 3D and Materials ➤ 3D Classic ➤ Rotate (Classic). In the dialog box you can set the position using the various presets. With the preview enabled you can view the changes on the Artboard. Choose a rotation option from the Position dropdown list, like Off-Axis Front. Refer to Figure 13-62 and Figure 13-63.

Alternatively, you can set your own custom rotation.

Using the box, you can drag and rotate in a variety of directions, and with the preview enabled the image updates on the Artboard. Refer to Figure 13-64.

The only way that you can alter the object in this manner is to use the 3D Rotate Options dialog box. Notice how it will keep an outline of the current shape and show the perspective change at the same time. You can do further custom rotations by dragging and turning the cube in the dialog box to the angle you want or use the text boxes to enter coordinates for the specific X, Y, and Z axes (-180°,0°,180°). The axis of X is red, Y’s is green, and Z’s is blue. If you want to alter the perspective angle, use the slider dropdown to change the angle. 0° is none while 160° is steep. It is used to create lens distortion or simulate three-point perspective. Refer to Figure 13-65.

Click the More Options button. Set the Surface dropdown to Diffuse Shading, which allows you to alter the surface with diffuse shading and additional lighting, and you can also preserve spot colors, if present in the document. Refer to Figure 13-66.

Light Intenisty specifies the brightness of the selected light on the preview sphere (0%–100%).

The ambient lighting can appear like an overall light, covering the object, or a spotlight, depending on the intensity of the ambient light (0%–100%) you choose, and can gray or brighten the overall object if there are no shadow areas. It controls the brightness of all surfaces uniformly. By default, it is set to 50%.

You can add more than one light, add the lights to the back or front or delete a selected spotlight. Drag the spotlights around on the sphere to move them. Refer to Figure 13-67.

You can choose different shading colors as well. These include None, Black (default), and Custom—so you choose a color using the color picker. This affects how the object is shaded overall. Refer to Figure 13-67 and Figure 13-68.

If you don’t want these lighting control options, choose for Surface the option of No Shading, and when you have completed your rotation and perspective settings, click OK to commit. Refer to Figure 13-70.

As with other effects, this one is live, and you can view it in your Appearance and Properties panels and click on the name if you need to make further edits. Or select the effect and click on the trashcan icon to delete the selected item. Refer to Figure 13-71.

Use Edit ➤ Undo or the History panel if you made this change so the effect is restored.

You can apply this same rotate effect to text as well, and then add additional effects such as a drop shadow: Effect ➤ Illustrator Effects Stylize ➤ Drop Shadow as seen in Chapter 11. Check the preview box to see how that looks and click OK to confirm. This gives the feeling of text and a graphic that are raised off the Artboard. Refer to Figure 13-73.

If I no longer want the Effect to be live, I can choose Object ➤ Expand Appearance. However, make sure to Edit ➤ Undo this right away if that was not your intent and you want to keep the object live. Otherwise, keep a backup copy of the object with the effect on another layer.

Revolve (Classic)

Revolve (Classic) works best with paths that are open. They can be a path with either no fill or no stroke. And the path must be simple. Refer to Figure 13-74.

Before you select the effect the object’s fill should only be a solid color and not a gradient or a pattern for this effect to work correctly and not cause rendering issues. Refer to Figure 13-75.

In this case, with your Pen tool, create an open or a closed path. In this example, it created an open path. Select with the Selection tool the open path that I created in the file to practice with. Refer to Figure 13-76.

Now Go to Effect ➤ 3D and Materials ➤ 3D Classic ➤ Revolve (Classic). In the options dialog box are features similar to those found in the Rotate (Classic) effect. However, in this case to Revolve you can set position or use the cube or the X, Y, and Z text-box areas to simplify the revolve angle rotation around the axis and then the perspective (0°–160°) to edit the revolve angle, which can simulate lens distortion or simulate three-point perspective. Refer to Figure 13-77 and Figure 13-78.

I left the Perspective at 0°.

Revolve allows you to set how much, in degrees, you want the path to revolve around the revolve axis; by default it is set to 360° for a full revolution. Refer to Figure 13-79.

Cap: Allows you to set the cap on for a solid appearance or off for a hollow appearance. This is more apparent on some shapes. In this case I left the cap on. Refer to Figure 13-79.

Offset: Can move the path away for a wider revolution around the revolve axis; by default it is set to 0 pt, but it can be set up to 1000 pt. Refer to Figure 13-80.

In this case I want my shape to look more like a coffee cup than a tent or a pipe, so I set the offset back to 0 pt and changed it from Left Edge to Right Edge. This determines which side the axis is on. Refer to Figure 13-81.

To alter the surface further, click on the More Options button. Refer to Figure 13-82.

This area for Surface settings is similar to that for the Rotate (Classic) effect, but with a few more options. Refer to Figure 13-83.

The Surface field is currently set to Plastic Shading. With this setting you can set the following:

Light Intensity (0%–100%): Specify the brightness of a selected light on the sphere.

Ambient Light (0%–100%): Control the brightness of all surfaces uniformly.

Highlight Intensity (0%–100%): Control how much the object reflects light.

Highlight Size (0%–100%): Specify size of highlight.

Blend Steps (0–256): Specify the number of paths used to shade the surface; more blend steps will make the shape more realistic and less posterized. Refer to Figure 13-84.

Shading Color: Specify how the object is shaded; settings are None, Black, or a Custom color from the color picker. Refer to Figure 13-85.

Preserve Spot Colors and Draw Hidden Faces are currently disabled.

Preserve Spot Colors: When enabled, this will disable items that can cause the spot colors to be converted. By default, I left this setting disabled as we are not working with any special spot colors. Refer to Figure 13-86.

Draw Hidden Faces: Specifies whether faces, hidden from view, are drawn; leaving this setting disabled speeds up the drawing process.

You can, as with the Rotate (Classic) effect, set spotlights to back with the Move Selected Light to Back of Object icon, or move them to the front again. You can also add more spotlights or delete a selected spotlight. Drag the spotlights around on the sphere to move them on the shape on the Artboard. Refer to Figure 13-87.

Other Surface options are included in the menu. Refer to Figure 13-88.

Wireframe: No additional settings of lighting controls, just creates a wireframe shape. Refer to Figure 13-89.

No Shading: Just a solid color with no shadows. Only Preserve Spot Colors and Draw Hidden Faces are available. Refer to Figure 13-90.

Diffuse Shading: Creates more of a matte than a shiny plastic finish. In this case, for lighting options you are limited to the options of Light Intensity, Ambient Light, Blend Steps, Shading Color, Preserve Spot Color, and Draw Hidden Faces, and you can review those settings in the earlier section on surface plastic shading. Refer to Figure 13-91.

In my case, I set the setting back to Plastic Shading. Refer to Figure 13-92.

Map Art

The last setting that you can review in this dialog box is the Map Art button, which allows you to map symbol artwork to the surface of the 3D object. Click on the button. Refer to Figure 13-93.

In the Map Art dialog box, with preview enabled and before you select a symbol that you want to use to cover a surface in your art, find the correct surface—in this case there are six. Use the arrows to move quickly through first surface, previous, next, or last surface. Refer to Figure 13-94.

In my case, for surface 5 of 6, as seen in my Wireframe preview, I can select a symbol from the dropdown menu. I will add the coffee beans. Refer to Figure 13-95.

Now I need to move the beans into a light area so that they will be visible on the cup. Refer to Figure 13-96 and Figure 13-97.

I can then use the bounding box handles to scale and rotate, or click on the Scale to Fit button. Refer to Figures 13-96 and 13-98.

If upon clicking Scale To Fit, the symbol with its bounding box handles is too large then click Clear, or Clear All if there is more than one symbol on another face. Or set the symbol to none from the symbol menu, and apply the symbol again from the menu. Refer to Figures 13-96 and 13-99.

Other options in this area include the following:

Shade Artwork (slower): Mapped art exhibits same shading as object but may take longer to process. Refer to Figure 13-100.

Invisible Geometry: Shows a wireframe-like effect and only the artwork on the cup. Refer to Figure 13-101.

In this case I enabled Shade Artwork (slower) and disabled Invisible Geometry and clicked OK. Refer to Figure 13-102.

I then clicked OK again to exit the 3D Revolve Options (Classic) dialog box. Refer to Figure 13-103.

As with the Rotate (Classic) effect, 3D Revolve (Mapped) (Classic) will also be available in the Appearance panel if you need to edit it while the object is selected or after it has been externally edited. And the effect can also be added to the Graphic Styles panel, and the Map Art is also included. Refer to Figure 13-104.

You can also use the Direct Selection tool to edit points to make the cup appear as if it has more depth rather than look funnel-like, and the object will update. Refer to Figure 13-105.

Also, while the path is selected, you can change the fill or stroke color anytime using the Control panel. In this case I only color the fill and leave the stroke at none as it would cover the fill and be considered an additional surface. Refer to Figure 13-106.

From open paths and the 3D Revolve (Classic) effect you can create many simple shapes. Half-circles can become spheres; half-triangles, cones; or half-rectangles, cylinders. Refer to Figure 13-107.

Note

However, sometimes if there are a number of grouped open paths the shape can start to become complex, and this can cause a warning message in the dialog box. This can sometimes happen when paths cross, but I have not found that it causes any issues, as it is just a warning. Refer to Figure 13-108.

Another warning you may encounter with Map Art symbols that have gradients is that those gradients will be rasterized.

Extrude & Bevel (Classic)

The last 3D (Classic) option lets you set the 3D Extrude and Bevel (Classic). Like Revolve (Classic) it is best to work with solid-color fills and strokes as patterns and gradients can cause issues with rendering. Refer to Figure 13-109.

This effect works best on closed shapes such as rectangles and type. The shape can have a fill and stroke. In this case I selected a rectangle with no stroke and chose Effect ➤ 3D and Materials ➤ 3D (Classic) ➤ Extrude & Bevel (Classic). Refer to Figure 13-110.

When you enable the More Options settings, you will find most of the same settings overall as for the Revolve (Classic) effect. Refer to Figure 13-111 and Figure 13-112.

In this case, I will just point out the main differences in the dialog box, and you can refer to the 3D Revolve (Classic) section for more information on Position, Surface, and Lighting options. Refer to Figure 13-113.

In this case, look at the Extrude & Bevel section. Refer to Figure 13-114.

Currently, the Extrude Depth is set to 50 pt (the range is from 0 pt to 2000 pt). Increasing the depth makes the extrusion longer. Refer to Figure 13-115.

The extrusion can also be affected by the Perspective setting. I changed that setting to 122° and then set it back to 0°. Refer to Figure 13-116.

Cap can be either closed or open. Turn cap on for solid appearance and turn cap off for hollow appearance. Refer to Figure 13-117.

You can then set the bevel from None to one of ten other options. In this case try Jaggy. It makes an accordion-like shape. Refer to Figure 13-118.

You can then adjust the Height (1–100 pt) and set the bevel extent to either Bevel Extent Out (bevel is added to original object) or Bevel Extent In (bevel is subtracted from original object). This expands or contracts the bevel on both ends. Refer to Figure 13-119.

As mentiond, the same surface options are available as for Revolve (Classic). You can alter the shading color and set to Custom. Refer to Figure 13-121.

Map Art

As with Revolve (Classic), you can add Map Art. Refer to Figure 13-122.

The process is the same. Just make sure that you find the surface that you are looking for before you apply the symbol. Then scale and move the symbol into place. Refer to Figure 13-123.

Click OK to exit the Map Art dialog box, and OK again to exit the 3D Extrude & Bevel Options (Classic) dialog box. Refer to Figure 13-123 and Figure 13-124.

As with the other effects, this effect appears in the Appearance panel, and you can click on the name to edit from here. The effect can be added to the Graphic Styles panel with the Map Art included as well. Refer to Figure 13-125.

You can alter the color of the fill or the stroke of the rectangle, when selected, using the Control panel. But this may alter the shadow color as well. In this case I only altered the fill, as adding a stroke can add additional surfaces when working with Map Art. Refer to Figure 13-126.

Use the Selection tool if you want to scale or move the extrusion.

Here is how bevel and extrude can affect text with some Map Art applied to one of the letters. Refer to Figure 13-127.

This is a good alternative if you need to copy 3D text into Photoshop as a Smart Object layer.

Save your work and refer to my file 3D_Classic.ai if you want to look at these examples.

To view some more complex examples you can check out https://helpx.adobe.com/illustrator/using/creating-3d-objects.html.

Project: Coffee Cup Example

Open coffee_cup_3D.ai.

In this example, I will show you some of the same examples of a coffee cup, which this time I created using the Window ➤ 3D and Materials panel. Refer to Figure 13-129.

Rotate

In the first example, we can see that I used Effects ➤ 3D and Materials ➤ Rotate. You can apply this effect when you select your object with the Selection tool. Refer to Figure 13-131.

3D and Materials Object Tab

In the 3D and Materials panel, this will come up as 3D Type: Plane, or a flattened object on a single plane, under the Object tab. Refer to Figure 13-132.

Rather than using a cube to do your rotating, you can now rotate directly on the shape, or use the sliders in the Rotation section in the 3D and Materials panel. It has the same presets for Rotation, based on direction axis and isometrics. And now the X (vertical), Y (horizontal), and Z (circular) axes range (-180°,0°,180°) sliders are clearly labeled, and you can change the Perspective slider (0°–160°). Refer to Figure 13-133.

In the current preset of Off-Axis Front, to rotate on the shape itself, select and drag upward and downward on the horizontal line if you want to rotate around the X-axis. Doing so will create a custom rotation preset. Refer to Figure 13-134.

Drag left and right on the vertical line to rotate around the Y-axis. Refer to Figure 13-135.

Drag on the circle and move in a clockwise or counterclockwise motion if you want to rotate around the Z-axis. Refer to Figure 13-136.

The dot in the center is Rotate Freeform. Drag on this dot in any direction to get a different random rotation. Refer to Figure 13-137.

Note

To undo any of the steps you can choose Edit ➤ Undo or Ctrl/CMD+Z, or use the History panel.

While in the Object tab for Plane, you will notice that the cap and bevel options are not available. You do, however, have the option to expand as a wireframe in the Quick Actions area. This creates a type of grouped-path outline of the object. Edit ➤ Undo that last step.

However, at any point in time you could switch to another 3D type, and these options would become active. We will look at that shortly; however, for now remain on the 3D type of Plane. Refer to Figure 13-138.

Additionally, you can now use the Quick Actions to Export your 3D object to the Asset Export Panel. See the end of this 3D and Materials section for a link on this topic.

Besides setting the Object settings, you also have access to three other tabs: Materials, Lighting, and Render.

Materials Tab

This lets you set the type of materials that you will fill or cover the object with. If, in the past, you used 3D features in Photoshop, this area will be familiar to you as many of the materials will look similar. Refer to Figure 13-139.

Under the Materials section, with the Materials tab active, you can review all the materials that are available. These include the default base material, which is like plastic shading. And if you scroll down a bit in the menu, you will see over 40 different Adobe Substance Materials. A material is applied to the entire 3D surface. Refer to Figure 13-140.

Tip

If you need to expand this area to see more materials, then drag on lower edge of the panel to enlarge it. Refer to Figure 13-141.

While looking at the Adobe Substance Materials, you have the option to find more materials on Substance 3D Assets or find more materials on Substance 3D Substance Community assets from Adobe. You can also add your own materials. These materials come in the (.Sbsar) format if you have them downloaded on your computer. Refer to Figure 13-142.

Add Single and Multiple Graphics Symbols

To add single or multiple graphics, you need to switch to the Graphics tab under the Materials tab. This is the same as using Map Art, which we saw earlier with the 3D (Classic) options. Here, all your graphic symbols are available to add to your art when you click on the symbol in the panel. However these options under the plus icon allow you to add a selected object on your Artboard as a single graphic to the Symbols panel, or add as separate multiple graphics, if more than one graphic is selected. Refer to Figure 13-143.

You can the click on the Delete button if you want to remove a graphic, and it will be removed from the Symbols panel as well. In this case, do not delete any graphics you did not create. Refer to Figure 13-144.

In the Materials tab with the Materials button reselected, once you have a collection of materials from the Substance Collection, you can select that material in the panel and change it from the default to a different material. Some will appear more realistic than others depending on the shape you use. Refer to Figure 13-145.

Once a material is selected, it will appear in the panel’s Properties section. Depending on the substance material that you chose, you will have different options, known as Main Parameters and Additional Parameters, below the Properties section, that you can further edit. These could include resolution, repeat of pattern, as well as colors, texture, staining, position, and additional technical lighting effects like ambient lighting. Refer to Figure 13-146.

Some main parameters are complex, and other materials may only have a few options, so you need to spend time and look at each one after you select your substance material.

In this case, I just returned to my Base Default Property for now, so that I could see my current design on my coffee cup. It has two Base Properties: Roughness (0–1) for texture and Metallic (0–1) to set a shinier appearance. Refer to Figure 13-147.

Additionally, when you switch to the Graphics tab you can click on a symbol to add it to your Properties area and then further manage its main parameters. This includes setting Invisible Geometry, and Scaling and Rotation. You also have an additional option to replace the selected symbol when you click on a new symbol’s More Options ellipse and click Replace to switch to the new symbol. Refer to Figure 13-148.

You can, move, scale, and rotate the graphic on the object. Or Use the Main Parameter sliders to adjust scale (25-400%) and rotation (0-360°). You can also apply multiple graphics on top of a material. They can be dragged above and below each other in the Properties area to reorder them. Refer to Figure 13-149 and Figure 13-150.

We will look at the Properties area again when we look at the other 3D settings, but for now you can select the graphic in the Properties section and remove it, and the symbol will be removed from the object. Use Edit ➤ Undo to undo that last step. Refer to Figure 13-150.

Lighting Tab

The next tab is Lighting, which has a few more options than what was in the Classic panel. Refer to Figure 13-151.

In this case you have some lighting presets: Standard, Diffuse, Top Left, and Right. Refer to Figure 13-152.

Selecting a preset changes some of the settings in the lower sliders below the lighting color. A new color can be chosen with the color picker. Refer to Figure 13-153.

Other Lighting settings include the following:

Intensity (0%–200%): Brightness of light

Rotation (-180°,0°,180°): Rotates the focus of light around object

Height (0°–90°): Brings or moves light closer or farther away from object

Softness (0%–100%): Determines how the light spreads and creates a fuzzy effect that can override the Diffuse preset. This is more apparent after the object is rendered.

Ambient Light: Currently enabled and controls the global setting of the Intensity of the ambient light (0%–200%). Refer to Figure 13-153.

Many of these settings are more apparent when a Shadows toggle is enabled for the shadow. Refer to Figure 13-154.

This kind of shadow is a new feature, and you do not have to use a separate drop-shadow effect to create this shadow.

Settings for the shadow include Position, where you choose a ground position of either Behind Object or Below Object. Refer to Figure 13-155.

If you choose Below Object, you will have to adjust the distance of the shadow from the object (0%–100%) and the Shadow Bounds (10%–400%) so that the shadow does not appear chopped off or too far away from the object. Refer to Figure 13-156.

In this case, I changed the rotation of the lighting a bit to about 30° so that the shadow position would be below the object, but behind the object as well. Refer to Figure 13-157.

Note

It does not currently appear at this time that you can set more than one light source unless the Material Substance itself has a light source within its technical parameters. You can check in the Materials tab if it is present.

The Render Tab

If you choose later to render a real-time preview, you can use this tab to choose Ray Tracing options. With the Ray Tracing toggle active, you can set the quality to Low, Medium, or High, and choose Raster settings. See Chapter 11 about the Document Raster Effects Settings dialog box, found in the Effects menu.

Reduce Noise: Enabled to reduce the grainy appearance that may come from rendering

Alternatively, with or without the Ray Tracing toggle active, in Real-Time Preview mode you can render as a vector the object and the map artwork, which results in a resolution-independent image. Note that Render as Vector is not supported for materials and graphics with gradients or raster contents. Refer to Figure 13-158.

The setting Remember and apply to all applies these render settings to all existing and future 3D and Materials effects.

If you want to render a graphic, then click the Render button or the square icon. It will take few seconds to process depending on the Quality setting that was used. It will then be a grouped object or path that has the setting applied. You can use Edit ➤ Undo if you need to undo that step and return it to its original state.

In this case, we will disable Ray Tracing and remain in Real-time Preview mode for the rest of the chapter. Refer to Figure 13-159.

Note

The effect will appear in the Appearance panel, and this effect, like the others, can be added to the Graphic Styles panel. Refer to Figure 13-160.

Materials

This setting, when chosen from the Effect menu, will appear as a Plane type in the 3D and Materials panel with a Preset rotation of front. Refer to Figure 13-161.

However, afterwards as with the earlier mentioned Rotate effect, you can then set the Rotation presets for X, Y, Z, as well as the Perspective Angle, using the panel. As with the Rotation options, you can also utilize the other tabs that contain Materials, Graphics, and Lighting and Shadow to alter the graphic as well as render it. Otherwise, there are no real differences between this setting and Rotate for a Plane. Refer to Figure 13-161.

Revolve

Revolve has many of the same settings as the 3D (Classic) Revolve effect, and much of what you have learned about the Rotate effect and the 3D and Materials panel so far can be applied to this effect as well. Refer to Figure 13-162.

In this case, select an open path with the Selection tool. Go to Effects ➤ 3D and Materials ➤ Revolve and look at the 3D and Materials panel. The path then sweeps or revolves around a point in a circular direction. Refer to Figure 13-163.

In the panel you can see that many of the panel options are the same, so refer to the Rotate section for more details. I will just point out the main differences.

The 3D type in the panel is now set to Revolve. Refer to Figure 13-164.

You now have access to the Revolve angle, which determines how much of a revolution occurs, or if it is segmented and stops at a certain point. By default, it set to 360° for a full rotation, but you can set it from 0° to 360°. Refer to Figure 13-165.

Offset, as we saw in the Classic version, can spread out the revolve. This can make the cup appear more bowl-like. By default, the Offset is set to 0 in, but you can move the slider to the right to increase it. Above the Offset slider are two new sliders called Twist (0-360°) and Taper (1-100%). These can be use to warp an object in unusual ways. In this case I will leave them at the default of Twist 0° and Taper 100%. Refer to Figure 13-166.

The Offset Direction From option can be set to either Right Edge or Left Edge. I set it to Right Edge to create a cup rather than have it appear like a tent. Refer to Figure 13-167.

The Cap option has two possibilities: “Turn cap on for solid appearance” and “Turn cap off for hollow appearance.” I leave the cap on by default; however, on some objects it may be more apparent when the cap off setting is chosen. Refer to Figure 13-168.

Rotation settings for Revolve, as mentioned, are the same presets and options as those for Rotate (Plane), and you can adjust your X, Y, and Z axes either from the panel or on the preview. You can also set the Perspective angle. Refer to Figure 13-170.

Materials Tab

In the Materials tab, for Revolve, like Rotate, you have access to the Materials, Graphic Symbols, and Properties panels. Refer to Figure 13-171 and Figure 13-172.

What I like about these new options for Revolve, when working with symbols, is that you can drag the symbol over one face and not have to worry about whether there are multiple Map Art Surfaces to set the graphic symbol to—just drag the symbol to where you think it should be. Even if I add or remove a stroke afterward using my Control panel, the symbol only flows over the material. We will see an example of that later, at the end of the chapter, with a complex 3D effect that requires multiple symbols. Refer to Figure 13-173.

Lighting Tab

In the Lighting area, as with Rotate (Plane), you can set the same settings. I like that with these new features you can also set a shadow. Refer to Figure 13-174.

For details on render setting, see the Rotate section. Refer to Figure 13-175.

Note

Like rotate, this effect can be viewed and edited in the Appearance panel and added to the Graphic Styles panel. Refer to Figure 13-176.

Extrude & Bevel

Extrude & Bevel has many of the same settings as the 3D (Classic) effect Extrude & Bevel, and much of what you have learned about the Rotate effect and the 3D and Materials panel so far can be applied to this effect as well. You can refer to those sections for more information. Refer to Figure 13-177.

In this case, select a closed path with the Selection tool; it could be a shape or even some type. Go to Effects ➤ 3D and Materials ➤ Extrude & Bevel and look at the 3D and Materials panel. This extrudes the object at a certain depth. Refer to Figure 13-178.

In this case, the 3D Type option will now be set to Extrude. You can set the depth of the extrusion as well as the Twist and Taper sliders. Refer to Figure 13-178 and Figure 13-179.

The Cap section has two options: “Turn cap on for solid appearance” and “Turn cap off for hollow appearance.” I leave the cap on by default; however, a setting of off on some objects may be more apparent when the cap-off setting is chosen as in the example below where the rectangle on the right appears hollow. Refer to Figure 13-180.

The next section in the Object tab in the panel is Bevel. Enable the toggle to make Bevel active. Refer to Figure 13-181.

Bevel now has several new updated options that affect the cap but not the extrusion depth like the Classic Extrude & Bevel effect does. First, you can choose a bevel shape from seven options. I chose Classic from the list. Refer to Figure 13-182.

In this example, the option has been applied to one end of the object’s depth. You can then make further adjustments to the bevel.

Width (0%–100%): By default, it is 50%. Refer to Figure 13-183.

Height (0%–100%): By default, it is set to 50%. Refer to Figure 13-184.

Repeat (1–10): Creates a type of stair-step pattern. By default, it is set to 1. Refer to Figure 13-185.

Space (0%–100%): Is active when Repeat is set higher than 1. It sets the spacing of the repeat. By default, it is set to 30%, so make sure to set this before you set the repeat back to 1, or you might not see the bevel. Refer to Figure 13-186.

The next setting is Bevel Inside, which makes the bevel go inward rather than outward on the end. Refer to Figure 13-187.

The next setting is Bevel both sides. It ensures that when you rotate the object, you can see the bevel on both sides. This is good, as one side might end up looking flat. Refer to Figure 13-118.

You can click the Reset button if you need to set the bevel setting back to the original state.

In the past, I had difficulty creating pyramid shapes with the Classic setting. However, with the improved settings I can now choose whether to have one side beveled or not and adjust the depth and width, and this is much better. Refer to Figure 13-189.

As with Rotate, you can set the Rotation settings presets for the X, Y, and Z axes as well as the Perspective option, which is by default 0°. Refer to Figure 13-190.

Materials Tab

In the Materials tab, like Rotate (Plane), you have access to the materials and graphic symbols, and their properties. You can refer to that section and the Revolve section as well for more details. I will point out that, like Revolve, you do not have to hunt through Map Art Surfaces to add symbols as you do with Classic Bevel and Emboss. Just drag the symbol over the shape to the location you want it to be. Also, if you add or remove a stroke you do not have to worry that the symbol will disappear or be covered, as it rests on top of the material. Refer to Figure 13-191.

Lighting Tab

In the Lighting area, you can set the same settings as with Rotate (Plane). I prefer these new features compared to Classic, as you can also set a shadow. Refer to Figure 13-192.

For details on Render settings, see the Rotate section. Refer to Figure 13-193.

Note

Like Rotate, this effect can be viewed and edited in the Appearance panel and added to the Graphic Styles panel. Refer to Figure 13-194.

Here is how type appears when Extrude and Bevel is chosen. Refer to Figure 13-195.

Inflate

Inflate is a new option added to the 3D options, which is not found in the Classic settings. However, it shares many of the new features of the Rotate effect and the 3D and Materials panel, and those settings can be applied to this effect as well. You can refer to those sections for more information. Refer to Figure 13-196.

In this case, select a closed path with the Selection tool; it could be a shape or even some type. Go to Effects ➤ 3D and Materials ➤ Inflate and look at the 3D and Materials panel.

Much of what you have learned about the Rotate and Revolve effects and the panel can be applied to this effect as well, so I will just point out the main differences. Refer to Figure 13-197.

The 3D Type is now set to the Inflate setting, and the shape that is created is very much like a balloon. Refer to Figure 13-197.

In the Object tab, you can set the depth, which will extrude the object, and Volume (0%–100%) will cause the object to expand more on the end. Currently, volume is set to 100%. You can also adjust the Twist and Taper as well. Refer to Figure 13-198.

Inflate Both Sides: While the checkbox is disable only one side is inflated. When this checkbox is enabled, you can see that both sides are inflated when the object is rotated. Refer to Figure 13-199.

Cap: Has two options: “Turn cap on for solid appearance” and “Turn cap off for hollow appearance.” I leave the cap on by default; however, on some objects as seen in the following example with the cap turn off it is apparent that the shape is hollow while on more complex examples this might not be as obvious. Refer to Figure 13-200.

Inflate has no bevel options, but you can set the Rotation presets for the X, Y, and Z axes as well as Perspective, which is by default set to 0°. Refer to Figure 13-201.

Like Rotate, this effect can be viewed and edited in the Appearance panel and added to the Graphic Styles panel. Refer to Figure 13-203.

Here is how type appears when Inflate is chosen. Refer to Figure 13-204.

You could then store these objects as symbols in Illustrator in the panel, or with the object selected you could copy it (Ctrl/CMD+C) and paste it (Ctrl/CMD+V) into Photoshop as a Smart Object layer. Click OK and make sure to click the check to commit in the Options panel. Refer to Figure 13-205.

In Illustrator, I found using a combination of two of the new 3D effects (Revolve and Inflate with a shadow) on separate paths allowed me to create a coffee cup with a plate, and you can see this example in my file coffee_cup_3D.ai. Refer to Figure 13-206.

To complete this design, I also added a circular ellipse with a gradient to cover the top of the cup and make it appear that there was liquid in the cup, with no effects applied. Refer to Figure 13-206.

For information on acquiring more materials from the Substance Collection you can visit https://helpx.adobe.com/illustrator/using/create-3d-graphics.html?trackingid=YB1TGLWS&mv=in-product&mv2=ai.