You are viewing our Forum Archives. To view or take place in current topics click here.
Tutorial On Orb Interface - HELPS IN WEB DESIGN
Posted:

Tutorial On Orb Interface - HELPS IN WEB DESIGNPosted:

AC-130s_Fanboy
  • TTG Natural
Status: Offline
Joined: Jan 15, 201113Year Member
Posts: 927
Reputation Power: 38
Status: Offline
Joined: Jan 15, 201113Year Member
Posts: 927
Reputation Power: 38
I KNOW THIS IS IN THE WRONG SECTION!

BUT MORE PEOPLE WIEW THIS SO ITS MORE HELPFUL!!!



Alright. Heres my tutorial on how to create an orb which can be used in web interface design.


Step One:
Create A New Composition. (500x500)

[ Register or Signin to view external links. ]

Also, delete the background, so it will be better in a .PNG


Step Two: Using your circle tool, draw a circle by holding shift and dragging it across the comp. Add the standard gradient overlay to it.

[ Register or Signin to view external links. ]

Step Three: Duplicate the layer, reverse the gradient, and make it a little smaller.

[ Register or Signin to view external links. ]

Step Four: Merge the two layers, and make the copy a little bit smaller.

[ Register or Signin to view external links. ]


Add these effects to it.

Gradient overlay:
[ Register or Signin to view external links. ]

Inner Shadow:
[ Register or Signin to view external links. ]

Inner Glow:
[ Register or Signin to view external links. ]



NOW IT SHOULD LOOK LIKE THIS:
[ Register or Signin to view external links. ]

Step Five: First, take off your inner glow and shadow, convert that layer to a smart object by right clicking it and hitting convert to smart object, and add them again.

Then,create a new layer, take your eliptical marquee tool and make a selection halway in the circle. Inverse that and then fill it with a white, so it looks like this:



[ Register or Signin to view external links. ]



Step Six: Create a clipping mask with that and turn the blend mode to soft light. Turn the opacity to 80.

[ Register or Signin to view external links. ]


Step Seven: Change your foreground color to white, and make a selection with the eliptical marquee tool at the top of your circle. Make sure its on a new layer.
Once you have the selection use the gradient tool and drag down from the top of the selection to the bottom of it.

[ Register or Signin to view external links. ]




And thats it! Feel free to add text and expiriment with colors etc..

Please thank the topic and keep it alive by posting. I hoped this helped.

END RESULT (WITH TEXT)

[ Register or Signin to view external links. ]

The following 1 user thanked AC-130s_Fanboy for this useful post:

-DerrickRose- (05-30-2011)
#2. Posted:
ValorDesigns
  • TTG Natural
Status: Offline
Joined: May 14, 201113Year Member
Posts: 910
Reputation Power: 38
Status: Offline
Joined: May 14, 201113Year Member
Posts: 910
Reputation Power: 38
OMG Amazing lol good tutorial
#3. Posted:
Trollzorr
  • TTG Addict
Status: Offline
Joined: Aug 04, 201014Year Member
Posts: 2,807
Reputation Power: 158
Status: Offline
Joined: Aug 04, 201014Year Member
Posts: 2,807
Reputation Power: 158
Great tutorial..

I in fact make these a much harder way..

So, thanks for this..

+Rep
#4. Posted:
AC-130s_Fanboy
  • TTG Natural
Status: Offline
Joined: Jan 15, 201113Year Member
Posts: 927
Reputation Power: 38
Status: Offline
Joined: Jan 15, 201113Year Member
Posts: 927
Reputation Power: 38
ValorDesigns wrote OMG Amazing lol good tutorial
Thank you broski.


Anywhon elsh?
#5. Posted:
AC-130s_Fanboy
  • TTG Natural
Status: Offline
Joined: Jan 15, 201113Year Member
Posts: 927
Reputation Power: 38
Status: Offline
Joined: Jan 15, 201113Year Member
Posts: 927
Reputation Power: 38
Image wrote Great tutorial..

I in fact make these a much harder way..

So, thanks for this..

+Rep
So your gonna use this now? LOL
#6. Posted:
Galil
  • TTG Senior
Status: Offline
Joined: Nov 26, 201014Year Member
Posts: 1,266
Reputation Power: 54
Status: Offline
Joined: Nov 26, 201014Year Member
Posts: 1,266
Reputation Power: 54
wow this is great i might try it soon
#7. Posted:
Trollzorr
  • TTG Addict
Status: Offline
Joined: Aug 04, 201014Year Member
Posts: 2,807
Reputation Power: 158
Status: Offline
Joined: Aug 04, 201014Year Member
Posts: 2,807
Reputation Power: 158
AC-130s_Fanboy wrote
Image wrote Great tutorial..

I in fact make these a much harder way..

So, thanks for this..

+Rep
So your gonna use this now? LOL


Well, I don't really make "Orbs" that much..

But if I ever do I'll keep this in mind..
#8. Posted:
Adam-
  • TTG Senior
Status: Offline
Joined: May 02, 201113Year Member
Posts: 1,298
Reputation Power: 74
Status: Offline
Joined: May 02, 201113Year Member
Posts: 1,298
Reputation Power: 74
This looks good.
thanks I might use this some time.
#9. Posted:
Envyious
  • TTG Senior
Status: Offline
Joined: Mar 27, 201113Year Member
Posts: 1,887
Reputation Power: 45
Status: Offline
Joined: Mar 27, 201113Year Member
Posts: 1,887
Reputation Power: 45
Great tutorial .

i don't make orbs but if i do .. then you know .
#10. Posted:
AC-130s_Fanboy
  • TTG Natural
Status: Offline
Joined: Jan 15, 201113Year Member
Posts: 927
Reputation Power: 38
Status: Offline
Joined: Jan 15, 201113Year Member
Posts: 927
Reputation Power: 38
Image wrote
AC-130s_Fanboy wrote
Image wrote Great tutorial..

I in fact make these a much harder way..

So, thanks for this..

+Rep
So your gonna use this now? LOL


Well, I don't really make "Orbs" that much..

But if I ever do I'll keep this in mind..
Its not really an orb its interface in an orbical design...

Is orbical a word?
Jump to:
You are viewing our Forum Archives. To view or take place in current topics click here.