McInnes K. Rockstar Icon Designer
Подождите немного. Документ загружается.
Perspective101
Step 9 – Refining the Guides
Extend the vertical grid lines from the front face of the box to the
vanishing point, this will make vertical grid lines for the top of the
box. You will notice that the further towards the vanishing point
they get the closer together the guides are. If your guides are
intersecting before the edge of the box, reduce the number of
guides you are using.
Adding guides.
Use the vanishing point to create guides on the top of the box.
Perspective102
Step 10 – Marking out the Grid
Mark out the horizontal lines by drawing a diagonal line across the
top of the box. Where the diagonal line intersects a vertical grid
line, draw a horizontal grid line. If you're adding details to the sides
of the box, repeat the same steps to make a grid on the side. You
should end up with a box covered in a grid. This will help us place
the elements.
Step 11 – Adding the Elements
Use the grid to judge the areas you would like to add detail to.
Go back to your planning sketches to look at the details you want
to add. Mark out a box on the grid for the approximate area you
would like to add a detail to and add it in. Once you’ve nished,
erase all of the lines you don’t need and you will be left with three
boxes with different views. This is how one-point perspective is
drawn.
Add more guides to the top and sides.
Perspective103
Two-Point Perspective
Two-point perspective is similar to one-point perspective and can
be used to draw objects that you want to show two sides of. Think
of the corner of a building, you will see the corner as the closest
part of the building with the left and right sides tapering off into the
distance. This is two-point perspective. Two-point perspective is
best applied to application icons as it lends itself well to complex
objects. Two-point perspective shouldn’t be used for icons that
need to convey information such as alert icons or Toolbar icons as
the double sided view is somewhat distracting.
Once you get the hang of drawing in two-point perspective it can
be quite enjoyable and will add a realistic yet somewhat unusual
angle to objects that you draw. Once again, I will show you how to
draw in this style of perspective so you can further appreciate the
complexities of drawing three dimensional objects.
The boxes after adding details and removing the guides.
Perspective104
How to Draw Two-Point Perspective
You Will Need:
• Paper
• A Grey Lead Pencil
• An Eraser
• A Ruler
The Shine set by IconEden is an example of two-point design.
Perspective105
• -OR- A suitable drawing application. Vector programs such
as Adobe Illustrator won’t work for this exercise as the
node points have a tendency to join up while drawing and
will cause errors with your perspective. If you must to use
software to follow along with this tutorial, only use the Brush
and Pencil tools, shapes and pens will have an unexpected
effect on the nal image.
Step 1 – Plan the Image
Once again, plan the sides of the image that you want to draw.
Remember that with this style of perspective, the focal point in the
design is often the top of the image.
Step 2 – Draw the Guidelines
Take your paper and pencil and draw a horizon line about a third of
the way down the page. Once you have drawn a horizon line, chose
two points along the line, one either side of the page. This will be
your two vanishing points.
Plan the image that you want to create and mark out the approximate
location for the details on each side.
Draw a horizon line and mark out two vanishing points.
Perspective106
Step 3 – Draw the Front Edge
Using your ruler to make a straight line, draw the front corner
edge of the cube away from the horizon line. Then draw diagonal
lines from the top and bottom of the corner line, two on each side,
towards the two vanishing points. These are the sides of your
cube.
Step 4 – Draw the Side Edges
Draw two straight lines, one on either side of the front edge,
beginning and ending at the top and bottom lines of the guides.
These will make the outer edges of the cube.
Draw a vertical line and join it to each vanishing point.
Add the outer edges of the cube.
Perspective107
Step 5 – Draw the Top Vanishing Lines
Draw a guide from the top of each outer edge towards the co-
responding vanishing point. If you want to make a wire-frame
version of this shape, repeat the same step with the bottom of the
outer edges. Once you have your guides, draw the two back lines
joining tthem at the intersection of the guide lines.
Step 6 – Marking out the Middle Points
Mark out the middle points of each side by taking a diagonal line
from each outer corner to make a cross. The intersection of the
lines marks where the center point of the side is. Draw a vertical
line through the middle of the cross. This line will divide the box
side into two parts, draw vertical guides through the middle of
these parts and continue dividing the sections in half until you've
made enough guides for the artwork. Where the diagonal line
intersects a vertical grid line, draw a horizontal grid line towards
the vanishing point. do this on the left and right side of the box. To
mark a grid on the top of the box, draw lines from the top of the
side grids towards the vanishing points.
Draw guides from the top of the vertical side lines to the vanishing points.
Perspective108
Step 7 – Adding the Elements
Use the grid to judge the areas you would like to add detail to. Go
back to your planning sketches to look at the details you want to
add. Mark out an area on the grid with the approximate shape you
would like to add a detail to and add it in. Once you’ve nished,
erase all of the lines you don’t need and you will be left with a box
with two-point perspective.
Find the middle of each side and draw guides towards the vanishing
points.
Use the guides to mark out the details for the box. Once you have finished
erase the guides and you're finished.
Perspective109
Planometric Projection
Planometric Projection (sometimes referred to as Axonometric
Projection) is a style of perspective that’s commonly used by
graphic designers to draw the space within a room, but due to the
clean 45 degree angle it has, the planometric style is particularly
useful for icon design. First adopted for icons that appeared on
older style monitors, the 45 degree line is rendered perfectly by
using one pixel aligned diagonally from corner to corner.
Tips to Draw Planometric Projection in Adobe
Photoshop
Let’s start to make a few basic shapes using the computer. I’ll
be working in Adobe Photoshop to make some retro looking
blocks using the Pencil tool. This quick exercise will start you
thinking about layers, pixel lines and blending modes, which are
fundamental to icon design. This tutorial is a good introduction to
the Pencil tool and Layer Panel.
45˚45˚
The angle used in planometric projection.
Perspective110
You Will Need:
• A suitable drawing application. This tutorial uses Adobe
Photoshop, but any pixel based graphics program is ne to
use.
Prepare the Document
Create a 48px by 48px RGB document without a background color
and zoom right into the canvas space. Create a new layer above
the Background layer and select the Pencil tool (B), go to the
settings and set the Pencil to 1px with 100% hardness.
Mark Out Some Guides
Because we’re making a 48px icon, there’s no actual middle pixel,
instead the pixel line runs down the middle, so the rst thing we
have to do is set the drawing area for the icon. I like to leave a
small gap around the outside of the web icons I make, so that
when they’re positioned next to one another there’s always going
to be a margin. So on the new layer take the Pencil tool and draw a
square leaving 1px at the top and the left of the canvas and 2px to
the right and the bottom.
You can invert this to have the 2px on the other side. I position it
this way as a habit from the many years I have spent making icons
for Microsoft Windows, where a slight drop shadow is applied to
the design on the right and bottom of the canvas.