IGMO » Home
IGMO


Simple Glassy Orb

Simple Glassy Orb


For this tutorial, you are creating a simple, glassy orb which could be used for a logo, button or even an icon.


  1. Create a new blank document in Inkscape. In this tutorial I left the settings as the default which is exactly 744.09 x 1052.36 pixels for the dimensions.


  2. Select the circle tool (shortcut: F5) and drag out the circle whilst holding the [Shift] key. Through using [Shift], the circle remains perfectly round.

    Image 001


  3. Now we’re going to duplicate this circle. Select your shape and right-click and select ‘Duplicate’ (shortcut: Ctrl + D).

    Image 002


  4. Once you’ve duplicated your circle, it is time to shrink the new, duplicated shape. If your circle isn’t directly above the original circle, please move it now. By default, though, your circle should already be positioned directly above the original circle.


  5. Select the upper circle and click on a corner handle. Hold down [Ctrl] + [Shift] and drag the handle inwards until it looks similar to mine. This top-most circle will later become the glassy centre of the orb.

    Image 003 Image 004


  6. It is now time to modify the colour of the larger, outer circle. Select the shape and click on one of the colours at the bottom of the screen. I changed mine to grey.

    Image 005

    Image 006


  7. Here comes the time consuming part. Select the red, innermost circle and right-click and select ‘Fill and Stroke’ from the menu (shortcut: Ctrl + Shift + F). The dialog box will look something like this.

    Image 007


  8. As you can see, our shape is using a ‘Flat colour’ whereas we need to use a ‘Radial gradient’.

    The 1st stop uses an RGBA value of ‘00ccd3c8’.

    Image 008

    The 2nd stop uses an RGBA value of ‘00dce296’.

    Image 009

    The 3rd stop uses an RGBA value of ‘00f8ff96’.

    Image 010

    And lastly, the 4th stop uses an RGBA value of ‘17fff864’.

    Image 011


  9. Now that the centre is complete, it is time to adjust the bordering circle.

    Image 012

    Make sure that the outer circle is selected and bring up the ‘Fill and Stroke’ dialog box (shortcut: Ctrl + Shift + F). Once again, we are using a ‘Radial gradient’ with the following gradient settings.

    The 1st stop uses an RGBA value of ‘00c7cdff’.

    Image 013

    The 2nd stop uses an RGBA value of ‘ffffffff’.

    Image 014

    And thirdly, the last stop uses an RGBA value of ‘e3e3e8ff’.

    Image 015


  10. Duplicate the glassy circle (shortcut: Ctrl + D)

    Image 016


  11. Since we are going to create a glossy shine, the gradient needs to be edited. Instead of the ‘Radial gradient’, we are using a ‘Linear gradient’.

    Image 017

    Below, I have used three gradient stops. The 1st stop uses an RGBA value of ‘ffffffff’ and is completely opaque.

    Image 018

    The 2nd stop also uses an RGBA value of ‘ffffffff’ and is completely opaque. The stop is positioned at an offset value of 0.46.

    Image 019

    And the 3rd stop uses an RGBA value of ‘ffffff00’ and is completely transparent.

    Image 020


  12. Now that the gradient is finished, we are going to edit the borders around our two shapes. For the outer circle, I used a ‘Flat colour’ with an RGBA value of ‘b0b0b0ff’, 100% opaque and a slight blur of 0.6%.

    Image 021

    The stroke is 2 pixels wide and is sharply joined without any markers.

    Image 022

    Since the inner circle does not have a stroke, simply select ‘No paint’.

    Image 023


  13. Resize the glossy object so that it looks similar to mine:

    Image 024

    As you can see, the adjustments we made have helped to create a more profound and polished look for the orb.


  14. Once you are happy with the results, click ‘OK’ and the effect is complete!

    Final Result

    Image 025

    Alternate Result

    Image 026

 

Copyright © 2007-2008 IGMO. Some Rights Reserved.

Creative Commons License

This work is licenced under a Creative Commons Licence
All other trademarks are the property of their respective owners.