MULTIMEDIA WEB DESIGN

Size: px

Start display at page:

Download "MULTIMEDIA WEB DESIGN"

Claud McDaniel
6 years ago
Views:

1 CLASS :: Hours THE AGENDA SAVING VECTOR LOGO [Adobe Illustrator] :: File Types: [.ai,.png,.jpg,.gif,.svg] :: Save for Web :: SVG Web Code [View code, View in Browser] LOGO CREATION [Adobe Illustrator] :: Text Tool [Creating Outlines] :: Type on Path :: Shapes and Pathfinder :: Pen Tool [DEMO] :: Trace a Simple Illustration/Image 1

2 SAVING VECTOR LOGO [Adobe Illustrator] FILE TYPES DESCRIPTION Adobe Illustrator Format File Extension:.ai o File format for Adobe Illustrator Files.ai is the files extension for Adobe Illustrator files. This file format is required for storing and editing your vector-based projects. HOW TO SAVE: File > Save As: Format: Adobe Illustrator Document (ai) Adobe Photoshop Document Format File Extension:.psd o File format for Adobe Photoshop Document Files.psd is the files extension for Adobe Photoshop Document files. Saving your logo in this format is ideal when the vector image will be used in a Photoshop document. In this class, you will use the.psd format for including your vector images in your Photoshop website mock-up HOW TO SAVE: File > Export: Format: Photoshop (psd) Portable Network Graphic File Extension:.png Best for Curved/Angled Images with Transparent Background Portable Network Graphics (.png), has 16 million colors and allows an image file to export with an alpha channel. Use.png (PNG-24) when saving images with curved, angled, and irregular edges. The alpha channel (transparency) will allow your image to display flawlessly on any background HOW TO SAVE: File > Save for Web: Format: PNG-24 (for web) File > Export: Format: PNG (png) (for other) 2

3 Joint Photographics Expert Group File Extension:.jpg o Best for Photos and Images with 90 degree edges Joint Photographics Expert Group (jpeg or jpg) has 16.7 million colors and does not support an alpha channel. Use.jpg when saving photo images with 90 degrees edges. Irregular edged images will export with a white box background. HOW TO SAVE: File > Save for Web: Format: JPEG (for web) File > Export: Format: JPEG (jpg) (for other) Graphics Interchange Format File Extension:.gif o Best for Limited Color Animated Images and Shapes with limited color + 90 degree edges Graphics Interchange Format (gif) has up to 256 colors and supports an alpha channel. Use.gif when saving shapes with limited color + 90 degrees edges, and animated images. NOTE: Irregular-edged images are capable of exporting with a transparent background; however, the edges may appear extremely jagged. Opt for.png if this occurs. HOW TO SAVE: File > Save for Web: Format: GIF (for web) Scalable Vector Graphics File Extension:.svg o Best for (+, -) Scaling, Vector Images; Animation; Transparent Background Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. Options for Exporting and Copying generated web code are available in Illustrator Only (at this time) HOW TO SAVE: File > Save As: Format: SVG (svg) URL: 3

4 SVG OPTIONS: NOTE: You have the option of copying the code for future use in the web [by clicking the SVG Code button] OR the option of viewing the file on the web [by clicking the Globe button] 4

5 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 5

Make Fill Color Transparent and Stroke Color Black 5.

6 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 ): 6

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.

7 7. Left-Click the Upper Circle Path 8. Select the best font size and color for your logo (in Characters Property Options): 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 > Save As: 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 7

Enter the following values (Ensure the last two options are checked):

8 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: 4. Create Shape Three (5-point Polygon to represent letter M ) Using Rectangle Tool + Adding Achor 8

Point: MULTIMEDIA WEB DESIGN Create Square:

Create an M Shape: b. Click Top Center of Square c.

9 Point: MULTIMEDIA WEB DESIGN 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: 9

Select Minus Front Button 10. View Results & Make Adjustments: 11.

10 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 > Save As: Format: SVG (svg): YourInitials_pathfinder.svg 13. File > Export > Select Photoshop (.psd): YourInitials_pathfinder.psd 10

11 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 > Save As: Format: SVG (svg): YourInitials_pen.svg 13. File > Export > Select Photoshop (.psd): YourInitials_pen.psd 11

Trace a Simple Illustration/Image 1. Open Adobe Illustrator 2. Go To File > Place > Browse & Select Your Scanned Image 3.

For artwork in older versions of Illustrator, I typically use a Simple Trace with over 180 Threshold (Balance of whites/blacks).

Path & Achor Points (Shown Highlighted below) may be manipulate with: a. Direct selection Tool b. Pencil / Smooth Tool c.

12 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 > Save As: Format: SVG (svg): YourInitials_imagetrace.svg 10. File > Export > Select Photoshop (.psd): YourInitials_imagetrace.psd 12

13 HW-5 Homework DUE :: REVIEW :: 1. Class Notes 2. Watch Video Tutorials : Logo Design, Shapes, Adobe Illustrator DO :: 1. Complete First Version of Logo [Place in Mock-Up] 2. Ensure the images and videos you want in your website are saved to your flash drive SEE HOMEWORK PAGE FOR COMPLETE DETAILS BRING :: 1 Logo [version 1] 2 Flash Drive with Images and Videos Needed for Website 13

:: MULTIMEDIA TOOLS :: (2131) :: CLASS NOTES

:: MULTIMEDIA TOOLS :: (2131) :: CLASS NOTES 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