Mr. Donohoe has been very busy renovating and redecorating the Electronics room. He would like some help labelling some of his cupboards and bins.

You should come up with a basic theme/idea that would suit all or most of the signs and then just change the size and text to customize. Keep it somewhat relevant, but make sure it’s easy to read/understand. Add images to illustrate.

He would like signs for the following. Note the numbers are measurements in Inches, width x height:

19.5 x 22: containers
14 X 22 stryo / foam (two doors to the compartment)
14 X 22 card / board (two doors)
19.5 X 24 Electronics 40
21.5 X 24 Electronics 30
14 X 24 Electronics 20
14 X 24 Electronics 10
12 X 28.5 wires
15 X 28.5 mitre saw
15 X 28.5 power supplies
15 X 28.5 oscilloscopes
21 x 18 backpacks go here (arrow down)
36 x 12 Wash Your Hands before Exiting!

4 X 4 signs for all the basic components
LEDs
Switches
Resistors
Potentiometers
Capacitors
Connectors
Antennas
Motors
Transistors
ICs

There are 4 major principles of design that we focus on in this class. Today, we’ll talk about the first one and apply it to our next design:

CONTRAST:

What is contrast?

More about contrast:

There are many different types of contrast that a design might incorporate:

• colours (not just black/white)
• size
• shape
• scale
• layout
• type
• alignment
• and more!

So let’s look at some logos and focus on how the designers used Contrast.

Here’s a good one:

Obviously, we have a dark colour (the dark blue) and white, which helps everything stand out. It’s easy to read, even if you make it very small. There’s also that red text that contrasts with the blue, in order to make that bit of information stand out and show that it’s different.

Look at the different typefaces/styles of text. The main HUMBOLDT text is a serif font. It looks really old and classy, but the CREAMERY line is sans-serif, it looks a little cleaner and more modern. Then we have the handwritten script style at the very bottom.

Look at the sizes of the text. We have three distinct sizes, but two of them are pretty similar, so only two really contrast, the big text and the smaller text. This shows us what’s more important and what’s less important.

We also have some interesting contrasting shapes. There are very straight, pointy edges sticking out the side, and a big, soft circular shape in the middle. The text is straight(ish) but it’s got a bit of a curve to it, and it’s surrounded by that soft circular shape.

The example below does not really work as well:

• Everything is bright.
• Everything is the same size.
• Everything has that rounded rectangle look.
• Nothing stands out. There are no levels of importance, so it just looks like one big block.

Now that you know a thing or two about different types of contrast (not just colour, but size, shape, style, typefaces, etc) and you know how to put together a logo (review if you missed it), it’s time for you to put together your own logo that uses Contrast effectively.

You will design a logo for Westwood Graphic Tech. (you could choose a different topic if you wish.) Your logo will contain at least TWO types of contrast. You’ll have to explain your use of contrast after you’re done.

A lot of logos are pretty simple, but a lot contain a bunch of different elements. As we’ve discussed previously, the more that’s included in the logo, the more contrast you’re likely to find.

I’d recommend using more than one line of text. Westwood could be one. Graphic Tech could be another. You could even add a little slogan/motto/phrase to describe Graphic Tech. It also helps to include multiple shapes or images. You could design elements yourself and/or include icons from The Noun Project or a similar source.

Logo examples: brandsoftheworld.com

Here’s an example:

The bright yellowish colour contrasts nicely with the dark maroon.
The dark outlines contrast with the bright coloured text
The silver/grey circle contrasts with the maroon circle
The two lines of text contrast in size AND typeface/style
The round background image contrasts with the straight, sharp lines of the GT icon

Use Illustrator to come up with your logo. Take the time to come up with a good idea/concept before you start! Ask for help/feedback/suggestions as you go.

Make sure you draw all elements or PLACE in vector files (like the .svg files you can download from The Noun Project.) DO NOT place .jpg or .png files unless you know how to Image Trace them properly!

Be creative and come up with something fun! Who knows, if you come up with something good, you may see it on stickers, mouse pads, mugs, or t-shirts around the school!

You will have to hand in a logo that is created using Illustrator. All elements must be self-created or embedded vectors. You will hand in a reflection explaining how you used TWO different types of contrast when creating your logo.

Before you start, do yourself a big favour and create a YEARBOOK folder in ONEDRIVE. Put ALL of your elements in there! Every time you download or create anything for this project, put it in that folder! (and, of course, make sure that OneDrive is running on your computer!)

Putting everything into a folder now will save you a lot of headaches, trust me!

