Module 1: Graphic Design Essentials

INTRODUCTION TO GRAPHIC DESIGN

Graphic Design
- the business of making or choosing marks and arranging them on a surface to convey an idea.
- a craft where professionals create visual content to communicate messages. By applying visual
hierarchy and page layout techniques, designers use typography and pictures to meet users’
specific needs and focus on the logic of displaying elements in interactive designs, to optimize the
user experience.
- defined as “the art and practice of planning and projecting ideas and experiences with visual and
textual content.” In other terms, graphic design communicates certain ideas or messages in a visual
way. These visuals can be as simple as a business logo, or as complex as page layouts on a
website.
3 Main Roles of Graphic Design
1. Identification - to say what something is, or where it came from. Ex. company logos, packaging
and labels.
2. Information & Instruction - to indicate the relationship of one thing to another in direction,
position and scale. Ex. maps, diagrams, directional signs.
3. Presentation & Promotion - to catch the eye and make its message memorable. Ex. posters
and advertisements.
Earliest Graphic Designers
 Pre-Historic
Visual communication in its widest sense has a long history that can be traced back to prehistoric
men.
 Printmaking / Mass Production
- Printing resulted in a far more democratic distribution of knowledge, opinion, and imagery—a
truly revolutionary development.
- Resulting in graphic art for the public.
- 14th Century to 17th Century: Albrecht Dürer, Rembrandt Van Rijn & Francisco Goya.
- 18th Century to 19th Century: Henri Toulouse-Lautrec, Aubrey Beardsley & Alphonse Mucha.
 Posters and Publications: The Art Gallery of the Street
By the second half of the 19th century, the range of mass-produced graphic illustration had
expanded to include posters, literary journals, soft covered books, advertisements and political
leaflets.
 Graphic Design as a Profession
As a profession, graphic design has existed only since the middle of the 20th century, until then,
advertiser’s and their agents used the services provided by commercial artists.
 Turn-of-the-Century Graphics
- Increasing numbers of artists from the end of the nineteenth century to the present were enlisted
to create advertising publicity for consumer goods, services, and institutions.
- At first, some of the resulting advertisement graphics followed the fine-art styles of the day added
a sense of sophistication to turn-of-the-century ads.
 Is Graphic Art also Fine Art?
Artist Graphic Artist
Intention Self-Expression Communication
Communication Approach Poetic and personal Clear and precise
 Origin of Idea One’ self From a client
*They are two sides of the same coin = ART
The Elements of Art and Design
Design elements have an impact on how a piece of work is perceived, executed, and used—and
are present in design regardless of skill, taste, or style.
 Line
- a continuous mark made on a surface by a moving point; it may be flat (pencil line) or three-
dimensional (a rod, groove, ridge, etc.).
- used to outline, create shading and show form, decorate, express emotion, and direct the
viewer's eye.
- can be categorized as horizontal, vertical, diagonal, curved, and zigzag.
 Shape
- a two- or three-dimensional object that stands out from the space next to it because of a defined
or implied boundary.
- can live in different areas in space, and have other elements like line, color, texture, or
movement.
- shapes come in two different types: geometric and organic.
1. Geometric Shapes can be drawn using a ruler, compass, or digital instrument. They feel
very precise, like an architecture rendering.
2. Organic Shapes are found in nature or drawn by hand. They’re the opposite of geometric,
and often feel natural or smooth.
 Color
- the visible spectrum of radiation reflected from an object.
- terms used to talk about color include hue, intensity or saturation, value or brightness, tint,
shade, tone, temperature (warm, cool, neutral), and various color harmonies or schemes such as
monochromatic, analogous and complementary.
- three properties of color: hue, intensity or saturation, and value or brightness.
1. Hue refers to what is commonly called color (red, green, blue-green, etc.).
2. Intensity or Saturation refers to the richness of a hue as compared to a gray of the same
brightness; in some color notation systems, intensity or saturation is also known as chroma.
3. Value or Brightness refers to a light source or the lightness of an opaque object is
measured on a scale ranging from dim to bright for a source or from black to white for an
opaque object.
 Form
- a three-dimensional object: a defined volume of space.
- could also be categorized as geometric or organic in nature.
- for digital design, think of form as the object you’re designing for; so if you’re designing for a
mobile device, the phone is your form.
 Space
- the distance or area around or between elements of an artwork.
- the illusion of depth created on a flat surface through the use of linear perspective, overlapping
elements, size, level of detail, color and value.
- refers to the area around, above, below, or behind an object as an element of design.
- often categorized as positive or negative, with positive space referring to the subject or physical
mass of the art, and negative space referring to the background or volume around it.
 Texture
- the tactile sensation or feel of a surface (rough, smooth, spiky, etc.) or how something appears to
feel.
- the way a surface feels, or the way it’s perceived to feel. It has the power to attract or detract a
viewer’s eyes, and can be applied to lines, shapes, and forms.
 - there are two types of texture: tactile and visual.
1. Tactile textures are three-dimensional and can be touched. The easiest example is tree
bark. When you touch bark, you can feel all the bumps and ridges, the roughness and
smoothness.
2. In digital design, there are currently no touch screens that emulate tactile textures—yet. So
we stick to visual textures.
 Value
- refers to the gradual change of lightness or darkness of a color.
- refers how light or dark an object or element is, independent of its color.
- in painting, value changes can be achieved by adding either black or white to the chosen color.
- most evident on the gray scale where black is represented as lowest or darkest and white is
represented as the highest or lightest value. Or more simply said, they are the various shades of
grey between white and black. Artists us them to create highlights and shadows (shading) in
objects and create depth in their paintings or drawings.
ANATOMY OF A DIGITAL IMAGE
Digitization
- conversion of an analog signal or code into a digital signal or code.
- the conversion of text, pictures, or sound into a digital form that can be processed by a computer.
- the process of converting information into a digital format. In this format, information is organized
into discrete units of data called bits that can be separately addressed usually in multiple-bit groups
called bytes.
- the means for computers to understand ANALOG SIGNALS.
 Digitization works by sampling the ANALOG patterns and converting them to simple numerical
values.
 Converting into “bits” = 1 and 0.
 Analog Signal
- any continuous signal for which the time varying feature (variable) of the signal is a representation
of some other time varying quantity.
- a continuous signal in which one time-varying quantity (such as voltage, pressure, etc.) represents
another time-based variable. In other words, one variable is an analog of the other.
- Ex. EYE >> COLOR; EAR >> PITCH
 Digital Signal
- a digitized analog signal.
- by contrast, express variation in the system’s variable in response to a set of discrete values (more
like a light with an “on/off” switch or a three-way bulb with multiple, discrete levels of output).
 How do we digitize? (Scanning or Digitization)
- Scanning - image-based analog material into digital form.
- Digitization - any analog material into electronic storage, including sound and video.
Anatomy of a Digital Image
 Digital Image
- electronic snapshots taken of a scene or scanned from documents, such as photographs,
manuscripts, printed texts, and artwork.
- a representation of a real image as a set of numbers that can be stored and handled by a digital
computer. In order to translate the image into numbers, it is divided into small areas called pixels
(picture elements).
 Resolution
- Resolution is a measurement that determines how many pixels get packed into a given space,
which in turn controls how big or small they are.
 It’s helpful to think of resolution as pixel density — how closely the pixels are packed together.
 It matters when you print it. In the online realm, it’s the pixel dimensions that matter instead.
- Pixel is the unit of measurement for digital images.
- A high-resolution image is an image with high density of pixels, that is, with several families of pixels
in its composition. The greater the number of pixels, the higher the resolution, providing more
details and better definition to the image.
- Logically, an image with low resolution will have less pixels, less details and definition.
- PPI: Pixels per inch. It is associated with screens of digital devices. Each pixel is equivalent to a
point of light coming from any monitor, then the utility of PPI is to report the quantity of pixels on a
screen inch, with exact 2.54cm.
- DPI: Dots per inch. It is similar to PPI, but the pixels (virtual drive) are replaced by the number of
points (physical drive) in a printed inch. The more dots the image has the higher the quality of the
print (more sharpness and detail). Because it is a reproduction in real size of the images, it requires
more DPI than require PPI for the same file. 300DPI for example, equals
- 118.11 PPI.
 Pixel Density
- refers to how many pixels have been squeezed into a physical amount of space (often an inch).
- usually measured in PPI, which refers to the number of pixels present per inch on the display. A
higher pixel density per inch allows for more sharpness and clarity when using the device.
 Common Resolution Values
Pixel = Screen; Dots = Printed Material
72dpi Web Output
300dpi High Quality Photographs
150ppi Newspaper

 Digital Image: Raster or Vector

- Raster images
 made up of a set grid of dots called pixels, where each pixel is assigned a color value.
 resolution dependent.
 when you change the size of a raster image, you shrink or stretch the pixels themselves, which
can result in a significant loss of clarity and produce very blurry images.
- Vector images
 made up of points, paths, lines, and curves that can be infinitely scaled without any loss in
image quality.
 resolution independent.
 paths are based on mathematical equations that tell monitors and printers exactly how to draw
the image. Because there aren’t any pixels involved, you can make vector images as big or
small as you want, and they’ll still look as smooth and crisp as the original.

Module 2: Adobe Photoshop

INTRODUCTION TO ADOBE PHOTOSHOP
Photoshop
- a raster graphics editor developed and published by Adobe Inc. for macOS and Windows.
- created in 1988 by Thomas and John Knoll.
History
 1987
- platform was on Macintosh.
- used to display gray scale images on a monochrome display.
- called Display.
- from a display software transformed to Photo Editor.
- John sold it first to a scanner manufacturer BarneyScan.
 - renamed to Photoshop.
 1989
- September 1989 Adobe bought Photoshop.
- February 1, 1990.
- Photoshop 1.0.
- included digital color editing and retouching.
 1990
- June 1, Version 2 was released.
- adding Paths, CMYK color and the Pen tool.
- Mark Hamburg.
- Version 2.5 released, first release for Windows OS.
 1994
- Photoshop 3.0 by Tom Knoll.
- included layers.
 1996
- Photoshop 4.0.
- added adjustment layers and macros.
- user Interface.
 1998
- Photoshop 5.0.
- the editable type and the ability to undo actions various times using the History palette.
- Version 5.5 added Save for Web.
 2000
- Photoshop 6.0.
- vector shapes were featured in this version.
- directly type text even without defining a bounding box to it.
- blending options were also added.
 2002
- Photoshop 7.0.
- allowed the users to easily look through folders.
- brushes were also added together with the patch tool.
 Adobe Photoshop Creative Suite (2003)
 Adobe Photoshop Creative Cloud (2013)
Photoshop Interface
 Interface
 Document Window
- the large area in the center of the interface where the image is displayed. It's also where we edit
the image.
- the actual area where the image is visible is known as the canvas. The dark area surrounding
the image is the pasteboard.
 Document Tab
- at the top of the Document window is the document's tab. The tab displays the name and file
type of the document ("AdobeStock_145722872.jpeg") and its current zoom level (25%).
- the tab is also how we switch between document windows when we have more than one image
open in Photoshop.
 Zoom Level & Status
- in the bottom left of the Document window, we find more information about the image. The
current zoom level is displayed, just like it is in the document's tab. And to the right of the zoom
level is the Status Bar. By default, the Status Bar displays the color profile of the image.
 Toolbar
 - also known as the Toolbox or the Tools panel
- where Photoshop holds all of its tools.
- you'll find it along the left of Photoshop's interface. There's tools for making selections, for editing
and retouching images, for painting, adding type or shapes to your document, and more.
A. Selection, cropping, and measuring tools
 Move (V) – moves selections or layers.
 Marquee (M) – makes rectangular, elliptical, single row, and single column selections.
 Lasso (L) – makes freehand, polygonal (straight-edged), and magnetic selections.
 Quick Selection (W) – make selections by painting.
 Crop (C) - crops an image.
 Eyedropper (I) – samples pixels.
B. Retouching and painting tools
 Spot Healing (J) – removes imperfections.
 Brush (B) – paints the foreground color.
 Clone Stamp (S) – paints with a sample of the image.
 History Brush (Y) – paints with the selected state or snapshot.
 Eraser (E) – erases pixels—or reverts to a saved history state.
 Gradient (G) – creates a gradient.
 Blur (no shortcut) – blurs pixels.
 Dodge (O) – lightens pixels in an image.
C. Drawing and type tools
 Pen (P) – draws a vector path.
 Horizontal Type (T) – creates a type layer.
 Path Selection (A) – allows you to manipulate a path.
 Rectangle (U) – draws vector shapes.
D. Navigation tools
 Hand (H) – navigates the page.
 Zoom (Z) – increases and decreases the relative size of the view.
E. Foreground/Background and Quick Mask
 Hidden Tools
- most of the tools in the Toolbar have other tools nested in with them in the same spot. Click and
hold on a tool's icon to view a menu of the other tools hiding behind it.
 Option Bar
- displays options for whichever tool we've selected in the Toolbar. You'll find the Options Bar
along the top of the interface, just above the document window.
 Menu Bar
- where we find various options and commands, all grouped into categories. The File menu, for
example, holds options for opening, saving and closing documents.
 Panels
- along the right of Photoshop's interface is where we find the panels. Panels give us access to all
sorts of commands and options, and there are different panels for different tasks.
- the most important panel is the Layers panel. It's where we add, delete and work with layers in
our document.
 Search Bar
- lets us quickly find tools or commands in Photoshop, as well as tutorials on different topics, or
images from Adobe Stock. To use the Search feature, click on the Search icon (the magnifying
glass) in the upper right of Photoshop.
 Workspaces
- a preset collection and arrangement of the various interface elements. Workspaces can control
which of Photoshop's panels are displayed on the screen, along with how those panels are
arranged.
 - can change the layout of the tools in the Toolbar.
- items in the Menu Bar, along with keyboard shortcuts, can also be customized as part of a
workspace.

PHOTOSHOP COLOR MODES

 Additive Color: Color on Screen
- it takes just three—red, green, and blue—to produce all the colors you see onscreen. So, to
create color, monitors add individual pixels of colored light.
- in the additive color system, areas where red, green, and blue light overlap appear white.
 Subtractive Color: Printed Color
- colors result from a combination of light that’s reflected (which you see) and light that’s absorbed
(which you don’t see).
- a mix of cyan, magenta, and yellow ink absorbs most of the primary colors—red, green, and blue
—so you see what’s left over: dark brown.
 Perceiving color in pigment/ink
 CMY + K =?
- in order to produce true black, grays, and shades of color (colors mixed with black to produce
darker colors), printing presses added black as a fourth printing ink.
 B for black might be confused with blue (as in RGB), so K is used instead — as in “blacK.”
That’s where the abbreviation CMYK comes from.
 Choosing a color mode
- unless you choose a different color mode, Photoshop automatically uses RGB. The Color Mode
menu gives you the following options:
COLOR MODE WHEN TO USE IT
RGB Color For images destined for onscreen viewing or inkjet printing.
CMYK Color For images you plan on sending to a commercial printing press.
Bitmap Restricts you to two colors: black and white. Good for high-contrast
items like black-and-white text documents or creating graphics for
handheld devices that don’t have color.
Grayscale Expands on Bitmap mode by adding shades between pure black and
pure white. The higher the document’s bit depth, the more shades of
gray.
Lab Color Based on the way we see color; it lets you use all the colors human
eyes can detect. Whereas RGB and CMYK modes limit a file’s colors
to what’s visible onscreen or in a printed document, respectively.

Translating Colors from Screen to Print

 WYSIWYG
- (pronounced “wiz-e-wig”)
- an acronym for “What you see is what you get.” It describes the elusive goal of getting prints to
match what’s onscreen.
 Color Accuracy
- The only way to achieve consistent printing results is to know:
 Which printer your image is headed for,
 Which color mode that printer wants the image to be in,
 Which range of colors that printer can reproduce, and
 Exactly what type of paper you’re using.
 Color Gamut
- a color gamut is the range of colors a given device can reproduce.
- while the color ranges of monitors and printers frequently overlap, they’re never identical.
 Color Profile
- a set of instructions that determine how computer monitors and printers display or print your
document’s colors.
- contain detailed info about the printer’s color gamut and, in some cases, the paper you’re using,
though usually that info lives in a separate file called a paper profile.
 Common Generic Color Profiles
- Photoshop comes with a variety of all- purpose, generic profiles, but you can also get profiles
from the printer and paper manufacturers.
 Paper Output Profiles
 Created by manufacturers like Epson, who make profiles to match almost every kind of
paper they sell: glossy, luster, matte, and so on.
 The default color profile is set to “sRGB IEC61966-2.1.”
 Leave this setting alone unless you know you need to use a specific color profile for your
project.
 Monitor Calibration
- to ensure accurate prints, it’s also important to make sure your monitor is displaying color
accurately.
- all computers come with a built-in calibration program.
- for best results, use an external measuring device like a colorimeter or spectrophotometer (hand-
sized gadgets that clamp onto your monitor and measure the color it displays) instead.
- the calibration process involves adjusting your monitor so that it displays a series of colors and
images consistently. Having a calibrated monitor also lets you more accurately preview how
images and colors will print
 Calibrating in Windows
- Open Display Color Calibration by clicking the Start button Picture of the Start button, and then
clicking Control Panel.
- In the search box, type calibrate display, and then click Calibrate display color.
- In Display Color Calibration, click Next to continue.
The Color Channels
At the heart of any Photoshop file lie channels—storage containers for all the color information in
your image, selections you’ve saved, masks you’ve created, and instructions for printing with special
inks.
Kinds of Channels
 Composite Channels
- technically, these aren’t really channels; they’re combinations of channels and are for your
viewing pleasure only.
 Alpha Channel
- grayscale representations of a temporary selection you’re in the process of making using Quick
Mask mode, or a selection that you’ve saved in your Photoshop document.
 Spot Channel
- used only in commercial printing, these channels let you define areas in your image that should
be printed with special premixed inks (like Pantone colors).

Module 3: Photoshop Tools and Effects

TOOLS AND CONCEPTS
Distinguishing File Formats
File → Save
Mac: press ⌘ - S
PC: Ctrl + S on a PC
The Save As dialog box lets you save a copy of your file with a different name in a different location
and in a different format.

 PSD (Photoshop Document)

Adobe Photoshop’s native format that keeps all your layers and Smart Objects intact in case you
need to go back and change them later. This is the format you want to use while editing images.
 Print Output
File Format When To Use
TIFF Considered the print-safe gold standard, and works with almost any
(Tagged Image File Format) program. Saving a file in this files format doesn’t compress it, so the
quality remains as good as that of the original.
PDF While it can compress files, it doesn’t do so automatically, which makes
(Portable Document Format) it perfect for images you plan to print, plus it preserves the smooth
edges of vectors. And if you need to email the file or upload it to an
online print company, PDF is a better choice than TIFF because PDFs
were designed for online use.
EPS Ideal for multi-tonal image (Printing Duotone (Multi-tonal) Images) or one
(Encapsulated Postscript) with spot colors.

 Web Output
File Format When To Use
JPEG Commonly used for graphics that include a wide range of colors, like
(Joint Photographic Experts photos. It compresses images so they take up less space, but the
Group)
smaller file size comes at a price: loss of quality.
GIF Use GIF for images with solid blocks of color. If you’re dealing with line
(Graphics Interchange Format) art or images made from areas of solid color (logos, comic strips, and so
on).
PNG Use PNG for super high-quality files. If quality is more important than
(Portable Network Graphics) download speed, save your image as a PNG. It also offers true
transparency and better image quality than a JPEG, but it generates
larger files.
WBMP Use for black-and-white images headed for mobile devices. If you’re
(Wireless Bitmap) designing black-and-white images for handheld devices (cell-phones,
smartphones, and so on), choose WBMP.
*Note on transparencies
 use GIF or PNG for images with transparent backgrounds.
 use one of these formats when you want a graphic (a logo, say) to blend seamlessly
into the background of a web page.
Image Resampling: Compression and Interpolation
 Resampling
- Resampling is the process by which Photoshop responds to your size-change request by either
adding or subtracting pixels.
Two Kinds of Resampling
- Downsampling – to make an image smaller, you have to decrease its pixel dimensions.
- Upsampling – when you upsample, Photoshop adds pixels that weren’t originally there through
a mathematical process called interpolation, in which it uses the pixels that are there to guess
what the new ones should look like.
 Resampling through the IMAGE SIZE dialog box
- Resampling On – which tells the program to increase or decrease the number of pixels in the
image—processes that reduce image quality because Photoshop either invents pixels or picks
ones to eliminate, respectively.
- Resampling Off – protect the image’s quality by locking the pixel dimensions. This lets you
fiddle with the resolution without altering the quality because you’re just changing pixel size, not
pixel quantity.
 Application Frame
- when you launch Photoshop CS6 for the first time, you’re greeted by the Application Frame. This
frame confines all things Photoshop to a single resizable and movable window.
 Options Bar
- lording over the document window is the Options bar, which lets you customize the behavior of
nearly every item in the Tools panel. This bar automatically changes to include settings related to
the tool you’re currently using.
 Screen Modes
- Photoshop includes three different screen modes for your document-viewing pleasure.
Depending on what you’re doing, one will suit you better than the others.
- Ex. Standard Screen Mode, Full Screen Mode with Menu Bar
 Panels
- the right side of the Application Frame is home to a slew of small windows called panels (years
ago, they were called palettes), which let you work with commonly used features like colors,
adjustments, layers, and so on.
- you’re free to organize the panels however you like and position them anywhere you want.
Panels can be free floating or docked (attached) to the top, bottom, left, or right sides of your
screen. And you can link panels together into groups, which you can then move around.
 Collapse Panels
 Grouping Panels
 Docking Panels
 Tools Panels
- the Tools is the home base for all of Photoshop’s editing tools, and it’s included in all the built-in
workspaces.
- when you first launch the program, you’ll see the Tools panel on the left side of the screen, but
you can drag it anywhere you want by clicking the tiny row of vertical dashes near its top.
 Undo
- you’ve got several ways to retrace your steps, including the lifesaving Undo command.
Just choose Edit → Undo or press ⌘ - Z (Ctrl + Z on a PC).
- if you need to go back more than one step, use the Step Backward command instead:
Choose Edit → Step Backward or press Option - ⌘ - Z (Alt + Ctrl + Z on a PC).
- out of the box, this command lets you undo the last 20 things you did, one at a time.
 History Panel
- the History panel lets you jump back several steps at once. It gives you a nice list of exactly what
you’ve done to the image—in chronological order from top to bottom—letting you pinpoint the
exact state you want to jump back to.
- history states don’t hang around forever: As soon as you close the document, states are deleted.
- take a snapshot instead.
 Create New Document
- File → New, but it’s faster to press ⌘ - N (Ctrl + N on a PC). Either way, you’ll be greeted with
the New dialog box.
 Opening and Saving
- the simplest method is to choose File → Save or press ⌘ - S (Ctrl + S on a PC).
 - if you haven’t previously saved the file, Photoshop summons the Save As dialog box so you can
pick where to save the file, give it a name, and choose a file format (your options are explained
in the next section).

 Moving Objects
- the move tool allows you to move a selection or entire layer by dragging it with your mouse or
using your keyboard arrows keys. When the move tool is selected, click and drag anywhere in
the image. By default, if an area is selected the selection will be moved, otherwise the whole
layer will be moved. See the options bar for more options.
- alternatively, use your arrow keys to move the selection or layer in small increments.
 Changing you View
- Zoom Tool
- Zoom tool, which looks like a magnifying glass. You can click its icon at the bottom of the Tools
panel or simply press Z.
- hold down your mouse button, and drag right to zoom in or left to zoom out.
- you can also zoom using your keyboard, which is faster if your hands are already on it: Press ⌘
and the + or – key (Ctrl + plus or Ctrl + minus).
 Hand Tool
- once you’ve zoomed in on an image, you can use the Hand tool to move to another area without
zooming back out.
- grab this tool from the Tools panel or just press and hold the space bar on your keyboard.
 Guides and Rulers
- before you can create guides, you need to turn on Photoshop’s rulers.
- the fastest way to do that is by pressing ⌘ - R (Ctrl + R on a PC), but you can also turn them on
by choosing View → Rulers.
- once you’ve turned rulers on, you can add a guide by clicking either the horizontal or vertical
ruler, and then dragging the guide into your document.
 Using the Document Grid
- if you want lots of guides without all the work of placing them, you can add a grid to your image
instead by choosing View → Show → Grid.
Layers Basics
 Activating a Layer
- about the easiest thing you’ll ever do in Photoshop is activate a layer — just mouse over to the
Layers panel and click the layer you want to work on.
 The Layers Panel
 Hiding and Showing Layers
- the little visibility eye to the left of each layer lets you turn that layer off and on.
 Restacking Layers
- once you start adding layers, you can change their stacking order—the order they’re listed in the
Layers panel—to control what’s visible and what’s not.
 Duplicating Layers
- press ⌘ - J (Ctrl + J on a PC) or choose Layer → New → “Layer via Copy” to copy the active
layer onto another layer just like it.
 Renaming Layers
- double-click a layer’s name in the Layers panel and rename it right there (Photoshop highlights
the name when you double-click it, so you can just start typing). When you’re done, press Return
(Enter on a PC).
 Deleting Layers
 - to delete a layer (save for a locked Background layer), activate it in the Layers panel and then do
one of the following:
- press Delete (Backspace on a PC).
- drag it onto the trash can Control at the bottom of the Layers panel.
- click the trash can icon.

 Copying and Pasting Layers

to copy and paste a whole layer into another document:
- choose Select → All (or press ⌘ - A [Ctrl + A]) to select everything on the layer and then press
⌘ - C (Ctrl + C).
- next, click the other document’s window and press ⌘-V (Ctrl + V) to add the layer
to copy part of a layer into another document:
- create your selection first and then press ⌘ - C (Ctrl + C on a PC) to copy it. Then open the
other document and press ⌘ - V (Ctrl + V); Photoshop pastes those pixels onto a new layer.
 Linking Layers
- if you need to move something in your image that’s made from several layers, you can link layers
before you grab the Move tool so that they travel as a single unit.
 Locking with Layers
- you can add a more serious level of protection with layer locks, which prevent layers from being
edited or moved. At the top of the Layers panel is a row of four buttons that you can use to lock
various aspects of layers.
 Lock transparent pixels.
