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鈥檓 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 鈥渂uttons鈥 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鈥檛 get your point. Please explain again.

Inline list doesn鈥檛 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鈥檚 how we become one :blush:

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

I haven鈥檛 touched Cloudinary yet. When I do, I plan to bug you and Thinh again on that馃槉.

@S_C If you haven鈥檛 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鈥檛 use it as much haha.

1 Like

@Krivo Your 9:1 suggestion solved the problem.
I still can鈥檛 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鈥檙e feeling adventurous, Figma removes much of the guessing. I鈥檓 not sure how the 20:1 works but I set my 鈥渇rames鈥 in Figma to iphone 8 which means I鈥檓 always working with a width of 375px. If you鈥檙e trying to stack a bunch of TW buttons, the actual button鈥檚 width is irrelevant as long as the total image width (button + padding) is 375px.

fig

2 Likes

Thanks @Rasha. That鈥檚 helpful.

Clearly, I鈥檝e a lot to learn. Do you know of any YouTube or video tutorials that can reduce the learning curve?

I鈥檓 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鈥檚 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