7

I'm writing an android app and can't figure out how to display a ramp (could be a bump, like a speed bump, but preferably a ramp) from a top down 2d vie

2
  • 5
    This is an aside, rather than an answer, but on an architectural plan, an arrow would indicate the upwards direction on a ramp or stairs.
    – e100
    May 17, 2011 at 12:36
  • @e100 I don't see how that isn't worth a full answer. You should make it one. Unless more detail is specified in the question, it's perfectly logical..
    – naught101
    Jul 14, 2013 at 9:10

3 Answers 3

12

I would consider just skewing the ramp 1 or 2 degrees and giving it a little dropshadow. It may not be real, but it gives the illusion of depth.

Key is that your global illumination stays the same. This means that you let shadows cast the same way and that your light source is directed the same way. Otherwise it feels out of place

Here is a simple example. The rest is up to you :)

Edit: I added a trapezoid version to show you how that would look. Great tip from Abhranil Das, I overlooked the perspective in that part. It's just a slight enhgancement but it works very well!

Ramp up and a full ramp

enter image description here

4
  • Also note the subtle seam in the undermost ramp (as you didn't mention it I don't know if it really was intentional, but it does make the ramp look a bit more real). May 17, 2011 at 9:48
  • It was an unintentional side effect of the drop shadow, but you're right it adds even more to the illusion. It gives it some more texture. On a side note: the gradient effect can also be used a bit more strongly in combination with a larger or smaller dropshadow to the effect that you can lower or heighten the ramp. May 17, 2011 at 11:12
  • The trapezoid works because it creates a correct perspective as it will be in the real. Ideally, if there are some moving stuff going over it, you should increase the size of the moving object as it goes higher as well. You could use the same effect if it is just a jump.
    – Aᵂᴱ
    May 19, 2011 at 13:00
  • for the "bump"in the question, make the gradient steeper (faster change) toward the outside, and flatter at the top, it'll look a lot more rounded. You could also off set the "center" toward the light, if the lighting in the rest of the app is coming from a single direction.
    – naught101
    Jul 14, 2013 at 9:12
5

I'm no graphic designer, but have you thought about using gradients? For example:

Ramp1 - left-to right gradient This could be your standard ramp.

Ramp2 - symmetrical gradient This could be your speed bump.

Obviously, they'd have to look a little nicer than this. :P

2
  • Yeah, I used gradients for the pits to be jumped over, and was going to use gradient for this. I appreciate the images, do you have any ideas how to make it look a little nicer? Thanks! May 17, 2011 at 6:07
  • @farmostrich > Giving it some depth, or an illusion of such, would be the way to go. See Roberto's answer. May 23, 2011 at 1:29
4

Roberto's image is good enough, but what I feel would add to the effect is if you use trapezoids instead of rectangles, with the wider end signifying the end which is 'up'. I guess that would complete the effect satisfactorily.

1
  • Great tip, I edited my post to show the effect May 19, 2011 at 7:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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