|
|
 |
|
 |
This is a short tutorial of how to add
a link or a title to a GUI
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 "TheVault" GUI,
which you may download here.
1) First, create an image larger than the link you want to create (just
for space to work with), and then fill it with black. Select the text tool, select the font/size you want
to use, and then implement the addition. Do not deselect the text yet:
2) Select the fill tool, and set the fill to "Gradient". This
is done in different ways in different software packages, but the great
majority of them are able to do it. Pick 2 colors of which the gradient will
be composed of, and set the lighter one as the "top" color (you'll
most likely need to set the direction of the gradient). Now fill in the
text:
3) Now expand the selection by 1 pixel. Again, this
is done in different ways in different software packages, so you may want to
search the help file of your software for the word "Expand
Selection" or "Grow selection". This simply inflates your
selection to slightly cover the surrounding area:
4) Copy the selection after you've expanded it, and paste it into the GUI
you've selected:
5) It's now time to drop shadow, in order to merge the text into the navbar
a bit. Each program defines the shadow's properties differently, so play
around with it until it looks like you want it to. In general, a very slight
shadow would drop around 2 pixels, and blur about 3 pixels, but this changes
between programs. The outcome should look something like this:
6) You should of course drop an amount of shadow that fits your style. You
may choose to drop a large, light, and blurry shadow, or a thin, sharp, and
dark shadow. Now here's an example of how the same exact technique was used
to create the title for the GUI:
All the difference was that the text was larger, and the shadow dropped
farther.
You may choose to change the direction of the gradient so that it becomes
lighter on the left and darker on the right. Using this technique, you can
also create different versions of the navbar links and have them switch when
they're mouse-overed using JavaScript.
Return to the main page
|
|
|
