Introduction to Adobe Photoshop

and Graphic Design Principles

vol. 3

compiled by Chevonnese Chevers Whyte, MBA, B.Sc.

CHAPTER 1: COPYRIGHT

Attheendofthischapterthereadershouldbeableto:
Haveanunderstandingofwhatiscopyright
Copyrighttheirdesignpieces
Takeactioniftheircopyrighthasbeeninfringed
Licensetheirdesignpieces

What is Copyright
Copyright, which simply means the right to copy, is a collective term for a bundle of economic
and moral rightsgrantedbylawtocreatorsoforiginalworks ofthemindinliterature,drama,art,
andmusic.

Copyright is a property right. It is the right to claim legal ownership ofonesoriginalintellectual

property. The copyright owner has the sole legal right to exploit (use and earn money from)
their creative work, andto grant permission (license) to others touseit[ordenypermission]. In
essence, the RIGHT to make COPIES or reproductions of an original work. The person who
createsanoriginalworkiscalledtheauthorincopyrightlaw.

The Jamaica Copyright Act 1993

The Jamaica Copyright Act 1993 gives these creators the sole right to publish, distribute,
reproduce or authorize the reproduction of their worksinany form. Thisprotectiongivenbythe
Copyright Act comes into effect as soon as the work is put into a fixed form. It is therefore not
necessary to register copyright or claim copyright by printing the copyrightsymbol onthework.
Use of the copyright symbol however, identifies the copyright holder and reminds persons that
theworkisprotectedbycopyright.

The Purpose of Copyright

Copyright is the means by which creators benefit from their intellectual propertytheworkthey
have created and is essential to human creativity. Through copyright, creators receive
financial reward for theirefforts and recognition of the importance of theirintellectualpropertyto
the development of society. Without protection and financial reward, there would be little
incentiveforcreatorstoproducenewworks.

Infringement
Copying of all or part of a work without the permission of the copyright holder, or without a
license, is an infringement of copyright unless there is a statutory exemption to such useofthe
work.Infringementofcopyrightissimilartotheftoftangibleproperty.

Copyright Law gives the Owner the Right

Toreproducetheworkincopiesorphonorecords
Topreparederivativeworksbaseduponthework
To distribute copies or phonorecords of the worktothepublicbysaleorothertransferof
ownership,orbyrental,lease,orlending
To perform the work publicly, in the case of literary, musical, dramatic, and
choreographicworks,pantomimes,andmotionpicturesandotheraudiovisualworks
To display the work publicly, in case of literary, musical, dramatic, and choreographic
works, pantomimes, and pictorial, graphic or sculptural works, including the individual
imagesofamotionpictureorotheraudiovisualwork
In the case ofsound recordings, to perform the work publiclybymeansofadigitalaudio
transmission

What is a Derivative Work?

Aworkbasedupononeormorepreexistingworks,suchas:
Anyforminwhichaworkisrecast,transformed,oradapted
Reproduction ofartwork,translation,musicalarrangement, dramatization,fictionalization,
motionpictureversion,soundrecording
Any work consisting of editorial revisions, annotations, elaborations, or other
modifications/changeswhich,asawhole,representanoriginalworkofauthorship
For example, creating greeting cardsfroma painting, or writingascreenplayfromabook. Only
the rights holder has the legal right to create a derivative work, or tolicense another to make a
derivativework.

How do you Copyright your work?

Copyright protectsoriginal works ofauthorshipthatarefixedinatangibleformofexpressionor
medium. Anoriginalauthor(creator)isthecopyrightownerwhentheycreatetheirwork. Itisnot
necessary to put a plus your nameonyourworktoclaimcopyrightownership,butitisagood
idea. Use of isimportantbecauseitinforms thepublicthattheworkisprotectedbycopyright,
identifiesthecopyrightowner,andshowstheyearoffirstpublication.

Under Jamaican Law, mailing acopy/print of yourworktoyourselfbyregisteredmailandsaving

the unopened envelope proves the date you have it poor mans copyright. Under U.S. Law,
mailing a copy/print of yourwork to yourself by certified mail IS NOT copyright registration, and
doesnotgiveyoulegalprotectionagainstinfringement.

Consider Copyright Registration in the U.S.

Any work that isprotectedbyU.S.copyrightlawcanberegistered. Thisincludesmanyworksof
foreign origin. All works that are unpublished, regardless of the nationality of the author, are
protected in the United States. WorksthatarefirstpublishedintheUnitedStatesorinacountry
with which the U.S. hasacopyrighttreatyorthatarecreatedbyacitizenorresidentofacountry
with which the U.S. has a copyright treaty are also protected and may therefore be registered
withtheU.S.CopyrightOffice.Visithttp://copyright.gov/formore.

How to Register your work with the U.S. Copyright Office

1. Registeronlineanduploaddigitalfiles.US$35feepayablebycreditcard
2. Filloutformormail
UseformVAforvisualart,photography,appliedartsandsculpture
UseformTXforgraphicnovelsandcomicbooks
Or mail in a completed registration form with your information, copies
(photocopies, prints, or photographs) of the work, and a chequeforUS$65tothe
U.S.CopyrightOffice
3. Registration forms are available for free at www.copyright.gov. Print out the form and
mail with the package. Youcan call, fax, orwritetheU.S.CopyrightOfficeto havethem
mailyouprintedformsforfree
4. Send your registration by certified, return receipt mail. Your registration begins fromthe
date your registration form is received by the U.S.C.O. The U.S.C.O. will mail you the
officialcertificateafterregistrationprocessing

Important to note:

Youdonotneedtohireanattorneytoregisteryourcopyright!
Keepacopyofthework/imagewithyourregistrationcertificateinyourrecords
Registrationmaybemadeatanytimewithinthelifeofthecopyright

Why Register your work with the U.S. Copyright Office?

If your work is used in the U.S., youestablish public record in the U.S. that you own the
rightstothework
5

Before an infringement suit may be filed in court intheU.S.,registrationisnecessaryfor

worksofU.S.origin,notofJamaicanorigin
Registering your work with the U.S. Copyright Office provides for additional legal
protectionstotherightsholderintheU.S.
If your work is infringed, theinfringerwillhavetoprovethatthey did notinfringeyourwork
[Theyhavetheburdenofproofofpermitteduse.]
Registration allows the owner of the copyright to record the registration with the U.S.
Customs Service for protection against the importation of infringing copies (pirated
music,movies,CDs,DVDs,artwork). For additionalinformation,gototheU.S.Customs
andBorderProtectionwebsitehttp://cbp.gov/.FindIntellectualPropertyRights.

How should you mark your work?

You donothavetoregisteryourworkinordertouse thesymbol. Yourworkshouldhavethree
elementsforcopyrightnotice:
ThesymbolorthewordCopyright
Theyearoffirstpublicationoftheworkorcompilationorderivedwork
The name of the owner of copyright in the work, or an abbreviation by which the name
canberecognized,oragenerallyknownalternativename
For example: 2011 Chevonnese Chevers Whyte. You can useFile Info in Photoshop to add
metadata,copyright,licensing,anddigitalmarktoyourartwork

How long does copyright protection last in Jamaica?

CopyrightHolder

LengthofTime

KnownAuthor

Lifeoftheauthorplus50years

UnknowAuthor

50yearsafterthedateoffirstpublication,
broadcast,orexhibitiontothepublic

Adesignderivedfromanartisticwork
manufacturedonacommercialarticle/
product

25yearsfromthefirstyearthearticlewas
marketed

computergeneratedwork[theworkhasno Fromthedateitwascreatedplus50years
humanauthor]
Soundrecordingormotionpicture

Fromtheyearitwascompleted,ormade
availabletothepublic(whichevercomes
6

first),plus50years
Thetypographicalarrangementofapublished 25yearsafteryearoffirstpublication
edition[e.g.typesettingandlayoutofabook]

AsaJamaicancitizen,thesetermsofprotectionapplytotheworksyoucreate
inJamaica,eveniftheyareusedinanothercountry.

Why is Copyright important for artists and other creators?

Youshouldearnmoneyfortheuseorreproductionofyourwork
Your heirs your family andyour children should earnmoney fortheuseorreproduction
ofyourwork
Youwanttodeterminewhousesyourwork,whereandhow
You want to protect theintegrity of your work, to prevent others from changing it without
yourpermission
Youwanttopreventothersfromcopyingyourworkwithoutpermission

If you discover your work has been infringed

1. Contacttheinfringerrightaway.Dontwait.Yourlegalrecoursehasatimelimit
2. Itsbesttonotifytheinfringerinwritingandmakearecordofyournotification
3. Send a Demand Letter to the infringer for paymentfor useofyourworkorofferalicense
agreement
4. If they dont respond, you should speak to an attorney especially if they are making
moneyfromyourwork

Your Copyright
As owner of the copyright to your work, you have the right to use your work in any way and to
give permission toothers to use your work. No one has the legalrighttouseyourworkwithout
your permission. Permission touseyourworkiscalledalicense(alsocalledausagefee). All
licensing terms must be in writing. You may give permission to another to use yourwork for
free,oryoumaychargeausagefee.

Copyright infringement occurs when someone uses your work without your permission. It is
against the law. Youmayalsosell,orassign,yourcopyrightto anotherbutthistransferofrights
must be made in writing. A verbal agreement is not valid. If you sell, or assign, all rights to
another,younolongerownthecopyrighttoyourwork.Theywillhaveallyourrights.

Licensing Terms
A license is the rightto sellor rent artwork or design for a specific use andperiod oftime. You
cannegotiatethetermsandfeeofthelicense.Somepossibilitiesare:
Unlimited nonexclusive rights to usethe work where more than one licensees can use
yourworkinanymannerormedia
Limited nonexclusive rights to use the work where more than one licensees can use
yourworkinspecifiedmannersandmedia
Unlimited exclusive rights to usethe work where the licensee alone has theright to use
yourworkinwhateverwaytheychoose
Limited exclusive rights to use the work where the licensee alone has the right to use
yourworkinthewayyouhavethedescribedtheycanuseit
Ask your client exactly how they intend to use your work. Your license terms should be very
specific, including media, frequency of publication, geographic area, and length of time. Dont
giveawaythefarmiftheyonlyneedonecow.

Additional Resources from the Graphic Artist Guild (U.S. Organization)

For visual artists, setting your hourly rate is important becauseitwillhelppositionyouinrelation
to your competitors and it assistsyou in determiningwhat yourflatratesareforprojects. There
are several ways to approach calculating an hourly rate you may needto adjust the final figure
basedonthemarketinwhichyoureworkingorsellingyourservices.Seebelow:
Estimatingtutorial:http://198.173.235.195/estimatetutorial.html
PricingYourProjects:http://creativepublic.com/pricing_your_projects.php
Calculatinganhourlyrate:http://marketingmentor.com/pdf/your_hourly_rate.pdf

Additional Resources from JAMCOPY

JAMCOPY, the Jamaican Copyright Licensing Agency, is a collectivemanagementorganization
and Jamaicas national Reproduction Rights Organization(RRO). Itwas setupbycreatorsand
publishers of materials published in printed form, to manage their reproduction rights. The
Jamaica Copyright Act 1993 gives all creators sole and exclusive righttopublishandreproduce
theirworkinanyform.

JAMCOPY can be contacted at 17 Ruthven Road, Building 3, 8767548910, and

www.jamcopy.com.

Who is eligible to join JAMCOPY?

8

Creators and publishers of literary,artistic,dramaticormusicalworkscanjoin JAMCOPYif they

haveatleastoneoriginalworkpublishedinprintedform.Theseinclude:

Writers

Sculptors

Playwrights

Poets

GraphicDesigners

Songwriters

Journalists

Illustrators

Composers

Painters

Photographers

Cartographers

The World Wide Web and Copyright

It is then important to copyright ones work before placing on theinternet. Registeryourpieces
in the U.S. and Jamaicato ensure that there isnoinfringement. Youmayuseservicessuchas
http://www.istockphoto.com/whereyoucanpurchaseorlicenseartwork
Otherresourcesavailabletoyou:
http://www.ozmo.com/
http://creativecommons.org/
http://www.useplus.com

Other Intellectual Properties

Trademark
Patent

[Sources:AmericanGuildofArtistsandJamcopy]

CHAPTER 2: FOUNDATION CONCEPTS

Attheendofthischapterthereadershouldbeableto:
Have an understanding of the difference between Adobe products and nonAdobe
products
UnderstandwhenitisappropriatetouseAdobePhotoshop
Understandthedifferencebetweenrasterandvectorimages
Understandhowresolutionaffectsthequalityofanimage
UseCMYKorRGBcolourmodesbasedontheappropriatesituation
Appreciatetheimportanceofplanningacomposition
Statevarioussizesforstandarddesignpiecesandpapersizes
Calculatethebleedforadocument
Understandthedifferencewithpreparingadocumentforprintvs.forthescreen
CreateanewPhotoshopfile
OpenanimageinPhotoshop
SaveaPhotoshopfileintodifferentfileformats

Adobe vs. The World

The World
I refer to the world as any graphic design software that is not in theAdobe Suite. Examples of
theseare:
Paint.net
Gimp
CorelPaintPro
CorelPhotoPro
CorelDraw(goodforprinting)
MicrosoftPaint
Picassa
andmanymore

What can I do with Adobe Photoshop?

Adobe Photoshop is an image manipulation software that allows you to transform existing
images into works of art. Here are some pieces that were developed by other designers using
AdobePhotoshop:

10

11

12

13

Why Adobe Photoshop?

Adobe Photoshop is a graphics editing program developed and published by Adobe Systems
Incorporated.ItisusedtomanipulateimagesandapartoftheAdobeDesignPackage:
PhotoshopImageManipulation
IllustratorDigitalArt
InDesignMagazines,Books,andMultiplePagedocuments
14

DreamweaverWebDesignandDevelopment
FlashProfessionalWebAnimation
AfterEffectsVideoAnimation
PremiereVideoProduction
EncoreDVDBuilder
AcrobatXProProfessionalPDFCommunication
BridgeMediaManager

AndAdobePhotoshophas:
Blackandwhiteconversion
Industryleadingcolorcorrection
Noiseremoval
SupportformorecamerasandPhotoshopLightroom
Additivegrain
Complexselectionsmadeeasy
Colordecontamination
Expertretouching
Perspectivebasedediting
SmartFilters
SmartObjects
Visithttps://www.adobe.com/products/photoshop/features.htmlformore

Adobe Bridge
AdobeBridgeisthecentralhubforallAdobeCreativeSuiteenvironments.Itisusedto:
Browse,organize,andviewprojectfiles
PreviewAdobefilesandQuickTimemovies
Viewfilemetadatawithouthavingtoopenit
Search for one or more assets with common metadata attributes, and then store the
resultsasacollection
Editrawdigitalimages
Rateimages
andmore

Creating A New Photoshop File

Raster/ Bitmap vs. Vector Images

Raster Images
A raster image is an imagethatis totallycomposed of tiny dots, or pixels. Itisusefulforphotos
15

or complex imagery thatwould be difficult to create as vector art. Some common formats you
may be familiar with include: TIFF,GIF&JPEG. Indigitalimaging,apixel(orpictureelement)is
a single point in a raster image. The pixel is the smallest addressablescreenelement itis the
smallest unit of picturethatcanbecontrolled. Eachpixelhasitsownaddress.Theaddressofa
pixel corresponds to its coordinates. Pixels are normally arranged in a twodimensional grid
(seeimagebelow),andareoftenrepresentedusingdotsorsquares.

Vector Image
An image system that uses basic geometric shapes, like rectangles, lines, circles, ellipsesand
polygons, to create a graphic image. The vector image usually contains very little data, like the
startingpoint(pixel)oftheobject,whatkindofobjectitis,itssize,andcolor.
Who is the better image type?
Both image types has their advantages. But which one is the best? When you zoom into a
raster image, your image will eventually become pixelated. Andontheotherhand,zoominginto
a vector image, yields no pixelation. The same happens when you stretch a raster image it
becomes pixelated. Whilestretchinga vector image, has noeffectontheimage. Itseemsthat
vector images are the best image type, however vector images tend to look like drawings or
cartoons. Theydonotlooklifelikeandtomakethemlooklifelike takesalongtimeandeffort. On
theotherhand,rasterimageslooklifelike.

Raster images are boundedby the size and resolution ofthe image and vectorimagesarenot.
Therefore, vector images are useful when developing logos and othergraphics that should not
besizedependent.Rasterimagesareusefulwhendevelopingreallifecompositions.

16

FILETYPE

STRETCHING

ZOOMINGIN

LOOK

SIZE&
RESOLUTION

BESTFOR

RASTER

Pixelization

Pixelization

Photo
Realistic/
Lifelike

Bounded by Real
life
them
compositions

VECTOR

No
Pixelization

No
Pixelization

Drawing/
Cartoon

Not bounded Logos,etc.

bythem

[NB:InAdobePhotoshopyouwillbemostlycreatingbitmapimages]

Resolution
Resolution describes the quality of the image. It is measured by Dots Per Inch (dpi), which
describes the number of pixels within a square inch of an image. The more pixels that can be
packed in a square inch, the better the quality of the photo. The better the quality, thenicerthe
print and the better it looks. However, as the resolution increases,so does the file size. Large
filestakealongtimetoprint,upload/download,transfer,etc.

The number associated with the resolution is the number of dots per inchfor the raster image.
Therefore,themoredotsthereare,themoredetailsthereareperinch/cmofyourcomposition.

CMYK VS. RGB

Print or Screen
Graphic pieces can eitherbe developed for print or for on thescreen. It is important tochoose
theappropriatecolourmodeforyourpiecesbasedonwheretheywillbedisplayed.
17


If your intention is to print your design piece, you should select CMYK for your colour mode.
CMYK (Cyan Magenta Yellow Black) uses pigments to mix colours. If your intention is to
displayyourdesignonascreen,youshouldselectRGBforyourcolourmode. RGB(RedGreen
Blue)useslighttomixcolours.
My Recommendation

For Print

