Before and After 706 - How To Align By Eye.pdf

Before&After 

BAmagazine.com

®

i U X

How to

Align by eye The world is full of funny shapes that your eye can align better than your ruler. Here are six examples. Continued   

Continued   

How to align by eye   0706

Before&After 

BAmagazine.com

®

i U X

How to align by eye The world is full of funny-shaped images that your eye can align better than your ruler. Here are six things to look for.

The images above — chair, plant, utensils, pillows, vase ­— are each a different shape, size, color; the viewing angles are different, and so on. How do you line these up, sized and spaced just so, with other things? We’ll show you why your eye is the best tool you have.

    2 of 11   

How to align by eye   0706

Before&After  ®

BAmagazine.com

3 of 11

How to align by eye

i U X

Scale and align by mass

For different objects to have similar visual height, scale them by their central mass, not their bounding-box height. Squinting will help you visualize.

Before

After

2

“Kitty whiskers”

Stickout

“Kitty whiskers”

1

Bounding box

0

Shadow Corner That troublesome bounding box The images above are technically the same height. That’s because a digital image is contained inside an invisible bounding box that extends to the farthest pixel on every side. That pixel can be an ultra-faint shadow, a hair, a little bump, even blank space. Your ruler measures the bounding box, which is why it’s terrible at graphic design. What matters is the image inside, specifically its center of mass.

Shadow

Corner

Scale by mass  Every image has a center of mass, its fullest, bulkiest area, that governs its perceived size. Use this mass instead of the bounding box to scale your images, which (above) now appear similar in size. (Right) Mass is easiest to see on rectangular objects. For irregular objects like the plant, squint and ignore small corners, faint shadows, minor stickouts, and “kitty whiskers.”

    3 of 11   

Mass

Mass

How to align by eye   0706

Before&After  ®

How to align by eye

BAmagazine.com

4 of 11

i U X

Center by weight

An asymmetrical object is naturally off balance. Centering it over a body of text or other object requires a nudge right or left.

Before

After

Decorative Pillows

Decorative Pillows

We offer a wide range of colors, textures, and sizes to add comfort and style to your lounge or sleeping area.

We offer a wide range of colors, textures, and sizes to add comfort and style to your lounge or sleeping area.

Centered by ruler  With both bounding boxes (image and text) center-aligned, the image’s asymmetrical shape makes it heavier on the left (below).

Centered by eye  Pushing the center of mass to the right balances the image, like balancing a heavy and light load on the teeter-totter. It helps to squint.

Decorative Pillows We offer a wide range of colors, textures, and sizes to add comfort and style to your lounge or sleeping area.

    4 of 11   

How to align by eye   0706

Before&After  ®

How to align by eye

BAmagazine.com

5 of 11

i U X

Center by value

A dark object on a light background appears heavier than a light one, which, like mass, throws off the balance. Compensate with a nudge.

After

Tomato Recipes

Tomato Recipes

Rice Recipes

Are you looking for that tempting appetizer, flavorful main dish, or that unusual dessert? We have the tomato recipe for you!

Whether it’s Spanish rice, chicken fried rice, or rice pilaf, we’ll show you hundreds of ideas to complement hearty main courses.

Asymmetrical value There’s more mass on the right (big white bowls) but more visual weight on the left. Compensate with a slight nudge to the right.

Symmetrical shape overrides value  Like the tomatos and bowls, the image above is also left-heavy. In this case, though, symmetry overrides value; identical objects feel correct only when centered.

Are you looking for that tempting appetizer, flavorful main dish, or that unusual dessert? We have the tomato recipe for you!

    5 of 11   

How to align by eye   0706

Before&After  ®

BAmagazine.com

6 of 11

How to align by eye

i U X

“Kern” the space between objects

In typography, kerning means the adjustment of space between individual characters, a technique that applies to graphics, too . . .

Outdoor Furniture

Kitchen Utensils

Vases

Decorative Pillows

Take your comfort and style outside with our quality furniture, comfy cushions, and more!

Cook better and faster with our selection of utensils and gadgets, designed to simplify daily tasks.

Explore our vast vase collection! From ceramic to bamboo style, from India to Spain, we have it all.

We offer a wide range of colors, textures, and sizes to add comfort and style to your lounge and sleeping area.

