Welcome to OGIM + Stripes maker + Text-It
Incorporating color gradient images to render background of HTML layers is a popular method for creating vivid
3D appearance and visual effects.
Online Gradient Image Maker (
OGIM) is a unique online application capable of generating wide variety
of gradient images with up to 9 transition color points without owning and having experience with graphics design applications such as Photoshop.
Furthermore
OGIM features a
stripes generator module which could draw precisely positioned stripes over gradient image to make
uninterrupted and smooth joints while image is tiling in any direction. Finally
a
Round Corner Mask images generator in now part of the OGIM. There are practically infinite possibilities for blending colors,
transition point locations, gradient types and stripes configuration while making rich images for site menus, buttons, background and highlights.
For inspiration check out samples below and a
Gallery of images shared by other visitors.
To generate images with OGIM make sure browser supports cookies.
Samples generated with
OGIM + Text-It
Engines
Web 2.0 or not... a
new Text-It extension module to OGIM for generating web buttons,
web tabs,
web badges, icons, logon, banners and other graphic widgets is now available.
Compact, yet powerful layers mixing engine allows drawing differently styled
multiple strings of text and other external images over the base images generated
with OGIM. Text-It could be launched from the main OGIM engine screen
but requires an account (still free).
Read more about Text-it graphics
generator >>
Images below were generated with OGIM and Text-It.
Click any image for reference page.
 |
