Pressed UI button

Post questions on how to use or achieve an effect in Inkscape.
Phyxsius7
Posts: 4
Joined: Wed May 04, 2016 6:09 pm

Pressed UI button

Postby Phyxsius7 » Mon Sep 10, 2018 6:44 am

Hello,

thanx in advance for help

I would like to learn how to create a images that gives the impression that the shape has been pressed.
Like a button.
Any help is very much appreciated.

I already though about on how I would it to look like and this is what I came up with.

The button template should be square, like;
Image

In the middle a icon with right underneath a text, the text is surrounded by a indentation, like;
Image

When the button is not pressed the icon is dark green (as if the LED light is turned off), when the button is pressed then the icon should be very bright (as if a bright LED has been turned on), like; (apologizes for the badly improvised image)
Image

The colour scheme white/grey, like;
Image

Thanks for reading

tylerdurden
Posts: 2344
Joined: Sun Apr 14, 2013 12:04 pm
Location: Michigan, USA

Re: Pressed UI button

Postby tylerdurden » Mon Sep 10, 2018 7:30 am

There are about three pages of video tutorials in google search... have you tried any of those?
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/

User avatar
brynn
Posts: 10309
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: Pressed UI button

Postby brynn » Mon Sep 10, 2018 10:40 am

This page in the manual shows 3 different ways to animate a simple button: https://inkscape.org/en/learn/animation/ (on the Inkscape website) Some of it will be relevant for your project and some of it definitely won't.

It looks like you're well on your way to understanding what you need. It looks like you just need to learn some drawing techniques. In my signature are links to tutorials. In my experience, following tutorials is the fastest way to learn Inkscape. After that, just decide which technique you want to use for the interactive effects.

Phyxsius7
Posts: 4
Joined: Wed May 04, 2016 6:09 pm

Re: Pressed UI button

Postby Phyxsius7 » Tue Sep 11, 2018 4:18 am

Wauw brynn,

thank you for your informative reply.
I see now that I was not quite clear in my explanation, may apologies for that.
All though I think that I can use the animation in the future, I was looking to make 2x images. 1x pressed and 1x not pressed button.
So far I could find are tutorials to create buttons that look like glass.

User avatar
brynn
Posts: 10309
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: Pressed UI button

Postby brynn » Tue Sep 11, 2018 8:24 pm

I have a tutorial which is showing how to make what I call engraved text, meaning the text appears to be slightly below the surface. The same technique should work for making a button look like it's depressed. (And another tutorial for embossed text, which might be useful as well, to make the button look raised?)

https://forum.inkscapecommunity.com/ind ... article=54
https://forum.inkscapecommunity.com/ind ... article=53

I'm sure there are other techniques for this, as well. Tons of tutorials at the link in my signature.

Polygon
Posts: 393
Joined: Thu Dec 19, 2013 3:27 am

Re: Pressed UI button

Postby Polygon » Tue Sep 11, 2018 11:54 pm

Of course that´s all possible in Inkscape - but to be honest; filter work is ridiculous hard to handle compared to other "modern" SVG editors like GravitDesigner/Affinity Designer for instance - not to mention macOS apps which can use QuartzEngine/CoreImage graphics libraries for nearly 2 decades.
So here is my quick hack inside Inkscape:
Button.jpg
Button.jpg (21.68 KiB) Viewed 2068 times


Cheers

User avatar
brynn
Posts: 10309
Joined: Wed Sep 26, 2007 4:34 pm
Location: western USA
Contact:

Re: Pressed UI button

Postby brynn » Thu Sep 13, 2018 4:08 am

I didn't suggest any filter work. Well, excecpt maybe some simple filters like you used.

tylerdurden
Posts: 2344
Joined: Sun Apr 14, 2013 12:04 pm
Location: Michigan, USA

Re: Pressed UI button

Postby tylerdurden » Thu Sep 13, 2018 8:38 am

Here's my hack:
Image

(Watch the status bar closely.)
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/

tylerdurden
Posts: 2344
Joined: Sun Apr 14, 2013 12:04 pm
Location: Michigan, USA

Re: Pressed UI button

Postby tylerdurden » Fri Sep 14, 2018 11:41 pm

Attached is the button in the un-pressed state. The above animation shows how the pressed state differs.
Attachments
button1a.svg
(7.88 KiB) Downloaded 169 times
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/

Lazur
Posts: 4717
Joined: Tue Jun 14, 2016 10:38 am

Re: Pressed UI button

Postby Lazur » Sat Sep 15, 2018 8:41 am

tylerdurden wrote:Attached is the button in the un-pressed state.


Well, if only there was a magic/more magic button right?
This case if there were more filtering options... anyway, here is my 2 cents.
The button shape and all is generated by ONE filter. Although it might sound promising, if the object's bounding box is larger than the original image, the button backdrop shifts away.

button2.svg
(10.29 KiB) Downloaded 167 times


Return to “Help with using Inkscape”