Images as buttons- Realistic size?

[S_C]

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

[SuperMerabh]

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 example The icon is white on transparent background, so you may need to open it in Illustrator or Photoshop

[S_C]

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

[SuperMerabh]

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

[Krivo]

@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.

[Krivo]

@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)

Create a compact homepage

It is time to build some crazy compact homescreens live never before. Url: https://companydirectory.glideapp.io/ A new feature has been added to Actions - “View details”. Select the “Independent screen configuration pr. item” and you can make the Tile layout send the user in all different directions. That is crazy. [Screen Shot 2020-06-04 at 9.16.52 PM] I put a front page on the Employees template where you can show different things [image] Take a look - and copy the app if you want to se…

[S_C]

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.

[S_C]

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

[Krivo]

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

No expert, but tried a bit
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

[S_C]

@Krivo

No expert, but tried a bit

That’s how we become one

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😊.

[Krivo]

@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.

[S_C]

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

[ThinhDinh]

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.

[S_C]

@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.

[Krivo]

@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

[Rasha]

@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.

[S_C]

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?

[Rasha]

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.

[S_C]

Much appreciated @Rasha