[Graphics] Happy Map Tutorial (Photoshop)

Happy Map Tutorial (Photoshop) - Printable Version

+- Save-Point (https://www.save-point.org)
+-- Forum: Games Development (https://www.save-point.org/forum-4.html)
+--- Forum: Tutorials (https://www.save-point.org/forum-19.html)
+--- Thread:

Happy Map Tutorial (Photoshop) (/thread-173.html)

Happy Map Tutorial (Photoshop) - Shiroiyuki - 06-03-2010

Doh!

*****************************************************************
HAPPY MAP TUTORIAL (PHOTOSHOP)
********************************************************************

Disclaimer

Open a new layer -- 640 x 480, transparency for background. Call this 'Water'.

Pick a pretty blue and fill it in with the paint bucket. Let this layer sit, we'll come back to it.
[Image: map1r.png]

Make a new layer -- call this 'Land'. Land is on top of water so the layer should be ON TOP of the water layer, too.

Fill this in with any color. You heard me, any color. It doesn't matter because in the next step it's all going to be moot anyway.

Go up to the toolbar and find 'Filters'. Select 'Render -- Clouds'.

You will see some blurry clouds where your random color once was. See what I meant by any color will do? Doesnât matter.
[Image: map2g.png]

Go to filter and play around with the different options if you like at this step. I chose to give it a slight ripple effect here.

Go back up to Filter and select 'Brush Strokes -- Sumi-e'. Play with the stroke width and whatnot until you get something roughly like this:

[Image: map3g.png]

Go to Filter and select 'Sketch -- Reticulation'. Play with these settings. If you want some specific land mass structures here (and not 'random' ones), make sure to use your paint brush before this step so everything gets that soft look to it.
[Image: map4c.png]

Go to Filter and select 'Distort -- Ocean Ripple'. Play around until you get a map base that looks pleasing to your eye. Basically this one shifts the land masses slightly, depending on the settings. You can pinch them, too, and make some pop out more.

[Image: map5u.png]

Go to the Layer Options for this Land layer and give it a color overlay so that the land looks like land.

[Image: map8.png]

Get your Magic Wand tool out and start selecting non-land areas. The darker of the two I choose to be 'non-land' in this case. Hit DELETE once you have a selection, then systematically go around and choose places to kill. Little bits of dark spots, islands you may not want, etc. Clean it up with the erase tool if necessary.

[Image: map6o.png]

Go on up to Filter again and this time select 'Blur -- Gaussian Blur'. By default you'll probably have a horrible mess on your hands. We only want a SMALL AMOUNT OF BLUR here -- I went with 0.2.

This is only going to fuzz up the harsh lines.

[Image: map7.png]

Here is where you'll have variation. You can duplicate the Land layer and play around with layer properties/effects, textures, embossing, shadows, gradients, etc. until you like what you see. Aim for a realistic map or one that is more stylistic, it doesn't matter. Whatever suits your game.

Do the same thing with the Water layer to put in some shadows, ripples, details, etc.

This was my end result here:
[Image: map9.png]

You can see from this tutorial that with effort and a general ability to play with filters and be cool, you too can have beautiful maps for your game. Cheers!

Q&A:

Q: Damnit, Shiro! I wanted to see the layers at the end â how do you do all that?
A: I omitted this part because, a) Iâm lazy, b) This is where the inner artist comes out to play and I didnât want to stifle the creative beast you have hidden within your soul, yada yada yada, and c) Iâm lazy. You, too, can have these results by playing with the built-in filters and layer options.

Donât be like Shiro, children; laziness kills.

Q: Can you make me a map? Pretty please with cherries and everything?
A: No, why do you think I made this tutorial? Go be your own map-maker!

Q: I donât have Photoshop....can you make a tutorial for GIMP?
A: I donât have GIMP nor do I need it so...no. Most of the time photo-editing software share the same basic tools so you can most likely follow along if necessary. *shrugs*

Happy Map Tutorial (Photoshop) - Shiroiyuki - 06-03-2010

More examples of what you can get by tweaking the components.

Choose different color combinations before using the Clouds filter and you get different patterns. Foreground AND Background color create different outputs and designs, so play around!!!

These only took a few minutes or so...(I copy/pasted the existing texture layer styles from the first one and tweaked them there after). You can crank out SEVERAL MAPS IN VERY LITTLE TIME USING THIS TECHNIQUE. Seriously.

Different patterns, different shape:
[Image: map10.png]

Some green cartoonish-ness for you ^^:

[Image: map11.png]

No fancy paint work required. Optional, certainly, but not required.

Happy Map Tutorial (Photoshop) - deValdr - 06-03-2010

This is AWESOME!

Happy Map Tutorial (Photoshop) - Kristovski - 06-03-2010

I have thoroughly enjoyed this tutorial.

Happy Map Tutorial (Photoshop) - ovan35 - 06-07-2010

I fiddled around with stone textures and a few settings as far as filter and got a nice map.I added the map to this post just to show ya.Thanks for the tutorial.
Sorry for taking up so much space if someone can tell me how you make collapseable content I will be glad to edit it.

[Image: dragora_map.jpg]

Happy Map Tutorial (Photoshop) - Shiroiyuki - 06-08-2010

That looks awesome!!! Thanks so much for posting your results ^_^, it makes me happy to know I could actually help someone.

Happy Map Tutorial (Photoshop) - Ace - 06-08-2010

nice! And ovan35, you can use spoiler tags for pictures^^ just write

Code:
[Spoiler]Paste here the Link of the Image[/Spoiler]

Happy Map Tutorial (Photoshop) - Shiroiyuki - 06-08-2010

Yeah, but the picture is totally small enough to not distract from the tutorial or thread so I say just leave it as is ^_^. It looks nice!

If anyone else wants to post their results I encourage it!!!!!

Happy Map Tutorial (Photoshop) - Ace - 06-09-2010

yeah of course it is alright, just wanted to tell him how to use spoilers if he has more or bigger pictures or stuff like that =D

Happy Map Tutorial (Photoshop) - MagitekElite - 06-25-2010

That's so weird...I could have sworn I posted in this before! Indifferent

Anyway, not only will this help with my game, but I needed to know how to make maps for my book. >.>

Thanks, Shiroiyuki! Helped a lot!
Grinning