Fuks

Making tappable image buttons (with content you don't control) look good in a repeatable way is usually achieved these days with blurs, masks, and colored overlays—cards in the App Store app are a good example of this aesthetic But if you want to eschew flat design vibes and create something that looks more dimensioned and button-like, you can deploy any number of techniques: • Semitransparent white→trans gradient on top (soft light or overlay blending) to create a more beveled shape • Semitransparent black→trans gradient on bottom (soft light or multiply blending) so there's better contrast for text • Inner glows and strokes of varying softness and opacities, layered with different blend modes like soft light, overlay, plus lighter • Derived color gradients generated from dominant colors in the image itself, sampled from bottom left quadrant of image for best color match with placement location Of course the grand challenge is to determine which of these techniques, at what opacities, and in what order, construct the aesthetic you want across the greatest permutation of images The latest implementation of Treeo's playlist button uses a lot of these, but in a very specific order so that I can have a dark gradient behind the title while still preserving a bit of a glow around the edges Each layer is exported at 100% opacity (so it can be tweaked in code), then placed as a stretchable UIImageView with rasterization set on the whole button for improved performance