Before: Spaced by ruler (A) The bounding boxes have identical space between them, but remove the frames (B), and you can see that the perceived spaces between the images are different. After: Kern the images  (C) Nudge by eye until the white space between images appears the same or nearly so (D).

A

B

C

D

    6 of 11   

How to align by eye   0706

Before&After  ®

How to align by eye

BAmagazine.com

7 of 11

i U X

Adjust the space between lines

Images of different heights may require vertical adjustment. As with typographic kerning, you might think of this as graphical leading (pronounced: ledding).

What your eyes see . . . Uneven vertical spacing

Move the center shelf up . . . Perceptually even vertical spacing

0

1

2

3

What the ruler says . . . Equal shelf heights

    7 of 11   

How to align by eye   0706

Before&After  ®

How to align by eye

8 of 11

BAmagazine.com

i U X

Distribute by value

If order is not a priority, balance your page by distributing images by value.

Darks first . . .

. . . then lights

Make note of the dark objects (squinting helps) and distribute so neither side of the page is heavier than the other, then fill the gaps with the lighter objects.

    8 of 11   

How to align by eye   0706

Before&After  ®

How to align by eye

BAmagazine.com

9 of 11

i U X

Article resources

Typefaces 1 Georgia Regular

Colors 9 C0 M0 Y0 K100 10 C0 M0 Y0 K60

2 9 10

Images: iStockphoto 2 (6352857) 3 (12919738) 4 (6306475) 5 (11842001)

Outdoor Furniture Take your comfort and style outside with our quality furniture, comfy cushions, and more!

Images

6 (16799169) 1

7 (11361940) 8 (15494393)

4

3

5 7

6

8

    9 of 11   

How to align by eye   0706

Before&After  ®

How to align by eye

BAmagazine.com

10 of 11

i U X

Article resources

Typefaces 1 Linotype Didot Roman

Colors 13 C0 M0 Y0 K100

2 Adobe Caslon Regular

Images 13

3 (iStockphoto.com) Images: iStockphoto 4 (16661602)

1 2

5 (4075677) 6 (18498827) 7 (15504871) 8 (3397523) 9 (6674530)

7 3

4

8

10 (15734716) 11 (3850760) 12 (11197038)

9 5

10 11

6

12

    10 of 11   

How to align by eye   0706

Before&After  ®

How to align by eye

11 of 11

Subscribe to Before & After Subscribe to Before & After, and become a more capable, confident designer for pennies per article. To learn more, go to http://www.bamagazine.com/Subscribe E-mail this article To pass along a free copy of this article to others, click here. Join our e-list To be notified by e-mail of new articles as they become available, go to http://www.bamagazine.com/email

BAmagazine.com

i U X

Before & After magazine Before & After has been sharing its practical approach to graphic design since 1990. Because our modern world has made designers of us all (ready or not), Before & After is dedicated to making graphic design understandable, useful and even fun for everyone. John McWade Publisher and creative director Gaye McWade Associate publisher Dexter Mark Abellera Senior designer Before & After magazine 323 Lincoln Street, Roseville, CA 95678 Telephone 916-784-3880 Fax 916-784-3995 E-mail [email protected] www http://www.bamagazine.com Copyright ©2013 Before & After magazine ISSN 1049-0035. All rights reserved You may pass along a free copy of this article to others by clicking here. You may not alter this article, and you may not charge for it. You may quote brief sections for review; please credit Before & After magazine, and let us know. To link Before & After magazine to your Web site, use this URL: http://www.bamagazine.com. For all other permissions, please contact us.

    11 of 11   |     Printing formats   

How to align by eye   0706

Before&After 

BAmagazine.com

®

i U X

Before & After is made to fit your binder Before & After articles are intended for permanent reference. All are titled and numbered. For the current table of contents, click here. To save time and paper, a paper-saver format of this article, suitable for one- or two-sided printing, is provided on the following pages.

For presentation format Print: (Specify pages 1–11)

For paper-saver format Print: (Specify pages 14–19)

Print Format: Landscape Page Size: Fit to Page

Save Presentation format or Paper-saver format

    Back   |     Master Collection   

Before&After 

BAmagazine.com

®

i U X

Master Collection Before & After issues 1–50, complete and unabridged, in convenient, searchable PDF. Over 1,000 pages and 10,000 graphics that deconstruct and reveal, step by step, the art behind the art of design!

Learn more!

    Printing formats   |     Paper-saver format   

®

Before&After

How to

1  of 6

Before&After | www.bamagazine.com

BAmagazine.com

i U X

i U X

Continued 

How to align by eye

BAmagazine.com

Continued 

 2 of 11 

0706

0706

How to align by eye  0706

How to align by eye

The images above — chair, plant, utensils, pillows, vase — are each a different shape, size, color; the viewing angles are different, and so on. How do you line these up, sized and spaced just so, with other things? We’ll show you why your eye is the best tool you have.

The world is full of funny-shaped images that your eye can align better than your ruler. Here are six things to look for.

How to align by eye

The world is full of funny shapes that your eye can align better than your ruler. Here are six examples.

Align by eye ®

Before&After

0706  How to align by eye

2 1

®

Before&After

Before

®

How to align by eye

3 of 11

Scale and align by mass

Bounding box

After Stickout

Corner

i U X

Mass

Mass

How to align by eye

i U X

“Kitty whiskers”

BAmagazine.com

 3 of 11 

Scale by mass Every image has a center of mass, its fullest, bulkiest area, that governs its perceived size. Use this mass instead of the bounding box to scale your images, which (above) now appear similar in size. (Right) Mass is easiest to see on rectangular objects. For irregular objects like the plant, squint and ignore small corners, BAmagazine.com faint shadows, minor stickouts, and “kitty whiskers.”

Shadow

For different objects to have similar visual height, scale them by their central mass, not their bounding-box height. Squinting will help you visualize.

“Kitty whiskers”

Shadow Corner That troublesome bounding box The images above are technically the same height. That’s because a digital image is contained inside an invisible bounding box that extends to the farthest pixel on every side. That pixel can be an ultra-faint shadow, a hair, a little bump, even blank space. Your ruler measures the bounding box, which is why it’s terrible at graphic design. What

Before&After Howinside, to align bycally eyeits center 4 of 11 matters is the image specifi of mass.

Center by weight

 4 of 11 

0706

0706 How to align by eye  0706

How to align by eye

We offer a wide range of colors, textures, and sizes to add comfort and style to your lounge or sleeping area.

Decorative Pillows

After

An asymmetrical object is naturally off balance. Centering it over a body of text or other object requires a nudge right or left.

Decorative Pillows

Before

Decorative Pillows

We offer a wide range of colors, textures, and sizes to add comfort and style to your lounge or sleeping area.

2  of 6

Before&After | www.bamagazine.com

Centered by eye Pushing the center of mass to the right balances the image, like balancing a heavy and light load on the teeter-totter. It helps to squint.

We offer a wide range of colors, textures, and sizes to add comfort and style to your lounge or sleeping area.

Centered by ruler With both bounding boxes (image and text) center-aligned, the image’s asymmetrical shape makes it heavier on the left (below).

0706  How to align by eye

0

®

Before&After

After

How to align by eye

Center by value

5 of 11

BAmagazine.com

Rice Recipes

i U X

Tomato Recipes

BAmagazine.com

i U X 0706

Symmetrical shape overrides value Like the tomatos and bowls, the image above is also left-heavy. In this case, though, symmetry overrides value; identical objects feel correct only when centered.

Whether it’s Spanish rice, chicken fried rice, or rice pilaf, we’ll show you hundreds of ideas to complement hearty main courses.

Asymmetrical value There’s more mass on the right (big white bowls) but more visual weight on the left. Compensate with a slight nudge to the right.

Are you looking for that tempting appetizer, flavorful main dish, or that unusual dessert? We have the tomato recipe for you!

A dark object on a light background appears heavier than a light one, which, like mass, throws off the balance. Compensate with a nudge.

Tomato Recipes

6 of 11

Are you looking for that tempting appetizer, flavorful main dish, or that unusual dessert? We have the tomato recipe for you! How to align by eye

How to align by eye

Decorative Pillows

®

 5 of 11 

Vases

Before&After

“Kern” the space between objects

Kitchen Utensils

We offer a wide range of colors, textures, and sizes to add comfort and style to your lounge and sleeping area.

In typography, kerning means the adjustment of space between individual characters, a technique that applies to graphics, too . . .

