I have been asked to describe how I produce graphics for my maps (http://knucklecracker.com/creeperworld/viewmaps.php?author=Sauffaus (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 (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 :-\).
Is there any way to do this without photoshop?
You could use GIMP or Paint.NET, but its rather different procedures kinda
Quote from: thepenguin on August 17, 2010, 07:22:38 AM
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!
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 =)
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.
Quote from: SPIFFEN on August 17, 2010, 08:44:15 AM
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 (http://knucklecracker.com/forums/index.php?topic=3642.0) 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.
how does this look?
Quote from: thepenguin on August 19, 2010, 09:30:01 AM
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".
actually, that was done in windows paint (yes, start>all programs>accessories>paint), microsoft publisher and microsoft picture manager
Quote from: MadMag on August 20, 2010, 11:36:24 AM
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 :)
Great to see all this useful info together! Let me add Romkyns quick tutorial (http://knucklecracker.com/forums/index.php?topic=2169.msg18604#msg18604) as well, so it's complete.
Thanks to you as well, MadMag! :)
Quote from: MadMag on August 20, 2010, 01:27:49 PM
.. 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.
Quote from: MadMag on August 20, 2010, 02:54:58 PM
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.
Quote from: MadMag on August 20, 2010, 02:54:58 PM
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.
Quote from: MadMag on August 20, 2010, 02:54:58 PM
btw.. anal is nice.
hehe... yea :D
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.
how do these look?
@ ThePenguin: I've now asked you several times in chat: stop posting bullsh*t in map comments and useful topics. When you still continue I'm sure you do this on purpose.
Quote from: MadMag on August 21, 2010, 07:25:36 AM
working 1:1 is pain in the ass... to small
My solution to this is to temporarily adjust my screen resolution (from 1920x1080 to 1280x720) when I work on a CW map, as the map editor doesn't resize.
Faster to edit that in PS.
Well, the nice thing about adjusting your screen resolution is that every application on your screen will be larger in a lower resolution. ;) Besides that you can't edit the map itself in PS....
I've been playing around with graphics myself lately and found you can do everything you need with GIMP (http://www.gimp.org/) (free!), so no need for PhotoShop or other expensive programs.
As an example I changed this map:
(http://knucklecracker.com/forums/index.php?action=dlattach;topic=978.0;attach=845;image)
into this one:
(http://knucklecracker.com/forums/index.php?action=dlattach;topic=978.0;attach=1936;image)
Use of various terrain textures like Sauffaus and MadMag did is also possible, as I will show in my future maps.
You have to be willing to spend some time reading and learning how to apply the wide variety of possible operations and the order in which you use them though. This will probably take a few days. After that the graphics of your first map will most likely cost a few hours, but you'll be able to work faster with the next ones after gaining some experience.
I see birds... am I supposed to see birds?
Quote from: Gaara on November 24, 2010, 01:38:12 PM
I see birds... am I supposed to see birds?
It's based on the painting 'birds' by Escher, so yeah, you are :)
Quote from: MadMag on November 26, 2010, 03:48:44 PM
Not bad! You are begining to get "my" soft edges on the map :)
Oh, sorry MadMag, I completely overlooked your comment previously.
Yeah, there are still a lot of things I like to improve. A few of them are:
1. Blending various textures with each other. I guess I have to use 'soft' selections for that with partially transparent borders?
2. Getting rid of some very dark pixels after applying custom shading / 3D effects, like you can see at the bottom side of the higher terrain levels of the second screenshot above. I probably have to use soft selections for that as well?
3. I have some problems with rounded edges in combination with 3D effects. When I merge the layers you actually want to let the top layers to overlap the lower ones, so the transitions between the different elevations look better. When they don't overlap you would see the edge of i.e. elevation 4 first go down and then suddenly up to elevation 5. My solution is to grow (extend) all non-transparent parts with for instance 3 to 5 pixels. This looks very nice, but leads to problems in one case: narrow passages and tiny details of lower elevations almost disappear. How do you guys solve this?
Any help/advise is kindly appreciated! :)
Edit:Quote from: Sauffaus on August 15, 2010, 08:47:44 AM
Make 6 separate screendumps from the editor:
One dump from each of the 5 elevations (without borders) + a dump of just the borders.
What do you use the border dump for? I used an outline selection (that I store separately as a channel) for each layer, but I can image that I'm missing something.
I used the map template to create custom graphics with GIMP. It workds pretty well, but you have t remember to save them as a .png file, not an .xlf, or it won't work (As far as I know).
Quote from: UpperKEES on August 21, 2010, 10:06:37 AM
@ ThePenguin: I've now asked you several times in chat: stop posting bullsh*t in map comments and useful topics. When you still continue I'm sure you do this on purpose.
Quote from: MadMag on August 21, 2010, 07:25:36 AM
working 1:1 is pain in the ass... to small
My solution to this is to temporarily adjust my screen resolution (from 1920x1080 to 1280x720) when I work on a CW map, as the map editor doesn't resize.
well that escalated quickly.
on another note, I've been able to draft my dad into helping me learn how to do this stuff... he's a landscape architect and as such does a lot of this stuff :)