Imaging and Design for Online Environment

PHOTO EDITING
 Photo editing encompasses the processes of altering images,
whether they are digital photographs, traditional photo chemical
photographs, or illustrations. Traditional analog image editing is
known as photo retouching, using tools such as an airbrush to modify
photographs, or editing illustrations with any traditional art medium.

Graphic software programs

  Which can be broadly grouped into vector graphics editors, raster
graphics editors, and 3D modelers are the primary tools with which a
user may manipulate, enhance, and transform images. Many image
editing programs are also used to render or create computer art from
scratch.
BASIC OF IMAGE EDITING
1. RASTER IMAGESare stored in a computer in the form of a grid of
picture elements or pixels.
2. VECTOR IMAGESsuch as Adobe Illustrator, Inkscape and etc. are
used to create and modify vector images, which are stored as
descriptions of lines, Bezier curves and text instead of pixels.
DIFFERENCE BETWEEN RASTER AND VECTOR IMAGES

RASTER IMAGES- use many colored pixels or individual building blocks to

form a complete image JPEGs, GIFs and PNGs are common raster image
types. Almost all of the photos found on the web and in print catalogs are
raster images.
 VECTOR IMAGES alternatively, allow for more flexibility. Constructed
using mathematical formulas rather than individual colored blocks,
vector file types such as EPS, AI and PDF are excellent for creating
graphics that frequently require resizing.
3. 3D MODELING (OR MODELLING) is the process of developing a
mathematical representation of any three dimensional surface of an
object via specialized software. The product is called a 3D model. It
can be displayed as a two-dimensional image through a process
called 3D rendering or used in a computer simulation or physical
phenomena. The model can also be physically created using 3D
printing devices.
IMAGE FORMATS
Ø JPEG is a commonly used method of lossy compression for digital
images, particularly for those images produced by a digital photography.
Ø PNG (PORTABLE NETWORK GRAPHICS) is a raster graphics file
format that supports lossless data compression.
Ø GIF a lossless format for image files that supports both animated and
static images.
Ø BMP is a raster graphics image used to store bitmap digital images
Ø EPS used in vector-based images in Adobe Illustrator.
Ø SVG is an XML-based vector image format for two-dimensional graphics
w/ support for interactivity and animation
Ø .3ds is one of the file formats used by the Autodesk 3Ds Max 3D
Modelling, animation and rendering software.
Ø .fbx is an exchange format, in particular for interoperability between
Autodesk products and other digital content creation software
FEATURES OF IMAGE EDITORS

SELECTION One of the prerequisites for many of the app mentioned below
is a method of selecting part(s) of an image, thus applying a change
selectively without affecting the entire picture
Ø MARQUEE TOOL for selecting rectangular or other regular polygon-
shaped regions
Ø LASSO TOOL for freehand selection of a region
Ø MAGIC WAND TOOL selects objects or regions in the image defined by
proximity of color or luminance
LAYERS which are analogous to sheets of transparent acetate, stacked on
top of each other, each capable of being individually positioned, altered and
blended with the layers below, w/o affecting any of the elements on the
other layers.

IMAGE SIZE resize images in a process often called image scaling,

making them larger, or smaller. High image resolution cameras can
produce large images which are often reduced in size for Internet use.
CROPPING creates a new image by selecting a desired rectangular portion
from the image being cropped. The unwanted part of the image is
discarded. Image cropping does not reduce the resolution of the area
cropped.
CLONING uses the current brush to copy from an image or pattern. It has
many uses: one of the most important is to repair problem areas in digital
photos.
IMAGE ORIENTATION – Image editors are capable of altering an image to
be rotated in any direction and to any degree. Mirror images can be created
and images can be horizontally flipped or vertically flopped. Rotated image
usually require cropping afterwards, in order to remove the resulting gaps
at the image edges.

PERSPECTIVE – is the art of drawing solid objects on a two- dimensional

surface so as to give the right impression of their height, width, depth and
position in relation to each other when viewed from a particular point.

SHARPENING AND SOFTENING– Sharpening makes images clearer.

Too much sharpening causes grains on the surface of the image. Softening
makes images softer that removes some of the highly visible flaws. Too
much causes the image to blur.
SATURATION- is an expression for the relative bandwidth of the visible
output from a light source. As saturation increase, colors appear more
“pure.’’ As saturation decreases, colors appear more ‘’ washed-out.’’

CONTRAST AND BRIGHTENING

Contrast of images and brighten or darken the image. Underexposed
images can be often be improved by using this feature.
Brightening lightens the image so the photo brightens up. Brightness is a
relative expression of the intensity of the energy output of a visible light
source.
Adjusting contrast means adjusting brightness because they work together
to make a better image.
PHOTO MANIPULATION
Photo manipulation involves transforming or altering a photograph using
various methods and techniques to achieve desired results. Some photo
manipulations are considered skillful artwork while others are frowned upon
as unethical practices, especially when used to deceive the public, such as
hat used for political propaganda , or to make a product or person look
better.
DIFFERENCES
PHOTO EDITING – signifies the regular process used to enhance photos
and to create them ‘’Actual editing simple process’’. Also includes some of
the regular programs used for editing and expose how to use them.
PHOTO MANIPULATION – includes all simple editing techniques and
have some manipulation techniques like erasing, adding objects , adding
some graphical effects, background correction, creating incredible effect,
change elements in an image, adding styles , eliminating blemishes from
a person’s face and changing the features of a person’s body.
b.) Infographics
also known as data visualization, information design, and communication
design
 It is any graphic that display and explains information, whether that
be data or words. When we use the term ‘’infographics’’, we’re using
it as a general term used to describe data presented in a visual way.
 Infographics are important because they change the way people find
and experience stories. Infographics are being used to augment
editorial content on the web, it create a new way of seeing the world
of data, and they help communicate complex ideas in a clear and
beautiful way.
TYPES OF INFOGRAPHICS
1. Statistical
2. Process Flow
3. Geographic
PROCESS OF MAKING INFOGRAPHICS
1. Research
2. a)Know what is needed
3. b)Take a reference
4. c)Know the audience
5. d)Decide the type of infographics
 6. Brainstorm
7. a)Gather ideas
8. b)Build thought process
9. Design
10. a) Choose your tool and start designing
11. Review
12. a) Cross check the data to deliver flawless output
13. Launch
14. a) Make it viral
15. b) Share on social network
BEST PRACTICES WHEN CREATING INFOGRAPHICS
1. a)Maintain a structure
2. b)Don’t use more than 3 color palletes
3. c)Typography matters a lot
4. d)Include source and references
The Principles of Layout and Design

One of the most difficult parts of talking about the principles of design is
figuring out just how many principles there actually are (are
there five? Seven? 10?). And once that’s been figured out, which of these
supposed design fundamentals should be included?
Search for “principles of design” and Google will return results for articles
that include from five to more than a dozen individual visual design
principles. Even the articles that agree on the number don’t necessarily
agree on which ones should be included in that number.
In reality, there are roughly a dozen basic principles of design that
beginning and expert designers alike should keep in mind when working on
their projects. In addition, there are another dozen or so “secondary” design
principles that are sometimes included as basics (for example, the Gestalt
Principles, typography, color, and framing). The main design principles are
explained and illustrated below.
Basic Visual Design Principles
As already mentioned, there is no real consensus in the design community
about what the main principles of design actually are. That said, the
following twelve principles of visual design are those mentioned most often
in articles and books on the subject.

Contrast
One of the most common complaints designers have about client feedback
often revolves around clients who say a design needs to “pop” more. While
that sounds like a completely arbitrary term, what the client generally
means is that the design needs more contrast.
Contrast refers to how different elements are in a design, particularly
adjacent elements. These differences make various elements stand out.
Contrast is also a very important aspect of creating accessible designs.
Insufficient contrast can make text content in particular very difficult to read,
especially for people with visual impairments.

Balance
All design elements and principles—typography, colors, images, shapes,
patterns, etc.—carry a visual weight. Some elements are heavy and draw
the eye, while other elements are lighter. The way these elements are laid
out on a page should create a feeling of balance.
There are two basic types of balance: symmetrical and asymmetrical.
Symmetrical designs layout elements of equal weight on either side of an
imaginary center line. Asymmetrical balance uses elements of differing
weights, often laid out in relation to a line that is not centered within the
overall design.

