Visit drwcs.blogspot.com

How to Design Your Own Reusable Wall Calendar 

Introduction 

Our tutorial is arranged in fifteen sections.   At the end we include five additional sections for situations not covered by the tutorial's example.   Our goal was to create a "guide for dummies" style of instruction that shows exactly what to do in each step.  However toward the end we used less illustrations since many of the steps are being repeated at that point. If you’re unsure about any step you can always refer to our “Paint.Net Basics” section at the very end of this tutorial, which explains basic features of the application we used for this tutorial.   The tutorial may look a little long, but that it is mainly due to the large number of illustrations. The fact is, after you've gained some proficiency, the actual work of creating a calendar for a month of the year takes only around five minutes.  

Let’s begin with 1) Find Images.

1) Find Images for Your Calendar  Those of you who are graphic artists or photographers can make your own images. (God bless you.) The rest of us will have to find suitable images either on the internet or scan them from books or other sources.  While this can be a bit time consuming, it can also be fascinating to see what you turn up as you search for material.  The hunt for images is part of the fun.  After you've stumbled onto some interesting finds, and work your creative magic with them, you might find yourself getting a bit hooked on it.   There are lots images available for craft applications, i.e. home use, which you may freely use.  There are books that assemble such images which you can scan.  Copyright Free Illustration Books at Amazon.com Dover Books  Dover Publications And there are also many websites that assemble images for home use. Again, we're talking about for home use in a craft application, not for sale.  See our section Find Public Domain Images.   This tutorial’s sample uses an image from Duke University’s Digital Libraries Collection Emergence of Advertising in America.    If you wish to see the entire whimsical calendar we created from old magazine ads click here.   Now let's take a look at the next section, 2) Download Image Editor.

2) Download an Image Editor   If you already have another image editor that you prefer to use because you’re familiar and handy with it (eg, Photoshop), you should still easily be able to make sense of the basic outline presented here.  There are several excellent and free  image editor programs available for download that are similar to Photoshop. In our opinion the two best freeware applications are Paint.Net and GIMP.  

Paint.Net Our tutorial uses Paint.Net.    Paint.Net is very  intuitive and user-friendly. Paint.Net provides every basic feature needed for a project of this kind. Most anyone can jump in and start using it right away.   (Note: Paint.Net requires that you have installed Microsoft's .NET Framework.  You can download Microsoft's .NET Framework 3.5 here.) GIMP GIMP offers a larger array of features than Paint.Net. The downside of GIMP is that it is designed for a fairly advanced user.  To our eye, it looks like it has a relatively steep learning curve.  As such it can be overwhelming to many (perhaps most) casual users.    Picassa Google also makes an image editor called Picassa.  To be honest, we're not very familiar with it.  It looks like it would be more than adequate for a project of this kind.  But in our view, while Picassa is very sleek and seems to contain lots features, it was not immediately apparent at all how to simply dive in and begin using it.  Our sense is that, like GIMP, this application takes considerable time to master.  

***** Of course you could always download all three, i.e., Paint.Net, Gimp, and Picassa. Then you might rely mainly on Paint.Net and keep GIMP and Picassa handy for whatever additional features they provide as needed.  The tutorial assumes the user is using images for the calendar obtained from the internet versus a scanned image or digital photo. Okay, now let's actually get started making a calendar by going to the page 3) Background Image.

3) Getting Started With the Background Image As mentioned, we’re using an image we found on the internet for the background for our calendar month, which will be January 2010.   The image is from Duke University’s wonderful collection of American Advertising. Here it is: 

 FYI, here's a link to the ad on Duke's site that's full sized so you can read its advertising pitch, an aspect that makes this content particularly fun.   When we viewed the picture on the internet we continued clicking on the image to maximize it to the largest size, which is a whopping 19.47 x 25.04 inches.  Although that’s larger than we need, it’s just about the perfect dimension for our purposes. We’ll reduce the size later. We're now going to walk you through an example of how to create a month of the year calendar using this image.   Let’s begin by copying the picture into Paint.Net.

 First from the link above, right-click the image and select Copy. 

 Now let’s open Paint.Net. Below is a view of the Paint.Net interface.  (See our "Paint.Net Basics" section at the very end of this tutorial for an overviews of Paint.Net’s features.)  

 When Paint.Net opens it gives us a blank canvas to work with. That default canvas isn’t the right shape for what we want to do. But don't worry, it will be automatically resized in the next few steps.  Now from the Edit menu select Paste.  

 Paint.Net next gives you the option to resize the canvas to the image currently saved on your clipboard. Click on Expand the Canvas. 

 The canvas will now be reshaped to fit the image.  Note that your work within this canvas appears as a thumbnail in a window at the upper right-hand corner.  The thumbnails at the upper right show the various canvases you have created for the Paint.Net file you're working in.   (Note: At the risk of getting a little ahead of ourselves here, we'll note that this canvas won't actually be the one that we'll build the calendar upon.  We'll make another new canvas for that in the next step.  You may be wondering then, why did we create a separate canvas for the image?  Because for some images there will be an advantage to having a separate canvas upon which to edit the image.)  

 Note also that the image is pasted into the canvas in ‘selected’ mode by default. I.e., it is surrounded by a moving dotted line.  Selection of content is a feature that we’ll be regularly using.  So the next section will briefly discuss how to select content. We’ll also cover a few other basic features of the interface that will be helpful for this project.  Let's go to 4) Paint.Net Tips. 