ColourMode:CMYK
Resolution:300dpi

For TV Screen

ColourMode:RGB
Resolution:300dpi

For The Web

ColourMode:RGB
Resolution:72dpi

Before You Start

It is imperative to do these things before you even sit in front of the computer and begin
designing. The design process starts long before you putpencil to paper or touch akeystroke.
Actually the design process is ongoing once you are able to think, the likelihood is, you are
designing.
Planning
Before delivering anyformofcommunication,themostimportantstepistoplanit. Beforegiving
a speech, you at least make notes about what you would like to talkabout. Before writing an
email, you ponder on what to write and how to write it. Visual communication is no different.
Before sitting in front of the computer, you must plan what you intend to do with your design.
Planninginvolvesthefollowingsteps:
1. Research
2. BrainstormIdeas
3. Sketch
One of the things that often disorientate designers is writers block. It is my belief that
designers who suffer from this condition did not plan their design piece. When you have
completedtheplanningprocess,thecreativitywillflow.

The first step is to research your project. Findoutasmuchasyoucanaboutthecompany,key

symbols, industry, techniques, individuals etc. Dont forget to research the meanings of the
colours you would like to use. Then comes the brainstorming. Brainstorming is a conference
technique of solving specific problems, amassing information, stimulating creative thinking,
18

developing new ideas, etc., by unrestrained and spontaneous participation in discussion. Get
your pen and paper(those still exist!) and sitorlaydownandstartwritinganywordsorphrases
that comes to mind when you think of your project. This activity can be done in a group or by
yourself. Your group should not be more than five (5) persons, itgets a bit confusing with too
many participants. You can even start grouping concepts together from what was produced
from your brainstorming session. The last step is to sketch any design concepts that come to
mind. Everyone can produce a sketch! It is justthatsome canprovidemoredetailedsketches
thanothers.Trustme,bythetimeyoucompletesteps1and2,theideaswillbeflowing.

Composition Name
One of the things that I find designers suffer from is a lack of organization. It is importantto
name your documents properly. Come up withyourown filenamingandfilestoringconvention.
That wayitiseasytolocateyourdesignsandfigureout thepurposeofit. Itisagoodideato use
adescriptionoftheitembeingcomposedortheclientsnameinthefilename.

Composition Size
ItisVERYimportant toascertainthesizeofthecompositionbeforestarting. Thisisoneofthose
vital information that you mustget from yourclient. Ifyoudonotknowthesize,thengoandfind
out. This could be one of those things that you do in the research process. If necessary,
measure the area yourself. It isalwaysagoodideato havearulerand/ortapemeasurehandy.
Thecompositionsizetakesintoconsiderationthebleedanddocumentsize

The unit of measurement chosen is dependent on the design being developed and on the
designers preference. Pixels is best for web design and television. Inches, cm, and mm are
good for traditional designs(business cards, flyers, IDs, etc.). Columns is goodfornewspaper
advertisements.Andsoonandsoforth.
My Recommendations
BusinessCard(10or12perlettersize):
3.5x2and2x3.5
Flyer(2,3,or4perlettersize)
4x6
3x8
5x7
Poster
8x10
8x13
10x16
11x17
LargeFormat
NB:Thesesizesdonottakeintoconsiderationthedocumentbleed.
19

Standard Paper sizes

Lettersize:8.5x11
Legalsize:8.5x14
Tabloidsize:11x17
LargeFormat:largerthan11x17
NB: printers cannot print to the edge of the paper. You must ensure to take this area into
considerationwhendevelopingyourcomposition

Bleed, Document Size, and Margin

If you make the size of your work area the same sizeasthedocumentyouwouldliketocreate,
your artwork is at risk of either being cut with white edges or cutting off criticalinformation. Itis
important to set bleeds and margins to prevent this from happening. Thebleed is the excess
area provided to add NONCRITICAL information (for instance the background)to eliminate the
possibility of whiteedges. Withthebleed,whatwereallydois tomaketheworkarealargerthan
the size of the document. The margin is the area in which critical information MUST be
containedtoeliminatethepossibilityoflosingcriticalinformation.

Setting the bleed involves some math, but very simple math. Heres what we need for the
calculations:
BleedSize
DocumentSize
WorkAreaWidth=2*bleed+documentwidth
WorkAreaHeight=2*bleed+documentheight
NB:Useguidestomarkdocumentsizeandmargins(seebelow).

Thereisnoneedtocalculatethemargin. Butitisimportantto knowwhattouseforthemargins,

when placing yourguides. The best thing to do is to contactthe printersandfindoutwhattheir
margin of error for their cutting machine. That number can be used for both thebleed and the
margin.Notthattheyneedtobethesame.

20

Heresanexampleofanactualdocumentwithbleed:

21

Notice that the background image fills up the ENTIRE work area extended totheentireareafor
the bleed. The printers will cut the document on the guides for DOCUMENT. Any information
22

that is critical should not pass the innermost guides. Those guides mark the margins. The
critical information arethemainthingsthatyouwouldliketocommunicatetoyouraudience. Itis
called visual communication for a reason. So there must be something that you want to
communicate. Ensure that it is communicated. It is a waste of time, money, and effort ifyour
criticalinformationisnotcommunicated.

The bleed andmargin are only needed when you will be printingyourwork. You
will not need to make the extra effort to accommodate the bleed for yourworks
for the screen. Butyouwillneedtotakeintoconsiderationthemargin,especially
whenthegraphicisfortelevision.

Crop Marks
In Photoshop and in many Adobe products, the guides are used as, you guessed it, guides.
Even though you see them on the screen when you are designing, they cannot be printed. As
such, when you use guides to mark where the document should beactuallycut,whenitgetsto
the printers, they cannot usethe guides to tell them where to cut. Theyneedsomethingthatis
visible after the document is printed. Heres where you use crop marks. They are usedto tell
theprinterswheretocut.

Hereswhatthedocumentwilllooklikewhenprintedwithoutcropmarks:

You can createcrop marksby drawing eight (8) short black lines aroundthecompositionatthe
23

document size guides. Basically you will place two (2) marks in each corner of thedocument
(seebelow).

Hereswhatthedocumentlookslikewhenitisprinted:

24

The crop marks clearly show the printers where to cut the document. There is no chance for
white edges for yourprinted documents because the printers will be cutting inside of what was
printed. Your critical information will also be safe because it would be far from the point where
thecuttingwillbeconducted.

The bleed and crop marks are only necessary if you decide to print your
document.

Background Colour
The backgroundcolourthatyouchoosewhen creatinganewdocumentdoesntreallymatter. At
least in my opinion. It is not a big concern because you can change it whiledeveloping your
designpiece.Therearethreeoptionsforbackgroundcolourwhencreatinganewdocument:
Transparent
White
BackgroundColour

As the name suggest,transparent is where there is no colour. That is, you can see through it.
By selecting white, yourbackgroundcolouriswillbewhite. And bychoosingbackgroundcolour,
25

yougetthecolourthatyourPhotoshopbackgroundissetto.

InPhotoshop,transparencysometimeslookliketheimagebelow.

A New Photoshop File

Armed with all the information above you will be able to create a new document in Adobe
Photoshop.Herearethestepstodoso:
1. OpenAdobePhotoshop
GotoyourStartMenuandfindtheAdobePhotoshopapplication
2. ClickFile
3. ClickNewfromthedropdownmenu
4. Awindowsimilartotheimagebelowwillpopup
Filloutthewindowwiththeappropriateinformation

26

Opening An Image in Adobe Photoshop

TherearemanywaysyoucanopenanexistingimageinAdobePhotoshop.Theseare:
1. Open...
2. Ctrl+O
3. Draganddrop
4. Openwith...

For thefirst threeoptions,youmustopenAdobePhotoshopbeforedoingthesteps. ClickonFile

at the top of the Photoshop window and then click Open... (see image below) for option 1. An
alternative to option1 is to press Ctrl+O (for PC) or Command+O (for Mac). A popupwindow
comes up after doingeither options 1 or 2. Navigate to the file youwould like opened and then
double click it. For options 3 and 4, use Adobe Bridge or Windows Folders to navigate to the
image(s) that you would like to open. Left click on the file and holddown the left mouse button
while moving the mouse. Drag thefilefirsttothePhotoshopwindowandtheninsidePhotoshop
for option3. InsteadofdraggingthefileinPhotoshop,youcouldalsonavigatetothefileandthen
right click on the file and select Open with..., from the dropdown menu choose Adobe
Photoshop.

Do not open zippedfilesinPhotoshop. Unzipthefilesfirstandthenusethem

inPhotoshop.
27

Saving An Adobe Photoshop File

Saving a Photoshop file is much like saving a document usingother software programs. You
can:
1. GototheFileandselectSavefromthedropdownmenu
2. Go to the File andselect Save As from thedropdownmenu. [NB:Usethisoptionisyou
wanttochangethenameofthefile]
3. PressCtrl+Sonthekeyboard
IfyouaresavingforthefirsttimeorifyouchooseSaveAs,apopupwindowcomesup.
1. Navigatetowhereyouwouldliketosavethefile
2. ForFilename,giveanappropriatefilename
3. ForFormat,choosethetypeoffileyouwouldliketosavethefileas
Choose PSD with layers, if you want to preserve your Photoshop file with its
layers
Chooseotherfileformatsbasedonwhatyouwant:JPEG,TIFF,GIF,etc.
4. ClicktheSavebuttonwhencompleteorchooseCanceltopreventthefilefromsaving

