| 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 |
 |
 |
 |
 |
| 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
|
 |
|
|
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
|
 |
 |
 |
 |
| 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) |
 |
 |
 |
 |
 |
| 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
|
 |
 |
 |
 |
| 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
|
 |
 |
 |
 |
| 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) |
 |
 |
 |
 |
| 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
|
 |
|
|
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 |
 |
|
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 |
 |
|
|
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
2Chocolate:
Layer
2 |
gloss-wide-L1
gloss-wide-L2
gloss-wide-L3
|
|
at OGIM screen to load base image into Text-it.
Make sure to start with layer indicated as -L1, or otherwise
follow instructions within image comments.
