Tell me more ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.
up vote 7 down vote favorite

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

share|improve this question
4  
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 '11 at 12:36

3 Answers

up vote 12 down vote accepted

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

share|improve this answer
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). – koiyu May 17 '11 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. – Roberto De Vivo May 17 '11 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. – awe May 19 '11 at 13:00
up vote 4 down vote

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

share|improve this answer
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! – farm ostrich May 17 '11 at 6:07
@farmostrich > Giving it some depth, or an illusion of such, would be the way to go. See Roberto's answer. – GnomeSlice May 23 '11 at 1:29
up vote 4 down vote

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.

share|improve this answer
Great tip, I edited my post to show the effect – Roberto De Vivo May 19 '11 at 7:12
Yep, they do look nicer. Thanks! – Abhranil Das May 24 '11 at 13:25

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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