4) Some Important Paint.Net Features  At this point it’s a good idea to show you a few basic Paint.Net features that you’ll be regularly using.   In the previous section we noted that the image we pasted into a blank canvas is by default in “selected” mode.  Content that is selected is surrounded by a moving dotted line (and depending on your settings it may also be highlighted with a light blue tint).  This is important to understand, because any content you’re working with must be selected first in order to edit it.  Content can be selected in several ways. We’ll only discuss two of them for now, Rectangle Select and Select All.  (See Paint.Net Basics for the other ways to select content.)

 Rectangle Select

 On the Tools Window you will find an icon in the far upper left-hand corner for the Rectangle Select feature. This feature is used to draw a rectangular window around any portion of content you wish to select. (The feature's icon is a square made with a dotted line.) With this mode of selection you can draw a rectangle around all of your work, or just a portion of it.  

 Move Selected Pixels

 Located immediately to the right of Rectangle Select is an icon for the Move Selected Pixels feature. Move Selected Pixels allows you to drag any selected content to another location on the canvas. (The feature's icon is a darkened arrowhead next to a plus sign.) 

 Note that when you pasted the image into a canvas in the previous step, by default Paint.Net activated the Move Selected Pixels mode.  Tip: if you don’t want to risk moving the image around, you can always switch off the Move Selected Pixels mode by clicking on the Rectangle Select icon.  

Select All and Deselect  At this time we’d also like to show how to select and deselect all content on a layer. That’s typically what you’ll be doing when you want to select something in a project of this sort.  To deselect, from Edit click on Deselect. To reselect content click on Select All (located immediately above Deselect).  

  

Undo and Redo  And finally, this is also a good time to provide you with another extremely helpful tip: You may use the Undo feature to return to any prior step in the course of your work.  To do so, from the Edit menu select Undo. If you click on Undo repeatedly the screen will return to each previous modification you have made. Similarly, selecting Redo will restore steps you have undone.  Very important: Undo is your friend! 

 Okay, let’s return to our calendar work in the next section, 5) Border Layer. 

5) Create the Background "Border" Layer  We have our image pasted onto a canvas in Paint.Net. Now we're going to create a background to place it on that will create a border for the image.  This background will also serve as the foundation layer for our calendar. That is, we’ll be building successive layers of content on top of it.  From the File dropdown menu select New.  

 This will create a new canvas to work within. But first a box appears that allows us to resize the canvas.  

 By default our new background canvas will be the dimensions of the image that is currently saved to our clipboard, which is 19.47 by 25.05 inches.  We want to change that size to 11.00 by 14.00 inches. Just type those values into the boxes for width (11) and height (14).  Note: Make sure that the “Maintain aspect ratio” box is unchecked. (If the box is check-marked click on it to uncheck it.) 

 And then our new background canvas will appear.  Note that a thumbnail for this canvas appears now in the upper right-hand corner.  

 This 11x14” canvas will serve as the background for our calendar. It will be our bottom layer.   As we add additional layers in the steps that follow, make sure that you have the thumbnail for this canvas selected, i.e., the blank white canvas thumbnail all the way to the right.  It will make our work easier if we give a specific name to this layer. To do that we’ll have to edit the layer’s Properties.  The thumbnail for our new 11x14 canvas should already be selected. But if for some reason it is not, click on it to select it (see directly above for location of the thumbnail).  On the Layers Window at the very bottom right is a row of tiny icons. Click on the Properties box, which is furthest to the right.  

 Here’s a close-up:  

 We now get a box in which to rename the layer.  

 By default, the first layer of a canvas is named “Background.” While this is an appropriate name for our purposes, we would like to differentiate it a little more. So we’ll type into the name box “image background”. Click OK.  

 Note that the layer has been renamed accordingly in the thumbnail on the lower right-hand corner.  

 We now have the first layer of this calendar, ready to build upon.  In the next step we'll superimpose the image on top of it.  Now let's go to 6) Image Layer.  

6) Create the "Image" Layer  Now we want to create a layer for our image, which will be placed atop our “image background” layer.  But first we’ll have to resize the image because it’s currently too large.  Click on the upper right-hand thumbnail for our picture. 

 The image should still be selected. If it is not, from the Edit menu Select All.  

 Now from the Image menu we’ll Resize the image.  

 The Resize box appears.  Note that the "Maintain aspect ratio" box is check marked by default.  Here that is the setting we want, so that the picture doesn’t become distorted when we resize it. 

 The picture is 19.47 x 25.04 inches. We’re going to reduce that size so that the picture fits into the 11x14 inch background canvas with about a 1/8” border surrounding it.  Since there are two sides to both the length and width, we’ll need to reduce the image by approximately 1/4” (0.25") all the way around.  This requires a bit of testing. When we enter 10.75” in the box for Width, the Height is automatically reduced a little more than we’d like to 13.83”. So after a experimenting with a couple more measurements we decided the best result was achieved by entering 10.70” in the Width box, which gave us 13.76 for the Height. That slight a difference between the length and width borders won’t be noticeable.   

 Now let’s see what the image looks like in our 11x14” background canvas.  From the Edit menu Select All in order to be able to Copy it.  

 Next from the Edit menu select Copy.  

 

 Now click on the thumbnail in the upper right-hand corner for the canvas we created for the image background.  Note: This is an important step because we want to add successive layers to the 11x14 background canvas, i.e. the one we just named "image background".  As mentioned earlier, the "background image" canvas is going to serve as our foundation layer.  In contrast, the canvas for the image was automatically generated by pasting our image into Paint.Net in order to begin the project. However we won't be adding any further layers atop that canvas. Hopefully, the distinction should become clear as we proceed. 

 Now from the Edit menu select Paste in to New Layer.  

 The pasted image now appears on our background canvas.  But it won’t automatically be centered on the background canvas. We’ll have to adjust that manually.  Also, note that we now have a new layer for the image that we just pasted, which is by default named “Layer 2.”  

 

 Before centering the image on the canvas let’s go ahead and change the name of "Layer 2" to “image.”  As before, we need to edit the layer’s Properties.  Here we’ll take the opportunity to show you another way to open the layer’s Properties box. The layer is already selected (if it isn't click on the thumbnail for the layer). Now from the Layers menu select Layer Properties.  Here’s a full screen view of what everything should look like at this point (just before actually clicking on Layer 2’s Layer Properties): 

 

 Now Layer 2’s “Layer Properties” box appears.  

 We’ll rename the layer by typing “image” into the Name box.  

 

 Note that the thumbnail for this layer in the lower right-hand corner has been renamed accordingly.  

 Our "image" layer has now been created and named.  In the next section we'll reposition it in the center of our border layer.  Now let's head to 7) Reposition Image. 

7) Reposition the Image Over the Border Layer

 

Now let’s reposition our 10.7 x 13.76” picture on it’s 11 x 14” blank white background canvas.  (Note: It’s probably best to keep the current viewing size to do this. If you wanted to zoom in to look at it more closely see our Paint.Net Basics section.)  After pasting your image it should, by default, be in Move Selected Pixels mode. If it is not, from the Tools Window select Move Selected Pixels.  

 Then click on the image and drag it to reposition it in the center of the background canvas.  

 Once you’re satisfied with your positioning of the image you might as well deselect the image. Then you won’t risk inadvertently altering it.  From the Edit menu select Deselect.  

 Our image is now centered over the border background layer. Now we can begin adding the layers for the month, days of the week, and dates.  Let's head to the next section, 8) Month Layer.  

8) Create the "Month" Layer  We’ll start by adding the layer for the month, which for this calendar is January, 2010.  From the Layers menu select Add New Layer.   

 Note that the new layer appears as a thumbnail in the lower right-hand corner, named by default “Layer 3”.  

 The addition of this new layer has nudged the bottom of the thumbnail for our “background layer” just slightly outside of the viewing window for the Layers Window. We’re going to end up with a total of 6 layers. So let’s go ahead now and expand the size of the Layers Window. As such we’ll be able to see all our layers at once without having to scroll.  Place the tip of your mouse cursor on the very top of the Layers Window. (The cursor will then turn into a two-way arrow.) 

 

With the cursor so positioned, click and drag upward to expand the size of the Layers Window. Make it a little more than twice as tall.  

 Now let’s rename Layer 3.  Layer 3 should already be selected (highlighted in dark blue). If it is not, click on the thumbnail for Layer 3 to select it.  From the Layers menu select Layer Properties.  

 Rename the layer “month”.  

 As we have seen before, the thumbnail in the Layers Window at the lower right-hand corner will be renamed accordingly. Here’s a close-up:  

 

We’re now going to add the word “January” within this new layer.  Make sure that the “month” layer is selected (i.e., highlighted in dark blue). (If it isn't selected, to select click on the layer's thumbnail at the lower right-hand corner.)  Then from the Tools Window select the Text feature. (The feature's icon is a capital letter A.)  

 This opens the text tool bar.  

 We’re going to use the font "Rockwell Extra Bold" for the entire calendar.   Click on the arrow for the Font type dropdown menu and scroll down until you find Rockwell Extra Bold.  Then click on it. 

 The font size for the month will be 48 point. So we can go ahead and select that now. Click on the arrow for the font size dropdown menu. Then use the scroll arrows or slider bar on the right side of the dropdown menu to scroll down till you find it. Click on 48.  

 Finally, we’re going to use a custom color for all of our text in this calendar that matches the red text in our image.  On the Colors Window at the lower left-hand corner, click on the “More>>” button. 

 This expands the palette to allow us to enter a custom color. We’re going to find a color we like from a web link, and then enter that color’s “hex” number. There’s a box in which to do that named “Hex” within which are six zeros. Here’s the close-up:  

 For all the lettering in our calendar we decided to match the red color in the ad’s text.  

 So we want to find a slightly dirty or dingy red.  Now we’re going to visit a link that shows the hex numbers for various colors. Wikipedia’s entry on Web Colors has a sufficient variety.  It also educates the user about hex colors.  From the red colors shown “FireBrick” seemed a pretty close match. Close enough that the average eye won’t pick up the miniscule difference, anyway.  

 The hex code for this color is B22222. So now let’s return to Paint.Net and enter that code into the Color Window's Hex box. Note that the Primary color swatch changes color accordingly. 

 Now we’re ready to start typing. We’re going to position the month, days of the week, and dates over the front end of the car in the picture. So at a location a little more than halfway down in the image, type in the word “January”. We don’t have to worry about positioning it perfectly. It’s just an approximate location for now.  

(close-up of image area)  We’ll come back to this layer when we’re ready to reposition it.  

Now let's continue in the next section by adding a layer for the days of the week.  We're off to 9) Days of the Week Layer. 

