ree images::   ::tutorials::   ::downloads::   ::links::   ::pogoshell::   ::the geo::

Interface Design

Many people have asked me how I've made my interfaces so I decided to write up this tutorial.  You can view many of my old interfaces here.

1.  First you should make a mental plan or a sketch of the interface you plan to create.

  • Keep in mind that your interface should match the style of your page.
  • Plan out the way you want your buttons to be organized, including how many there will be.
  • *Also keep in mind that its a good idea to design your interface in a way that will let you add or remove buttons in the future without having to completely re-design your interface.

2.  The easiest way to start off  on your interface is to use the seltool.JPG (1116 bytes) Circle or Rectangle shape creator.

  • This shows the basic Idea of the Interface I wish to create:
iface1base.JPG (9356 bytes) The = Sign shows where I plan to put buttons.
The "1" Shows the section which will contain most of the buttons
The "2" Shows where I plan to add a special button for my Email address
  • When Creating an Interface, The shapes most used are Circles and Squares, The following table shows how some shapes can be created:

    GREEN = Rectangles        RED = Circles

    a1.JPG (2217 bytes) a2.JPG (1743 bytes) This shows the basics of creating a pill shape. 1 Square combined with a circle at the top and bottom.

    GREEN = Rectangles         RED = Circles
    b1.JPG (3177 bytes) b2.JPG (1974 bytes) This shows a more complex shape made with 4 circles and 2 rectangles.

    3.  Next after you have the basic shape (as shown in the first picture) you must now plan what kind of textures, colors, and bevel's will be used and where they will be put.

  • For This Interface, I decided to to apply a smooth paper texture with  a smooth bevel for the front.

iface2base.JPG (9028 bytes)

4.  Finally, create buttons of your choice, and apply them in the style you want. I like to save a separate spot on the Interface for  an email button as shown below:

src="../images/free/tut/Interface_files/iface3base.jpg" width=128>

5.  Finally With some finishing touches you can have a pretty good lookin interface! Have fun.