Category Archives: GT20G_Archive

Design Challenge: Album Art

As explained, you will be designing album art for Leaf Rapids. The album will be called Night Shift.

You can find out more about the band here: leafrapids.org

See/hear the band: youtube.com/@leafrapidsmusic

Dimensions:
12 inches by 12 inches
(300 pixels/inch)

Title track:

Lyrics:
I wake the birds
I send them off into that day
Make sure the sun’s up
Making the rounds in any way
After the nightshift
I turn the stars off one by one

I leave the moon
She’s a wily satellite
Love in the darkness
Sneaking out into the light
Even the nightshift
Is bound to catch a glimpse of sun

Wednesday morning will always be
Tuesday night to me

My quiet industry
In the hours that memories keep
The fox and owl agree
The darkest hours are not for sleep
Here on the night shift
We tuck the days in one by one

Wednesday morning will always be
Tuesday night to me

Principles of Design 1: Contrast

There are four main principles of design that we’ll look at this year, Contrast, Repetition, Alignment, and Proximity. That’s right, we’re aiming for CRAP in our work!

Contrast is probably the easiest and most obvious one. I mention contrast all the time when looking at your designs, and there’s good reason for that – it’s essential.

The most obvious type of contrast is colour/lightness, white and black. You put those two things next to each other, or one on top of the other, and things are going to appear opposite. It doesn’t get any more opposite than that. White is basically all of the colours of light, and black is none.

But that’s too easy. You don’t get to take credit for that one in this assignment. It doesn’t count.

Instead, you’ll focus on:

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

Assignment: You’ll design a poster for an upcoming event. You can use a real event or make one up. You can make it for a sporting event, concert, meeting, bake sale, art showcase, whatever! You need to use AT LEAST THREE types of CONTRAST (again, white/black doesn’t count.) Pick 3 off of the list above to utilize, but you’ll need to EXPLAIN the types of contrast you used. If you think you can fit in more than three, even better.

You’ll put your poster together using InDesign, but you can incorporate Photoshop or Illustrator files. Make it 11 inches by 17 inches (either portrait or landscape orientation, up to you) with a .25 inch bleed. Resolution should be 300 dpi.

You need to incorporate images (high quality), some kind of shape(s), and text that is different levels of importance (such as a headline and details.)

Once you’re done, your reflection will consist of explaining the types of contrast that you used and how they drew attention toward or away from elements in your poster. Explain that clearly in a document and hand it in for your reflection mark.

More about contrast:

How to use InDesign:

Open the program (DUH!)

Click “New file”

Give your file a name (NO UNTITLED FILES WILL BE OPENED)

Change the Units to Inches

Make it 11 inches by 17 inches. You can make it Portrait or Landscape orientation (your choice!)

InDesign is often used for multi-page documents, but you only need one

Make sure you have a .25 inch bleed

Click Create

The first thing you should do is Save. Open the File menu and choose Save, or press Ctrl + S

Save it in OneDrive! (and make sure that you OPEN THE PROGRAM)

Like Illustrator, there are different Workspaces you can use. The program usually opens on Essentials, but I’m a big fan of Essentials Classic. Up at the top right of your screen, you can choose a different workspace (and I recommend that you do.)

Any other panels can be opened from the Window menu. I HIGHLY recommend opening the Properties panel:

Many of the tools on the left hand side will look familiar to the ones in Illustrator and Photoshop. Perhaps the most important one here (other than the Selection tool, of course) is the Frame tool. Every element you add MUST BE IN A FRAME. This tool looks like a rectangle with an X through it. You can also press F to activate the tool:

With that tool active, you need to draw out a frame:

You can use frames for images, text, or just use it as a shape by changing the Fill and Stroke.

If you want to put a picture or Photoshop or Illustrator file in a frame, you NEED TO go to the File menu and choose Place (or Ctrl + D)

IMPORTANT: images and files Placed in InDesign are not automatically embedded. By default, they are linked to wherever the file is on your computer. When you create something in Illustrator or Photoshop, or when you download a photo (preferably from Unsplash or The Noun Project), PUT THEM IN A FOLDER IN ONEDRIVE!