9) Create the "Days of the Week" Layer  Now we're going to create a new layer for the days of the week.   From the Layers menu select Add New Layer.  

 The new layer will appear, by default with the name “Layer 4”.  We should be familiar with adding layers and naming them by now.  We'll rename this 4th layer “days of the week”.  Hopefully by this point you don't need illustrations for creating and naming new layers.  You've done it twice by now.  From here on out, to refresh your memory on how to add/rename a layer see our Paint.Net Basics section.  We'll just provide written instructions for adding/naming new layers:  As before, from the Layers menu select Layer Properties. When the box appears type in “days of the week". The thumbnail for the layer at the lower right will be renamed accordingly.

 Here’s what it will look like when you’ve completed those steps:  

 Now, for the days of the week we’re going to use the 28 point font size. So from the Text toolbar use the dropdown menu for font size to select 28.  

 Next, below “January” type in the days of the week. For this example we’re typing in just the first three letters of each day, with the first letter a capital. We used five spaces (i.e. hit space bar 5 times) to separate each day. Once again, you don't need to fuss too much about precise placement.  We’ll reposition everything later. Just place the row with the days of the week approximately where you think it should go.  Here’s what we should have so far: 

(image area close-up)  Our "days of the week" layer is created.   In the next section we'll add a simple touch that will make the calendar look a little nicer:  We'll create a layer to place some dots between the days of the week.  Off we go to 10) Dots Layer. 

10) Create a Layer for "Dots" Between the Days of the Week Now let’s create a new layer for a row of dots that will be placed between the days of the week.  We already know how to create and name layers. So let’s do it again for this 5th layer of our calendar:  Once again, from the Layers menu (top menu bar) select Add New Layer. A thumbnail for “Layer 5” then appears on the Layers Window down at the lower right-hand corner. From the Layers menu at the top select Layer Properties. When the box appears rename the layer “dots” in the Name box.   Here’s what you should have after you’ve completed those steps: 

 We’re going to stick with the 28 point font size from now on. We should already have that selected. We'll use a period (.) to make the dots.  Just type in the periods between the days of the week. Work your way across, creating a row from left to right, using the space bar to create the required space between the dots.   Here you may want to take some care to begin as precisely as you can at the center of the space between Sunday and Monday.   If you're not satisfied with the placement, first click some distance away. Then return to the area you're working on, position the cursor where you want the dot to go, and click.  Even spacing for the dots won’t be one hundred percent perfect. But the slight imperfections will be evened out and become unnoticeable after you have repositioned this layer. Just space them as evenly (i.e., as close to the middle between each day) as you can.  Here’s what you should have by now:  

 

(image area close-up)  Our "dots" layer is created.  We'll reposition it later.  In the next step we'll create the dates.  Let's head to 11) Dates Layer.  

11) Dates Layer  Now let’s add our final layer, which if for the dates.  Once again create a new layer. From the Layers menu select Add New Layer. A thumbnail for “Layer 6” then appears on the Layers palette down at the lower right-hand corner. From the Layers menu at the top select Layer Properties. When the box appears rename the layer “dates” in the Name box.   A thumbnail for our new "dates" layer appears on the lower right-hand Layers Window, which is automatically selected (highlighted in dark blue). Whatever we type now will appear on this newly added layer.  Here’s what it should like after completing those steps:  

 In the final layer we will type in the dates.  This is a 2010 calendar we’re making. In 2010, January 1st falls on a Friday (for reference see this page).  However, you want to start the first row beneath Sunday so that when you reach Saturday and hit the Return key to start the next row of dates, the next row of numbers will be correctly positioned under Sunday.  Begin by typing in a two digit number that is centered beneath “Sun”. We’ll use the number “20”.  Here it’s probably best to take care now to get the number centered as best you’re able. You may have to take a number of tries at it. If the number isn’t lined up properly just click a distance away. Then return and click the cursor where want to position the number beneath Sun.  Position the number "20" squarely beneath "Sun" as best you can.   This is what you should have at this point: 

(image area close-up) Now backspace twice to remove the number “20” you typed.  

(image area close-up) Then use the space bar to move the cursor across to type “1” centered beneath Fri. Continue adding the dates across the first row (which in this case is only one more date beneath Sat). Then hit the Return key on the keyboard and start the next row. Use the space bar to advance the cursor between numbers. Complete all the dates (31 days in January). Center the number beneath the days of the week as best you can.  Here’s what you should have by now:  

(image area close-up) Congratulations!  You have now created all of the layers.  Now all that's left is to reposition them "just so."  After that we'll make a couple of different types of saves of the document and we're done! Now on to the next section, where we reposition the layers.  We're off to 12) Reposition Layers.  

12) Reposition the Layers  Now let’s reposition our layers.  We’ll start with the “dates” layer we just completed. It should already be selected. Click on the thumbnail for that layer on the Layers Window at the bottom right-hand corner.

 

 Then from the Edit menu up top, select Select All.  

 Now click from the Tools Window click on the Move Selected Pixels icon  

(image area close-up) And click anywhere then drag the dates to reposition them, both centered within the background image and at the desired position at the bottom. Compare the image below and above to see how we’ve moved the dates down.  

