|
Don
Bergland
bergland@uvic.ca
|
|
|
| |
| |
|
| |
As your ability to create images comfortably in Photoshop increases,
there are a variety of formats that you will want to learn.
One of the most commonly used formats involves an image which
conveys information to the viewer.
The key aesthetic in this type of image is to:
- quickly attract the viewer
- hold the viewer for a second
- direct the viewer’s through the information
STANDARD AESTHETICS
You don’t have to be an artist in order to create effective
information screens (IS). There are a few design principles
that we will look at that basically govern how the layout of
the IS should be constructed. Image creators have total control
over how a viewer looks at the image. By following some of the
design principles outlined below, you will be able to communicate
your message more dynamically.
Focus and Direction
All well-constructed image have “focus” and “direction.”
This means that the creator of the image controls the message
of the image by compelling the viewer to focus on a main area
of the image first, and then directing the viewer’s eye
to the next piece of important information.
Focus
Most good images have a single area of focus to initially catch
the viewer’s eye. This could be a shape, a photos, or
text. It is usually emphasized through color or size to be dynamic,
the first thing the viewer will look at. In our culture, because
we read from top left to bottom right, we follow this structure
in image reading. A strong focus in the upper right will immediately
attract the viewer’s eye. |
| |
 |
| |
This
does not always have to be the case, however. The focus could
be anywhere in the image, as long as it is strong and the first
thing you want the viewer to see.
Direction
Immediately after the viewer’s eye fastens to the first
component of your image (the focus), the eye will start to drift
away from this naturally. You don’t want this to occur
without your control. So, you set a secondary area for the eye
to drift into. This is called “direction,” and image
creators can set this area. It is immediately connected to the
focus and will be secondary in its power and impact. |
| |
|
| |
As
stated above, the focus and direction can be anywhere in the
image as long as they are connected and have dominance over
other visual spots. |
| |
 |
| |
Shapes
Shapes in your IS image should be created to not only have a
pleasing arrangement, but also to utilize this design principle.
Use a dominant shape which may be large and brightly colored
as the focus area. Use another secondary shape to pull the eye
in the intended direction.
Text
Since the text is the material usually read in an IS image,
this text should follow the principles suggested above. The
main thing you want the viewer to read should fall in the focus
area. The second thing you want the viewer to read should be
in the secondary area, the direction.
These principles are most commonly demonstrated in website headers,
banners, and logos. In many of these, a logo or strong image
appears on the left side, and the content information comes
immediately after it (to the right of it). |
| |
 |
| |
|
| |
|
| |
You will see a variety of links listed in this section. These
links lead to online galleries which showcase visual images.
|
| |
| 1. |
Suppose
we wanted to construct a simple IS image that stated,
“Now is the time to do it.” |
| |
 |
| |
The
image above follows the rules, i.e., “Now”
is in a focus area, while “is the time to do it”
follows good direction from the focus. But the focus area
needs to be made stronger, to really pull the viewer’s
eye immediately into the image. |
| |
 |
| |
We
can create some shapes which are put under the text to
give some strong emphasis to the image. Do you see how
this area and the text become an immediate focus? Let’s
add some more shapes, not only to help the secondary area,
but also to provide some visual interest. |
| |
 |
| |
A
simple message becomes a powerful information screen when
shapes and design principles are used to help construct
the message. |
|
| |
|
| |
In
this activity, you will explore the construction of information
screens. |
| |
| a. |
Suppose
You want to create an information image that states the
following:
“Images! The key to Understanding.” |
| b. |
Think
about the message. Think about using shapes, colors, and
text to create an image that communicates this thought
well. |
| c. |
Launch
Photoshop. Create a new document - 800 px X 600 px @72ppi. |
| d. |
Start
by creating the text, “Images!” as a separate
layer. |
| e. |
On
a second layer, create the text, “The Key To Understanding.” |
| f. |
Try
moving these text layers around until you get the start
of a basic composition. |
| g. |
Start
thinking about how to make the focus area (shapes under
the text, scaling the text, different font, etc.). |
| h. |
Continue
your work using shapes, colors, and text. All your layers
are highly editable in the Photoshop environment, so don’t
be afraid to experiment. |
| i. |
Save
your information screen as, “info01.psd.” |
|
| |
|
| Click
on IMAGE
categories at the top left side of the page to access further
knowledge and skills. |
|
|
