Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It only takes a minute to sign up.
Sign up to join this community
I have designed an image which will be used as a button in an android app. Since it is a button, the state of the image has to be changed when the user clicks on the image to give it a "pressed" effect.
How do you impart such an effect? Which tools should would be easy for this?
The easiest and simplest way would be to darken the button when its pressed. Applying a 30% black layer on top will do the trick.
In order to save time and allow for transitions between states, creating button effects in the styling language for whatever UI you're creating, not creating images for each one, is important. This will allow for the effect to be reused when you have different text, sizing, etc.
Take for example designing for the web or something that understands HTML/CSS:
HTML's <button> element comes with a default pressed state that darkens the inside with a shadow. It likely isn't styled as attractively as you'd like, but we can style it ourselves quite easily by using CSS' :active state.
Using a styling language, we can also transition from one state to another instead of just abruptly change.
In this demo, I show how to apply changes to background color, adding shadow, and outline while using a transition from each state. The effects themselves should be a little more fine tuned in practice, but this shows how it can be done.
To see what prefixes you need for transition (if any) look here or on caniuse).
For more complex transitions between states, sometimes an actual keyframe or JavaScript animation is required. In this case, the animation will usually be toggled and be required to finish before it can be started again.
Similar effects can be created using the same techniques if you're working on an actual Java app, iOS app, or something else, but the implementation will be different.
As for the actual styling itself, Google's material design reference for buttons gives more exact guidelines. They suggest only changing the background color for non-essential buttons, but changing the background and shadow for more essential buttons.
For non-important vital buttons that are option (ex. "Share" buttons), they recommend something similar to the following.
For more important, vital buttons, they recommend "raising" it, meaning use shadows to convey more importance.
They also recommend using transitions/animations between states and have some neat examples on the page linked above.
If, what you are trying to accomplish doesn't have to be flat, i would recommend you just to add an inner shadow like this
If it has to be flat-design though, i recommend change of color (darker) or inversion:
This really depends on how complicated you want your button to be. A simple button can be made with just a single shape with multiple properties to represent normal and pressed states.
In Illustrator, you can check the shape properties in the Appearance panel, they are just like layers and can be shown and hidden to switch the button's states. In the figure I use two fills: a light grey one for normal, a dark grey for pressed.