- this protects the layer’s transparent pixels, so they don’t change even if you paint across
them or run the Edit → Fill command.
 Lock image pixels.
- this won’t let you do anything to a layer but nudge it around with the Move tool. The
button for this lock looks like the Brush tool.
 Lock position.
- if you’ve carefully positioned a layer and want to make sure it stays put, click this button,
which looks like a four-headed arrow. You can still edit the layer; you just can’t move it.
 Lock all.
- this is your deadbolt: Use it to prevent the layer from being edited or moved. You know
this lock means business because its button is a padlock.
 Resizing & Rotating Layers
- to resize the contents of a layer—or many layers—without changing the size of your document,
you can use the Free Transform tool.
- to resize the contents of a layer—or many layers—without changing the size of your document,
you can use the Free Transform tool.
 grab any of the white corner handles and drag diagonally inward to decrease the layer
content’s size.
 to resize the content proportionately so it doesn’t get squished or stretched, hold down the
Shift key as you drag.
- to rotate the layer(s), position your cursor outside the bounding box and then — when the cursor
turns into a curved, double-headed arrow — drag up or down in the direction you want to turn the
layer(s).
 Group Layers into Folders
- you can rein in a fast growing Layers panel by tucking layers into folders called layer groups.
 Merging Layers
 - to merge two visible layers that live next to each other in the Layers panel—and the bottom one
is a pixel-based layer—activate the top layer and then choose Layer → Merge Down, choose
Merge Down from the Layers panel’s menu
- or press ⌘ - E (Ctrl + E on a PC).\
 Filling a Layer with Color
- one of the most common things you’ll do with a new layer is fill it with color.
- Fill an existing layer with color.
- Edit → Fill
- you can also fill the active layer with your foreground color by pressing Option-Delete (Alt +
Backspace on a PC), or your background color by pressing ⌘ - Delete (Ctrl + Delete on a PC).
 Create a Fill Layer
- if you’re not sure which color you want to use, choose Layer → New Fill Layer → Solid Color, or
click the half-black/half-white circle at the bottom of the Layers panel and choose Solid Color.
- Fill layers also come with their own layer masks, making it super simple to hide part of the layer if
you need to.
- unlike image layers, the whole layer gets filled with color even if you enlarge the canvas.
- in addition to using Fill layers to create solid backgrounds, you can use them to fill a layer with a
gradient or a repeating pattern.
EFFECTS AND IMAGE MANIPULATION
Smart Objects
A Smart Object is a containerlike layer into which you can put all kinds of objects from
different programs like Raw files, vectors, whole PSD files, and even other layers.
Smart Objects are smart because Photoshop remembers the original content and what
program created it, which lets you do the following:
1. Transform or resize it without losing quality
2. Compress a bunch of layers into a single layer nondestructively
3. Run filters nondestructively
4. Update multiple instances of the same content
5. Swap content
 Creating Smart Objects
- how you create a Smart Object depends on two things: where the original content lives and
which document you want to put it in. Here are your options:
- to create a new document containing a file that lives on your hard drive, choose File → “Open
as Smart Object.”
- to import a file into a document that’s currently open, choose File → Place.
- copy and paste an Adobe Illustrator file.
- to turn existing layers into a Smart Object in the current document, activate the layer(s) and then
choose “Convert to Smart Object” from the Layers panel’s menu.
 Managing Smart Objects
- once you’ve created a Smart Object, you can duplicate it, edit it, and export its contents.
- you'll find the following options in both the Layer → Smart Objects sub-menu and the shortcut
menu by right-clicking near the layer’s name in the Layers panel
- some of the options available are:
 edit contents
 replace contents
 export contents
Filters
- Photoshop’s filters let you create a multitude of special effects that you can apply to images or
use to conjure interesting backgrounds.
 - you can run filters on image layers, masks, channels, Smart Objects, Shape layers, and even
Type layers.
 Filter Gallery
- with so many filters to choose from, it can be tough to get a handle on what they all do. That’s
why several filters—those in the Artistic, Brush Strokes, Distort, Sketch, Stylize, and Texture
categories— summon a large dialog box called the Filter Gallery.
- access: Filter Menu → Filter Gallery.

 Smart Filters
- Filters, by their very nature, are destructive—but if you convert a layer into a Smart Object, you
can make the filter run on its own layer, complete with blend mode and opacity controls. It even
comes with a layer mask.
to create smart filters:
- Filter → “Convert for Smart Filters.”
- or convert the layer to a smart object then apply a filter from the Filter menu.
Replacing Color
 Replace Color
- this command works really well if the color you want to replace is fairly consistent and
concentrated in one area.
- choose Image → Adjustments → Replace color.
- you can use the eyedropper tools to add to or subtract from the range of colors you want to
change.
 Selective Color Adjustment Layer
- this lets you make a single color in your image brighter or darker—helpful when you need to
make whites whiter or blacks blacker.
- you can also use them to shift one color to another.
- choose Layer → New Adjustment Layer → Selective Color.
Layer Styles
 Layer Styles is a set of 10 fully adjustable, ready-made special effects for layers that you can
apply in all kinds of cool ways.
- they're nondestructive and they remain editable.
- Layer styles are great for adding finishing touches to your designs, and they can really make text
and graphical elements pop
 Managing Layer Styles
- if you Control-click (right-click) a style in the Layers panel, you see a shortcut menu with these
options:
 Disable Layer Effects – turns off all the styles on that layer.
 Copy Layer Style – copies all the styles you’ve applied to the active layer so you can apply
them to other layers.
 Global Light
- tells Photoshop to use the same lighting angle in every style you add, which is useful when
you’re applying drop shadows or inner shadows.
- Scale Effects.
- lets you resize the style itself, independent of the layer’s contents, by entering a percentage.
Styles Panel
 Photoshop comes with all kinds of layer style presets made from some pretty psychedelic style
combinations.
 to get at them, open the Styles panel by clicking its tab in the panel dock on the right side of your
screen or by choosing Window → Styles.
Gradients
 in the middle of the Gradient Editor dialog box are little colored squares called color stops () that
you can drag around to control the width of the color fade.
 when you click a stop, its color appears in the Color field (also called a color well) at the bottom
of the dialog box. To change the stop’s color, click the color well to make Photoshop open the
Color Picker so you can choose another color. If you click between existing color stops, you’ll add
a new stop. Once you click a color stop, tiny diamonds appear beneath the gradient that you can
drag left and right to determine where one color stops and another one starts.
 to change the stop’s color, click the color well to make Photoshop open the Color Picker so you
can choose another color. If you click between existing color stops, you’ll add a new stop. Once
you click a color stop, tiny diamonds appear beneath the gradient that you can drag left and right
to determine where one color stops and another one starts.

Module 4: Typography and Retouching Techniques

TYPOGRAPHY ESSENTIALS
 Typography 101
- the act of creating text is something of an art form called typography.
- Typography may also be defined as the theory and practice of letter and typeface design. In
other words, it is an art concerned with design elements that can be applied to the letters and
text (as opposed to, say, images, tables, or other visual enhancements) on a printed page.
 Typesetting
- in the early days of print, text and symbol wrangling was handled by exacting craftsmen called
typesetters, who lovingly hammered letterforms into metal plates that were then physically set
onto printing presses (hence the phrase, setting type).
- with the advent of desktop publishing, however, it became easier to work with text, hence
anybody could join in. But, as you might suspect, the quality of typography has suffered
since most folks lack professional training.
 Good / Bad Typography
- left: When formatted well, text can be a beautiful and powerful form of art.
- right: Done badly, text can be garish and difficult to read.
 Common Typographic Offenses
1) overusing decorative fonts and using too many fonts per design.
2) setting whole sentences in capital letters.
3) setting whole sentences in lowercase letters.
 Glyphs
- at the heart of typography lies the glyph, a unique graphical representation of a letter, number,
punctuation mark, or pictographic symbol.
 Typeface vs Font
- in the digital realm, a collection of glyphs is called a typeface or font.
- typeface is the overall shape or design of the glyphs.
- font is the specific size, style, and weight.
 Font Family
- Font family is a collection of various weights and widths of the same design.
 Common Font Formats in Photoshop
- Fonts come in various formats that determine how and what kind of information gets stored in
each font file and ultimately, how they print.
- these days font format isn’t an issue since any printer with equipment less than 15 years old can
print any format.
 Font Description
PostScript Font Most graphic design pros consider this format the safest and most reliable
for printing because it’s been around for years (it comes in both Mac and
Windows flavors). This format produces high-quality text when printed on
PostScript devices like laser printers and professional printing presses.
TrueType Developed jointly by Apple and Microsoft, TrueType is the most common
font format, and it’s what you’ll find in both the Mac and Windows operating
systems. TrueType fonts for Windows can be used on Macs, but not vice
versa.
OpenType This format, created by Microsoft and Adobe, is the new standard. They can
store more than 65,000 different glyphs in one font file. This makes them
ideal for decorative and pictorial languages and for other fancy typographic
goodness like ligatures and stylistic alternates.

 Font Categories
