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
Red round icons. Generated on a flat white background image with 5 layers. Layer 1 is a shadow. Layer 2 is an icon body. Layers 3, 4 are top and bottom glow. Layer 5 is a symbol. Reference None Menu-Icons-L1
Menu-Icons-L2
Menu-Icons-L3
Menu-Icons-L4
Menu-Icons-L5
Gold round icons. Generated on a flat white background image with 5 layers. Layer 1 is a shadow. Layer 2 is an icon body. Layers 3, 4 are top and bottom glow. Layer 5 is a symbol. Reference None Menu-Icons1-L1
Menu-Icons1-L2
Menu-Icons1-L3
Menu-Icons1-L4
Menu-Icons1-L5
Black Gloss icons. Generated on a flat white background image with symbols from "mask shapes" font. Center symbol is easy to change. Reference None black-icon-L1
black-icon-L2
black-icon-L3
black-icon-L4
black-icon-L5
black-icon-L6
glassy icon glassy icon glassy icon glassy icon
Glob Icons made with 6 layers and one OGIM image added to Layer 2. Modify 2 colors for "add to layer" image in OGIM to appropriate glob color. You may also need to adjust glow at Layer 2 and continents shade and  a shadow at Layer 3. Layer 1 is a tiny bottom shadow. Layer 4 paints an icon. Modify colors shade at this layer, select different icons from symbol fonts and tweak position for the best fit. Layer 5 is a light flare and Layer 6 is a light reflection. Add to Layers tutorial. Reference Add to Layer:

Blue:
Layer 2

Orange:
Layer 2
 

small-glob-L1
small-glob-L2
small-glob-L3
small-glob-L4
small-glob-L5
small-glob-L6
Set of shiny drop badges/icons. Drop color can be changed at Layers 4 and 5. Center symbol changed at Layer 6 The rest of the layers are common for all images.
 
Reference None aqua-badge-L1
aqua-badge-L2
aqua-badge-L3
aqua-badge-L6
aqua-badge-L7

(See reference for Layers 4 and 5 below icons)
glass round cart icon glass round email icon glass round computer icon
Layer 4
aqua-badge-L4 aqua-badge-L4g aqua-badge-L4r
Layer 5
aqua-badge-L5 aqua-badge-L5g aqua-badge-L5r
Similar to the above, only on a dark background with a bit more refined light reflections, which cause to utilize all 10 available Text-It layers. Drop color can be changed at Layers 5, 6 and 7. Center symbol changed at Layer 10. Optionally change the shadow and a gradient color for this layer. The rest of the layers are common for all images.
 
Reference None light-work-L1
light-work-L2
light-work-L3
light-work-L4
light-work-L8
light-work-L9
light-work-L10

(See reference for Layers 5, 6 and 7 below icons)
glass round folder icon glass round calendar icon glass round equalizer icon
Layer 5
light-work-L5 light-work-L5g light-work-L5o
Layer 6
light-work-L6 light-work-L6g light-work-L6o
Layer 7
light-work-L7 light-work-L7g light-work-L7o
Each one of 4 layers for the gloss icon, contains the same symbol. To change, use the same referenced styles but change the symbol. To resize, set font size for the first 3 layers to the same value and 4-th layer, 1 or 2 pixels less than the rest. Suit only for the single character or a symbol. May not look as good with long text strings (although you may play with stroke size for each layer for the best result).
This by the way, is a fine display of applying a stroke. Examine each layer in a mix to see how the image was constructed.
Layer 1: forms a shadow and a thin outline border.
Layer 2: forms top left part of the stroke border.
Layer 3: forms bottom right part of the stroke border.
Layer 4: forms the symbol body with "Auto Mask" applied.
 
Reference None Pointer-L1
Pointer-L2
Pointer-L3
Pointer-L4
 
gloss round icon gloss round icon gloss round icon gloss round icon
Glassy badge created with 6 Text-It layers at base image prepared in OGIM. Change symbol, it's gradient color, stroke and "Auto Mask" at Layer 4. Layers 5 and 6 are light reflection and a flare. Layers 1, 2 and 3 shape a badge body utilizing various techniques with stroke and a gradient. Reference None gray-badge-L1
gray-badge-L2
gray-badge-L3
gray-badge-L4
gray-badge-L5
gray-badge-L6
 
glass round arrow icon glass round tools icon glass round clock icon
Glossy buttons made with 3 Text-it layers with one "Add to Layer" Image on a base image generated in OGIM. Reference to "Add to Layer" image for each button is given on the right column (Add to Layers tutorial).
If you need to change button color, then work with any "Add to layer image" in OGIM. The secret, is to get a proper colors for gradient points for smooth color transition of desired shade.
Layer 1 in Text-it paints a center symbol over added to this layer image.
Layers 2 and 3 are for light reflection and flare.
Reference Add to Layer:

Blue:
Layer 1

Green:
Layer 1

Red:
Layer 1

car-shine-L1
car-shine-L2
car-shine-L3
 
