3

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 resizableImageWithCapInsets which 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:

enter image description here

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?

| improve this question | |
  • 1
    You could try to creae a tiling picturet of a single "bubble" and the corner bubbles pictures. After that its just a matter of proper code to display n bubble tiles next to eachother so that necessary size is reached. Another option would be to do this as vector graphics. Then the number of bubbles would be constant, but you could scale it with no problem. – K.L. Mar 6 '13 at 15:48
  • Here is a link to a tutorial about making tiling textures - you can use it to make a tiling bubble ctrlpaint.com/videos/tiling-textures – K.L. Mar 6 '13 at 15:54
6

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:

Corner capped border with stretched span

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.

Corner capped border with overlapping span

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.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.