28

Sharing Large Files

It is important for a graphic designer to be able to share large files becausethe file size for the
documents you create using Adobe Photoshop are normally large. Most email accounts
(whether paidorfree)hasafilesizelimit,whereyoucannotattachfilesoveracertainsize. That
means, if you need to print yourdesignorshareitwithaclientorcolleague,youwontbeableto
so via email. But therearemanyservicesthatwillallowyoutosendlargefilesthatyoucanprint
andshareyourdesignpieces.
29

Herearesomeservicesyoumayuse:
MediaFire
Sendspace.com
GoogleDrive
Dropbox
andsomuchmore

See your weekly notes for steps on how to setup and use dropbox. You will
berequiredtocreateadropboxaccountforthiscourse.

30

CHAPTER 3: EDITING IMAGES

Attheendofthischapterthestudentshouldbeableto:
Collectimagesfromvarioussources
Usethefollowingtools:
MoveTool
MarqueeTool
LassoTool
MagicTool
PenTool
TheFill/PaintBucketTool

Image Sources
Adobe Photoshop is animage manipulation software. So forustomanipulatetheimage(s),we
mustgetthem.

Take Your Own

The first and safest way to get images is to take your own. You wont have to worry about
copyright laws or the fees you will have to pay to purchase other peoples images. And most
importantly, youknowexactlywhatyouwantyourimageto looklike. Youdonthavetosubstitute
your ideas with photos that are almost what you were looking for. You simply set yourmodels
howyouwantthem,inthepositionyouwantthemtobeinandbuildonyourideas.

The downside with taking your own photos is the time and effort ittakestosetupaphotoshoot.
There can also be heavy costs associated with a photo shoot. You will have to take into
considerationtheequipment,lighting,location,andifmodelsareinvolved,thenumberofmodels,
makeup,costume,food,etc.

External Sources
Luckily we live in a smallworld and thereareplacesyoucangotogetimageswhenyouarenot
thephotographer.
Other Photographers
You may know photographers who can take the photo on your behalf or do the photoshoot for
you. Based onyour agreement, you may or may not have to pay for the images. Just keep in
mind that whether you pay or not someone has taken on all the efforts and costs that you
avoidedandthereforewillhavetopayinsomewayfortheirefforts.

31

Free Online Sources

There are many websites where designers and photographers offer images for free. Just
remember to look out for thecatch. These professionalshaveofferedyoutheirserviceforfree.
They have licensed their work to you. With that license you will receive a licensing agreement.
Paycloseattentiontotheconditionsthathasbeenappliedtothesefreeimages.

The easiest waytofindfreeimagesistodoaGooglesearches suchasFreeRasterImages,

Free Vector Images, Free Graphic Design,etc. Thekeythingtonoteis,beforedownloading
animagefromtheinternet,ensurethatyouarenotgettingacopyrightedimage.

When you are ready to save the image to your computer, simply right click on the image and
select Save, Save Image,or Download from the dropdown menu. If youare usingaMacintosh
computertherightclickmaybedisabled.Simplygotothesystempreferencestoactivateit.

Use Google to find out the detailed steps to activate your right click mouse
button

You may also grab images from the internet by using the print screenbutton. Most keyboards
for PCs have a PrtSc button (see below). This button allows you to capture everythingyouare
currently viewing onyourmonitor. Topasteitinanapplication, simplyusetheCtrl+V. There are
two options available to us to print screen using the Mac: Control+Shift+3 (captures the entire
screen)andControl+Shift+4(capturesadefinedsectionofthescreen).

CTRL+V > hold down the Ctrl buttononthekeyboardfirst,thenwhileholding

downtheCtrlkeyholddowntheVkey

32

33

Paid Online Sources

There are also numerous amounts of websites where you can purchase images from the
internet.Hereareafew:
http://www.istockphoto.com/
http://www.gettyimages.com/
http://www.jupiterimages.com/

Photoshop Selection Tools

The selection tools are important tools when manipulating images. They are usedto pick up
an image from onefile and place it in another. Let us say you want to design aflyerforaparty
34

and want to use particular images in your composition: a young lady a palm tree a beach
scene and a beautiful sunset. The selection tools can be used to pick up the image of the
younglady,thepalmtree,thebeachsceneandsunsettobuildyourcomposition.

Selection Manipulation
There may be times where you will need to manipulate your selectionbecause it isnot exactly
what you want it to be. In order to manipulate the selection, you must first have an active
selection. Toaddtoyouractiveselection,hold downtheshiftkeywhilecreatinganewselection.
To subtract from an activeselection,holddownthealtkeywhile creatinganewselection. Andif
you want to intersect an active selection with a new selection, hold down both the shift and
controlkeysand,youguessedit,createanewselection.

Another way to manipulate yourselectionistodetermine ifyouwouldlikesharpedgesornottoo

sharp edges. Youcandothisbyadjustingthefeatheringappliedtotheselection. Thehigherthe
number for feathering, the more fuzzy the edges. As the feathering increases, you will also
notice that your activeselectionbecomesmorerounded. Youcanadjustthefeatheringbyusing
thetooloptionsorbyusingtheSelectmenu.

You can also save and load selections by using the Select menu. Tosave a selection, create
one first, then click the Select menu, and then click Save Selection. Name the selection
appropriately. To bring back a selection that you have saved, you need to Load the saved
selection. You can do this by clicking on the Select menu, and then click Load Selection.
Choosethenameoftheselectionthatyouarelookingfor.

To move your selection, use your arrowkeys. Andtocutoutanobjectusingaselection,create

the selection first andthenusethemovetoolontheinsideoftheselection. Finally,todeselecta
selectionyoucanpressCtrl+DforthePCorCommand+DfortheMac.

35

The Tools Palette

Arguably this will be one ofyour most usedpalettesinPhotoshop(seeimageaboveontheleft).

Once you open Photoshop, your Tools palette will be automatically displayed. If you cant see
yourtoolspalette,clickonWindows(atthetopofyourscreen)andthenselectTools.

Once a tool is activated, youcan find the additional options for it at the top of your screen (see
image above on the right). Click on a tool, any tool. Under File, Edit, etc. youll see that the
information changes. So if you want to make changes to a tool, activateit by clicking on it and
thenmakechangestotheoptions.

Before we continue you should know that ablacktrianglemeansthereareadditionaltoolsunder

the one being displayed. To access those tools, simply left click and hold down left mouse
button. The additional tools will pop up. Toselectanalternativetool,leftclickononeofthe new
tools that popped up. Pretty much onceyouseeablacktriangleinAdobe,thatmeansthereare
additionaloptionsavailabletoyou.

36

Move Tool
Technically thisisnotaselectiontool. Butitisasthenamesuggests,itisusedto
moveobjectsinyourcomposition.

Ensure that Auto Select Layer, Auto Select Groups, and

ShowTransformControlsarechecked

When Auto Select Layer is checked, click on the object that you will liketomove,
and move it from point A to point B. It makes iteasytomakean object theactive
layer.

When Show Transform Controls is checked, a bounding box displays around the
layer that is active. It makes it easy toidentifywhichobjectisthe activelayerand
italsomakesiteasytorotateandscaleanobject.

Marquee Tool
37

Used to create selections of a predefined shape squares and rectangles. This tool is ideal
whenyouwouldliketopickupanobjectthatissquareorrectangular.

With the marquee tool you canchoose a style that is appropriate for yourselection. Choose a
normal style if you want the freedom to make any size rectangles or squares. A fixed aspect
ratio style allows you to create rectangles where the size of the width and height are ratios of
each other. Andif you want to create rectangles or squares that are a fixed size, then choose
thefixedsizestyle.

How to create a selection using the marquee tool:

1. Chooseastartingpoint(movethemousetothatpoint)
2. Clickandholddowntheleftmousebutton
3. Movethemouseinanydirectiontocreatetherectangleorellipseofyourliking
4. Letgooftheleftmousebutton

How to create a perfect square or circle using the marquee tool:

1. Chooseastartingpoint(movethemousetothatpoint)
2. PressandholddowntheShiftKey
3. WhileholdingdowntheShiftkey,clickandholddowntheleftmousebutton
4. Movethemouseinanydirectiontocreatethesquareorcircleofyourliking
5. Letgooftheleftmousebutton
6. ReleasetheShiftKey

The advantage of the marquee tool is that it is a predefined shape. Unfortunately, that is the
same reason why the marquee tool isatadisadvantage. Onlyafewofyourselectionsmustbe
rectanglesorellipses.

Lasso Tool
The lasso tool is used to create selections that are irregular shaped in a short
period of time. Theadvantage of using this tool is its speed but the drawback is
that it is not accurate. Usethe antialiasing option to produce smoothedged for
your selections. The lasso tool allows you to make fast irregular shaped
38