Go to the HandOut folder and download the files into your yearbook folder: YearbookPagesTemplate

Start by opening the supplied Template file (yearbookPages.indd)

Save your file into your Yearbook folder.

When using InDesign, I prefer to use the Essential Classics workspace, so that’s what my screen will look like, but choose whichever workspace is best for you.

Your Pages panel right now should look like this:

I recommend going into your Layers panel. Right now you have two layers:

The Parent Items layer is locked. It contains your page numbers.

If you want to change the look of the page numbers or add text to the bottom of every page (like the year or school’s name or whatever), you would go into the Parent/Master pages by double clicking on A-Document Master in the Pages panel

Either now or later, after you’ve decided on a page design, I recommend unlocking the Parent Items layer and customizing the look of the page numbers

On the bottom left and bottom right, you will see a capital A. This will be replaced by the number of whatever page it appears on. You should at some point highlight that

and choose your own Font, Size, and Colour (or any other option you wish)

You could also add the school’s name, the year, or any other elements that you would like to appear on all of your pages

For example:

If you want to, you could add a background image or a logo or something that would appear on all of your pages. Note that it would be highly unusual to have the exact same background on a bunch of different pages, but sometimes they have a similar look. If you do want something to appear on every page, while you’re in the Parent/Master page, you could use the Frame tool (press F on your key   board) and draw a frame that goes to the edges of your pages (or put a smaller box at the bottom or whatever)

PUT THE FRAME ON A SEPARATE, BOTTOM LAYER

Add a new layer at the bottom of the Layers panel:

Move that new layer (layer 3) down to the bottom of the pile:

you can double click on the layer name to change it

For the next step, I’m going to stay on the bottom layer (background). Use the Frame tool (letter F) to create a frame that goes all the way to the edge of the page. This will be my actual page background for each page. Place any picture in there to act as a placeholder. I used a picture of the school, because if I ever forget to replace it, at least I’ve got something appropriate. You can get school photos HERE if you want to do that too.

The photo that I used doesn’t fill the frame:

So I’ll have to go into Frame Fitting and “Fill frame proportionally” (the first one.) I always like to turn on Auto-Fit as well:

That looks much better:

Now I have a frame ready to go that I can change on individual pages.

I notice now that my page numbers and that text aren’t showing up well, so I’ll take some time to edit that. I’ll add a fill colour into the Text frames:

If you fill in a frame, you’ll notice that the text is too close to the edge. I recommend adding some Inset Spacing, which is basically a bit of a margin in a text box. Select the text box with the Selection tool and press Ctrl + B

For my text, adding about .03 in of Inset Spacing fixed the problem and still allowed my text to fit. I also like to make sure my text aligns to the Center instead of the top:

Lastly, I recommend taking that top layer and locking it. Do not put any page elements on a layer above this unless you want to cover the page numbers. This layer should always be at the top.

You can decide whether to lock the background layer or not. I’ll lock mine and cover it up or edit it later as necessary

Now if you switch to any other page, you’ll see its number in those spots! If you put all of your designs on the layers below, those page numbers will always show on every page.

If you haven’t done so already, SAVE your work!

Sometimes, especially when designing for someone else, your work doesn’t come out perfect the first time and it requires some revision in order to come up with a satisfactory final design.

We’ll practice this by reworking/redesigning the logos that you submitted previously.

You’ve been given the opportunity to comment on each other’s work. Sometimes this feedback is helpful and sometimes it isn’t. Sometimes it’s productive and sometimes it’s not. You might not agree with the things that people say about your work. They might not even like it. Your job as a designer is to consider the feedback and figure out what you could do to make your work better.

Your job is to take your original logo and make significant changes that will make it better. You will get marked on how much it changes for the better, so if all you do is correct a spelling mistake or something quick & easy, you won’t get a good mark.

You may love your original design and think that it’s great the way it is. You might be right about that, but you should also consider what it might look like with some revision.

You will submit a new, revised version of your logo as well as a reflection explaining how the feedback helped, what you changed, and what effect the changes had.

examples:

Initial designs:

Revisions:

Your job is to come up with a new logo for a class/team/department here at Westwood. You will use Illustrator and incorporate vector graphics (no raster/pixel based images!) You will choose colours, fonts, and imagery that suit the purpose and the audience.

You could possibly incorporate the existing Westwood logo and colours, but you don’t have to! If you came up with something original, it would be more creative! If you do choose to use a Westwood logo, make sure it’s a vector file (.ai / .eps)

Some sample class/department/team ideas:

