I’m trying to create a cloud image which can be resized without stretching, for an iPhone application.
There’s a method in iOS called
resizableImageWithCapInsetswhich allows me to specify a number of pixels from each edge I don’t want stretched, but the issue there is that the ‘bubbles’ around the edge of the cloud would be stretched. I can’t quite get my head around the best way to draw or create it, or how I’ll stretch it when I get it into my application. I’m talking about something like this:
The bubbles on the sides of the cloud shouldn’t stretch, but new ones will be created for however long / short the button needed to be. For example, if the button needed to be half the size of this image, only 2 of the bubbles would be shown, but if it needed to be taller, more than the 5 here could be, it’d add and remove them as necessary. I’d set minimum sizes so that at least one bubble would always be there, preventing issues if it got too small. The bubbles themselves can be tiled if need be.
Does anyone have any suggestions on how I can achieve such an effect, either from the perspective of software development or graphic design?
Sticking to simple, pre-generated textures, you’ll either have to allow some stretching, or allow some slightly awkward overlaps. I believe both ways will need some custom code though.
Using stretching: Place corner caps, round the number of bubble tiles needed to fit in between up or down, and stretch (or shrink) that span to make up the difference:
Using overlaps: Create corner caps with a transparent edge on one side, and trim the span up to the mid point of the corner cap (specifically, the highest part of the corner bubble), so that you don’t see the tile extend beyond the corner.
I don’t know exactly what would be involved on iOS, but stretching is probably simpler to implement, and you won’t get any ugly bubble edges stuck right next to each other. However, bubbles will pop in and out if the cloud needs to animate changing size, so in that case overlapping will be smoother.