Text-It And OGIM generated graphics

Text-It Samples Reference for Web 2.0 graphics

General Instructions

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)
Follow Pat 1 of the tutorial at video tutorials page or follow brief instructions below:

View Instructions

A. Click Reference link next to the selected image to open a graphics base, background image in OGIM.

B. Click Text-it Tab at OGIM screen to load base image into Text-it.

C. At Text -it screen enable mix mode by checking mix box

D. From styles selector choose style names referenced in "Text Layer Styles" below for the selected graphics and click load Make sure to start with layer indicated as -L1, or otherwise follow instructions within image comments.

Note: Some of the sample graphics require an external, "Add to Layer" images. Look for reference in "Ext. Images" column below. If you have difficulties with adding images to layers see this tutorial

E. Click Save Button

F. Repeat Steps D and E for each consecutive layer referenced in "Text Layer Styles" below for the selected graphics image. After loading the last referenced style the image would be completely built and should look like the image you selected below.

For further details about image editing, creating new graphics while working with Text-It see video tutorials or online help.

Badges	Round	Square	Signs	Clocks	Flags	Older

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

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)


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)


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

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

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

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

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

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 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.

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

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

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

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


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

Links to OGIM | Contact | RCxLink