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;
In the middle a icon with right underneath a text, the text is surrounded by a indentation, like;
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)
The colour scheme white/grey, like;
Thanks for reading
Pressed UI button
-
- Posts: 2344
- Joined: Sun Apr 14, 2013 12:04 pm
- Location: Michigan, USA
Re: Pressed UI button
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/
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/
Re: Pressed UI button
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.
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.
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
Re: Pressed UI button
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.
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.
Re: Pressed UI button
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.
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.
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
Re: Pressed UI button
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:
Cheers
So here is my quick hack inside Inkscape:
Cheers
Re: Pressed UI button
I didn't suggest any filter work. Well, excecpt maybe some simple filters like you used.
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
-
- Posts: 2344
- Joined: Sun Apr 14, 2013 12:04 pm
- Location: Michigan, USA
Re: Pressed UI button
Here's my hack:
(Watch the status bar closely.)
(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/
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/
-
- Posts: 2344
- Joined: Sun Apr 14, 2013 12:04 pm
- Location: Michigan, USA
Re: Pressed UI button
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/
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/
Re: Pressed UI button
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.