- there are a few basic principles for choosing a font that’s appropriate to your message — one
that will reinforce it rather than distract from it.
 Serif
- these fonts have little lines (serifs) extending from their letters’ main strokes that
resemble tiny feet.
- Serifs are great for large bodies of text like books, newspapers, or magazines
where legibility is paramount.
- however, they’re not so good for large bodies of online text.
 Sans serif
- Fonts lacking the aforementioned feet are called sans serif (“sans” means “without”).
- they’re perfect for headlines, subheads, and online body copy since they display
well at small sizes.
 Slab serif
- these fonts have uniform main strokes, thick serifs, and often appear bolded.
- use them when you want to attract attention, or when printing body copy under
less-than-optimal conditions (cheap paper, cheap printer, or fax machine).
 Decorative, Display
- this group includes all kinds of distinctive, eye-catching fonts, from the big and bold, to
the swirly, to letters made out of bunnies.
- though gloriously unusual, they’re harder to read due to the extra ornamentation or
stroke thickness. Use them sparingly and on small blocks of text (perhaps a single
word).
 Scripts
- casual scripts are designed to look as though they were drawn (quickly) by hand.
Formal scripts have carefully crafted strokes that actually join the letters together, like
cursive handwriting.
- use casual scripts for small blocks of text (because they can be hard to read), and
reserve formal scripts for fancy announcements (weddings, graduations etc.)
 Font Styles
- most fonts include several styles (variations) like bold, semi bold, italic, condensed, and so on.
 Native or Built-in Style
- when these styles are included in the font itself (meaning they were designed by the
font’s creator).
 Simulated or Faux Style
 - if the font doesn’t include a bold or italic version, Photoshop can fake it for you.
 Previewing Fonts
- Photoshop shows you an example of each font in the font family in the Options bar.
Creating & Editing Text in Photoshop
 Type Layers
- no matter what kind of text you create, it lives on a special layer called a Type layer. You can do
anything to a Type layer that you can with any other layer: adjust its opacity, change its blend
mode, apply layer styles, and so on.
- Type layers are labeled with a big fat T in the Layers panel. Photoshop automatically names
each new Type layer with the first few words you type, though like any other layer, you can
double-click its name in the Layers panel to rename it.
 Point Text vs. Paragraph Text
- chances are, most of the text you’ll create in Photoshop will be point text, which starts at a
certain spot (or point) and continues along a single line. To create point text, just activate the
Type tool, click in your document, and start typing.
- Paragraph text is text that lives inside a box, and when you create this kind of text, Photoshop
makes your prose flow from line to line all by itself.
 to create paragraph text, activate the Type tool and then either drag in your document to
draw a box.
 Resizing Text
1. you can resize text by highlighting and then altering the point size in either the Options bar or
Character panel.
2. you can resize it visually: activate a Type layer in the Layers panel and then click within the
line of text the press CTRL. Use Free Transform Command (CTRL+T).
Formatting Text
 Formatting with the Options Bar
- when you have the Type tool active, the Options bar offers basic text-tweakers such as font
family, style, size, antialiasing, alignment, and color.
 Formatting with the Character Panel
- includes all the settings found in the Options bar when you’re using the Type tool, plus it lets you
control the space in and around individual characters, where they sit on a line, the height of the
line, and more.
 Adjusting Leading
- leading controls the amount of blank space between lines of text.
 Adjusting Kerning
- Kerning means adjusting the amount of space between pairs of letters.
 Adjusting Tracking
- to change the spacing between all letters in a word by the same amount, you need to adjust
tracking. This adjustment is great when you’re trying to make text fit into a small area.
 Adjusting Baseline Shift
- the invisible line onto which text sits is called its baseline. Changing this line can make a
character appear higher or lower than other characters on the same line.
 The Paragraph Panel
- Panel Menu.
- Add space before & after paragraph.
- Alignment.
- Indent first line.
- Indent left & right margin.
- Justify (Last left, Last centered, Last right, All)
Page-Layout Formats
 Mondrian Layout
- referring to the concept from Piet Mondrian (Dutch). The layout refers to the forms
square/landscape/portrait, where each field is parallel to the field of presentation and load the
image/copy of each fused to form a composition that conceptual.
 Picture-Window Layout
- the object shown is focus more and in close-up.
- Picture Window is a vertical layout style characterized by a large picture at the top, with a
headline and body copy below.
 Copy-Heavy Layout
- the layout concentrated to the copy writing (dominated by text).
- Copy-Heavy layout is used by the designer when there is too much of information needs to be
imparted to the consumer that cannot be avoided.
 Circus Layout
- composition of elements are irregular.
- Circus layout style is characterized by the use of a wide variety of shapes and sizes of design
elements.
 Multi Panel Layout
- the layout is divided into several theme in same shape (square/cube/etc.)
- Multi Panel Layout is also known as “Comic–Strip Layout” and “Story Board Layout”.
- this type of layout displays the images along with the headlines in a compartment type series.
Also the headlines are arranged in such a way that clears the placement of the image in form of
description.
 Silhouette Layout
- layout in the form of illustrations or photographic technique.
- only highlighted the shadow. The presentation can be shaped Text-Rap/spot color illustration or
refracted light image pickup with photographic techniques.
 Rebus Layout
- layout shown text and image. The layout forming a story.
- this layout style is characterized by a headline with some of the words replaced with pictures or
images.
 Alphabet-Inspired Layout
- that layout emphasize the arrangement of letter of numbers in sequence or from a word and
improved for giving rise to the impression of narrative (story).
RETOUCHING TECHNIQUES
Image Adjustments
 2 Ways to Apply Image Adjustments
Photoshop lets you apply most adjustments in two different ways.
- one way is to run the adjustment on the currently active layer, in which case Photoshop
permanently applies the change to your image.
- another way is to use Adjustment layers, wherein the change happens on a separate layer,
thereby preserving your original image and giving you the ability to tweak the adjustment later by
popping open its Properties panel.
 3 Categories of Brightness Values that make up your images:
- Shadows are created when light is blocked. Rarely jet black, shadows can be different colors
depending on how much light is blocked.
- Highlights represent the lightest or brightest parts of an image, where the light is at full strength.
When an image is overexposed, the highlights are described as blown out.
- Midtones are tonal values that fall between the darkest shadows and lightest highlights. By
enhancing midtones, you can increase the contrast and the details in an image.
Quick Commands
 Fixing Color
- if your image looks flat (like it has no contrast) or has a noticeable color cast, give the following
methods a spin:
 Auto Color – when you run it, Photoshop hunts down the image’s shadows, highlights, and
midtones and changes their color values.
 Color Balance – this adjustment changes the overall mixture of colors in an image or
selection by shifting the highlights, midtones, and shadows to opposite sides of the color
wheel.
 Photo Filter – to change an image’s mood, you can add a Photo Filter Adjustment layer to
warm it up with a golden tint or cool it off with a bluish tint, for example.
 Fixing Lighting
 Auto Tone – this adjustment brightens your image, adding a bit of contrast.
 Auto Contrast – it increases the contrast in an image by lightening and darkening pixels.
 Shadows/Highlights – lightens shadows or darkens highlights.
 Equalize – this adjustment evens out the pixels’ brightness by turning the lightest ones
white and the darkest ones black.
Adjustments Layers
- Adjustment layers affect each and every layer beneath them.
- to restrict the adjustment to only the layer directly below the Adjustment layer, click the leftmost
button at the bottom of the Properties panel (it looks like a tiny square with a downward-pointing
arrow next to it).
 Shadows/Highlights Adjustments
- this command can bring your photo back to life by analyzing each pixel and then adjusting it
according to the lightness values of neighboring pixels.
Using Levels
- with a single Levels adjustment, you can fix lighting problems, increase contrast, and—in some
cases—balance the color in your image.
 Histograms
- a Histogram is a visual representation—a collection of tiny bar graphs, to be precise—of the info
contained in an image.
- its width represents your image’s tonal range—the range of colors between the darkest and
lightest pixels—on a scale of 0 to 255. Pure black (0) is on the far left, and pure white (255) is on
the far right. All told, the histogram measures 256 values.
 Histogram Readings: For Contrast and Brightness Info
 Optimizing tonality
- in Histogram, where a broad tonal range with full detail in the shadows and highlights is
present, the information will extend right across the horizontal axis. The Histogram
below indicates missing information in the highlights (right) and some loss of information
in the shadows (left).
 Brightness
- with overexposure the graph will peak on the right side (level 255) of the Histogram.
With underexposure the graph will peak on the left side (level 0) of the Histogram.
 Contrast
- if image contrast is too low the Histogram will not extend to either end on the horizontal
axis.
- if image contrast is too high a peak will be evident at either end of the Histogram.
 Understanding Histogram
- for example, if the far-left black point has a high spike, your picture has areas that show a pure
black tone.
 - to understand how a Histogram represents a photograph, check out these examples. Some of
these examples are intentional exaggerations for the purpose of clarity. Most of your own images
will probably be easier to deal with than these examples. We simply want to show you that the
Histogram is easy to understand, even if you’re not a math whiz.
most of your images will have one of five basic Histogram shapes:
- a skew to the left: underexposed images don’t have a true white point.
- a skew to the right: these Histograms have no rich blacks and are generally the result of an
overexposed image.
- no data on both ends: these Histograms are quite often the result of a low-contrast image with
no true blacks or whites.
- a bell curve: when the tone points reach the ends of the graph, you’re likely to find a properly
exposed image.
- an inversed bell curve: these kinds of histograms come from high contrast images resulting
from direct sunlight. These kinds of images are the most difficult to make tone corrections to.
 Curves
- the basic idea is that, by curving a diagonal line on a grid, you change the brightness of the
pixels in an image.

Module 5: Digital Painting

INTRODUCTION TO DIGITAL PAINTING
Digital Painting
- an emerging art form, in which the traditional forms and techniques of painting are digitally
applied by means of a computer, a hardware interface and software like, Adobe Illustrator or
Adobe Photoshop. The result is an original work of art in a digital bitmap file format.
- Digital Painting is created on the computer using a graphics program, a virtual paintbox with
brushes, colors and other supplies.
 Common Brush Settings
- Brush (B)
- Brush Settings (F5)
 Brush Presets – fun settings that can be extremely useful for various things.
 A preview of your selected brush and how it will behave if used.
 Brush Selection – here is the brush you selected. You can of course select other currently
loaded brushes here, too.
 Diameter – the size of your brush can be adjusted here. You can also find other options
here that affect the shape of your selected brush in multiple ways.
 Hardness – dates if your brush has crisp edges (100%), or soft fuzzy edges (0%).
 Spacing – when ticked – allows you to space out the times of your brush making a mark on
the canvas, with 0% being a seamless line.
 Shape Dynamics – a very useful setting. They can create a tapered brush stroke, as well
as various other things like change the roundness and angle of the brush.
 Size Jitter – controls the tapering of a brush. You can either set this manually with a slider
for a more random result, or use the dropdown menu to choose something more controlled:
 Fade – the brush strokes fades from original size to minimum size.
 Pen Pressure – depending on the pressure you exert with your pen on the tablet, the
size changes.
 Pen Tilt – depending on the tilt of your pen, the size changes.
 Stylus Wheel – only works if you have the Wacom Airbrush Pen, as this has a wheel.
 Angle Jitter – comes in useful when you need variation in your brush strokes, especially
when working with texture brushes. The slider again gives you a random result, while the
dropdown provides the same controlled options as the Size Jitter, plus these gems:
  Initial Direction – this keeps the brush static, and thus at the same angle it was at
when you started making the stroke, no matter if you draw wavy lines or spirals. Can
come in useful for certain things.
 Direction – the genius among the settings. It changes the angle of your brush
according to your brush strokes - if you make a turn with your pen, the brush will follow.
This is extremely useful when painting embellishments with special shape brushes on
anything that is not flat, like fabric, scimitar or katana blades, or anything else you can
think of.
 Roundness Jitter – great on its own, or in combination with the Angle Jitter. It squishes
your brush, and this can be useful to create the illusion of let's say polka dots on a tabletop
- they don't look round unless you look at them straight on. The slider once more gives you
random results, while the dropdown menu is the very same as the one for the Size Jitter.
 Other Dynamics – despite a name that seems like an afterthought, it probably is the most
important settings. Without them, you will have a hard time doing anything. They are the
turpentine of digital paint, letting you dilute your colors and create layered washes.
 Opacity Jitter – contrast the opposite of your brush, or the transparency if you will. Setting
this to Pen Pressure is the in and out of the digital painting, as it lets you control how much
paint you want on your canvas at any given point in time, although the slider option can
give you some funky results too and can be useful for certain things.
 Flow Jitter – almost the same as the Opacity Jitter but controls the flow of the paint from
your brush. If on, it is a bit denser than the Opacity Jitter.
 Scattering – great for quite a few things, from creating star fields to leaves on trees to
freckles and textures.
 Scatter – lets you set the main action of the brush, either by using the slider, or the
dropdown menu which will give you the same options as with the previously discussed
settings, or both. Ticking Both Axes will make the brush stroke appear more linear and
controlled, which can be useful for certain things.
 Count – refers to the brush count; in effect, how many brush specks you see on the
canvas. Upping the Count lets the scatter increase in density. This can be useful for
painting the base of the foliage or give an area just a hint of a texture while getting good
coverage.
 Count Jitter – only works if you choose to up the Count. It varies the count of brush
specks on your canvas, either at random with the slider, or in a more controlled way
with dropdown menu.
Sketching
- an essential part of the design process. Transferring your first idea to paper enables you to get a
first glimpse of what will become of the final work; make changes; and remove and redo parts of
your design, illustration, artwork, or architecture plan.
 Sketching in Photoshop
1. Configure your workspace.
- Begin by creating a new document in Photoshop, measuring whatever size you prefer,
which has a white background.
- Once you have your workspace ready and the Brush Tool selected, click on the icon
“toggle the brush panel” located in the top left-hand corner to display the brush panel.
2. Choose the shape of the brush tip.
- For the brush to have a pencil effect you should choose the Soft Round tip and set the size
to 30px.
- Although this size can be adjusted to suit the size you have chosen for your canvas.
3. Change the Dynamics of your brush.
 - Click on “Shape Dynamics” to select the box. Once you’ve done so and opened up the
different options, you’ll be able to change the “Size Jitter”. Changing this will allow you to
change the shape of the brush stroke.
- Suggested setting is between 30 and 40%, depending on your personal preference. Play
around with different options until you are happy with the result.
4. Add texture.
- In the list on the left side of the brush panel, you will find the option “Texture”. Click to
activate this option and, within the new panel, you’ll find a section with different default
textures.
- Select the texture called “Ant Farm” and make sure “Invert” has not been activated.
- Amongst the different texture settings you can also change the “Scale”, which changes the
proportion of the texture in the brush stroke.
- Recommended setting is between 30 and 40%.
- Below, you can control the “Brightness”, which changes how visible the texture is.
- For this brush, it is best to set the brightness at -100.Also, activate “Texture Each Tip” and
for “Mode” select “Subtract”.
5. Choose the opacity.
- Activate the option “Transfer” on the left side panel. On the right, you’ll find the opacity
settings. Choose 50%.
6. Soften the stroke.
- You will also find the option “Smoothing”. If you activate it, the pencil brushstroke will be
smoother, like graphite.
7. Save your brush for sketching.
- To save the presets of your new brush, all you have to do is click on the menu in the top
right-hand corner of the brush panel window and choose “New Brush Preset”. It will open a
window so that you can choose the name to save your brush as.
- The next time you want to use it, you’ll find it in your brush menu.
COLOR THEORY
- the basis for the primary rules and guidelines that surround color and its use in creating
aesthetically pleasing visuals.
- by understanding color theory basics, you can begin to parse the logical structure of color for
yourself to create and use color pallets more strategically.
- the result means evoking a particular emotion, vibe, or aesthetic.
The Color Wheel
 Color Wheel
- a color circle, based on red, yellow and blue, is traditional in the field of art.
- Sir Isaac Newton developed the first circular diagram of colors in 1666.
- artists and designers still use it to develop color harmonies, mixing and palettes.
- the color wheel consists of three primary colors (red, yellow, blue), three secondary colors
(colors created when primary colors are mixed: green, orange, purple) and six tertiary colors
(colors made from primary and secondary colors, such as blue-green or red-violet).
 Primary Colors
- Primary Colors: red, yellow, and blue
- in traditional color theory (used in paint and pigments), primary colors are the 3 pigment colors
that cannot be mixed or formed by any combination of other colors.
- all other colors are derived from these 3 hues.
 Secondary Colors
- Secondary Colors: green, orange, and purple
- these are the colors formed by mixing the primary colors.
 Tertiary Colors
 - Tertiary Colors: yellow-orange, red-orange, red-purple, blue-purple, blue-green & yellow-green
- these are the colors formed by mixing a primary and a secondary color.
Color Schemes
 Selecting Color Schemes
- if you’re picking a color scheme for your project, you usually begin by choosing a main (or base)
color.
 this color can come from a piece of art that you’re starting with (like a logo or photo) or it
can be a color that you want to build your design around.
- the Color Wheel gives you opportunities to create brighter, lighter, softer, and darker colors by
mixing white, black, and gray with the original colors.

 these creates the color variants:

 Hue
 Tint
 Tone
 Shade
- Hue is pretty much synonymous to what we actually mean when we say the word "color."
 all of the primary and secondary colors, for instance, are "hues."
