Friday, December 4, 2009

Friday's with Mr. Milk - How To Make Your Own Direction/Map Card


It feels like we are getting more into the detailed work with the wedding planning. There's so much to do and so much to plan for, so it feels good to actually get some tasks completed. Chocolate Lover gave me one task that I could have some fun with: designing our directions card for our wedding invitations.

If you don't know the difference between vector and bitmap files, this is a good reason to find out. Here's my explanation: If you take a picture (in the form of .jpg, .gif, .png, etc.) and increase it's size, you'll notice that the quality of the picture gets worse. That's because if the picture is made up of 100 pixels, by increasing the size of the picture (which is saved in a bitmap form) you are effectively increasing the size of each pixel, hence making the tiny little buggers more visible to the eye. The result is a more grainy look which is characteristic of low quality pictures. 

When you buy a digital camera and the salesperson says this one is 2 megapixels or 6 or whatever, that's what they are referring to: The number of pixels that will be captured by the camera's digital processor and hence the number of pixels that will be printed on the paper. The more pixels you have the better it is for printing larger size photographs. This doesn't mean that a 10MP camera will print a better picture than a 2MP if they are both printing on 4x6 paper. You can still only see 72 dots per inch (or dpi) on your screen, and when you print you can still only fit so many pixels in a given area. So as a side note to this week's post, if you are thinking of buying a digital camera and if you are not planning on printing on anything larger than 8X10, a 3.2 MP camera will do just fine.

Now back to the topic. Unlike bitmap, a vector graphic is one that uses mathematics in order to calculate its shape. For instance if I am using software such as Adobe Illustrator to draw a line which may contain 100 pixels, and then I extend the line by dragging one of its corners, then I am sending a signal to the computer that I want the line to increase in size and the computer then adds pixels to fill the space. So if I double the size of the line, it should now have 200 pixels as opposed to 100 pixels that are twice the size. So vector files = quality is untouched and bitmap files = don't mess with the size! 

To draw our directions card for our wedding venue, I wanted to trace a Google Map image in order to keep the proportions correct. I started by placing the image below into Keynote (Apple's equivalent to Power Point but 1,000,000 times better - no bias here).



You can do this by using a screen capture tool, pressing the "Print Screen"  button on your PC, or Shift+Command+4 on a Mac and selecting the area you want to capture.

I then traced the route using a line drawing tool. You will find this under "Shapes" in Keynote. What this allows you to do is to click along the line of the road while a line joins the point you are on with the previous one. The more clicks the smoother the line. This being a graphic tool, the line is a vector file so there's no degradation to the quality of the image if it is resized later. 

Below is a picture of the tracing process. Don't worry about making mistakes. You can always click on a a single point along the line and either move it or delete it.



Once I had the lines traced I played with the sizing of the stroke to emphasize the highway. To do that, you first select the line you want and then from the Graphics Inspector you change the stroke of the line. Although in the picture below I used two thicker lines to emphasize the highway, you will see later on that I then changed to a single line of stroke thickness 23px for the highway and 6px for the side roads. 



I then added some directional arrows and text, again from the "Shapes" menu, and removed the now traced satellite image by moving it out of the way. A couple of more details included a blow-up of the traffic circle close to the hotel, and some labels to indicate the road names, etc. 



Then I selected each item and from the Graphic Inspector I changed the colour as shown below. To make the filled area representing the Mediterranean Sea, I used the line art tool again but this time I added three more points to connect the 90 degree triangle that takes up the bottom left corner of the map. You'll see that by connecting the first point of your line to the last one, you end up with an area filled shape. 



A quick copy and paste into Adobe Illustrator and my job is done. The beauty of using Keynote was its simplicity. Once in Illustrator I could resize up or down with no loss in quality. 

I hope you've found this useful. What programs do you use for your design work? 

Until next Friday, this is Mr. Milk signing off.

22 fabulous blogger's comments:

Brandi said...

Really awesome tutorial. I just bought a Mac a few months ago, but I don't have Keynote yet (I will, however, be getting it now that I see all the cool things it can do). I have to say, of all the wedding blogs out there, I've yet to see a good practical tip like this. Thanks!

Heather said...

Wow! That is SO helpful, since we’re planning to create our own map, too. Thanks!

GM said...

We made our own map using Power Point, but use a similar technique to yours! We then saved it as a PDF. Great tutorial!

PMerr said...

That look sooo good! We did something similar, just used powerpoint instead!

buhdoop said...

That looks awesome, very useful!

Laura said...

What great tips and I totally understand about wedding planning as we are in the thick of it. I keep imagining a checklist every time we get something done. Love your blog and thank you for your blog comment love on Under the Sheets yesterday. Can't wait to read more...

Lani said...

Nice work! Yours is actually the first wedding planning blog I have come across- I used to plan weddings before I had my kids and I love everything about it, so I may just have to follow your progress:) Congrats, and enjoy every minute of it!

Favourite Vintage Finds said...

Great tutorial! Chocolate Lover and Mr Milk - such sweetness! Happy SITS Saturday Sharefest! Best wishes C :)

Karen MEG said...

Wow, wow, wow, technology certainly has improved since I got married 16 years ago - I feel so ancient! The only technology I used was an excel spreadsheet to keep track of expenses and guest lists :)!

Thanks for coming by my blog during SITS FB!

thatgirlblogs said...

that was amazing!

Unknown said...

i'm a pc...but very much appreciated the explanation on mp, bitmap and vector...now i get WHY it is, not just THAT it is.
Thank you!

Anonymous said...

Happy SITS Saturday Sharefest!!! That's some pretty technical stuff there.

Wishing you much luck with rest of the wedding planning. I'm your newest blog follower.

Mariposa said...

Awesome! Great directions, I will be using this forsure!

Mrs T said...

Very cool. They look great!

Katie said...

wow! Great job! You've got skills!

Kim said...

That looks fantastic. And "YAY" for Macs ;)

Born to be Mrs. Beever said...

I am overwhelmed by your ability. I am somewhat computer saavy but just can't get into all of that. Rather than create the map, I'd prefer to just list the 'write out' directions. Unless I'm using my trusty GPS, the written version is always my favorite. But yours came out wonderfully!

Born to be Mrs. Beever said...

I am overwhelmed by your ability. I am somewhat computer saavy but just can't get into all of that. Rather than create the map, I'd prefer to just list the 'write out' directions. Unless I'm using my trusty GPS, the written version is always my favorite. But yours came out wonderfully!

Melissa said...

i'm glad you bought the madeliene pan! I have the recipe that I used written down somewhere and once I find it I will definitely send it over to you =) hope you had a great weekend!

Anonymous said...

FANTASTIC tutorial!! I am a photoshop/illustrator/indesign gal, but I know I'll be able to use those to make something like this!

Great idea!

Angela said...

wow this is great. i will have to keep this for furute reference.

Brittany said...

Interesting... I never really knew what megapixels were!