selections.

Wherever you
point where

release the left mouse button, it automatically joins with the

youstarted

How to create a selection using the lasso tool:

1. Chooseastartingpoint(movethemousetothatpoint)
2. Clickandholddowntheleftmousebutton
3. Movethemousealongthepathyouwouldliketomaketheselection
4. Letgooftheleftmousebutton

Magic Wand Tool

Used to create selections of the same colour and intensity. The higher the
tolerance,themoreofthecolourssimilartothepixelclickedisselected.

How to create a selection using the magic wand tool:

39

1. Chooseapixelthatisintheareayouwantselected
2. Adjustthetolerance
3. Clickonthatpixel

This selection tool isoneofthesimplesttoolstousebutitis notveryaccurate. Inaddition,ifthe

area you would like selected ismade up of too many differentcolours,themagicwandmaynot
workhowyouintendto.

Pen Tool
This is the most accurate selection tool and the most difficult to use. Hold down
the pen tool tofind theFreeformPen,AddAnchor Point,DeleteAnchorPoint,and
Convert Point Tools. For selections ensure that Pathsisactivatedandinsteadof
shapelayerswhenusingthePentool.

40

Therearethreemainwaystocreateapathusingtheselectiontool.Theyare:
Astraightline
Acurvewithroundededges
Acurvewithsharpedges

How to create a straight line using the pen tool:

1.
2.
3.
4.
5.
6.

:
Chooseastartingpoint
Movethemousetothatpoint
Leftclickthemouseandletgo
Choosethenextpoint(theendofthestraightline)
Movethemousetothatpoint
Leftclickthemouseandletgo

How to create a curve with a rounded edge:

1. Chooseastartingpoint
2. Movethemousetothatpoint
3. Leftclickthemouseandletgo
4. Choosethenextpoint(apointalongthecurve)
5. Movethemousetothatpoint
6. Leftclickthemouseandholddowntheleftmousebutton
7. Movethemouseuntilyouhavecreatedacurvethatsuitsyou
8. Chooseanotherpointalongthecurve
9. Movethemousetothatpoint
10. Left click the mouse and let go(you will notice that at the second point that you created
thecurveisrounded)

How to create a curve with a sharp edge:

41


1.
2.
3.
4.
5.
6.
7.
8.

Chooseastartingpoint
Movethemousetothatpoint
Leftclickthemouseandletgo
Choosethenextpoint(apointalongthecurve)
Movethemousetothatpoint
Leftclickthemouseandholddowntheleftmousebutton
Movethemouseuntilyouhavecreatedacurvethatsuitsyou
Delete one of the handlebars by holding down the Alt Key andclickonthepointyoujust
created
9. Chooseanotherpointalongthecurve
10. Movethemousetothatpoint
11. Left click the mouse and let go(you will notice that at the second point that you created
thecurveissharp)

Eachpointthatyoucreateusingthepentooliscalledanode

How To Manipulate Nodes

There are a few things that you can use to manipulate the
nodes of a path. Here are the various ways you can
manipulateanode:
42

UsingthePenTool
UsetheAddandDeleteAnchorPointTools
UsetheConvertPointTool
UsetheDirectSelectionTool(whitearrow)
Clickonapathtoactivatethenodes
Clickonanodetomoveorchangecurves
Holddowntheshiftkeytoselectmultiplenodesatonce

Create your path about 1 to 2

tryingtocapture

pixels inward from the object that you are

43

The Fill/ Paint Bucket Tool

Used to fill in a chosen colour. Double click the foreground colour
to selectthe colour,activatethepaintbuckettool,andclickthearea
tobefilled.

How To Make A Custom Shadow

1.
2.
3.
4.
5.
6.
7.
8.
9.

Makeaselection(anyselectiontoolcanbeused)
Createanewlayer
Doubleclicktheforegroundcolour
Selectblackinthecolourpalette
Activatethepaintbuckettool
Clickinsidetheselection
Deselect
Adjusttheopacityofthelayer
Transformthelayerappropriately

44

CHAPTER 4: WORKING WITH LAYERS

Attheendofthischapterthestudentshouldbeableto:
Identifythevarioustypesoflayers
Manipulatelayers
Stacklayers

Layers

Layers let you organizeyour work into distinct levels that canbe editedandviewedasindividual
units. Every Photoshop document contains at least one layer. Creatingmultiplelayersletsyou
easily control how your artwork is printed, displayed, and edited. YouwillusetheLayerspalette
oftenwhilecreatingadocument,soitiscrucialtounderstandwhatitdoesandhowtouseit.

Types of Layers
There aremany typesoflayers. Thethumbnailbesidethe
layer name tells you what type of layer it is. A thumbnail
that is an image indicatesthatthe layer is an image layer
(see layers 5, 4, 3, and 2 to the left). A capital T in the
layers palette indicates that the layer is a text layer (see I
am a layer... to theleft). A shapelayer is alayerthathas
bothcolourandalayermask(seeShape1totheleft).

Before AdobePhotoshop CS2 when you created avector

image and place it in Photoshop, it would become
rasterizedlosingallofthebenefitsofavectorimage. Now
when you place a vector image in Adobe Photoshop the
original vector file is still referenced making it easy to
enlarge or shrink the image as much as you want. This
type of layer is called a smart object (see Swirl rocks to
theleft).

Thefourtypesoflayersare:
Image
Text
Shape

SmartObject

45


ToactivatetheLayersPalette,gototheWindowsTabandclickonLayers

Some Definitions
Layer Visibility
Theeyeshowsthattheselectedlayerisvisible.Clickonorofftoseeortohidealayer

Layer Locking Options

Click the checkered square icon to lock Transparency click the brush icon tolock the image
clickthearrowtolockthePositionclickthelockicontolockalloptions

Layer Blending Mode

Defines howthelayerspixelsblendwithunderlying pixelsin theimage. Bychoosingaparticular
blendingmodefromthedropdownmenuyoucancreateavarietyofspecialeffects

Fill
By typing in a value or dragging the slider, you can specify the transparencyofthecolourofthe
imageorobject

Opacity
Bytypinginavalueordraggingaslideryoucanspecifythetransparencyoftheentirelayer

Layer Lock
The icon shows when thelayer is locked and disappears whenit is unlocked. Doubleclickthe
icontounlockthelayer

Layer Options Menu

Click the black triangle to see the following options: New Layer, Duplicate Layer, Delete Layer,
Layer Properties, etc. Some of the options are presented as icons at the bottom of the Layers
palette.

Link Layers
Canbeusedtolinklayerstogether

Layer Styles
If a layerhasastyle,andFiconshowsatthebottomofthe Layers Palette. Clickthelittleblack
triangletoseethestyleoptions.

Layer Mask
A grayscale image, with parts painted in black hidden, parts paintedinwhiteshowing,andparts
paintedingrayshadesshowinginvariouslevelsoftransparency

Layer Set
46

This option helps to organize images with multiple layers. Click the icon to create a folder for
severallayers

Create New Fill or Adjustment Layer

Have the same opacity and blending mode options as image layers and can be rearranged,
deleted, hidden,andduplicated in the same manner as image layers. Click theiconandselect
anoptiontocreateanewfilloradjustmentlayer.

Create New Layer

Clickthisicontocreateanewlayer

Delete layer
To delete a layer, selecta layer in the Layers Palette and drag it to thetrash can icon select a
layerandthenclicktheicon.

47

Layer Properties

Click on the black rectangle in the Layers Palette for more options. Layer properties can be
usedtonamealayerandassignacolourtoit.

48

Make A Layer Active

Make a layer active byclicking on it. WhentheMoveTool

is activated and if Auto Select layer is checked, then you
can make a layer active by clicking on the object in your
composition.

To activate more thanonelayers, usetheALTandSHIFT

keys. To select consecutive layers, use the SHIFT key.
Toselectnonconsecutivelayers,usetheALTkey.

49

Promoting The Background Layer

When you open a photo in

Photoshop there will be only one
layer and that layer will belocked.
It is called the background layer.
To promote the background layer,
simply right click on the layer,
select Layer From Background,
name the layer accordingly, and
thenclickOK.

50

Move a Layer

To move a layer, simply click the desired layer and hold

downthemouse,andthenmoveupordowntothedesired
location. The black line indicates where the layer will be
movedtowhenyoureleasetheleftmousebutton.

51

Merging Layers

To mergemorethanonelayers,selectthedesiredlayersthengottomore
optionsforyourLayersPalette.

52

Transforming Your Layer

With the Move Tool activated and the Show

Transform Controls checked, you can: Scale
and Rotate your objects easily. To scale
proportionately hold down the SHIFT key. For
additional transformation options go to the Edit
Tab,andthentoFreeTransform/Transform.

Add A Layer Style

Tweakyourlayerbyaddingastyletoit. Clickon
thefancyfintheLayersPalettefortheoptions.

Ensure that you check the

style and also highlight it. If
you dont, you could be
making changes to an
undesiredstyle

53

Create a new Filter or Adjustment Layer

Click on the Half Moon in the Layers Palette for the

