Page 1 of 2

[Tutorial] Cool HAWAII map (Photoshop)

PostPosted: Fri Apr 18, 2008 12:43 pm
by RjBeals
Image

I've had a few people ask me questions about how I create my map borders, what blending options I use, or certain elements in my maps. I decided to create this sample map to demonstrate some examples.

  1. First of all, I use Adobe Photoshop CS3 Extended, but all of the techniques I use are basic and found in most recent PS versions. Sorry gimp users - but the thread and screenshots may inspire you anyway.
  2. Second of all - There are many many different ways to achieve the same results. And there are many different personal styles to add along the way. That's the beauty of art. I am not saying my methods are the best. My work flow is much different than DiM, cairnswk and Widowmakers (and all the others) - but we all make pretty maps.
  3. Third - this is not a real map, and not intended for game play or critiquing. I made this map quickly, with not much thought, in order to demonstrate key map building skills.
Download PSD HERE: HAWAII.PSD (2.1 MB)
Download compressed PSD HERE (RAR): HAWAII.RAR (1.1 MB)

===================================================================================================
Image
I started with this Hawaii map I found on the internet.

===================================================================================================
Image
I pasted it to it's own Layer in Photoshop. I took the Opacity down to 27%. I will use this map as a reference for my borders.

===================================================================================================
Image
I create a new layer for my main continent border. I set my brush to 3 pixels, 100% hardness. Then I zoom in close and start outlining. A tip when outlining zoomed in is to use the spacebar to turn your brush into the "hand" tool. This will quickly allow you to move your canvas around while not having to go to the tool bar and change off your brush tool.

===================================================================================================
Image
I create a new layer for my territory borders. I use a 2 pixel brush, 100% hardness for these. Notice the "Main Land" layer. Thats created so I can apply drop shadow & outer glows to the entire mainland layer. I just used the magic wand and selected inside the borders, then wend to Select > Modify > Expand by 2 px. Then created a new layer and filled with red.

===================================================================================================
Image
Then I use the brush to paint in my region colors. Each region (color) in it's own layer. Use the left & right bracket keys to increase or decrease the brush size on the fly, while your painting. Notice how I use folders to keep my layers neat and organized. ;)

Some may think painting the regions by hand is not efficient - but I found it's the best way for me to put the pixels where I want them.

===================================================================================================
Image
The borders will be the top layers.

===================================================================================================
Image
Next I added a new layer above my district color layers, and called it lighting effects. I selected my Main Land by holding ctrl and clicking on the layer thumbnail picture (not the word Main Land). Then I selected my new Lighting Effects layer and filled the selection with a white to black gradient. Then I chose the layer blending mode as darken. This gives the land a little more depth.

Then I also added a inner bevel to the Lighting effects layer, and an outer glow to the Main Land layer. This also makes the map pop a little more.

===================================================================================================
Image
I create my ocean in the back with 3 separate layers. A base light blue layer, a floral pattern, and another gradient layer. The gradient layer has an opacity of 20%, the floral pattern is 16% and then the light blue is 100%. I also added my territ names here. I used a "Sharp" plain style font, and gave it a 2 pixel white stroke with a blend mode of "Lighter Color" and an opacity of 31%. This simply makes the names stand out a little more from the backgrounds.

===================================================================================================
Image
The Title and Legend were then added - in a style trying to keep with the Hawaiian theme.

And there you have it. The Basics. If you have Photoshop, download the psd and really look at the layer blending settings. Thats the key. Good Luck - and feel free to post alternative suggestions or shortcuts in this thread.

Re: Photoshop Tutorial: Cool HAWAII map

PostPosted: Fri Apr 18, 2008 1:29 pm
by t-o-m
this is really great RJ,
i will edit this in a mo, i wanna be the 1st 2 comment :P
rite edit:
-
im glad youve done this, now i know that i am doing things right :D
one thing that pisses me off is that ive been using the darkening tool on my terits to make that bevel look, that took me forever and now you have a quick way - you b*tch!
thanks,
its good that youve done this and put the other one to shame, this one is thurer (sorry i really have no clue how 2 spell that!) and this one shows you how to do things well,
-
=D> =D> =D> =D> =D> thank youuu!!!

Re: Photoshop Tutorial: Cool HAWAII map

PostPosted: Fri Apr 18, 2008 1:43 pm
by InkL0sed
This looks great; I'll read it when I get home (instead of during class... :? :geek: )

Re: Photoshop Tutorial: Cool HAWAII map