- Shade is the color that you get when you add black to any given hue.
 the various "shades" just refer to how much black you're adding.
- Tint is the opposite of a shade, but people don't often distinguish between a color's shade and a
color's tint.
 you get a different tint when you add white to a color. So, a color can have a range of both
shades and tints.
- Tone and saturation essentially mean the same thing, but most people will use saturation if
they're talking about colors being created for digital images.
 you can also add both white and black to a color to create a tone.
 Using A Color Wheel
- you need to pick the main color you want the color scheme to revolve around and then find it on
the color wheel. Then you can use one of the following color scheme harmonies to help you pick
other colors that go well with it.
 Common Color Schemes
- Complementary color scheme is based on the use of two colors directly across from each
other on the color wheel and relevant tints of those colors.
 The complementary color scheme provides the greatest amount of color contrast.
- Analogous color schemes are formed by pairing one main color with the two colors directly
next to it on the color wheel.
 Analogous structures do not create themes with high contrasting colors, so they're typically
used to create a softer, less contrasting design.
- Triadic color schemes are created by choosing three colors that are equally placed in lines
around the color wheel.
 Triadic color schemes offer high contrasting color schemes while retaining the same tone.
 Using the Kuler Panel
- Kuler is an amazingly useful, community-driven color scheme generator that debuted back in
Photoshop CS4.
- You can choose from many themes—Kuler’s name for color schemes—that folk in the Kuler
community have created.
- Window → Extensions → Kuler
 Color Picker
 - to choose the color you want to paint with, click the foreground color chip at the bottom of the
Tools panel to open the Color Picker.
- if you’re not trying to summon a specific color value, simply pick a color by selecting it in the big,
square color field on the left side of the dialog box; use the color slider to the right of the field to
pick a different range of colors.
 Eyedropper Tool
- when you’re developing a color scheme, you may want to start by grabbing colors that are
already in your image.
- the Eyedropper tool is perfect for that job, and it includes a handy Sample Ring that lets you
more accurately snatch the exact color you’re after.
- grab the tool by pressing I, mouse over to your image, and then click once to make your
foreground color chip match the color your cursor is over.
- if you want to hunt around for a good color, press your mouse button and drag around your
image until you find just the right hue, and then let go of your mouse to choose it.
- to use the Eyedropper tool to set your background color chip, Option-click (Alt-click on a PC)
your image instead.
 Loading Color Libraries
- maybe a client has given you specific colors to match or you’re creating a piece of art that needs
to mesh with another designer’s work. Enter Photoshop’s built-in color libraries, which feature
specialized color collections.
 the most popular library is the Pantone Matching System (PMS), which lets designers keep
colors consistent across projects. Each PMS color has a number corresponding to a very
specific ink mixture that lets professional printers reproduce the color with the same results
every time.
- click the Color Libraries button on the right side of the Color Picker to open this dialog box (you
can also load libraries using the Swatches panel, discussed in the next section).
 Swatches Panel
- to add a new swatch that matches your current foreground color.
- point your cursor at an empty area of the panel. When the cursor turns into a little paint bucket,
click to add the swatch. Photoshop displays a dialog box where you can give the new swatch a
meaningful name.
- to delete a swatch, Option-click (Alt-click) it.
 Color Panel
- to open it, choose Window → Color.
- you’ll see the color values of your foreground or background color chip on the right side of the
panel (just click the appropriate swatch in the panel to pick it).
- the sliders let you adjust the color of the current color chip. To pick a new color, click within the
spectrum bar at the bottom of the panel.

Module 6: Getting Ready for Web

WIREFRAME
- a skeletal three-dimensional model in which only lines and vertices are represented.
- a layout of a webpage that demonstrates what interface elements will exist on its pages.
- not all elements are required to be included in the wireframe.
- you should add the necessary UI Elements needed in your design.
 Goal of Wireframes
- provide a visual understanding of a page early in a project to get stakeholder and project team
approval before the creative phase gets under way.
 Purpose
- ensuring the site or app is built according to goals
 - focusing on usability
- content growth capacity
- feedback and painless iteration
 What to include?
- all of the important elements of a web page should be represented in your website wireframe.
Use simple shapes instead of actual graphics, and label them. These elements include:
 Navigation: Buttons for users to visit the main sections of your site.
 Company logo: Can just be represented by a box.
 Content areas: Where will your different sections of content appear?
 Search boxes
 User login areas
 Answers the following questions:
- Structure – How will the pieces of this site be put together?
- Content – What will be displayed on the site?
- Informational hierarchy – How is this information organized and displayed?
- Functionality – How will this interface work?
- Behavior – How does it interact with the user? And how does it behave?
Importance of Wireframes
- Wireframes push usability to the forefront and using them is a strong way to illustrate the layout
of pages and the functionality of the elements on the page.
- using wireframes early on in the design process forces you and your clients to look objectively at
ease of use, conversion paths, element placement and helps point out flaws early.
 Building without blueprints = disaster
Styles of Wireframing
- Sketching
- Whiteboard
- Paper Cutout
- Stencils
- Digital
Type of Wireframes
 Low-Fidelity Wireframes
- they are often used to help map out the shell of the interface, its screens and basic information
architecture.
- Low-fidelity wireframes are basic visual representations of the webpage and usually serve as the
design’s starting point.

 Mid-Fidelity Wireframes
- the most used wireframe of the three, mid-fidelity wireframes feature more accurate
representations of the layout.
- while they still avoid distractions such as images or typography, more detail is assigned to
specific components, and features are clearly differentiated from each other.
 High Fidelity Wireframes
- High-fidelity wireframes should be saved for the latter stages of the product’s design cycle.
- built in the advanced stages of the design process to communicate design decisions to the
development team prior to coding the final product.
- can be the actual look of the User Interface.

Slice Tool
- while you could use Photoshop to build real web pages, you shouldn’t; you’re much better off
using a program designed for the job, like Adobe Dreamweaver.
That said, the Slice tool comes in really handy in a few situations:
 Building a website prototype.
 If you slice up your design and assign different hyperlinks to navigation bars, you can give
the client a good idea of how the navigation in the final website will feel.
 Making an image map.
 The Slice tool lets you add hyperlinks to certain portions of a single image.
 Making an image-heavy page load a bit faster.
 Chopping images into pieces makes them load a little at a time instead of in one big piece.
However, this is becoming less of a problem as more people get faster Internet
connections.
 Creating Slices
- once you’ve created an image or design that you want to chop up, you can use the Slice tool to
draw the pieces by hand or make Photoshop create slices from individual layers by choosing
Layer → New Layer Based Slices.
- you can also make Photoshop slice an images according to the guides you’ve drawn (discussed
later in this section).
 Steps
 1. turn on Photoshop’s Rulers and draw guides around the areas you want to slice.
2. press C to grab the Slice tool.
3. trot up to the Options bar and click the Slices From Guides button.
 Modifying Slices
- resize the slice. Once you select a slice, you can drag any of its corner or center handles (they
look like tiny solid squares) to make it bigger or smaller.
- move the slice. Click within the slice and then drag it to another location. To make it so you can
drag the slice only horizontally or vertically, hold the Shift key as you drag.
 Saving Slices
- once you’ve set all the options for your slices, it’s time to save them to use on the Web.
- use the File → “Save for Web” dialog box to set all those file-type, compression, and other
options discussed earlier in this chapter.
- if you use File → Save As, all your slice options will fly right out the window.
- when you’re finished, click Save and tell Photoshop where you want to store the files. If you’ve
assigned URLs to the slices, be sure to choose “HTML and Images” from the Format pop-up
menu at the bottom of the Save Optimized As dialog box, as shown.
WEB ASSETS
Designing your own logo
 Steps to design your own logo:
1. Understand why you need a logo.
 your logo will have a huge impact on the first impression your business is going to make: It
will give your customers information about your brand and let them know if it’s right for
them.
 a great, professional logo design not only has the power to communicate what you stand
for. It will also make a good first impression and help you stand out from the competition.
2. Define your brand identity.
 you want your logo to communicate your brand’s personality. And in order to do that, you
first need to understand what your brand’s core personality is.
 once you have a clear idea of what makes you unique and what your brand is all about, it
will be much easier for you to make design choices that complement and complete that
picture.
3. Find inspiration for your design.
 start with brainstorming an inspiration for your logo.
 when it comes to brainstorming your logo, don’t be afraid of thinking out of the box and
being a bit different.
 think about how your business can be visualized in your logo.
4. Choose your design style.
 when thinking about your logo, the first thing you want to do is pick the right design
aesthetic for your brand. There is no one style that is right for everyone, only what’s best for
your brand.
 here are some design styles:
 Classic
 Retro or Vintage
 Modern and Minimalist
5. Find the right type of logo.
 in addition to the overall style there are 7 main types of logos you can choose from when
