Orb Button Effect – Photoshop Part



This set of tutorial will show on how to create a very basic mouse over effect in html/css. Therefore this tutorial will spilt into 2 parts:

  1. Orb Button Effect – Photoshop Part : which will show how the button is made
  2. Orb Button Effect – Dreamweaver Part : which will show on how to make a simple basic mouse over effect with html/css

**note** this is a very basic tutorial


  1. Start by creating a document of any size that you want, as later on we are going to crop it to the desire size. Here for this tutorial, I’ll be using 200×200 px. Fill the background with white color. Create a new layer, name this layer as – orb-bg, with the Eclipse Tool, draw a perfect circle of size similar as shown as the above picture. Give the circle a gradient color of #2a2a2a on top and #3e3e3e at the bottom.

  2. Secondly, create another new layer. Name this layer orb-glass. 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.

  3. 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. Open up the feather option by going to Select > Feather or with the shortcut key Ctri + Alt + D. Give it a 30px feather. With the orb-glass layer select, press delete twice.

  4. After the deletion, you will come close to what’s shown in the above image. Change the opacity of the orb-glass if you wanted to.

  5. Make another new layer in between orb-glass and orb-bg. Name this layer orb-bottom. Using again the Eclipse Tool, draw a small oval shape at the bottom of the orb with black(#000000) fill. As how is shown on the above image.

  6. With the orb-bottom layer, selected, bring out the Gaussian Blur window by going to Filter > Blur > Gaussian Blur. Give a 2.8px of blur.

  7. If everything is on the right path, you will have something like is shown on the image. However, it is still not done yet as we are goin to make the mouse over effect glow.

  8. Create another new layer in between orb-bottom and orb-bg. Name this layer over-glow. With the Eclipse Tool, draw another oval shape like what is shown in the image. Of course with the fill color of #00c1de

  9. 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. Then you will have the glow effect as what is shown on the above image.

  10. Now, duplicate the orb-bottom layer, name this layer orb-shadow.

  11. Then, shift this orb-shadow layer down, right below orb-bg layer. With the orb-shadow selected, press the ↓ key around 4 – 5 times to shift the orb-shadow object 4 pixel down. Now you will have the shadow for the orb done.

  12. Ctrl + left click on the orb-bg thumbnail to have a marquee selection over it. Then Inverse the selection by going Select > Inverse or with the shortcut key Shift + I. With the over-glow layer selected, press Delete to clear what is outside the orb button for this layer.

  13. 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

  14. Now the final step to complete the orb button. Using the round marquee tool, draw an oval marquee selection as shown in the image. Bring out the Feather window, Select > Feather or with the shortcut key Ctri + Alt + D. Give again 30px feather. With the orb-bottom layer selected, press Delete twice.

  15. This will be the mouse over effect for your orb button. You can add any icon on the orb if you want to, but for here I will just left it blank.

———————————————

Now is time to export the required images to be use during the html progress later on


  1. First , crop the images which was done from the above 15 steps to a smaller size. Select the Crop Tool (in case you don’t know, the crop tool is at the tool bar with the logo shown on the small image at the corner. Select the appropriate size to crop. After the selection is confirmed, double click on the selection.

  2. Now to export the default mouse image, hide the over-glow layer by clicking on the eye icon.

  3. To Export, go to File > Save For Web or with the shortcut key Ctrl + Alt + Shift + S, choose your desire option. In here I will use the .jpg file format with 60% quality. Save the file as mouse-active.

  4. Now for the mouse over image. Unhide the over-glow layer by doing the same thing on how to hide it. Again Export, go to File > Save For Web or with the shortcut key Ctrl + Alt + Shift + S, with the same option, save the file by the name of mouse-over.

Now we are done with the required images. For the html/css part, please proceed to Orb Button Effect – Dreamweaver Part




DiggThis

Related Entries


162 Comment(s) On This Topic

45+ Free Photoshop Buttons | Designrazzi said during July 26th, 2013 at 5:10 am

[…] Orb Button Effect – Photoshop Part – MORE / INFO […]

Magazine wordpress themes said during August 9th, 2013 at 9:16 pm

It is appropriate time to make some plans for the
future and it is time to be happy. I’ve read this post and if I could I desire to suggest you few interesting things or suggestions. Perhaps you could write next articles referring to this article. I desire to read even more things about it!

30+Tutorials For Creating Buttons and Badges In Photoshop | DesignurgeDesignurge said during August 24th, 2013 at 2:18 am

[…]  Perfect Shine Button or Icon  Orb Button Effect – Photoshop Part […]

35 Easy Photoshop Tutorials for Creating Buttons and Badges said during August 25th, 2013 at 2:40 pm

[…] Orb Button Effect  […]

45+ Free Photoshop PSD Buttons | ThemeBucks said during December 8th, 2013 at 10:31 am

[…] Orb Button Effect – Photoshop Part – MORE / INFO […]

Bilgeç said during December 10th, 2013 at 5:45 am

Bilgec bilgi ve paylaşım ansiklopedisi. İnternetteki yeni bilgi arşiviniz. Bilgeç sizlerle

Adobe Photoshop Tutorials – Best Of | Internet Business said during March 27th, 2014 at 12:31 am

[…] Orb Button Effect This set of tutorial will show on how to create a very basic mouse over effect in html/css. Therefore this tutorial will spilt into 2 parts: […]

45+ Free Photoshop PSD Buttons | Tutorials WordPress - SEO - Hosting Review - Web Development said during March 31st, 2014 at 10:59 pm

[…] Orb Button Effect – Photoshop Part – MORE / INFO […]

e-ticaret said during April 23rd, 2014 at 3:00 pm

I’m just extremely prompted along with your publishing skills while efficiently similar to the structure on your own blog. Is the your paid for style as well as did you modify the item yourself? In any event continue being the good quality crafting, it can be scarce to search a good site like this one right now.

45 Best Photoshop Tutorials for Creating Buttons and Badges said during April 29th, 2014 at 11:10 am

[…] Source […]

20 Best Photoshop Tutorials for Creating Buttons | said during December 23rd, 2014 at 6:17 pm

[…] Orb Button Effect […]

Ceiba3D Studio | 20 Best Photoshop Tutorials for Creating Buttons said during December 26th, 2014 at 4:13 pm

[…] Orb Button Effect […]

Leave a Reply