CLASS :: 06 03.04 2016 3 Hours THE AGENDA LOGO CREATION [Adobe Illustrator] :: Text Tool [Creating Outlines] :: Type on Path :: Shapes and Pathfinder :: Pen Tool [DEMO] :: Trace a Simple Illustration/Image CREATING BUTTONS TESTING FTP CONNECTION 1
Better with Experience LOGO CREATION [ ADOBE ILLUSTRATOR ]: Design software programs enable users to create and manipulate digital text and images. Each program provides a plethora of tools; each with a gamut of options. While learning each tool, feel free to experiment with the options. Take note of the options and values most useful to you. Don t be afraid to try steps not listed in your notes Text Tool - Creating Outlines 1. Open New Adobe Illustrator Document 2. Turn on Grid [ Ctrl + ] OR [ command + ] Use as a guide for creating proportioned work 3. Choose the Text Tool [T] 4. Choose Font (Closest Relative to Your Desired Logo Text) 5. Write Text Logo 6. Click Selection Tool (To escape writing the text) 7. Go to Menu Bar > Type > Create Outlines 8. Click Direct Selection Tool [A]: 9. [Click/Select] Blue Anchor Points and Manipulate Shape with Arrow Keys Or Mouse You may select one anchor point to select OR Drag around multiple anchor points for selection OR Click inside the fill area to select a group (i.e. the letter G) OR Use the Selection Tool or Group Selection Tool to manipulate the entire object 10. File > Save As: Format: Adobe Illustrator (ai) illustrator document for future edit 11. File > Export : Format: Photoshop Document (psd) for your mockup: Go To File > Export > Select Photoshop (.psd) 12. File > Export : Format: SVG (svg) for the web: NOTE: After clicking the Export button, a pop-up window will appear. Before clicking OK, Click the Web browser (globe) graphic button to preview the svg in a web browser. After previewing, Click the OK button to save the svg inside Your folder > website > images folder 2
Text on A Path (Concentric Circle, Custom Curve) If either you or your future boss believes A logo = A typical seal or patch (with concentric circles and text wrapping around a vortex), then this section is for you: EXAMPLE (Note, this is not an official logo): 1. Open New Adobe Illustrator Document 2. Show Grid [ Menu Bar > View > Show Grid ] 3. Create a Circle with the Ellipse Tool (L) [ Hold Shift + Click and Drag ] 4. Make Fill Color Transparent and Stroke Color Black 5. Cut the Circle Using the Scissor Tool [C] OR [ Look for Eraser Tool Choice 2 ]: (Click 2 points you wish to cut away from circle NOTE: This will create an upper & lower circle 6. Choose Type on Path Tool [T] ( Look for Text Tool Choice 3 ): 7. Left-Click the Upper Circle Path 8. Select the best font size and color for your logo (in Characters Property Options): 3
9. Type Your Name/Business Name 10. Adjust the text boundaries [ Hover over the Blue Lines, Click + Drag ] 11. Pull left Blue Line to the Left Pull right Blue Line to the Right 12. Click Center Paragraph Icon to center your text on the path 13. To adjust position/orientation on path: Go To Menu Bar > Type > Type on Path > Type on Path Options 14. Repeat Steps 6 13 for lower text. NOTE: To position text on lower circle You may have to [Check] Flip to adjust the lower text 15. File > Save As: Format: Adobe Illustrator (ai): YourInitials_text-on-path.ai 16. File > Export : Format: SVG (svg): YourInitials_text-on-path.svg 17. File > Export > Select Photoshop (.psd): YourInitials_text-on-path.psd For More Instruction SEE: Title: NSL week 98 Adobe Illustrator CS6 Type on a Path By: Sebastian Bleak http://youtu.be/v7yus8wj21i 4
Shapes and Pathfinder In this session, I ll demonstrate creating a logo using 3 shapes and intersections using the pathfinder options: 1. Open New Adobe Illustrator Document 2. Create Shape One (Concentric Circle to represent letter O ): a. Choose Polar Grid Tool b. Click on Artboard to Activate shape properties c. Enter the following values (Ensure the last two options are checked): Result of Polar Grid Input 3. Create Shape Two (Half Circle to represent letter D ) Using Scissors Tool: 5
4. Create Shape Three (5-point Polygon to represent letter M ) Using Rectangle Tool + Adding Achor Point: Create Square: [Rectangle+Shift+Click+Drag] Add Anchor Point to Top Center of Path: a. Choose Add Achor Point Tool [+] Click Shift + Down Arrow Key to Create an M Shape: b. Click Top Center of Square c. Ensure only new anchor is selected (Should be the only Blue Square) 5. So far there are 3 shapes: 6. Let s take a chunk out of that target looking shape for fun 7. Duplicate the D Shape: Selection Tool > Click D Shape > [Ctrl+C] to Copy > [Ctrl+F] to Paste in Front 8. Move the Duplicated D Over the O Target: 6
9. Subtract the Front Shape D from the O : a. Go to Menu Bar > Window > Pathfinder > Ensure both Shapes are selected: b. Select Minus Front Button 10. View Results & Make Adjustments: 11. File > Save As: Format: Adobe Illustrator (ai): YourInitials_pathfinder.ai 12. File > Export : Format: SVG (svg): YourInitials_pathfinder.svg 13. File > Export > Select Photoshop (.psd): YourInitials_pathfinder.psd 7
Pen Tool & Working With Paths [DEMO] 1. Open New Adobe Illustrator Document NOTE: There is no easy recipe for the Pen Tool, just practice and master how to: 2. Create a Shape with The Pen Tool (P) The Pen Tool creates a line between points. : To create a point, Left-Click ONCE and Release; Repeat until shape is complete To create 90º & 45º lines & angles Hold Shift + Left Click and Release If you Left-Click and Drag Mouse a curved line is created To eliminate the curve, Hit Shift+C, Hover over Anchor Point, & Double-Click 3. Choose Selection Tool [V] and Click the Shape NOTE: You may transform shape with Transform Controls 4. Choose Direct Selection [A] 5. Select specific points by Holding Shift and clicking Anchor Points OR Select specific points by Clicking and Dragging around Anchor Points Move selected points with arrows and move tool 6. Convert points to curves [ Shift+C ] Hover over an anchor point (an angle icon appears) Click on anchor point (square defining a direction change on a shape) Click on curve controls (circles at the end of lines) & note the new curves behavior Drag curve control points to form a shape 7. Duplicate Shape a. Choose Selection Tool [V] b. Click Shape c. Click Ctrl + C [ or Edit > Copy ] d. Click Ctrl + F [ or Edit > Paste in Front ] 8. Change the new shape s color and make the shape larger with Transform Controls 9. Move New Shape to Back [ Right-Click > Arrange > Send to Back ] 10. Create different effects with Pathfinder Tool [ Menu Bar > Window > Pathfinder ] a. Select Both Shapes b. Select different buttons in the Pathfinder Tool to view effects 11. File > Save As: Format: Adobe Illustrator (ai): YourInitials_pen.ai 12. File > Export : Format: SVG (svg): YourInitials_pen.svg 13. File > Export > Select Photoshop (.psd): YourInitials_pen.psd 8
Trace a Simple Illustration/Image 1. Open Adobe Illustrator 2. Go To File > Place > Browse & Select Your Scanned Image 3. Click Image once to activate Trace Toolbar 4. Go To Menu Bar > Window > Image Trace 5. PRESET MODE: Choose Options that best suit your photo or illustration: Example Below will use Black and White Logo Trace Option: NOTE: This image is being used to show how illustrator can simplify line art this is not a logo! For artwork in older versions of Illustrator, I typically use a Simple Trace with over 180 Threshold (Balance of whites/blacks). For photographs, I increase/decrease the number of colors, based on the effect wanted. 6. Go To Menu Bar > Object > Expand 7. Path & Achor Points (Shown Highlighted below) may be manipulate with: a. Direct selection Tool b. Pencil / Smooth Tool c. Pen Tool: Convert anchor, Add/Delete Anchor Points d. Color : Paint Bucket / Eyedropper Tool 8. File > Save As: Format: Adobe Illustrator (ai): YourInitials_imagetrace.ai 9. File > Export : Format: SVG (svg): YourInitials_imagetrace.svg 10. File > Export > Select Photoshop (.psd): YourInitials_imagetrace.psd 9
:: Creating Buttons STEP DESCRIPTION ACTION SHORTCUT KEY [Win] [Mac] 1 Buttons For Navigation or Functions (i.e. play button for video, arrows for navigation, etc): 1. Ensure your buttons are vector objects. 2. Vectors are crisp and scalable in browsers. 3. You may create your own vector buttons with the pen tool in Photoshop or Illustrator. 4. For web vectors in Photoshop, you may use the Custom Shape Tool (U last option) 5. For preset characters on Mac Use the Character Viewer, or switch the font to Lucida Grande 6. For preset buttons & icon characters go to: http://copypastecharacter.com/, capture image with: [Print Screen Button] (PC) & Paste in.psd or Screen Shot [Shift+Command+4+Drag over selection] (Mac) & paste in document (from the Desktop or Preview) NOTE: While on the copypastecharacter site, click on the character you prefer, at the top of page click the As HTML button & write down the character code (i.e. ) for your web coding in the future 2 Add to Mock-Up Use any method above to add navigation and other buttons to your mock-up 3 Save Document [Ctrl+S] [cmd+s] :: Test FTP Access to Your Web Server STEP DESCRIPTION ACTION SHORTCUT KEY [Win] [Mac] 1 Open Dreamweaver 2 Define Your Website FOLLOW INSTRUCTIONS @: URL: http://iris.nyit.edu/~dmyrick/dgim601-m01/docs/defining-a-website.pdf 3 Repeat Steps at Home 10
HW-6 Homework DUE :: 03.11 REVIEW :: 1. Class Notes 2. Watch Video Tutorials : Logo Design, Shapes, Adobe Illustrator DO :: Complete Your Photoshop Website Mock-Up Complete Buttons for Mock-Up Complete First Version of Logo [Place in Mock-Up] SEE HOMEWORK PAGE FOR COMPLETE DETAILS BRING :: 1 Mock-Up [Homepage] 2 Vector Buttons 3 Logo [v1] 11