Help with main Civ Icon

[TheManFromMars]

Hi there,

So in short:
1) How do you get the main Civ Icon (when making a custom civ) look like all the other ones in game (with the nice shine and shadows and all?) Is it some sort of layer mask, or are there are mask templates out there to make it look that good, that consistently?
2) What is the Alpha thing I've seen in the Civ XML under where it points to what Icon the Civ uses, is that what I'm looking for? If it is or even if it isn't, what does it do? And why is it needed? I've not been able to figure out what it does.

Extra info and explanation:

Spoiler :

Currently I painstakingly take the image of another in game icon (usually from the promotions) at about the largest icon size required, put it into a icon texture atlas, slowly remove the image on there whilst maintaining that nice reflective look etc. Then alter the color using the colorizing tool (using latest Gimp), then I paste my image (after getting rid of any excess) onto the button and tidy everything up.

The problem is, although I think it looks quite good, it doesn't really fit 100% what the rest of the icon look like. They all seem to have that shine and shadow persisting even over the nations image. So if you look at the French fleur de lis, the very top of it almost blends into the top lighter area of the button/icon.

I suspect the devs didn't do each button pixel by pixel but rather had a generic layer mask that fell over the top of all the buttons/icons in the game - however I cannot locate it - and frankly I'm not convinced I possess the skill to build a quality one from the ground up. With that said I have noticed some other people seemed to have achieved this, okay, so they could have just been much better than me and done it pixel by pixel but they look identical to the in-game icons leading me to believe there is a way to do this.

Is it whatever the 'ALPHA ATLAS' is that I've seen under the Civ XML when defnining art and icons etc? If it is I haven't been able to figure it out and if it isn't, then what the hell is that Alpha thing and why would you need it?

Any help would be greatly appreciated
-Mars

 

[Tomatekh]

I don't use a generic layermask, although I probably should just make one, but it doesn't really take long to make a civ icon from scratch.

-First copy and paste one of the official civ icons to a layer for reference

-Choose a symbol and color it
-Add a drop shadow to the symbol
-Color the background layer
-Merge these three layers
-(Resize if necessary to match your reference layer)

-You'll notice that the official icons have a small ring around them of a slightly lighter color and that doesn't have the glare effect.
-Using the reference layer select a circle the same size as the smaller circle (minus the ring) around your symbol
-Copy this to a new layer

-Make a pure white oval layer, use the reference layer to overlap the previous layer (smaller circle) in the same place/proportion to the glare on the official icon
-Make the white oval layer fade into a transparency going into your symbol. Play around with it till it matches the degree on the official icons.
-Merge these two layers into one.

-Go back to the original background color layer.
-Change it's color to a slightly lighter hue than you originally had.

-Merge your smaller circle + transparent white down onto the lighter background
-Place it into an icon atlas template

It'll look like 95% identical to the real ones.

The Alpha Icons are used for places that uses your the civ symbol but not the actual button you made. (So when the civ symbol appears next to the name of a city on a city bar or when the game needs to recolor the symbol because two players chose the same civ). The Alpha icon is just your symbol all white, over a transparent alpha channel (in whatever size the atlas needs).

 

[TheManFromMars]

Hey,

Yeah thanks for the reply, I posted this on here only to jump back to the other thread and realise you'd responded whilst I had been writing this post

I think a custom Civ Icon template would be hugely helpful for most people - I certainly don't do anything as complicated as what you described, and I think it shows lol but mine certainly aren't bad, just not precise and I've become rather obsessed with makign things look like they fit in. I've done a fair bit of modding for other games and often got annoyed how my artwork didn't fit in, even if sometimes it might be considered better than it's surrounding environment - and when trying to replicate that other artwork I often feel short.

Funnily enough making unit icons and building icons fit in hasn't been too much of a problem for me. I use GIMP for my work and tend to simply add a filter like a canvas or cartoon filter and then desaturate or saturate as needed, and sometimes mess a bit with the contrast. I tend to also try and scale the image correctly, so making the leader's head in the leader icon the same pixels as a leader that is posing in a similar position to my picture etc.

Don't worry about the time frame, we've all got real world responsibilities I must admit though I furrowed my brow reading your explanation of what you did trying to picture it, maybe I'm just tired but I couldn't visualize it, I think a picture tutorial would be helpful - but again that is probably more time consuming than just making a template button in XCF or whatever format and just posting it.

Either of those (button template/tutorial with pics) would be helpful, but no stress. I think a lot of people would appreciate a good Civ Icon template though your right, it is only used for one thing, but it's seen all over a custom civ and is it's flagship button really.

Oh and thanks for the clarification on the alpha button, honestly I just never noticed it, oops, will have to make one.

Cheers again,
-Mars

 

[Putmalk]

Tomatekh, what do you think of these?

 

[trystero49]

Wow nice tutorial. My civ icons now look way better!

 

[Tomatekh]

I must admit though I furrowed my brow reading your explanation of what you did trying to picture it, maybe I'm just tired but I couldn't visualize it, I think a picture tutorial would be helpful - but again that is probably more time consuming than just making a template button in XCF or whatever format and just posting it.

I think I made it sound more complicated than it really is. The point was, instead of placing a symbol on top of a color + glare, place you symbol on a solid color, then make the glare using another layer of all white that you gradually fade down.

In reference to the steps I gave.

