Republic of the Philippines

CARAGA STATE UNIVERSITY

Cabadbaran Campus
Cabadbaran City, Agusan Del Norte

College of Engineering and Information Technology

VISUAL GRAPHICS DESIGN

CHAPTER I. INTRODUCTION TO COMPUTER GRAPHICS

1. Definition of Computer Graphics

1.1. Computer graphics are simply images displayed on a computer screen.

Graphics are often contrasted with text, which is comprised of characters, such
as numbers and letters, rather than images.
(http://techterms.com/definition/graphics)

1.2. Computer graphics are pictures and movies created using computers - usually
referring to image data created by a computer specifically with help from specialized
graphical hardware and software. (https://en.wikipedia.org/wiki/Computer_graphics)

2. Types of Computer Graphics

2.1. 2D Computer Graphics is the computer-based generation of digital images—

mostly from two-dimensional models (such as 2D geometric models, text, and
digital images) and by techniques specific to them.
(https://en.wikipedia.org/wiki/2D_computer_graphics)

Two Flavors of 2D Computer Graphics

1. Raster graphics

Raster Image
Source: http://vectorconversions.com/vectorizing/raster_vs_vector.html

 Raster graphics or bitmaps are composed of arrays of pixels. Each pixel can be
a different color or shade. They are edited on the pixel level and are used on
most old computer and video games, graphing calculator games, and many
mobile phone games. Vector graphics are composed of paths. Paths are used
to describe the images by establishing mathematical relationships between
points within an image. Vector graphics are mainly used on photographic
images.
 Most images you see on your computer screen are raster graphics. Pictures
found on the Web and photos you import from your digital camera are raster
graphics. They are made up of grid of pixels, commonly referred to as a
bitmap. The larger the image, the more disk space the image file will take up.
For example, a 640 x 480 image requires information to be stored for 307,200
pixels, while a 3072 x 2048 image (from a 6.3 Megapixel digital camera) needs
to store information for a whopping 6,291,456 pixels.

 Since raster graphics need to store so much information, large bitmaps require
large file sizes. Fortunately, there are several image compression algorithms
that have been developed to help reduce these file sizes. JPEG and GIF are
the most common compressed image formats on the Web, but several other
types of image compression are available.

 Raster graphics can typically be scaled down with no loss of quality, but
enlarging a bitmap image causes it to look blocky and "pixelated”.

Raster Graphics File Extension

1. .BMP File Extension

File Type: Bitmap Image File
File Description

Uncompressed raster image comprised of a rectangular grid of pixels;

contains a file header (bitmap identifier, file size, width, height, color options,
and bitmap data starting point) and bitmap pixels, each with a different color.
BMP files may contain different levels of color depths per pixel, depending on
the number of bits per pixel specified in the file header; they may also be
stored using a grayscale color scheme.
2. .TIF File Extension
File Type: Tagged Image File
File Description
High-quality graphics format often used for storing images with many colors,
such as digital photos; short for "TIFF;" includes support for layers and
multiple pages.TIFF files can be saved in an uncompressed (lossless) format
or may incorporate .JPEG (lossy) compression; they may also use LZW
lossless compression, which reduces the TIFF file size, but does not reduce
the quality of the image.
3. .GIF File Extension
File Type: Graphical Interchange Format File
File Description
Image file that may contain up to 256 indexed colors; color palette may be a
predefined set of colors or may be adapted to the colors in the image;
lossless format, meaning the clarity of the image is not compromised with
GIF compression. GIFs are common format for Web graphics, especially
small images and images that contain text, such as navigation buttons;
 however, JPEG (.JPG) images are better for showing photos because they
are not limited in the number of colors they can display. GIF images can also
be animated and saved as "animated GIFs," which are often used to display
basic animations on websites; they may also include transparent pixels,
which allow them to blend with different color backgrounds; however, pixels
in a GIF image must be either fully transparent or fully opaque, so the
transparency cannot be faded like a .PNG image.
2. Vector Graphics

Vector Image
Source: http://vectorconversions.com/vectorizing/raster_vs_vector.html

 Unlike JPEGs, GIFs, and BMP images, vector graphics are not made up of a
grid of pixels. Instead, vector graphics are comprised of paths, which are
defined by a start and end point, along with other points, curves, and angles
along the way. A path can be a line, a square, a triangle, or a curvy shape.
These paths can be used to create simple drawings or complex diagrams.
Paths are even used to define the characters of specific typefaces.
 Because vector-based images are not made up of a specific number of dots,
they can be scaled to a larger size and not lose any image quality. If you blow
up a raster graphic, it will look blocky, or "pixelated." When you blow up a
vector graphic, the edges of each object within the graphic stay smooth and
clean. This makes vector graphics ideal for logos, which can be small enough
to appear on a business card, but can also be scaled to fill a billboard.
Common types of vector graphics include Adobe Illustrator, Macromedia
Freehand, and EPS files. Many Flash animations also use vector graphics,
since they scale better and typically take up less space than bitmap images.

Vector Graphics File Extension

  .AI File Extension
File Type: Adobe Illustrator File
File Description
Drawing created with Adobe Illustrator, a vector graphics editing program;
composed of paths connected by points, rather than bitmap image data;
commonly used for logos and print media.
Since Illustrator image files are saved in a vector format, they can be
enlarged without losing any image quality; some third-party programs can
open AI files, but they may rasterize the image, meaning the vector data will
be converted to a bitmap format.
 .EPS File Extension
File Type: Encapsulated PostScript File
File Description
PostScript (.PS) file that may contain 2D vector graphics, bitmap images,
and text; may also include an embedded preview image in bitmap format;
can be placed within another PostScript document. EPS files are supported
by several different drawing programs and vector graphic editing
applications; they are often used as a standard means for transferring image
data between different operating systems.
 .SVG File Extension
File Type: Scalable Vector Graphics File
File Description:
The SVG format is an open standard developed under the W3C (World Wide
Web Consortium), with Adobe playing a major role; SVG images can be
created and exported from Adobe Creative Suite programs, such as
Illustrator and GoLive.

2.2. 3D Computer Graphics- are graphics that use a three-dimensional

representation of geometric data (often Cartesian) that is stored in the
computer for the purposes of performing calculations and rendering 2D images.
Such images may be stored for viewing later or displayed in real-time. 3D
computer graphics rely on many of the same algorithms as 2D computer vector
graphics in the wire-frame model and 2D computer raster graphics in the final
rendered display. In computer graphics software, the distinction between 2D and
3D is occasionally blurred; 2D applications may use 3D techniques to achieve
effects such as lighting, and 3D may use 2D rendering techniques.
(https://en.wikipedia.org/wiki/3D_computer_graphics)

3D computer graphics creation falls into three basic phases:

3D modeling – the process of forming a computer model of an object's

shape. In 3D computer graphics, 3D modeling (or modelling) is the
process of developing a mathematical representation of any three-
dimensional surface.

Source:
https://mrmunchinator.wordpress.com/2015/02/11
/week-1-pre-production-and-3d-modelling-pipeline/
 Layout and animation – the motion and
placement of objects within a scene.

Source:
https://en.wikipedia.org/wiki/File:Activemar
ker2.PNG
3D rendering – the computer calculations that
based on light placement, surface types, and
other qualities, generate the image.

Source:
https://en.wikipedia.org/wiki/3D_computer
_graphics#/media/File:Dunkerque_3d.jpeg

3. Application of Computer Graphics

3.1. Entertainment: Movies, Video Games

 is a form of activity that holds the attention and interest of an audience, or

gives pleasure and delight. It can be an idea or a task, but is more likely to
be one of the activities or events that have developed over thousands of
years specifically for the purpose of keeping an audience's attention.
(https://en.wikipedia.org/wiki/Entertainment)

Movies- also known as films, are a

type of visual communication which
use moving pictures and sound to
tell stories or inform (help people to
learn )

Source:
http://www.hngn.com/articles/47141/20141026/
bleach-anime-ending-in-u-s-next-week-rumored-

Video Games- is an electronic

Source:
https://www.theguardian.com/technology/games game that involves human interaction
blog/2010/jun/03/motion-controls-3d-games
 with a user interface to generate visual
feedback on a video device such as a TV
screen or computer monitor.

3.2. Architectural Design

 Concept that focuses on the components or elements of

a structure or system and unifies them into a coherent and functional whole,
according to a particular approach in achieving the objective(s) under the
given constraints or limitations.
(http://www.businessdictionary.com/definition/architectural-design.html)

External Layout
Internal Layout

3.3. Scientific Visualization

 branch of computer science that is a subset of computer graphics. The purpose

of scientific visualization is to graphically illustrate scientific data to enable
scientists to understand, illustrate, and glean insight from their data.
(https://en.wikipedia.org/wiki/Scientific_visualization)

Urban Security Map

Weather System
Source: https://www2.cisl.ucar.edu/news/powerful-free-ncl-software-makes-it-easy-access-process-
and-visualize-geoscientific-data

3.4. Virtual Reality

 is a computer technology that replicates an environment, real or imagined, and
simulates a user's physical presence and environment to allow for user
interaction. Virtual realities artificially create sensory experience, which can
include sight, touch, hearing, and smell.

Aircraft Simulator Heavy Machinery Simulator

Source: http://www.airliners.net/photo/Virtual-Aviation-Ltd/Boeing-737-800-(simulator)/2226930/L/
CHAPTER II. ADOBE PHOTOSHOP

1. Introduction to Adobe Photoshop

1.1. Adobe Photoshop is a raster graphics editor developed and published by Adobe
Systems for Windows and OS X.

1.2. Adobe Photoshop is one of the most powerful software applications for image
editing, touch up, color correction, and painting and drawing. You can use it to work
with images that have been digitized on flatbed or film/slide scanners, or to create
original artwork. The image files you create in Photoshop can be printed to paper or
optimized for use in multimedia presentations, web pages, or animation/video
projects.

2. Adobe Photoshop Environment

Menu Bar
Option Bar

Toolbox

Palletes

Features of the Adobe Photoshop

Menu Bar-Contains Menus for Performing Common task.

Option Bar- Provides additional specification for the tool your currently using

Tool Box- Provides access to the various tools you will use to create and modify
 images.

Palletes- Each palletes provides different functionality. Palletes can be move,

Grouped or closed.

Adobe Photoshop Toolbar

1. The marquee tool allows you to select rectangular or

elliptical areas in an image.
2. The lasso tool lets you draw a freehand selection area,
with either curves or straight lines.
3. The Spot Healing Brush removes blemishes,
imperfections, and red eye.
4. The move tool let you move a selection marquee or
objects on a single layer.
5. The brush tool paints brush strokes.
6. The text tool creates text or type on a photo.
7. The zoom tool magnifies or reduces the size of an
image.
8. Photoshop uses the foreground color to paint, fill, and
stroke selections and the background color to make
gradient fills and fill in the erased areas of an image.
30
Layers
Every Photoshop image contains one or more layers. Every
new file is created with a background, which can be
converted to a layer. When you scan an image and open it
in Photoshop, it is placed on the background. Layers are a fundamental part of Photoshop's
versatility.

A layer is a transparency sheet with an image on it. You can edit, transform, or add filters to
a layer independently from other layers. You can make one layer alter the look of a layer
above or below it. You can save a file with the layers and easily change your design later,
by editing one or more of the layers.

Masks

Masks can be used to block out one area of an image or protect it from manipulations. A
mask is a selection shown as a grayscale image: the white areas are selected, the black
areas are not.

3. Adobe Photoshop and Graphics Design

 Graphics Design is the process of visual communication, and problem-

solving through the correct use of typography, space, image and color. The
field is considered a subset of visual communication and communication
 design, but sometimes the term "graphic design" is used interchangeably
with these due to overlapping skills involved. Graphic designers use various
methods to create and combine words, symbols, and images to create a
visual representation of ideas and messages.
(https://en.wikipedia.org/wiki/Graphic_design)

Common Uses of Graphics Design

 Identity ( Logos and  Poster

branding)
 Billboard
 Publications
( Magazines,  Product Packaging
newspaper and
Books)  Images Editing

 Print Advertisements
 Activity Number 1
TARPAULIN DESIGN

FINAL LAY-OUT

Procedures:

Step 1. Create new Layer. To create New layer, click File->New the new windows will
appear. Change the width=36, height=24 in inches, resolution=100 and color
mode=RGB color then click OK.

2
Step 2. Open a picture you want to use for your design. You can choose one picture as
your background by clicking File-> Open and locate the picture. You can use multiple
picture it defend to the tarpaulin lay-out.

Step 3. Dragging Picture. Choose a picture you want to become a background. Drag it to
the Layer Background. Enlarge the picture by pressing the keyboard CTRL + T fit it to the
background layer.

5
Step 4. Apply Opacity to lighten the picture. After dragging and enlarging the picture now it’s
time to apply Opacity to the picture. Add more pictures and arrange it according to your
design. Add text by clicking T at the tool bar.

1
2
Lab Exercises:
4

3
1. Given the materials, designed an eco-tour, brochure, poster, 3D booth, web with the

size mentioned below.

1.1. Eco-tour (2x3 square-foot) containing the following;

 Logo, Tagline, Address, Introductory.

1.2. Brochure (2x3 square-foot) containing the following;

 Front (Logo, Tagline, Customer’s Information, Grand Launching Date,

Address, Promos, URL).

 Back (About us, Personnel/staff, Services, Others)

1.3. Poster (2x3 square-foot) containing the following;

 Logo, Tagline, Promos, Services, Others, Grand Launching Date,

Address, Introductory).

1.4. 3D Booth (2x3 square-foot) containing the following;

 Logo, Tagline, Contact Number, Menu,

1.5. Web (8.5 x11 inches, portrait) containing the following;

 Header, Footer, Logo, Menu button, Slider, Introductory, Promos, Picture

Gallery, Member’s Corner.

San Jose Eco-Tour

 1. Given the materials, designed an eco-tour, brochure, poster, 3D booth, web with the

size mentioned below.

1.1. Eco-tour (2x3 square-foot) containing the following;

 Logo, Tagline, Address, Introductory.

The town of San Jose is located 23 kms. Away from the shoreline of the northern
high of Batangas. Upon reaching the town proper, is 300 year-old church build in
Spanish time, rebuilt recently making it’s town’s landmark, over headed lake stop a
dominant volcano. Small waterfalls is surrounded by a prestine forest offers hiking
and camping. A clear water river suggest beating to view the scenic beauty along
the river banks, and a seasonal angle and fishing. Nature and animals conservation
is strictly being observed for every species has an important role to play with
ecosystem in maintaining a healthy variety hand weave shore, bags, out flower
were the oldest industry in this town.

Contact:

FOR INQUIRIES
Look, call or visit us
DEPARTMENT OF TOURISM-SAN JOSE
Brgy. 3, San Jose, Laguna, Philippines
Tel.no: (085) 0345-0915
email add: [email protected]

Brochure:
2. Given the materials, designed an eco-tour, brochure, poster, 3D booth, web with the

size mentioned below.

2.1. Brochure (2x3 square-foot) containing the following;

 Front (Logo, Tagline, Customer’s Information, Grand Launching Date,

Address, Promos, URL).

 Back (About us, Personnel/staff, Services, Others)

Promos:
1. Wash over promo with under chassis coating-P 15,000.00
2. Free estimate and free car check-up.
3. Special invitation to the launch party and company blessings on May 15 for the first
50 client’s availing of the specialized services of BRAVO AUTO BODY CARE.
4. Special discounts on services if clients bring company poster to the car shop on the
company launch on May 15 this year.

GRAND LAUNCH DAY MARCH 15, 2010

Come and avail our holiday promo of special discounts on new services from May 2010 to
June 2011.

CONTACT:
WE APPRECIATE TO HEAR FROM YOU
CALL OR VISIT US:

ABOUT US

BRAVO AUTO BODY CARE formerly known as Dimples Auto Body Care has been in
business for 10 years. With it’s new name and new management, the company has made
major changes and launches full expansion of excellent quality services, high intensive
tools and equipment, extended business hours and an equal number of experience
personnel giving its portion the best services the company had, yet affordable to clients, to
the people of San Pedro and all its outreaches Practical experience is the essence of
mastery, for several years, the company has its dedicated in specialized and other car
services.

SERVICES
Auto Body paint car, fabricate under chassis view the company’s specialized services with
new innovative tools and equipment, the company’s offers excellent quality services for
great results for your car needs.

OTHERS
Include full car wash, brake adjustment installation.

STAFF
BRAVO AUTO BODY CARE proudly announce they have one of the finest technician in the
society. With highly experienced and competent workers. Do not hesitate to ask for any
queries to our friendly staff.

POSTER

3. Given the materials, designed an eco-tour, brochure, poster, 3D booth, web with the

size mentioned below.

3.1. Poster (2x3 square-foot) containing the following;

 Logo, Tagline, Promos, Services, Others, Grand Launching Date,

Address, Introductory.

WEB DESIGN

4. Given the materials, designed an eco-tour, brochure, poster, 3D booth, web with the

size mentioned below.

4.1. Web (8.5 x11 inches, portrait) containing the following;

 Header, Footer, Logo, Menu button, Slider, Introductory, Promos, Picture

Gallery, Member’s Corner.

3D BOOTH
1. Given the materials, designed an eco-tour, brochure, poster, 3D booth, web with the

size mentioned below.

1.1. 3D Booth (2x3 square-foot) containing the following;

 Logo, Tagline, Contact Number, Menu,