Cosmopolitan Productions | More guides & tutorials | Mad in Pursuit  | Contact

Goal of this tutorial

Produce a memory map you can customize and post on your own site.

View: Final product | Photoshop file

Background. The emergence of Google Earth satellite maps has sent us all searching for the places in our hearts - childhood homes, the old neighborhood, a favorite vacation spot. Photo posting services like Flickr  -- with their notation and comment facilities -- gave rise to an viral meme: the memory map (now tagged as memorymap or memorymaps). Screen-grab a map, post, comment. A quick search on Flickr this morning produced over 1900 memorymaps. They are mesmerizing, but leave me a little frustrated. Most are too small to be informative. And I want to incorporate memory maps into my own site, where I do a lot of family history work.

Before I knew about Google + Flickr = MemoryMaps, I did my own - of the legendary Castlewood, Missouri. It has the size I like, but not the cool interactivity that draws you in. So... I set out to figure out how to produce an interactive memory map.

Level: Intermediate - assumes you know your way around Photoshop CS2 and enjoy a nodding familiarity with ImageReady CS2.

Background map preparation

Screen-grab and save a map image to play with. I use Snag-It by TechSmith. I chose a small (239 x 457) Google image of Castlewood MO for this demo Google Earth.

Import to Photoshop.

I gave myself some elbow room by enlarging the canvas (Image > Canvas Size...) to 400 x 600 for some elbow room. Added a drop shadow for style.

Use a levels adjustment (Image > Adjustment > Levels...) to brighten the map and enhance its contrast, to your liking.

Mark your memory places

In Photoshop, mark your places. I followed the Flickr convention of using rectangles. These are Shapes created by the Rectangle Tool (U). They have no fill and a 1 px stroke outline. The stroke colors I chose depended upon the background. You could also color code your markers for different purposes (like, my mother's memories vs. my memories). Name each layer appropriately so you can keep track of your rollovers later.

I made my markers subtle. I think the idea is to appreciate the entire landscape overall, then go exploring. It reminds me of one of those Advent calendars where you get to open the little doors.

Make Note Bubbles

There are a variety of approaches here. The basic idea: Text and a background for each memory place. I used a text box and a Custom Shape (U) > TalkBubble.

As I did a bubble and a text layer for each memory place, I put them in Groups, using the same naming conventions as I used for the memory places. Gotta keep it neat and organized or you'll go crazy.

I added a drop shadow behind the bubbles for depth. Remember that you can copy and paste layer styles as you go along and your imagination takes hold.

On the version below, all the bubbles are visible and disastrously overlapping. Not to worry. In your final version, the bubbles will only appear when your roll your cursor over the associated memory place rectangle.

To ImageReady

SAVE your work.

Next Page >>>

...

12.16.05 (revised 01.03.06)

Cosmopolitan Productions | Cosmo Resource Page | Mad in Pursuit  | Contact