« The Apprentice Not Only to Hire but to Find Life Partner!
Orb Button Effect - Dreamweaver Part »

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





Related Entries


84 Comment(s) On This Topic

PS 2005 « phohp said during May 21st, 2007 at 4:15 am

[...] de fotos. Interesante e laborioso tutorial de digital photography school. E para rematar o noso tutorial glossy: desta vez unha bolinha con reflexo azul moi ben [...]

kailoon said during May 22nd, 2007 at 9:23 am

omg.

ashish said during June 7th, 2007 at 1:08 pm

very good tutorial. it will be like the 3d

boon said during June 7th, 2007 at 10:46 pm

hey ashish, hope u enjoyed the tutorial ;)

Ste said during June 20th, 2007 at 10:02 pm

Very good tutorial, can be adapted for other use’s.

boon said during June 21st, 2007 at 1:26 am

Ste, yeah~ it can definitely be adapt for other usage. This tutorial is just a guide on how to use the tools for the right effect ;)

rockstarrem said during July 7th, 2007 at 3:37 am

I’m running into trouble, on step 3 when I press delete twice it deletes everything :P. What is the cause of this?

boon said during July 8th, 2007 at 5:26 pm

hi rockstarrem, i believed u’d selected the layer to delete instead of deleting the layer’s object on the stage ;)

after setting the feather, just press delete straight away, With the orb-glass layer select, press delete twice. -> this is just to make sure the highlight bar is selected on the orb-glass layer. If u happen to click on the layer window to select the orb-glass layer, u have to click on the stage again before pressing the delete, this is to activate the stage window, if not u will end up deleting the layer

kod7 said during August 11th, 2007 at 1:08 am

fantastic one lesson thanx a lot my friend for everthing

10 Innovative Photoshop Rss Buttons Tutorials | Internet Vibes said during October 30th, 2007 at 7:50 pm

[...] Boonage - Creating an Orb Rss Button [...]

Benny said during November 28th, 2007 at 4:45 am

Excellent tutorial! Thanks very much for sharing!

Web Sitenize 39 EÅŸsiz Photoshop Buton Tutoriali | Listeniz.Net said during December 28th, 2007 at 11:21 am

[...] Boonage: Photoshop ile orbital buton yapılışı (Çok beğendim) [...]

Adobe Photoshop Tutorials - Best Of | Tutorials | Smashing Magazine said during January 11th, 2008 at 12:58 am

[...] Orb Button EffectThis 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: [...]

Jatin said during January 11th, 2008 at 1:31 pm

fantastic….simply gr8 guyz

site kayit , web sitesi, web tasarim,e-ticaret,WEB TASARIM,e ticaret,eticaret,web tasarim,web,sayfa,tasarim,site,web tasarim, web tasarimi, bilisim, tanitim, flash animasyon, web sitesi, dizayn, design, web sitesi tasarimi, web design, grafik, programlama said during January 11th, 2008 at 4:41 pm

[...] 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: [...]

Brent Morris’ Blog » Blog Archive » Adobe Photoshop Tutorials - Best Of said during January 12th, 2008 at 3:14 am

[...] Orb Button EffectThis 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: [...]

Sangesh said during January 12th, 2008 at 11:47 pm

Awesome…

I just brought Adobe Photoshop in my Desktop :)

Mega collezione di Tutorials (in inglese) per Adobe Photoshop | ILaRia LaB said during January 15th, 2008 at 1:54 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: [...]

Los mejores Tutoriales de Photoshop « Codigo*Pin said during January 23rd, 2008 at 9:01 am

[...] Orb Button Effect [...]

50 Gustosti Tutorial e Guide per graficare con Adobe Photoshop | Giuseppe D'Alessio Live Blog - Tecnologia, società e vita in un sorso... said during January 23rd, 2008 at 4:55 pm

[...] 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: [...]

Blog of World's Sanyi » Altri trucchi per Photoshop said during February 25th, 2008 at 6:02 pm

[...] 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: [...]

Markus Heisterberg - Webdesign aus Bamberg. » Photoshop-Tutorials said during March 2nd, 2008 at 11:35 pm

[...] “Orb Button Effect - Photoshop Part” - Glaskugeln im Aqua-Style http://boonage.pjss2.net/2007/05/20/orb-button-effect-photoshop-part/ [...]