filter or adjustment layer options. You may also
create groups, a new layer, duplicate a layer, or
delete a layer in the Layers Palette. View the Layers
Palette.

54

CHAPTER 5: USING DRAWING TOOLS

Attheendofthischapterthestudentshouldbeableto:
Drawstandardshapes
Drawfreeformshapes
Identifythedifferencebetweenashaperlarandaselection
Manipulatenodes
Addanddeletenodesforanyshape

Checkoutthisvideo:http://www.youtube.com/watch?v=bUb2hWI9c5M

How Do I Know That It Is A Vector Image?

Since numerous file formats can contain vector information, it is not immediately apparent
whether an image is a vector image or contains vector information. If an image contains vector
information,youcanfinditinanyoffourplacesintheimage:
On a vector layer mask if you see vector options, it is a vector mask rather than a
standardlayermask.
OnatypelayerintheLayerspaletteTindicatesthatthetypeismadeupofvectors.
OnapathinthePathspalette.AllpathsinthePathspalettearevectors.
In a Smart Object layer. Youcan doubleclick the Smart Object layer to openitslinked
file and examine it for vectorinformation.ThelinkedfilemaybeaPhotoshoporIllustrator
file.(ContentinIllustratorfilesistypicallyvector.)

Using The Pen Tool

ForvectorartuseShapeLayersforthePenTool.

55

Preset Shapes
There are many standard shapes available to you inadditional
to unconventional shapes in the custom shapes options.
Ensure that shape layers is activated when using these tools
forvectorgraphics.

Creating a Custom Line Style

1. ActivatetheBrushTool
2. OpentheBrushesPalette
3. Changeoptions
4. TodrawyourlineholddowntheshiftkeywhiletheBrush
Toolisactivated

56

CHAPTER 6: SWATCHES, GRADIENTS, and PATTERNS

Attheendofthischapterthestudentshouldbeableto:
Mixcolours
Addacustomcolourtotheswatchespalette
Applyvarioustypesofgradientstoacomposition
Applydifferenttypesofpatternstoacomposition

Colour
In Photoshop, colour is represented in one of five ways. To access these options, you may
doubleclickyourforegroundcolour.Herearethefivecolourtypesavailabletoyou:
1. HSB:willnotbeusedforthisclass
2. Lab:willnotbeusedforthisclass
3. RGB:fordesignpiecesforthescreen
4. CMYK:fordesignpiecesforprint
5. Reference#:fordesignpiecesfortheweb
Click add to swatchesto add a colour and name to your swatches palette. Gotowindowsand
thenselectswatchestoactivatetheswatchespalette.

Colour Palette
The colour palette is the place you go to mix your colours. You can activate it by double
clicking on your foregroundcolour or by selecting WINDOWSandthenclickColor. Whileinthe
colour palette you may usethe eyedroppertopick upa colourfromoffyourscreenoryoumay
move the slider to select a colour. To be more accuratewithyourcolours,itisbesttoinputthe
colourcodes.

To ensure that you are working withthe right sliders, go to the Colour Palette options to select
othercolourmodes:
Grayscale
RGB
HSB
CMYK
Lab
WebColor

57

Applying Gradients
Youmayaddagradientbyusing:
1. GradientTool
2. GradientOverlay
3. PictureGradient(applyingamask)

Gradient Tool
Used to apply gradients toalayer. Oncethegradient toolisselected,usethetool
optionsto:
Selecttheappropriatestyle
Selecttheappropriatecolours
etc.

Gradient Overlay
The gradient overlay is similarto the gradient tool. The difference is the gradient
tool destroys the original image while the gradient overlay applies a gradient over
the original image. That is, the original image is left intact. You may adjust the
opacityofthegradientoverlayandyouwillstillseetheoriginalimage.

Applying a picture gradient

1. Applymasktolayer
2. Selectgradienttool
WhiteNoEffect
BlackMaskApplied
3. Clickandmoveindirectionofgradienttobeapplied

58

Applying Patterns and Textures

To add patternsandtexturestoyourcompositionsorlayers,youmayuseadjustmentlayersand
layer styles. Adjustmentlayerscreateanewlayerwiththepatternthatyouhaveselected. Layer
styles are applied to the layer selected without affecting the original contents of the layer.
Adjustingtheopacityofthelayerstylewillrevealtheoriginalcontentsofthelayer.

59

CHAPTER 7: PAINTING

Attheendofthischapterthestudentshouldbeableto:
Associateactualpaintingwithdigitalpainting
Identifythetoolsthatusebrushes
Manipulatebrushes
Createcustombrushes

Brushes
Just as a painter will have a range of brushes for all sorts of needs, so too thedigital painter
needsarangeofbrushes.

When you're painting a picture, you pick a brush made from the right material and the
appropriate sizeandshape for the task in hand. There areliterallyhundredsofdifferenttypesof
paintbrushes and that's without delving into texture tools like sponges and towels. The digital
artist and photographer can also make use of brushes for all sorts of effects. Infact, complex
collage style images can be created in minutes using a selection of brushes and layer blend
modes.

What is a Brush
Brushes in Photoshop and other graphics programs are usedtodeterminetheshapeoftheline
you paint with when you use the paintbrush tool. They also determine the shape of the eraser
when you erase around an image or through it. You will already have had experience with
choosing different shape brushes circlesandovalsetc.One typicaluseforthesebrushesisto
create patterns inyourimage,forexample,they'reagreattoolforblendingtwoimagesinto each
otherasyoumightdoifyouarecreatingacollage.

To find brushesinPhotoshop,chooseatool that usesbrushes,suchastheBrushtool and from

the Tool optionspalettedisplaytheavailablebrushes.Youcanchooseanyoftheseandsizeitto
thesizeyouwanttouseitat.

However, that's notallyou can do and if you choose Window, Brushes you will see therearea
range of other options you can use with the built in brushes. You can even apply textures to
brushesandmakethemlookdistressed.

60

Where Can I Find Brushes?

DefaultbrushesinPhotoshop
Freebrushesonline
Purchasebrushesonline

What Can Brushes Do?

Using the brush preset options you can configure what appear to be simplebrushestoperform
more complex effects. Or using a combination of erasing and painting with brushes you can
createverycomplexcollagesimagesinaveryshorttime.

The Clone Stamp Tool

Use the Clone Stamp Tool to make a copy of the original. It
paints with a sample of animage. Create aclonein thesame
layer or create a new layer and create the clone. While the
PatternStamptoolpaintswithpartofanimageasapattern.

61

The Retouching Tools

The Spot Healing Brush tool removes blemishes and
objects
The Healing Brush tool paints with a sample or pattern
torepairimperfectionsinanimage
The Patch tool repairs imperfections in a selectedarea
ofanimageusingasampleorpattern.
The Red Eye tool removes theredreflectioncausedby
aflash.

The Eraser Tool

TheErasertoolerasespixelsandrestorespartsofanimageto
a previously saved state. The Background Eraser tool erases
areas to transparency bydragging. The Background eraseris
often used when deleting unwanted pixels around hair. The
Magic Eraser tool erases solidcolored areas to transparency
with a single click. Think of the Magic Eraser as the magic
wandtool,butinsteadofselectingthearea,iterasesit.

62

CHAPTER 8: WORKING WITH TEXT

Attheendofthischapterthestudentshouldbeableto:
Usevariousfontsfordifferenttypesofsituations
Addnewfontstofontlibrary
Transferfontsforuseonothermachines
Convertfilestopreservefonts

Serif vs. Sans Serif

Allfontsarebrokendownintotwotypesoffontfamilies:
Serif
SansSerif
Theruleofthumbtonotewiththesefamiliesistouse:
SansSerifheadlines
Seriftextinthebodyofamessages

Serif Fonts
For small font sizes, serif fonts are easier to read. Each letter has a stroke that flows into the
next letter besideit. Thisallowstheeyestorelaxandmakesiteasy toflowfromonelettertothe
next. Forwebsiteshowever,sansserifsarebetterforthebodyofthedesign. ExamplesofSerif
fontsare:Bakersville,Georgia,TimesNewRoman

Sans Serif Fonts

For larger font sizes, sans serif fonts are easier to read. There is no stroke thatflows into the
next letter beside it. Just remember that Sans means without. Examples of Sans Serif fonts
are:Arial,Tahoma,Trebuchet,

Some Rules
1. Onefontforheadlinesandonefontforthebody
2. Nomorethanthreefontsonanyonedesign
3. Lookfordesigncollisions

63

Font Download

Searchonlineforfonts
Dafont.com
SearchonlinefortheprocedureonhowtodownloadfontsforyourOperatingSystem

The Downside of Finding New Fonts

There is no guarantee that when you use a font ononecomputer itwork display thesame way
on another computer. The display of fonts is dependent on whether the font is installed on a
computer or not. What that means is that if you develop a design on one machine using
particular fonts (especially those nonstandard fonts) the likelihood is that the design will not
displayasyouintended.

Never fear, therearewaysthatyoucanworkaroundthisproblem. Youmayflattentheimageas

a JPEG to show your client or as a TIFF to print the design. If you need to send the original
design for someone else to view,you could also send thefontfile with youroriginal file, so that
thenewfontscanbeinstalledonthecomputer.

