Online Gradient Image Maker with Button Generator
Text-It Samples Reference for Web 2.0 graphics

General Instructions
  1. All of the sample graphics images were generated in OGIM and Text-it engines.
    There is no software download or setup at your computer. Everything would be done in your browser.

    In order to open any of the sample images for editing  or create your own graphics in Text-It engine, make sure  to create a free account first, or logon to the account if already registered. (Note: Find more information about Text-It engine - graphics generator HERE)
     
  2. Follow Pat 1 of the tutorial at video tutorials page or follow brief instructions below:

     




Sample Images OGIM Ext. Images Text Layer Styles
A recent introduction of new gradient types (radial, rectangle, shape burst) in Text-It, made possible to generate images with lesser number of layers. As a result, a set of shiny badges below was generated with only one layer on a flat base image and is ready for the text-over at the next layer. Change shape using different symbols in picture fonts. Hatch is optional. If you need to vary the image size, then select appropriate image dimensions in OGIM for the base image (default is 120x120 px.) and then vary the font size after referenced style below is applied at Layer 1. Reference None
see reference below images
shiny badge shiny badge shiny badge shiny badge
Layer 1
shine-orange-badge shine-teal-badge shine-purple-badge shine-red-badge
Similar to the above badges - only in metal casing. Round casing is generated in OGIM as a base image. Change glass color at Layer 1. Add text or symbols at Layer 2 and up. Reference None
see reference below images
Layer 1
round-badge-a round-badge-b round-badge-c round-badge-d
Disco light badges painted with 4 layers. Layer 1 renders inner contour and is common for all images. Change color (if necessary) at Layers 2, 3 and 4. Layer 4 is optional and renders a hatch. Reference None
see reference below images
Layer 1
disco-light-L1
Layer 2
disco-light-g-L2 disco-light-r-L2 disco-light-b-L2 disco-light-y-L2
Layer 3
disco-light-g-L3 disco-light-r-L3 disco-light-b-L3 disco-light-y-L3
Layer 4
disco-light-g-L4 disco-light-r-L4 disco-light-b-L4 disco-light-y-L4
A glass ball is painted mainly utilizing shadow "Blur" feature. Round symbol from Webdings font was used to create a glass ball shape, shadow and reflection attributes. Ball palette can easily be changed by varying colors for respective layers. Reference None glass-ball-L1
glass-ball-L2
glass-ball-L3
glass-ball-L4
glass ball red glass ball blue
Another variation of gloss ball. Review the tutorial for creating this gloss ball from the scratch. Reference none glass-ball1-L1
glass-ball1-L2
glass-ball1-L3
glass-ball1-L4

see tutorials for building ball from the scratch
 glass ball green glass ball blue
Glass/Metal buttons are built by generating OGIM images and adding them to Text-It layer on the fly. See the tutorial for reference and guidelines.     see tutorial for reference and guidelines.
square glass metal button red square glass metal button green square glass metal button blue square glass metal button yellow
Round Glass/Metal buttons are built by generating OGIM images and adding them to Text-It layer on the fly. Review the tutorial for square buttons above to successfully build images with 2 engines - OGIM and Text-It. Reference
Common:
Layer 2

Blue:
Layer 3

Yellow:
Layer3

Green:
Layer3

Pink:
Layer3
Common:
round-glass-L1
round-glass-L2

Blue:
round-glass-L3b
round-glass-L4b

Yellow:
round-glass-L3y
round-glass-L4y

Green:
round-glass-L3g
round-glass-L4g

Pink:
round-glass-L3p
round-glass-L4p
round glass metal button blue round glass metal button yellow round glass metal button green round glass metal button pink
Same as above, only resized. See the tutorial for resizing graphics layers     see tutorial
 round glass metal button blue
Glow chrome buttons set is another variation created with "Add to Layers" from OGIM. But this time, the added to Layer 1 OGIM generated image, is not used directly but rather for rendering symbol at Layer 1 with a texture. Both, Layer 1 and Layer 2 in the samples below are using the same symbol in Text-It (but it could also be different as long as you properly size it and position). Layer 3 is just a light flare. Add to Layers tutorial. Reference Add to Layer
Layer 1
chrome-shape-L1
chrome-shape-L2
chrome-shape-L3
 
round glass metal button red star glass metal button red arrow glass metal button red square glass metal button red
"Watery" Gloss shine balls. 8 Text-It layers with 2 "Add to Layer" OGIM images. To change ball shade, simply replace colors in OGIM for image destined to Layer 3. Add to Layers tutorial. Reference

Common:
Layer 2

Pink:
Layer 3

Blue:
Layer 3

Yellow:
Layer 3

gloss-ball-L1
gloss-ball-L2
gloss-ball-L3
gloss-ball-L4
gloss-ball-L5
gloss-ball-L6
gloss-ball-L7
gloss-ball-L8
 
glass shiny pink ball icon glass shiny blue ball icon glass shiny orange ball icon
Stylish beveled ball in metal casing. Ball color may be changed with some effort by changing respective shades for 3 layers in Text-It. Reference None
see reference below images
Layer 1
outset-ball-bl-L2 outset-ball-s-L2 outset-ball-o-L2 outset-ball-b-L2
Layer 2
outset-ball-bl-L3 outset-ball-s-L3 outset-ball-o-L3 outset-ball-b-L3
Layer 3
outset-ball-bl-L4 outset-ball-s-L4 outset-ball-o-L4 outset-ball-b-L4
Another set of balls with 1, added to Layer 1 OGIM image. Border is made with texture at Layer 1 and the body could be selected as Layer 3 from "Spheroids" font. Play with "Cropbats" font at layer 5 for different light flares and blur it if necessary. Add to Layers tutorial. Reference  

Gray:
Layer 1

Green:
Layer 1

Blue:
Layer 1

glow-ball-L1
glow-ball-L2
glow-ball-L3
glow-ball-L4
glow-ball-L5

 
gray glass ball button green glass ball button blue glass ball button
Here are some layering tips for making glass marbles variation from samples below.
Layer 1 - Select shadow gradient colors, transparency and position.
Layer 2 - Select main gradient colors.
Layer 3 - Select a shape from "spheroids" font and select main gradient colors.
Layer 4 - Select round reflection mask from "mask shapes" font and play with position, color, size and warp for the best light reflection spot.
Layer 5 - Select figure from "stains" font and play with position and size for light flares.
Layer 6 - Select shape from any symbol font, play with position controls, choose correct angle, warp and color for the best possible blending with the ball surface. Add shadow blur to highlight glass depth.
Reference None
marble-green-L1
marble-green-L2
marble-green-L3
marble-green-L4
marble-green-L5
marble-green-L6

marble-red-L1
marble-red-L2
marble-red-L3
marble-red-L4
marble-red-L5
marble-red-L6
green glass marble ball red glass marble ball

 

 

Web 2.0 graphics. Glass buttons with 3D text rendering. Text reflection and glass surface. Gloss icons and metal icons. Online graphics generator for glossy RSS Icons. Glossy square icons and gloss button. Glass ball and gloss ball, Glow chrome buttons, Gloss shine balls, glass marbles.

8 randomly selected shared images (click on image to load it into OGIM)  All Shared Images
OGIM· OGIM Gallery· OGIM Gallery RSS· OGIM Help· RC-OGIM Templates
About Text-It· Text-It Samples· Text-It Samples (older)· Text-It Tutorials
Armenia Flags Special· Russia Flags Special· USA Flags Special· UK Flags Special· Canada Flags Special