Jump to content


Photo

Button Image Background


Best Answer Rider of Rohan, 27 October 2016 - 05:37 AM

Alright I'm going to try to explain how to do this via Photoshop, hopefully it can be done in a similar fashion in GIMP.

(You can enlarge the pictures by clicking on them or opening them in a new tab)


Open a blank 64x64 size template and place your icon with the background ready, if you've already merged the layers together and just import that as a new layer that's fine as well.


Now head to your Channels tab


Since this is a fresh picture an Alpha channel is non existent, so we have to create one, in Photoshop it's just making a new layer in the channels tab. (Everything in Red is alpha, so at the moment the whole thing is covered in alpha).


Now be sure the alpha layer is selected and I erase the alpha parts covering Isildur's main body, since this is what we want to see in game.


Once that's done,it's time to export. These are the export settings for DDS and TGA that I use to retain Alpha information for buttons.


Now windows lets me know that there is an active alpha channel immediately by hiding the sky, and when I open the button in a dds viewer the background itself is also still there. So this is how the icon would show up in game both at the on field selection and purchase selection ui.

Hopefully this helps, normally I'd do a better job on the icon and it's channel but this is just for demonstration anyway.

Go to the full post


  • Please log in to reply
4 replies to this topic

#1 malvack

malvack
  • Members
  • 36 posts

Posted 24 October 2016 - 08:06 PM

I know this is very noob, I'm sry, but I am struggling with new button images for Heroes. So I have a new hero with custom-ish textures (I used the CaH engine) and I created his portrait with no problems. Now I did his image but I cannot quite figure out how to make it work. If I create an image with a background, when I purchase my hero from the fortress, the image looks good, but when he is created, the button image of the hero still has the background (in the lower part where builders and heroes are). On the other hand, when I create an image with no background, that problem is solved, however, when I want to purchase my hero, the image has a white background that I don't like.

 

I was looking at the dds files of the game and I am perplexed, for I don't get it. If I open the file with PP, Gimp, or Paint.Net the icon of say, Morgomir, has no background, BUT if I open it with Nero PhotoSnap the exact same image does have background  :blink:  :blink:

 

I have no idea what to do. Plz help.

 



#2 MattTheLegoman

MattTheLegoman

    LEGO Knight of Minas Ithil

  • T3A Staff
  • 3,669 posts
  • Location:Tomorrow, when the War began
  • Projects:Mapping this Middle-earth
  •  Mapper
  • Division:BFME
  • Job:T3A Staff

Posted 25 October 2016 - 02:08 AM

This is because it does have an alpha channel. You can check the alpha mask in GIMP by going to the channels tab.

Remember that all worlds draw to an end and that noble death is a treasure which no one is too poor to buy. - C.S. Lewis

There will come a time when you believe everything is finished. That will be the beginning. - Louis L'Amour

What will matter then will be people. If relationships will matter most then, shouldn't they matter most now? - Max Lucado


#3 malvack

malvack
  • Members
  • 36 posts

Posted 27 October 2016 - 03:19 AM

Thank you, but I quite can't still do it =(

 

I looked at the alpha channel but all I see is that there are 4 channels (R,G,B, and alpha). Every layer, including the alpha one, is nothing but their respective layer in the image (i.e. if I shut down the view of the blue and green layer, all I have is the image in only shades of Red, which makes sense to me). If all the layers can be viewed and I shut down the alpha channel, the image dissapears. If I close all the layers except the alpha one, all I have is the black silhouette of the image (I also get why this happens). But, in none of the layers is the background.

 

However, I still can't see the layer of the background of the image, no matter which combination I try. The only thing I found, and I don't know whether this is relevant, is that, in the layers section of GIMP, there are 7 images (the first is called "main surface", the next one is "minimap 1" and so on 'till "minimap 6"). The images are the exact image (with no background) but they get shorter and shorter.

 

Look, I only want to have a personalized button image of my hero that works like the normal ones. So I don't know if there's a tutorial I can look for (I mean, I have searched a lot, but haven't found anything yet), or if you or anyone can explain me how to do that with GIMP.



#4 Rider of Rohan

Rider of Rohan

    The Lazy Modder

  • Division Leaders
  • 1,555 posts
  • Location:The Caribbean
  • Projects:Age of the Ring and the HD Editions
  •  Mathijs' Bug fix expert
  • Division:BFME
  • Job:T3A Leader

Posted 27 October 2016 - 05:37 AM   Best Answer

Alright I'm going to try to explain how to do this via Photoshop, hopefully it can be done in a similar fashion in GIMP.

(You can enlarge the pictures by clicking on them or opening them in a new tab)

IconinPhotoshopStep1.jpg
Open a blank 64x64 size template and place your icon with the background ready, if you've already merged the layers together and just import that as a new layer that's fine as well.

IconinPhotoshopStep2.jpg
Now head to your Channels tab

IconinPhotoshopStep3.jpg
Since this is a fresh picture an Alpha channel is non existent, so we have to create one, in Photoshop it's just making a new layer in the channels tab. (Everything in Red is alpha, so at the moment the whole thing is covered in alpha).

IconinPhotoshopStep4.jpg
Now be sure the alpha layer is selected and I erase the alpha parts covering Isildur's main body, since this is what we want to see in game.

IconinPhotoshopStep5.jpg IconinPhotoshopStep6.jpg
Once that's done,it's time to export. These are the export settings for DDS and TGA that I use to retain Alpha information for buttons.

IconinPhotoshopStep7.jpg
Now windows lets me know that there is an active alpha channel immediately by hiding the sky, and when I open the button in a dds viewer the background itself is also still there. So this is how the icon would show up in game both at the on field selection and purchase selection ui.

Hopefully this helps, normally I'd do a better job on the icon and it's channel but this is just for demonstration anyway.


99dxc486ltde132zg.jpgh5je9noaofg3o26zg.jpg

No parent should have to bury their child - King Theoden


#5 malvack

malvack
  • Members
  • 36 posts

Posted 27 October 2016 - 06:29 AM

THANK YOU, THANK YOU, THANK YOU!!!  :xcahik_:  :xcahik_:  :thumbsupdrool:

You are awesome, I've been struggling for quite a long time. Massive respect.






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users