|
|
 |
|
 |
Any GUI with a navbar which is
specified to be "Expandable", can expand its navbar using simple
pixel-based editing. Here is an overview of how such a thing is done.
Notes: In this tutorial, you may use any 2D-("photo-")editing
software package. The great majority of them will allow you to use these
exact techniques. The GUI used for this tutorial is the Radioactive GUI,
which you may download here.
1) The first step it to clear out all of the GUI's accessories. Simply copy
and paste the entire image into a new window, select the accessories
(they're usually placed far enough from the rest of the GUI, so that you're
able to select them using a rectangle), and either paint over them with the
background color, or delete them.
2) Most GUIs have a "cap" to their navbar, which is simply the
place where the repeating filling ends, and the navbar is merged with the
background (for instance, if the navbar were a filled flat cube dropping
shadow, its cap would be the part where the fill ends and the shadow curves
into a stop). Select a rectangle from where you're sure the navbar and any
effect (ie - a dropped shadow) ends, and drag the selecting tool to where
the navbar area starts repeating itself, like so:
3) Now drag your selection to where you want the navbar to end. Move it
vertically, but not horizontally.
4) Once you have the cap where you want the navbar to end, you need to fill
in the rest with the repeating area of the navbar. Select an area where the
navbar repeats itself with the selection tool. Remember, however, that in
many GUIs the navbar contains a texture, so if you pick an area that is too
small, you'll see an odd repeating pattern. Instead, select an area as large
(in height) as possible, preferably over 15 pixels in height, like so:
5) Copy the selected area, and then deselect it. Now, paste the copied
navbar piece into the image, and place it at the bottom of the sliced navbar.
Try doing it so that the top line of pixels in the selection don't overlap
the bottom line of pixels in the sliced navbar, and of course, only move it
vertically, not horizontally:
6) Repeat this process all the way to the navbar's cap. When you reach a
point where if you move any lower you'll overlap the cap, simply move the
selection up a bit so it overlaps the repeating area instead:
And there you have an expanded navbar.
Using this method, you can also expand other elements in some GUIs, such as
buttons, headers, and subheaders. Note, however, that in some GUI elements
there is a gradient fill which spans in the direction of the element, and
won't look good when expanded. Experiment with various methods to see how
you can "tame" the GUI for your use.
Return to the main page
|
|
|