(image area close-up) Now we proceed to do the same with the days of the week layer. First click on the thumbnail on the Layers Window at the lower right-hand corner for the “days of the week” layer. The thumbnail should be highlighted in dark blue.  

 No illustrations for the following, as this should all be familiar by now:  As before, from the Edit menu select Select All. Then from the Tools Window click on the Move Selected Pixels icon. Click and drag the days of the week to position them in proper relation to the dates beneath them. After completing these steps it should look like this:  

(image area close-up)  Now let’s do the same to reposition the dots between the days of the week.  We’ll do “dots” first. Click on the “dots” layer on the Layers palette at the lower right-hand corner to highlight it in dark blue. Then from the Edit menu Select All. Next, from the Tools Window click on the Move Selected Pixels icon. Click and drag the dots to position them between the days of the week. When we’re finished with those steps it should look like this:  

(image area close-up)   And finally, we’ll reposition the “month” layer.  Click on the “month” layer on the Layers palette at the lower right-hand corner to highlight it in dark blue. Then from the Edit menu Select All. Next, from the Tools Window click on the Move Selected Pixels icon. Click and drag “January” to position it centered above the days of the week. After completing those steps here’s what it ought to look like: 

(image area close-up) We can continue to fuss with it as such until we get each layer positioned exactly as we like.  Once you’re satisfied with the positioning of all the layers we’ll to make a save of the file that includes all 6 layers.  You might as well click Deselect from the Edit menu at this point. Next we'll make a save of the file that has all our layers. Let's go to 13) Save File - All Layers.  

13) Save a Version of the File With All Its Layers  Should we want to work on the file later to tidy it up, fix a mistake we noticed, etc., we'll want to keep a Paint.Net version (.pdn) of the file that preserves all its layers.    From the File menu select Save As. 

 Here we saved the file within a folder we created named “american advertising calendar”. We named the file “january – all layers”.  

 Note that we saved the file type as a PaintNET or .pdn file, which appears by default in the Save As box.  We can reopen it with Paint.Net. Now if we ever want to edit the file, we have a version saved with which we can do that.   Next we'll merge all the layers into a single layer so that the file can be printed.  We're on to 14) Merge Layers. 

14) Merge the Layers  Now we’ll merge each layer down, one by one, into a single image.  It doesn’t really matter what layer we start with. We’re going to merge them all anyway.  We’ll just start with the one at the top of the Layers palette and work our way down.  Click on the thumbnail for the “dates” layer on the Layers palette at the lower right-hand corner. Then from the Layers menu at the top, select Merge Layer Down.  

(Layers palette close-up)  The layer will then be merged into the layer directly beneath it, and will disappear as a distinct layer of its own.   

Note that the thumbnail for the "dates" layer has now vanished from the Layers Window on the lower right-hand corner. The content of that layer has been merged in the "dots" layer. 

(Layers palette close-up) We’ll continue in the same manner, selecting each layer and merging it down until we have all layers merged into the “image background” layer.  If we wanted to we could rename the one single layer we have left. (You know how to rename a layer by now, right?) But there’s no need to, really.  Oh well, what the heck. We went ahead and named the single layer “all layers merged”.  

(Layers palette close-up) Next, in the final step we'll save the file as a .jpeg (or any other type of file that seems suitable for printing).  Let's head to 15) Save File - One Layer. 

15) Save a Version of the File in Single Layer Form  Now we will save this file as a .jpeg file for printing.  Again from the File menu, select Save As. Then when you get the box to save the file use the dropdown to change the file type accordingly. 

 You could save it also as a “bitmap” file (.bmp). A bitmap file might give you better resolution when you have it printed.  If you’re having your custom calendar printed by Shutterfly then they will need it in .jpeg form.    However, if you’re taking it to a Kinko’s or Alpha Graphics they may be to print it as a .bmp file as well.  A Bitmap document might look just a little better.  Possibly, those stores might also be able to print in some other file types such as a .TGA that might produce a better result that a .jpeg.  We'll leave the investigating up to you.  Here’s the completed January calendar as a .jpeg (placed on a light yellow background so you can see the image border):  

 

 (view larger sized version) If you’d like to view the entire calendar set you can view it at Shutterfly, see here.

Addenda

Cropping an Image 

There are many images that you can easily crop to the desired size, as long as you don't mind sacrificing some of the original image in the process.   The following nature landscape photo is a submission to public-domain-photos.com by Jon Sullivan named "Sunrise": 

 For our example we'll crop it to fit into a 5 x 7" frame.  Remember, it will then have a white background layer of 5 x 7" as well.   We'd like to have a white 1/8" border around it.  Therefore we'll crop the image to 4.75 x 6.75".   From the Tools Window click on the Rectangle Select feature.  Draw a rectangle around the part of the image you would like to display within a 5 x 7" frame.   

 Then from the Image menu select Crop to Selection.  This will crop the image.   After you've tried cropping the image as such, from the Image menu select Resize Image.  (Note: Make sure the "Maintain aspect ratio" is check marked.)  Type 4.75 in the box for width and check to see what number then automatically appears in the box for the length.  This takes some trial end error.  You'll have to try it a number of times to get the dimensions you're aiming for.   If you don't select the right dimensions with the rectangle you've drawn, just click Undo from the Edit menu to return to the uncropped image.  Then try selecting the desired area to be featured again, this time adjusting the shape accordingly.   Keep at it until you have the image cropped to the desired dimensions.  Or until you get the dimensions close enough. A very slight variation won't be noticeable.  For example, here we were satisfied with the image cropped to 4.75 x 6.76.   

 FYI, here's the finished product (on a light yellow background so you can see the border): 

 (We used Copperplate Gothic Bold font, in the 28 point size for the month and 14 point size for the days, dots and dates.) 

What If the Image Doesn’t Fitand

It Isn't Suitable for Cropping?

 To begin with, you'll want to choose images that are relatively close in shape to 11 x 14.  But sometimes the image isn't suitable for cropping.  You need to keep the image intact for it to look right.  And yet it doesn’t fit neatly into 11x14 inch shape.     In such cases, there can be a very noticeable variation between width and height to the edge of the frame.   When this happens we can compensate by placing a colored background behind the image that fills it out, and creates a symmetrical border.     In order to do this, you will need to determine out which dimension (height or width) is short.   However, before continuing let's first review a few things to ensure we grasp the concept:   Remember, we have a blank white background as the bottom layer.  The size of that background layer is 11" x 14".    That foundation layer exists in order to create our 1/8" white border around the image.    Therefore, the image itself has to be smaller than 11" x 14". So we are sizing it to 10.75" x 13.75".   This size creates a 1/8" border all the way around (created by the white layer beneath the image).   Here is what you need to understand: In order to have a 1/8" border surround the image, the image's width cannot exceed 10.75". And by the same token, the height cannot be greater than 13.75".  From the Image menu select Resize Image.  A box appears in which to modify the image's width and height.  Try entering both 10.75 for width and 13.75 for height, respectively. Make sure the “Maintain aspect ratio” box checked, of course.  When you type in these values in the Resize Image box (independently, one at a time) a value in the corresponding dimension appears.  You want to examine those corresponding numbers.   When you type in 10.75" for width and the number that appears for the height is greater than 13.75", that's no good. And when you type in 13.75" for the height, if the number that appears in the width is greater than 10.75, that's not going to work either.  

You're looking for a number in the corresponding dimension that is either less than 10.75" for width or less than 13.75" for height. (It has to be one of the other.)  When the variation is very slight for either the height or width, you may be able to live with it as is. But in our opinion, this solution works best when the height of the image is just a smidge shorter than the perfect 11x14 ratio. In that case, you can have the border be just a tiny bit longer at the bottom and the eye won’t really pick it up.  For example, in the image below we set the width to 10.75”. This resulted in a 13.40” height.  That amount leaves a slightly larger space of 3/10” at the top and bottom of the border. 

 A variation that slight can be added entirely at the bottom of the image without the eye really taking any notice.  Notice that we kept with 1/8" spacing at the top: 

  So that can work for very slight variations.   Otherwise you’ll want to add an additional 10.75” x 13.75” layer behind the image with a color that matches up well with the image. With this technique we’ll later merge the image together with the colored background before pasting it over the 11x14 blank white “image background” layer.  What follows may sound a little complicated.  But in practice it's actually easy to do.  Recall that in our tutorial we created two separate canvases, one to work with the image and one for the blank white background that serves as the image’s border.  We’ll use a different image for this example.  On the upper right-hand “list of images” thumbnails, you’ll click on the canvas thumbnail for the image.  

 We resize the image by typing in both 10.75” for the width and 13.75” for the height. We’ll thereby determine whether it is the width or height will be too short for the 11x14” dimension.  In our example, it is width that is too short. This image will be resized to 9.99” x 13.75”  

 Next we’ll create a new canvas to work with. From the File menu select New. A new canvas will then appear on our upper right-hand “list of images” thumbnails. When the box then appears to edit the dimensions of this new layer, resize it to 10.75" x 13.75". 

 Then we’ll add 2 new layers to this new 10.75” x 13.75” canvas.  No need to rename them, really. From the Layers menu simply add a Layer 2 and Layer 3. 