PostPosted: Fri Apr 18, 2008 2:16 pm
by Ruben Cassar
Interesting stuff RJ. I bookmarked this thread! ;)

Re: Photoshop Tutorial: Cool HAWAII map

PostPosted: Fri Apr 18, 2008 5:33 pm
by DiM
great work rj.
may i also add a couple of thoughts? basically the same result but in a different way can be obtained using the following points:
1.a. instead of brushing each region with a different colour brush them with white and then go to blending options>overlay and choose the colour you want. this way you can change the colours on the fly, swap regions etc.
1.b. this just came to mind but i don't have photoshop to test if it really works. once you draw the borders and want to fill a certain terit with colour it might be worth trying the magnetic lasso tool to select and then use the bucket to fill the area.
2. instead of adding the light layer to give land depth you can do the following thing: create the water layer and bevel it in a downward direction. then when you want to create the land simply take the eraser and cut the island shape. then proceed with creating borders and terits and colours. this will create the illusion of a raised island.
3. just like the lighting effects layer you can also create other layers below it with all sorts of effects. use a grain filter, or a clouds filter. it gives even more realism to the land


edit// and now that i think about it the magnetic lasso tool might also be good for borders. simply move the mouse around the original map of hawaii on it's layer until you've encircled the island. with the proper settings for the magnetic lasso it should be pretty smooth. then click new layer. the selection should still be valid. then go to stroke (i think it's in the edit menu or somewhere in a menu) and add a 2px stroke. you should have a fully traced outline of the map.

could somebody experiment the magnetic lasso thing? cause i don't have photoshop at work and i'm actually very curious. :D

Re: Photoshop Tutorial: Cool HAWAII map

PostPosted: Fri Apr 18, 2008 5:53 pm
by TaCktiX
No need to use the Magnetic Lasso. Put up a 1-5 tolerance Magic Wand on the empty area, select Contiguous, and bam, instant territory painting. That's how Citadel has gotten all of its painting done.

Re: Photoshop Tutorial: Cool HAWAII map

PostPosted: Fri Apr 18, 2008 6:48 pm
by oaktown
TaCktiX wrote:No need to use the Magnetic Lasso. Put up a 1-5 tolerance Magic Wand on the empty area, select Contiguous, and bam, instant territory painting. That's how Citadel has gotten all of its painting done.

I've recently discovered the easy and beauty of adding a color fill layer as a clipping mask over the layer of the territory you want to change the color of... one step color changes forever!

Prior to that I would create an individual path for each territory, and just clear the layer and refill the path with the new color I wanted to use. Works beautifully, but has that extra step. I've found that the Magic Wand always picks up just a bit more or less of the edges of the area than I would like, so my territory is never the exact same size with the new color.

Re: Photoshop Tutorial: Cool HAWAII map

PostPosted: Fri Apr 18, 2008 7:00 pm
by DiM
i agree with oak on the magic wand thing. it never catches the exact location. however it might work good on a map with rectangular terits rather than random shape ones.

Re: Photoshop Tutorial: Cool HAWAII map

PostPosted: Fri Apr 18, 2008 7:02 pm
by TaCktiX
It's worked very well on my maps so far. Anything it misses I touch up by hand using a small-pixel brush. I'll look into using Fill Layers on my next map, though.

Re: Photoshop Tutorial: Cool HAWAII map