The Type Tool

As the namesuggests,thetypetoolallowsyoutotype
in your composition. To add text to the composition,
activate the typetoolandclickonceinthecomposition
and begin to type. Select your desired font by using
the tool options above. You may also distort the text
by selecting warp text and when you are finished
typingclickcommittoeditsoractivatethemovetool.

Add Texture to Text

1. Commitedits
2. Ensurethattextlayerisactivated
3. Addlayerstyle

Type on a Path
1. Drawpathfirst
2. ActivatetheTypeTool
64

3. ClickonPath
4. Typedesiredtext
5. Usethepathselectiontooltomovetextortoflipit

White arrow => manipulate the path black arrow => manipulate the text on
thepath

Editing Text
1. ActivatetheTypeTool
2. Clickontext
3. Makeedits

Lorem Ipsum
Lorem Ipsum is dummy text that is used as placeholder text. It has been around since the
1500s. It is used to demonstrate what thetextwould looklike inadesignwithoutpressuringthe
designer to create content for the design. That way, the designer will be able to focus on the
compositionandnotthewordsthemselves.

Example:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temporincididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velitesse cillumdolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident,suntinculpaquiofficiadeseruntmollitanimidestlaborum.

GoogleSearchLoremIpsumtofindsamples

65

CHAPTER 9: ELEMENTS & PRINCIPLES OF DESIGN

Attheendofthischapterthestudentshouldbeableto:
Usethefoundingprinciplesofdesigntoenhancecompositions

Elements of Design

LINE

pathofapoint

SHAPE

perceivablearea

VALUE

relativelightanddarkness

COLOUR

colourtheorybasics

SPACE

(2D)height,widthandtheillusionofdepth

TEXTURE

actualorsimulatedtactilequality

Line - the path of a point

In the first image, Leonardo da Vinci used a soft, sensitive soft line to create a graceful image.
The center image has the same subject. However, the artist Willem DeKooning has created a
66

very different feeling by using a heavy, gestural line. The woman's face in the third image is
created with a mechanical line creating an emotionallydetached feeling. Although the subject
matter is the same in allthree works,thedifferencesinlinequalityhavecreatedworkswithvery
different impact. Howyou use line is oneofthemostimportant decisionstobemadeincreating
aworkofartthisistruewhetheryouareusingapencilpointoracursoronamonitor.

Shape - perceivable area

Shapes can be created byline, or by color and valuechangeswhichdefinetheiredges.Aswith

line, the decisions you make concerning shape are important. The shapesin the image on the
left are clearly defined. By contrast, the ship's shape on the right is barely discernable. This
difference in clarity of shape is part of the meaning of these works one conveys a sense of
orderliness and confidence, while the other communicates a sense of vulnerability and
uncertainty.

The shapes of the objects that you create or place in your images are positive shapes. The
spaces aroundtheseshapesarethenegative spaces.Itisjustasimportanttobeattentiveto the
negativespaceasthepositiveshapes.

67

Value - relative light and darkness

The overall lightness and lack of contrast in the left image conveys asenseof spirituality and
harmony betweenthetreeandthecircularsky.The dramaticmood oftheotherworkbyGustave
Doreiscreated,inlargepart,bythehighcontrastoflightanddark

Color - basic color theory

68


We respond to color on manylevels.Colorcanbeusedsimplytodescribeanobject.Itcanalso
be used emotional (blueforsadnessorspiritually,redforangry),symbolically(associatedwitha
flag's color, corporation logo or sports team) and psychologically. The painting by Phyllis
Bramson (left)hasintense,complimentarycolorsthatequatetostrongconflictingemotions.The
otherwork,byAlphonseMucha,usessubdued,analogouscolortocreateaverydifferentfeeling.

Space - height and width

A monitor display has two actual dimensions height and width. In addition, an artist can create
an illusion of depth, using overlapping, diminishing scale, atmospheric perspective, vertical
placement,warmandcoolcolors,diagonalsandlinearperspective.

Texture - surface quality

We experience actual texture when we touch objects and feel their roughness, smoothness or
patterns,whichwecansimulateorimplyindigitalimagery.

Principles of Design

Scale

overallsize

Proportion

relativesizewithinthework

Unity

repetition>rhythm>pattern>unity

Balance

equalizingthevisualweightofelements

Direction

visualpath

Emphasis

focalpoint

69

Scale - overall size

Much of the impact of monumental artwork such as Mount Rushmore is its sheer size. For
example, Lincoln's head is 70 ft. in height (taller thantheentirefigureoftheSphinx).Aminiature
of this carving simplywouldnothavethesameimpact.Conversely,asmallworkhasasenseof
intimacy we need be close to thework to view it. Scale, alone, can change the meaning of a
workofart.

Proportion - relative size of objects within the work of art

70

In his painting of bedroom (left), Rene Magritte has created a surreal situation simply by
manipulating the proportions of common objects. There are no clues that tell us if we are in a
normalsized room or a dollhouse. Inthe other painting, Andrew Wyeth has usedtheproportion
very differently the small farmhouse against the largeness of the field created a sense of
isolation.

Unity-Variety

Repetition of visual elements such as shapes or colors create a rhythm and pattern in an
artwork creating a sense of harmony and unity that pulls the picture together. Some artists,
such as Andy Warhol, have emphasized repetition tomakeastatementabouttheprevalenceof
massproduction inoursociety.Mostartists,however,seekamoreequal balancebetweenunity
and variety in their work. For example, the threetined shape of the pitchfork in Grant Wood's
painting (right) in repeatedexactly in the clothing. It is also repeatedin the windowsandvertical
lines in the house. On the other hand, curved shapes surround the woman's head in the
broach, curved edge of her dress and background trees. This repetition of shape unifies the
painting, while the differences between the vertical and curved shapes give the painting a
balancingsenseofvariety.

71

Balance - equalizing the visual weight of elements

The cross on the left is symmetrically (formally) balanced onehalfmirrorstheother.Religious

and significant objects are often givenasymmetrical balance.ThepaintingbyMaryCassatt,(on
the right) depicts an ordinary moment. Appropriately, it is asymmetrically balanced. The two
women on one sideare balanced by the large silver serviceandfireplaceontheotherwiththe
area of highest value contrast (the woman in dark with the nearwhite saucer and cup) only
slightly offset from the center. Although asymmetrical balance may appear more casual and
less planned, it usually take greater experience to utilize the psychological and felt nuances of
balancing a few larger objects against many smaller objects, or large areas of muted color
against smaller areas of intense color, nearly centered objects balanced against objects
positionednearthepicture'sedge,etc.

72

Direction and Emphasis

Direction is the visual path our eye will follow. Emphasis refers to the object orelement which
first catches our attention. Unlike sequential or timebased art forms such as musicor film, a
painting such as The MoulinRouge(above)isseen instantaneously.Thewholeworkisrevealed
to us simultaneously.Anartistneedstocreateanareaofemphasisafocalpointthatbeginsthe
path oureyeswillfollowaswetakeinthewholeartwork.Inthispainting,oureyeisfirstdrawnto
the woman's face on the right edge. It isn't by chance that we see her first the artist,
ToulouseLautrec, has heighten the value contrast, color intensity, color contrast (orange hair
and bright red lips contrast with the green of her forehead), and proportion (she is the largest
person). In addition, she is staring directly at us. Basically, we are first drawn to the area of
greatest contrast. Our eye then sweeps across the canvas, taking in the other figures (which
includetheartist).

73

In summary, I will compare two works of art with similar subject matter. The first image was
created by Paul Revere shortly before the American Revolution. It depicts an historic event, the
BostonMassacre,inwhichBritishsoldierskilledseveralcolonialists.Thesecondwaspaintedby
a Spanish artist, Francisco Goya, who describes anotherhistoricaleventtheexecutionofmen
by Napoleon's soldiers in Spain. Though both works tell a similar story, Goya's work is much
more impacting. It's almost as if we are reading two accounts of war one by a writer who
unemotionally describes an event, the other by a writer who emotionallypulls youinto the story
and make you feel a sense of the horror of war and the desperation of men about to die. Goya
accomplishthisbyusingtheprinciplesofdesigntogreateffect.

Scale Paul Revere's print is approximately 18" in height. Goya's painting is enormous the
figures are lifesized, which gives the painting even greater impact. It is almost as if we are
actually there as wearestandingatgroundlevel,whereaswearesomewhathoveringinthefirst
work.

Proportion Goya has made the figures proportional larger than the town in the distance. By
contrast,PaulReverehasgiventhepeopleandthetownequalimportance.

UnityVariety There are elements of unity in Paul Revere's work the buildings' windows and
soldiers'feetbutthisreallydoesn't add tothemeaningofthework.Bycontrast,Goya hasused
unity to make the soldiers and their rifles almost identical givingthemamachinelike,inhuman
quality. To emphasis the fate of he man with his arms outstretched, the deadman lying near
him is in the same position. Also, Emphasis and Direction The high contrast in value the
glowing shirt and lamp against the black of night has given the painting a dramatic quality
lacking in the first work. It also draws our eye to the man about to die. His out thrust arms
gesturetothechurchspireandwefollowhiseyesacrosstheriflebarrows.

This introduction is just that it is an introduction. To really comprehend these term and
74

concepts, you will be need to actively think about them as you look at worksof artnot just in
galleries but in advertisements, illustrations, cd and book covers, packaging and the objects
around you. Think about what the designer or artist is trying to express andthenthinkaboutthe
visual decisions that her or she made to communicate these ideas or feelings. Much of the
design work aroundushasclarityofpurposeand ingenuityintheuseofform.However,muchis
thoughtlesslyorpoorlydesigned.

75

CHAPTER 10: IMAGE EFFECTS, SPECIAL EFFECTS, AND MASKING

Attheendofthischapterthestudentshouldbeableto:
Identifydifferentmethodstoenhancecompositions
Developcompositionswithoutdestroyingtheoriginalimage

Add Effects to Images

Use the Filter Tab to add image effects to your

layers. Simply activate the layer and then apply a
filter.

76

Add a Blur

77

Sharpen an Image

78

Add Noise to an Image

Creating Reflections
1.
2.
3.
4.
5.
6.

Duplicatetheimage
FlipHorizontallyorVertically
Edit>Transform
ApplyLayerMask
Applygradienttolayermask(blacktowhiteorwhitetoblack)
Dialdowntheopacityofthereflectionlayer

Masking
Used to reveal or hide specific parts of a layer. Masking can be used apply the illusion of
transparencywithoutdamagingtheoriginalimage.

79

Paths for Masking

1. Createthepathfirst
2. Makeselection
3. ActivateLayerMask

Background Eraser Tool

1. Selectthebackgrounderasertool
2. Adjustoptions

The Extract Command

1. Filter>Extract
2. SelectEdgeHighlighttool(topleftcorner)
3. Createaborderaroundtheimagethatyouwouldliketoremain
4. SelectFillToolButton
5. Clickinsidetheselectionyouwouldlike
6. PreviewSelectionbyclickingthePreviewButton
7. EditSelection
8. Cleanuptoolbutton(transparent)
9. CleanupEdgetoolbutton(transparent&redefine)
10. EraserToolbutton
11. OK

80

CHAPTER 11: CRITIQUES

Attheendofthischapterthestudentshouldbeableto:
Haveanunderstandingofwhatquestionstoaskwhencritiquingagivendesignpiece

Whenyourworkisbeingcritiqued,herearesomethingsthattheexaminerwilllookoutfor:
1. Whatisthecompositionabout?
2. Didtheyapplytheprinciplesandelementsofdesign?
3. Wasthedesigneffective?

Youshouldbeabletoanswerthefollowingquestions:
1. Whatisyourunderstandingofthetheme/topic?
2. Giveadescriptionofyourartwork
3. Howrelevantisthetheme/topicfortheartwork?
4. Whatemotionsdidyouwanttoevokeintheviewer?

81

CHAPTER 12: WEBSITE DESIGN & SLICING

Attheendofthischapterthestudentshouldbeableto:
Demonstratethewebsitedevelopmentprocess
Prepareamockupfortheclient
DevelopanentirewebsitefortheclientwithinAdobePhotoshop
ConvertaPhotoshopfileintoanHTMLdocument
DominoreditstoHTMLcodetoincorporateallitemsofthewebsite

The Website Development Process

1. WebsiteDesign
2. ContentDevelopment
3. WebsiteCoding

Website Mockup
A flattened image of whatyou propose your website to look like. This is sometimes done as a
general layout foreach page. You want to do this step so that yourclientisawareofwhattheir
website will look like before you begin coding it. Thisisimportantbecauseyoudonotwantyour
clienttobesurprisedattheendofallofyourhardwork.

Slicing a Website Design

UsetheSliceTooltocuttheimageinthevarioussectionsofthewebsite.
Tips:
Useguides
Usesliceselecttooltonameyourimages

82

Saving Slices

GotoFile>SaveforWeb

Use Ctrl + and Ctrl + + to zoom

inandout
Select the options onthe right that
bestfityourslices

Optimizing Image Slices

The smaller the imagesize,thefastertheuploadto theweb.
You want toadjustoptionstotherighttominimize thesizeof
the image and at the same time look good when displayed
on the left. Use information below the screen to help with
yourdecisionsforoptimizingtheslices.

Saving Slices in HTML code

1. ClickSave
2. Select HTML and Images, Images Only, and HTML
onlybasedonyourdesire
3. Select All Slices, AllUserSlices,andSelectedSlices
asdesired

Website Design
TypicalSizesforwebsitedesignare:
800pxx600px
1024pxx600px
For other sizes, right click on your desktop,andgotoyourdesktopsettingsorproperties. From
theiryouwillfindalistofdisplaysizesthatyoucanuse.

Website Evaluation
Todeterminetheeffectivenessofawebsite,weusethefollowingcriteriatoevaluateit:
AttractiveGraphicalDesign
SiteImage
ColourHarmony&Balance
83

BalanceofElements
Functionality
Navigability
EaseofUse
Speed
BrowserCompatibility
SearchEnginePerformance

84

CHAPTER 13: DEVELOPING AN ANIMATION

Attheendofthischapterthestudentshouldbeableto:
Plananimation
Developastoryboard
UseAdobePhotoshoptodevelopsimpleanimations

Videos
Title:AnimatorvsAnimation
http://www.youtube.com/watch?v=qo1d6ttbAq8

Title:BoredAnimator
http://www.youtube.com/watch?v=Xme5l8DU0g

Title:SimpsonsFightFlipbookanimationAnimaodeBloquinho
http://www.youtube.com/watch?v=AuZadShulbI&feature=related

DragonBallZFlipbookEpisode3GohanvsJanemba
http://youtu.be/r5MmY81XB_M

Storyboard
A series of sketches, similar to a comic strip, whichoutlinestheactionanddialogueinascene.
These drawings would bepinned up on abulletinboardandarranged,rearrangedandreplaced
asthestorytookshape.

Building an Animation using Photoshop

1.
2.
3.
4.
5.

Conceptualize
Sketch
Storyboard
Photoshop(layers)
Animate
a. GotoWindows>Animate
b. Options>MakeFramesfromLayers
c. Playtopreview(adjusttimingwherenecessary)
6. Save
a. File>SaveforWebandDevices
b. Adjustthesize(wherenecessary)

85

CHAPTER 14: PRESENTATION SKILLS

Attheendofthischapterthestudentshouldbeableto:
Haveanappreciationofhowtodressforapresentation
Haveanappreciationofhowtopreparepresentationdocuments
Haveanappreciationofhowtocommunicatetotheaudience
Identifygoodpresentations
Haveanunderstandingintowhatittakestodoadesignpitch

Videos
DuarteDesign'sFiveRulesforPresentationsbyNancyDuarte:
http://www.youtube.com/watch?v=hT9GGmundag

LifeAfterDeathbyPowerpoint2010byDonMcMillan:
http://www.youtube.com/watch?v=KbSPPFYxx3o

SexisGreat
http://blog.up.co/2013/08/07/sexisamazinghowbeforewedocaptivatedwonfoundershowcas
e/

ThePitch
http://www.youtube.com/watch?v=vThMZOm79DM

86

KEYBOARD SHORTCUTS

Keys

Function

Crtl+C

Copy

Ctrl+X

Cut

Ctrl+V

Paste

Ctrl+A

SelectAll

Crtl+D

Deselect

Crtl+Shift+I

InvertSelection

Ctrl+Z

Undo(once)

Ctrl+Alt+Z

Undo(morethanonce)

Crtl++

ZoomOut

Ctrl+

ZoomIn

BrushEnlargement

BrushShrinkage

Ctrl+Shift+>

TextEnlargement

Ctrl+Shift+<

TextShrinkage

Shift

AddtoSelection

Alt

Subtractfromselection

Shift+Alt

SelectionIntersection

Ctrl+0

FitScreeninWindow

Ctrl+S

Save

Ctrl+O

Open
87

88

ADDITIONAL RESOURCES

Art Stores
The Art Centre
202OldHopeRoad
Kingston6
9271608

Screen Art Supplies

3ACentralAvenue
Kingston10
9291135
9296793

Printers
Ditto Copy
UWIMainLibrary
9272496
9358741
print2ditto@gmail.com
dittocopy@gmail.com

Innovative Systems
Shop5SouvereignCentre
Kingston6
9783512
9786072
info@innovativesuperstore.com.jm

Digital Systems and Supplies

Shop11&12YorkPlaza
Kingston10
9684282
9201760
digitalsystemsandsupplies@yahoo.com

89

Docutech Ltd.
28BarbadosAvenue
Kingston5
7545970
7545972
docutech.jm@gmail.com

Hot Off The Press

Shop38NewKingstonShoppingCentre
Kingston5
9684547
9684365
hotp@hotpjamaica.com

Pear Tree Press Ltd.

19ChelseaAvenue
Kingston10
9265859
9298129
peartreepress@cwjamaica.com

National Outdoor Advertising

7CourtneyWalshDrive
Kingston10
9299403

90