The reason we added two layers is so that we can modify the opacity of the color layer. (We won’t bother to fully explain why. But if we don't do this, the checkerboard pattern will show through as we decrease the opacity of the color we’re about to select.) We now need to select a color for the 10.75” x 13.75” canvas shape that complements the colors in our 9.99” x 13.75” image. In this case we could try to match the beige color of the border in the image. Or we could choose a color found in the picture. We chose to go with the brown tone found in the Sonora logo’s bell. As shown in the tutorial’s step “8) Month Layer”, select the color you like using the Colors Window. You can search any website that provides hex colors (this one is good). Then from the Tools Window select the Paint Bucket. Your cursor will become a paint bucket. Place the paint bucket onto the canvas and click to fill Layer 3 with the color.

Now we paste in the image to see how it looks. (The following steps should all be familiar by now, so we won’t provide illustrations for all of them.) From the upper right-hand “list of images” click on the canvas thumbnail for our image. Then from Edit choose Select All. Next from edit select Copy. Now click on the thumbnail at the upper right-hand corner for our colored canvas. From Edit select Paste into New Layer. This will create a Layer 4 with the image located above your colored Layer 3.

Reposition the image to center it. From the Edit menu choose Deselect. Now click on the thumbnail for Layer 3 (your color-filled layer) in the lower right-hand corner Layers Window. From the Layers menu select Layer Properties. The Layer Properties box will appear. You can change the Opacity of the color using the slider. Experiment to get the right depth of color. In our example we decreased the opacity of the brown color from the default 255 (most opaque) slightly to 238.

Now we’re going to merge all the layers on this canvas. Here's a shortcut: for each layer that we’re merging down, on the keyboard press “Ctrl + M”. Important: First, start with Layer 3. Merge Layer 3 down into Layer 2. Then merge Layer 2 down into the “Background ” layer. Next click on the thumbnail for Layer 4. Merge it down into the (now color-filled) “Background ” layer. You’re now left with a single layer comprised of the image and its colored background. From the Edit menu choose Select All and then Copy.

Click back on the thumbnail for the blank white 11x14” canvas layer in the upper right-hand “list of images.” From Edit select Paste into New Layer. Then from the Layers menu select Layer Properties and in the box for Name rename the layer “image.”

You can now continue business as usual, adding the month, days of week, dots, and dates layers as in the tutorial. In the 2010 American Advertising Calendar we used this approach of adding a width-wise color layer behind the image for the months of February, March, May, June and October. The wider background color shows up as bands of color on either side of the image. And the same principle applies when the image’s dimensions are too short to fit the 11x14 background border canvas at the top of the bottom. In that case you’ll simply be working with the height, rather than the width. If you look closely at gallery for the 2010 American Advertising calendar, you’ll see we did just that for the months of July, September, and December. Using the above technique we added small bands of color at the bottom of those images.

To Better Align the Dates and

Adjust Spacing of the Days and Dots  Some folks may be bothered by some of the rows of dates being just slightly out of alignment.  Similarly, they may wish to make slight modifications to the spacing of the days of the week and dots separating them. 

For them there is a solution, but it requires a fairly keen eye and steady hand.   Note in the example below, the dates in the first row under Thursday, Friday and Saturday--the 4th, 5th and 6th--are just slightly off center (left) from the center of the columns of dates beneath them.   (You can view a larger version of image here.) 

 To correct this, first open the "dates" layer by clicking on its thumbnail.  From the Tools Window we would then use the Rectangle Select tool to draw a rectangle around those three dates. 

 Next, from the Tools Window we would click on Move Selected Pixels; then click and drag our selected dates slightly to the right to reposition them better.   (Here you will probably want to use the Zoom In feature from the View menu so you can have a closer look at your work.) 

 In the illsutration above, note that those three dates are now better aligned over the columns beneath them. In the same manner, you can select and drag individual dates, or a number of them that are adjacent in a row or column.   Indeed, you can move any part of the text for the calendar around.  Just be sure you click first on the thumbnail for the desired layer. If you make a mistake, you can always click on Undo (from the Edit menu) to restore things back to before the mistake.   (It would probably be wise not to Save until you're satisfied with all the adjustments you've made.  And even then it's not a bad idea to Save As and name it something slightly different.) The same principle applies to the dots.  There's usually about two of them that aren't spaced perfectly.  Probably best to select and move each dot separately.  Draw around them with Select Rectangle and Move Selected Pixels to improve their spacing. If you really want to be meticulous, you could also move an entire column of dates and the day atop it.   For example, in all the months of our 2010 American Advertising series you will find that the columns of dates for Friday and Saturday are slightly closer together than the

columns for the other days of the week.  That was an unexpected consequence of typing 5 spaces in between the days of the week.  It's a slight variation, but it is there. If you wanted to space those two columns more evenly, you would have to move the days and dates in question in independent steps because they're each in separate layers.   (In our view this would be more trouble than it's worth.  We feel it's no biggie if the columns for Friday and Saturday are just a little closer together than the others.  We mentioned it because compulsive 'picture straightener' types out there may want to know how to get things 'just so'.) Anyway, hopefully this has given you the gist of how to tidy up the spacing, if you so desire! 

Other Sized Calendar Sets

You can design your calendar set to fit any sized frames.  For example, you could make the calendars 8 x 10" or 5 x 7".  You could even make a tiny set using 2 x 3" frames if you like.   The advantage with these sizes is that you can easily print them yourself. Our tutorial walks you through how to create an 11x14" poster sized calendar.  But if, for example, you wished to create a calendar in the 5 x 7 inch size, you would follow the same basic instructions as the tutorial except you'd then modify the sizes accordingly.   In our tutorial to make an 11x14" calendar we used the following sizes: white background for 1/8" border = 11 x 14"image = 10.75 x 13.75"font size for month = 48 pointfont size for days, dots, dates = 28 point For a 5 x 7" calendar set you could use the following dimensions: white background for border = 5 x 7"image to make a 1/8" border = 4.75 x 6.75"image to make a 1/16" border = 4.875 x 6.875"font size for month = 28 pointfont size for days, dots, dates = 14 point  The background layer will be the size of the opening in the frame.  The image size must be smaller in order to create a border behind (around) it.  How much smaller depends on the border size you want.  For a 1/8" border subtract 0.25" from the length and width,

each, respectively.  For a 1/16" border subtract 0.125" from both the image's length and width.   Hopefully this gets the basic idea across.  For handy reference, here's a conversion guide for fractions of an inch to their equivalent decimals: 1/16 =   0.0625 1/8 = 0.125 3/16 =   0.1875 1/4 =   0.25 5/16 =   0.3125 3/8 =   0.375 7/16 =   0.4375 1/2 =   0.5 9/16 =   0.5625 5/8 =   0.625 11/16=   0.6875 3/4 =   0.75 13/16=   0.8125 7/8 =   0.875 15/16=   0.9375  

Paint.NET Basics

Paint.Net is the image editor we use for our tutorial.  We find it to be the most user-friendly and intuitive freeware editor available. Paint.Net has its own online Help section, and its own community forum for support. Here we will simply assemble Paint.Net's Help links for the most basic steps that we use most in creating a calendar.  If you have questions about how a Paint.Net feature works as you proceed through our tutorial, this section might save you some time and effort.  Beyond that, it's really up to you to dive in, explore, and experiment with Paint.Net's features.  

The Interface Below is an orientation to the the basic features we use most often in designing a calendar: 

  Menu Bar - Includes menus for File, Edit, Image, and Layers.  There are several other menus here that we don't cover in the tutorial.  Explore them. Tools Window - A collection of command features such as Rectangle Select, Move Selected Pixels, and Text Tool. Image Canvas - Shows the canvas you're currently working on. Image List - Thumbnails of every canvas you create for the Paint.Net document (.pdn file) you're currently working within. Toolbar - Actually what we have highlighted specifically in red is the Toolbar's "Tool Choice" bar.  This is where the Text Toolbar (font type, size, etc.) commands will appear when the Text Tool is selected from the Tools Window. Colors Window - To select colors for text, background, lines, etc. Layers Window - Thumbnails for the layers of each image canvas.  

Menu Bar Features File - Save, Save As, and New are found here. 

Edit - Here you'll find Select, Deselect, Copy, Paste, Undo, Redo, and Paste Into New Layer.   Image - This menu contains Resize.   A feature included under Image that is not covered in the tutorial, but may be used for some images, is Crop to Selection.  After you have selected a portion of the image (usually with Rectangle Select), if you give this command the image is cropped accordingly.   For example, you'd use Crop to Selection if you're making a calendar of a landscape image that doesn't fit into the 11x14 shape.  Then you'd need to trim away some of the top, bottom, or sides.   Layers - Includes Add Now Layer, Layer Properties (through which to rename a layer), and Merge Layer Down.   View - Not covered in our tutorial, but very useful:  From this menu you can change the viewing size of the image canvas you're working on.   Effects - Also not covered in the tutorial, this menu allows you to make some artistic modifications to images.  One feature that you may find yourself using at times is found under Photo, the Sharpen command.   

 

Tools Window 

Rectangle Select - We referenced this in our tutorial mainly because selecting this feature turns off Move Selected Pixels after pasting an image.  (In some cases after pasting an image you won't want to immediately move it anywhere--eg, you may want to select part of it for cropping.) As mentioned above under image, should you need to crop an image to fit the 11x14" dimensions, then you be using Rectangle select.  (It wasn't necessary to do that with the example in our tutorial.) Move Selected Pixels - Use this feature to position layers.  First Select All for the entire layer, then after activating the Move Selected Pixels mode click and drag the layer to the desired location. Text Tool - This is the feature with which you'll type in the month, days of the week, dots between days of the week, and dates layers.  

Image List 

Thumbnails of every canvas you create within the Paint.Net .pdn file that you are currently working within. 

 Chances are you will only use two image canvases, at the most, when creating most calendars.  And indeed, if you wish you can design a calendar by first creating the 11x14" background canvas, and then pasting an image into a new layer on that canvas.  Then you will only need a single canvas.  After you've created a few calendars, this concept should become apparent.   Out tutorial teaches a method that has you create two image canvases.  The reason for that is that in some cases you may find an image that could require working with a separate canvas.  It also better demonstrates the concept of the image canvas list of thumbnails. It is important here to understand the relationship between an image canvas and the Layers Window.  When you add a new layer you want to be sure to first select the correct foundation layer by clicking on the appropriate image canvas thumbnail.  (See below.)  

Layers Window 

Thumbnails of each layer you create for an image canvas.  Each image canvas you create can have multiple layers.   When you add a new layer, first take care to select the correct image canvas thumbnail among in the Image List at the top.  (If you have more than one image canvas, that is.)  If you don't, you'll end up adding the new layer to the wrong canvas. Renaming layers from their default name (eg, "Layer 2") to something specific helps eliminate a lot of potential confusion.  

Toolbar 

The area we show selected in red above is where the Tool Text Bar will appear, from which you choose the style of font, font size, and other text related commands.    

Colors Window 

When you want to select a color for your text this is where you'll do it.  In our tutorial we explain how to find and enter a custom color using hex color codes.   Our tutorial provides a link to Wikipedia's entry on Web Colors.  There is a decent selection available there.   Here is Wikipedia's comprehensive list of web colors.  This link is also pretty good for finding different shades of color.   

For a near infinite variety of hex colors, try this link.  Click anywhere within the color spectrum to see a sample bar of the color, how it looks in text, and what its hex code is. There are a lot of sites that have web color hex codes, just Google the subject. The same basic elements for the above links are actually featured within the Colors Window's color wheel, by the way.  By clicking within the Color's Window's color wheel the selected color's corresponding hex code will be reflected.  It's just harder to see it in the very tiny Primary Color swatch of the Paint.Net interface.  Plus you're also seeing a kaleidescope of colors change for each of the Red, Green and Blue colors within the hex code as well.  Therefore, we just felt that viewing it externally is a little easier to work with.

Roger Peterson Web Enterprises, LLC – All Rights Reserved © 2011