If you need more help getting started with InDesign, I recommend visiting THIS PAGE and checking out some of the InDesign Get Started course tutorials.

When you are done, MAKE SURE YOU PACKAGE your file to drop it off! If you don’t package, I won’t open it!

Examples:

Vacation Postcard (InDesign)

So far, we’ve worked with two image creation and editing programs, Photoshop and Illustrator. Now it’s time to turn to InDesign and see what it can do. InDesign is the industry choice for creating professional documents of all shapes and sizes and is amazing for multi-page documents.

If you need some background/review:

See what you can create with InDesign

Explore InDesign basics

First up, learn how to create an appealing postcard!

If you have never used InDesign before or want a good review, I encourage you to do the sample contained in the tutorials below. You DO NOT have to hand in the “Design Talks” postcard shown in the tutorial, but creating it might help you get started with the actual assignment that you will hand in:

You will need these files in order to follow along with the tutorial

Click the image below to go to the tutorial, or click this link

For your assignment, I want you to DESIGN YOUR OWN POSTCARD! Yours should use the same tools, size, and layout as the sample, but SHOULD NOT RESEMBLE IT AT ALL! Yours should look entirely different.

This should look like the kind of card that you would buy on vacation and send home to some poor sucker who didn’t get to come with you. You’ve surely seen these in a gift shop or at the Forks or something.

I’d suggest using one of high quality photos from Unsplash to create a postcard for a destination that you would like to visit. If you wanted to use a camera to shoot some photos and create a postcard for Winnipeg or the Westwood area or Westwood Collegiate, that would be amazing! If you are from another country or have visited another country and have photos that you would like to incorporate, that would also be great.

Your postcard must be put together using InDesign, although you could potentially incorporate some elements created in Illustrator or Photoshop.

Most postcards are 6 inches by 4 inches with a .25 inch bleed. I recommend setting up a .25 inch margin to keep important text and elements away from the edge of the page.

Setup:

You could rotate your card if you wish. You will design a front and a back. The front is usually just a beautiful photo or multiple photos from the place you are visiting. The back contains a space for you to write a letter and a space for you to write the address that you are going to send it to, as well as a stamp (or at least a place to put a stamp). We could print these out when you are done and you could even mail it to someone if you wish!

Remember that in this program, everything goes in a frame. You’ll PLACE your files into frames (File/Place or Ctrl + D).

When you are done, you’ll PACKAGE your file to drop it off!

Check for errors or missing links!

That will create a folder that includes your file as well as any linked files and fonts that you may have included. Check OneDrive for a folder when you are done.

Have fun and be creative. Where would you like to visit?

Samples of finished postcards created by past students:

 

Photography Contest Entry

This month, the school division is running the annual Photography Contest. You’ve had a chance to take some photos. You should have AT LEAST one that you’re proud of by now, so this should be easy:

Submit ONE photo that can be sent in for the contest

If you have more photos, especially ones of our students, you should ALSO submit those for the yearbook.

Feel free to adjust settings and make the photos look good in Lightroom.

As mentioned previously, there are two different versions of Lightroom. I suggested that you start out with Lightroom, NOT Lightroom Classic (it’s confusing… I know)

In Lightroom:

File/Export:

Choose settings that look like you see below. I want the Image type to be JPG, Dimensions should be Full Size, and Quality should be 100%.

If you happen to be using Lightroom Classic, you need to EXPORT:

You want to know/choose where your photo is going to go, and you can choose to rename your file now in Lightroom Classic, or change it later:

Please export your file as a JPEG file at 100% Quality. Do not Resize to Fit!

Hand in ONE photo for marks!

Hand in MORE photos for the yearbook if you have them!

Acronym Banner

When I started at Westwood, there were a few copies of this banner in the halls:

The thing is, it was obviously up there for a LONG time. Some of those people are long gone. Schmeichel had hair and wore a TIE! I have no idea who decided on the word DRIVE or the parts that made it up.

Time for a redo!

You’re going to create your own acronym banner. If you make one that might look good hanging in the halls here, we’ll print it on actual banner material and put it up where that old one was!

