How to create a Map Marker that stands out using Fireworks

by David on Tuesday 20th September, 2011 at 14:09 COMMENTS (0)

It is fairly common place now to have a Google Map within a website marking out your place in the world.

Markers are the little tags used to identify a location on the map. These usually are a standard design supplied by Google;

Standard Map Marker D Standard Map Marker R Standard Map Marker A Standard Map Marker E Standard Map Marker P Standard Map Marker T

You can of course create your own unique markers, we have done that for many of our clients;

My Own Marker Chimney Sweeper Man Manor Koi Shop Team JH Racing Wallclad Floors and Doors

When creating a Map Marker it should be easy to view on the map so needs to be well defined, outlined objects tend to work best if the object itself has a lot of colours or details.

Lets get going on creating our new marker, you may download the set at the end of this blog for those too busy (or lazy) to try it for yourself.

Today we are going to create a simple but effective marker that will stand out;
Essex Websites Map Marker
It was originally created for the Essex Business Directory at www.EssexWebsites.net, and will also be shown on the London Websites Business Directory.

Here goes;

First we need to start Adobe Fireworks and Create a new page.

Step 1 Create page in Fireworks

This page should be big enough to move things about without interfering with your designs, as you can see I have set mine to 700 x 700 which is more than enough for now.

Also it needs to have a transparent canvas so as to show through the map.

Create a circle let's say 400 pixels wide.
Create a perfect square the same width as the circle.

Create a Circle and a Square with the same width

Select the square and then use the Modify > Transform > Numeric Transform... option to rotate the square by 45 degrees. SHIFT + CMD + T on a Mac.

Now align the two objects together; select one object and while holding the shift key select the other object then use the align panel to centre them horizontally and vertically.

Align Objects

Align so both are perfectly centred

Now we need to cut away the extra parts of the square, the easiest way to do this is to draw another rectangle so that it covers the original box down to the point it disappears behind the circle.

Draw another rectangle on top

Select both the original box and the new rectangle together (not the circle).

Now when we remove the unwanted parts of the box using the Modify > Combine Paths > Punch we should be left with a circle and a triangle.

Remove unwanted sections

Leaving a circle with a triangle hanging off the bottom.

Leaving us with two parts

Check that there are no stray bits and adjust the parts together so they overlap perfectly and then we can combine the two using Modify > Combine Paths > Union which produces our main marker design.

Combine both parts

Which combines the two parts as one object.

This is now one object

Now we need to make it the right size, this depends on the map and how prominent you wish to make it. A good size is around 40 pixels square, but we will be adding a shadow so need to make this a little smaller say around 30 pixels.

First we need to constrain the proportions in the properties, so when we alter one parameter the other one changes automatically.

Setting the size of an object

Click the little box between the x and y sizes in the properties panel.

When this is selected we can alter the width to 30 pixels and the height will automatically change to the appropriate size, in this case around 36 pixels.

If you prefer a smaller marker then play with these figures until you get something that fits your design.

Now add a nice border to the design, something like solid white border at 4 pixels wide. Play around with the border settings until you get something you like.

Object with 4 pixel white border

Add a drop shadow with 0 offset.

Add drop shadow

If you would like to add a shadow effect inside the object then that requires a new copy as adding an inner shadow to a bordered object will interfere with the border;

To do this select the original object copy it; cmd + C, then paste it; cmd + V.

Remove the border and drop shadow from this copy then add an inner shadow. Play with the settings to get something you like the look of.

Add inner shadow

Now it just a matter of selecting a nice colour.

Change colour

This is now perfectly good to use as a marker but you may want to go a little step further, adding icons or other detail to the tag, go for it, be creative.

Here are some examples I have created so far;

Some examples of marker styles

Resize the canvas to encompass the object. Easiest way to do this is to use Modify > Canvas > Trim Canvas or alt + cmd + T.

Save your design and export it to your website images folder ready for use.

Final stage, not long to go now, bear with...

All we need now is a shadow to place behind the marker.

For the shadow we need to grab a copy of the plain simple object outline.

Copy the Marker object; cmd + C

Create a new canvas; cmd + N

Size the canvas so that the object will fit vertically but make it about double the width, as we will be stretching the object.

Now paste in the object; cmd + V.

Remove any details such as drop shadows and borders, so the object is just a plain and simple outline.

Change the colour to black.

Plain simple object set to black

Now we need to skew the image using the Skew Tool which is found along with the scale tool on the Q menu.

Skew object tool

This will show big black square grab points around the object.

Object Selected markers

Pick up the top middle point and drag it to the right, about twice the width.

Skewing the object

Now select the Scale tool on the same Q menu.

Pick up the top middle point again and squash the image downwards about half. Again to your preference.

We need this image to blend in to the background, so we need to make it feathered and more transparent.

Change the object edge to feather and set the amount of feather to around 5. This blurs the edge of the object to make it look like a real shadow.

Feather the edge of the object

Then reduce the opacity to make the object transparent, a good figure here is around 70 depending on how dark you would like your shadow to be.

Opacity

My shadow object result;

Shadow effect for map marker

Put these together on a Google map and you get;

Map Marker on a Google Map

Hope you enjoyed this article, please feel free to leave your comments;

Download the files