• Graphic Technology (duh)
• Photography
• Drama
• Dance
• Band
• Choir
• Visual Art
• Electronics
• Computer Science
• Math
• Sciences
• Humanities
• Athletics
• etc….

Your work is always more creative and original when you DRAW/CREATE imagery yourself, but you don’t necessarily have to come up with every element yourself. A site like The Noun Project could be very useful for this one…

Logo Review/Information

One of the most common jobs for a graphic designer is to come up with a company/organization’s logo. Once a business has a good logo, they can use it to help build their business, and a good logo can go a long way toward building brand recognition and helping to get the word out about a product or service.

But what is a logo and why is it so important?

There are different types of logos as well. Some are more detailed and descriptive, and some are extremely simple.

If you want to see samples of logos for inspiration, I recommend looking at Brands of the World.

If you want more logo design tips, I like this video as well:

Illustrator Review/Information

If you already know how to use Illustrator, or if you think you can pick it up very quickly, this tutorial is very quick, but might be a good reminder/start: Combine shapes to build a logo.

Here’s another excellent tutorial on how to create a logo

Once you have a design and wish to have it printed on our Roland printer and cut out as a sticker or heat transfer, you need to follow a very specific procedure in order for those cuts to happen.

First, you will need to download a file called Roland VersaWorks.ai which is in The Hand Out Folder. DOWNLOAD that file. You DO NOT NEED TO OPEN IT. It will most likely go into your Downloads folder.

First, in Illustrator, open your Swatches panel. You might see it on the right side of the screen next to your Properties panel:

If not, go to Window/Swatches

At the top of the Swatches panel, look for the little three stripe – hamburger menu. Click that. Then go down to Open Swatch Library

At the bottom of the new window that pops up, you’ll see Other Library…

You need to find the Ronald VersaWorks file that you downloaded. It’s probably in your Downloads folder:

Open that and a new panel will open up. Look for the pink square with the little black dot on the bottom

Drag that pink square into the main Swatches panel. It will appear at the bottom of the main folder:

You’ll need that specific colour swatch in order to create your outlines!

You need to find your Layers panel. There should be an icon on the right side of your screen by the icon for the Swatches panel

Or again go into the Windows menu

Any images & designs that you’ve got on your Artboard will probably be on Layer 1

At the bottom of the list of layers, there’s a plus sign that will Create a New Layer:

You can rename layers by double clicking on  the Layer name. I’ll rename mine:

If you don’t, yours will look like this:

On that layer, you need to draw shapes or lines that will cut around your images/designs.

