Preserved Topic: Help! How to make "squishy" buttons? (Page 1 of 1)

Hi there! New poster here. Long time "casual" photoshop user...I'd rate myself as a high intermediate user, not an expert or anything, but better than many of my coworkers.

So here's the sitch: A coworker is designing a touchpanel for a client and he wants "buttons that smoosh" [his words, not mine] I can do simple rollovers or on-off color things, but he wants a nice puffy button that, when touched, will squish in the middle [possibly bulging out on the edges a bit]. I've seen a sample or two of this online but have no clue how to do it. I'm looking for an action or step-by-step tutorial on how to do it and do it consistently as I will have to create a variety of sizes of squishy buttons that all squish exactly the same. [The other guy is higher on the corporate food chain than me, thus it has been delegated down. yay me.]

So, any-hoo...HELP! Thanks in advance to all who reply!

Dawn
avsav

Well I have 3 thoughts off the bat on this one.

1) Use an animated .gif file for the "squish", and use some basic rollover code.

2) Create multiple images and control the squish with javascript, changing the image depending on the mouse.

3) Same as 2 only use Flash.

It depends upon how much control you want of the squish. If you want it to squish as long as the mouse is held down, and stop squishing when you release and then slowly inflate back out I would go the Javascript route or the flash route. If you just want a click and squish and then pop back an animated gif would be your friend. You just need to watch your JS code in this one so that it doesn't keep squishing if say you click it 5 times it doesn't reset in the middle, make sure it completes its squish cycle before it is allowed to squish again.

Might be a little bit of some complicated code, however you might be able to find something pre packaged. You might want to do a google search on "animated mouse over effects" could posibly get you somewhere.

If I'm reading this correctly, I think you've gone way too complicated warmage.

What I'm getting from your request avsav is that you really only need a 2 state rollover, one puffy, one squished.

Is that correct?

For starters, can you handle the "puffy" end of it? If so, the squishy version is only some minor variations. If not...then we need to step back a little...

What I anticipate being the hard part is the words on the buttons (I assume there will be words on the buttons?).

They'll have to "squish" believeably with the button.

Hey - this sounds like fun. This could be the next big thing. First there were the "aqua", "gell" buttons based on Apple's interface. But they were like hard plastic or colored glass. Now we'll have buttons sort of like those gelatenous goop-filled ball thingies you dissolve in your bath water!

You could take the 'net by storm with this. Hey - go with Flash and add a disgusting, flatulant sort of sound when you press it!!!!

Hee hee

The things that comes to mind when you mention "touchpanel" are CRESTRON and AMX. If this is the case you may have to take into consideration the limitation of these types of touchpanels. Crestron, for example, will not accept GIF as a file format. Active and inactive states of buttons need to be BMP, JPG or PCX. And that's another point. On their older style panels (1 year or more), you are allowed 2 states per button. Hence, an inactive and an active state. And although these companies' respective editing programs allow you to apply text to a button, what Steve mentioned about having text "squish" along with the button, will be crucial. So, now you're talking about 2 graphics per each button and possibly encroaching on the memory limitation of the panels.

Oh, and if these are not Crestron or an AMX touchpanels... then you can ignore all the things I said

-Paul

Slightly off-topic, I had an interface once based little gel-cap like buttons that splatted when you moused over them =)

So what? You want a cookie?

This may be of use:
http://www.eyeball-design.com/cgi-bin/forum/ikonboard.cgi?s=3e3068e243dcffff;act=ST;f=2;t=2907;hl=theguest

avsav: round buttons? Rectangular? Rounded rectangles?

You said you've seen some examples online - do you have urls to give us a sense oc what you seek to do?

i dunno that these are necessairly "squishy"....but AFTER you select something...then they look...."fluid"?
anyways...cool design at any rate.
http://www.derbauer.de/

Yes, I think Raptor's link might help, but that forum is in bad need of specifying its encoding. I don't even want to tell you what it looks like with Korean encoding (which is my default, and which is what I see if sites don't specify encoding). I don't want to tell you, but I'll show you (screencap, 1024x768, ~100k). See the horizontal scollbar on the bottom? The funkified links push the buttons all the way out to the right, making the page twice as wide as it should be.

Usually it is not this severe, and this particular case is apparently only a problem with Korean encoding (Chinese encoding looks pretty ugly, but it doesn't screw up the links like that).

Didn't mean to barge in here like that with my sword a-swingin'... it just kind of jumped out at me. Back to the fray, then, my friends.

[This message has been brought to you by the Society for the Promotion of Encoding Awareness.]

Big Cloud is right...it is for an AMX touchpanel with two-state buttons [on/off] that are restricted by file type. I've still had excellent luck with designing slick buttons and graphics for them, so far. New panels and current stuff have a lot more memory than previous panels so we can afford to be art-ier with our design. Panels have much more attractive GUIs these days. And the newest AMX panels are REALLY slick - with up to 255 different button states between on and off and huge amounts of on-board memory and more. I've seen a demo of the new fancy panels and they can do onboard animation and many effects that Flash does...internally! They're great.

Til those get wide release and come down in price, we are using the on/off panels. I have a sample panel from another company that did a "squishy" button on some of the commands, but regular color-change rollover style buttons on the rest....If I get a chance, I'll post the on and off buttons to a page and link it here.... In the mean time, I'm just kinda looking for an action or filter or procedure to make the squish...I'm fairly adept at photoshop but not so much on the details of art like where to shade and so forth.... That's me...Computer-Girl, not Art-Girl.

All help is appreciated!!

Dawn
avsav

I have one of these 3M mousepads with the wrist rest on it. It is VERY squishy...FUN! I am thinking that if you are considering a smoother animation, a 3D prog will be helpful. If not, then rendering some squish in Photoshop would be fairly simple. For the down-state (haven't tried yet), perhaps using the pinch tool, bloat tool, and some touch-up on making the displacement effect. I am squishing my mousepad right now. FUN! I wish I was working on things like that right now.

Suho: I've received several notes about that, but not once did I think to check to see if the pages were encoded. Thanks for the heads-up.

Everything appear to be in working order, now?

Here is something I saw on Flash Kit. It's a bad render, but he/she used lightwave for the squish:
http://www.flashkit.com/movies/Interfaces/Buttons/squishy_-Marc_T-7911/index.php

Here is the URL to the sample button I was given by the supervisor. http://www.avsav.com/squishy/squishybutton.gif I've taken the two images and made an animated gif out of them to help you see the squish effect.

Anyone with clues how to do this - preferably via an action or something infinitely repeatable for the same effect on various sized buttons?? I've located a piece of plug-in software that will do a similar thing in Photoshop but it costs $50.00 and I'm sure the supervisor and boss will buy it if I need it, but they would much prefer I figure out how to do it for free myself. Thanks again for all help and suggestions so far.... they've been pretty helpful.

Dawn
avsav

Well, the link that raptor provided will give you all the info you need on how to produce that.

It is simply an inverted bevel with a soft edge.

Try this as well - http://www.gurusnetwork.com/tutorials/photoshop/pillbutton.html

Use the trick Phil shows to produce the inwardly curved button. Simply increase the amount the inverted part is shrunk, and blur the edges.

Hey Suho.. What's a Froto and what does one look like nude?

Raptor: Yes, everything is quite spiffy now. Isn't it funny how such a tiny thing can cause such problems?

Witherin: No! My secret browsing habits have been revealed!

It's actually a bit of a joke that came out of the Asylum Film Project...

And for the squished text; [filter>distort>pinch] or [filter>distort>spherize] with a negative setting.

^ yup, that should do it, and it's quick and easy.

Displace will give more in depth results if needed.