-To add a drop shadow. Duplicate the layer. Paint it all black. Change the Opacity to between 50-75. Filter -> Blur it once. Then Layer -> Transform -> Offset like 2
-To do the gradual fade thing. Right click the layer. Add Layer Mask (white or black to full transparency, doesn't really matter just changes what color you use). Select the layer mask. Select the area you want to fade. Then use the Blend tool in the direction to fade (if it fades in the opposite direction, you're using white instead of black or vice versa depending on what you selected for the layer mask).
-The rest of the steps are just cut and paste, or filling in a color.

All this is for gimp, but it shouldn't be that different for photoshop or similar programs I imagine.

Yeah, I'll see what I can come up with next week in terms of a tutorial or template.

 

[Tomatekh]

Tomatekh, what do you think of these?

I actually think they're pretty good. The nice thing about using white symbols is that you don't have to worry about blending them with the shine/glare.

 

[TheManFromMars]

Hey Tomatekh,
Probably should just PM you but was wondering how it's going on creating a default template layer mask or a tutorial - I think the issue with the tutorial you wrote me is that there are not any pictures - I find visual learning and tutorials have more clarity.

Anyway let me know how it's going, cheers anyway for anything you can do when you get the time.
-Mars

 

[Tomatekh]

Hey Tomatekh,
Probably should just PM you but was wondering how it's going on creating a default template layer mask or a tutorial - I think the issue with the tutorial you wrote me is that there are not any pictures - I find visual learning and tutorials have more clarity.

Anyway let me know how it's going, cheers anyway for anything you can do when you get the time.
-Mars

Sorry.

Really, I've just been busier than I expected.

I'll add pictures to the tutorial (as I can put that together really quickly) tomorrow, and then save the actual template for when I have time (so sometime in the future).

 

[TheManFromMars]

Yeah no worries mate, been swamped myself, just realized it was Wednesday, rang a bell and though I'd check Take your time

Thanks again
-Mars

 

[Tomatekh]

edited

 

[TheManFromMars]

Hey
Thanks mate, very nice, you should post it in the tutorials section if you haven't already.

Funnily I'm quite advanced with GIMP techniques etc, at least I feel I am, the problem was mainly that although I could create something that looked like a glossy icon/sphere etc, what I struggled to do was get that 'sharp' shine rather than a rounded shine - so the Civ Icons have a shine more like an eye, the ones I made looked like snooker balls-ish.

This shows how you did it, and I'm face-palming not having thought of it - "it's all so obvious now!" - I wonder how many times that is said when modding games. I mean I was also trying to shade the object from NW to SE to get that realistic shadow look they have, I think I have that now, but I'm excited about sorted that shine out - I was doing something similar, just not quite right.

Thanks a lot, very helpful indeed mate. Hopes this helps others too.
-Mars

 

[Craig_Sutter]

Any tips on how to work with icons that you have already made? I've made about 10 icons for my civs, most cut and pasted from other source material (coat of arms and flags I found via google), so background and icon are already painted. Should I create all the layers as you suggested, and select my icon using fuzzy select, and do the offset shadow and go from there? I'm not certain how to retrofit the methods you suggest with an already created icon.

I'm thinking skip some of the preliminary set up and copy my icon, color it black, and repaste it into the icon and moving it a tad to create the shadow, and then skipping ahead to creating the sheen effect from the reference icon. Hopefully that will work.

That's a bit in the future, but I'll likely be back here asking questions when I start the process.

 

[Tomatekh]

Hey
Thanks mate, very nice, you should post it in the tutorials section if you haven't already.

Funnily I'm quite advanced with GIMP techniques etc, at least I feel I am, the problem was mainly that although I could create something that looked like a glossy icon/sphere etc, what I struggled to do was get that 'sharp' shine rather than a rounded shine - so the Civ Icons have a shine more like an eye, the ones I made looked like snooker balls-ish.

This shows how you did it, and I'm face-palming not having thought of it - "it's all so obvious now!" - I wonder how many times that is said when modding games. I mean I was also trying to shade the object from NW to SE to get that realistic shadow look they have, I think I have that now, but I'm excited about sorted that shine out - I was doing something similar, just not quite right.

Thanks a lot, very helpful indeed mate. Hopes this helps others too.
-Mars

Yeah, I figured you knew how to do most of the stuff in Gimp already, but decided to explain everything in case people who don't really know how at all wanted also needed help.

There are some extra things you can do to make it look better.

Once you get the transparent white layer done, duplicate it and then cut it so that the extra layer only overlaps the very edge of the icon, and then blur the second layer. The official icons have a slight white line around the edge of the ring.

Also, take dodge/burn, set it to burn, make the brush about the size you your icon and then set it to the softest brush. Then burn the bottom right of the icon once under the white layer before you merge down. That'll take care of the slight gradient difference on the bottom.

But really, you don't even notice those two steps half the time.

I do intend to make the template, sometime in the next few weeks, I just seem to be stuck in work that never ends :/

 

[Tomatekh]

Any tips on how to work with icons that you have already made? I've made about 10 icons for my civs, most cut and pasted from other source material (coat of arms and flags I found via google), so background and icon are already painted. Should I create all the layers as you suggested, and select my icon using fuzzy select, and do the offset shadow and go from there? I'm not certain how to retrofit the methods you suggest with an already created icon.

I'm thinking skip some of the preliminary set up and copy my icon, color it black, and repaste it into the icon and moving it a tad to create the shadow, and then skipping ahead to creating the sheen effect from the reference icon. Hopefully that will work.

That's a bit in the future, but I'll likely be back here asking questions when I start the process.

Well, actually you can really skip the drop shadow part. I do half the time and you never really notice unless you're directly looking at that one civlopedia entry and even then really only when comparing it to other icons.

If you already have the icon colored on the background color you want, I'd just start at step 9ish and go about adding the white layer and making the lighter ring.