I’ll start with a simple one. I’ll make a rectangular sticker with a Warriors logo on it. (by the way, you can always download Westwood logos from your class page on this site, or just go HERE

Here’s the logo that I’ve placed on my Artboard.

On TOP of that (on my “outlines” layer – or Layer 2), I’ll draw a rectangle that will serve as my cut line.

I’ll activate the Rectangle tool (press M on your keyboard)

On the Properties panel, make sure the shape has NO FILL (white square with a diagonal red line) and use that special pink colour (Cut Contour) as the stroke

The thickness of the stroke should be .25 pt

On that top layer, I’ll click and drag a box on top of my image:

You’ll now see a really thin/faint pink outline on top. It will not print, instead, it’ll be where the printer cuts

You don’t have to have a rectangular cut line though. You could make it any shape you want.

I also have a circular Jets logo that I want to cut

For that, I’ll use the Ellipse tool (press L on your keyboard)

Again, the shape should have NO FILL and that Cut Contour for the stroke colour. The size should be .25 pt

You should know that to draw a perfect circle instead of an oval, you hold shift. But it’s hard to know exactly where to start.

Here’s a neat trick. If you go near the centre of an object, Illustrator will help you find the centre. You’ll see a little pink “intersect” point:

If you hold the Alt key, you can draw a shape from the centre. If I hold Shift and Alt, I can draw a circle out from the centre. Because the printer doesn’t always cut totally precisely, I like to leave a little bit of white space around my object.

If you don’t perfectly line up your outline and the image, you could activate your Selection tool (V) and select both the image and the outline (draw a box over both), and then choose Horizontal Align Center and Vertical Align Center in order to perfectly line them up

If you want to outline an irregular shape (something that isn’t rectangular or elliptical, for example), you can either use the pen tool to create an outline yourself OR follow THIS TUTORIAL, which explains another method quite well.

In the end, make sure that all of your Cut Contour outlines are on the very top layer

There’s one more important step that you need to follow. Select all of your outlines.

Go into the Object menu and choose Flatten Transparency…

In the box that pops up, change the Preset to High Resolution:

The rest is fine so just hit OK

Now it’s time to check your file and prepare for printing. Go to the File menu and choose Save As…

Change the file type to PDF

Hit Save

Now, check on the left hand side of the Save box for the word Summary. If it has an exclamation mark after it, there’s a PROBLEM

Click on it and you will see a warning at the bottom

This often means that the layer with the images also has transparency that needs to be flattened.

I like to lock my top, outlines layer before doing this

Then select the images layer

And again, Object/Flatten Transparency

MAKE SURE your outlines are still at the very top! If so, go through the Save As… step again. If the Summary now looks like this:

You’re good to save your .pdf file and hand it in for printing & cutting!

I don’t necessarily print every file I see, so if you would like yours printed, please put your hand up and ask nicely. I will check and make sure that you are eligible and that your file is set up correctly.

DUE NOV. 1

Sometimes, you just need to get stuff done on a deadline. This is one of those occasions. If you don’t hand something in by the end of Friday’s class, you get a ZERO. Yes you have to do it. No you won’t get an extension.

The annual Remembrance Day service is coming up next week on Nov. 8. We are going to design the program for the event.

Here’s what we’ve used in previous years:

It’s OK. It does the trick but lacks that design flair that you will surely bring! The formatting is also a mess! It’s done on Word (ick) and whoever created it LOVED to press the Tab key and the space bar (double ick).

You will design a new one using InDesign. It’s 4 pages printed on one 8.5″ x 11″ sheet. Each page will be Letter – Half (5.5 x 8.5 inches). Use Facing Pages. I recommend a .25 inch margin. We won’t worry about the bleed here so remember that there will be a white border around the page.

You will probably want to rearrange your pages so you can view them as Spreads. In the Pages panel, turn off the checkmarks on Allow Document Pages to Shuffle and Allow Selected Spread to Shuffle:

Then move the pages together like this:

Use HIGH QUALITY, (preferably) copyright free content from somewhere like Unsplash or The Noun Project.

For now, just use the content from last year as a template. We’ll exchange more current info when I get it.

You can find helpful documents in the Hand Out folder!

You will need to PLACE the documents into FRAMES.

You will learn how to use the Tabs panel to line up text!

Another example:

Hopefully you know how to create designs and combine shapes by now. You need to know how to expand text. You may wish to import and trace simple pictures.

I suggest starting from an Illustrator file that is Page/Letter size (8.5 x 11 inches)

On this file, you will create an original design that can be cut out of vinyl and placed on a binder or a piece of plastic board, or it could possibly (with approval, permission, and certain conditions met) be put onto a shirt or shopping bag.

You need to be able to do all of the things we’ve covered in the previous lessons and assignments.

• Get to Know Illustrator
• Illustrator Shape Builder Skills
• Combining Shapes

Some tips:

For this, you want to design something that uses ONE colour. Obviously the material you press it onto will add a second colour. You can try two if you want, but it can be hard to properly line up different coloured pieces.

Positive space is the colour you’re designing with. Negative space is the holes that will show the material below. So if I’m designing something that I want to be red, and I’m pressing it onto something black, you’ll see the black through in spots to create your design.

You’ll have to CAREFULLY pick out ALL of the little bits of negative space! For example, if my design has the letter O in it, I’d have to go and pick the middle of the O out. Make sure that your negative space pieces aren’t too tiny! Also make sure that your positive space pieces aren’t too tiny, because those won’t be easy to work with either.

Take your time. If you rush through this and your design is too simple, you’ll lose marks. If it’s too complicated and can’t be cut out, you’ll lose marks.

This is a creative exercise, so you should be designing something yourself. You are not just making a sticker out of an existing logo or design, but those could be incorporated into your overall design.

Everything needs to be OUTLINED. Press Ctrl + Y on your keyboard. The machine has to cut on every line you see. If you see any objects (usually letters) that are filled in with black, those are NOT OUTLINED/EXPANDED yet.

You can incorporate artwork that you didn’t design yourself (consult The Noun Project or Brands of the World if you’d like), but you need to draw some things and/or add text yourself. You can’t just cut things that you downloaded or your creativity/originality mark will be terrible.

You CAN’T HAVE LINES THAT CROSS ONE ANOTHER. You need to know how to use Shape Builder or Pathfinder to eliminate excess lines. (Remember SUNNY?):

This would NOT work:

This WOULD work:

Student samples:

Design:

Outlines:

Design:

Outlines:

Design:

Outlines:

This one’s kind of nuts and would be super hard to prepare, but it sure looks cool!