Graphics Tutorial by Sauffaus

[Sauffaus]

I have been asked to describe how I produce graphics for my maps (http://knucklecracker.com/creeperworld/viewmaps.php?author=Sauffaus).

Well... the problem is, that I do hundreds, if not thousands of operations, which makes detailed descriptions almost impossible to write. So, I'll do the next best thing; Upload one of my working PhotoShop-files for inspiration. With this in hand, you might analyze it yourself, and get a feeling for how things are done.

I have chosen to post my "Golden Shores" work-file, plus the final exported image from that, as this probably best demonstrates both basic and advanced techniques alike. In the future, I might add more files, as I make maps... there could be elements you can reuse in your own maps for interesting results.

The only written description I'll offer, is how to start:

• Create a map in the editor, and make sure all the game-mechanics are finalized, before you start making graphics.
  HINT: You can't change any elevations in the editor, after you have started graphics. But you can change non-elevation-related stuff later.
  


• Make 6 separate screendumps from the editor:
  One dump from each of the 5 elevations (without borders) + a dump of just the borders.
  HINT: I usually start by importing a flat gray background to the editor, and delete all walls and game-objects, before doing the screen-dumps.
  Oh, and you should move OC + Rift to a spot where they become easy to delete in PhotoShop.
  You separate elevations in the editor, by setting "LevelX tint" to "2" for current elevation, and "0" for the other 4 elevations.
  Borders are captured by setting all "Tints" to "2".
  


• Copy these 6 screen-dumps into separate layers in PhotoShop. Align each one to the grid provided in my file.
  Delete the black parts of each layer, so the current elevation becomes pure White-on-transparent. Delete OC+Rift as well.
  Now extend the white border-pixels in each layer, so they reach the actual document-borders (Use the normal pen-tool for this).
  


• Now you can begin your pixel-juggling ... look at my files, to get some ideas.
  HINT: First place to look: "Layers Palette > Elevations-folder"... which is where most of the magic happens.
  

TIP: I was asked; What tools in PhotoShop I use the most, and the answer is: "Layer Effects" (actually named "Layer Styles" these days)... I dug up this nice little explanation for how Layers are controlled: http://www.photoshopcafe.com/tutorials/layers/intro.htm

A note on saving output-images from my file:
In order to promote preciseness, I added a 10 pixel "system-space" all the way around the image-area's borders (= 20 pixel extra in both width and height of the photoshop-file, as compared to what a final image should be). I use this space for grid-coordinates (look in "Layers Palette > Coordinates-folder"), and for extending all Elevation-pixels beyond the final image size, in order to cut-off some unwanted border-effects, and so forth. This means, that when you are ready to save your image, you should follow this procedure:

• "File" > "Save for Web & Devices" ... A new window appears
  
• Make sure, that the output-format (upper right corner below "Save, Cancel, Done") is set to "PNG-24".
  
• Look in the preview-window, and make sure that "Slice 03" is active (small blue icon plus orange border).
  
• When the above checks out, hit "Save"...
  

I hope this helps someone to produce cool graphics... I can only offer one general advice: Be patient, be anal and be bold!

PS: In this thread, you are welcome to ask questions about the content of the file(s) and the techniques, and I'll try to explain (If I can find the time  :-\).

[thepenguin]

Is there any way to do this without photoshop?

[Echo51]

You could use GIMP or Paint.NET, but its rather different procedures kinda

[Sauffaus]

Is there any way to do this without photoshop?

... Yea... I know GIMP is able to open .psd-files. I'm just not sure how good a job it does. Especially the dynamics in "Layer Styles" is a big questionmark. On the other hand, I'm very pro open-source, and I know that GIMP is used professionally as well, so it might be a good bet.

You could perhaps try it out, and return here with your findings, so others can get an idea for GIMP's compatibility with my files?

EDIT:
I just installed GIMP, and opened the .psd-file ... I opens, and all layers are there... but the Layer-organization and every "Layer Style" is lost, which effectively renders the .psd-file 70% useless in GIMP. Sorry!

[SPIFFEN]

UpperKEES and MadMag 's ways to make custom maps should also be added to this / or an thread like this ,
so it could be an complete guide for custom map background graphics thread .

Then there is more options of how to make graphic backgrounds , and it's easy to find =)

[Sqaz]

I just tried GIMP for ma map (Which's now waiting to be uploaded), and I found it easy to use, which means a lot cause I've never used any photoshopping thing before.
My map might not even be half as beautiful as Sauffaus his maps, but it's usefull for people that just want every elevation to be a different picture or color, and don't want to use photoshop.

[UpperKEES]

UpperKEES and MadMag 's ways to make custom maps should also be added to this / or an thread like this ,

My simple way of trying to create a nice looking map can't be compared to the great graphics that Sauffaus and MadMag have made, but I've described here roughly what I do. The only thing my approach has in common with both others is that I isolate the various terrain levels by adjusting the level tint and then make screenshots. I never used a professional program to apply special effects though; I just copied some textures onto parts of it.

[thepenguin]

how does this look?

[Sauffaus]

how does this look?

Technically, it looks absolutely correct, as the graphics fits the elevations "to-the-pixel" in the editor, good work.

Now you could add some effects on the edges of your layers if you like. You will be amazed of how a relatively small amount of pixel-work, will lift your map to higher plane of existence :)

HINT: If you are in GIMP, I recommend that you "lock" the transparency of your layers, so you won't, by accident, get to draw outside the actual elevation.
There is also a whole set of tools meant to "keep you inside limits" as well... probably named something like "Selections".

[thepenguin]

actually, that was done in windows paint (yes, start>all programs>accessories>paint), microsoft publisher and microsoft picture manager

[Sauffaus]

The easy and short story:
When I make a map I always start in Photoshop (PS CS5 Extended), I open up my custom made .psd grid file. Make 5 layers (1 level dark, 2 level brighter, 3 brighter than 2 and so on til I get to level 5 witch is the brightest. Then I just use the selection tool to erase or the selection tool to select and fill with color to shape the terrain.

Interesting approach. As I understand it, you actually start by drawing a map in PS, and only after that, you make the editor's elevations match your image.

But doesn't that give you problems. I mean, if you realize (after playing your map) that some elevations need to be changed. Or, do you have a whole "circular" way of working, where you draw in PS, export to editor, make elevations, deploy, play map, go back to PS and tweak... ad infinitum?

A second thing. I'm curious as to your .psd-file. It is 1050x720 pixels, while I think the size of CW's game-window is only 700x480 pixels (in optimal size). Is this size-choice of yours deliberate... do you know something about CW's image-handling that I don't?

Anyway, I love your graphics, which in many ways seem more "modern" than mine... I'm kinda "old school" I guess :)

[UpperKEES]

Great to see all this useful info together! Let me add Romkyns quick tutorial as well, so it's complete.

Thanks to you as well, MadMag! :)

[Sauffaus]

.. I assume you use a lower dpi than me

I'm sorry to correct you MadMag, but "dpi" is a print-term, meaning Dots-Per-Inch, which describe a physical printers resolution in "number of ink-dots per inch on a output media"... A computer-screen doesn't spew dots of ink, so the term here is "ppi", meaning Pixels-Per-Inch, which is what a computer-screen uses for displaying images.

Anyway... "ppi" has no consequence for images made on a computer for a computer ... wether you use 72 ppi, 200 ppi or 300 ppi, it only affects PhotoShops internal converting of length-measurements into your preferred measurement-system (cm/inches etc.).

To make a long story short: A pixel is a pixel... no matter how large or how small PhotoShop think it is! And I tell you, that you are missing pixel-precise-control in your graphics, because a pixel in your image is not a pixel in CW... every one of your pixels become down-sampled to 0.66 of a pixel in CW.

So the "zoom-for-greater-detail" idea you describe, is a wet dream, and just plain wrong.

I'm sorry to get all anal about it, but I think you should get your facts straight, before telling other ppl how things are.

[Sauffaus]

sorry, I mean ppi.. works so much with dpi at work so its easy to mix..

No problem to me... but in a tutorial-thread I think all information has to be spot-on correct. Otherwise you send novices on a wild goose-chase on wikipedia, and foil their efforts to understand the essentials.

When I'm using 300ppi on 1050x720 and turn the ppi down to 200 ppi I get 700x480 :)  So.. I have a bigger picture with greater detail when im working on the map.

Mmmm... this is still not correct, no matter how you put it.
You can never get "more detailed" than a pixel... and when you try to do so, you actually lose detail in the final output, due to resampling.
I really recommend, that you (and everybody else) work 1:1, as that is the only way to know, that a pixel in your work-file, is a pixel in CW.

The whole upscale/downscale line-of-thought stems from print-work, and has absolutely no merit in screen-graphics.

btw.. anal is nice.

hehe... yea :D

[Sauffaus]

Sure... everybody can work precisely as they see fit... All I'm saying, is that 1:1 is optimal, and any other scale is suboptimal, in more ways than one.

EDIT:
I just realized, that this whole thing about 1:1 and pixel-sizes, might seem like I'm saying; "never zoom in, but always work at a 100% view". That is, however not what I'm saying. By all means zoom in all you need. I myself happily zoom in at 800-1600% while tweaking individual pixels.

What I'm saying is this:

• Your image must be 700 pixels wide and 480 pixels high.
• Never use a higher (or lower) resolution, because the end-product in CW is precisely that. And by changing resolution (resampling), you will lose details.
• Disregard everything you read about ppi-settings, as it mean nothing for screen-graphics.