1

I work an a Scrabble-like word game for Android, where yellow translucent letter tiles are placed on a white game board:

screenshot

I don't want to to use boring rectangle tiles - and at the same time can not make my game too complicated... so I have come up with the following graphical assets (created with InkScape, exported to bitmap and then split in 4 pieces with ImageMagick):

assets

As you can see above, there are round.svg and square.svg and I split them in 4 pieces:

  • round_0.png
  • round_1.png
  • round_2.png

  • round_3.png

  • square_0.png

  • square_1.png
  • square_2.png
  • square_3.png

And as you can see in the screenshot of the app, I then use these pieces to seamlessly layout the adjacent letter tiles.

My question is: for round.svg (and shadow.svg) I have just used 2 linear gradients at north-west and south-east corners - and that does not look good.

Does anybody have a good idea for my setup, how to better design the round.svg?

Improve this question
4
  • 1
    I'm not entirely clear why you are splitting these into separate images. – DA01 Jun 3 '15 at 16:11
  • Because I'd like to form a single entity (like hot lead) of the adjacent letter tiles placed at the game board. If you look at the popular app Words with Friends they do similar stuff, but out of 9 or more tile-pieces... – Alexander Farber Jun 3 '15 at 16:14
  • 1
    Oh! I get it. So these aren't parts of one tile, but rather individual tiles that will be grouped together. That is a bit trickier. – DA01 Jun 3 '15 at 16:16
  • Well my statement wasn't an answer, just a heads up in case you didn't know and a bit of advice based on my opinion. Removing it as it's unwanted. – Dom Jun 4 '15 at 16:19
1

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:

enter image description here

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

enter image description here

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

Improve this answer
6
  • Have you done this in InkScape? Do you cut a rectangle inside - and then move it down and to the right? – Alexander Farber Jun 3 '15 at 15:58
  • 1
    Yes it's inkscape. I just used the straight line draw tool for the white line on top of your example. Then I copied & pasted the white line to mirror it horizontally and vertically for the black line. – Takkat Jun 3 '15 at 16:01
  • This suggested bevel is a great visual effect, but I probably won't be able to use it with square.png - if you look for example at the corner made of the letters P, I, T in the app screenshot... – Alexander Farber Jun 3 '15 at 16:05
  • You would not be able to shape the single tile 'T' with 4 objects anyway. – Takkat Jun 3 '15 at 16:10
  • I still think that's possible with 4 pieces: if you imagine all adjacent letters like being drawn on yellow paper, with corners being curved up (with small corner shadows). – Alexander Farber Jun 3 '15 at 16:25
2

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.
Improve this answer
2
  • I understand what you suggest (doing shadows and effects in code), but would like to go the opposite way (every asset pre-rendered as much as possible). – Alexander Farber Jun 3 '15 at 16:17
  • 1
    @AlexanderFarber FYI, I updated my answer with some more info. – DA01 Jun 3 '15 at 16:21

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.