Outdoor Furniture

Explore our vast vase collection! From ceramic to bamboo style, from India to Spain, we have it all.

B

How to align by eye 0706 How to align by eye  0706

Cook better and faster with our selection of utensils and gadgets, designed to simplify daily tasks.

A

D

 6 of 11 

C

3  of 6

Before&After | www.bamagazine.com

Take your comfort and style outside with our quality furniture, comfy cushions, and more!

Before: Spaced by ruler (A) The bounding boxes have identical space between them, but remove the frames (B), and you can see that the perceived spaces between the images are different. After: Kern the images (C) Nudge by eye until the white space between images appears the same or nearly so (D).

0706  How to align by eye

3 2 1

®

Before&After How to align by eye

7 of 11

Adjust the space between lines

What your eyes see . . . Uneven vertical spacing

BAmagazine.com

 7 of 11 

i U X

i U X 0706

How to align by eye 0706 How to align by eye  0706

How to align by eye

BAmagazine.com

Move the center shelf up . . . Perceptually even vertical spacing

Images of different heights may require vertical adjustment. As with typographic kerning, you might think of this as graphical leading (pronounced: ledding).

8 of 11

. . . then lights

 8 of 11 

If order is not a priority, balance your page by distributing images by value.

Distribute by value

How to align by eye

What the ruler says . . . Equal shelf heights

®

Before&After

Darks first . . .

4  of 6

Before&After | www.bamagazine.com

Make note of the dark objects (squinting helps) and distribute so neither side of the page is heavier than the other, then fill the gaps with the lighter objects.

0706  How to align by eye

0

®

Before&After

3

6

®

Before&After

3

0706  How to align by eye

How to align by eye

Article resources

9 of 11

Outdoor Furniture

10 of 11

Take your comfort and style outside with our quality furniture, comfy cushions, and more!

How to align by eye

Article resources

4

5

6

2 9 10

1

4

5 7 8

13

1 2

7 8 9 10 11 12

Typefaces 1 Georgia Regular

Images Images: iStockphoto 2 (6352857) 3 (12919738) 5 (11842001)

4 (6306475) 6 (16799169) 8 (15494393)

7 (11361940)

Typefaces 2 Adobe Caslon Regular

1 Linotype Didot Roman

Images 3 (iStockphoto.com) Images: iStockphoto 5 (4075677)

4 (16661602) 6 (18498827) 8 (3397523)

7 (15504871) 9 (6674530) 10 (15734716) 11 (3850760) 12 (11197038)

5  of 6

Before&After | www.bamagazine.com

BAmagazine.com

C0 M0 Y0 K100

i U X

9 C0 M0 Y0 K60

Colors

10

i U X 0706

How to align by eye 0706 How to align by eye  0706

C0 M0 Y0 K100

How to align by eye

BAmagazine.com

 9 of 11 

Colors 13

 10 of 11 

®

Before&After

0706  How to align by eye

How to align by eye

11 of 11

Subscribe to Before & After Subscribe to Before & After, and become a more capable, confident designer for pennies per article. To learn more, go to http://www.bamagazine.com/Subscribe E-mail this article To pass along a free copy of this article to others, click here. Join our e-list To be notified by e-mail of new articles as they become available, go to http://www.bamagazine.com/email

6  of 6

BAmagazine.com

i U X

Before & After magazine Before & After has been sharing its practical approach to graphic design since 1990. Because our modern world has made designers of us all (ready or not), Before & After is dedicated to making graphic design understandable, useful and even fun for everyone. John McWade Publisher and creative director Gaye McWade Associate publisher Dexter Mark Abellera Senior designer Before & After magazine 323 Lincoln Street, Roseville, CA 95678 Telephone 916-784-3880 Fax 916-784-3995 E-mail [email protected] www http://www.bamagazine.com Copyright ©2013 Before & After magazine ISSN 1049-0035. All rights reserved

|

Printing formats 

0706

How to align by eye  0706

How to align by eye

You may pass along a free copy of this article to others by clicking here. You may not alter this article, and you may not charge for it. You may quote brief sections for review; please credit Before & After magazine, and let us know. To link Before & After magazine to your Web site, use this URL: http://www.bamagazine.com. For all other permissions, please contact us.

 11 of 11

Before&After | www.bamagazine.com