you are creating your logo.
 you can pick the one that suits your company name or overall aesthetic best, or combine
them to create something unique.
 types of logos:
1) Lettermarks (or monogram logos)
 2) Wordmarks (or logotypes)
3) Pictorial marks (or logo symbols)
4) Abstract logo marks
5) Mascots
6) Combination mark
7) Emblem
6. Pay attention to color.
 colors can have a ton of different meanings.
 the psychology behind color is complex, but to keep it short, colors have certain emotions
and ideas attached to them.
 to choose colors that work well together, take a look at the color wheel.
7. Pick the right typography.
 you want to pick a font that complements and completes your logo.
 there are 4 basic types of fonts you can work with to give your logo a unique look:
 Serif fonts
 Sans serif fonts
 Script fonts
 Display fonts
8. Evaluate your logo options.
 evaluating your logo options can be hard, so get some feedback from friends, potential
customers and colleagues to help you make a decision.
 What makes a good logo?
- a good logo is immediately recognizable, reflects your brand’s message and makes you stand
out.
- an effective logo looks professional and seamlessly fits in with a brand’s identity.
- a great logo also needs to work at any size and anywhere you want to use your logo.
- a good logo:
 is unique and distinctive
 is memorable
 works at any size and anywhere
 reflects your brand identity
 is timeless
Designing a Website Favicon
- favicons (short for “favorite icons”) are tiny little icons on the left edge of your web browser’s
address bar and they’re great for adding a bit of branding to web pages.
- they show up not only in web browsers, but also in news feeds.
- your goal is to brand your website with a graphic that’s exactly 16x16 pixels — no more, no less.
- it’s tough to design anything that small that’s recognizable, but it can be done.
- for example, you might use a portion of your logo rather than the whole thing or your company’s
initials rather than its full name.
 Steps to create a Favicon
1. Create a new document that’s 64x64 pixels with a resolution of 72.
2. Create or place your artwork in the new document.
3. If you need to, resize the artwork to fit the canvas.
4. Resize the document to 16x16 pixels.
5. Sharpen the image if you need to.

Module 7: Visual Elements

USER INTERFACE ELEMENTS
What is a User Interface?
 User Interface (UI)
- a user interface, also called a "UI" or simply an "interface," is the means in which a person
controls a software application or hardware device.
- a good user interface provides a "user-friendly" experience, allowing the user to interact with
the software or hardware in a natural and intuitive way.
 UI Elements
- these are elements that allows you to help your users with task completion, efficiency, and
satisfaction.
- use UI elements that are necessary for your users’ needs.
Input Controls
- these are interactive elements that deal with capturing the users input in the software.
- it supports input from input devices (mainly keyboard and mouse).
 Checkboxes
- Checkboxes allow the user to select one or more options from a set.
- Checkboxes are not depended to each other.
- examples: terms and conditions and email options.
 Radio Buttons
- Radio Buttons are used to allow users to select one item at a time.
- this restricts the user from selecting multiple options from a given set.
- example: Yes or No questions
 Dropdown Lists
- Dropdown Lists allow users to select one item at a time, similarly to radio buttons, but are more
compact allowing you to save space.
- this is ideal if you have a lot of options for the user to select.
- example: Country Selector
 List Boxes
- similar to Dropdown List but allows you to select multiple items in a given list.
- example: Basketball Teams to add
 Buttons
- a Button indicates an action upon touch and is typically labeled using text, an icon, or both.
- usually being referred as Call to Action for interaction.
- example: Sign Up Button
 Dropdown Button
- the Dropdown Button consists of a button that when clicked displays a drop-down list of
mutually exclusive items.
- example: Options
 Toggles
- a Toggle button allows the user to change a setting between two states.
- they are most effective when the on/off states are visually distinct.
- example: Light / Dark Mode
 Text Fields
- Text Fields allow users to enter text. It can allow either a single line or multiple lines of text.
- example: Email field
 Date and Time Pickers
- a Date Picker allows users to select a date and/or time.
- by using the picker, the information is consistently formatted and input into the system.
- example: Birthdays, Deadlines
Navigation Components
- these are elements that helps the user navigate through the user interface.
 - these can be indicators that guide the user to complete a particular task.
 Search Field
- a Search Box allows users to enter a keyword or phrase (query) and submit it to search the
index with the intention of getting back the most relevant results
- typically Search Fields are single-line text boxes and are often accompanied by a search
button.
- example: Google Search
 Bread Crumbs
- Breadcrumbs allow users to identify their current location within the system by providing a
clickable trail of proceeding pages to navigate by.
- example: Forums
 Pagination
- Pagination divides content up between pages, and allows users to skip between pages or go in
order through the content.
- use pagination if you have a lot of items to display.
- example: Wordpress
 Tags
- Tags allow users to find content in the same category.
- useful for categorizing posts.
- example: Blog Posts
 Sliders
- a slider, also known as a track bar, allows users to set or adjust a value.
- when the user changes the value, it does not change the format of the interface or other info
on the screen.
- example: Volume bar
 Icons
- an Icon is a simplified image serving as an intuitive symbol that is used to help users to
navigate the system.
- typically, icons are hyperlinked.
- example: Facebook Navigation Icons
 Image Carousel
- Image Carousels allow users to browse through a set of items and make a selection of one if
they so choose.
- typically, the images are hyperlinked.
- example: FEU Tech Hero Component
Informational Components
- these are elements that helps the user in their tasks through feedback and other information
instruments.
- it can provide information that is relevant with their progress or usage of the system.
 Notifications
- a Notification is an update message that announces something new for the user to see.
- Notifications are typically used to indicate items such as, the successful completion of a task,
or an error or warning message.
- example: Facebook Notifications
 Progress Bars
- a Progress Bar indicates where a user is as they advance through a series of steps in a
process.
- typically, progress bars are not clickable.
- example: YouTube Upload
 Tool Tips
 - a Tool Tip allows a user to see hints when they hover over an item indicating the name or
purpose of the item.
 Message Boxes
- a Message Box is a small window that provides information to users and requires them to take
an action before they can move forward.
- it is usually used to verify their actions before proceeding.
 Modal Window (Pop-up)
- a Modal Window requires users to interact with it in some way before they can return to the
system.
- example: Ads
Containers
- these components allow you to display elements for hierarchy purposes.
 Accordion
- an Accordion is a vertically stacked list of items that utilizes show/ hide functionality.
- when a label is clicked, it expands the section showing the content within.
- there can have one or more items showing at a time and may have default states that reveal
one or more sections without the user clicking.

Design Patterns for Web and Mobile

 Responsive Web Design
- Responsive Web Design (RWD) is a web development approach that creates dynamic
changes to the appearance of a website, depending on the screen size and orientation of the
device being used to view it.
- RWD is one approach to the problem of designing for the multitude of devices available to
customers, ranging from tiny phones to huge desktop monitors.
- Responsive Web Design responds to the needs of the users and the devices they're using.
The layout changes based on the size and capabilities of the device.
- For example, on a phone users would see content shown in a single column view; a tablet
might show the same content in two columns.
 5 Responsive Web Design Patterns
1. MONDRIAN
 our first responsive web design pattern was one that Piet Mondrian would’ve appreciated. It
uses three simple and large areas of content separated by thick lines.
 the initial state itself is quite versatile and can hold up well under a fairly intense reduction
of width.
 once it becomes too narrow for the initial state though the widescreen layout adapts and
becomes a vertical layout. This is accomplished by taking the two smaller boxes on the
right and moving them under the large, featured box. This layout then breaks down to our
standard single column mobile view where each piece of content is simply stacked under
the last.
2. BASIC GALLERY
 thumbnail galleries are a popular design pattern that has existed for nearly as long as the
web.
 these days designers usually keep them quite minimal: simple rectangles arranged evenly
on a solid background.
 this format is super easy to reflow as the viewport changes. You simply have to reduce the
number of columns a few times.
3. FEATURED ITEMS
 this one is a lot like the gallery layout, only it’s more geared towards highlighting a few
items as opposed to several.
  the example here utilizes four featured items but it’s just as popular, or even more so, to
see three items instead.
 as you can see, the layout starts with the four featured items side by side with some
introductory content above. It then follows the path of the gallery as it jumps down to two
columns and finally one. Notice how the introductory content adapts as well: the navigation
goes from the right side to flush left under the main headline or logo.
4. COLUMN FLIP
 this one of the most complicated patterns yet.
 the top of the layout features some really large elements that grab your attention and
introduce the site.
 the next portion is split into three columns, but as you reduce the size of the browser, the
first column flips onto its side and becomes a row that sits above the other two columns.
5. FEATURE SHUFFLE
 this last pattern is a different take on the featured items idea.
 instead of simply dropping to two columns and floating left, it creates a staggered two
column layout where sections are floated to either side.
 for the single column layout, the thumbnail images are dropped altogether to allow for
greater emphasis on the text content. This is optional of course, one of the previous single
column formats could just as easily be implemented.