NationStates Jolt Archive


[TUTORIAL] How to make stylish and easy maps

Holy panooly
31-08-2004, 15:51
This is a fairly simple tutorial how to create good maps who are easy to navigate, stylish and good to look at. All you need is photoshop and fantasy.

Examples

http://img.photobucket.com/albums/v298/fruityloops/ofaolains.jpg

http://img.photobucket.com/albums/v298/fruityloops/map1.gif

Please do not link directly. This is eating away bandwidth.

The basics

http://img.photobucket.com/albums/v298/fruityloops/bar.gif

This is the photoshop toolbar. I'm starting at the top from left to right.
1. Marquee tool. Select an area on the canvas (your image) to select something. Works on only 1 layer. Click and hold the icon and you can select a circular marquee too.

2. Move too. Select it and specify a layer to work on. When you click your mouse button you can move things over the canvas to another location. If you do not select a certain object with the marquee tool or the magical wand (see #4) the whole layer will be moved.

3. Lasso, Polygonal Lasso and Magnetic Lasso tools. These are also selection tools but here you can decide how the selection looks like. The lasso is a freehand tool, the polygonal lasso needs points and then the selection like moves on the magnetic lasso achors itself on points on your images - borders and colour changes.

4. Magic wand. Select a layer and click a certain area of one color. This is will become selected.

Note: the color range feature Select > Color Range works many times better than the magic wand. Select a color with the eyedropper tool in the color range and that particular color will be selected.

5. Crop tool. Cuts away all parts of the canvas outside the selection. The canvas size Image > Canvas Size feature works better but is more difficult to use effectively. Just mess around a bit and you'll get the hang of it.

6. Slice tool. This is for webgraphics and thus not needed.

7. Healing Brush. Never used it for mapmaking.

8. Brush tool. This is the most important tool in mapmaking. With this you draw the land, forest, trees... You name it. Click and hold the icon and you can draw lines with the pencil tool. You can change brushes by looking for a tipscale which indicates the brush size. Click the arrow pointing down.
You have more choice but when you click the small arrow pointing to the right you now see a menu. There you'll see all the standard photoshop brushsets. When you want to reset the brushes look above the sets and click 'reset brushes'. Works on only one layer.

9. Stamp tool. Never used it for mapmaking.

10. History Art Brush. Never used it for mapmaking.

11. Eraser tool. Works exactly same as the brush but instead of adding to the canvas it removes what you've made. Works on only one layer. You can also change the type of eraser the same way as changing brush.

12. Paintbucket. Fills a whole layer or a selection with a pattern or a color. To change to pattern go the same bar where you change brushes and look for 'Fill: Foreground', click the small arrow and select pattern. Next to that you can select the pattern.

13. Blur/Sharpen/Smudge tool. Click and hold to see all tools. Blur tool blurs like a brush, Sharpen tool sharpens like a brush and the smudge tool makes a big mess of everything.

14. Dodge/Burn/Sponge tool. Click and hold to see all tools. Dodge makes the color lighter, burn makes the color darker and the sponge makes the color also lighter but in a diffirent way.

15. Path selection tool. Never used it.

16. Type tool. Select an area on your canvas and you can type whatever you want. A special layer for your text is created and you cannot work on that layer with a brush. To convert it to a normal layer select the text layer you want to see changed, Layer > Rasterize > Type and done. Rasterized layers cannot be changed back. To edit your text select the text layer and click on the T in the layer menu. Then you can edit your writings.

Note: rasterized type layers cannot be changed with the type tool.

17. Pen tool. If you like vector graphics, try this out. I never used it.

18. Shape tool. Create shapes with this. Click and hold to see other shapes you can select.

19. Notes. You add a new entry here to remind you later of something.

20. Eyedropper tool. Click a color and its selected in your color palette.

21. Hand tool. I have no clue what this is for.

22. Zoom tool. Zoom in or out. To change between zoom-in or zoom-out go to the same bar where you change your brushes and select the + or -.

That's it!
Holy panooly
31-08-2004, 15:52
If you have no experience whatsoever in Photoshop then please go to www.good-tutorials.com and take a few lessons there. The tools palette is only to let people know what you need and what not. I'm not going to start about filters because the possibilities with those are endless.

You do not have to follow this tutorial precisely. This is merely HOW you CAN create a map not how you MUST do it.

Start with a new canvas File > New and make it 1000×1000 pixels.

Create a new layer (control+shift+n) and select the background layer.

Fill the background layer with a light blue color (HTML #61BBE4) (alt-backspace) is fill whole layer.

Grab a brush and select the 'LAYER 1' above the background and give it a color you like, pastel yellow for example (HTML #F3F6AC) and paint the shape of your nation.

If you want a 'beach look' go to Edit > Stroke - still working on layer 1 - and select a lighter or darker color (HTML #F2FFCC) and select Inside and the stroke width should be around 5 pixels.

If you want a shallow sea look near your coast dubble click Layer 1, go down and select outer glow. Set 'Opacity' to 100% and the color to something blue (lighter than the sea HTML #C1DFE4). Set 'Spread' to 10 and 'Size' to 38. Click ok.Our map is beginning to look like a map.
Adding detail & features is a key in making your map cool. Grab the brush tool and change the brush to 'Dry Media brushes'. Click ok and you see a diffirent set of brushes. Select one and go to the upper-right corner of the screen and click 'Brushes'. There you see the brush options. Uncheck 'Texture' and select 'Noise'. 'Wet Edges' and 'Airbrush'. Select a green color (HTML #268E11) and make a new layer. Now you can brush forests like there's no tomorrow. When you release the mouse button and paint the same piece of forest again it will become darker adding a nice effect to the forest. If you use gray then you can make mountains.

Cities & citynames. This is really easy. Reset your brushes and create a new layer. Make the tipsize of the brush 9 and you can make cities. Added a name to it is simple, take the text toool and write your desired name next to it. Click the 'X' on your keyboard before you start writing to reset the colors to black and white.

There are tons of extra things you can do, just try it out! Remember, always save the .PSD file so you can change everything anytime you want.

If you have any questions drop me a telegram and I'll help you out.

More effects and features will be added in time.

Another tip - after you're done making the beaches and the shoreline effect, you can go back and place a layer between the background - that is, the sea - and everything else - make it a color burn layer, and fill it. I find that the resulting color and the contrast with the shoreline look much nicer.
The Mindset
31-08-2004, 18:02
There's a slight error in your instructions: ctrl+n creates a new image, shift+ctrl+n is a new layer.
Sarzonia
31-08-2004, 18:04
#TAG# for PhotoShop refresher course for me.

Thanks for providing this HP.
Holy panooly
31-08-2004, 18:31
There's a slight error in your instructions: ctrl+n creates a new image, shift+ctrl+n is a new layer.

How silly of me... Will be changed.
Myrdinn
31-08-2004, 20:14
This wonderful! Thanks for the tutorial! :)
Sirens of Titan
02-09-2004, 11:20
nice job HP! :D
Zakhara
02-09-2004, 14:14
I guess I'm new at this. I can operate photoshop well myself but are these maps just for personal websites or can they be in corperated into this game somehow?
Sarzonia
02-09-2004, 14:19
Perhaps we should have a separate forum devoted specifically to tutorials?

This would make a great sticky for that.
Holy panooly
02-09-2004, 14:55
We need more NS related creativity on this forum a forum would be great. I reckon this should be a sticky.

I guess I'm new at this. I can operate photoshop well myself but are these maps just for personal websites or can they be in corperated into this game somehow?

While it would be marvellous if they made a map databse in NS I doubt it would ever become popular or the admins would make it. It would require even more coding for a game which is pretty old. When I make maps I dont care what people do with it.
1 Infinite Loop
03-09-2004, 08:03
Nice we need an official place to store these FAQs
Holy panooly
03-09-2004, 10:38
I really hope the admins can create a place for the creative NS players I'll start writing more tutorials right away
Roach-Busters
03-09-2004, 17:53
Brilliant work, HP, and very helpful as well. By the way, please excuse me if this is a stupid question, but what was used to make those maps? Is it something I download? If so, how much does it cost? :confused:

Thanks for your help! :)
Holy panooly
03-09-2004, 18:07
www.adobe.com you can buy it for $700.

Thanks for the comments! I'll start writing a tutorial for 3d space animations... Something like that. Mapping galaxies for space nations. That sorta things
Sarzonia
03-09-2004, 18:18
www.adobe.com you can buy it for $700.

You might also get a student discount, but then again, I haven't checked their website.

You can also get it for much less by going through the Student Advantage Tech Store (http://www3.journeyed.com/). Disclosure: I used to work for the tech store.

When I worked there, you'd have to verify student status, but that could be done with a current ID with a validation sticker or your class schedule or something.

PhotoShop costs $300 there. A Creative Suite that includes Photoshop, Illustrator, InDesign, GoLive, and Acrobat 6.0 Professional costs $400.

You'd need at least a Pentium III or IV and some other specs. clicky (http://www3.journeyed.com/itemDetail.asp?UID=1716090312135118&GEN0=01&GEN1=01&GEN2=EDU&GEN3=satech&GEN4=&GEN5=satech&GEN6=hpsatech&GEN7=&GEN8=&GEN9=&T1=57781033&DID=&VID=) for more details.
Holy panooly
03-09-2004, 18:39
Didn't even know that... Thanks sarzonia!

I reckon this should be stickied
Roach-Busters
03-09-2004, 18:42
Egads! It costs THAT much money!? :eek:
Xikuang
03-09-2004, 19:02
Yes, it does. Photoshop is an incredibly powerful, industry standard image editing software package-- for really advanced, hig-end use you really can't beat it. If all you want to do is make maps, and if you're on a PC, you could have a look at Paint Shop Pro. (http://www.jasc.com/products/paintshoppro/) It too is a very good piece of software, not quite as powerful as Photoshop, but very good, and I'm told far more intuitive to use for a newcomer than Photoshop (though that wouldn't be hard!). It'ss also way, way cheaper-- $99 to download. You can get a free trial on their site.

I have no personal experience with this software, being a Mac user and there being no Mac version, but friends have sung its praises to me and I know that it has a huge user base. There's loads of tutorials and freebies out for it and all that.
White Lotus Eaters
04-09-2004, 10:26
Looks like an excellent tutorial, I find it a bit daunting though ...

Here's some suggestions for software to make maps, if you don't have the full Photoshop at your disposal:

• Photoshop Elements (I was told we mustn't call it Photoshop Lite!) which does most of the things a non-pro would use in Photoshop but costs a lot less;

• PicturePlay lets you work with layers, resize, translucency and text, good for flags and maybe combine a paint map with text and features? $15 shareware, you can trial the download. (Sorry, Mac only).
http://www.crescendosw.com/pictureplay.html

• I know I keep saying this but each time I do, someone says "hey, good idea" so ... If you're a Civ III player, try deploying their map editor for some terrain. (Mine: http://homepage.mac.com/lindaparkin/.Pictures/Buddhist%20images/Map%26key.jpg

• Someone else suggested, if you have SimCity 4 you could create a region & terraform it for your terrain. I think this would work well for a region's map, you could allocate squares to nations. :)
Holy panooly
04-09-2004, 11:30
Great suggestions!

Gimp is also a great free imaging program http://www.gimp.org/
Miratha
06-09-2004, 18:57
Tag, could this be done in Paint Shop Pro?
Sarzonia
06-09-2004, 19:12
I have no personal experience with this software, being a Mac user and there being no Mac version.I don't know if that's true. When I worked on my college newspaper, we used PhotoShop for photo manipulation. There was a full-on version for the Mac.

Most graphics design classes use the Macintosh since it has long been the easiest to use for desktop publishing. I realize the PC has made great gains in the last few years, but the Mac has had such a head start that I can't think of very many places that don't have Macs in that role. The only one that immediately springs to my mind is the University of Maryland, University College. I used to be both a computer lab assistant and a desktop publishing teaching assistant and in each case, they used PCs, much to my and the professor I worked with's consternation.
Holy panooly
06-09-2004, 19:27
Photoshop works exactly the same on an apple mac, but the commands are diffirent... Look for a reference chart on google
The Resi Corporation
06-09-2004, 19:50
www.adobe.com you can buy it for $700.
There are also several other less-costly and quasi-legal ways to get it... >_>
Artoonia
06-09-2004, 20:03
Gimp is also a great free imaging program http://www.gimp.org/
And it includes a Render Map plugin, making the process even easier.
Miratha
06-09-2004, 20:09
There are also several other less-costly and quasi-legal ways to get it... >_>
...Which is why Canada is so awesome. In most countries, you have the right to use purchased products and make copies of them, even if (for some other-worldly reason) you're not allowed to use those copies. In Canada, you have the right to distribute any product as long as you own the real thing. So, if I find someone who owns Photoshop (and I do...), I'm fine.
EDIT: Personally, me being lazy, thrifty and uncaring of detail, use AutoREALM. It's a half-decent program, plus it's free. Easy to make continents, if a little bit undetailed. Has wacky fractal lines that are very nice. Search for it, it's pretty nice.
Come to think of it, I've got to re-download that...
Seryown
07-09-2004, 01:59
Another tip - after you're done making the beaches and the shoreline effect, you can go back and place a layer between the background - that is, the sea - and everything else - make it a color burn layer, and fill it. I find that the resulting color and the contrast with the shoreline look much nicer.
Holy panooly
07-09-2004, 08:55
Another tip - after you're done making the beaches and the shoreline effect, you can go back and place a layer between the background - that is, the sea - and everything else - make it a color burn layer, and fill it. I find that the resulting color and the contrast with the shoreline look much nicer.

Excellent input! I'll add this to the tutorial
Layarteb
09-09-2004, 15:17
:: tag ::

MOD-ALERT: Sticky?
Xikuang
03-11-2004, 18:56
I don't know if that's true. When I worked on my college newspaper, we used PhotoShop for photo manipulation. There was a full-on version for the Mac.


Oh, certainly, Photoshop on the Mac is absolutely brilliant, but Paint Shop Pro is for PC only. As is Autorealm. Oh well.