Green Drop icons generated with 5 layers. Change drop color at Layers 3 and 5 (for a symbol). Layers 1 and 2 form the border/case. Layer 4 is a reflection spot. To resize image, change base image dimension in OGIM and then resize individual layers by varying font size and warp as well as adjust layers position. Reference None triangle-glass-L1
triangle-glass-L2
triangle-glass-L3
triangle-glass-L4
triangle-glass-L5
 
Blue drop in metal icons generated almost entirely in OGIM. Text-it is credited for details - light reflection, thin drop shadow and a symbol. Reference None blue-drop-L1
blue-drop-L2
blue-drop-L3
 
square glass arrow icon square glass recycle icon square glass shopping cart icon square glass music icon
3D Glass buttons are painted entirely in Text-It on a flat white base background. Change center symbol/text at Layer 5. Bottom symbol/text corners are warped outside horizontally for proper perspective. If you feel strong in 3D painting, redo Layers 2, 3 and 4 for different button glass shade. Layer 1 is a shadow and Layers 6, 7 and 8 are "light job". Reference None 3D-Button-L1
3D-Button-L2
3D-Button-L3
3D-Button-L4
3D-Button-L5
3D-Button-L6
3D-Button-L7
3D-Button-L8
 
round 3D glass push icon round 3D glass arrow icon round 3D glass tools icon round 3D glass power icon
Simple and easy customizable icons. Change main color and a stroke in OGIM for the base image. Add any available symbol at layer 1 in Text-it or upload your own graphics to layer 1. Last icon has one of the MS clipart images uploaded to layer 1.
Note:  Text-It thus far does not have built-in clip art library available. You may either use built-in symbol fonts library or upload your own clip files.
Reference None blue-black-stroke-L1
blue-black-stroke-L2

 
round glass keybord icon round glass email icon round glass glob icon round glass camera icon
Another simple and easy customizable icons created at the flat base background. Change icon background in OGIM base image if necessary. Change body color at Layer 1 and symbol at Layer 3. Reference None simple-L1
simple-L2
simple-L3

 
oval glass check icon oval glass magnify icon oval glass glob icon oval glass tools icon
Oval buttons are painted with 5 Text-It layers on white background. Change button colors at Layers 1-4 and text at layer 5. Layer 1 paints a shadow and can be skipped if necessary. If you need to resize the button, then resize a base image in OGIM first and then in Text-It resize all layers accordingly. Reference None oval-[color]-L1
oval-[color]-L2
oval-[color]-L3
oval-[color]-L4
oval-[color]-L5

[color] is:
yellow, red, teal or blue.
oval glass navigation button yellow oval glass navigation button red oval glass navigation button teal oval glass navigation button blue
Matte buttons painted with 6 layers. To change button color, select any dark shade and set it to the first gradient color at Layer 2. Set the same color at Layer 4. At Layer 3 set bright color of the same shade to the first stroke gradient color. And Finally choose any appropriate color for the symbol or text at Layer 6. Optionally play with colors for the base image and Layer 1 for different border appearance. Reference None matte-button-L1
matte-button-L2
matte-button-L3
matte-button-L4
matte-button-L5
matte-button-L6
 
round shiny blue button shopping cart round shiny blue button email round shiny blue button cell phone
Easy customizable navigation buttons. Change colors and symbol at layer 3 and you are done. Optionally customize amount of shadow and stroke gradient colors for the best appearance.  One image is added to Layer 2 from OGIM though.  Add to Layers tutorial. Reference Add to Layer
Layer 2
black-nav-L1
black-nav-L2
black-nav-L3
black-nav-L4
 
round glass blue arrow button round glass pink arrow button round glass green arrow button round glass orange arrow button
Black Glass icon series. Layers 1-5 paint an icon body, creating glass surface. Layer 6 is for center symbol. While changing center symbol, make sure to play with font size for the best fit. Optionally change auto-mask shape and a stroke if necessary. Last image has blurred, white, semi-transparent shadow added to the symbol to create an inner glow and one of built-in texture images to the symbol face. Reference None black-glass-L1
black-glass-L2
black-glass-L3
black-glass-L4
black-glass-L5
black-glass-L6
 
black glass iconsblack glass iconsblack glass iconsblack glass icons
Shinny glass ball buttons/icons. 3 external images generated in OGIM are added to text-it layers on the fly. Add to Layers tutorial. Text-It layers reference is below images. Last image contains a symbol applied to Layer 5 Reference Common:
Layer 1
Layer 2

Gray:
Layer 3

Brown:
Layer 3

Teal:
Layer 3 

See reference below images
 
 
gray glass button orange glass button green glass button
Layer 1/2
drop-ball-L1/drop-ball-L2
Layer 3
drop-ball-L3g drop-ball-L3b drop-ball-L3t
Layer 4
drop-ball-L4
Layer 5/6
drop-ball-L5g
=
drop-ball-L5b
=
drop-ball-L5t
drop-ball-L6

 

 

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