Introduction to Adobe Bridge
Adobe Bridge is an organizational software application that is a part of the Adobe Creative Suite. Its primary purpose is to link the parts of the Creative Suite together using an interface similar to the file browser found in previous versions of Adobe Photoshop. It is accessible from all other components of the Creative Suite.
Best Practices for File Naming
Accurate file-naming – Special characters – Underscore – Date
Read more about file-name convention for digital files.
Best Practices for File Storage
What happens when you move your files to multiple locations?
- Backing up your files to multiple storage spaces
- How to Compress (Zip) Files and Folders
- Sending files under 100mb: Transferbigfiles.com
- Viewing your saved files on any computer: Dropbox
Introduction to Adobe Illustrator CS6
Adobe Illustrator History
Adobe introduced Illustrator 1.1 was introduced in 1987, using the Bezier curve as the basis for vector graphics. These vector graphics create PostScript files visually.
Adobe Illustrator vs Adobe Photoshop
They share much of the same functionality BUT Adobe Illustrator is used for creating vector graphics and vector text, while Photoshop is used to create raster graphics (or bitmaps). Vector graphics are made of lines and curves that contain mathematical objects called vectors (Illustrator). Raster graphics (or bitmaps) contain tiny dots of color (also called pixels or bits)(Photoshop). In Photoshop the image is the combination of many of these dots/pixels with the final result being the appearance of a solid image. You to edit images by changing the pattern of the pixels by lightening or darkening them, and by rearranging their pattern.
Summary: Photoshop is the primary tool for editing photos and Adobe Illustrator is the preferred tool for creating vector graphics. Note: Bitmap graphics (photos) are much larger in file size than vector graphics because information for every single bit must be saved to the file. Every time you change the file and resave it you lose quality. Change the size of a raster graphic and your quality will be changed. Vector graphics can be scaled to any size without losing quality.
Adobe Illustrator will allow you to convert a vector image to a raster image. You can also import raster images, but the images themselves cannot be edited in Illustrator.
See the example below of a vector and a bitmap below.
Understanding Vector Graphics (Illustrator)
Vector is another word for a scalable graphic design. They are constructed shapes, colors, and placement that together, form a picture, and are ‘scalable’. Vector graphic formats include PICT, EPS, and WMF as well as PostScript and TrueType fonts.
In their original format, vector graphics are easy to alter; anything about the graphic can be changed. Vector graphics allow you to open a previously saved file, change it, and then save it again. You can open the file an unlimited number of times, change it, and then save it and you never lose the integrity of the document. They offer exceptionally high quality print; the vector file type most typically requested by printing companies is called .EPS – which is short for Encapsulated Post Script.
Adobe Illustrator creates graphics in vector format, and then from these vector images a whole multitude of other file types can be created without changing the scalable attributes of the vector file (the master file). From this master file you can create a GIF, JPEG, PNG, TIFF, XBM, BMP, and PCX file. Note, you can take a vector file and turn it into a bitmap bile but you CANNOT take a bitmap image and turn it into a vector image.
When a shape or an object in Illustrator, it is considered either an open path or a closed path. When the path is enclosed, a square for example, it’s call that a closed path. When the beginning and ending points are not connected, a line for example, that is an open path. A path is made up of multiple segments with each segment having an anchor point at the beginning and one at the end. Anchor points control the shape of the path. When you draw a shape, it is considered to be an object in Illustrator. Anything added is always considered an object.
- Lynda.com video on vector graphics.
Touring the Illustrator Interface
Tools Panel Overview
The Tools panel appears at the left side of the screen. You can move the Tools panel by dragging its title bar. You can also show or hide the Tools panel by choosing Window > Tools.
You use tools in the Tools panel to create, select, and manipulate objects in Illustrator. Some tools have options that appear when you double-click a tool. These include tools that let you use type, and select, paint, draw, sample, edit, and move images.
You can expand some tools to show hidden tools beneath them. A small triangle at the lower-right corner of the tool icon signals the presence of hidden tools. To see the name of a tool, position the pointer over it.
Setting Up a New Document
- File – New
- Choose a profile: print, web, video/film, etc.
- Advanced: choose your color mode (CMYK for print, RGB for web)
Lynda.com video on touring the interface.
- Illustrator CS6 tutorial from Adobe
Using the Selection Tool
Create an original graphic for a background for a website using Adobe Illustrator, to create an original work. Use design elements including line, shape and space as well as Illustrator effects to create the background.
In Class Exercise 1:
Download the sample vector file here.
Create a new document with the following parameters, prepped for the web:
- Width: 1280 pixels – Height: 800 pixels.This is the most common web resolution.
- Make sure that the New Document Profile has Web selected. This will set the resolution will be set for you (72 pixels/inch, color mode RGB 8 Bit).
- Open the sample vector file and drag it and drop it onto your new document. Change the following: color, size, shape and placement and scale using Illustrator’s simple tools and effects (blur, etc.) to create a generic background that could be used for a website. Save the file as an editable pdf and upload to your blog.
- Give your document a name starting with: 2013.9.20_Last Name_Frist Name_Background.
In Class Exercise 2:
IN-CLASS EXERCISE 3:
– The project theme is: RESIZING/TRANSFORMING.
- Create a new blank document. File > New (The shortcut on the Mac is Command+N)
- Choose Print from the New Document Profile drop-down menu and Inches from the Units drop-down menu.
- Profile > Custom – Number of Artboards > 1 – Size . Letter –
- Press OK and a new document appears
- Select the Rectangle tool from the Tools panel. Click and drag anywhere on the artboard. Typically, you pull from the upper-left corner diagonally to the lower-right corner.
- Save the document as: 2013.9.20_Last Name_First Name_Rectangle
- Choose the selection tool and click on your rectangle to highlight the rectangle and show the eight handles.
- Drag the rectangle to a new location without resizing it.
- Hover over the bottom-middle handle until the cursor becomes a vertical arrow. Click and drag to resize the rectangle.
Save the document as: 2013.9.20_Last Name_First Name_Rectangle2
- Select the rectangle – Open the Transform panel – Window > Transform
- Click on the upper-left corner of the reference point locator to see the X and Y values change
- Choose View > Show Rulers to display the rulers
- In the transform panel type 2 into the X text field and 2 into the Y tab field. MAKE SURE the Constrain Width is not selected. Then type 1 in Width and 1 in Height text field.
Save the document as: 2013.9.20_Last Name_First Name_Rectangle3
Save the document as: 2013.9.20_Last Name_First Name_Rectangle4
- Select the Rectangle Tool
- Hold down the Shift key and click and drag on an empty are. NOTE: Holding down the shift key contrains the shape to create a square. To keep it a square, release the mouse BEFORE releasing the shift key.
- Do the same with the Elipse Tool. You can find the Elipse Tool by holding down the mouse on the Rectangle Tool and you’ll see a drop down menu.
- Hold down the Shift key, select an area of the art board, and drag to create a circle. NOTE: Remember to release the mouse BEFORE you release the Shift key to keep the shape a circle.
Save the document as: 2013.9.20_Last Name_First Name_Rectangle5
@@@NOTE: At the end of the Illustrator section you will be turning in a print portfolio with all your work. Create a NEW Illustrator document and place ALL your rectangles on ONE page.
Save the document as: 2013.9.20_Last Name_First Name_RectangleFINAL – Upload that file to Flickr and post on your website. @@@
IN-CLASS EXERCISE 4:
– The project theme is: SHAPES.
Download the .ai file here that will be used in exercise 1. For this simple exercise you will do the following:
- Recreate the shapes that are locked on the layer base. DO NOT unlock the layer.
- Change the width of the stroke of each of the shapes.
- Save the file as: 2013.9.20_Last Name_First Name_Exercise_Shapes – Upload that file to Flickr and post on your website.
- Choose Illustrator > Preferences > Units to see the Preferences box. Select inches from the General drop-down menu.
- Using the Ellipse tol, click on the artboard.
- Type 4 into the Width text field and press the Tab key. Type 4 into the Height key and press OK.
Save the document as: 2013.9.20_Last Name_First Name_Shapes – Upload that file to Flickr and post on your website.
Illustrator Drawing Basics
IN-CLASS EXERCISE 5:
Save the document as: 2013.9.20_Last Name_First Name_Glass – Upload that file to Flickr and post on your website.
MAJOR PROJECT 1
(Illustrator CS 6): CD/DVD
The assignment is to create a digital still life (a CD/DVD design including front, back and spine), in Illustrator, using your knowledge of the drawing tools. The designs will be set up and must be sketched BEFORE moving to Illustrator.
Design Brief for Illustrator
CD/DVD Case Design
Develop a design for a compact disc CD/DVD case. This design will include both the front and back cover insert for a conventional jewel CD/DVD case, along with the title panels. The design can focus on either an audio CD/DVD or CD/DVD game, CD/DVD movie title, or idea of your own and can be either real or fictitious.
Design Specifications: Size Conventional CD/DVD case dimensions. Download a print ready template here. Download the .ai file titled:
This gives you the layout for the front and back but not the spine.
CD/DVD Name: Use a real or fictitious audio CD name – or real or fictitious CD or DVD game title.
Logo: Design an original logo for the company of manufacture for either the audio CD or game CD/DVD.
Information: The project will include all of the information typically found on either an audio or game compact disc. Included will be the side title bars and the back cover insert. Dimensions can be found on a typical CD case or DVD cover.
Project specifications include research, size, name, manufacturer, font choices, initial logo design and initial box design and final designs.
Written Description: Detailed 500 word document detailing your design process, the tools you used and what you would change if you had to do it again.
* Each project must be submitted with following items: Research & Conceptual Sketches, Preliminary Comps, Final Designs and written description. You will be graded separately on each phase of your projects. You will also be submitting each final design as a digital file.
Final Package Printout:
Final project must be printed in color, at full size, and inserted into a cd/dvd case. The cd/dvd inside the case should ALL files you created (including hand sketches, multiple .ai iterations and written description doc. All files should also be uploaded to your website on a page titled PROJECT 1 | Illustrator. KEEP ALL ORIGINAL FILES. They will be turned in at the end of the semester on a DVD.
HOMEWORK | Week 3
A NOTE ON SKETCHING
- When designing anything, (including the CD/DVD project) sketch often!
Sketching helps you think about content, hierarchy and flow among other aspects. Sketches are cheap, easy to do and very fast. You should be able to create one new idea every thirty seconds. Sketching is also one of the best ways to communicate ideas about layout, user experience and user flow for a site.
DON’T use the computer until we review the sketches in class. Young designers tend to skimp on the sketches or omit them altogether. Too many designers transition too early from sketches to a higher fidelity design without first exploring all possible solutions.
Create a NEW page call Illustrator Project 1. The parent page should be Digital Media Production. On the Illustrator Project 1, heading: Sketches. Under that, create a list:
- Logo Iteration 1
- Logo Iteration 2
- Logo Iteration 3
- Cover Iteration 1
- Cover Iteration 2
- Cover Iteration 3
- Back Cover Iteration 1
- Back Cover Iteration 2
- Back Cover Iteration 3
- Spine Iteration 1
- Spine Iteration 2
- Spine Iteration 3
The sketches from the instructions below need to be uploaded to Flickr and the URL linked to each one of the above.
- Create CD/DVD with various iterations in your sketch book. Scan your drawings OR take a photo and upload to Flickr, then link the URL to the above.
- Create Logo for CD/DVD with various iterations in your sketch book. Scan your drawings OR take a photo and upload to Flickr, then link the URL to the above.
- Finish ALL in-class exercises, create a new blog posting title: Week 3 | Homework.
- Take the website background that you created in class, the one with the circle, and refine it. Do some research on color palates, website backgrounds and framing website and update your design. Scan your drawings OR take a photo and upload to Flickr, then link the URL when you go to WordPress – add media – insert url.
- Open the attached .ai file here. You’ll see a completed fish illustration on the top and the individual components of that fish at the bottom.
- Choose the Selection tool – Click on the large red fin.
- Click and drag to reposition the fin anywhere on the page.
- Choose the Direct Selection tool from the Tools panel.
- Reposition the cursor over on of the tips of the fin and click when you see the arrow with the small white square.
- Click on the solid anchor point and change the shape of the fine. (this shows you how to alter the shape). Hit Command Z to undo that.
- Grouping the Scales:
- Click the Selection tool – Click on one of the orange scales – hold down the Shift key and click on a second scale. Now two scales are selected.
- Choose Object > Group or Command+G and the two scales are grouped together.
- Shift+click a third scale to add to the selection. Select all the scales.
- Press Command+G to group all six scales.
- Choose Select> Deselect or Shit+Command+A to deselect the scales.
- Using the Selection tool, click on one of the first scales you selected.
- With all the scales selected, click and drag the scales on toop of the fish’s orange body.
- Click on the Selection tool to reposition the rest of the separate components together to complete the fish.
- Choose File > Save As and save it with the following file name: 2013.9.13_Last Name_First Name_Exercise_Fish
- Using Shape and Transform Tools to Create Artwork
- Download the .ai file for this exercise here. Open the file and you’ll see artwork of two swimming fish. Keep this file open for reference.
- Open this .ai file now. You’ll see a document with four guides in the center of the peage.
- Choose Illustrator > Preferences > Units and change the measurement units in the General drop-down menu to Inches. Press OK.
- Choose File > Save As and save it with the following file name: 2013.9.20_Last Name_First Name_Exercise_Fish2
- Using the Transform Tools
- Click on the Star tool and select the Rounded rectangle tool.
- Click and drag to crate a rectangle with rounded corners of any size.
- Activate the selection tool and click and drag until the rounded rectangle fits the dimensions of the guides located in the center of the document.
- Adding a Fill Color
- Now fill the rounded rectangle with a color.
- Select the rounded rectangle with the Selection tool
- Locate the Control panel at the top of your workspace and click on the Fill box. Color swatch appear.
- Select the color CMYK Blue
- Modifying a Shape
- Select the Polygon tool and click on the artboard.
- Type 3 into the Sides text field and press ok.
- Choose the Selection tool and click and drag the top center anchor of the bounding box upward to stretch the triangle.
- Click and drag each corner of the shape to resize the shape.
- Entering a Shape Size in the Transform Panel
- Choose Windows > Transform
- Select the triangle and type .5 in the W and 2 into the H and Return
- Press D – the triangle’s color reverts to the default white fill and black stroke.
- Click one on the Stroke box and select None.
- The triangle is not visible now. You can only see its anchor points.
- Viewing in Outline View
- Use the Selection tool and click on the artboard to deselect the triangle.
- Choose View > Outline.
- Use the Selection tool and click on one of the triangle’s sides and reposition it so its tip touches the center of the rectangle.
- Choose View > Preview.
- Rotating the Shape
- Select the triangle. and select the Rotate tool.
- Option+click the tip of the triangle. Type in 18 into the Angle text field and press Copy. This rotates your triangle 18 degrees.
- Press Command+D to repeat the transformation.
- Continue to press Command+D until you reach the original triangle.
- Press Command+Y to return to Preview view.
- Changing the Color of the Triangles
- Now we’ll select the triangles and change their opacity.
- Switch to the Selectiion tool and select one of the white triangles.
- Choose Select > Same > Fill Color and all the white triangles become selected.
- Choose Object > Group
- Type 50 into the Opacity text field and return
Choose File and save as follows: 2013.9.20_Last Name_First Name_Triangle
- DELICIOUS: On your del.icio.us account tag three Web Sites that focus on Adobe Bridge, Illustrator or anything we learned in class today, and write a note in the Delicious comments section about why you think each one would be a good resource for this class. *Make sure you also add the tag: digitalmediaproductionramapo2013 AS WELL AS add additional tags.