PostPosted: Fri Apr 18, 2008 7:16 pm
by t-o-m
DiM wrote:then go to stroke (i think it's in the edit menu or somewhere in a menu)

me thinks its in the layer style menu, at or near the bottom

Re: Photoshop Tutorial: Cool HAWAII map

PostPosted: Fri Apr 18, 2008 7:38 pm
by DiM
t-o-m wrote:
DiM wrote:then go to stroke (i think it's in the edit menu or somewhere in a menu)

me thinks its in the layer style menu, at or near the bottom


could be, all i remember is that it's the third menu and it's in the middle.

Re: Photoshop Tutorial: Cool HAWAII map

PostPosted: Sat Apr 19, 2008 3:48 am
by yeti_c
I'm not sure about the bonuses on this map? Surely whoever went first would stand a better chance of winning?!?

<ontopic>
Nice RJ - loving the Sea!!

Have you any tips for non geographical areas where you don't have a base image to start with?

C.

Re: Photoshop Tutorial: Cool HAWAII map

PostPosted: Sat Apr 19, 2008 3:17 pm
by pepperonibread
yeti_c wrote:I'm not sure about the bonuses on this map? Surely whoever went first would stand a better chance of winning?!?

<ontopic>
Nice RJ - loving the Sea!!

Have you any tips for non geographical areas where you don't have a base image to start with?

C.


I'd suggest drawing it out by hand first... even with geographical maps not all of your borders will align with the actually political boundaries.
RJ: Any chance of adding a quick note here about the pen tool? Not all the curves and stuff, just the basic point by point and then stroke. It's really helpful for people that can't draw well by hand or don't have a pen mouse when drawing borders.

Re: Photoshop Tutorial: Cool HAWAII map

PostPosted: Sat Apr 19, 2008 3:25 pm
by RjBeals
pepperonibread wrote:RJ: Any chance of adding a quick note here about the pen tool? Not all the curves and stuff, just the basic point by point and then stroke. It's really helpful for people that can't draw well by hand or don't have a pen mouse when drawing borders.


The pen tool / bezier curves are definitely an essential part of map making as well. Good point pepperonibread. I created my borders in Dustbowl with this tool, and made the smooth outline of the legend in this Hawaii map with that tool. I may post some basic screen shots - but a quick search on google will give you the same info.

Re: Photoshop Tutorial: Cool HAWAII map

PostPosted: Sat Apr 19, 2008 3:27 pm
by RjBeals
yeti_c wrote:Have you any tips for non geographical areas where you don't have a base image to start with?


Not really. Just the basic advice to keep everything on separate layers. My maps end up with 100's of layers.

Re: Photoshop Tutorial: Cool HAWAII map

PostPosted: Sat Apr 19, 2008 3:46 pm
by DiM
RjBeals wrote:Not really. Just the basic advice to keep everything on separate layers. My maps end up with 100's of layers.


and for the fact there are hundreds of layers also always use folders and subfolders.

for example my main layer view on maps shows 8-10 folders. and inside each folder there are 1-10 other folders.
otherwise you go insane searching for something :lol:

Re: Photoshop Tutorial: Cool HAWAII map

PostPosted: Sat Apr 19, 2008 3:52 pm
by Telvannia
DiM wrote:
RjBeals wrote:Not really. Just the basic advice to keep everything on separate layers. My maps end up with 100's of layers.


and for the fact there are hundreds of layers also always use folders and subfolders.

for example my main layer view on maps shows 8-10 folders. and inside each folder there are 1-10 other folders.
otherwise you go insane searching for something :lol:


Try using Gimp, you dont get layer folders, my maps begin to look a bit messy after awhile.

Talking about gimp, Rj any objections to me trying to convert this for gimp users if any are interested?

Re: Photoshop Tutorial: Cool HAWAII map

PostPosted: Sat Apr 19, 2008 7:06 pm
by RjBeals
Be my guest!

Re: Photoshop Tutorial: Cool HAWAII map

PostPosted: Sun Apr 20, 2008 12:36 am
by edbeard
so RJ

we've talked it over and you're actually going to have to make a Hawaii map now

Either all the islands or just the main one is ok.

chop chop

Re: Photoshop Tutorial: Cool HAWAII map

PostPosted: Sun Apr 20, 2008 7:52 am
by RjBeals
Hmm.. Have volcanoes in the center with neutral regions around it - first one to the top of the volcanoes wins ! Naa...

Re: Photoshop Tutorial: Cool HAWAII map

PostPosted: Sun Apr 20, 2008 8:08 am
by t-o-m
lol

Re: Photoshop Tutorial: Cool HAWAII map

PostPosted: Sun Apr 20, 2008 9:15 pm
by gimil
t-o-m wrote:lol


t-o-m you seem to be quite the spammer dont you?

Re: Photoshop Tutorial: Cool HAWAII map

PostPosted: Mon Apr 21, 2008 2:47 am
by yeti_c
RjBeals wrote:Hmm.. Have volcanoes in the center with neutral regions around it - first one to the top of the volcanoes wins ! Naa...


Sounds a bit like my Everest idea!!

C.

Re: Photoshop Tutorial: Cool HAWAII map

PostPosted: Mon Apr 21, 2008 12:27 pm
by t-o-m
gimil wrote:
t-o-m wrote:lol


t-o-m you seem to be quite the spammer dont you?

dont threadjack ;)

Re: Photoshop Tutorial: Cool HAWAII map

PostPosted: Mon Apr 21, 2008 12:31 pm
by gimil
t-o-m wrote:
gimil wrote:
t-o-m wrote:lol


t-o-m you seem to be quite the spammer dont you?

dont threadjack ;)


t-o-m dont push your luck ;)

[/thread jacking stops here]