Welcome Guest [Log In] [Register]
< Quests & Plots |Looking For Group | World Lore | Rules Index | Staff Requests | Active Topics >
Search Members FAQ
  • Navigation
  • Tohea
  • →
  • Member Center
  • →
  • Oldhea
  • →
  • Buttons Tutorial
Non-Weekly Quote:
(Updated when the fancy strikes us)
"I do not think there is any thrill that can go through the human heart like that felt by the inventor as he sees some creation of the brain unfolding to success... such emotions make a man forget food, sleep, friends, love, everything." - Nikola Tesla

Recent Site Updates:

Tohea is in archive mode, but the legend lives on.
Popup Cbox
While you're free to preview the site as a guest, only members can actually post or roleplay here. Join today!

Username:   Password:
Add A Reply
Buttons Tutorial
Tweet Topic Started: Oct 22 2006, 05:15 AM (46 Views)
Deleted User Oct 22 2006, 05:15 AM Post #1
Deleted User


This is a Quick Tutorial to Make buttons linking to your Profile, Journey or Blog.

Step 1: Open a New Adobe Photoshop window and set your pixels size to 110 Width and 32 Height

Posted Image

Next Duplicate the background layer (Using CTRL + J). Name this "Brush Layer" Now select the Brush Tool from the small bar on the left and set the pixel size to 1 pixel. Leave the Ocpacity at 100%

Posted Image


After doing this your Image may look abit ugly, like mine does, however this can be changed by creating a new layer (CTRL + SHIFT + N) and using the fill tool in your desired colour, this will make your image look like so:

Posted Image

Select the Layer Ocpacity of your new Layer and set it to 75%, leaving:

Posted Image

Next, head over to Here and pick your desired sprite. Save it, then open it into a new adobe file and copy the entire canvas and paste it. It should have no background to save you time. Move your Sprite to the Left hand side.

Posted Image

Next thing to do is add a Font, put the font colour to WHITE.

Posted Image

Looks rubbish now? Follow these Instructions then:

Drop Shadow::

Occupacity :: 100%
Distance :: 5px
Spread :: 0px
Size :: 8px

Inner Shadow ::

Select any colour you want the text to be, for mine I select a Red Colour
Ocpacity :: 80%
Distance :: 3px
Choke :: 0px
Size :: 6px

Bevel Emboss ::

Style :: Inner Bevel
Technique :: Smooth
Depth :: 100%
Size :: 1px
Soften :: 0px

Stroke ::
Size :: 1px
Colour: Black

Leaving this:

Posted Image

Congratulations you have made a Button! If you want to add a border....

Merge all the layers together and then switch it over to Image ready. Select the Rectangular Marquee tool and style to a Border you like, mine is black 1pt 4pt - spaced dotte. Draw your Border and convert back to Photoshop. Save as a .PNG file and upload to Photobucket or Imageshack! It should look like:

Posted Image

======================================================

This took me the better part of 4 Minutes to make the images and then 10 minutes to write the guide. Mine are messy and the BG Picture is useless. You can use a picture from the internet if you wish. It's a basic guide to helping you to make a button link to your profile that takes 5 minutes. The code for this is:

Code:
 

[URL=???][IMG]????[/IMG][/URL]


Example is in my Signiture. Have a go and show me how it turned out. [/center]
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Oldhea · Next Topic »
Add A Reply

Track Topic · E-mail Topic Time: 5:38 PM Jul 10
Hosted for free by ZetaBoards · Privacy Policy