This is a read-only archive of the inkscapeforum.com site. You can search for info here or post new questions and comments at Hello all,
I have found many great button tutorials.
My problem is:
for a software interface I need to create button images with two stripes.
One stripe shows the button in up-state,
the other one shows it in the down-state.
Does anyone have tips, tutorials or resources on how to create buttons in two states?
The style of the button does not matter at the moment, as long as it has some 3D-effect.
I'm mainly interested in creating the sunken effect for a given button design.
thanks in advance,
Nick
Buttons in up and down state
Re: Buttons in up and down state
What do you mean by "stripes"?
I don't know of any tutorials about this. But here's a very simple example:
The ON button is 3 circles stacked up, and slightly offset, with appropriate colors to imply depth. The OFF button also has 3 offset circles (1 with black stroke, although a 4th circle could be used as well), with color progression. But there's a hole in the larger rectangle, and the circles lie below it, so that the lower right parts of the circles are hidden behind it. The words OFF and ON are centered on certain circles in each stack, which also helps to imply depth. The whole thing could use a little tweaking here and there, for better effect. Blurring, and possibly shadows and highlights could make it even more realistic, depending on the effect you want. And if I had time, I think it would look cool to make the words OFF and ON to appear sunken into the buttons. But maybe this much could give you an idea.
I don't know of any tutorials about this. But here's a very simple example:
The ON button is 3 circles stacked up, and slightly offset, with appropriate colors to imply depth. The OFF button also has 3 offset circles (1 with black stroke, although a 4th circle could be used as well), with color progression. But there's a hole in the larger rectangle, and the circles lie below it, so that the lower right parts of the circles are hidden behind it. The words OFF and ON are centered on certain circles in each stack, which also helps to imply depth. The whole thing could use a little tweaking here and there, for better effect. Blurring, and possibly shadows and highlights could make it even more realistic, depending on the effect you want. And if I had time, I think it would look cool to make the words OFF and ON to appear sunken into the buttons. But maybe this much could give you an idea.
Basics - Help menu > Tutorials
Manual - Inkscape: Guide to a Vector Drawing Program
Inkscape Community - Inkscape FAQ - Gallery
Inkscape for Cutting Design
Manual - Inkscape: Guide to a Vector Drawing Program
Inkscape Community - Inkscape FAQ - Gallery
Inkscape for Cutting Design
-
nicolasr75
- Posts: 3
- Joined: Thu Feb 27, 2014 10:22 pm
Re: Buttons in up and down state
Thanks brynn for your ideas!
By "stripes" I just mean that the finished button graphic must show the button in both states next to each other. So, if the button is 100px wide, the final graphic must be 200px wide.
Another problem is that the button graphic must not contain any background, because the background it will later sit on is not known. That means that any border shadows/highlights will have to blend with whatever background there will be. I think, as long as I export png, the alpha channel of shadows/highlights will take care of this.
I have attached a graphic that I created from some Photoshop tutorial. As (unfortunately) always the tutorial did not show how to make this button sunken
The gray background is just an example. As said, the button graphic should not contain any background.
But your mention of highlights/shadows/blurring gives me some ideas to try. Thanks again, Nick
By "stripes" I just mean that the finished button graphic must show the button in both states next to each other. So, if the button is 100px wide, the final graphic must be 200px wide.
Another problem is that the button graphic must not contain any background, because the background it will later sit on is not known. That means that any border shadows/highlights will have to blend with whatever background there will be. I think, as long as I export png, the alpha channel of shadows/highlights will take care of this.
I have attached a graphic that I created from some Photoshop tutorial. As (unfortunately) always the tutorial did not show how to make this button sunken
The gray background is just an example. As said, the button graphic should not contain any background.
But your mention of highlights/shadows/blurring gives me some ideas to try. Thanks again, Nick
- Attachments
-
- GreyButtonStart.png (1.61 KiB) Viewed 3541 times
-
tylerdurden
- Posts: 2344
- Joined: Sun Apr 14, 2013 12:04 pm
- Location: Michigan, USA
Re: Buttons in up and down state
For the depressed state, I usually just flip the button upside down.
Have a nice day.
I'm using Inkscape 0.92.2 (5c3e80d, 2017-08-06), 64 bit win8.1
The Inkscape manual has lots of helpful info! http://tavmjong.free.fr/INKSCAPE/MANUAL/html/
I'm using Inkscape 0.92.2 (5c3e80d, 2017-08-06), 64 bit win8.1
The Inkscape manual has lots of helpful info! http://tavmjong.free.fr/INKSCAPE/MANUAL/html/
-
nicolasr75
- Posts: 3
- Joined: Thu Feb 27, 2014 10:22 pm
Re: Buttons in up and down state
Thanks for your reply.
Flipping the button surely creates a good distinction between the up and down state. In this case, however, I'm trying to simulate a hardware button as close as possible. I played around with the ideas of brynn and applying the inner shadow effect. The attached picture shows how far I've gotten. Although it could need more fine tuning, I think it's good enough for my purposes. Thanks both for your help.
Nick
Flipping the button surely creates a good distinction between the up and down state. In this case, however, I'm trying to simulate a hardware button as close as possible. I played around with the ideas of brynn and applying the inner shadow effect. The attached picture shows how far I've gotten. Although it could need more fine tuning, I think it's good enough for my purposes. Thanks both for your help.
Nick
- Attachments
-
- Buttons.png (5.07 KiB) Viewed 3500 times
Re: Buttons in up and down state
The problem with 3d effect (shadows) showing the on/off state is that sometimes it's quite hard to decipher which is the on and off state for any particular button. Therefore I think it's best to use more unambiguous and less 3d/fancy graphic effects and concentrate on the interface being easy to read and use. One good source of inspiration for these kinds of buttons with limited glamour but good functionality is the iphone IOS3 IOS4 and IOS5 button styles. I'm sure there's plenty of other reference. Sometimes going overboard on trying to emulate physical dashboards, buttons etc has a negative usability effect.
Re: Buttons in up and down state
I think that looks pretty good! I agree it could use some fine tuning. The down button looks like it's surface is rounder than the not-down button. If I understand, on the hardware, both buttons should be identical and the down button needs to look like it's depressed. It's hard to say which object is which, from the PNG. But I think it's the highlight on the down button is a little too strong, especially in the corners. But again, that does look pretty good!
Basics - Help menu > Tutorials
Manual - Inkscape: Guide to a Vector Drawing Program
Inkscape Community - Inkscape FAQ - Gallery
Inkscape for Cutting Design
Manual - Inkscape: Guide to a Vector Drawing Program
Inkscape Community - Inkscape FAQ - Gallery
Inkscape for Cutting Design