Project Logo

Fine Print
8EFDFE USNC THE |ATEFAL CDNTANE0 N THS 0DCU|ENT, CAFEFULLY FEA0
THE FDLLDWNC TEF|S AN0 CDN0TDNS.

The IndIvIdual or entIty usIng the enclosed materIals agrees to be bound by the
terms of thIs agreement. ThIs document Is owned by Paul Park and Is protected by
copyrIght law and InternatIonal treaty rules. Project Logo Is provIded to you for use
only under the followIng terms. The end user (you) owns the dIsk on whIch the
Project Logo Is recorded, but the lIcenser (me) retaIns ownershIp of all copIes of
Project Logo Itself. You may not sublIcense, assIgn, or dIstrIbute copIes of Project
Logo to others. You may not translate, rent, lease, loan, resell for profIt,
dIstrIbute, or otherwIse assIgn or transfer Project Logo, or create derIvatIve works
based on the Project Logo or any part thereof.

Contents

PROJECT LOGO................................................................................................................... 1
Fine Print .......................................................................................................................... 1
PROJECT 1.............................................................................................................................. 3
PROJECT 2.............................................................................................................................. 8
PROJECT 3............................................................................................................................ 14
PROJECT 4............................................................................................................................ 19
Shades and Tints.............................................................................................................. 19
PROJECT 5............................................................................................................................ 23
PROJECT 6............................................................................................................................ 26
PROJECT 7............................................................................................................................ 30

Project 1

Although the pen tool Is a good tool for creatIng vector artwork, gettIng perfect
curves and symmetry In your shapes can be dIffIcult. Dften It Is easIer to combIne
basIc shapes to produce the desIred shape. The followIng project uses basIc shapes
In thIs way.

Create a new document wIth the followIng attrIbutes:

WIdth 500 pIxels
HeIght 500 pIxels
FesolutIon 72 pIxels/Inch
Canvas Color WhIte

The dImensIons of the fInIshed Image wIll be smaller than the ones we have
specIfIed here; the ones we are usIng are to gIve us enough space to work In.

The resolutIon you specIfy here Is redundant for screen Images as the Image Is
always rendered at the resolutIon of the vIewer's monItor. You wIll get the same
qualIty whether you specIfy 1 pIxel/Inch or J00 pIxels/Inch. For thIs project, sImply
leave resolutIon at the default of 72 pIxels/Inch.

f the magnIfIcatIon of the document Is not set to 100, double clIck the zoom tool
to set It to 100.




Select the rectangle tool (see above) and drag out a rectangle anywhere In the
document wIth the followIng propertIes:

WIdth 100
HeIght 50
Fectangle roundedness 50
Stroke 1PIxel Soft, black

Select the poInter tool by pressIng 7. WIth the cursor over one of the rectangle's
sIdes hold down alt. The cursor should change whIte. WhIle holdIng down alt, drag
the cursor to the rIght and down to copy and move the rectangle. You should now
have somethIng lIke thIs:



NotIce the overlappIng area - thIs Is what we are Interested In. Select both objects
by usIng ctrlA and then clIck |odIfy CombIne Paths ntersect to create thIs
shape:


FIrst of all remove the stroke and then use the scale tool to Increase the shape's
sIze so you can see what you are doIng (drag the corner handles to constraIn
proportIons). CIve thIs shape a lInear gradIent fIll wIth a startIng colour of #ffffff
and an endIng colour of #009900. Change the gradIent dIrectIon lIke so:



Copy and paste the shape, and rotate the new shape by 90 degrees counter
clockwIse. PosItIon both shapes lIke thIs:



To get both shapes alIgned lIke thIs, select them both and clIck |odIfy AlIgn
8ottom.

We wIll now Incorporate a complementary colour to make the desIgn more vIsually
appealIng. The colour that we wIll use Is #961J7J. Select the shape on the rIght
and edIt Its gradIent. |ake the end colour of the gradIent #961J7J and adjust the
dIrectIon so you get the followIng:



We wIll now add some depth to the desIgn by applyIng an Inner shadow. Select
both shapes and add an Inner shadow wIth the followIng propertIes:



Feel free to experIment wIth your own settIngs. ApplyIng the Inner shadow gIves us
the followIng:



All that Is left Is to add some text to the logo. For my text chose the SteelfIsh
font and used the two colours already In the desIgn:


Project 2


ThIs project Is a thorough exercIse In combInIng basIc shapes. Select the ellIpse
tool and drag out a cIrcle 140 pIxels wIde by 140 pIxels hIgh. Choose any fIll and
stroke you lIke, as we wIll be changIng them later. Copy and paste the cIrcle and
make the new cIrcle 80 of the sIze of the orIgInal. 0o thIs by clIckIng |odIfy
Transform NumerIc Transform and enterIng the followIng:



The reason we created thIs new cIrcle by copyIng and pastIng the orIgInal and then
transformIng It Is because doIng It thIs way ensures that both cIrcles are alIgned
both vertIcally and horIzontally. We could have drawn out the smaller cIrcle
manually but then we would have had to alIgn both cIrcles manually too. You
should now have the followIng:



used a lIght blue fIll and a black stroke on mIne. Select both cIrcles by usIng ctrlA
and then punch out the smaller one from the larger one by clIckIng |odIfy
CombIne Paths Punch. ThIs gIves the followIng shape:



8e aware that there Is a doughnut tool that you can select If you hold down the
ellIpse tool, and that wIll gIve you the same shape as the one you know have.
However, now you know how to punch one shape out of another shape.

0raw a rectangle wIth a wIdth greater than that of your doughnut and a heIght of 4
pIxels. Any fIll and stroke wIll do. Select both the doughnut shape and the
rectangle and alIgn them horIzontally by clIckIng |odIfy AlIgn Center
HorIzontal. 0o the same vertIcally by clIckIng |odIfy AlIgn Center 7ertIcal. You
should now have somethIng sImIlar to thIs:



Select the rectangle only and copy and paste It. WhIle the copy Is stIll selected,
rotate It by 90 degrees by clIckIng |odIfy Transform NumerIc Transform and
enterIng the followIng:



AlternatIvely, and fInd thIs a better method, you can sImply clIck on the rotate 90
degrees CW tool found on the |odIfy toolbar. The toolbar looks lIke thIs:



and can be dIsplayed (normally In between the bottom of the canvas and the top of
the property Inspector) by clIckIng WIndow Toolbars |odIfy.

After that last rotatIon, you should have the followIng:



Select both rectangles and make them one path by clIckIng |odIfy CombIne Paths
UnIon. The two rectangles have 'melded' together to form a sIngle shape.

WhIle thIs new path Is stIll selected, rotate It 45 degrees, to arrIve at the
followIng:



8ecause the new path rotated crond ts centre we don't have to alIgn the shapes;
they are stIll alIgned horIzontally and vertIcally.

Select both shapes and punch the cross shape out of the doughnut shape to gIve
the followIng:



t's startIng to look funky. Lets remove the stroke, gIve the shape a whIte fIll and
add an Inner shadow:



For the Inner shadow, used the followIng settIngs, but feel free to experIment.