If you would prefer, you’re welcome to make a personal one instead. We could print some of those on paper and you could take it home. If you designed it vertically, you could hang it inside of your locker.

Think of a word that describes Westwood and come up with what each letter could stand for.

The old one said: DRIVE

  • Diversity
  • Respect
  • Integrity
  • Vision
  • Effort

What word would fit now? What qualities exemplify this school, its students, staff, and culture?

Again, if you just want to make one with your name or a different topic, that’s fine.

You’ll need lots of HIGH QUALITY images to fit inside of your letters! Take photos yourself if you can. If you want photos from the school, I could share some yearbook photos with you.

If you want to find photos online, I HIGHLY RECOMMEND using Unsplash: https://unsplash.com/ (remember to click on the arrow at the bottom right corner of a photo on Unsplash to download)

Use Photoshop to put it together.

The banner that was up in the hall is 28 inches wide and about 8.5 inches high (300 pixels per inch!) If you really want to try to design something that we could use in that spot, use those dimensions.

More likely, though, we’ll just print it on paper. The roll of paper is a little narrower than the plastic banner, so use 24 as the width or height if you’re making something designed for paper:

The instructions for putting this together are a lot like an assignment you did last year… Remember that the instructions for the size and what to include were a little different then. You’ll need to add more photos and more text this time!

Show Me Your Westwood (Photo Letters)

 

Here are some great school-based ones:

And some other ideas:

First Photos

Previously you had a bit of practice taking photos, but I didn’t give you many guidelines and didn’t ask to see the photos that you took. Today that changes. You will be asked to come up with 3 “good” photos and hand them in, explaining what you like about them.

If your camera is set to take photos in the RAW format, you will have more ability to edit and correct, but you will have to export or convert them before you can use those photos in another program.

If you set your camera to take photos as .jpg files, they are easier to work with, but harder to edit.

You can use the MENU button on your camera to change modes if you wish.

TWO THINGS to consider that will help you take GOOD photos:

  1. Photography is all about LIGHT. The name literally means LIGHT DRAWING. Pay attention to the type of light and where it’s coming from. Sunlight is the brightest, best light available. Your eye can adjust to lower light levels better than your camera can. Just because it looks bright enough in an area to your eye, that does not mean your camera can get enough light. Look for places that are very bright. Then look for where the light is coming from and make sure it is directed onto your…
  2. SUBJECT is important. What are you taking a photo of? Is it clear and obvious? If there are distracting and annoying elements that draw attention away from the actual subject, that is a problem that you want to consider. The easiest way to cut out annoying or distracting elements would be to zoom in or move closer/to a different viewpoint.

LIGHTROOM

Probably the easiest way to import your photos and edit them is in Lightroom. There are actually two programs, Lightroom and Lightroom Classic. It’s confusing. They each have advantages.

Lightroom might be the easiest to start with:

To see the important bar on the left side of the screen, press the letter p on your keyboard to access Photos or open this little icon at the top left:

To get your photos from your card into the programme, you need to Import them. You can do that with the Add Photos button at the top:

Then find the card:

or the File menu

Once you find your card, you should see all of the photos on there. They may not all be yours, so you may wish to deselect some of them. You can always delete some later if you wish.

Once you import your photos, you may wish to EDIT them. You can press the letter E on your keyboard or find this icon:

There’s a button that corrects photos automatically that usually does a great job:

Feel free to mess around with any of those settings though! The cool thing about a RAW file is that you aren’t actually changing it, so you can always go back to the original image. No matter what changes you make, they’re always reversible on a RAW file, even if you close the program!

Once you are happy with a photo, you need to Export it to another format to make it usable in more programs:

.jpg is the most common image type, so will work in the most places/programs

 

When you have THREE GOOD PHOTOS, I want you to hand them in WITH A REFLECTION!

Answer the following questions:

1) What is your subject/what are you taking a photo of?

2) What kind of light was present and which direction was it coming from?

3) What do you like about your photo? What stands out to you?

Put that together in a document or PowerPoint or some such thing and hand it into your OneDrive hand-in folder!

Irregularly Shaped Outlines

This next assignment will show you how to outline an image in order to have it cut out as a sticker or a design that could be heat pressed onto a shirt or bag.

