Unit Portrait Tutorial

[wowgetoffyourcellphone 6.904]

 1. Here is the standard background I use:

 

2. Taking a screenshot of the unit in Atlas with the "Big Screenshot" option, it looks like this (note, I use a custom scenario map with a bright ground texture for ease of cutting in Photoshop)

 

3. A. I cut the unit out of the background, B. copy the unit into a 2nd layer (this is important), C. resize it to 256x256, D. then add the background texture at the top of this tutorial. E. From there I adjust the Layer Styles (effects) of each of the unit layers to give the final product. This is what the file looks like for me:

 

4. These are the layer settings I use. First, to get that nice brownish background glow (THIS IS WHAT IS MISSING FROM MANY OF THE NEWER PORTRAITS IN THE GAME):

 

5. Here, I create the drop shadow effect:

 

6. Sometimes I add a subtle Bevel and Emboss to help the unit stand out a bit from the background. THIS IS SUBTLE, and usually used on a unit with dark edges, like dark hair or a dark horse. Sometimes I don't even use it.

As an example, I used this effect to make the Balearic Slinger's head stand out a bit more, otherwise it would have blended into the drop shadow.

Spoiler

 

5. Here is the final product:

Further Examples:

Spoiler

unit_portrait.psd

Edited May 14, 2020 by wowgetoffyourcellphone

[Lion.Kanzen 4.977]

I copycat your technique since beginning. But there some icons in the game (vanilla) that weren't worked properly example actual Haststi unit.

[Carltonus 68]

11 hours ago, wowgetoffyourcellphone said:

 

The new Athenian cavalry images look great.

Have the images of the Carthaginian siege engines (ballista and oxybeles) been updated in the main game for next alpha? Currently they're not unlike the other factions that have them.

Edited May 15, 2020 by Carltonus
Fix, checked Delenda Est and the ship images are updated

[m7600 1.184]

Very useful tutorial, thanks for making it. I followed your method and I made this (had to change a few of the steps since I used Gimp, but I think my result is close enough). I used the Kushite textures from the game, all I did was add another cloth pattern to the dress.

[wowgetoffyourcellphone 6.904]

That's pretty close. The only difference I see is that my example has some intentional dithering/noise in the background glow, while yours is a smooth gradient. In step 4 you'll see the noise slider is set to 30% on the orange glow. It makes the background have a bit of grain to it and looks a bit less photoshoppy than a 100% smooth gradient. 

Edited May 19, 2020 by wowgetoffyourcellphone

[m7600 1.184]

@Stan` asked me to provide a tutorial for Gimp. Since the general idea/workflow is not that different, I thought I could append it here instead of making a separate thread.

1) The first step is to start with the standard background.

2) Step two is the same as well. If for some reason you don't want to use Big Screenshot, you can just zoom in and take a regular screenshot by pressing Print Screen on your keyboard. And if you don't have a custom scenario map, just use the default one. I don't recommend doing either, you'll end up giving yourself more work than necessary, you should do it as @wowgetoffyourcellphone did it. But, just for the sake of doing it different, let's use Print Screen and the default scenario map.

 

3) Now let's run Gimp. Open the screenshot, and start to remove the background. If we had followed @wowgetoffyourcellphone's recommendation, this step can be done quickly. But since we're making it unnecessarily hard for ourselves, we'll just have to dive in and do some pixel surgery. First, crop the image to remove most of the background. Then you can use the Free Selection Tool (the icon is a lasso) to get rid of the larger chunks.

 

4) Use the Pencil Tool, set the size to 1 pixel, and carefully erase any remaining background pixels. Copy the image, open the standard unit background, and paste the image as a new layer. Add a Drop Shadow. It's in Filters -> Light and Shadow -> Drop Shadow. Set the Offset X and Offset Y to 0, the Opacity to 75, and uncheck "Allow resizing". For the Blur radius, 15 might be too low, you'll have to experiment with this stetting. Gimp will automatically create the Drop Shadow effect on an new layer.


5) Gimp version 2.8 doesn't have an Outer Glow option. I don't know if more recent versions have it, or if there is a plugin. Anways, you can recreate that effect with another Drop Shadow. Just set the color to orange, and increase the Blur radius to about 100, set the opacity to 100.



6) The result will be automatically placed on an new layer. Go to that layer, and set the mode to "Screen". Set the opacity of that layer to 50. Here is the final result:




All that would be left to do now is to recreate the noise effect. You can also tweak the image as you go along, for example at some point I duplicated the image of the model and set that layer to Overlay mode, just to get some soft glow. I think I also used a Color mode layer at the end to get some extra orange on the dress.

Anyways, hopes this helps.

 

 

Edited May 19, 2020 by m7600
Fixed some stuff

[Stan` 7.200]

Made another attempt at Themistocles using your background

athen_themistocles.xcf

gaul_brennus.xcf

[Stan` 7.200]

Looks like I had another one lying around

rome_marcellus.xcf

[wowgetoffyourcellphone 6.904]

2 hours ago, Stan` said:

Looks like I had another one lying around

rome_marcellus.xcf 730.2 kB · 1 download

[Stan` 7.200]

Yeah I noticed afterwards that my glow should be black

[Lion.Kanzen 4.977]

4 hours ago, Stan` said:

Made another attempt at Themistocles using your background

athen_themistocles.xcf 648.73 kB · 1 download

gaul_brennus.xcf 624.94 kB · 0 downloads

Woe change the concept , that is the old. Now is very different. But there some portrait with wrong technique in the repo.

[Lion.Kanzen 4.977]

@Stan`

Edited May 31, 2020 by Lion.Kanzen

[wowgetoffyourcellphone 6.904]

For techniologies, Delenda Est uses slightly different background glow (bluish):

 

Result:

[Lion.Kanzen 4.977]

28 minutes ago, wowgetoffyourcellphone said:

For techniologies, Delenda Est uses slightly different background glow (bluish):

 

Result:

@Stan` which you prefer?

[Stan` 7.200]

9 hours ago, wowgetoffyourcellphone said:

For techniologies, Delenda Est uses slightly different background glow (bluish):

 

It was supposed to be for the rice field do you have a special background for structures too ?

[wowgetoffyourcellphone 6.904]

54 minutes ago, Stan` said:

It was supposed to be for the rice field do you have a special background for structures too ?

No, entities had the orange glow, while techs had the blue glow.

[Stan` 7.200]

Maybe you have a better icon for the rice field though. I didn't want to fall into the rice bowl cliché and the plant itsefl looks too much like the normal field.

[wowgetoffyourcellphone 6.904]

The rice paddy is just a replacement for the barley field right? No reason why they can't share icons.

[Stan` 7.200]

18 minutes ago, wowgetoffyourcellphone said:

The rice paddy is just a replacement for the barley field right? No reason why they can't share icons.

Some wanted to make it a special building to show both existed

[m7600 1.184]

In Atlas, if you use the Actor Viewer instead of the Game View, you can take a screenshot of the unit while it's performing an action, such as attacking. The only problem is that you can't use Big Screenshot (the program will crash if you do), but you can take a regular screenshot with the Print Screen key. Here are some examples: