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
Split buttons made on striped gradient base image prepared in OGIM. Some TIPS for making split base. Button base color is changed by assigning appropriate colors to first and last gradient points in OGIM.
3 Layers in Text-It. L1- creates a gloss mask. L2 - pointer and L3 - button text.
Click on buttons for OGIM reference. None Straight
split-button-L1
split-button-L2
split-button-L3

Mirror
split-button-mirror--L1
split-button-mirror--L2
split-button-mirror--L3
Straight Split Button

Mirrored Split Button

Below are some samples without reference. Just change the button color in OGIM and use different symbol for layer 2 and text for layer 3. Play with symbol and text gradient colors, shadow, stroke.. until desired effect is achieved.



 

"Add to Cart" buttons are generated with 4 layers on different base images. This button can be used as a template for generating various purpose buttons by changing text and symbol.
Layer 1 - is for a text
Layer 2 - is different for each button. It forms a symbol base.
Layer 3 - is a cart symbol
Layer 4 - is light reflection (optional) for a symbol "drop".
Click on buttons for OGIM reference. None cart-button-L1
[L2 reference is next to each button]
cart-button-L3
cart-button-L4
cart-button-y-L2
cart-button-b-L2
cart-button-r-L2
cart-button-g-L2
cart-button-t-L2
cart-button-bl-L2
cart-button-l-L2
Various rectangular buttons/icons on a glass surface. Load OGIM base by directly clicking the icon, then in Text-It, for Layer 1 select referenced style listed below each icon. And for Layer 2 select common for all listed icons mask style. As always feel free to change symbols, colors, size.. etc. Click on an icon for OGIM reference. None See reference listed below icon images
 
glassy icon glassy icon glassy icon glassy icon
Layer 1
glass-icon-red glass-icon-blue glass-icon-safari glass-icon-gray
Layer 2
glass-mask-rect
"Quick" glow icons on a dark background with 2 layers only. Icon's case is generated in OGIM as a base image. Layer 1 in Text-It renders glass area with radial gradient. Layer 2 is for center symbol. Reference None Blue:
Square-GlowB-L1
Square-Glow-L2

Red:
Square-GlowR-L1
Square-Glow-L2
 
glass square icon glass square icon glass square icon glass square icon glass square icon glass square icon
Page fold icons. Click on an image for the OGIM base image reference. If you change icons dimension in OGIM, then make sure to adjust position and size of the "fold" at Layer 1 and the size and position of light reflection at Layer 3. Layer 2 holds an icon symbol. Use any available font symbols, text or upload your symbol graphics to Layer 2. Click on an icon for OGIM reference. None See reference listed below icon images
 
glassy fold icon glassy fold icon glassy fold icon glassy fold icon
Layer 1
page-L1g page-L1r page-L1b page-L1c
Layer 2
page-L2g page-L2r page-L2b page-L2c
Layer 3
page-L3
Stickers in 5 shades. Color shade can be changed by manipulating 3 color gradient in OGIM while generating a base image for stickers. In addition change glow color at Layer 1 in Text-It to the appropriate shade. The rest of the layers are the same for all shades. The fold is created with triangular shapes at Layers 4, 5 and 6. Layer 2 is for light reflection and Layer 3 is a symbol. Click on an icon for OGIM reference. None sticker-L2
sticker-L3
sticker-L4
sticker-L5
sticker-L6

(See reference for Layers 1 below icons)
 
glassy sticker icon glassy sticker icon glassy sticker icon glassy sticker icon glassy sticker icon
Layer 1
sticker-L1b sticker-L1g sticker-L1c sticker-L1s sticker-L1h
Glow icons with symbols rendered by texture images. Change icon base colors by modifying an OGIM base image and bottom glow at layer 2 in Text-It. For successful simulation of glow effect, retain color shade balance while selecting a different color for the base image. Change the symbol at layer 2 in Text-It render it with any texture or gradient colors. Options are endless. Click on an icon for OGIM reference. None For layers 1 and 2 see references below icons

glow-square-L3
glow-square-L4
 
square glass home icon square glass power icon square glass icon square glass direction icon
Layer 1
glow-square-L1y glow-square-L1r
Layer 2
glow-square-L2y glow-square-L2ya glow-square-L2r glow-square-L2ra
2 variations of simple glossy RSS Icons. Make sure to select correct for each set Text-It style references listed below icons. Click on an icon for OGIM reference. None See reference listed below icon images
 
square 3D glass RSS icon square 3D glass RSS icon square 3D glass RSS icon square 3D glass RSS icon
Layer 1
RSS-L1 RSS1-L1
Layer 2
RSS-L2 RSS1-L2
Glossy square icons made on a flat white background with 4 Text-It layers. Common reference for all icons (layers 1 and 4) at the left. References for layers 2 and 3 are below. Reference None gloss-icon-L1
gloss-icon-L4

(See reference for layers 2 and 3 below icons)
 
square 3D glass icon gray square 3D glass icon green square 3D glass icon pink square 3D glass icon blue
Layer 2
gloss-icon-L2gy gloss-icon-L2g gloss-icon-L2p gloss-icon-L2b
Layer 3
gloss-icon-L3gy gloss-icon-L3g gloss-icon-L3p gloss-icon-L3b
Following icons generated with 8 layers similarly to the images above. Icon colors could be changed by replacing green shades at the respective layers.
Layer 1 forms a border with light shadow dropped to the bottom-right.
Layers 2 and 3 paint an icon core.
Layer 4 is a center symbol (change it to any symbol available in picture/symbol fonts).
Layer 5 is a top light reflection.
Layers 6, 7 and 8 are optional for highlighting glass edges and creating light flare.
Reference None square-glass-icon-L1
square-glass-icon-L2
square-glass-icon-L3
square-glass-icon-L4
square-glass-icon-L5
square-glass-icon-L6
square-glass-icon-L7
square-glass-icon-L8


 
green glass folder green glass car green glass yacht green glass network
Sepia Horoscope sign series generated with 3 Text-It layers. Base image in OGIM forms an icon border. Sepia "boby" is at Layer 1. Layer 2 is a horoscope sign (from "Signs" font) rendered with texture, stroke and a shadow (you may choose any other symbol from available picture fonts or render a text). Layer 3 is light flare. Reference None Square-Sepia-L1
Square-Sepia-L2
Square-Sepia-L3
Horoscope sign - Sagittarius Horoscope sign - Capricorn Horoscope sign - Scorpio Horoscope sign - Gemini
Following icons generated with 2 Text-It Layers only. The body of the image is generated in OGIM as a base image. To change icon color, work with OGIM and change gradient color points. You may also experiment with shifting center point and varying sector color points assignment for different (symmetrical or asymmetrical) gradient transitions around the image. Layer 1 in Text-It paints a symbol and Layer 2 - top reflection.

Note: round-square-L1 paints a symbol for the first image for all other images. Simply select different symbol from the font map selection at this layer.
Click on an icon for OGIM reference. None round-square-L1
round-square-L2
square gloss button square gloss button  square gloss button square gloss button
square gloss button square gloss button square gloss button square gloss button
Wide gloss button was build with 2 external added to layers, OGIM images. Could be generated with any color. The key, is to retain color shade balance while editing OGIM image for layer 2. Text-It Layer 2 also contains a decor symbol - cold be replaced with any text string or other symbols. Add to Layers tutorial. Reference Common:
Layer 1

Red:
Layer 2

Chocolate:
Layer 2

gloss-wide-L1
gloss-wide-L2
gloss-wide-L3
 
ornamental glass red button ornamental chocolate red button

 

 

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