: Constructing a tile from 4 pieces - to create single entity of adjacent letters in a word game I work an a Scrabble-like word game for Android, where yellow translucent letter tiles are placed

@Holmes874

How are you building the app? I'm not as familiar with Android, but in iOS I'd probably consider building this with Phonegap and simply using CSS for everything. With CSS, all I'd need is the DIV. I can then style it with the gradient, color, rounded corners and drop shadow. No need to chop and dice images.

I imagine you can do the same with the UI tools within whatever particular coding framework you are using.

Bottom line, don't use images, you should be able to render these in code.

UPDATE:

OK, I think I get what you are doing now.

That said, my answer still stands, I think you'd ultimately have an easier time handling this in code vs. hard assets.

That said, I think what you need to do get the 3-D effect you want is to not use a gradient, but as Takkat points out, a highlight along the contiguous top and left edge of the grouped tiles and a shadow line on the contiguous right and bottom edge of the grouped tiles.

This means you will likely need more tiles.

For example:


square0 = top highlight (for groups of more than one row)
square1 = left highlight (for groups of more than one column)
square2 = bottom shadow (for groups of more than one row)
square3 = right shadow (for groups of more than one column)
square4 = top highlight, bottom shadow (for groups of one row)
square5 = left highlight, right shadow (for groups of one column)


Even after all of that, though, you'll still have issues where you have inside corners. Ideally, you'd also then have a set of squares with just corner highlights and shadows to accommodate all the inside corner combinations: top left highlight, bottom right shadow, top right shadow-to-highlight transition, bottom left shadow-to-highlight transition, then the combinations (top left and bottom right, bottom left and upper right)

At this point, I'd say things are getting messy and I'd suggest one of two options:


see if you can do this with code logic instead
rethink the aesthetic and perhaps go with a flat-design rather than 3-D to save you the headache of all these separate graphics.

Vote Up Vote Down

@BetL875

To add a simple bevel effect to a flat shape we can add light and dark reflections at the (rounded border) by drawing a white and a black transparent line:



Then we apply a blur effect to this line to make it smoother to obtain the following icon (may be cut to desired pieces):



Note that we then did not apply a gradient to the object fill.

Vote Up Vote Down