kmdesign » blue rectangle http://blog.karentsui.com Fri, 12 Mar 2010 07:37:18 +0000 http://wordpress.org/?v=2.8.3 en hourly 1 Create a glassy button with Adobe illustrator http://blog.karentsui.com/create-a-glassy-button-with-adobe-illustrator/ http://blog.karentsui.com/create-a-glassy-button-with-adobe-illustrator/#comments Fri, 26 Jun 2009 06:46:00 +0000 kmdesign http://blog.karentsui.com/?p=217 You may have already seen kind of this tutorial somewhere before with Photoshop. But this tutorial is going to show your here how to create it with Illustrator in some simple steps.

Step one: Create the path of the button

Select Rebounded Rectangle Tool on Tools bar and drag any size you need and fill it in blue with no stroke. Then copy [Ctrl+C] and paste [Ctrl+F] it in front. Scale it down to a small rectangle, fill it in sky blue and drag it slight below the center point of the big blue rectangle.

Use rebounded retangle tool to create path

Use rebounded rectangle tool to create path

Step Two: Create gradient effect

Firstly, select the Blend Tool. Then click the sky blue rectangle and the big blue rectangle. Or you can blend them by selecting both rectangles and go to Object -> Blend -> Make [Ctrl+Alt+B].

Select and blend rectangle

Select and blend rectangle

Step Three: Add light reflection

Make a small rebounded rectangle path and fill it with black & white Gradient. Place it on top of the rectangles. Note if your color setting is CMYK, make sure the black for the gradient is full black[C=100, M=100, Y=100, K=100]. Select the small rebounded rectangle, go to Transparency pallate, select Screen Blend Mode. If your Transparency is not showing, go to Window -> Transparency or press [Ctrl+Shift+F10].

Final Image

Final Image

Glassy button

Glassy button

]]> http://blog.karentsui.com/create-a-glassy-button-with-adobe-illustrator/feed/ 2