For Amanda:










HOW TO MAKE BUTTONS (OUTLINE)

1. Introduction
a. Introduce ourselves
b. What is a button/what are their uses
c. Let's get started
2. Setting up your photo editor
a. Vocabulary
3. Step 1 – Picking a Border
a. Simple Borders
i. Round, Box
b. Cute Borders
i. Cloud, Octagon, Dotted
4. Step 2 – Picking a Backdrop
a. Simple Colors/Gradients/Other
b. Neopets Wearable Backgrounds
5. Step 3 – Adding Text
a. Fonts
i. Silkscreen, other 8-bit fonts, make sure they aren't smooth, sharp, etc.
ii. Adding a border to your font so you can see it clearly
iii. Other fonts
6. Step 4 – Adding Animation
a. Sparkle
b. Shine
c. Text Color "One-By-One"
d. "Jump"
7. Step 5 – Saving for Web and Devices
a. Save as a GIF or else they won't have animation
i. If no animation, save as JIF or PNG (recommended)
8. Conclusion
a. This is only a guide and you can do it anyway that you want
b. Thank you for reading



DRAFT 1

G'day everyone! Our names are Anne and Ryder and we'll be teaching you how to make buttons! What is a button you ask? Well, a button (within the world of Neopia) is a graphic image that sites use as a cute way to link back to their petpages, to announce themselves on their lookups, or to link to various pages they own or update!
In this Neopian Times article, we're going to teach you the basics of "Button Making" using Photoshop CS3. Please keep in mind that making any graphic can be stressful, so try to relax and have fun while learning how to make these little cuties!

SETTING UP YOUR PHOTO EDITOR
The standard size of a button is 88px by 31px (px=pixels!). That being said, you need to open up a new document in that size and either create a button from scratch, or copy and paste one of the borders in this article into the document (Yes, all of the buttons in this article are yours to use as you please!)

Vocabulary
The image below will tell you (most of) the names of the important things you need to know when using Adobe Photoshop CS3! Drag and drop it into the address bar to see the full image! Some of the items labeled on the image aren't what they're actually called, but we've renamed them to make some steps easier.


STEP 1 – PICK A BORDER
So the first thing you want to do when starting your button, is pick a border. When you pick a border, you need to consider the theme of your button. Is it simple? Is it cute? Is it fun? Well, I'm going to give you some suggestions for each of these types of buttons. So let's say you're making a simple button. If you're making a simple button, then you need a simple border. And the two simplest borders are "Round" and "Standard" (as seen below).
[pictures of round and standard borders]
Simple buttons are always good to know how to make, but cute buttons allow for a lot more creativity. A good border for a cute button is "Cloudy/Fluffy". This border is really cute for faerie-themed, sky-themed, or anything else along those lines. Another great one for cute buttons are the round-edge borders. These ones are a softer alternative to "Standard" and a more unique alternative to "Round".
[pictures of cloudy and round]
Lastly, if you're making a fun button, you can pretty much go crazy. One of my favorite borders is what I like to call "Dotted". I don't use it much, but it's a good one to have if a lot of colors are involved. Check out the other fun borders below!
[pictures of dotted and other fun borders]


STEP 2 – PICK A BACKDROP
This is the most important step when you're making a button. The backdrop sets the tone of the button and determines the color scheme. It also helps to keep your backdrop in mind when you're choosing your border. There are many different backdrops to choose, and I'm going to tell you about a few of them in this section. If you're creating your first button, you might want to start out with a solid color backdrop or maybe a simple gradient backdrop. Or, if you think you're ready, try an image!
Probably the most popular backdrops are Neopets' wearable backgrounds. These backgrounds are ideal not only because they're cute, but because there is such a vast variety of themes/settings to choose from. A good idea for a cute button might be one with a Cloudy border, and a New Years in Faerieland Background backdrop. Doesn't that sound pretty?
*Pro-Tip: You're going to have to size whichever imagine you choose to a really small dimension, and when you do this, it might get blurry. A quick fix to this would be to select the "Sharpen" under the "Filters" tab on the Menu Bar.


STEP 3 - ADDING TEXT
A button can be used in many settings and they can have the prettiest backdrop, or the most creative border and yet it's the text that everyone will be looking at. Your button is nothing but another cute image if it doesn't have text, something to tell another player what that button is there for.
Fonts make a big difference in just how you tell others what that adorable little button is there for. There are many fonts so picking one that is easy to read on the small graphic is not an easy task. We are here to help you! Smaller fonts are ideal when making a button, we like to use Silkscreen, 04b03, Bangalore, Redensek. Take your time and test out each one, figure out what YOU like.
(samples of text in those fonts here)
*Pro-Tip: Add a border to your text so it's easier to read. The best way to do this is to right click the layer with the text, select "Blending Options", then select "Stroke". Once you've done that, you can choose the color and how thick you want the outline to be!
Others fonts you can use for a fun effect, or to add to your buttons theme are Casual, Detonate, Mistral, Blueberry, and Funny Pages. These fonts are much larger but could be used in combination with the smaller fonts for a contrast. Get creative; think outside the graphic while designing and arranging your font.


STEP 6 - ADDING ANIMATION
Animation can be both extremely fun, or incredibly frustrating when it comes to creating a button. The fun is seeing how cute the animation is, the frustration is in creating it.
But don't worry, we are here to help you! Animations bring life to the button; it creates a focal point other than the text, or even the text itself, depending on which animation you choose. We'll touch on a few of those and how to make them in this guide.

Before we get into the animation process, we're going to show you exactly how animation works. In Adobe Photoshop CS3, there is a "Windows" tab at the very top. When you select it, a drop down menu appears and there you will find the "Animation" -blocked- Select "Animation" and a new window will appear. It will be mostly blank, except it will have a frame of the current imagine you are editing. More on this later!

SPARKLE - This animation is a classic. It's elegant and pretty, while remaining cute and simple. (Ryder describe how to make this in CS3)
[button with sparkle animation]

SHINE - Shine is a lovely silhouette of light that travels over the entire button, making it look shiny and new! This animation is simple, easy, but most of all tedious. The Shine animation is one of the most common animations for buttons.
The best way to accomplish the Shine animation is by adding a white gradient over every layer. You can do this by clicking on the Gradient Tool on your Tool Bar (you may have to right click the Paint Bucket Tool to find the Gradient Tool) and editing your gradient. Once you have a white gradient (it should fade out on each side), you need to add it to your button. Do this by adding a new layer (this way it doesn't cover your beautiful button) and clicking and dragging your mouse from one side of the button to the other; careful to make sure the shine is the size that you want.
*Pro-Tip: In the Layers Bar, change the gradient's blending mode to "Overlay" to achieve that brilliant, realistic shine!
The layers you'll have now should be something like: Your button, the new gradient, and your text. If you have all of those, you're ready to start creating the frames for your animation. (Be aware! This is where it gets tedious.) You'll have to duplicate your button (the image), the gradient, and the text layer as many times as it takes for the gradient to travel across the button. You'll need to move the gradient over a bit more for each of the layers you create until the gradient has finished traveling across the page! You're going to have to move the gradient over pixel by pixel (or 2, 3, 4, 5, 10, 20... pixels if you want!) to give it that shining effect. When you have the gradient layer in a different place for each button frame (it should be moved over a few pixels every layer), merge the layers of each button frame together (Button Image + Gradient Layer + Text Layer). When you finish, you should have the frames in a pattern with the gradient sliding over a little bit with each frame!
Now you can put it into the animation bar, just like we did in the Sparkle animation, and select the timing that you like!
*Pro-Tip: To make moving the gradient around easier, start by moving the gradient layer all the way to one end of the button, then select all the gradient layers and link them together! That way, when you move one layer of the gradient, all of them move and you don't have to keep moving them more and more each time! [button with shine animation]

ONE BY ONE - This animation jumps from one letter to the next in a contrasting color. One by one is the easiest animation to make and doesn't pull focus away from the text, simple is sometimes the best way to go.
[button with one by one animation]

JUMP - This animation is fun and popular, it's a faster one by one.
[button with jump animation]




Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
/help/bumper/headers/log-in-to-facebook

NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2014.
® denotes Reg. US Pat. & TM Office. All rights reserved.

PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the Terms and Conditions