You will create a file in Illustrator that is 27″ wide and 6″ tall. You don’t necessarily have to use up all of that space.

Make sure you Save your file on your computer, in your OneDrive folder (oh, and take a moment to open the program called OneDrive…)

Choosing the right images for this project is very important. You need to find high quality images with a character or logo that is irregularly shaped (not a rectangle or something circular.)

You’ll probably want to find your images via Google Images. (please don’t use Bing. Bing is dumb.)

Google Images is great because there’s a Tools button:

When you click that button, you get some options that will make life much easier here.

Under Size, choose Large. This will limit your search to reasonably high quality images.

I would also recommend looking under Color and choosing Transparent:

You want to find characters and logos that do not have a background. Ideally, you will also find one image that is connected.

If I want a Star Wars logo, this one will not work well for this project because the letters are not connected so there is space between them:

one like this would work much better:

When you find an image you like, click on it. On the right side of the screen, you will see a larger version of the image. If you’ve chosen a Transparent background, you will see a checkerboard pattern around the image:

Right click on that larger image and choose Save Image As…

Save the image(s) wherever you like (Downloads is fine for now.)

In Illustrator, you need to add your image to your Artboard (page), by going to the File menu and choosing Place:

You can save yourself some trouble and skip a step below by turning OFF the “Link” button when you choose your file. If you do this, you do not need to worry about the important step below where you need to Embed your file:

Once you choose your image from your Downloads folder, or wherever you put it, you want to add it to your Artboard.

If you were to just click on the Artboard (white page), your image would probably pop up very large (assuming that you downloaded a high quality image)

It would be better to drag out a box on your page when placing the image:

If you are going to resize an image, make sure you hold down the SHIFT key on your keyboard and pull from the corner:

If you select your image on the Artboard, you can check the Properties panel to see how big the sticker would be. a 1 inch sticker would be quite tiny. 6 inches is pretty big.

EXTREMELY IMPORTANT: When you Place an image, you need to make sure you Embed. You can find that option on the bottom of the Properties panel under Quick Actions:

If you turned off the “Link” button when Placing your file, or if it is already Embedded, you will instead see a button that says Unembed (you don’t really ever want to do that…)

If you do not Embed your file, your sticker will not turn out well. The image will look terrible, if it shows up at all.

You can make sure you have Embedded your images on the Layers panel. Embedded images will be called Image. Unembedded files will be called “Linked File.”

You could also check the Links panel. If you see any links of chain, you know you have something that is not Embedded.

Open your Layers panel.

Your image(s) will likely be on Layer 1. You need to add another layer on top. You can do this at the bottom right of the panel with the + button:

Or with the top right Hamburger menu:

Using the Selection tool, Select your image(s) either by dragging a box around them on the Artboard, or you can click the blue squares next to the Image(s) on the layers panel.

Make a Copy, either with the Edit menu, then Copy, or by pressing Ctrl + C

On your Layers panel, select the new Layer 2. You may have to click off of the selected images first to deselect those.

Go to the Edit menu and choose Paste in Place to put a copy in exactly the same spot as the original image(s)

You should now see the Images on the new, top layer

Now take the original layer (Layer 1) and Lock it

I also like to turn that layer off so I can’t see it

Select ONE image at a time. When you have ONE image selected, you can get Illustrator to trace it and turn it into Paths.

With the image selected, you can go to the bottom of the Properties panel and click Image Trace

There are different types of tracing depending on the quality of the finished image. For our needs, we don’t need anything fancy, so I’ll click Black and White Logo, which is one of the simpler drawings:

You can also find this option under Object/Image Trace/Make:

if you’ve chosen that option, you should now see a black and white version of the image:

Once the Image is Traced, you need to Expand, in order to Convert the Tracing objects to paths. You can find this option on the Properties panel:

or in the Object menu:

Now you’ll see the red anchors that indicate that we now have a series of lines/Paths

You will notice that the Image has now turned into a Group:

Go on the Layers panel and expand that Group:

You need to get rid of the bottom layer, which will likely just be a rectangular box around the image. Scroll down to the bottom layer in the Group and select it:

