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

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


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

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

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

Same as above, only resized. See the tutorial for resizing graphics layers

see tutorial

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

"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

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

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

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