Week 2
Week 1: The Freehand MX Interface
Week 2- Using the Pen Tool.Click here to download the file. Sit or Zip
In class exercise: The wrench.
Assignment- Create a simple personal geometric logo using circles, squares and lines. (10%)
Week 3- Functional design : Symbols and Instances:
Assignment: Using paper, create a linear drawing of your personal home page.(10%)
Week 4- Functional Design: Importing bitmaps into FreeHand MX
Assignment: Create a comp of your personal Home Page in FreeHand MX (10%)
Assignment: Locate a logo that is particularly effective and be prepared to present it to the class.
Explain why it is so effective.
What message does it convey?
Are there any potential design issues involving its use in web media and what would
you do to resolve those issues. (5%)
Week 6- Dimensions of design: Logo creation in FreeHand
Assignment: Create a personal set of letters in FreeHand spelling out your last name. The largest inside square can be no more than ¼ of the full size letter and the maximum number of inside squares is 3.(10%)
Assignment: Create a personal typographic logo. (10%)
Week 9- Forms and Structure: Grid-based interface design.
Assignment: Using a 3 X 4 grid, design a balanced personal home page. (10%)
Week 10- Icons and Symbols: Developing iconic interfaces for use in web pages and mobile devices.
Assignment: Create an interface for a Palm Pilot email application. (10%)
Week 11/12- Colour
Assignment: Analyse a web site using the principals covered over the past 12 weeks and prepare to present them to your classmates. (25%)
Week 13,14,15- Critiques
Weeks 13 and 14 will be presentations of sites from weeks 11 and 12. Week 15 will be presentations of project work done in class.
The key to tracing anything in FreeHand or Illustrator is to not recreate the object. If you do you will just make things more complicated. Instead, focus on the geometry. Look at what has to be drawn in terms of the software: lines, curves, squares and circles. In this way your job becomes much easier.
This exercise focuses on tracing a simple wrench. As you move through it, pay attention to how control points are placed and manipulated.
1. Open a new FreeHand document and select File,Import. (Command-R Mac or Control-RPC). The Import Document dialog box will open.
2. Navigate to the folder containing the Wrench.jpg image. Select the image and click Open. The dialog box will close and your cursor will be replaced with an L-shpaed cursor indicating an image is ready to be placed on the page. Click the mouse and the wrench will appear on the page.
3. Open the Layers Panel by pressing F2. (You can also get to it by selecting Window,Panels,Layers). Select the Wrench and click once on the background Layer. This will move the image to the background layer and make it easier for you to trace an object. Click the Lock icon on the background layer. When finished your page should resemble:
When the image is greyed out and the background layer is locked, you can now draw over the image.
Note:The background layer in FreeHand is a non-printing layer. This makes it ideal for tracing. One technique is to scan an interface drawing and , by placing it in the background layer, you can draw the various bits and pieces for the interface in a number of Layers. Another use is to construct an interface in Fireworks MX and to add text or other vectors to the image.
As pointed out at the start, follow the geometry. In the case of the wrench we have to only draw a couple of curves and straight lines. This means you need to plan the work. The plan is simple: place a control point everywhere a line or curve changes direction. It is a lot like those Join The Dots puzzles you did when you were a kid. In this case there are no numbers. Here is the wrench with the dots. Each dot indicates a change in direction.
Note how the points follow the geometry.
4. Select the Pen Tool and click once where each of the dots are located. The last point you will create will actually have a different icon- it looks like a hollow circle- appear under the pen's nib. That circle indicates you are closing the path. When finished, your wrench should resemble this one:
The wrench is roughed out.
This is where it gets really neat. You don't have to concern yourself with shape of the lines because you are using a vector application. To change a straight line into a curved line all you have to do is the change the math. Vectors are mathematical calculations of lines between points. Due to the fact you are using a Graphical User Interface (GUI), you do nothing more than simply yank the line into place. Here's how:
1. Select the magnifying Glass tool Press the Z key- and marquee the upper left section of the wrench. You now have a zoomed in view of the lines and the location of the points on the curve. Select the Subselect Tool the hollow arrow- and drag the point on the curve to the location indicated.
The control point goes here because it is where the curve changes its direction and curves down to the next point.
2. Click on the line between the top and the point you just moved and drag it to match the curve of the wrench.
3. Do the same thing with the line between the middle and the bottom.
4. Click once on the centre point of the curve and move the handles either straight up or straight down. A great way of doing this is to hold down the Shift key when you are moving the handle. This constrains the movement. When finished your lines should resemble:
The handles determine the curve of a curve.
5. Repeat steps 1 to 4 for the remaining wrench pieces. When finished your wrench should look like this:
Your final wrench drawing should resemble this one.
The balance of the exercise , is designed to teach you to both work smart and to think like a computer.
The wrench has a drop shadow behind it. There are two ways of adding it. The first is to trace it. It works but you will be wasting a ton of time. The second is to let the software do the work
When working with vectors you are also working with objects in space. That means they can be in front of eachother or behind eachother. This can be accomplished using layers but it can also be done on one layer. Here's how:
1. Select the Pointer tool the Solid arrow- and with the Alt (PC) or Option(Mac) key held down, drag a copy of the wrench to the left of the original.
2. With the copy still selected, click and hold on the fill colour chip on the Tool bar. When the color palette opens select black as the fill colour.
3. Fill the other wrench with white. When finished you should have a black wrench and a white wrench, as shown:
The wrenches are filled with white and black.
4. Drag the black wrench over the white wrench.
The black wrench is located in front of the white wrench. This tells you it should be located behind the white wrench.
5. With the Black wrench selected, select Modify, Arrange,Send to Back. To tweak the shadow and move it into a more precise position, select the Black wrench and press the Right or Left arrow keys. This will nudge the object one pixel to the right or the left.
6. Turn off the visibility of the Background layer by clicking the Check mark beside the layer name on the layer palette. Save the image.
The finished drawing. Note the visibility of the background layer has been turned off to hide the tracing object.