Emphasis
Emphasis deals with the parts of a design that are meant to stand out. In
most cases, this means the most important information the design is meant
to convey.
Emphasis can also be used to reduce the impact of certain information.
This is most apparent in instances where “fine print” is used for ancillary
information in a design. Tiny typography tucked away at the bottom of a
page carries much less weight than almost anything else in a design, and is
therefore deemphasized.
Proportion
Proportion is one of the easier principles of graphic design to understand.
Simply put, it’s the size of elements in relation to one another. Proportion
signals what’s important in a design and what isn’t. Larger elements are
more important, smaller elements less.
Hierarchy
Hierarchy is another principle of design that directly relates to how well
content can be processed by people using a website. It refers to the
importance of elements within a design. The most important elements (or
content) should appear to be the most important.
Hierarchy is most easily illustrated through the use of titles and headings in
a design. The title of a page should be given the most importance, and
therefore should be immediately recognizable as the most important
element on a page. Headings and subheadings should be formatted in a
way that shows their importance in relation to each other as well as in
relation to the title and body copy.
Repetition
Repetition is a great way to reinforce an idea. It’s also a great way to unify
a design that brings together a lot of different elements. Repetition can be
done in a number of ways: via repeating the same colors, typefaces,
shapes, or other elements of a design.
This article, for example, uses repetition in the format of the headings.
Each design principle is formatted the same as the others in this section,
signaling to readers that they’re all of equal importance and that they’re all
related. Consistent headings unify these elements across the page.
Rhythm
The spaces between repeating elements can cause a sense of rhythm to
form, similar to the way the space between notes in a musical composition
create a rhythm. There are five basic types of visual rhythm that designers
can create: random, regular, alternating, flowing, and progressive.
Random rhythms have no discernable pattern. Regular rhythms follow the
same spacing between each element with no variation. Alternating rhythms
follow a set pattern that repeats, but there is variation between the actual
elements (such as a 1-2-3-1-2-3 pattern). Flowing rhythms follow bends
and curves, similar to the way sand dunes undulate or waves flow.
Progressive rhythms change as they go along, with each change adding to
the previous iterations.
Rhythms can be used to create a number of feelings. They can create
excitement (particularly flowing and progressive rhythms) or create
reassurance and consistency. It all depends on the way they are
implemented.
Pattern
Patterns are nothing more than a repetition of multiple design elements
working together. Wallpaper patterns are the most ubiquitous example of
patterns that virtually everyone is familiar with.
In design, however, patterns can also refer to set standards for how certain
elements are designed. For example, top navigation is a design pattern that
the majority of internet users have interacted with.
White Space
White space—also referred to as “negative space”— is the areas of a
design that do not include any design elements. The space is, effectively,
empty.
Many beginning designers feel the need to pack every pixel with some type
of “design” and overlook the value of white space. But white space serves
many important purposes in a design, foremost being giving elements of
the design room to breathe. Negative space can also help highlight specific
content or specific parts of a design.
It can also make elements of a design easier to discern. This is why
typography is more legible when upper and lowercase letters are used
since negative space is more varied around lowercase letters, which allows
people to interpret them more quickly.
In some cases, negative space is used to create secondary images that
may not be immediately apparent to the viewer. This can be a valuable part
of branding that can delight customers. Take the hidden arrow in the FedEx
logo, for just one example.
Movement
Movement refers to the way the eye travels over a design. The most
important element should lead to the next most important and so on. This is
done through positioning (the eye naturally falls on certain areas of a
design first), emphasis, and other design elements already mentioned.

Variety
Variety in design is used to create visual interest. Without variety, a design
can very quickly become monotonous, causing the user to lose interest.
Variety can be created in a variety of ways, through color, typography,
images, shapes, and virtually any other design element.
However, variety for the sake of variety is pointless. Variety should
reinforce the other elements of a design and be used alongside them to
create a more interesting and aesthetically pleasing outcome that improves
the user’s experience.
Unity
Everyone has seen a website or other design out there that seemed to just
throw elements on a page with no regard for how they worked together.
Newspaper ads that use ten different fonts come to mind almost
immediately.
Unity refers to how well the elements of a design work together. Visual
elements should have clear relationships with each other in a design. Unity
also helps ensure concepts are being communicated in a clear, cohesive
fashion. Designs with good unity also appear to be more organized and of
higher quality and authority than designs with poor unity.
Other Principles of Design
Other principles of design are also touched upon in various articles on the
subject. These include typography, color, Gestalt Principles, grid and
alignment, framing, and shape. Some definitely fit the definition of
“principles” while others are more like elements of design.
Typography refers to the way text is arranged in a design. That includes the
fonts used, their spacing, size, and weight, and the way different text
elements relate to each other. Good typographic design is heavily
influenced by all of the other design principles mentioned earlier in this
article.
The use of color in design is one of the most psychologically important
parts of a design and has a huge influence on user experience. Color
psychology and theory heavily influences some of the other principles
mentioned earlier.
Gestalt Principles include similarity, continuation, closure, proximity,
figure/ground, and symmetry & order (also called prägnanz). Some of those
principles are closely related to the principles mentioned above.
Grid and alignment are closely related to balance and refer to the way
elements are arranged in relation to an invisible grid on the page.
Framing refers to how the primary subject of a design is placed in relation
to other elements on the page. It’s most often heard referred to in
cinematography or photography, with how the main focus of an image is
placed within the overall image. But the principle carries over into design.
Shape is also a major part of any design, both in terms of specific shapes
used as elements within the design, and the overall shape of the design
itself. Different shapes can evoke different feelings, i.e circles are organic
and fluid, while squares are more rigid and formal, and triangles give a
sense of energy or movement.
These design “principles” or elements are important aspects of good design
and should be considered alongside the other basic principles to create the
best user experiences.
Conclusion
What constitutes the “basic” principles of design is certainly up for debate.
But understanding and implementing the principles covered above is vital
to the success of any design project.
Designers should aim to understand how each of these design principles
actually impact their work. Studying how other designers have implemented
these ideas to structure their own designs is also an incredibly valuable tool
in learning to create better designs.
It’s entirely possible to create a good design without a thorough
understanding of these elements and principles of design. However, it’s
typically done by “designer’s intuition” and may take a lot of trial and error
in order to create something that actually looks good and creates an
optimal user experience. Designers could save a lot of time and energy by
practicing the principles we have discussed until they become second-
nature.