Import "normal pictures" and use text for buttons


I am pretty new to UE4 and have 2 main questions. I designed an UI in Photoshop and sliced all elements and saved them as .png-file.

After uploading them via drag and drop to my project I have to save them as textures.
In the “Designer” I am using an image-object and link my created textures (.png pictures) to it and set the option “Size to content”.
However, I noticed that the size is much smaller than in photoshop although the dimension for x and y are the same. This drives me really crazy…

2nd question: I created an image for a button and wanted to add a text to it. There is a green box around my text. I am using the font size 12 and the text is much smaller than the green box around it. I am not able to make the green box smaller and after dragging the text on my button, the size of the button is messing around because the green box seems to be too big.

Sorry for my bad English but I hope you can understand and help me - would be really nice!

Hello, working with UMG (that’s the short for all user interface stuff) looks like creating a web page and in many ways it is like that. But in other ways it is fundamentally different and can be very complex and stubborn. There is lots of documentation out there. I like those video tutorials a lot:

For your problems it is hard to tell what is going on. It could be a lot of things. One important aspect of UMG is the “parenting” of elements. When you set “Size to content” you need to set it in the parent of the element you put your images in. Then you need to set the images to the size you want them to be. Also make sure that no other parents have different settings and preventing the image to have a certain size.

For your button. Same problem. Maybe you have to wrap the button with a size box and then set the size there (parent). Or maybe your text has same large padding set. Or maybe the green box has those paddings. It’s not easy to diagnose without more info.