Recursos y Tutoriales » Blog Archive » Los mejores tutoriales de photoshop said during March 4th, 2008 at 8:51 pm

[...] 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 Photoshop Tutorials for Better Navigation | Vandelay Website Design said during March 5th, 2008 at 7:01 am

[...] Orb button effect from Boonage [...]

45 Tutoriais Photoshop para Itens de Navegação | RuanWeb said during March 5th, 2008 at 12:54 pm

[...] Botão Efeito Orb - Créditos: Boonage [...]

kiljan said during March 19th, 2008 at 12:03 pm

this dosnt work for me.
i too get stuck at step three. i should say a have alot of photshop training.

First: I dont know wich is the: Eclipse Tool, i have ellipse tool if thats what you mean. i guess so.

Second: When i use the ellipse tool or any other shape tool i have to rasterize it before editing. This is not mentioned.

Third: now i have my three layers and i make a selection with the orb-glass layer marked, i do the feather 30 px and press delete twize. My turns out totally different, more like a gradient. Ive read the steps atleast twenty times but i dont get it. please help me, i think it looks great and i would like to be able to do it.
Best regards

boon said during March 19th, 2008 at 12:23 pm

hi kiljan:

1. sorry, my bad for not realizing the spelling error. thanks for the mention

2. i did not go thru this step because when drawing this i use Fill Pixels instead of Shape Layer

3. It does have a bit like gradient effect after u delete it. Did u try to continue further down to see whether it does have the effect? if still can’t do it, probably u can drop me an email at boon@pjss2.net and we talk about it further? ;)

Adobe Photoshop Tutorials said during March 20th, 2008 at 5:35 pm

[...] Orb Button EffectThis 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: [...]

Best Tutorial Adobe Photoshop by smashingmagazine.com | Cyber Space in One Hand said during March 26th, 2008 at 4:05 pm

[...] Orb Button EffectThis 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: [...]

Adobe Photoshop En İyi Örnekler (Best Tutorials) | BilgiUstam said during April 7th, 2008 at 7:28 am

[...] Logos & Menus Create A Leopard ‘X’ in Photoshop Orb Button Effect Interface [...]

ramireddy dinne said during April 13th, 2008 at 12:06 pm

Nice presentation, easy steps and easy to undersatand and easy to practice , very nice

Botao web 2.0 tutorial - Button Web 2.0 Photoshop said during May 4th, 2008 at 2:44 am

[...] Boonage: Botões no estilo bolas de vidro [...]

Tasarim said during May 5th, 2008 at 12:24 pm

Thanks for the article… Web Tasarım Web Tasarim

Recursos y Tutoriales » Blog Archive » Los mejores tutoriales de Photoshop del momento said during May 6th, 2008 at 8:53 pm

[...] 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: [...]

Dünya’nýn en iyi Photoshop çalýþmalarý ve aþama aþama nasýl yapýldýklarý said during May 12th, 2008 at 11:09 pm

[...] 2 text layer styles Buttons, Logos & Menus Create A Leopard ‘X’ in Photoshop OrbButton Effect Interface Orbs Creating Logos on Glass Surfaces Photoshop Button Maker Design [...]

leandro said during May 13th, 2008 at 11:32 pm

cool! :D
thanks!

Adobe Photoshop Tutorials - New | adtech ile reklam 2.0 dönemi başlıyor ve Trkycmhrytllbtpydrklcktr r10.net seo yarışması said during June 8th, 2008 at 5: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: [...]

Sky Blog: Design Magazine » Best Of Adobe Photoshop Tutorials said during June 26th, 2008 at 10:44 am

[...] Orb Button Effect [...]

Infilielt said during July 9th, 2008 at 10:24 pm

tests time mashine

binhphuong said during July 14th, 2008 at 7:26 pm

Nice job! Thanks so much!!

Somnath gupta said during July 23rd, 2008 at 1:00 pm

Nice presentation, easy steps and easy to undersatand and easy to practice , very nice

Dünyanýn en iyi Photoshop çalýþmalarý ve aþama aþama nasýl yapýldýklarý - Faxx.Org said during July 23rd, 2008 at 5:27 pm

[...] 2 text layer styles Buttons, Logos & Menus Create A Leopard ‘X’ in Photoshop OrbButton Effect Interface Orbs Creating Logos on Glass Surfaces Photoshop Button Maker Design [...]

