Oval marquee selection as shown in the image. With the marquee selection still active, select the orb-bottom layer and press Delete again to clear what is outside the orb button for this layer With the over-glow layer selected, press Delete to clear what is outside the orb button for this layer. Then Inverse the selection by going Select > Inverse or with the shortcut key Shift + I. Now you will have the shadow for the orb done.Ĭtrl + left click on the orb-bg thumbnail to have a marquee selection over it. With the orb-shadow selected, press the ↓ key around 4 - 5 times to shift the orb-shadow Then, shift this orb-shadow layer down, right below orb-bg layer. Now, duplicate the orb-bottom layer, name this layer orb-shado w. Then you will have the glow effect as what is shown on the above image. With the over-glow layer selected, bring out the Gaussian Blur window again, Filter > Blur > Gaussian Blur, this time give a 9.0 px blur to it. With the Eclipse Tool, draw another oval shape like what is shown in the image. However, it is still not done yet as we are goin to make theĬreate another new layer in between orb-bottom and orb-bg. Is on the right path, you will have something like is shown on the With the orb-bottom layer, selected, bring out the Gaussian Blur window by going to Filter > Blur > Gaussian Blur.
Using again the Eclipse Tool, draw a small oval shape at the bottom of the orb with black(#000000) fill. Make another new layer in between orb-glass and orb-bg. Change the opacity of the orb-glass if you wanted to. With the orb-glass layer select, press delete twice.Īfter the deletion, you will come close to what’s shown in the above image. Open up the feather option by going to Select > Feather or with the shortcut key Ctri + Alt + D. Then use the round marquee tool, draw a marquee selection 1/3 below the orb-glass which was created on step-2, as shown in the image. Using the Eclipse Tool again, draw an oval shape as how it is shown on the above image, with white(#fffff) color fill of course. Give the circle a gradient color of #2a2a2a on top and #3e3e3e at the bottom. Name this layer as - orb-bg, with the Eclipse Tool, draw a perfect circle of size similar as shown as the above picture. Here for this tutorial, I’ll be usingĢ00×200 px.
**note** this is a very basic tutorial and though we have use Photoshop to create the 2 Orbs that will be used, you can just as easily use Fireworks.Ĭreating a document of any size that you want, as later on we are going
Round office orb button how to#
Orb Button and Colored Links - DW Sript Part III: will show you how to create div's to use animation and then set specific link colors throughout the pages. Orb Button Effect - DW Script Part II: will show on how to make a simple basic mouse over effect with html/css. Orb Button Effect - Photoshop Part I : will show how the button is made. Therefore this tutorial will spilt into 3 Over effect in html/css, and define link properties for different parts of the web page. This set of tutorials will show you how to create a very basic mouse Orb Button Effect - Photoshop/Fireworks: Part I
0 kommentar(er)