Samples generated with OGIM
Engine
Note: The text over sample images below is
rendered with HTML. There is an advanced Text-It engine exist allowing to render
text, symbols and other images over the base image generated with OGIM. See
samples above.
Background images for sample buttons were created in Gradient Image Maker. Appropriate border style was applied for button
layers to aggregate 3D appearance. Click on a button to get its gradient OGIM reference.
Sample menu was created with 2 gradient
images. One for the menu background (applied to menu table with repeat-x
property) and another for menu separators applied to 1px wide cells between menu
items. Borders were added to further separate menu from a background and highlight it.
| Home |
|
News |
|
Support |
|
Contact |
|
About us |
|
Gloss variation with Semi-Transparent Stripes and split gradient
Reference for background
| Home |
|
News |
|
Support |
|
Contact |
|
About us |
|
Sample buttons with round corners. Click on a button to get its
gradient OGIM reference.
|
Image Maker
|
Image Maker
|
Image Maker
|
Image Maker
|
Sample tabs with round corners. Click on a tab to get its
gradient OGIM reference.
|
Image Maker
|
Image Maker
|
Image Maker
|
Image Maker
|
Fairly simple but effective web site header made with 2 images painted with
sea-green gradient and stripes.
A special Rounded Corners Mask images generator module (top-right side of the
screen at
OGIM engine) is capable of generating
nearly perfect round corner images with radius anywhere from 1 to 500 pixels.
Generator uses "Antialiasing" and "Matting" to smooth the oval and blend it
with the surrounding background color and inner box color or even a pattern. 3
types of masks could be generated: 1) solid 2) with transparent outer oval area
3) with transparent inner oval area.
Click "Help" button at
OGIM screen or at the top menu for more information.
Here is a sample of the box with striped gradient pattern for the background and
corners masked by images generated with
OGIM.
Note: There is no reference to corner mask images. They are built
and downloaded directly at
OGIM engine screen. Reference to
Orange background pattern.
"While we are postponing, life speeds by."
Seneca (3BC - 65AD)bc
"Do, or do not. There is no 'try'."
Yoda ('The Empire Strikes Back')
Another sample of the box with striped horizontal gradient pattern for the background and
corners masked by images generated with
OGIM.
Reference to
background pattern.
"While we are postponing, life speeds by."
Seneca (3BC - 65AD)bc
"Do, or do not. There is no 'try'."
Yoda ('The Empire Strikes Back')
Bordered Round and
Straight Corner Box
Following examples demonstrate how to create a bordered rounded and straight corner box with
OGIM. This method does not use Masked
Corner images but rather gradient images to create line or gradient border. Round corner images are generated with radial gradient. Five
images are used to create the box below. Single Image (20x20 px) for round
corners was created by using "radial" gradient while rendering a circle. Four
remaining images (1x10 px. and 10x1 px.) are created with "line" gradient using
the same set of gradient colors respectively configured as horizontal, vertical,
mirrored horizontal and mirrored vertical gradients and bound to each side of
the box.
Positioning created images for the precise joints is now just a matter
of HTML styling. Based on this sample, various round corner and straight cut
corner (use "diamond" gradient instead of "radial") boxes could be created with
just a little effort and a bit of creativity.
Rounded Corner Box Images Reference:
Corner |
Left |
Right |
Top |
Bottom
"While we are postponing, life speeds by."
Seneca (3BC - 65AD)
"Do, or do not. There is no 'try'."
Yoda ('The Empire Strikes Back')
The rounded corners box could
be somewhat "raised" as per example below which uses the same method
as above but
slightly different gradient color points.
Raised Round Corner Box Images Reference:
Corner |
Left |
Right |
Top |
Bottom
"While we are postponing, life speeds by."
Seneca (3BC - 65AD)
"Do, or do not. There is no 'try'."
Yoda ('The Empire Strikes Back')
Next example displays a box with raised border on a dark background.
Raised Round Corner Box Images Reference:
Corner |
Left |
Right |
Top |
Bottom
"While we are postponing, life speeds by."
Seneca (3BC - 65AD)
"Do, or do not. There is no 'try'."
Yoda ('The Empire Strikes Back')
Another variation with straight corner and line gradient for the middle part. Straight corner is rendered with a
rectangle type of gradient.
Straight Corner Box Images Reference:
Corner |
Left |
Right |
Top |
Bottom
|
Middle
"While we are postponing, life speeds by."
Seneca (3BC - 65AD)
"Do, or do not. There is no 'try'."
Yoda ('The Empire Strikes Back')
This example just opens a vault of opportunities for creating vivid
bounding boxes. Use your imagination and vary gradient types, colors and gradient size for box joints and
sides to design rich site content.
Futuristic Box Images Reference:
Corner |
Left
- Right |
Top
- Bottom
Note: The 9-th gradient color point should always match the inner
background color of the box. The 1-st gradient color point should always match
the background color of the layer surrounding the box. To make the box
compatible with any outer background color, the 1-st color point could be
cleared making it transparent. But be aware that while most browsers support PNG
transparency, older Internet Explorer (earlier than v7.0) does not support it and
would render transparent area with solid color.
"While we are postponing, life speeds by."
Seneca (3BC - 65AD)
"Do, or do not. There is no 'try'."
Yoda ('The Empire Strikes Back')
Classic 8 image slices box with round corners, border and a shadow. Unlike
samples above this box is created from a single image sliced with OGIM slicer
tool.
Reference for the image
After navigating to this OGIM reference, click "More" button within Slicer
section, specify width/height for each slice and download 8 images (4 corners, 4
sides).
1 - 8x8 px,
2 - 12x8 px,
3 - 8x12 px,
4 - 12x12 px
5 - 1x8 px,
6 - 1x12 px,
7 - 8x1 px,
8 - 12x1 px
Slices dimension may highly depend on your HTML box styling and overall box
configuration (round corner radius, shadow amount .. ect).
"While we are postponing, life speeds by."
Seneca (3BC - 65AD)
"Do, or do not. There is no 'try'."
Yoda ('The Empire Strikes Back')
Striped Bordered Round Corner Box
Someone asked at
forum
about applying stripes to gradient box border. While there are some limitations,
layering striped gradient box border is still possible with some effort and
images built at OGIM. Here is an example - a 3D box with striped border. For
tips related to striped border see
reply at forum.
Striped Bordered Box Images Reference:
Corner |
Left |
Right |
Top |
Bottom |
Center
"While we are postponing, life speeds by."
Seneca (3BC - 65AD)
"Do, or do not. There is no 'try'."
Yoda ('The Empire Strikes Back')
If you found other interesting ways to use OGIM for generating background images, then share
created images and post comments at
forum.