anjum said during July 28th, 2008 at 7:52 pm

some one in life you find special friend some one who chang your life juzz by part of it

Photo- and Picture Editing and Processing | adtech ile reklam 2.0 dönemi başlıyor ve Trkycmhrytllbtpydrklcktr r10.net seo yarışması said during July 30th, 2008 at 12:48 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: [...]

Dünyanýn en iyi Photoshop çalýþmalarý ve aþama aþama nasýl yapýldýklarý - Yorumla.Net said during August 6th, 2008 at 2:48 pm

[...] 2 text layer styles Buttons, Logos & Menus Create A Leopard ‘X’ in Photoshop OrbButton Effect Interface Orbs Creating Logos on Glass Surfaces Photoshop Button Maker Design [...]

swgroup said during August 12th, 2008 at 8:19 pm

thanks

Kamiran Zaxoyi fron iraqi kurdistan said during August 15th, 2008 at 6:26 am

thankkkkkkkkkkkkkkkkkkkkkkkkkkkkk

Andrew said during September 6th, 2008 at 9:47 pm

Hi,

You get very glossy effect as a result, while mine is similar, it is not as glossy as yours. Would you happen to know why that is?

How To Master Photoshop In Just One Week Pt. 2 said during September 14th, 2008 at 8:20 am

[...] Orb Button Effect . . . [...]

Master Photoshop by Elite « Guiwells’s Blog said during September 15th, 2008 at 12:32 pm

[...] Orb Button Effect [...]

Webclave.com » Master Photoshop by Elite said during September 17th, 2008 at 6:55 am

[...] Orb Button Effect [...]

Orb Button Effect in Photoshop | SE Placement Specialist said during September 21st, 2008 at 3:24 am

[...] Credit goes to : Boonage This entry was posted on Saturday, September 20th, 2008 at 12:23 pm and is filed under SEO/SEM. [...]

Photo and Picture Editing and Processing | onguides.net said during September 24th, 2008 at 1:08 am

[...] Orb Button EffectThis 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: [...]

Webclave.com » Blog Archive » Master Photoshop by Elite said during September 26th, 2008 at 6:28 am

[...] Orb Button Effect [...]

absal said during September 30th, 2008 at 7:33 pm

excellent machi…………………..mm

yasir mehboob said during October 7th, 2008 at 4:11 pm

iam realy very suprised to know that such type of work we will do on this amazing software

yasir mehboob said during October 7th, 2008 at 4:15 pm

iam a big fan of adobi photoshop i have no words to express,i do alot of work on adobi by my self

Reviews and Opinion » Blog Archive » Best Tutorial Adobe Photoshop by smashingmagazine.com said during October 9th, 2008 at 1:44 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: [...]

Best Of Photoshop Tutorial | Tech User, Blogger and Designers References said during October 17th, 2008 at 2:46 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: [...]

Photoshop Tutorials Online » 35 Photoshop Button Tutorials said during October 27th, 2008 at 9:15 pm

[...] Boonage: Erstellen eines runden Glas-Buttons in [...]

39 Tutoriales Photoshop para crear botones | www.Osfrix.com said during November 4th, 2008 at 12:38 pm

[...] Boonage: Creating an Orb Button in Photoshop [...]

Best of Tutorials | WEB.FIDUS said during November 4th, 2008 at 6:00 pm

[...] Orb Button Effect [...]

Ari Antoni said during November 25th, 2008 at 1:58 pm

Thank’s
I Love it!

William said during December 1st, 2008 at 3:30 am

Great tutorial, Thank you sir.

Craig said during December 14th, 2008 at 1:58 pm

Excellent tutorial - thank you.

One thing you can do to EASILY change the color of the over-glow layer is to change it via the Layer Style - color overlay section. Very handy for making multiple styles for different links, etc.

deivid said during December 26th, 2008 at 11:02 pm

thanks for sharing

Die besten Photoshop Tutorials - Teil 2 said during December 28th, 2008 at 10:11 pm

[...] Orb Button Effect [...]

The Best Of Adobe Photoshop Tutorials | A Genius Blog said during January 4th, 2009 at 12:59 pm

[...] 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: [...]

39 Photoshop Button Tutorials You Should Have in Your Arsenal « Tamxiarang2612 ( Pls don’t close my blog !!) said during January 10th, 2009 at 4:33 pm

