Any UI icon tutorials?

[AW Arcaeca]

I'm fine with making icons. I do all of them myself. But a UI icon? Every single one has to have that same background shade of dark blue with the same shading gradient - and somehow you have to take the model and turn it into a 3D-Looking pure white model for the icon. I'm not good enough with art to do that.

So, I couldn't find any tutorials on making them in the tutorials section. Is anyone aware of any? Does anyone know that shade of blue I need to use, the opacity of the gradient, and/or a simple process to get the white model of the improvement?

You don't get to be very creative with improvement icons.

 

[TPangolin]

As an alternative, you could always look through the Policies over at the online Civilopedia to see if anything matches your design.

 

[whoward69]

Does anyone know that shade of blue I need to use, the opacity of the gradient

There are four "empty" icons at the end of the 256x256 promotion that just have the blue background, I start from one of those.

 

[AW Arcaeca]

My first try:

Spoiler :

It looks sort of awful.
I basically took the Great library from civ4 , put it in Gimp, colorized it to make it whitish, used Filters > Artistic > Cartoon to enhance the edges, then deleted the edges, and copied and pasted it into the blue background.
I'm assuming there's probably a better process to be using? It looks nowhere near the quality of these...

 

[Nutty]

You're almost there, but to get to the quality you want, you'll need to do a little tracing over and shading.

 

[AW Arcaeca]

:/ My next try, when I added a drop shadow before resizing the model:

Spoiler :

I did manage to get a better pic of the GL - a screenshot from the paused wonder movie from Civ4:

Spoiler :

It still looks a bit... pixely. It also seems like the model is the wrong shade of whitish. Any ideas on how to make the model look more... I don't know how to describe it smooth? Maybe should I remove the columns inside the upper floor? Or just not remove the edges at all?

EDIT: Aha! It works much better to not remove edges, but just colorize it to a whitish color then use Brightness/contrast. The result:

Spoiler :

 

[regalman]

To get them to be more like civ 5 icons, use blender or other 3d cad programs

 

[Wodhann]

Yeah the best way is to build a simple 3d object, or to use an existing renderized 3d picture that's significantly simple. Then edit in photoshop.

regalman, I would advise you to up the contrast a little bit on your picture though.

 

[regalman]

its better with more contrast
thanks, wodhann