Now drag out a green (#00CC00) rectangle 20 pIxels by 80 pIxels InsIde your shape.
0on't worry whether It's 'lyIng down' or 'standIng up'. Copy and paste It, then
rotate It 90 degrees to get the followIng:



NotIce that my shapes aren't centred (yet). Select both the new rectangles and
unIon them (|odIfy CombIne Paths UnIon). Select the new cross shape and the
cIrcular shape and alIgn them both horIzontally and vertIcally (|odIfy AlIgn
Center 7ertIcal, and then HorIzontal). Your shapes are now centred.



0rag out a rectangle 40 pIxels by 40 pIxels. 0on't worry about centrIng It just yet.
Copy and paste It and then Increase the sIze of the copy by 10 (|odIfy
Transform NumerIc Transform Scale by 110). n the layers palette, drag the
larger rectangle below the smaller rectangle. We are goIng to punch the smaller
rectangle out of the larger one so the smaIIer one must be above the Iarger one.
Perform the punch as you have done prevIously. You should now have:



Select everythn and alIgn horIzontally and vertIcally. 0eselect everythIng by
usIng ctrl0 and then select the punched rectangle shape and the cross shape.
|ake sure that In the layers palette the rectangle Is above the cross, because we
are goIng to punch the rectangle out of the cross. 0o that now to get the followIng:



We need to break apart the green shape so that we can change the colours of Its
component parts. WhIle the central green shape Is stIll selected, clIck |odIfy
CombIne Paths SplIt. Although the desIgn doesn't look any dIfferent, the green
shape has been broken Into 5 parts.
Select the central cross shape and change Its colour to #EEEEEE. Then, select the 4
remaInIng green rectangles and reduce theIr opacIty to 25. The opacIty settIng
can be found In the property Inspector:



You should now have somethIng that looks lIke thIs:



All that remaIns Is to add some text. used a font of 7IbrocentrIc:


Project 3

Dne of the most useful addItIons to FIreworks 8 Is the Convert |arquee to Path
functIon. f you have a bItmap wIth area of hIgh contrast, you can use the magIc
wand to make your selectIon and then convert It to a vector shape. ThIs Is what we
wIll be doIng In thIs project.

Create a new document that Is 500 pIxels by 500 pIxels and has a whIte
background. Use ctrlF to Import the Image named bowlerhat.jpg and ensure that
the magnIfIcatIon Is set to 100. Select the magIc wand and use the followIng
settIngs:



8ecause the contrast Is so hIgh, we are able to use such a hIgh tolerance. ClIck on
an area of black pIxels. We are tryIng to select cll black pIxels In the Image, but
even though the tolerance Is so hIgh, there may be some pIxels that escaped. f
there are, Increase the magnIfIcatIon to 400 (or whatever you feel comfortable
wIth) and select the lasso tool. Your stray pIxels may look lIke thIs (cIrcled In red):




WhIle holdIng down shIft, select the stray pIxels wIth the lasso tool. NotIce that
when you hold down shIft, a lIttle plus sIgn appears next to the cursor to IndIcate
that you wIll be cddn to your selectIon. Conversely, If you hold down alt whIle
selectIng, a lIttle mInus sIgn appears next to the cursor to IndIcate that you wIll be
removn pIxels from your selectIon.
ContInue addIng/removIng pIxels wIth the lasso tool (or wand tool If possIble), untIl
you have all the black pIxels selected. Also select the black pIxels In the bowler
hat. Your selectIon should look lIke thIs:




Here's the good bIt. ClIck on Select Convert |arquee to Path, and your selectIon
Is converted to a vector path. You can now change the fIll of the vector path to any
colour you lIke. Select the poInter tool by pressIng 7 and then change the fIll to
black. We need to get rId of the orIgInal photo too, but Instead of deletIng It from
our document, sImply hIde It In case we need to refer to It In the future (clIck on
the eye next to the bItmap In the layers palette). Your Image Is now a vector,
whIch means that you can scale It wIthout any degradatIon In Its qualIty. Scale It
down to half the sIze by clIckIng |odIfy Transform NumerIc Transform (Scale =
50).

Your vector Image should look somethIng lIke thIs.



We need a whIte background for the black text we are about to wrIte. Dne way of
doIng thIs Is to draw a rectangle and punch Its shape out of our vector gentleman.
The dIsadvantage of doIng thIs Is that If you change your mInd about the
dImensIons of the rectangle or Its posItIon, you have to undo all your steps and
start agaIn. f you close your png fIle and then reopen It, the hIstory Is lost and
undoIng steps Is not an optIon.

Another way to achIeve what we want Is to draw a whIte rectangle on top of the
fIgure In your Image and then wrIte black text on top of that. ThIs Is what we wIll
do. 0raw a whIte rectangle 1J0 pIxels wIde by J0 pIxels hIgh and place It over the
gent lIke thIs:




And then wrIte your text on top of It. used the 7IbrocentrIc font and got the
followIng:



For the 'decoratIon' at the bottom, draw a black rectangle 10 pIxels by 16 pIxels.
Copy and paste It and move It to the rIght usIng the rIght arrow key untIl there Is a
2 pIxel gap between the two rectangles. WIth the rIght rectangle stIll selected,
change the wIdth to be 2 pIxels.

For the new text used a plaIn Tahoma font.


UsIng very sImple technIques, you have achIeved quIte a strIkIng effect.
Project 4
The next project demonstrates an easy but wIdely used technIques usIng text.

Type the followIng text usIng the Aero font wIth a sIze of 100:





We are goIng to gIve the text a lInear gradIent but fIrst we need to decIde whIch
two colours to use. The desIgn wIll be predomInantly red so we wIll use #FF0000 for
the startIng poInt of the gradIent and a shade of thIs for the end poInt.

Shades and Tints
f you add whIte to a colour, you make It lIghter. The new, lIghter called a tInt. n
contrast, If you add black to a colour you get a darker colour - a shade.

An easy way to create a shade Is to do the followIng:
o 0raw a black square
o Copy and paste It
o Change the top (currently selected) square to be your startIng colour
o Feduce the opacIty of the top square by Increments of 10 (90, 80, 70
etc) untIl you get the shade you want. FeducIng the opacIty Increases the
amount of black In the colour and creates a shade of the orIgInal colour.

f you change the colour of the bottom square to whIte, then reducIng the opacIty
of the top (startIng colour) square wIll create tInts of the orIgInal colour.

f you then draw another shape, you can use the shade/tInt you just created by
clIckIng the fIll colour swatch of the new shape and then clIckIng the eye dropper
tool on the newly created colour.

f you follow the above steps you can create the shade #800000 by reducIng the
opacIty of the #FF0000 square to 50. We wIll use #800000 for the end poInt of the
gradIent.

The above method for creatIng shades and tInts Is very usefuI!

Now that we have decIded on the colours to use, let's gIve the text a gradIent.
Select the text and clIck on the fIll colour swatch. ClIck the FIll DptIons button at
the bottom and change the FIll category to LInear CradIent.



ClIck on the EdIt button to assIgn the colours #FF0000 and #800000 to the start and
end colours.



Change the gradIent dIrect lIke thIs:




Add a 2 pIxel basIc soft rounded whIte stroke to the text, by fIrst of all clIckIng on
the stroke colour swatch.



Then clIck Stroke DptIons and change the Stroke category to 8asIc and the Stroke
name to Soft Founded. 0on't forget to change the tIp sIze to 2 and also ensure that
the stroke Is Centred on Pcth.



To subtly accentuate the stroke we have applIed, gIve the text a glow wIth the
followIng attrIbutes:



ThIs gIves us the followIng:


The technIques you've used so far can be applIed to any text you want to jazz up
(It works better on fonts wIth thIcker strokes). We're goIng to add one fInal touch
to gIve the text some depth.

Add an Inner shadow wIth the followIng propertIes:



You should have somethIng that looks lIke thIs:


Project 5

Create a new document that Is 500 pIxels by 500 pIxels and has a whIte
background. 0raw an ellIpse wIth a wIdth of 200 pIxels and a heIght of 120 pIxels.
CIve It an ellIpse gradIent wIth a 'whIte black' preset fIll. PosItIon the gradIent lIke
thIs:


Copy and paste the ellIpse and scale It down to be 70 of the orIgInal sIze (usIng
|odIfy Transform NumerIc Transform). Dn the new, smaller ellIpse change the
fIll to solId #00CC00 and reduce the opacIty to around 40. PosItIon the green
ellIpse lIke thIs:




FeducIng the opacIty allows the colour transItIon on the ellIpse below It to show
through a lIttle. t gIves the IllusIon of a green gradIent that follows the grey
gradIent closely. CIve the green ellIpse an Inset emboss by clIckIng on the Add LIve
FIlter button 8evel and Emboss nset Emboss and leave the settIngs at theIr
defaults.
The green ellIpse should look lIke It's set Into the larger grey ellIpse:



We are goIng to add some text that follows the contour of the larger ellIpse. Copy
and paste the grey ellIpse and scale It down to 90 of Its orIgInal sIze. |ove It to
the left slIghtly by pressIng the rIght arrow key a few tImes whIle It Is stIll selected
(the arrow keys move selected objects 1 pIxeI In the arrow dIrectIon; If you hold
shIft whIle you press an arrow key, the object moves 10 pIxeIs). You should now
have somethIng lIke:



Type out your text anywhere on the canvas. used a font of 7IbrocentrIc, sIze of 15
pIxels and typed somethIng meanIngless (zIngo zango). Use a lIght grey, lIke
#CCCCCC. Select the poInter tool, and whIle the text Is selected, hold down shIft
and select the last ellIpse you drew. Select Text Attach to Path. The text Is on
the outsIde of the path and we want It on the InsIde, so select Text Feverse
0IrectIon. The text Is not quIte where we want It - we need to slIde It round the
curve of the path. Enter a Text offset of 20 to do thIs. You should end up wIth
somethIng lIke thIs:



There Is an optIonal step. To gIve your desIgn an extra zIng, draw a large ellIpse
lIke thIs:



Copy thIs ellIpse and paste It. |ove the new ellIpse 10 pIxels to the left and 5
pIxels up to get the followIng:



Select both of the large ellIpses and select |odIfy CombIne Paths Punch. Cet
rId of any stroke on the new path, and change the fIll to be whIte. ThIs gIves you
the fInIshed artIcle:


Project 6
We're goIng to create a desIgn wIth a dark and moody feel now. Create a new
document 500 pIxels by 500 pIxels wIth a black background. To prepare the colours
we are goIng to use, draw a red (#FF0000) square on top of a black square and
reduce the opacIty of the top red square. FeducIng It to dIfferent opacItIes gIves
the followIng colours:

DpacIty X CoIour
60 #990000
70 #8J0000
80 #CC0000

0raw a cIrcle 400 pIxels by 400 pIxels wIth a fIll colour of #990000 and no stroke.
Copy and paste It, scale It down to 70 of Its orIgInal sIze and gIve It a fIll colour of
#8J0000. |ove It over to the left 50 pIxels. Copy and paste thIs cIrcle, scale It
down to 60 of Its orIgInal sIze and change Its fIll colour to #CC0000. |ove thIs
cIrcle over to the left 50 pIxels. You should now have somethIng that looks lIke
thIs:



We need an object of Interest to be the focal poInt. used the letter 'C', sIze 150
In the HIrosh font and place It lIke so:



CIve the letter a reflectIon by copyIng It and pastIng It, clIckIng the FlIp 7ertIcal
button In the |odIfy Toolbar:

|ove the flIpped copy down usIng the arrow keys whIle holdIng down shIft (use just
the arrow keys to move the shape one pIxel at a tIme) untIl It Is just below the
orIgInal letter. Fade out the shape by clIckIng Command CreatIve Fade mage
and select the 4
th
optIon along. You should now have:



The reflectIon Is too bold so reduce Its opacIty to J0. n the same HIroshI font,
but wIth a sIze of 40, type the word 'HIroshI' lIke thIs:



CIve the text a basIc, soft rounded stroke 4 pIxels wIde wIth a colour of #8J0000.
Change the fIll colour of the stroke to #800000. ThIs gIves you the fInal look:


Project 7
Create a new document 500pIxels by 500 pIxels wIth a whIte background. Create a
cIrcle 140 pIxels by 140 pIxels and gIve It an ellIpse fIll. Use #68A4J4 for the
hIghlIght colour and #JC5010 for the darker colour:



Change the gradIent dIrectIon so that It looks lIke thIs:



Add an Inner shadow wIth the followIng attrIbutes:



Here Is where It gets InterestIng! Copy and paste the cIrcle and scale It down to
95 of Its orIgInal sIze. To help you IdentIfy It later, gIve It a red stroke. Now draw
an ellIpse that looks somethIng lIke thIs:



We are goIng to use the IntersectIon of the 2 red ellIpses: select them both and
then clIck |odIfy CombIne Paths ntersect. Femove the Inner shadow from the
new shape. You should now have:



The red shape Is Ideal for a reflectIon: remove the stroke, change the fIll colour to
be a WhIte, 8lack ellIpse gradIent and move the gradIent handles somethIng lIke
thIs:



Change the blend mode for thIs shape to be screen and reduce the opacIty to 15:


ThIs adds what appears to be a reflectIon to the sphere:



We are goIng to repeat thIs process J more tImes to add J more reflectIons of
dIfferIng sIzes. That Is, perform the followIng J more tImes:

o Copy and paste the orIgInal sphere
o Feduce Its sIze a lIttle (use percentages from 90 to 95). Use a dIfferent
percentage each tIme.
o 0raw another ellIpse, not very hIgh but wIde, so that the IntersectIon of thIs
and the prevIous ellIpse forms a shape sImIlar to our fIrst reflectIon. 7ary
the exact dImensIons of the ellIpse
o WhIle these 2 shapes are selected, clIck |odIfy CombIne Paths ntersect
o Use a WhIte, 8lack ellIpse gradIent on the resultIng path and orIentate the
gradIent dIfferently on each one. PosItIon the hIghlIght on the left, In the
centre and on the rIght. TIP: to reset the dIrectIon handles of the gradIent
to theIr default posItIon, double clIck the round handle
o Change the blend mode for thIs shape to be screen and reduce the opacIty
to anywhere between 10 and 20:

There Is much room for IntroducIng your own unIque flaIr to these steps, so don't
be too worrIed If you don't fInIsh up wIth somethIng that Isn't excctly the same as
thIs:


WIth the pen tool, draw a shape wIth a whIte fIll sImIlar to thIs:



CIve thIs new shape a feather amount of J0:



Feduce the opacIty to around 60 70 and we have somethIng lIke thIs:


We are now goIng to create a rIng to go around the sphere: copy and paste the fIrst
(large) ellIpse. Paste It agaIn so that you now have 2 copIes of It. Select the one
that Is lower In the layers palette and scale It so that It Is 110 of Its orIgInal sIze.
Select the 2 new ellIpse and punch the smaller one out of the larger by clIckIng
|odIfy CombIne Paths Punch. Femove any Inner shadows that may be on the
rIng. You should have thIs ('ve gIven the rIng a red fIll just so you can see It):




CIve the red rIng a 4 pIxel soft rounded stroke, a lInear blackwhIte gradIent and
orIent It just so:


CIve the rIng a feather amount of J. We are goIng to chrome up thIs rIng by
applyIng the followIng effects:

Inner Shadow


Curves


Inner Shadow


Feduce the opacIty of the rIng to 60. You should now have somethIng that looks
lIke:



ChangIng the background colour to black changes everythIng:



Create a reflectIon of the sphere by doIng the followIng:

o CtrlA to select everythIng
o Copy and paste usIng CtrlC then Ctrl7
o FlIp vertIcally (use the |odIfy Toolbar as shown In earlIer exercIses)
o CtrlC to group all components of the copy and move It downwards by
holdIng down shIft and pressIng the down arrow
o Fade out the copy by clIckIng Commands CreatIve Fade mage, and
choose the 4
th
optIon
o Feduce the opacIty to 40

You should now have somethIng sImIlar to thIs:



t's now a sImple task to draw a rectangle as wIde as the canvas and J0 pIxels hIgh
wIth colour #J75J1A, stroke #4864J0 and then to wrIte some text wIth colour
#7J865E on top of It. 7oIla!