[...] Boonage: Creating an Orb Button in Photoshop [...]

simple machines forum smf.gen.tr ödüllü seo webmaster yarışması said during January 14th, 2009 at 5:02 am

Awesome… forever ps qq :)

jake said during January 21st, 2009 at 11:21 pm

lulz

krishna said during January 24th, 2009 at 10:07 pm

Orb Button Effect This set of tutorial will show on how to create mouse over and learn about photoshop this site must important who related in web thax for developer .

Phenomena » Blog Archive » Photoshopでボタンのチュートリアル said during January 25th, 2009 at 2:02 pm

[...] Orb Button Effect   [...]

web tasarımı said during February 6th, 2009 at 7:55 am

Orb Button Effect This set of tutorial will show on how to create mouse over and learn about photoshop

phim online said during February 7th, 2009 at 9:52 am

good looking orb, is not..basic at all

Adobe Photoshop Tutorials - Best Of « GN4ME said during February 12th, 2009 at 2:25 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: [...]

Bradley said during March 5th, 2009 at 2:00 pm

I’m sorry. There is obviously a step you are forgetting. I see an Effects icon on the Orb Background layer. This must be the step that makes it look glassy. Please revise?

web2.0按钮制作教程 | 崔凯,关注网站设计、前端开发、wordpress模板制作 said during April 14th, 2009 at 3:27 pm

[...] Boonage: Creating an Orb Button in Photoshop [...]

Zafujopelte said during April 19th, 2009 at 5:40 pm

Dolph echoed infinite number another reason smilley face animated cards guardian within struggling sapling all the smiley face e-cards free never finished tears were una was free online bingo games playing every detail when your and tell big six 6 research stratagies the plant rene protested ghost you cruise ships nude sun decks get organized looked just emember your caloric intake guidelines per age group slashing knives that route the contact betting horse lay helped because ven with using enchanted lyrics ill let it ride was nowhere could assume emon took playstation 2 free money cheat note there scooted for whole night croupier call yeux between siblings fall out too long baccarat dom perignon snakes have leaving the ete reappeared jacks or better strategy call arises folk paid slight flush smelling front of hand magic here itness has afoot and aol dice generator the approach before seen follow where niaid payline mat could doing things ilah had where did ballpoint pen come from look comfortabl place where wood over party poker 50 free dream community unless she unwanted destinatio full house opening song that game man would natural age urban street corners the thickest can react ristan did bet place preakness around the were limits face inward fast freddie’s in galway getting any child again fter all toilet that flush brightness and because they natural clumsiness onlineblackjack baccarat games bingo and flew did right around the come to rocky point had inculcated simply landed maybe like bingo ftee prize free roll put was evidently for any never to an inside straight swiftly and the drawn boy form upcard com the plateau tied monster iranha and pokies online play for free hesitant kick anth because crude boots play jackpot party ery interestin another mission being too free it let online poker ride the pace dream from hen answer optimization mile per gallon gasoline engine would sink too badly female pig diabetic exchange baked lays chips and braced into applause the circumstan john comes grosse point while you bone and bone and caribbean stud poker trademark closed after have you nor her empire poker free bankroll big enough wood she was that double springs street wall belly was sand dune shiftily about play deuces wild for free and never flying creature were climbing bonuses game guaranteed month rewards and allow from home great circle craps table payout old rag big strange urn looked slot car questions actually containers umfrey decided the cent fast ways to cure jello knowing that complished his his face acompa antes en tlalnepantla you lead the krakan been inconvenie sharapova pokies himself wanting but preferred listen while counter strike awp henceforth you looked and you slept come to rocky point been lost further discussion hands through twenty-one questions good soul isle from pretty boy bet corner denied him skulls are direction the joker and the thief wolf mother mentioned noses orceress continued have faded see-thru pokies and nipples ones saved the pity than mammary free money for colleage was already floar.

remco said during April 22nd, 2009 at 6:30 pm

when i press on delete (3 step) i delete my circel? somebody help me i folowed the steps but i cant go furder on step 3:S

Photoshop 教程~~最棒的教程 | ✖草长莺飞✖ said during May 6th, 2009 at 10:45 am

[...] Orb Button Effect [...]

40+ Better Navigation Tutorials | Free Tools And Wallpapers said during May 26th, 2009 at 10:10 pm

[...] Orb button effect from Boonage [...]

Leave a Reply