Press Delete on your keyboard and that outside layer will disappear. You’ll see the Path Anchors going around the image:

Next, select the entire Group layer

Use the Pathfinder to Unite all of the paths into one shape

Unfortunately, my logo has a few stray lines and shapes that I need to get rid of. All I want is one outline around the entire logo.

With all of it selected, I need to Ungroup. You can do this on the Properties panel or the Object menu:

Now I have a series of separate paths:

Click on a blank  spot to Deselect

I’ll switch to the Direct Selection tool so I can get rid of some of those stray paths:

With that tool, I’ll draw a box around some of those extra paths to select them:

…then I’ll press Delete on my keyboard to get rid of those extra shapes:

I’ve got some more of those on the inside of my logo, so I’ll continue doing the same thing to get rid of those extra points:

Because I have so many of them, another way to do this would be to select and lock the big outline that I want to keep:

With that layer locked, I could Select all of the other extra points/paths and Delete those:

In the end, ideally, we will be left with ONE outline path:

I now have a big black shape that is blocking my image below.

I need to outline that shape with a very specific colour.

DOWNLOAD the file called Roland VersaWorks.ai

You will need to access the Swatches panel to load this special colour:

Click the three stripe hamburger menu at the top right of the Swatches panel

At the bottom of the pop up menu, choose Open Swatch Library, then Other Library

Find that file that you downloaded, which is probably in your Downloads folder:

That will open a new panel called Roland VersaWorks. We need the pink colour:

Drag that pink block into your Swatches panel in the first blank space:

In the Properties panel, you will see that you currently have a black Fill and no Stroke

Change the Fill to No Fill (white square with a red line through it)

And the Stroke colour should be that Cut Contour colour:

Change the Weight (thickness) of the Stroke to .25 pt

Your outline properties should look like this:

Now we have a pink outline that is going around the image.

Unfortunately, the cutter doesn’t cut very precisely, so cutting that close to a line is not a good idea. We will have to move that outline a bit so that there is some white space around the image.

Go to the Object menu, choose Path, then Offset Path…:

 

I like to move my path about 1/10th of an inch. Changing the Miter limit to Round looked better for my image. I want the smoothest possible outline.

 

This will create a second path that is 1/10th of an inch away from the first one. You need to get rid of the first one.

Select just the inside path (the one right on the outside of the image:

Delete that path!

You should be left with just one outline and it should leave some white space around the actual image:

 

Make sure you know how big your stickers are going to be! Think about what you are going to do with your stickers when they are done. Do you want them to be very small ( 1 inch?) or bigger (4 inches?). Resize your stickers as necessary. The bigger the stickers are, the harder they are to place without getting air bubbles underneath. If they’re small, you don’t want really fine lines that are going to be a mess to cut out. Talk to me about the size of your stickers.

 

Put your stickers as close together as possible on the sheet without touching! We don’t want to waste a lot of material if we can help it, so moving them together really helps.

 

If you aren’t going to use the whole 27″ width of the roll of sticker material, you may have to wait until I have other stickers to print for other people.

 

If you aren’t going to use the whole page, use the Artboard tool to resize the Artboard. Select the tool or press Shift + O

Drag the edges of the page in toward your designs in order to eliminate wasted space:

 

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!

Illustrator Line Drawing & Inking

Your next assignment will be to use the drawing and shape tools in Illustrator to outline a drawing, then create shapes and fill them in to colour your artwork.

You may start from a line drawing that you create, or download simple line drawing art from the Internet and trace, then colour that. You should add some of your own elements in after that. So for example, you could download a photo or drawing of a person or character, then use the tools in Illustrator to draw that person or character, then ADD in a background and/or other elements.

When you are done, I should be able to see the original image on a layer that is turned off. You also need to see clean outlined shapes, like we saw in the example of SUNNY THE SNOWMAN.

Some students will have more experience and will need less review, but EVERYONE should take the time to make sure that you are doing this correctly.

If you need help with your DRAWING, I recommend this set of tutorials

I HIGHLY recommend learning about the Shape builder Tool. I like THIS TUTORIAL

Here’s a very fast, but very effective tutorial that will take you through how to outline a drawing and colour it in

 

examples: