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:

 

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.

Adobe’s InDesign can do everything that Microsoft Word can do and MUCH more, and it does it all so much better. It’s a souped-up super powered version of your usual word processor. It also incorporates the power of Photoshop and other programs to create one killer creator of documents.

See what you can create with InDesign

Explore InDesign basics

One of the many things that InDesign does much better than a program like Microsoft Word is handle multiple pages. Our yearbook is put together using InDesign and it makes it so much simpler to make the pages look good and organize pages and sections. Using InDesign, we’ll create a bunch of other useful documents.

Watch the tutorials below. Those teach you how to use the program. Much of this stuff you WILL NOT figure out on your own, so pay attention to those.

 

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!

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:

Recently our school division announced that they would be selling shirts to commemorate pride week, which happens this year May 24th to June 2nd. It looks like this:

My immediate thought was that our talented students could have come up with something a little better than that!

We would like to come up with something different which will be used and sold at our school. You could be the designer and get free stuff!

Your creativity and ideas are welcome. You could use a Westwood logo or the school division logo, which you can get from my website: Westwood logos. Remember that vector logos (.ai, .svg, .eps) will work best.

You might also want a pride flag. There is a good one in the HAND OUT FOLDER

You could look at an organization like Pride Winnipeg for information and ideas.

You can use whatever program you like to design this, but Illustrator is generally the best choice for a logo. Set up your page to be 8.5 inches by 11 inches, and if you’re using Photoshop, make sure the resolution is 300 pixels/inch.

 

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!

Using your newfound Photoshop skills, you will design your very own trading card in the style of a hockey/baseball/football/basketball card, or perhaps a Pokemon style card. Your job is to be creative and original while using something like that as inspiration. You will design both the front and the back of the card.

Here is my example:

You can almost certainly come up with something better than that! I have a few sample cards on my desk that you could look at, or just google a hockey card and see what one could look like.

You DO NOT have to use yourself as the subject of the card, although that would be a lot of fun! You are encouraged to make one about yourself, of course, but can make one about your favourite athlete/musician/Pokemon, etc.

A standard trading card is about 2.5 inches by 3.5 inches. You can decide whether to design it in Portrait orientation (tall) or Landscape (wide.) Make sure your resolution is 300 pixels/inch and you are using the CMYK color mode.

If you come up with something good, I’ll even print it out and give it to you! When we cut them out, it is difficult to cut precisely on the line, so we often end up with a strip of white paper on the outside. To prevent this, we add in something called a BLEED, which is an extra bit of the background that extends past the edge of the intended page. This area gets cut off, so you don’t want to put anything important in there.

We actually want our card to be 2.5 inches by 3.5 inches, but we’ll add in an extra .25 inch bleed on all sides:

By default, Photoshop files always start out with one page/canvas, but you can add another.

If you go into the Layer menu, then choose New, then Artboard…

You can have multiple pages/canvases/artboards, which show up in the Layers panel

You’ll notice two pages that you can work on side-by-side:

 

In order to properly keep that Bleed area separate, you need to set up some Guides. In order to do that, you need to be able to see your Rulers.

Go into the View menu and choose Rulers (or press Ctrl + R)

Click on the ruler at the top of the page and pull down. Do this OFF of your page (beside it)

Drag down until you’re just onto your page.

You should see a light blue line appear on your page. With the Move tool active (press v on your keyboard), click on the line/Guide to select it. Then Right-click and choose Edit Selected Guides:

The top guide should be .25 inch into the page.

Repeat this process, placing guides at the top and bottom of the page. The next one should be at 3.75 inches

If you’ve done it correctly, those guides will extend out onto both artboards and all you’ll need to do is add the vertical guides on both sides

Drag from the left ruler onto the page and set a guide at .25 in

And another at 2.75 in

The other artboard requires a bit of math because the spacing is a bit odd, but lucky for you, I’ve done it for you! Put one at 3.583 in

and a final one at 6.083 in

In the end, you should see something like this, with guides marking off that bleed area on the front and back of the card

 

Those guides are just for your information. They will not appear on the printed card!

When you create your background, make sure it extends out to the edge of the page. Remember that the section between the guide and the edge of the page is designed to be cut off, so never put anything important in there!

Remember that the guides will be the edge of the page when cut, so never put anything important too close to those guides! Keep a bit of a margin area blank all the way around.

Here’s what that might look like:

Anything important should be in that area that I have grey (Safe area.)

 

 

 

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!

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: