SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Thread: 3D Piano Keys

  1. #1
    SitePoint Wizard silver trophy someonewhois's Avatar
    Join Date
    Jan 2002
    Location
    Canada
    Posts
    6,364
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Making a piano key look like it's pushed down?

    I attached a piano keyboard I made.

    I was wondering if anybody could show me how to make it look like the keys are beign pushed down?

    Like I tried some bevel's, inner and outer, and I tried different gradients, but they make it look like a mountain jaged key rather than a regular or pushed down key..

    Regards,
    Someonewhois

    P.S. Thank You in Advanced <- looks like he's saying "Thank You" more than yawning..

  2. #2
    SitePoint Addict rabbitdog's Avatar
    Join Date
    Jul 2001
    Location
    So. Tenn.
    Posts
    363
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by someonewhois
    I attached a piano keyboard I made.

    No Attachment? Maybe the new version of the site doesn't say when there's an attachment waiting for approval, or you forgot to attach it..

    so I made a quick piano myself, maybe this'll help you (its been a long time since piano lessons - I think my black keys are a little off)



    When you're dealing with something being pushed down, you have to think *perspective*, not beveling or gradients. The key is being pushed lower than its sisters, so it will appear to be lower and offset in the image (part of it, in this case, gets hidden by the key next to it). Additionally, elements of the keys next to it will be shown that you wouldn't see otherwise. Shading, to the lowered key itself (slightly darker), and to the side of the white key next to it (even darker), help maintain the illusion.

    This isn't a fullblown tutorial or anything, but maybe it'll help you *see* what you need to do a little bit better.

    - liz.
    Mr Vector
    High quality, royalty free, vector graphics
    for t-shirt artists and graphic/web designers.

  3. #3
    SitePoint Wizard silver trophy someonewhois's Avatar
    Join Date
    Jan 2002
    Location
    Canada
    Posts
    6,364
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, thanks a bunch!

    Regards,
    Someonewhois

    P.S. Yeah, black keys screwed

    |`|`||`|`|`||`|`|
    | being white, ` being black

    |`|`||`|`|`|
    C D EF G A B

    But thanks a bunch anyhow!

  4. #4
    SitePoint Wizard silver trophy someonewhois's Avatar
    Join Date
    Jan 2002
    Location
    Canada
    Posts
    6,364
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm, I tried to duplicate your idea, with no prevail

    Firstly, I couldn't get it to be that same angle.

    Secondly, I couldn't get it to look like it was down, thirdly the black keys were screwed up.

    Any pointers?


    Regards,
    Someonewhois

  5. #5
    SitePoint Addict rabbitdog's Avatar
    Join Date
    Jul 2001
    Location
    So. Tenn.
    Posts
    363
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by someonewhois
    Hmmm, I tried to duplicate your idea, with no prevail

    Firstly, I couldn't get it to be that same angle.

    Secondly, I couldn't get it to look like it was down, thirdly the black keys were screwed up.

    Any pointers?


    Regards,
    Someonewhois

    What program are you using to do this in? I did mine with a vector program - which makes playing with things like perspective pretty easy.
    First I did a flat 2 version of the keys (no perspective) - basically one large rectangle duplicated a few times for the white keys, and a narrower rectangle positioned over the joint of each set of white keys.

    Then, I selected all of the retangles, and adjusted the perspective of them to what you see in the final version. Next, I extruded the black keys to give them depth.

    To lower the depressed key, I just selected it and bumped it straight down an appropriate amount. To finish it off, I drew in polygons to based on the new perspective (basically connecting dots) to fill in the sides of the adjacent keys.

    Hope this helps!

    - liz
    Mr Vector
    High quality, royalty free, vector graphics
    for t-shirt artists and graphic/web designers.

  6. #6
    SitePoint Wizard silver trophy someonewhois's Avatar
    Join Date
    Jan 2002
    Location
    Canada
    Posts
    6,364
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm using PSP - it stinks

    Which vector program?

  7. #7
    Sidewalking anode's Avatar
    Join Date
    Mar 2001
    Location
    Philadelphia, US
    Posts
    2,205
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Link to your image and the advice may get more helpful

    Another thing you will want to take note of is that the neighboring key should cast a shadow on the depressed key. With some perspectives, it will also help to extend the depressed key a bit farther than the rest, towards teh "player."
    TuitionFree a free library for the self-taught
    Anode Says... Blogging For Your Pleasure

  8. #8
    SitePoint Wizard silver trophy someonewhois's Avatar
    Join Date
    Jan 2002
    Location
    Canada
    Posts
    6,364
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, the shadow was something I was thinking about.


    Basically, I don't want too much of an angle, as I want to make a full grand piano

    I couldn't make anything, not even a basic piano.

    I give up

    Regards,
    Someonewhois


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •