Jump to content
chriscaldwell

How do I create a glassy, reflective, translucent button?

Recommended Posts

Hello,

Hope everyone is doing well.

I'm trying to figure out how to create one of those glassy looking buttons, but can only get so far.

The transparency tool is the key I suppose, but I cannot seem to get it right. How do you clip it so the piece of shape that I used to create the highlight isn't exported?

Can someone explain how to do this with a capsule type of button shape? I have attached my work so far. I want to be able to scale this down to try different sizes from say 275px wide to 350px.

Thank you so much,

Chris

 

order-now-orange.afdesign

orange.afdesign

Share this post


Link to post
Share on other sites

Without knowing exactly what you are trying to achieve it’s difficult for us to know how close you are to achieving it.
Would you be able to give us an example of what you are trying to replicate?
P.S. Where do you expect to use this style of button?

Share this post


Link to post
Share on other sites

Like this Garry… You can make more complex glass but this is at it’s simplest, a rounded rectangle filled with white and a transparency gradient added.

1560927423_ScreenShot2020-05-25at10_48_23.png.cd1040ff9434dbeca1970ae3975989e2.png

orange glass btn.afdesign


iMac 27" Late 2015 Fully Loaded, iMac 27" Mid 2011 both running High Sierra 10.13.6 - Affinity Designer/Photo & Publisher - Illustrator CC, Inkscape, Blender, Sketchup, Pepakura Designer, MTC, Pixelmator & Pixelmator Pro + more... XP-Pen Artist-22E, - iPad Pro 12.9 B|  

Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions

Share this post


Link to post
Share on other sites

Yes, like that.

Plenty of tutorials out there for Illustrator, CorelDRAW etc. that will show you the general idea at least 🙂

 

 


"You don't have to answer almost every new post!" 🙄

- Sinclair Goodwin

Share this post


Link to post
Share on other sites

You could also use this: http://www.holshousersoftware.com/glass/ a bit of a cheat but produces nice results.

drawButton.png.18e65485b7f171af6cd9eee3f7707cbd.png


iMac 27" Late 2015 Fully Loaded, iMac 27" Mid 2011 both running High Sierra 10.13.6 - Affinity Designer/Photo & Publisher - Illustrator CC, Inkscape, Blender, Sketchup, Pepakura Designer, MTC, Pixelmator & Pixelmator Pro + more... XP-Pen Artist-22E, - iPad Pro 12.9 B|  

Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions

Share this post


Link to post
Share on other sites

When the fx are improved we can have slick glassy styles unless someone already has some?


iMac 27" Late 2015 Fully Loaded, iMac 27" Mid 2011 both running High Sierra 10.13.6 - Affinity Designer/Photo & Publisher - Illustrator CC, Inkscape, Blender, Sketchup, Pepakura Designer, MTC, Pixelmator & Pixelmator Pro + more... XP-Pen Artist-22E, - iPad Pro 12.9 B|  

Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions

Share this post


Link to post
Share on other sites
1 hour ago, GarryP said:

And there are other possibilities here: https://cooltext.com/
One simple example is this: https://cooltext.com/Logo-Design-Still-Cool-Button
However, I think it’s still worth knowing where they are going to use the button and how they are going to use it.

I think the text “Order Now” is the clue, so on an ecommerce website, Ebay, or some such.


iMac 27" Late 2015 Fully Loaded, iMac 27" Mid 2011 both running High Sierra 10.13.6 - Affinity Designer/Photo & Publisher - Illustrator CC, Inkscape, Blender, Sketchup, Pepakura Designer, MTC, Pixelmator & Pixelmator Pro + more... XP-Pen Artist-22E, - iPad Pro 12.9 B|  

Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions

Share this post


Link to post
Share on other sites

Wow, you guys are truly amazing. I'm grateful for this help! Now, I can work on the next element.

Thank you all very much. I'm going to put it together right now.

Chris

Share this post


Link to post
Share on other sites
18 hours ago, firstdefence said:

I think the text “Order Now” is the clue, so on an ecommerce website, Ebay, or some such.

Not necessarily.
It could be for use in an app, or it could be for a button with a hyperlink in a PDF, or the text could just be ‘filler’ as an example prior to making what’s actually needed, or probably many other things.
I asked the question so we could know, rather than guessing what Chris’ intentions were.

Share this post


Link to post
Share on other sites
16 minutes ago, GarryP said:

Not necessarily.
It could be for use in an app, or it could be for a button with a hyperlink in a PDF, or the text could just be ‘filler’ as an example prior to making what’s actually needed, or probably many other things.
I asked the question so we could know, rather than guessing what Chris’ intentions were.

True, 🤔


iMac 27" Late 2015 Fully Loaded, iMac 27" Mid 2011 both running High Sierra 10.13.6 - Affinity Designer/Photo & Publisher - Illustrator CC, Inkscape, Blender, Sketchup, Pepakura Designer, MTC, Pixelmator & Pixelmator Pro + more... XP-Pen Artist-22E, - iPad Pro 12.9 B|  

Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions

Share this post


Link to post
Share on other sites

Thanks for the extra info’ Chris.
I only asked the question as I have two concerns about using that sort of button on a website:
1. That kind of ‘fancy’ or ‘overly-styled’ button is generally considered to be a bit ‘old fashioned’ nowadays. (A bit like having flashing text or a scrolling marquee.) If it fits with the overall website design then that’s absolutely fine, of course, but a lot of websites tend to go with something much more plain and that’s what users are used to seeing.
2. If the text for the button is contained within the raster image then it will be difficult (if it’s at all possible) for screen readers or text-based browsers to see it. This means, amongst other things, that some visually impaired users may have difficulty finding the button as their browser may not be able to tell them where it is.

If these neither of these concerns have a negative impact on your design then that’s okay, but I think it’s worth pointing them out just in case.

Share this post


Link to post
Share on other sites

A lot of the elements on multi device websites are now CSS coded: https://codepen.io/desandro/pen/KqQbaq


iMac 27" Late 2015 Fully Loaded, iMac 27" Mid 2011 both running High Sierra 10.13.6 - Affinity Designer/Photo & Publisher - Illustrator CC, Inkscape, Blender, Sketchup, Pepakura Designer, MTC, Pixelmator & Pixelmator Pro + more... XP-Pen Artist-22E, - iPad Pro 12.9 B|  

Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions

Share this post


Link to post
Share on other sites

Going down the CSS route – as given in the example by firstdefence above – would be my choice if I wanted to use this sort of button on a website as the text within the button is discoverable by users in all browsers, even if images are prohibited (for whatever reason).

Share this post


Link to post
Share on other sites
6 hours ago, GarryP said:

If the text for the button is contained within the raster image then it will be difficult (if it’s at all possible) for screen readers or text-based browsers to see it.

Screen readers have no way of knowing what text, if any, is included in a raster image. That’s what the HTML ‘alt’ attribute is for.


Alfred online2long.gif
Affinity Designer/Photo/Publisher 1.7.3.481 • Windows 10 Home (4th gen Core i3 CPU)
Affinity Photo for iPad 1.8.2.174 • Designer for iPad 1.8.2.4 • iPadOS 13.5.1 (iPad Air 2)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

Please note the Annual Company Closure section in the Terms of Use. These are the Terms of Use you will be asked to agree to if you join the forum. | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.