<\/p>\n

In this simple tutorial, we are going to use Adobe Illustrator make buttons that have a glass-like look to them.<\/p>\n

I’m using Illustrator rather than Photoshop because once you make your button in Illustrator, you are left with a much more flexible button graphic that can be used to make more buttons of different sizes. <\/p>\n

… This is thanks to Illustrator being a vector based program\/application – vector graphics can scale up or down without losing any resolution. <\/p>\n

On the other hand, Photoshop based images are pixel based, as such, if you scale\/resize a button made there, you will see a degradation of the image quality.<\/p>\n

Let\u2019s begin:<\/p>\n

Step 1:<\/strong> Open Illustrator and create a new \u201cWeb Document\u201d of 800 x 600 pixels. Make sure \u201cpixels\u201d is used as a unit.<\/p>\n

<\/p>\n

Step 2<\/strong>: Select the \u201cRounded Rectangle Tool\u201d under the \u201cShape Tool\u201d and click once on the artboard.<\/p>\n

<\/p>\n

Step 3:<\/strong> Make a square of 100 x 100 pixels with a corner radius of 12 pixels.<\/p>\n

<\/p>\n

Step 4:<\/strong> Select your square and give it a fill color by double clicking the \u201cFill Color Tool\u201d.<\/p>\n

<\/p>\n

Step 5<\/strong>: Give it a slightly darker stroke color as shown in the screen capture.<\/p>\n

<\/p>\n

This will be our base shape.<\/p>\n

<\/p>\n

Step 6:<\/strong> Select the square and press \u201cCommand + C\u201d to copy (\u201cCtrl + C\u201d for Windows users) and then \u201cCommand + V\u201d to paste in front. This will position our copy square right on top of the first one.<\/p>\n

Step 7:<\/strong> Select our new square and holding down \u201cAlt + Shift\u201d take one of the corners of the bounding box and resize it to a slightly smaller square.<\/p>\n

<\/p>\n

Step 8<\/strong>: Remove the stroke from this smaller square by selecting the stroke color tool and then press the \u201c \/ \u201c key.<\/p>\n

Step 9:<\/strong> Apply a gradient to the smaller square by selecting the Fill Color Tool and then press the \u201c > \u201c key.<\/p>\n

Step 10:<\/strong> Bring up your gradient palette with \u201cCommand + F9\u201d (Mac) or \u201cCtrl + F9\u201d (Windows) and apply a linear gradient type with 90 degree angle gray to black like is shown in the image below. Make sure the black is RGB black, which is darker than CYMK. Then set a \u201cscreen\u201d blend mode to the square.<\/p>\n

<\/p>\n

Step 11:<\/strong> Select the small square and press \u201cCommand + C\u201d to copy (\u201cCtrl + C\u201d for Windows users) and then \u201cCommand + V\u201d to paste in front. Rotate the new square 180 degrees.<\/p>\n

Step 12:<\/strong> With the latest square selected open the \u201cGradient Palette\u201d again and modify the gradient to look like the one shown bellow.<\/p>\n

<\/p>\n

Step 13:<\/strong> Select the original base square and go to the \u201cEffect\u201d menu. Choose Stylize > Drop Shadow.<\/p>\n

<\/p>\n

Now the only thing left is for us to add the content of our button. I have the RSS logo ready here. I applied a soft gradient from gray to white and a light
\ndrop shadow. If you are doing text you have to convert it to outlines before you can apply gradients and shadows to it (\u201cCommand + Shift + O\u201d for Mac, \u201cCtrl + Shift + O\u201d for Windows).<\/p>\n

<\/p>\n

Step 14:<\/strong> We change the depth of the RSS logo. We have to place it underneath the squares with the gradients so that it gets affected by the \u201cscreen blend mode\u201d.<\/p>\n

<\/p>\n

There we have it; a nice and simple way to make glass button. The best part is that modifying this button is extremely simple.<\/p>\n

New color: just select the base square and give it a new fill and stroke color
\nNew size: select all items and resize to your liking.<\/p>\n

<\/p>\n

Saving the button: With nothing else but your button on your document, go to the \u201cFile\u201d menu > Save for Web and Devices. Select the PNG-24 preset and check \u201ctransparency\u201d so that your button blends to the background in your website.<\/p>\n

Click save and on the dialog box on the \u201cFormat\u201d section select \u201cImages Only\u201d.<\/p>\n

<\/p>\n

To insert your button in your website and make it a link you only need the code bellow:<\/p>\n

<a href=”link”><img src=”path\/button.png” width=”100″ height=”100″ \/><\/a><\/strong><\/p>\n

In the exporting step I chose to use PNG over GIFF for a couple of reasons. First, PNG has better compression than GIFF and PNG is lossless. Although PNG may have some trouble rendering in older browsers, let\u2019s be honest, no one should be using Microsoft IE anymore \u2013 download something better!<\/p>\n","protected":false},"excerpt":{"rendered":"

In this simple tutorial, we are going to use Adobe Illustrator make buttons that have a glass-like look to them. I’m using Illustrator rather than Photoshop because once you make your button in Illustrator, you are left with a much more flexible button graphic that can be used to make more buttons of different sizes. […]<\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[16,8],"tags":[],"_links":{"self":[{"href":"http:\/\/www.killersites.com\/magazine\/wp-json\/wp\/v2\/posts\/340"}],"collection":[{"href":"http:\/\/www.killersites.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.killersites.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.killersites.com\/magazine\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"http:\/\/www.killersites.com\/magazine\/wp-json\/wp\/v2\/comments?post=340"}],"version-history":[{"count":13,"href":"http:\/\/www.killersites.com\/magazine\/wp-json\/wp\/v2\/posts\/340\/revisions"}],"predecessor-version":[{"id":359,"href":"http:\/\/www.killersites.com\/magazine\/wp-json\/wp\/v2\/posts\/340\/revisions\/359"}],"wp:attachment":[{"href":"http:\/\/www.killersites.com\/magazine\/wp-json\/wp\/v2\/media?parent=340"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.killersites.com\/magazine\/wp-json\/wp\/v2\/categories?post=340"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.killersites.com\/magazine\/wp-json\/wp\/v2\/tags?post=340"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}