the beauty of VECTORS

creating vector graphics

Vector drawing programs are used for the quality and scalability of the graphics they produce. Graphics created are made of lines and curves which are defined by mathematical objects, rather than pixel information. They are called ‘vectors’ as they produce graphics by geometric characteristics. Vector graphics are resolution-independent and will maintain their quality if scaled to any size, for any output device. This makes the vector format perfect for artwork including type and flat colours, such as icons, logos and bold-style graphics. why vectors?

vector versus bitmap vector bitmap zoom 400% zoom 400% image quality remains unaffected, clean vector lines image quality shows pixellation, bitmap deterioration

vector so!tware

vector formats • print format • easily move graphics between Illustrator and Photoshop • lossless scaling in most DT apps • versatile/web format • keeps vector quality for web • lossless scaling in browser window

Some background: Bézier curves were widely publicized in 1962 by the French engineer Pierre Bézier, who used them to design automobile bodies. The curves were first developed in 1959 by Paul de Casteljau using de Casteljau's algorithm, a numerically stable method to evaluate Bézier curves. [quoted from wikipedia, dec 2010] From this mathematical principle - the Beziér Pen was designed and developed and it is now common to a lot of different drawing applications, used for technical drawing to creating visuals such as graphics and icons. the pen tool

delete anchor point tool ± " !&$$ &0-&$33&"33 :3&43$3004-3$3&:&3-3ž add anchor point tool ± " !&$1#$3&3-3 to add an anchor point :3&43$3004-3$3&:&3-3ž pen tool convert anchor point tool ± " !&$$ &0-&$33&"331$"1 ± " !$0$$ &3-&$3 3& 03$:$"1

contrary to drawing a straight line - you need to keep your mouse held 03 409"$ª€013$ &0-&$3 down in order to create the control handles which will enable you to curve your line. anchorpoint created by mouse click control handles created by mouse drag click with your mouse onto the artboard and with the mouse button held down, start dragging. notice that the pen tool cursor changes into an arrow which indicates that you are editing a bézier handle. 1

create a curved line - second anchor point let go of your mouse button - and move your pen to create a new point. click, hold your mouse button down and drag new handles out. the line will curve into the opposite direction of your mouse movement This principle will make it easy fo ryou to edit the cirvature and length of the line later on. By clicking on an anchor point - or segment of the path - with the direct selection will - the handles needed for changing this particular point or line will be displayed automatically. Illustrator displays the bézier handles as selected. As you are dragging out the handles for the new point - it will also display the handles of the next linked point. 2

path with bezier handles displayed edit path with Direct Selection tool path deselected, print preview

To change the direction of a curve. ± click on the artboard and drag up 3& 033€013 &$30&"$" ± " !3&303&31-&$3$ 0&:$3& 0331$:-&$3‰1 &$30&"$"1

± with the pen tool still selected, position the mouse over the last anchor point you created. When you are over it a small upside down v will appear next to it. Hold down the alt button, click on the point and drag upwards to change the normal direction of the curve, creating the new handle in the same upward direction as the previous one. ± click to the right of the second anchor point and drag downward to complete the curve.

selection tool (V) direct selection tool (A) group selection tool select full path / object select anchor points on path edit Beziér curve via control handles select individual paths within a group for separate editing

transformations

original shape rotation €$"-&13&$ rotate tool ± 1" 33-3¥1- ± &&10 33&&"03&&"0 ± " !3&13-&$3&&0$&00 3&$ ± " !$03&0 33-3¥1-"3&3&--"<3 repositioning

original path 0 3:3 &-<"3ž €$""$1&0#$1- 0 33&&" ± 1" 33-3¥1- ± &&10 33&&"03&&"0 ± " !3&13-&$3&&0$&00 3&$ ± " !$03&0 33-3¥1-"3&3&--"<3 0-&13&$$ &"&:$3"3 3& 03 &-< &31- :"41$ 30 33&&"

original shape click and drag €$"1? scale tool ± 1" 33-3¥1- ± &&11 "3&&"03&&"0 ± " !3&13-&$3&&0$&001? ± " !$03&1 "3-3¥1-"3&3&--"<3$:1?

original path click and drag €$"13&03&$ 103&&" ± 1" 33-3¥1- ± &&1103&&"03&&"0 ± " !3&13-&$3&&0$&010 ± " !$03&10 shadow shadow shadow shadow

free transform tool original note: keep in mind that in order to transform any text in older versions of Illustrator - you :""$3& 03&43"$10<&403;3€013‘ select the text > top menu: type > create outlines 1

using the command (ctrl for PC) key ± 1" 33-3¥1- ± &&1030$1&0#3&&"03&&"0 ± " !&$ &0$0&3$:&4$$&;$&" ± :"13""&"$3#&41!<&:$ª &"&:$3 #$!< 30"&0gIž$1303 dragging ± "3&&<&40#&41€013Ž&""&:<3!<Ž 3&--"<330$1&0#3&$ 2 free transform tool

using the command (ctrl for PC) and alt keys ÇÇ0-33€0133013-11&0µž$&" ± :"13""&"$3#&41!<&:$ª &"&:$3 #$ 30"&0gIž$"3!<1 and start dragging 3 free transform tool

free transform tool using the command (ctrl for PC) and alt keys ÇÇ0-33€0133013-11&0µž$&" ± :"13""&"$3#&41!<&:$ª &"&:$3 #$ 30"&0gIž$"3$13 keys and start dragging 4

pathfinders

add to shape area subtract from shape area intersect shape areas exclude overlapping shape areas click expand to flatten the artwork

divide trim merge crop outline minus back exclude overlapping click note about the expand option: in newer versions of Illustrator, this option has been reversed: artwork is expanded by default - you will need to hold down ‘ALT’ to keep your original shapes in place.

exclude overlapping shape areas compound path note: in most cases, expanding would $&3911;"3<1 maintained step 3 select both - and click on the -3€$0433&$3&; "4 overlapping areas step 2 position the shapes as shown here step 1 create 2 squares, one about half the size of the other

Thank you for listening :) Prisca Schmarsow prisca@eyedea.eu graphiceyedea.co.uk @prisca_eyedea