Images as buttons- Realistic size?

Has anyone figured out how to create an image that works as button but is not huge? I am trying to create multiple buttons.

I tried to stack 3:1 images stacked on each other but those look huge in comparison to other buttons, text.

Here is a pic

I created images that are 500x500 px and center the button that is around 200-300px wide, this way it works with all sorts of settings. Button has to be PNG with transparent background. Iā€™m attaching an exampleno The icon is white on transparent background, so you may need to open it in Illustrator or Photoshop

2 Likes

Thanks @SuperMerabh. I really like the button you shared. It represents my state of mind with buttons :slight_smile:

Ha! Yes, it does take a bit of manipulations but it gets better once you figure out how to do things. This button was showing as one of 3 options based on something the user chooses. The other options was happy and neutral :laughing:

1 Like

@S_C if you want images with low height you could insert an image with image height 1:1 (e.g. actual size) - and make the image 900x100 (yellow in the below picture) then you only get width:height equal to 9:1. It would make you screen more compact.

image

2 Likes

@S_C another way of getting a compact screen with a number of ā€œbuttonsā€ is to use an inline list with small images (ratio 3:1)

I made an inspirational app using inline lists (here images are square sized)

1 Like

Thanks @Krivo. So I should design the image to be 9:1 and apply 3:1 image setting in Glide image component to make it compact? Given that you are expert with images on Glide community, can you please suggest pixels as well.

Sorry if didnā€™t get your point. Please explain again.

Inline list doesnā€™t work for me as I need to link image to different components.

@S_C You should make your image 9:1 (or 20:1 if you want a really tiny button :slight_smile: ) then make the height of the image 1:1

No expert, but tried a bit :slight_smile:
I normally use width = 1000px for images as it should do great on a new iphone I believe. If you want to enlarge the image then I go for heigher resolution. Quite a few of my images are stored in cloudinary and then I would often use q_auto setting - meaning going for automatic quality.

Hope it helps

1 Like

Thatā€™s how we become one :blush:

Thanks so much @Krivo. Will try it tomorrow and let you know how it goes.

I havenā€™t touched Cloudinary yet. When I do, I plan to bug you and Thinh again on thatšŸ˜Š.

@S_C If you havenā€™t got a Cloudinary account yet the please consider signing up by an invitation link. Mine is: https://cloudinary.com/invites/lpov9zyyucivvxsnalc5/ufjxv2xds2yignimyvnu but you could also ask some of the other cloudinary power users (like Thinh, Robertā€¦) for theirs if you want to give them some extra credits.

2 Likes

You got it. You asked it first. I will thank them some other way :slight_smile:

2 Likes

Great suggestions here about the size, Krivo. In some of my apps I did want the same thing and I will surely try out your ideas. You deserve the Cloudinary referral, I donā€™t use it as much haha.

1 Like

@Krivo Your 9:1 suggestion solved the problem.
I still canā€™t understand the logic behind it. Is it just the original formatting?
I do wonder what is the formatting of Glideapp button.

Thank you so much for your help.

@S_C glide will make the image fill the full width when using image height 1:1 so an image with size 90px x 10px will do the same as 900px x 100px but the resolution would of course be quite different

1 Like

@S_C If youā€™re feeling adventurous, Figma removes much of the guessing. Iā€™m not sure how the 20:1 works but I set my ā€œframesā€ in Figma to iphone 8 which means Iā€™m always working with a width of 375px. If youā€™re trying to stack a bunch of TW buttons, the actual buttonā€™s width is irrelevant as long as the total image width (button + padding) is 375px.

fig

2 Likes

Thanks @Rasha. Thatā€™s helpful.

Clearly, Iā€™ve a lot to learn. Do you know of any YouTube or video tutorials that can reduce the learning curve?

Iā€™m not a designer/dev and am hardly practiced in Figma. Just use it periodically. I did not go through tutorials ā€“ too impatient. I start then consult resources when I get stuck. So thatā€™s usually my advice but I see they have an extensive tutorial library (Youtube). More broadly, Material Design is a resource worth spending some time with.

2 Likes

Much appreciated @Rasha

1 Like