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
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')
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')