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 1 down vote favorite

I'm a web designer, I know photoshop very well, but I can't seem to get the slider on this page to look right:

http://designsweeter.com/

What I'm Going For: I'm trying to get it to look like the slider is a circular piece of paper rotating through the backdrop. The slits on the side through which it travels through just don't look right. They don't appear 3D really. I'm not too experienced, but I'd like to start on more advanced graphic design.

If you want to take a stab at it, I've uploaded the psd here: http://cl.ly/7rRp

Thank you! ~ Jackson Gariety

share|improve this question
Not to nitpick, but you have a typo on your site: "...you'll end up loosing the much valued traffic" should be "..you'll end up losing the much valued traffic." – Philip Regan Jun 23 '11 at 19:04
Oh, thank you. I didn't even see that. ^_^ – Jackson Gariety Jun 23 '11 at 19:43
I think the problem here is that you are simulating the shading of a curve, but not the behavior: it looks like a curved surface being translated to the left. To have the content look like it is on the surface of a rotating object, it must appear to recede. The problem I see with the idea is that your wheel must be small enough that you can see it receding, but that will probably distort the content too much. – horatio Jun 23 '11 at 21:36
1  
Just a recommendation regarding the animation: make it a little slower. You're shooting for a "realistic" representation of paper moving through the slits, likely powered by a motor of some sort. Slow it down significantly, and add some start/end easing on the animation to make it look less jumpy. The speed it's currently at actually bothers my eyes. – Adam Maras Jun 23 '11 at 21:38
1  
also, all the text at the bootom, right of that page is cut off at the right edge and I have no scrollbars – horatio Jun 23 '11 at 21:42
show 6 more comments

1 Answer

up vote 3 down vote accepted

I think the two things that break the illusion are that the "slits" don't overlap the edges of the image and they are completely flat black. If you get a piece of black paper, cut a real slit in it and drag another piece through it, you'll see what the visual clues are that say "slit" rather than "black line."

The first problem is easily fixed. Scoot them toward the middle a pixel or two, so the edge of the slider image overlaps the "slit."

To fix the flat look, add a 1 pixel inner shadow to the "back" edge of each slot. Set blend mode to Screen, color to white, opacity to about 20-25%. The angle needs to be 0 degrees for the left slit, and 180 degrees for the right.

Try these out, and see how it looks.

share|improve this answer
I will do it now! – Jackson Gariety Jun 23 '11 at 19:44
Still doesn't look quite right, is this what you meant? designsweeter.com You'll have to clear your cache – Jackson Gariety Jun 23 '11 at 20:43
You're almost there, I'd say. The left slit needs to be shifted left a couple of px, so the inner shadow isn't overlaid by the image. It looks fine on the right. (Actually, my original thought was to put the shadows on the inside edges, rather than the outside "top" edges, but it should work either way. In FF and Chrome/Safari you're looking good. In IE9 it falls apart in a wild way. Opera just doesn't run the code. – Alan Gilbertson♦ Jun 23 '11 at 21:03
What do you mean by "Opera just doesn't run the code."? – Jackson Gariety Jun 23 '11 at 21:09
When I opened the page in Opera, there were no slider images, no headlines, nada. The HTML was there, but the javascript doesn't execute. Between then and now, I updated Opera and now they're handling the script fine. There have been a ton of oddball problems with javascript in Opera 11. Good to see them getting fixed. – Alan Gilbertson♦ Jun 23 '11 at 21:20
show 2 more comments

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.