Welcome

My name's Turnip and I'd like to welcome you to this site. Part guide, part database and resource, A Button Collection (or ABC) is a compendium of in-depth tutorials and quick tips on how to make buttons. Whether you're just starting out making your very first button or you're a veteran that's made hundreds, I hope you'll find something useful at ABC!

Important notes: Updates
Need to contact me? If you have questions or comments about the guide, or would like to add something to the chapters, just send me a message.

- If you see an ABC Extra, this means it's miscellaneous information that you might find interesting.
- Some of the animations might seem to lag. This is probably due to the large number of graphics and other animated images. To view an animation, try isolating it by dragging and dropping it into the address bar.
- Tutorials are for Photoshop 7. However, the same concepts can be carried over to GIMP.
- Screenshots and other large images have been scaled down. To view the full size, right-click on and choose "View Image" or drag and drop into the address bar.
- This is not an animating guide. Because I use Photoshop 7 and animate in GIMP, my technique for animating will be too complicated for many people to follow.

Note: This guide is still in beta version (meaning it's still being updated and constantly revised). In other words, expect a ton of mistakes here and there. If you catch any, feel free to neomail me!

Mar.24:
- got my proofreading from Final Touch back. Various spelling/grammar edits have been made.

Mar.20:
- one survey answer (button requesters)
- requested proofread service

Mar.7:
- two survey answers (both button requesters)

Mar.5:
- two survey answered (button requesters); finally, some surveys on the requester side. Hopefully this helps button makers in pinpointing what aspects of buttons/their site visitors are looking at most!

Feb.29:
- The Button Survey has been added! Any feedback is appreciated. Two people have filled out surveys.



Ch.1: Terminology

If you're completely new to making buttons, this page is a great area to start. Here, I'll go over some terms I'll be using throughout the guide.

Border

The border is what frames your button base image. Having a border (and in most cases, an inner white border) is a very good way to make your button look unique and finished. Here are some examples:

ABC Extra: Hover over the images to see what I call each border type.

Text and image placement

This term is very important and it's something to get familiar with because I'll definitely be making references to this throughout the guide. Text and image placement is the area they take up on the button. For example:

The text placement is on the right while the image placement is on the left. You could also go a step further to describe your text placement and say that the text is on the right side of the button, centered between the top and bottom border.

Here's another example:

It's the opposite here. The text placement is on the left (centered between the top and bottom border) and the image placement is on the right.

And one last example:

The text placement is completely centered. There's no main image, so we can't say a lot about its placement.

Focal image

The focal image is the main image on your button. Ideally, you wouldn't want more than one since that can make your button look busy and complicated (there are examples of multiple focal images which I'll point out later). Here are some examples:

Here, the focal image is the sushi on the left.

The focal image is the zomutt on the right side of the button.

In this example, there's no focal image as the button base uses a simple pattern in the background. However, we can still use the term "focal" to describe the text. Here, the text is the focal point of the button.

Breathing space

This term relates to animation and it's how I describe the amount of time between each animation loop before it repeats again. In other words, "breathing space" will refer to static text, rather than the dynamic animation sequence. Here's an example:

In the first button, there is little to no breathing space. The sweeping animation repeats almost instantly. In the second animation, there's approximately 10 static frames (i.e. "normal text" where no animation occurs). This is the breathing space between each animation loop.

Small font versus "large" fonts

Small fonts include 04b03, Bangalore, and Wendy. Here's a visual example:

I like to call these the "tried and true" fonts because they will work with the majority of buttons you produce. On the other hand, "large" fonts are much more popular to use these days. Here are some examples of buttons that use "large" fonts:

Using large fonts is much harder than using small fonts because it requires you to analyze the amount of space you have on your button base.

Animation

This doesn't really need an explanation, but there are some animation types that may need more clarification. Take a look at these:

The animation here is what I call "fading", where one text phrase fades to another (here, the phrase "vote for me @" fades to "demure" and back again). With this type of animation, it directly impacts text visibility and clarity. I suppose you can call it text visibility animation because the animation will always have an impact on the text readability.

Here, the sweep animation goes through the text, but the words are always visible on the button image (i.e. it doesn't "fade"). With this type of animation, I tend to refer to them as text-based animation. Though not as "intensive" as the other example, these animations tend to use the text in some way, such as sweeping through them with colour or blinking from one letter to the text.

This is probably the best type of animation in terms of text visibility because it has no impact on the text itself (note that I'm not talking about the sparkle effect specifically). Here, the animation goes around the text and uses the background instead. Because the animation is completely distinct and doesn't interfere with the text in any way, I call these sort of animations base animations.



Ch 2: Choosing an image

Alrighty, let's get started! The first thing you should think about is what you want your button to look like. Do you want to use an image or a simple textured background? Most buttons that have images look very nice, but that doesn't mean you "have" to use one. It's completely up to you! I'll be providing examples with both images and textured buttons.

Images with focal points

Here are some examples of buttons that have focal points:

Here are some examples of easy to use images:

Notice that in each of the three examples above, the optimal choice for a focal image is extremely apparent and easy to find.

ABC Extra: Hover over the images for examples of where to crop to.

Textured or general background images

Here are some examples of buttons that use textures or a generic background as the base:

The first two use a texture or pattern, while the third and fourth example use a Neopet background (like those found at Charly's SWF Collection).

Combining a focal point with a textured background

If you own a button request site, chances are you'll come across this problem. A requester wants you to use an image that has a white background such as this:

Sure, you can crop that image to 88 by 31 pixels, but a white background is so dull! Just take a look:

Here's my technique for combining a focal image with a textured background.

Tutorial: Blending images with textured backgrounds

Step 1: Take a look at your focal image and note the dominant colours. In this case, the faerie grarrl's colour palette consists mainly of a strong orange colour with pink highlights.

Step 2: Look for a textured or patterned background. To make things easier for yourself, keep your colour palette in mind and search for something that's orange in colour. Here are some great examples:

Step 3: Crop the texture to 88 pixels by 31 pixels. I'll be using the first example for this tutorial.

Step 4: With your image (i.e. not the button base), select all of the white area.

Step 5: At the very top of your main screen, click "Select" and then "Inverse". As a quick alternative, you can also hold Shift and Ctrl, then press "I".

This inverts the selection. Now the grarrl is the area getting selected, not the white background.

Step 6: Hold "Ctrl", then press "C" to copy the selection. Try not to "cut" the image out (i.e. don't press Ctrl + X). Sometimes when I "cut" images rather than copy, the edges are much more jagged and there's more "white" bits.

Step 7: Going back to your textured button base, paste your grarrl image by holding Ctrl and pressing "V".

Step 8: Since the grarrl image is very large, I'll need to resize. To do this, I make sure the layer with the grarrl image is highlighted. Next, I hold Ctrl and press "T" (alternatively, you can also go to the top of your screen, click "Edit", and choose "Free Transform"). Now that your focal image is selected, hold the "shift" key and use the four corners to make your image smaller. You must hold the shift key while doing this because that keeps your image's original proportions. If you don't hold the shift key, you'll end up with a "squished" looking image.

Step 8: Once you've resized your focal image, it should look something like this:

The focal image still looks a bit awkward though. It's not blended very well into the background texture. While you can leave it like this, let's go a step (or two) further. I'm going to rotate my Grarrl image so that it faces the opposite direction.

Step 9: With my image layer selected, I add a layer mask (alternatively, you can go to the top of the screen, click "Layer", choose "Add Layer Mask", and choose "Reveal All").

Step 10: A quick and easy way to "blend" images is to apply a gradient mask that makes the image seem as if it's fading.

After applying the gradient, I'm left with this:

Using this technique, I created this button for a requester:

ABC Extra: Sometimes you'll find a nice pattern or texture that you want to use as a base but it may not fit your colour palette. In this case, you can use gradient layers to re-colour your texture/pattern.

Final tips

- If you're just starting out, try to choose simplistic images that are relatively neutral in colour. Stay away from anything that is super complicated (such as the Christmas example with tons of pets in the image). In terms of colour, the more simplistic the colour palette, the easier it'll be for you. For example, the faerie pteri image only has a few main colours (yellow, pink tones). Once you become more experienced, you can isolate colours and shift the palette towards one shade or another.


Ch 3: Cropping

Cropping's so easy. You can just skip this chapter and go on to the next.

Wrong! Cropping is actually the biggest issue I come across when I'm reviewing button request sites. It may seem like a basic concept, but it's actually pretty hard. We all know what we want to crop for: a focal image. However, getting there might be a bit tricky. New button makers often make the mistake of cropping for too large an image, or too small.

Here's another image example:


Common mistakes

Cropping images and making them too small
An example of this is the first button base in the "Cropping" image above. The purple hot air balloon is absolutely tiny and so many details are lost. This problem often occurs is when button makers crop for the entire body, rather than the face only.

Another common issue is when button makers crop for the entire scenery rather than focus on one aspect of it.

Though this isn't a "rule", my general preference is to devote 50% of the button to imagery and the other half to text. A lot of sites have longer site names (especially with link directories where it's (Name's) Directory) so I always like to have room to work with.

Cropping for a single focal point

This is probably the most common choice for button makers. Cropping for one focal point means there's a deeper focus to your button. In other words, it's the main "picture" that the viewer sees. Here are two examples:

In the first example, the clock is the focal image. In the second, it's the cupcake.

ABC Extra: If you're a completely new button maker, my advice is to crop for a single focal point on the left or right side. This means that your text should be on the opposite side of your focal point (for example if your main image is on the left, your text placement should be on the right, making use of that empty space).

There are some rare cases where the focal image can be in other areas, like these:

In the first example, the image of the plane stretches across the top half of the button. While the text placement could have been placed on the far right, writing it out across the bottom makes better use of space. It also emphasizes the entirety of the plane, rather than just the front half. In the second example, the focal image is the spiky cave formations which help frame the text.

In all of the examples above, there is only one picture that is considered to be the "focal point".

More than one focal point

In very rare cases, your button may have more than one focal image. This is extremely hard to do because most of the time you button may look too busy or messy. However, there are some examples I managed to track down:

The first button, made by Box, uses two main aspects of the button as "focal images". both the white flower on the right side and the text act as focal images. When the text is on screen, it's the focal point, but when it fades and we only see the background, then the white flower also acts as a secondary focal point.

In the second example, the text isn't the main focal point - it's the palm tree on the left and the building on the right. While the text could have been placed on top of the tree (making the building the only focal point), putting it in the middle centers the two images. It also helps frame the text a bit better and makes it a part of the entire scenery.

Cropping a texture or pattern

For textures and patterns, you won't have a specific focal point. What you're aiming to do here is use parts of the texture or pattern as a background to provide some style to your text. Here are some examples:

The first button uses a cloud background but we can't really call it a "focal point" because one area of the image isn't favoured over another. Here, the pattern has been cropped to include the details of the cloud. The second button is a bit more interesting because that uses a texture. It's been cropped to provide a sense of colour symmetry (note the orange tones on the left and right, but also the contrast of blue and green).

Do you want a general texture or do you want to capture the texture's details? Here's an example of what I mean:

Both bases use the same grungy texture. The difference is that in the first example, I scaled down the texture to 88 by 31px. In the second, I opened up an empty 88 by 31 px screen, and pasted that same texture in there. Then, I moved it around to find an area that I'd like to use for the button base. The difference is astounding, isn't it? It all really depends on your intentions for your button base. Here's another example:

Like the previous set of button bases, I did the same thing with these two. The first example is scaled down, the second is "full sized". Note that this time, the second button base isn't that great. That's because the texture was quite blurry to begin with. While I could sharpen it to create a functional button base, why not scale the image down? That's what I did in the first example and it looks much better. Notice how at super small sizes, the major blurry issue isn't noticeable in the first button. Instead, you just see a nice watercolour effect.

Tips for using texture/pattern button bases
- Don't rely on them too much. If all you use for your button bases are textures and patterns, your buttons will generally start to look similar!
- If you are using textures as button bases, make sure that they're varied. Don't just use bokeh textures, but try abstract, light, grunge, you name it!

Tutorial: Cropping images in Photoshop

I've talked about what to crop for but now let's actually crop the image! In this tutorial, I'll be cropping for a single focal point. Here's what I'll be using:

Step 1: Open up your image in Photohop 7. In your Tools screen, click the "Crop" tool (alternatively, you can press "C" on your keyboard for a quicker and easier method). In the screenshot below, I've highlighted the Crop tool in a red square.

When you click that tool, the options near the top of your screen should change. Make sure that your values are similar to what I have in the screen above. When typing in the width and height, remember to type in px to indicated that you want it to be 88 pixels, rather than cm or any other measurement.

ABC Extra: If you just type 88 and 31, then the program will only scale your image in terms of the ratio. For example, your image might still 216 px in width and 76 in height even after cropping.

Step 2: With the Crop tool selected, click on your image, hold down and drag to create a rectangle.

The dark areas will be the "deleted" parts of the image, while the area inside the four squares will be the button base. You can move the rectangle around the image and re-size it however you want. I want the Scorchio's face to be the focal image so this is how I cropped mine:

Step 3: When you're happy with your selection, hit "Enter" on your keyboard and your image will be cropped to your selection. Alternatively, you can also look near the top of your screen and click the checkmark as indicated in the screenshot below.

ABC Extra: Did you hit the "Enter" key only to be unhappy with your button base? Quickly go back to your "original" image by holding the "Ctrl" key and pressing "Z".

And we're done! The image is cropped and here's what it looks like:

Final tips

- After cropping, your image may become blurry. Be sure that when you're editing your button base, you remember to sharpen it to make it crisp again. In the tutorial above, the image quality is relatively nice though I'd probably sharpen it once I start adding textures.

- Sometimes, you might be using an image where the focal point isn't as obvious as others. Here's an example:

What I like to do is open up the image multiple times in my workspace (i.e. I'll have about three or four screens with the same image). In each of the screens, I'll crop to a different area. After, I'll compare all of them to see which one works best with the text I'll be writing on it.

- Cropping is something that many new button makers need to work at because it's the first step in creating a high-quality button. If your image looks "squished" or stretched out, then your button has already made a negative impression.



Ch 4: Editing

Cropping an image and slapping on borders and text is not how you make a button. Well, not a high-quality one, anyways. You'll need to edit your image a bit further to make it interesting and creative.

Sharpen to enhance image clarity

Make sure the image isn't blurry. One of the most common issue for new (and veteran) button makers is that their button base image is too blurry and isn't crisp or clear. A blurry image makes the button look low-quality. Especially when you're working with small images, the clarity of the picture will degrade with more texture layouts applied on top. To view a tutorial on sharpening your button base, click here.

Here's a comparison of button bases. One was left unsharpened and the other has been sharpened.

While the one on the right isn't that bad (I've seen much worse button bases around), it's still not very clear. There is so much more detail to be seen with the sharpened image. No matter how well a button maker has designed the border, coloured the image, or styled the font, a blurry image is an instant marker of low-quality.

Tutorial: A "soft and dreamy" effect

This is probably the first "technique" I learned as a graphics maker way back in the day. It's not only super easy, but it makes your image look so vibrant and pretty.

Step 1: Open up your button base in Photoshop. For this tutorial, I'll be using this example.

Step 2: Duplicate your image layer. You can do this quickly by holding "Ctrl" and pressing "J", or go to the top of your screen, click "Layer", and choose "Duplicate Layer".

Step 3: With your top layer highlighted, go to the top of your screen, click "Filter", go down to "Blur", and choose "Gaussian Blur". A screen should pop up. I usually set the blur radius to 2.0 pixels, but feel free to experiment!

Step 4: In your Layers screen, set the top layer (i.e. the one you just blurred) to overlay. You should have something like this:

At this point, you can edit the opacity or leave it as it is. See, wasn't that simple? One final step I like to do is merge my layers together. Either hold "Shift", "Ctrl", then press "E", or go to the top, choose "Layers", then click "Merge Visible".

ABC Extra: One thing I've noticed is that this effect can have very different outcomes depending on your original image. For example, using this technique on a very light or brightly coloured image makes it look way too bright and eye-straining. On the other hand, if your image is very dark, then using this "blur" method makes it seem ever darker. Here are examples of "light" and "dark" images:

As an "experiment", you can try using the blur technique on the images above to see what I mean.

Tutorial: Editing the colours

Since this isn't supposed to be an in-depth guide on colouring, I won't go into things like curves and other intermediate techniques. However, there is an easy way to play around with the colours of your image.

Step 1: We're continuing straight from the previous tutorial with this button here:

At the top of your screen, click "Image", go down to "Adjustments", then click "Color Balance". A quicker method is to hold "Ctrl" and press "B".

Step 2: A screen should pop up. Play around with the levers until you're satisfied with the colours of your button base. For this example, I want to make my button base a bit more dramatic and emphasize the red shades.

And that's it! Here's a "before and after" look:

On the other hand, what if I wanted a retro-inspired look? I would emphasize green/blue tones, resulting in this:

Adding textures and other fun stuff

While the button can certainly be considered finished, some button makers like to go a step further and add some textures or patterns to help accent their base image. One of my favourite types of textures is bokeh or light textures. These can really make your button shine! Continuing from the previous tutorial, I'll be using that scorchio button. The texture I'll be using is from Details and can be seen below:

ABC Extra: You don't "need" textures! If you think your button looks better without one, then that's fine!

For the example above, I'll be trying to position the texture so that the stars appear in the empty areas of the button (i.e. the upper half of the right side, above the stream of fire).

Tutorial: Applying bokeh textures

Step 1: Open up your button base image in Photoshop. Copy and paste your bokeh layer above your image layer. Set your bokeh (or texture) layer to screen.

Step 2: Remember the tutorial where we re-sized the grarrl image? That's what we're going to do here. With your bokeh layer highlighted, hold Ctrl and press "T". From there, make the bokeh image a bit smaller and move it around so you get a sense of where the "stars" are.

Step 3: After doing that, I'm left with something like this:

You can leave it at this but I'm super picky and even if it's a pixel out of place, I'm still going to edit it.

Step 4: I don't like how there's a "star" in the top left corner. Sure, it seems like a small issue, but at this point I'm not sure what border I'm going to use. It's best if I just deal with any imperfections now, rather than later. There are two ways I can edit the texture. Remember in an earlier tutorial where I applied a gradient mask to "fade" the grarrl image? I can do that here as well. However, here's a much quicker and easier way.

After clicking on that corner with my eraser two or three times, I have this:

It might be the case that the border design I choose would have covered that area anyway. Still, I like to perfect a base before because sometimes the requester may ask me to use a different one instead.

Let's compare the "before" and "after" versions:

As you can see, the bokeh we added works very nicely because it makes use of otherwise empty space. The stars add a nice effect. As an interesting side effect, notice the colours of our button base. It seems a bit bright and more orange. If I wanted to keep the deep colour tones of the first button, I could have gone and lowered the opacity of the bokeh layer (I usually lower bokeh to around 80%). For this tutorial, I left it at 100% to show the unintended colour change. That's why experimenting with many different textures is a good idea!

Tutorial: Adding scanlines

Let's rewind a bit. What if you wanted to add scan lines or a repeating pattern instead of a texture? Here's how I go about doing that.

Step 1: We'll be using the unedited version of the scorchio button (the one prior to the bokeh addition):

For this tutorial, I'll be using a white diagonal scan line. Open up your button base in Photohop, and make a new layer above your image. You can do this by going to the top of the screen, click on "Layer", select "New Layer", then press "Okay". Fill this new layer with your pattern. This is what I have so far:

ABC Extra: You can get premade scan lines from a variety of places. Create Impressions has one in the "button resources" section near the top. In this tutorial, I used a Paint Bucket and set the "fill" to "Pattern" because I have a pack of scan lines downloaded into my program. If you want to learn how to make your own scan lines in Photoshop, click here.

Step 2: Set the layer with your scan lines to soft light. My button now looks like this:

Step 3: Yeah, that's not a good-looking button at all. The scan lines are so harsh and obvious! Let's blend it into our button base, shall we? Again, we're going to use the gradient layer mask method (refer back to the tutorial where we faded the grarrl's wing).

Since I've already used this step before, I won't go into major detail, but here's a refresher. Add a layer mask to your scan line layer. From there, make sure your foreground and background colour is black and white, respectively. Choose the "gradient tool". For this button, I'll start my gradient on the far left side and drag my line towards the right side.

Here's what I have:

With scan lines, you never want them to overlap your focal image. This makes them look strange and out of focus. Instead, confine your scan lines to empty areas. In this example, the empty areas are on the right side.

Step 4: The scan lines are still too harsh. I'm going to lower the opacity a bit to 77%. Finally, I have this:

With scan lines, what you're trying to do is help add some charactertics or details to your button base. You're not trying to cover anything and you especially don't want the scan lines to cover your focal image. It makes it look low-quality.

The scan lines in the image above are still a bit on the harsh side. I'd probably lower it even further to 50%.

Using lighting effects to your advantage

While you can use light and bokeh textures to add some shine to your button base, there's a very simple technique you can do that allows you to control the "shine" itself. Check out the shine tutorial at The Lunch Box. Here's a before and after look:

In the second example, I used a brush and drew a wavy line in the area above the flame (this is done in a new layer above the button base). I set that layer to "overlay" and lowered the opacity to around 65%. If you don't have any suitable premade textures on hand, this technique is an extremely easy way to add some nice highlights to your base.

With textures, less is more!

Button bases are these tiny 88 by 31 pixel images, so be sure that you're not piling on textures and patterns without thinking about what they're adding to your base. Ask yourself whether you need to use scan lines and be sure that if someone asks you why you used it, you can answer that question. In the tutorials above, I used the star bokeh texture because I wanted to add some nice accents to the empty areas. The same can be said about the scan lines. With the "shine" effect, I did that in order to put more emphasis in that area.

Using scan lines and the bokeh texture and the shine effect was too much. It made my button base look way too messy. From here on out, I'll just use the bokeh texture.

Stay away from "neon" and super bright colours

How bright is too bright? Your button is meant to attract people to visit a certain site, not drive them away because your button is a mixture of bright yellows, harsh reds, and neon greens! Take a look at these two buttons. Both of them are super bright (almost white). The colours are very "neon" and eye-straining. Poor colour choices can make your button look very low-quality, but more importantly, bright colours make your text harder to read.

While editing colours and applying textures, keep a close eye on your button base. Sometimes, your button might seem too bright and eye-straining. This is not a good way to finish off your button because it doesn't look very attractive. That's not to say that you "have" to use dark colours only, but use some common sense when editing colours and do your best to stay away from "neon" colours that are just way too intense. For example, 94F9DC, FFFF78, and A0FF68 are not good colours for your button (for those of you who are curious, the colours are #94F9DC, #FFFF78, and #A0FF68).

Take a look at the panel of colours on your right. Using the eyedropper tool in Photoshop, these are colours that I grabbed off of buttons that are way too bright. These were the dominant or main colours on the button, and I couldn't stand more than a passing glance because the "neon" palette was just so strong.

Now, don't mistake bright for light. The brightness of a colour means we're talking about how strong or intense it is. The brighter the colour (like a neon green), the more tacky and eye-straining your button will look.

Final tips:

- I sharpen and use the "dreamy" effect for a lot of my graphics, buttons, and layouts. It's such a common process that I made a Photoshop action to speed up the process. Pressing a single button goes through each step of sharpening, blurring, and merging my layers.

- Part of creating a unique button is being able to experiment. Here are some examples of "before" (the image has been cropped) and "after" (the image has been edited). Some stay on the simple side, while others get really creative!

Before… …and After! Edits made:
- "Blur" technique; colour balance edited
- Sharpened, "Blur" technique, colouring technique applied
- "Blur" technique, Sharpened, colouring technique applied, two light textures applied
- Colouring technique applied, one light texture applied

- Want a fast and easy way to edit your images? Download Photoshop actions!



Ch 5: Borders

While borders may seem like an "add on" or something that's not very crucial, it's actually a very important step. What borders do is help frame your button base. In certain cases, some border styles might even help direct the viewer's attention to specific parts of a button.

Parts of a border

For the majority of borders, you'll have a dark "outer" border and a white "inner" border. In the visual example below, the borders have been scaled up so that you can make out the tiny details. The red line points to the outer border while the blue line points to the inner border.

A border is more than just a rectangular square. Now, it can be all sorts of different styles! One of the fun part about owning a button request site is taking time to create totally unique borders. Take a look at some I've created over at Open Eyes.

Creating your borders

As a button maker, you should respect your fellow button makers and stay away from tracing over their borders. Even if it's something as simple as a "cloud" border, draw it by hand yourself. When I first started making buttons, I had a list of border styles I liked. Other sites were using the neat "cloud" border so what I did was open up a blank 88 by 31 pixel screen in Photoshop, and started to draw it. I did not use any other border as a reference (for instance, I didn't say "well, this site's cloudy border has three pixels in the top, then they go down one pixel, then inwards two pixels"). I just started with the concept (i.e. a cloudy shape) and went from there. It took a lot of trial and error since I wanted to make each side even, but in the end I got it to work!

While using popular border designs isn't a bad thing, why not go a step further and design your own border from scratch? Here are some that I've created myself:

Completely original button borders may be hard to come up with, but it's very satisfying when you do offer something unique. It'll make your buttons stand out from the crowd!

The importance of the inner border

It may seem strange that such as small aspect of the button can make it feel completely unfinished, but that's the case here. A white border helps accentuate your outer border while helping it frame your button base.

Some border styles don't use a white inner border, such as these:

When creating your button borders from scratch, make sure that the white inner border lines up appropriately with the darker outer border.


Tutorial: Adding a border

ABC Extra: You may want to check out the border making tutorial first.

Step 1: Open up a new screen and make it 88 pixels in width and 31 pixels in height. The most important thing to remember is to set the screen to "transparent" as indicated in the screenshot below.

Step 2: For this tutorial, I'll be using this image:

Step 3: Open up your file that contains your border. If you don't have a border ready to go, you'll have to create yours from scratch (see here). For this tutorial, I already have a file with a border I'll be using.

With my border screen selected, hold "Ctrl" and press "A" to select your entire layer. Alternatively, you can go to the top of your menu, click "Select", "Load Selection", then press "OK".

While your layer is selected, hold "Ctrl" and press "C" to copy your layer. Alternatively, you can go to "Edit" at the top, and click "Copy".

Step 4: Click on the screen that has your button base. Hold "Ctrl" and press "V" to paste your border. Make sure that the layer with the border is at the very top.

Step 5: Repeat the same process for the black outer border. Click on the screen that has your border and highlight the layer that has the outer border. Select it all, copy it, then click on the screen that has your button base and paste it there. Again, make sure it's at the very top. This is what you should have so far.

Step 6: From this step forward, I won't be using the screen with the border anymore so I've closed that. The button border I've selected requires me to delete some of the edges to make it transparent. To make things easier on yourself, let's zoom in. At the bottom left corner of your screen, you should see something like this:

I've set mine to 1600%. In the "tools" screen, select the "Eraser". If your icon looks different than the one in the example below, right-click on the image and select the correct eraser icon. After doing that, you should see "Mode" pop up at the top of your -blocked- We'll need to set it to "Block" because we want our eraser edge to be completely straight.

After making sure that your image is selected (in the layers screen, it'll be highlighted in blue; you can always click your layer to choose it if it's not already highlighted). Using the black outer border as a guideline, carefully erase bits of your image. Don't go overtop of the black border, just erase anything outside of it.

Step 7: Repeat this erasing process anywhere it's needed. For example, if you're using a "cloud" border, you'll have a ton of pockets to erase since it runs around the button. On the other hand, a border style like "three singles" is super easy. There's no area you need to erase!

After erasing everything, you should have something like this (note the curved corners):

Step 8: We're definitely not leaving our border like that as it doesn't match our colour palette. Plus, it's a bit on the unattractive side, isn't it? There's so many things you can do with border styling! You can see a couple techniques in this tutorial.

After some editing, I have this:


Final tips

- Having a "white inner border" doesn't mean it has to be white. What I like to do is set the opacity of the white inner border around 60-80%. This gives the inner border a nice faded effect. Also, to have that nice "neon" look that some buttons have, you can set your white inner border to "overlay". This works best with dark images. Of course, if it's too "bright", you can lower the opacity (I tend to put around 70-80% opacity with overlay).

Here's an example of all three "types". In the first, the white inner border has no fade or layer effect. It's simply a full 100% opacity white border. In the second example, the white inner layer has been faded a bit as I lowered the opacity. In the third example, the white layer has been set to overlay.

I personally think of them like this. If I want a simplistic button, I use a 100% white border. To make the button look softer (perhaps becuause of the theme or the bold colours), I lower the opacity. For a "neon" look that's bright and eye-catching, I set it to overlay.



CH 6: ADDING TEXT

Now that you have a spiffy button with a border added to it, one of the last things you need to do is add text.

Should I choose a "large" font or a small font?

The answer to this question depends on a few things.

The area you have to devote to text

As I said in a previous chapter, I like having 50% of the button space available for text. Depending on whether or not you've chosen a focal image, your button may have more or less room. Here are some examples:

This is what I mean by a 50/50 split between the focal image and the area the text sits.

Here, the focal image is a bit small so the text takes up about 70% of the button space.

Here, the "50/50" split is horizontal. The focal image stretches across the top, leaving the bottom half for the text.

There's no focal point here, so the text has 100% of the button space.

In general, the larger the area you have for your text, the better the "large" font used will look. In the scorchio button I've been using through this guide, there's a rough 50/50 split of focal image versus text space. This ratio is very common so I'll be using it for this step. Suppose someone requested from me and wants me to write "Turnip's Button" on the button.

The most common mistake that new button makers do is try to use large font. The font above looks very unappealing because the word "Turnip's" just isn't large enough. What if we tried a different font?

In the example above, I used a font called Bubblegum. Even at smaller font sizes, the thickness of the font design allows for easy reading.

While this text could look fantastic with some additional styling, it's covering the focal image, which is bad. Looks like we're back to the drawing board because the button above looks very low-quality.

After trying a few other large fonts, it just doesn't seem to work. Sometimes, it's best to use a small font. While the "fad" these days is to use large fonts because they look stylish, why should your button quality suffer? Text should first and foremost be functional.

In the example above, the word "Turnip's" is written in a small font called Bangalore. It's one of the larger small fonts and judging by the button above, it's not a good choice either. The text is still covering parts of the focal image.

You know what? Simple works. Sure, the font isn't fancy but not only is it easy to read, it works well within the space you have. Why bother having a focal image if you're going to cover it up with text? Here are some examples where I've used large fonts:

Note that in every example, I have a large amount of space available for text design (more than 50% of the button space). Because I have the space available, I chose to write the text using a large font. Don't go into a button thinking "I'm going to use large font" without analyzing your button base and text first.

The text you intend to write

You're definitely not going to want to write "Turnip's Link Directory of Button Sites" in large font because that's just silly. There's no way you'll have enough room to even write "Directory of Button Sites"! With large fonts, I tend to use them for single site names or to emphasize a particular word. Take these for example:

In all of the examples above, the site names are not "single" names (i.e. there's more than one word). However, I use large font to emphasize the more important part of the name.

If you desperately want to use large fonts for one reason or another, here's a way you can squeeze them in:

By limiting the "large" font to a single letter or two, you can add a lot of style to your text design.

Small fonts

That's a list of the more popular small fonts. The font name is written in all capitals, and the word "Example!" is written in sentence case. I've also provided the size I use when writing with specific fonts.

Here are some quick tips:

- When you choose the "text" tool, make sure that your anti-aliasing method is set to "none". You can find this option at the top of your window next to your font size option.
- If you want to use a small font on the larger side, Awesome and Bangalore are both excellent choices. Awesome has a larger width (i.e. thickness to the font) and I find it works extremely well if you want to do a colour gradient.
- Have a ton of text? Wendy is a suitable choice. It's on the smaller side so you'll have to be careful when styling the text in order to make it easier to read.
- Why use just one small font? Take a look at the bottom two examples (the ones that say "A Button Collection"). In the first example, the letters A, B, and C are written in Bangalore and the rest in Silkscreen. In the second example, the letters are written with Pixel-Love and the rest in 04b03.
- Try to stay away from using only cursive small fonts (like writing your entire text in Pixel-love). It can get hard to read.
- Always capitalize every single letter of your small font. For example, if a requester wants the text "Turnip's Portfolio", you'd write "TURNIP'S PORTFOLIO" in whatever small font you choose. The need for all capitals is due to the fact that the text will be easier to read and it'll stand out much more. Especially with fonts like Bangalore, writing in normal sentence case makes it harder to read because of the font style.

In the visual example to your left, I have three sets of buttons. The text used in the first row is Bangalore, the text used in the second row is 04b03, and the bottom row uses Pixel-love. In each set, the first button uses normal sentence case and the second button uses all capitals.

Capitalizing the entire word just makes it much more visible and easy to read.

Remember when I advised you to stay away from cursive small fonts? The first button example in rows one and three both have a major issue: text readability is low.

ABC Extra: With Pixel-love, I like using it as the first letter in a site name (like A Button Collection). This gives the text a bit more style without hurting its clarity.

Large fonts

I always get asked what type of fonts I use so here's a short list!

These are some of my absolute favourite fonts to use on buttons. Some, however, are easier than others. Be very careful about using cursive fonts like Wendy Medium. The font is on the thin side and has no weight, meaning that you need to make the font size larger in order to make it easy to read. Take a look at this:

Normally, I wouldn't use cursive font in this case because I had a lack of vertical space and the there was a lot that needed to be written. Since this was requested by a user, this is absolutely the smallest I would go in terms of font size. Cursive fonts tend to look much more appealing when they're written very large anyways. Take a look at these:

ABC Extra: If I'm using a texture background (i.e. my button doesn't have a focal image), I love using cursive fonts since I have a ton of space to work with.

Here are some quick tips:

- Don't want to download new fonts? That's fine! There are a lot of generic fonts I use that should have come pre-downloaded on your computer. Look for fonts like Impact, Century Gothic, Times New Roman, and Georgia.
- When you choose the "text" tool, make sure that your anti-aliasing method is set to "crisp". You can find this option at the top of your window next to your font size option.
- If you're completely new to using large fonts, try to experiment with the easier styles first, like Okuda and Headline. These are similar to Sans serif fonts due to the fact that they're more "normal". From there, perhaps move on to a slightly more decorative font, like Hand of Sean or Happi. I would only recommend using cursive fonts like Wendy Medium after you know what you're actually doing.
- Want to save space when using a large font? Simple! Don't capitalize any of the letters or site name. If you look at the example above, both the site names "able" and "demure" are written in lower case.
- With thinner fonts, I like to duplicate the font layer to "beef" it up a bit. This adds a small amount of "weight" to the font, meaning it'll be more visible. Sometimes you might get jagged edges when duplicating your font layer so be careful. Experiment and lower the opacity of your duplicated font layer.

Tutorial: Adding text to your button

Step 1: Open up your blank button in Photoshop. I'll be using this one here:

Since I'm making a link back button for this site, I'll be adding the text "A Button Collection". This won't be an easy task since this site name is on the long side. Still, let's continue. In the "tools" screen, click on the "T" icon as indicated in the red square below.

For this button, I'll be using the font called 0b403, a very popular small font. I want each of the words in my site name to go on a separate line, like this:

A
Button
Collection

To do this, I'm going to select the "Type" tool (i.e. the "T" icon), click on the button base, and type "A". When I'm finished, I click the "checkmark" symbol indicated in the screenshot below.

I click in an area beneath the "A" and type in "BUTTON" (in capitals). I repeat this process for the word "COLLECTION". After moving each layer so that it's somewhat centered, here's what I have:

Step 2: After all of the text is on the button, actually look at it to see if it's visually appealing. Here, the word "collection" is a bit large. It's almost touching the focal image and the right border. I think I'll change the font to a smaller "small" font, such as Wendy and see how it looks.

Well, the word "collection" is definitely smaller, but I think I'm going to go ahead and change all of the other words to the same font, just to keep things symmetrical. As you can see, text is one of the more fickle aspects of buttons. If one font doesn't work or doesn't look appealing, change it right away!

Here's what I have:

The new font is called "Wendy" is as you can probably see, it's bordering on tiny! However, this is the smallest you can go and after I'm done with styling, it should be very readable.

Step 3: In your Layers screen, make all of the layers invisible except your text layers. You can do this by clicking the "eye" symbol beside each layer.

Step 4: Highlighting one of the text layers (it doesn't matter which one), hold the "shift" and "Ctrl" keys, then press "E" to merge the visible layers (or go to "Layers" at the top and choose "Merge Visible").

In the example images, just ignore the last two layers (i.e. layers 5 and 4). Those were the scan lines and shine layers from previous tutorials.

And that's it! In the next section, we'll be styling our text because we definitely don't want to leave it plain old black!

Text placement

Not only do your font choices matter, but where you put your text on the button base is crucial. It can be the difference between a button that looks messy, complicated, and unorganized, or one that looks tidy and high-quality. Take a look at the visual below:

In the first button on the left, I used Bangalore. This was not a good choice because it's quite a large font. I switched to 04b03, but notice how it's still covering parts of the focal image. The bottom button example shows a much better use of space. Note how none of the text covers the facial area. The text is relegated to the empty areas of the button.

Also, the text has been aligned to the right. If you notice the left side of the text, it looks like it's curving around the petpet's face.

To set different alignments to your text, take a look at the screenshot below.

The three options are align to the left, center, and align to the right.

ABC Extra: In the third button example, do you see the top right area of the button? It's completely empty so I may want to put an animation there (for instance, a sparkle animation would be a great use of space). Here's an example:

In the Chrysalis button above, each aspect of the button has its own specific spatial area. The focal image is on the left, the text placement is the top right corner, and the animation plays out in the empty space below that.

While the second button example (the one where the "Neopets Directory" is only slightly covering the focal image) isn't completely unusable, it's best to make sure that your focal image isn't covered by anything just to be on the safe side.

For focal images that are on the far left or right, text placement will be easy. Take a look at these examples:

On the other hand, what if your focal image isn't easily defined? Here are some that uses different text placement than the ones above:

For Retouch's button, the focal image is the row of roses at the bottom. Thus, the text placement is above it. The same situation can be seen in the second button. For the third button, the focal image is quite large (it's the character writing in the journal). The text placement is placed in the very top corner.

Are you using a textured/patterned background?

Here are some examples of buttons that do not have an image focal point:

What's interesting to keep in mind is that all of the text placement is centered. This is because there is no image focal point. For example, take a look at the first button. If the word "Alliance" was placed on the far right of the button, this implies that there's a focal point on the left. There isn't one because the background is a textured background.

When using textured backgrounds, putting text in the middle helps emphasize it much more. It's also aesthetically appealing because of the symmetry.

If using a simple patterned background or texture, putting the text anywhere besides the center can look a bit strange. Here's an example:

With buttons text is the most important thing (I'll probably repeat this over and over again throughout the guide). What's the purpose of a button? To advertise your site. For the examples above, the point isn't to advertise a site, but to add a bit of design to a page (i.e. colourful placeholders). If the blue example was a button for a site, however, note how much empty space there is. The text isn't as noticeable but a larger problem is that it just looks a bit dull. The purple example is much better since the text is centered. Note how it's the very first thing you see when you glance at it. Also, the patterned background is accenting the text, rather than becoming the focal point.

Final tips:

- The anti-aliasing mode is extremely important! If you're using a large font, then your AA should not be set to "none" (personally, I like setting large fonts to "crisp"). If you're using a small font, then the AA should be set to "none". How do you fine the anti-aliasing option? When you've selected your Type Tool, look at the top of your screen. The AA is highlighted in the red box below:



CH 7: STYLING TEXT

Here's another one of those "aw, it's so easy. Why should I pay attention to it?" categories. If you only take one thing away from this guide, it should be this: text is the most important aspect of a button. Nothing else matters nearly as much. A button is meant to advertise a site and it can't do that very well if the text is unattractive and hard to read. What new button makers often do right away is make the jump to "large" fonts without perfecting their "small font" technique. This is a major error and it's often the #1 reason why a button will look low-quality.

Time to go back into the vault and pull out some of my earlier buttons. At the time, I was super proud of these but looking back on them, I cringe a bit inside. As a new button maker, my focus was too much on making the button look "pretty" rather than making it look polished and finished.

Single coloured border

Probably the most common button technique is to outline the white-coloured text with a single coloured, 1 pixel border. Here are some examples:

Simple, but effective. If you have a super colourful button base, using white text will help make it stand out.

Gradient overlay

In the example above, a gradient overlay was applied to the text. However, it's not very effective. It makes the text look harder to read because the border isn't a strong colour. If you want to apply a gradient to your text, I suggest using white and another very light colour. Here are some examples:

In both examples above, the text has been treated with a gradient overlay. In the first, I chose white as the "main" colour and I used the eyedropper tool to grab a purple tone from the button base. However, I edited the purple colour selection and made it extremely light, going from the original colour of #BA5675 to #F2E0E5 (or #F2E0E5 since that colour is hard to read). The idea is to create enough of an effect that it's noticeable, but not strong enough to make the text overlay dark and hard to read.

Click here for a tutorial on adding a gradient overlay to your text.

White as the outer border

In rare cases, you may want to have coloured text with a white outer border (rather than the common white text and coloured border). This is a bit of an advanced method and I wouldn't recommend new button makers do this. It's not so much the technique that's hard, but how it's used. Here are some examples:

When using a white border, you have to carefully maintain a thin balance between text readability and button aesthetics. With buttons that have much darker images, using a white border will make the edges of the text stand out so that it looks really low-quality and awkward, like this:

The colours of this button are on the darker side, so choosing a white border isn't the best choice. The edges look jagged and the text style isn't visually appealing. On the other hand:

Using a coloured outer border makes the white text stand out much more in this case.

My general rule of thumb is that white borders look best (and can be used) with button bases that are light in colour (for example, the Yeppeo button above). With a base image that is darker, white stands out way too much.

ABC Extra: With new button makers, I always recommend they perfect the first text style option (white text with single pixel, solid colour border) before moving on to other techniques that require a more careful eye.

Using white stripes

If your button base image is on the busy or colourful side, using a white stripe behind your text can improve visibility and readability. Here are some examples:

In the first example, the white stripe is at 100%, while in the second button the opacity has been lowered by about 15%. With white stripes, be careful that you don't fade it too much (the second button works because the colour of the text is dark and easy to read anyways).

Tutorial: Add some style to your text!

Step 1: We'll be using this button from previous tutorials.

As you can see, the text definitely needs some sprucing up. It's very plain and low-quality right now. With your text layer selected (it should be highlighted in blue in the Layers screen), go to the bottom and click on this symbol:

From the menu that pops up, select "Color Overlay". Click the coloured square indicated in the red box. Once you click that, a new screen should appear called "Color Picker". I want my text to be white in colour, so I'm going to click in the area indicated by the red arrow.

Step 2: That results in this:

Let's put a nice solid border around our text. If you look at our Layers screen, notice that the "Color Overlay" style has been added to the text layer.

To quickly bring up the style menu, double click on "Color Overlay" and the previous "Layer style" screen should come up. This time, click on "Stroke" near the bottom. Set the "size" to 1 pixel. In the "Fill Type" option, click on the coloured square. This should turn your cursor into an eyedropper. Use the eyedropper to pick a suitable colour from your button base. In the example below, I've chosen a nice brown shade.

ABC Extra: I try to position the screen with my button in an area where it won't be overlapped by the new screens. This allows me to see the button and click on it to get the colour I want.

Step 3: While the border makes the text easier to read, it stills needs a lot of work. Let's add a shadow to the text to help make it "pop". Again, click "Color Overlay" in your Layers window, bringing up the Layer Style screen again. This time, we'll be choosing Drop Shadow.

The default colour of your shadow is black. To help blend the text in with the button, I've changed it to a very dark brown (make sure your shadow colour isn't too light or the shadow won't be very substantial). For the "opacity", play around with the setting. Some lighter buttons require a lower opacity since you don't want your shadow to be harsh or obvious. Here, I've lowered it from 75% to 60%.

In addition, I changed the angle of the drop shadow so that it drops in the opposite direction (the shadow now lies on the left side rather than near the bottom right). The rest of the settings work generally well, so you don't have to change them if you don't want to.

Step 4: One last step I'm going to do in terms of layer style is add a soft glow. In your Layers screen, double click on "Color Overlay" to quickly bring up the Layer Style screen, then choose "Outer Glow".

The default colour of the outer glow is this neon yellow. While it certainly gets the job done in adding a nice glow, let's customize it and make it match our button base colours. I've changed it to orange (remember that to change the colour, you just need to click on the coloured square to bring up the "Color Picker" window).

Here's what we have so far:

Step 5: While you can leave the button like that, the text looks like it could use a bit more work. Create a new layer below the text layer.

Step 6: Go back and select the text layer (it should be highlighted blue in the Layers window). At the top, click "Select", "Load Selection", then "OK". This should select your text layer (i.e. only the words themselves).

Step 7: While your text layer is being selected, go back and click on the empty layer that was created earlier.

Set your Foreground color (i.e. the large square in the Tools screen) to a colour that matches your button border. In my case, I chose #902103.

Step 8: Choose the "Paint Bucket" tool (or press "G" on your keyboard) and click once into the selected area.

Step 9: Hold "Ctrl" and press "D" to deselect your text layer (or click "Select" at the top and "Deselect"). What we just did is create a coloured version of our text under the text layer. Our next step is to blur that layer so that it creates a nice background effect for our text. First, make sure that the bottom layer is selected.

Go to the top and click "Filter", "Blur", and finally "Gaussian Blur". I usually use a radius of 2 pixels. Click "OK".

And finally, this is what we have:

It's been quite a long journey, hasn't it?


Final tips:

- With text style, always make sure you're putting functionality before "looks".
- There's absolutely nothing wrong with wanting to stay simple. Don't think of the single coloured border as being too "plain" or "interesting" just because it's not as fancy as a gradient or other techniques.
- I find text design to be one of the interesting aspects of button making. Here are some examples of how different text can look:




Visitor Tips

Have a tip/trick you want to share with other button makers? Fill out the form below and send it in! Here are some great "topics" or questions you can answer:






General Tips

Text overlap

This isn't a tutorial, more of a general guideline but hopefully you'll find something useful here.

For the most part, try to keep your text off of your focal image. If the words are covering your focal image, then your button will look more messy and less polished. Some very slight overlapping is OK. Let's take a closer look:

In the buttons above, the the face is the focal point, so putting the text over the body area or the side of the head is completely fine.

Here, the text overlaps the border, but only slightly. It adds something unique to the overall button. However, you want to be careful with overlapping because it can easily get out of hand. If your text is on top of your other layers (like in the button above), then it'll have a higher chance of looking better. If your text is below or under your border layers, then your text will look cut-off and lower quality.

Colouring and editing your button base

Stick to a colour palette. One of the best ways to create a visually unified button is to use colours that are found in your button base. For example, don't make your border green if there's no green shades in your base image at all.

With the first button, the border is still black. This makes it stand out a bit too much and doesn't really add any style to the button. Additionally, the text border colour is pink but there is no pink in the base image. The second button is much more unified. The dark blue colours for the border and the text are both taken directly from the button base. Everything looks more in place.



More resources


The Button Survey

What do you for in a button? I'd love to hear your feedback on what you think a high-quality button is so fill out this (rather lengthy) survey!
Other guides

From button-specific guides to colouring guides, here are some tutorials that can help you out.
Where to look for images

Here are some of my favourite places to look for Neo-related images.
Editing resources

Textures, borders, where can you get them? This section has a list of sites with high-quality resources for any button maker to use!



The Button Survey

Yes, this is a rather lengthy survey, but it's for a good purpose! My goal for this survey is twofold:

First, I want to learn more about the visitor's perspective on button-making. From someone who doesn't make buttons, what do they think is "high-quality"? What aspects do they pay attention to the most?

Secondly, I hope this survey helps established button-makers with improving their own quality and service at their site.

The survey...

Important! There are two separate surveys. One is for button makers, those who own (or have owned) a button request site or those who make buttons on a frequent basis. Even if you do request buttons and make them yourself, please limit your answers to a button maker's perspective.

Button requesters refers to those who primarily request buttons and have very limited or no knowledge of button-making itself.

Feel free to add additional comments to any of the questions below.

BUTTON MAKERS

1) How long have you been making buttons?

2) Do you currently own or have owned a button request site?
If your answer is "yes", please provide dates of when your site opened and how long it was open for.

3) In terms of providing service for your visitors/requesters, rank the following aspects from 1 (least important) to 5 (most important):

  • Speed: speed at which the button is finished and posted for the requester
  • Quality: overall quality and polish of the button
  • Communication: contacting the requester and keeping an open line of communication
  • Satisfaction: making sure that the request likes the button (ex. Offering a redo if not completely satisfied)
  • Convenience: presenting your site in a convenient and welcoming manner (ex. Fair rules, easy to access pick-up areas, button code fully provided, etc)
Note: You can only use a number once. For example if you choose "speed" as the most important (5), then you can't assign a ranking of 5 to any of the other four options.

4) On a scale of 1 (not important at all) to 5 (extremely important), how important is offering high-quality service?

5) Opinion question: How would you define high-quality service at a button request site?

6) Opinion question: Do you feel that visitors/requesters can distinguish between high and low quality service?

7) If you have a "trick" in your rules, how often do requesters fail?
Give an estimate, such as 5/10 people, or 1 in every 5 requests.

8) In terms of service at your button request site and the issues you run into, mark the following as never, rarely, sometimes, often, or all the time:

  • Rules: people skim or skip the rules
  • Credit: requesters do not link back to your site or give appropriate credit for their button
  • Theft: requesters claim the button was made by them
  • Unused: buttons are made, but the requester never ends up using it

9) From 1 (not important at all) to 5 (extremely important), how important are the "rules" to your button request site?

10) How "often" do you think button sites should have open requests?
Give a general estimate, such as once a week, or twice a month.

11) From 1 (not important at all) to 5 (extremely important), how important is it to you that you open requests often?

12) Opinion question: In terms of service alone, what are some areas that you think should be improved, whether from the site owner's or requester's standpoint?

13) On a scale of 1 (not important at all) to 5 (extremely important), how important is offering high-quality buttons?

14) Opinion question: How would you define high-quality buttons?

15) Opinion question: Do you feel that visitors/requesters can distinguish between high and low quality buttons?

16) In terms of providing high-quality buttons, rank the following aspects from 1 (least important) to 7 (most important). In other words, what do you feel is the most important aspects of a high-quality button?

  • Text clarity: how easy it is to read the text on a button
  • Text styling: how the text is edited (ex. Adding borders, gradient overlay); fonts used (small vs. large fonts)
  • Image clarity: the crispness of the image
  • Border: the design of the border
  • Animation: the style and execution of the animation
  • Image editing: the editing processes done to the button base image
  • Cropping: how the image is cropped, whether there is a focal point
Note: You can only use a number once. For example if you choose "cropping" as the most important (7), then you can't assign a ranking of 7 to any of the other four options.

17) From 1 (least important) to 7 (extremely important), rank the following aspects in terms of design:

  • Text clarity: how easy it is to read the text on a button
  • Text styling: how the text is edited (ex. Adding borders, gradient overlay); fonts used (small vs. large fonts)
  • Image clarity: the crispness of the image
  • Border: the design of the border
  • Animation: the style and execution of the animation
  • Image editing: the editing processes done to the button base image
  • Cropping: how the image is cropped, whether there is a focal point
Note: You can only use a number once. For example if you choose "cropping" as the most important (7), then you can't assign a ranking of 7 to any of the other four options.

18) What aspects of a button do you feel is your strongest point?

  • Text styling
  • Text clarity
  • Image clarity
  • Border
  • Animation
  • Image editing
  • Cropping

Included up to three in your answer form.

19) Opinion question: Is there such a thing as a "universal" marker of a low-quality button? In other words, is there something that can be used to define a "low-quality" button?
For example, illegible text or blurry image.

20) In the following list, what do you feel is the most important aspect of a button? Choose only one:

  • Text styling
  • Text clarity
  • Image clarity
  • Border
  • Animation
  • Image editing
  • Cropping

21) Have you ever created your own unique border designs? In other words, borders not found or offered at any other button request site.

22) Opinion question: Why do you add animation to your buttons? Exclude situations where the requester asks for animation; focus on buttons where you had free reign.

23) In terms of your own satisfaction after creating a button and how you define "high-quality", do you:

  • Feel completely satisfied with all of your buttons
  • Feel somewhat satisfied with all of your buttons
  • Feel satisfied with some of your buttons
  • Feel satisfied with a small portion of your buttons
  • Never feel satisfied with any of your buttons

24) Where do you get inspiration for your buttons? Please mark each option as: Never, Rarely, Sometimes, Most of the time, or All the time.

  • Other button makers
  • Other site owners (non-button sites)
  • From other Neofriends (non-site owners)
  • From friends/family (those who don't play on Neopets)
  • Other (please specify)

BUTTON REQUESTERS

1) How often do you request buttons?

2) How often do you visit a button request site, not to request, but just to check the site or browse? Choose one of the following:
Every day, a few times a week, a few times a month, a few times a year, I only visit when I need a button

3) In terms of the service provided at button request sites, rank the following aspects from 1 (least important) to 5 (most important):

  • Speed: speed at which the button is finished and posted for the requester
  • Quality: overall quality and polish of the button
  • Communication: contacting the requester and keeping an open line of communication
  • Satisfaction: making sure that the request likes the button (ex. Offering a redo if not completely satisfied)
  • Convenience: presenting your site in a convenient and welcoming manner (ex. Fair rules, easy to access pick-up areas, button code fully provided, etc)
Note: You can only use a number once. For example if you choose "speed" as the most important (5), then you can't assign a ranking of 5 to any of the other four options.

4) On a scale of 1 (not important at all) to 5 (extremely important), how much importance should button site owners place on offering high-quality service?

5) Opinion question: How would you define high-quality service at a button request site?

6) Opinion question: Do you feel that button request site owners can distinguish between high and low quality service?

7) Opinion question: What are your thoughts when a button request site has a "trick" in the rules?

8) In terms of the rules at the button sites you visit, which best describes your thoughts:

  • a. Every button site I've visited had fair rules
  • b. The majority of the button sites I've visited had fair rules
  • c. Most of the button sites I've visited had unfair rules
  • d. The majority of the button sites I've visited had unfair rules
  • e. Every button site I've visited had unfair rules

9) From 1 (not important at all) to 5 (extremely important), how much importance do you place on the "rules" at a button request site? Choose from:
Extremely important, very important, somewhat important, not important at all

10) How "often" do you think button sites should have open requests?
Give a general estimate, such as once a week, or twice a month.

11) How often do you contact your button maker after sending in a request form? Choose from:
Often, sometimes, not often, never

12) Opinion question: In terms of service alone, what are some areas that you think should be improved, whether from the site owner's or requester's standpoint?

13) In terms of your experiences with requesting buttons, what sort of issues have you run into with your button-maker or the button request site?

14) Opinion question: How would you define high-quality buttons?

15) Opinion question: Do you feel that visitors/requesters can distinguish between high and low quality buttons?

16) In terms of high-quality buttons, rank the following aspects from 1 (least important) to 7 (most important). In other words, what do you feel is the most important aspects of a high-quality button?

  • Text clarity: how easy it is to read the text on a button
  • Text styling: how the text is edited (ex. Adding borders, gradient overlay); fonts used (small vs. large fonts)
  • Image clarity: the crispness of the image
  • Border: the design of the border
  • Animation: the style and execution of the animation
  • Image editing: the editing processes done to the button base image
  • Cropping: how the image is cropped, whether there is a focal point
Note: You can only use a number once. For example if you choose "cropping" as the most important (7), then you can't assign a ranking of 7 to any of the other four options.

17) From 1 (least important) to 7 (extremely important), rank the following aspects in terms of design:

  • Text clarity: how easy it is to read the text on a button
  • Text styling: how the text is edited (ex. Adding borders, gradient overlay); fonts used (small vs. large fonts)
  • Image clarity: the crispness of the image
  • Border: the design of the border
  • Animation: the style and execution of the animation
  • Image editing: the editing processes done to the button base image
  • Cropping: how the image is cropped, whether there is a focal point
Note: You can only use a number once. For example if you choose "cropping" as the most important (7), then you can't assign a ranking of 7 to any of the other four options.

18) Opinion question: Is there such a thing as a "universal" marker of a low-quality button? In other words, is there something that can be used to define a "low-quality" button?
For example, illegible text or blurry image.

19) In the following list, what do you feel is the most important aspect of a button? Choose only one:

  • Text styling
  • Text clarity
  • Image clarity
  • Border
  • Animation
  • Image editing
  • Cropping

20) When looking to request a button, rank the following from 1 (least important) to 4 (most important):

  • Button quality: the overall polish and quality of the finished product
  • Frequent open requests: if you give this a low ranking, that means you're willing to wait in order for requests to open up
  • Word of mouth: testimonials from friends, whether a button site is ranked, its popularity in the site community
  • Quality of service: buttons are finished fast, site owner is friendly, site is convenient to use
Note: You can only use a number once. For example if you choose "button quality" as the most important (5), then you can't assign a ranking of 5 to any of the other four options.

21) Ultimately, what makes you decide to request a button at a particular site but not another?

22) Taking a look back at all the times you've requested a button and how you define "high-quality", do you:

  • Feel completely satisfied with all of your buttons
  • Feel somewhat satisfied with all of your buttons
  • Feel satisfied with some of your buttons
  • Feel satisfied with a small portion of your buttons
  • Never feel satisfied with any of your buttons

23) How often do you request a button and end up not using the finished item? Choose from:
Always, sometimes, rarely, never

24) In cases where you requested a button and chose not to use the finished item, why?

  • I wasn't satisfied with the quality of the finished button.
  • I had already requested from another site and decided to use that instead.
  • I forgot I requested a button.
  • I requested a button for a new site but it never ended up opening.
  • Other (please specify)
Choose as many answers as you want.

25) Have you ever requested a "re-do" with any of your buttons?

26) If yes, did the button maker remake your button or deny your request?

27) Have you ever wanted a re-do of a button but did not voice your concerns? If yes, why?


SEND IN YOUR ANSWERS!

The answers...

To see the complete list of answers, click here!

Special thanks to Kate for helping me with some of the questions!

BACK TO MAIN RESOURCE PAGE



Survey Answers

Here are the questions again, just in case you want to refer back to them.
BUTTON MAKERS

1) How long have you been making buttons?

2) Do you currently own or have owned a button request site?
If your answer is "yes", please provide dates of when your site opened and how long it was open for.

3) In terms of providing service for your visitors/requesters, rank the following aspects from 1 (least important) to 5 (most important):

  • Speed: speed at which the button is finished and posted for the requester
  • Quality: overall quality and polish of the button
  • Communication: contacting the requester and keeping an open line of communication
  • Satisfaction: making sure that the request likes the button (ex. Offering a redo if not completely satisfied)
  • Convenience: presenting your site in a convenient and welcoming manner (ex. Fair rules, easy to access pick-up areas, button code fully provided, etc)
Note: You can only use a number once. For example if you choose "speed" as the most important (5), then you can't assign a ranking of 5 to any of the other four options.

4) On a scale of 1 (not important at all) to 5 (extremely important), how important is offering high-quality service?

5) Opinion question: How would you define high-quality service at a button request site?

6) Opinion question: Do you feel that visitors/requesters can distinguish between high and low quality service?

7) If you have a "trick" in your rules, how often do requesters fail?
Give an estimate, such as 5/10 people, or 1 in every 5 requests.

8) In terms of service at your button request site and the issues you run into, mark the following as never, rarely, sometimes, often, or all the time:

  • Rules: people skim or skip the rules
  • Credit: requesters do not link back to your site or give appropriate credit for their button
  • Theft: requesters claim the button was made by them
  • Unused: buttons are made, but the requester never ends up using it

9) From 1 (not important at all) to 5 (extremely important), how important are the "rules" to your button request site?

10) How "often" do you think button sites should have open requests?
Give a general estimate, such as once a week, or twice a month.

11) From 1 (not important at all) to 5 (extremely important), how important is it to you that you open requests often?

12) Opinion question: In terms of service alone, what are some areas that you think should be improved, whether from the site owner's or requester's standpoint?

13) On a scale of 1 (not important at all) to 5 (extremely important), how important is offering high-quality buttons?

14) Opinion question: How would you define high-quality buttons?

15) Opinion question: Do you feel that visitors/requesters can distinguish between high and low quality buttons?

16) In terms of providing high-quality buttons, rank the following aspects from 1 (least important) to 7 (most important). In other words, what do you feel is the most important aspects of a high-quality button?

  • Text clarity: how easy it is to read the text on a button
  • Text styling: how the text is edited (ex. Adding borders, gradient overlay); fonts used (small vs. large fonts)
  • Image clarity: the crispness of the image
  • Border: the design of the border
  • Animation: the style and execution of the animation
  • Image editing: the editing processes done to the button base image
  • Cropping: how the image is cropped, whether there is a focal point
Note: You can only use a number once. For example if you choose "cropping" as the most important (7), then you can't assign a ranking of 7 to any of the other four options.

17) From 1 (least important) to 7 (extremely important), rank the following aspects in terms of design:

  • Text clarity: how easy it is to read the text on a button
  • Text styling: how the text is edited (ex. Adding borders, gradient overlay); fonts used (small vs. large fonts)
  • Image clarity: the crispness of the image
  • Border: the design of the border
  • Animation: the style and execution of the animation
  • Image editing: the editing processes done to the button base image
  • Cropping: how the image is cropped, whether there is a focal point
Note: You can only use a number once. For example if you choose "cropping" as the most important (7), then you can't assign a ranking of 7 to any of the other four options.

18) What aspects of a button do you feel is your strongest point?

  • Text styling
  • Text clarity
  • Image clarity
  • Border
  • Animation
  • Image editing
  • Cropping

Included up to three in your answer form.

19) Opinion question: Is there such a thing as a "universal" marker of a low-quality button? In other words, is there something that can be used to define a "low-quality" button?
For example, illegible text or blurry image.

20) In the following list, what do you feel is the most important aspect of a button? Choose only one:

  • Text styling
  • Text clarity
  • Image clarity
  • Border
  • Animation
  • Image editing
  • Cropping

21) Have you ever created your own unique border designs? In other words, borders not found or offered at any other button request site.

22) Opinion question: Why do you add animation to your buttons? Exclude situations where the requester asks for animation; focus on buttons where you had free reign.

23) In terms of your own satisfaction after creating a button and how you define "high-quality", do you:

  • Feel completely satisfied with all of your buttons
  • Feel somewhat satisfied with all of your buttons
  • Feel satisfied with some of your buttons
  • Feel satisfied with a small portion of your buttons
  • Never feel satisfied with any of your buttons

24) Where do you get inspiration for your buttons? Please mark each option as: Never, Rarely, Sometimes, Most of the time, or All the time.

  • Other button makers
  • Other site owners (non-button sites)
  • From other Neofriends (non-site owners)
  • From friends/family (those who don't play on Neopets)
  • Other (please specify)
BUTTON REQUESTERS

1) How often do you request buttons?

2) How often do you visit a button request site, not to request, but just to check the site or browse? Choose one of the following:
Every day, a few times a week, a few times a month, a few times a year, I only visit when I need a button

3) In terms of the service provided at button request sites, rank the following aspects from 1 (least important) to 5 (most important):

  • Speed: speed at which the button is finished and posted for the requester
  • Quality: overall quality and polish of the button
  • Communication: contacting the requester and keeping an open line of communication
  • Satisfaction: making sure that the request likes the button (ex. Offering a redo if not completely satisfied)
  • Convenience: presenting your site in a convenient and welcoming manner (ex. Fair rules, easy to access pick-up areas, button code fully provided, etc)
Note: You can only use a number once. For example if you choose "speed" as the most important (5), then you can't assign a ranking of 5 to any of the other four options.

4) On a scale of 1 (not important at all) to 5 (extremely important), how much importance should button site owners place on offering high-quality service?

5) Opinion question: How would you define high-quality service at a button request site?

6) Opinion question: Do you feel that button request site owners can distinguish between high and low quality service?

7) Opinion question: What are your thoughts when a button request site has a "trick" in the rules?

8) In terms of the rules at the button sites you visit, which best describes your thoughts:

  • a. Every button site I've visited had fair rules
  • b. The majority of the button sites I've visited had fair rules
  • c. Most of the button sites I've visited had unfair rules
  • d. The majority of the button sites I've visited had unfair rules
  • e. Every button site I've visited had unfair rules

9) From 1 (not important at all) to 5 (extremely important), how much importance do you place on the "rules" at a button request site? Choose from:
Extremely important, very important, somewhat important, not important at all

10) How "often" do you think button sites should have open requests?
Give a general estimate, such as once a week, or twice a month.

11) How often do you contact your button maker after sending in a request form? Choose from:
Often, sometimes, not often, never

12) Opinion question: In terms of service alone, what are some areas that you think should be improved, whether from the site owner's or requester's standpoint?

13) In terms of your experiences with requesting buttons, what sort of issues have you run into with your button-maker or the button request site?

14) Opinion question: How would you define high-quality buttons?

15) Opinion question: Do you feel that visitors/requesters can distinguish between high and low quality buttons?

16) In terms of high-quality buttons, rank the following aspects from 1 (least important) to 7 (most important). In other words, what do you feel is the most important aspects of a high-quality button?

  • Text clarity: how easy it is to read the text on a button
  • Text styling: how the text is edited (ex. Adding borders, gradient overlay); fonts used (small vs. large fonts)
  • Image clarity: the crispness of the image
  • Border: the design of the border
  • Animation: the style and execution of the animation
  • Image editing: the editing processes done to the button base image
  • Cropping: how the image is cropped, whether there is a focal point
Note: You can only use a number once. For example if you choose "cropping" as the most important (7), then you can't assign a ranking of 7 to any of the other four options.

17) From 1 (least important) to 7 (extremely important), rank the following aspects in terms of design:

  • Text clarity: how easy it is to read the text on a button
  • Text styling: how the text is edited (ex. Adding borders, gradient overlay); fonts used (small vs. large fonts)
  • Image clarity: the crispness of the image
  • Border: the design of the border
  • Animation: the style and execution of the animation
  • Image editing: the editing processes done to the button base image
  • Cropping: how the image is cropped, whether there is a focal point
Note: You can only use a number once. For example if you choose "cropping" as the most important (7), then you can't assign a ranking of 7 to any of the other four options.

18) Opinion question: Is there such a thing as a "universal" marker of a low-quality button? In other words, is there something that can be used to define a "low-quality" button?
For example, illegible text or blurry image.

19) In the following list, what do you feel is the most important aspect of a button? Choose only one:

  • Text styling
  • Text clarity
  • Image clarity
  • Border
  • Animation
  • Image editing
  • Cropping

20) When looking to request a button, rank the following from 1 (least important) to 4 (most important):

  • Button quality: the overall polish and quality of the finished product
  • Frequent open requests: if you give this a low ranking, that means you're willing to wait in order for requests to open up
  • Word of mouth: testimonials from friends, whether a button site is ranked, its popularity in the site community
  • Quality of service: buttons are finished fast, site owner is friendly, site is convenient to use
Note: You can only use a number once. For example if you choose "button quality" as the most important (5), then you can't assign a ranking of 5 to any of the other four options.

21) Ultimately, what makes you decide to request a button at a particular site but not another?

22) Taking a look back at all the times you've requested a button and how you define "high-quality", do you:

  • Feel completely satisfied with all of your buttons
  • Feel somewhat satisfied with all of your buttons
  • Feel satisfied with some of your buttons
  • Feel satisfied with a small portion of your buttons
  • Never feel satisfied with any of your buttons

23) How often do you request a button and end up not using the finished item? Choose from:
Always, sometimes, rarely, never

24) In cases where you requested a button and chose not to use the finished item, why?

  • I wasn't satisfied with the quality of the finished button.
  • I had already requested from another site and decided to use that instead.
  • I forgot I requested a button.
  • I requested a button for a new site but it never ended up opening.
  • Other (please specify)
Choose as many answers as you want.

25) Have you ever requested a "re-do" with any of your buttons?

26) If yes, did the button maker remake your button or deny your request?

27) Have you ever wanted a re-do of a button but did not voice your concerns? If yes, why?

The phrase "button maker" refers to an individual who either owns a button request site or makes buttons frequently. "Button requester" is someone who does not make buttons.

Button makers


Kate (button maker)

1) About 6 months or so, but very on and off. I got into a big faze, then stopped, then started again around in November/December 2012.

2) Yes. I opened Oasis on December 27th, 2012 and it's currently still open.

3) Quality (5), Satisfaction (4), Speed (3), Communication (2), Convenience (1)

4) 5

5) I think a high-quality service encompasses a very user-friendly site, with on-time and consistent delivery. Nothing is more frustrating to requesters when they expect something and it's not delivered. If complications arise, they should be communicated immediately. I also think that how frequently requests are open is a huge part! If the site has requests perpetually closed, are they really offering a good service? I'd argue no - there is no service at this point. Your requesters wait and are unsure as to when they will ever be given the chance.

6) I think most differentiate between and high and low button quality, but not the service. Many, however, sacrifice good service for a good quality button.

7) I think out of something like 40 requests, I've had about 5 people fail that part of the trick.

8) Rules: sometimes Credit: rarely Theft: none (but I've noticed similar buttons, which is a bit frustrating) Unused: often+ (I wouldn't say all the time, but very frequently)

9) 5

10) Once every two weeks and take many, or small batches once a week (1:5, 2:9/10)

11) 5. With school it can be tough, but I know people wait and I don't think it's fair to them.

12) Requesters should never ask if requests are closed if the signage says otherwise. That really irks the button makers. On the flip side, button makers shouldn't be choosy (and I can be bad for this). Some requests are simply just not as fun as others. That shouldn't make the quality suffer because you want to move on - stop, take your time, and do a great job on the button anyway.

13) 5

14) Good text placement, good font choice, appropriate border, appropriate and not-over powering animation, a matching colour palette, unique designs (not just seeing one button and doing a very similar overall design), delays between animations and effective use of cropping/space.

15) For the most part, yes. Requesters flock to certain sites because they are perceived or are very high quality buttons. But for the most part, these sites are full of requests or have closed requests, so they choose the lower quality due to its availability.

16) Text clarity (6), Text styling (4), Image clarity (7), Border (1), Animation (5), Image editing (2), Cropping (3)

17) Text clarity (6), Text styling (4), Image clarity (7), Border (1), Animation (5), Image editing (2), Cropping (3)

18) Animation

19) No pause between animation and animations that exceed the borders stand out in my mind.

20) Image clarity - if you use an image as the base and you can't tell what it is, what was the point? This is really hard to decide though. I think buttons really do need every aspect.

21) I had one a long time ago and I thought it was hideous. A lot of borders I think are unique I then find on other button sites.

22) I think animation is my strong point. I try to offer a lot of different types so people can choose. I also think it gives the button that final touch, making it just a bit unique and exciting. I love watching the buttons loop over and over. There's some sort of life that gets added.

23) I feel somewhat satisfied with all of my buttons (but some more than others). They all meet my base requirements.

24) Other button makers (some of the time), other site owners (rarely), from other neofriends (sometimes), from friends/family who don't play Neopets (never), other (sometimes I get inspiration from the site I'm requesting for)


Turnip (button maker)

1) About 1 year

2) Yes, Open Eyes, opened on Jan 1st, 2011

3) Speed (3), Quality (5), Communication (2), Satisfaction (4) , Convenience (1)

4) 5

5) To me, high-quality service is about delivering high-quality buttons in a suitable amount of time. I also think having regular open requests is important since the point of a button request site is to make buttons for people, rather than let the site and the "requests are closed" sign sit there.

6) For the most part, I don't think visitors distinguish between high and low quality, other than the button (the final product).

7) About 30-40% of people fail

8) Rules (often), Credit (rarely), Theft (never), Unused (sometimes)

9) 5

10) At least twice a month, though once a week is something I aim for

11) 4

12) I think communication on the requester's part needs to be improved, especially when site owners finish a button but then the requester neomails back and says something like "can you use this font?" I feel that if the requester knows what they want, they should clearly tell the button maker ahead of time.

13) 5

14) Text clarity is a must, image shouldn't be blurry, the border (if there is one) shouldn't cover the text/image too much; animation is completely optional, but if it's there, it shouldn't be too harsh and the repeat speed shouldn't be too fast

15) Sometimes. I think most requesters know what makes a button high-quality, but on the other hand, I've seen buttons that have extremely blurry images, poor text design, and tacky animation called high-quality. It really depends on the person and how much button knowledge they have.

16) Text clarity (7), text styling (3), image clarity (6), border (1), animation (2), image editing (5), cropping (4)

17) Text clarity (2), text styling (6), image clarity (3), border (5), animation (1), image editing (7), cropping (4)

18) Text styling, cropping, image clarity

19) Blurry image, hard to read text, animation that repeats too fast

20) Text clarity. A button might not use a focal image (ex. the button might just be a textured backgrond), but all buttons will have some sort of text on it.

21) Yes

22) Most of the time I add animation because the requester wants it. For buttons that I completely design, I tend to add animation to fill in awkward empty spaces on the button base.

23) Feel satisfied with a small portion of my buttons. I get really picky and if I could realistically do so, I would take each button request form and make 5 different buttons because I like to experiment.

24) Other button makers (rarely), Other site owners (non-button sites) (never), From other Neofriends (non-site owners) (never), From friends/family (those who don't play on Neopets) (never), Other (inspiration from the image itself or the textures I intend to use) (most of the time),


Anonymous (button maker)

1) 6+ Years for graphics, buttons and layouts. =D

2) Yes. Owned many graphics sites before. Seraphic (closed) opened in May 2011 & JR July 2012 are the best I have owned.

3) Satisfaction (5), Communication (4), Quality (3), Speed (2), Convenience (1).

4) 5 5) The site must be user-friendly, great speed/delivery, great communication (be in touch with the requester frequently), have a guarantee/policy, have requests open frequently, and things similar to this!

6) Of course! Requesters definitely know if they are being treated the right way. Most sites today offer high-quality requests, but lack in the high-quality service portion.

7) I don't do tricks. I assume my requesters will "use" my rules, not "misuse" them.

8) Rules (sometimes), Credit (sometimes), Theft (rarely), Unused (rarely).

9) 5

10) Small batches once a week, or Larger batches every 2 1/2 weeks.

11) 5; At times life gets really busy, but I get pride in accepting a users request and delivering it to them in a timely matter. =D

12) Button Makers shouldn't be choosy/picky with their requests. Sure there are some requesters that are a bit more rude, but offering high-quality service means offering it to EVERYONE.

13) 5

14) Appropriate border, font, font placement, button image placement, button image, colors, and animation.

15) Of course! Requesters request at the high-quality looking sites and the popular sites. Most of the time requests are closed and requesters have the choice to request from lower-quality sites.

16) Cropping (7), Image Clarity (6), Image Editing (5), Animation (4), Text Clarity (3), Text Styling (2), Border (1).

17) Cropping (7), Image Clarity (6), Image Editing (5), Animation (4), Text Clarity (3), Border (2), Text Styling (1).

18) Image Editing

19) Buttons are blurry or overtextured. Animation isn't subtle, or has no pause in between.

20) Image Editing.

21) At one point I did. But some of the borders requested didn't go with the requesters button well.

22) To add a bit of unqiueness to the button. Some buttons don't need animation, and that is just fine. Animation isn't necessary.

23) I feel completely satisfied with all my buttons. I do have my favorites though. If I don't like how a button turns out, I take my time to make another one.

24) Other Button Makers (sometimes), Other Site Owners (sometimes), From Neofriends (sometimes), From family/friends (never), Other (myself & imagination) (all the time).


Anonymous (button maker)

1. I've been making buttons for two years.

2. I own Saranghae, which has been offering button requests since January 2011 (before that date, it was a premade layout site).

3. Quality (5), Satisfaction (4), Speed (3), Convenience (2), Communication (1).

4. 5.

5. High-quality service doesn't only mean making high-quality buttons, but also being professional and on task. The requester shouldn't have to wait too long for their button and the requester should also be satisfied with the result. If the requester feels that button isn't what they were expecting and wants a slight change, then the maker should be able to alter whatever necessary.

6. Honestly, no. I find that most visitors judge the service based on the quality of the maker's buttons.

7. Of my latest requests, about 10%.

8. Rules: sometimes, credit: rarely, theft: never, unused: sometimes

9. 5

10. At least once a week (based on a waiting list with 5 requesters).

11. 3. Although I love owning my sites and it's apparent that I should be professional, my priorities lie on school and family.

12. I /never/ neomail the requester if I've accepted their request; I only neomail them when their request is finished. On my part I find it extremely unprofessional, but I personally never liked the idea because I found it a waste of time (even if I just use a copy and paste form!) Because of this, I had to include a NOTE on the requesting page stating this.

13. 5.

14. My view of a high-quality button is one with a crisp image, visible focal (if any), visible and clear text, a well-chosen font, and good text-placement. With animations, it shouldn't be too fast, strong, and choppy.

15. For the most part, yes. There's only so many high-quality button sites, though!

16. Text clarity (7), image clarity (6), image editing (5), cropping (4), text-styling (3), animation (2), border (1).

17. Image editing (7), cropping (6), text styling (5), cropping (4), border (3), text clarity (2), animation (1).

18. Animation.

19. Often low-quality buttons will have illegible text, blurry images, and very fast and choppy animations.

20. Text clarity. The reason for a button is to advertise a site. No one will know what the site is if the text can't be read!

21. I have in the past, but let's just put them all in the past (they really weren't the best).

22. Animation adds a type of uniqueness to a button. It helps emphasize the text or fill in some quiet spots.

23. I only feel somewhat satisfied with all of my buttons. There are times where I'm so unsatisfied with a button that I've /asked/ the requester if I could remake their button a few days after completion, despite them being satisfied!

24. Other button makers: rarely, other site owners: never, from other neofriends: never, from friends/family: never, other (the image itself): most of the time.



Button requesters


Pin (button requester)

1) If I have a new site that requires buttons, I request. Other then that, I don't really request buttons.

2) I visit several button sites everyday just to browse through the portfolio, completed requests, waiting list, etc.

3) Speed: 1 Quality: 5 Communication: 4 Convenience: 3

4) 5 - Buttons have a very special place on a site because they sort of "represent" the site. A pretty button will make viewers more likely to visit rather then a not so pretty one.

5) For me, high-quality service means the person making the button keeps in contact with the requester and that the finished product is not blurry, squished, and readable (text).

6) I certainly hope that they can. Sometimes when visiting a button site, I do get the feeling that the owner is not able to differentiate between high or low quality. I get this feeling because over time, the buttons still do not improve which is weird.

7) I don't mind at all! It is a great way to get people to read your rules. HOWEVER, some people may just look for the word in the rules and carry on without reading the rest. Although it is a great "trick," it is over-used and easy to find. I suggest using other tricks in the rules besides the word one.

8) a. Every button site I've visited had fair rules

9) From 1 (not important at all) to 5 (extremely important), how much importance do you place on the "rules" at a button request site? Choose from: 4 - somewhat important.

10) Once every two weeks is nice, but twice per month is nice as well!

11) Never - After sending in my form, I wait for their reply whether it be a rejection or acception neomail. I NEVER pester the maker about when my button(s) will be done.

12) Quality is one of the main things people should focus on. Communication, such as rejecting or accepting a request, is also very important. I feel that button makers should always contact requesters to let them know if their request has been rejected or accepted.

13) No replies back from my request. A simple rejection or acception neomail would be very nice.

14) Text is legible, image is not blurry or distorted, and nicely animated.

15) Yes.

16) Text clarity: 7, Text styling: 1, Image clarity: 6, Border: 3, Animation: 4, Image editing: 2, Cropping: 5,

17) Text clarity: 5, Text styling: 3, Image clarity: 7, Border: 1, Animation: 4, Image editing: 2, Cropping: 6

18) Yes - a distorted or blurry image.

19) Image clarity

20) Button quality: 4, Frequent open requests: 3, Word of mouth: 2, Quality of service: 1

21) The quality of the button and NOT the time it takes to make.

22) Feel satisfied with some of your buttons

23) Never.

24) I wasn't satisfied with the quality of the finished button. I requested a button for a new site but it never ended up opening.

25) Yes.

26) I never got a reply back.

27) Yes - I was immediately worred about not getting a reply back.


Anonymous (button requester)

1) I usually request a few time every month, depending on whether or not I need them. (:

2) A few times a week

3) 5. Quality, 4. Satisfaction, 3. Speed, 2. Communication, 1. Convenience, 4) 5

5. I would define a high-quality service as a site that, first and foremost, offers buttons that look good as well as satisfies their customers so they'll be sure to return. I also feel that speed plays a huge role in a high-quality service button request site. If I requested from a site & receive a button weeks or months later, I probably wouldn't put the site as my number one choice.

6) Yes

7) I can definitely understand why button request sites have trick in their rules, and I think it's a great idea. Though, sometimes, I find myself reading the rules over and over to make sure I didn't miss any changes to the 'word'.

8) b. The majority of the button sites I've visited had fair rules

9) very important

10) 2-3 times a month.

11) not often

12) I feel like lots of requesters could be more polite and load up on the "please & thank yous".

13) I haven't run into too many problems, but I have been in a situation where the requester /lost/ my request, or never ended up making the button they agreed to make.

14) I define high-quality buttons buttons with nicely textured and designed bases/images & clear text that looks good.

15) Sometimes

16) 7. Image Clarity, 6. Text Clarity, 5. Image Editing, 4. Cropping, 3. Text Styling, 2. Animation, 1. Border,

18) blurry text and image

19) Image clarity

20) 4. Button Quality, 3. Quality of service, 2. Frequent open requests, 1. Word of mouth

21) I look at the quality of their buttons, their service, and just how friendly the owner is in general. (:

22) Feel somewhat satisfied with all of your buttons

23) rarely

24) I wasn't satisfied with the quality of the finished buttons

25) No, I have not.

27) I haven't come across a situation like this quite yet.


Anonymous (button requester)

1: Whenever I need one for a site. (: So basically, a max of up to three times month, but usually less.

2: A few times a week.

3: Least important comes first: communication, speed, convenience, satisfaction, & quality.

4: 4.5

5: In my eyes, a high quality button request site would have decent or quality buttons, and have them completed up to at least 2 weeks. It also adds in if the owner is kind! (:

6: Yes, they should be able to. Otherwise, they're buttons will never improve if they don't compare, contrast, and distinguish the differences.

7: I think it's okay that they do that, though I immediately hit the 'back' arrow if there are too many tricks (at least three) or if it's too complicated.

8: b. The majority of the button sites I've visited had fair rules.

9: Somewhat important (probably a 3.5).

10: I think it'd be nice to have requests open a good amount of time, like once or twice every week. But buttons take a while to make, and button makers do have lives too. I'd say around three to four times a month is good.

11: Never.

12: I think quality is important, but a lot of button sites these days already have great buttons. I think they should focus on communication more now, because avoiding a requester is just plain rude, and happens quite a bit now.

13: It'd probably be no reply to my request.

14: Original (over-inspired buttons make me bleh), pretty, the image is cropped nicely, and a good, readable font and matching animation to top it all off.

15: Of course. That's one of the reasons on whether you want to continue on or leave the site.

16: Text clarity, image clarity, image editing, cropping, animation, text styling, and border. Ranked from most to least important.

17: Animation, text styling, cropping, image editing, border, image clarity, and text clarity. Ranked from most to least important.

18: Yup. Blurry text and oddly cropped images are two. Animation is another one - it would look weird if a shine animation was really slow, or if a moving text animation was too fast to read. This isn't really common anymore, but some people use borders that take away from the button itself.

19: Image clarity.

20: Least to most important: Word of mouth, frequent open requests, quality of service, button quality.

21: Usually, quality. I don't want to waste buttons, so I request from sites with buttons that I'll actually use. Friendliness is next - I wouldn't want to request from a hostile or rude person!

22: Feel somewhat satisfied with all of my buttons.

23: Rarely.

24: I wasn't satisfied with the quality of the finished button.

25: Yep, but rarely. I usually like the end product and wouldn't want to bother the person who made it, even if they were busy or not.

26: They remade the button - it was just a minor change, but the button still looked better.

27: Yes. I usually don't do it if it's minor - after all, I can just live with it.


Anonymous (button requester)

1. A few times a week, but I just started a new site and needed link back buttons.

2. every day

3. speed: 4; quality: 5; communication: 3; satisfaction: 2; convenience: 1

4. 5

5. High quality buttons, willing to remake unsatisfactory buttons, professional, neomails when requests have been rejected/accepted/etc.

6. Sometimes, no, especially if they are a new site owner.

7. I like them, but sometimes they get it x-x

8. b

9. 3

10. at least two or three times a month

11. not often

12. a lot of button makers don't neomail me back after I've requested, but the main issue I think is when they don't neomail me back and take a month to finish my button. Taking so long on requests creates some issues on my side.

13. None? Low quality buttons?

14. text is readable and well placed (does not block focal point or is the focal point), animation is not tacky (not too fast or overdone), image is appropriate or fitting.

15. I think visitor can tell, if they've seen high quality buttons before.

16. text clarity: 6; text styling: 4; image clarity: 2; border: 1; animation: 3; image editing: 5; cropping: 7

17. text clarity: 2; text styling: 4; image clarity: 1; border: 5; animation: 3; image editing: 6; cropping: 7

18. Illegible text, blurry image, flashy/tacky animation (diappearing too fast, too much glow)

19. text clarity

20. button quality: 4; frequent open requests: 3; word of mouth: 1; quality of service:2

21. Quality of buttons

22. feel satisfied with some of my buttons

23. Never, out of respect for the button maker.

24. N/a

25. Yes

26. they remade the button

27. Yes. The button I received was high quality. The reason I was unsatisfied was because I had not been specific enough in my requests, so it was my fault.


Anonymous (button requester)

1. I only have one site, so occasionally or if I ever open a new site.

2. a few times a month

3. Speed: 1 Quality: 5 Communication: 2 Satisfaction: 3 Convenience: 4

4. 4

5. Getting a response when a request is received, getting a high-quality button.

6. Yes.

7. I don't care.

8. a

9. very important

10. Once a week

11. Never

12. Sometimes when I do a request with only the text chosen, I wish a color option was offered as well, because I tend to feel awkward asking if it's not asked or included in an example form.

13. None.

14. Clear text, good, sharp images

15. Depends on how experienced the requester is.

16. Text clarity: 1, Text styling: 4, Image clarity: 2, Border: 5, Animation: 3, Image editing: 6 , Cropping: 7

17. Same as 16.

18. Illegible text.

19. Text clarity

20. Button quality: 1, Frequent open requests: 2, Word of mouth: 4, Quality of service: 3

21. Open requests

22. Feel somewhat satisfied with all of my buttons

23. Never. It's possible that I eventually stop using it, though.

24. N/A

25. No

26. N/A

27. Yes, but I always felt awkward and didn't want the person to have to remake it.


Anonymous (button requester)

1. I usually request only when I have to, and since I am able to make my own buttons, I don't feel like there's a pressing need. So really, only occasionally.

2. I visit a few times a week.

3. Speed - 2, Quality - 4, Communication - 1, Satisfaction - 5, Convenience - 3

4. 5

5. I think high-quality service is making the requester feel like they mean something important to the site and the site owner. I think requesters feel very brushed aside, almost like a nuisance, and good service is making sure the people you are serving are happy with the service you're giving them. It doesn't matter if I'm given the most amazing button in the world; if I'm treated like I don't matter or I'm a bother to a site owner, I won't come back.

6. I feel like they definitely can.

7. I'm half and half on the trick. I think it makes people read the rules more carefully, but most of the time "carefully" is just scanning the text until you see something along the lines of "If you've read the rules, please put ____ in your form".

8. A

9. Very important

10. I think at least three times a month, depending on how many requests are taken though; if only like three requests are taken at a time, then at least five times a month. If a request site barely opens requests, then I don't really consider it much of a request site if I can barely request anything half the time.

11. I usually only contact people I've requested from if I never got a confirmation mail from them.

12. I think something that's very basic but not that often done is confirming a request form with the requester. To me, that's a sign that someone has seen my mail, accepted my request, and started working on it; that they are taking an active role in the request. If I don't get a confirmation from them, I'll be sitting there wondering if I ever sent it in, or if my request was accepted, or if they even saw it or not.

13. I requested a button from a site over a week ago, and they still haven't replied to me. Their waiting list isn't updated, their site hasn't had any new updates, and so I wonder if they're even active right now. It heavily brings down the credibility of the site and I probably won't be requesting there again.

14. High quality buttons mean good image placement, good textplace, good font choice, and distinct and smooth animations.

15. I think visitors and requesters can definitely tell.

16. 6, 4, 5, 2, 3, 7, 1

17. 1, 4, 5, 2, 6, 7, 3

18. I don't think so. I think a lot of different factors contribute to a low-quality button. It's different for every person, because everyone has their own expectations of what a good button is.

19. Image clarity

20. 3, 1, 2, 4

21. I first look at the portfolio to see what kind of buttons they make. If they make good buttons with pleasing animations and good image editing, I'll want to request there more. Also, if a site has a beautiful and unique layout, I will remember it and I tend to like sites with pretty layouts. Ultimately, I look to see the way they talk to the requester, the way their word their rules and such. If I see a person who doesn't seem like they will make the requesting experience good, I won't really request there. Also, I occasionally request from newer sites because I think it's good to show them some support.

22. I always feel completely satisfied with my buttons, because everyone I've requested from has always been willing to make little changes to my request. So in the end, I'm always happy with what I've requested because the site owners are more than willing to make changes if I'm not completely happy with it.

23. Never

24. n/a

25. Yes, but they were minor changes, such as a font choice, or a darker animation color. I have never requested a complete re-do of a button.

26. No, the button makers I've asked for changes from have been extremely helpful and gracious. They have been more than willing to make changes if I don't like something in my button. I think that's a huge mark of good service.

27. No




BACK TO MAIN SURVEY PAGE



Editing resources



Button borders

Though you should be creating your own button borders by hand, brand new button makers may want to use premade ones for the time being. Here are some sites that offer borders that you can use (I would recommend that you put some form of credit at your site):

- Impulse's Tutorial
The borders will require you to do some "tracing" since they are grey in colour and not transparent. Some examples of borders from the site include:

- Bedazzled
A lot of interesting border designs can be found here. Note that the site is extremely image heavy and may take several minutes to load.

- Create Impressions
There aren't a lot of super unique borders here, but if you're looking for simplistic ones, this is a good site to visit. Some examples of borders from the site include:

Textures and other image editing resources

- Details
The bokeh textures are absolutely gorgeous and well made. I find that the abstract textures have less use since they are very heavy and will sometimes make the button base look more blurry and lower quality.

- Illusion
For the most part, the bokeh textures here are extremely colourful, which may be a positive or negative depending on what you're hoping to achieve with your button base. There are a few grey/colourless textures if you're looking for only the bokeh effect.

- Whirligig
There are a lot of large bokeh textures, but there's also button textures which have been re-sized so that they're 88 by 31 pixels. This is great for those who don't want to re-size the textures themselves.

- Jubilee Resources
A lot of different types of textures can be found here, ranging from dust/scratches to light/bokeh.

- Bedazzled
Like Whirligig, there are 88 by 31 pixel button textures here. Most of them are colour-heavy and may change your button base image. Note that the site is extremely image heavy and may take several minutes to load.

Need more textures? I would highly recommend going to a large directory (like The Shelf) and looking through the "graphics" section. Sometimes, these sites will have "extras".

Button Bases

If you're completely new to button making, try your hand at adding and editing text before you go off and start your own request site. The text should be one of the first things you master since a button's most important aspect is the text. The list below are sites that offer button bases.

- Dark Light
A large handful of button bases here (over 20 Neo related ones). There are some bases that use generic backgrounds so if you're experimenting with a non-focal image button, check this site out. Examples of button bases:

- Illusion
Not a lot of button bases here, but they are very high-quality. The images are super crisp! Examples of button bases:

- Open Eyes
A large handful of Neo-related button bases. Examples of button bases:

- Bedazzled
There's a ton of high-quality Neo-related button bases. One thing to note is that the site is extremely image heavy and may require a long time to fully load since the buttons are located at the same petpage as everything else. Examples of button bases:

- The Workshop
There's a handful of Neo-related buttons here, most of which have the border included. Some of the images are quite blurry, so these would probably work best for experimenting with text and animation.

- Create Impressions
There aren't a lot here (only 9 or so) so this is a good resource if you're just interested in experimenting with text placement, editing, and animation. Examples of button bases:

Need more button bases? I would highly recommend going to a large directory (like The Shelf) and looking through the "graphics" section. Additionally, try looking at button request sites. They sometimes offer bases as an "extra".

Other resources

- Whirligig: brushes
There's a neat brush that looks like a bokeh pattern (great to experiment with especially in different colours). Also, there are some scanline patterns.

- Create Impressions: scanlines
Too lazy to make your own scanlines from scratch?



BACK TO MAIN RESOURCE PAGE



Where to look for images

Neo-related images

- Charly's SWF Collection
This is an amazing resource if you're looking for simple backgrounds. It's frequently updated with new backgrounds so you'll always be able to find the latest images.

- Background Bonanza
Again, you can find many Neopet backgrounds here. I've switched to using Charly's SWF Collection though, because Background Bonanza is hardly updated.

- Neopets backgrounds
This page is a great resource for button makers. There's a ton to look through. Most of the time, you can make your button bases directly from the "preview" image. If you want to enlarge it to crop for a smaller part of the image, then it's best if you download the background and crop the much larger wallpaper.

- Zel's Page of Shopkeepers
Though this page doesn't have as many images as the previous examples, it's still a very good resource to keep handy. Shopkeeper images are some of the newer ones on Neopets.

- Caption Contest archives
With over 1000 images, this is another good resource but only if you're willing to put in the time and browse through them all. I'd highly recommend skipping the ones where it's "real" images (i.e. the ones of plushies or other merchandise").

- Dr. Sloth's Neopets Image Emporium!
(offsite) This is my #1 resource for images. There are just so many to go through! I'd highly recommend searching by category if you're just looking for general images.

BACK TO MAIN RESOURCE PAGE



Other Guides

The guides and resources are listed in no apparent order (the first one listed isn't the "best"), so I'd highly recommend taking a look through all of them to see which one suits you. Some aren't as in-depth as others, while some are geared towards people who already have a deep understanding of image editing programs, such as GIMP.

Button-specific guides

- Lucy's Button Tutorial
Though it hasn't been updated since TNT's filter changes, this tutorial is still pretty useful because it has a ton of screenshots. If you're using GIMP to make your buttons, be sure to browse through this page.

- Impulse's Tutorial
This tutorial goes through each of the different steps in making a button, such as the border and animation. It also has a ton of border examples that you can use if you're just starting out and haven't made any of your own.

- Create Impressions
Like the previous example, this guide also goes through different steps of making a button.

General resources

- Soroptimist Directory
The link above not only goes to the directory, but it links you to the "coding and design" section. Here, you can find a whole lot of guides on GIMP, Paint, and other things you need for making buttons.

- The Shelf Directory
The Shelf is one of my favourite sites. It's updated often!

Program tutorials and other techniques

- 4 Corners
For basic GIMP techniques such as using textures.

- GIMP Sensation
More in-depth than the previous example, it contains a lot of tutorials on more advanced techniques.

- The icon tutorials at Dark Light
The colouring tutorials provided at Dark Light are amazing. Even if they're written for icons, you can apply the same basic knowledge when you make buttons.

- Shine tutorial at The Lunch Box
Adding a "shine" effect behind the text on your button is a great way to divert attention to it.

Tutorials/tips offered as an extra

- Button Making Tips at Saranghae
This page offers a unique alternative to how button makers can go about animating and designing.

- Making A Great Button at Open Eyes
This guide was inspired by this messy list of tips! Some of the tips here might seem familiar as I copied them over to this site.

BACK TO MAIN RESOURCE PAGE



Extra Tutorials


Sharpen your button base

The key to an eye-catching button is making sure your button base image is high-quality.
Applying a gradient overlay to text

This is one way to get your button's text more noticeable and stylish!
Quick Photoshop 7 Tutorial

I'll point out important tools and screens we'll be using.
Creating scan lines from scratch

In this quick tutorial, I'll show you how to create your own scan lines and upload them as "patterns".
Creating your own button borders

Want to learn how to make your own button borders? Click here!
Editing your borders

From gradient borders to overlay, here are some design tips!



Applying a gradient overlay to text

Adding a gradient layer to your text can make it look much more stylish! However, it requires that you pay attention to text visibility, making sure that it's not too dark. Because of this, I would recommend this technique for more experienced button makers.

Step 1: The button I'll be working with is this:

So far, the text has been styled with a single-coloured border as well as a blurry layer underneath. We could leave it like this, but the white text seems to be a little awkward. Sometimes, standing out too much can make a button look odd.

Step 2: First, click on your foreground colour. This should automatically transform your cursor into an eyedropper tool. Then, click on your button base to "grab" a colour. In the screenshot below, I've pointed out which areas you will be clicking.

Make sure that at least one of your colours is white (i.e. the squares). It doesn't matter whether the foreground or background colour is white, but at least one of them must be.

Step 3: Because my text border colour is blue, I've clicked on a blue area of the button base. If you notice in the screenshot in the previous step, the colour is quite dark. If we simply went ahead and applied the gradient technique, here's what we would get:

This is bad! The text is almost unreadable and the colours just look way too awkward. Instead, we're going to edit our colour choice.

Click on the square that contains your colour choice (i.e. not the white one, but the colour that you grabbed in the previous step). When you click the square, the Color Picker window should pop up. We want to make it much lighter so that we get the gradient effect but the text remains easy to read. Take a look at this screenshot:

The small red arrow indicates what you should click first. That brings up the Color Picker -blocked- The large arrow shows the "new" color I've chosen. We're still in the same colour range (i.e. dark blue), but I've chosen a much lighter colour.

Step 4: Now it's time to apply the gradient layer. Looking at your Layers window, make sure your text layer is the one that is selected. At the bottom of the window, click on "Add a layer style" (the symbol is a circle with a fancy "F"). A menu should pop up. Choose "Gradient Overlay".

Step 5: The "Gradient Overlay" window should pop up. Take a look at the screenshot below.

Click on the tab indicated in the red box. This makes some options drop down. What we want is the "foreground to transparent" option. This is indicated by the red arrow. Yours may not be in the same position so make sure that it looks somewhat similar to the option pointed out in the screenshot. Once you find that gradient style, click it.

Step 6: And this is what we're left with:

If you find that your gradient overlay is took dark, you can always go back and choose a lighter colour

In many cases, I find that the text looks best when the white colour is near the top and the other colour is near the bottom (in this case, the blur is near the bottom).

Final tips:

- Gradient overlays look very nice with the font used in the tutorial above. It's called "Awesome", and it's a very large for a small font! The gradient effect is much more noticeable than smaller fonts, like Wendy.

- Don't want to use white? You can choose two colours instead. However, this is not recommended for beginners as you can easily make a mistake with your colour choices, leading to a disastrous text style.

BACK TO MAIN TUTORIAL PAGE



Sharpen your button base

Blurry button base? Sharpening your button base is a way to improve image clarity which helps in maintaining a high-quality button.

Step 1: Take a look at the button below:

It hasn't been edited in anyway. However, after colouring techniques and applying various textures, you may notice your base getting "fuzzy" or blurry like this:

Okay, so the button base here isn't really that blurry and I've seen far worse. Photoshop's cropping tool is an excellent way to try to get the best possible button base. This is because cropping in Photoshop retains your image's ratio. You can read more about this in the "final tip" section at the bottom).

What we want to do first is duplicate your button base. To do this, go to the top of your screen, click "Layer", choose "Duplicate Layer", then click "Okay". What you should end up with is this:

Step 2: Make sure your top layer is selected (if you take a look at the screenshot above, notice how the duplicated layer (Layer 8 copy) is highlighted in blue.

Go to the top, click "Filter", choose "Sharpen", then click "Sharpen".

Step 3: You should see an instant difference with your top layer. Here's what my button looks like now:

Notice how much more details have been "re-added" to the image. The facial area of the focal image is much more crisp.

Step 4: What happens if you sharpen too much? In some cases, sharpening your top layer will result in lines that are jagged and "pixellated". If this is the case, let's blend your top layer and with the bottom layer. Go to your Layers window and make sure the top layer (the sharpened layer) is selected. Then, change the opacity so that your image is still crisp but the jagged/pixilation isn't as noticeable.

And you're done! This is a very simple way to get the best out of your images and retain some of the details lost during texturing and colouring. One last thing I like to do is merge the sharpened and "normal" layer together. You can quickly do this by doing to the top of your screen, choose "Layer", and choose "Merge visible" (which should be near the bottom of the list).

Final tips:

- If you're using the "crop" tool in Photoshop with the correct button dimension input (88px for width and 33px for height), then chances are you may not need to sharpen all of your bases (only the ones that are super blurry). This is because the crop function in Photoshop retains the ratio of the number you input.

BACK TO MAIN TUTORIAL PAGE



Quick Photoshop 7 Tutorial

Here is a general overview of what my Photoshop work area looks like.

Layers screen The Layers screen is extremely important, so your workstation should include this.

The higher up a layer is in the list, the more it'll show. For example, Layer 2 is a bokeh layer set to screen. If I were to move Layer 1, which contains my button image, above Layer 2, then the bokeh layer would not be visible. Where you organize your layers in the list is very important as well.

Generally, I put the button base image at the very bottom. Any textures would go above that. Near the very top, I have my text layers, and at the very top are the button borders. Never put your text layers below your texture layers because then that will have an impact on text visibility.

Next is the menu at the top. I make reference to this a lot so here's what it looks like:

Depending on what tool you currently have, the area in the red box will change accordingly. For instance, if I chose a Brush tool instead, then I'll see brush options like size and opacity.

One of the most important screens you should have is the Tools.

In the screenshot above, I've highlighted some that I'll be using in various tutorials.

Why don't I have a certain screen up?

Depending on your Photoshop options, some of your screens might not be available. To get them to "show up", go to the top bar and click "screen". Then choose the screen you want to appear.

If something has a checkmark beside it, then it's currently visible in your workspace. If it doesn't have a checkmark, just click on it and it should appear.

BACK TO MAIN TUTORIAL PAGE



Editing your borders

Gradient on the outer border:

Step 1: First, choose dominant colours from your base image. You can do this by clicking on the individual squares indicated and then using the eyedropper tool, click on your image. This will "capture" your colour.

Step 2: In your layer screen, make sure the layer with the outer border is selected (i.e. the black one). At the bottom of your screen, click on the icon that has a circle with an "f" in the middle (an example can be seen below). Choose "Gradient Overlay".

Step 3: A screen should pop up. The default gradient colour is black and white, but we want to use the colours we grabbed earlier. Click the "gradient" tab and choose the first option, "foreground to background".

Step 4: If you take a look at our button, you may notice that the darker tones are generally on the left side of the image while the brighter colours are on the right side. Let's make our outer border reflect this!

In the same screen, adjust the angle degree so that our gradient is more horizontal (earlier it was dark brown at the bottom, orange at the top; we want dark brown on the left, orange on the right).

ABC Extra: After adjusting your colours, you might find that you're ending up with the complete opposite (for instance, orange on the left, dark brown on the right). In this case, click the "Reverse" option which should switch your colours around.

Step 5: After applying our gradient overlay, here's what we're left with:

Examples of other buttons that uses a gradient border:

Final tips:
- When grabbing your two colours from your button base, you might want to edit them a bit further by making them slightly darker. For example, let's say I have a button like this:

Choosing the colour for the left side of the border, I used the eyedropper tool and got this: #FBDEC6 (#FBDEC6). This is very light and wouldn't be a great choice for a button border. #F0BC97 (#F0BC97) is a similar shade yet it's darker and more suitable. Because it's essentially in the same colour range, it won't make your button look strange (in other words, you'll still retain your colour palette).

Darker "see through" border

Step 1: Make sure the layer with your black outer border is selected. Near the top, set the layer to "soft light".

Here's what we're left with:

Note the bottom right side of the button. The yellow looks unappealing and the border seems to fade. This border style isn't a very good choice with our button. With border design, not every style will fit with your button base. For intermediate button makers, there are ways around this (for instance, editing the colours in that particular area to make it darker). If you're a beginner, it's best to just try a different border style.

Here are some examples of buttons that use the overlay method:

ABC Extra: Depending on the colours of your button base, setting your border to overlay or soft light may not do much. Take the above example for instance. Generally, I like to use overlay/soft light on somewhat lighter images. If your image is too dark, then your overlay/soft light border won't show up. But be careful! Images that are too light will result in a border that doesn't look that great. Experiment!

Editing the inner white border

Though you can leave the inner white border as it is, generally you'll want to play around with it a bit more to see the type of effects you can achieve. Here are a few that I like to use.

Neon overlay

Choosing the layer that has the white inner border, I set that to "overlay". Here's what I get

Keep in mind that this technique may not work with every button base you have. Here, it works generally well, especially in the bottom right corner. You can definitely see the "neon" effect of the white inner border. However, take a look at the top right area. The white line is barely noticeable.

ABC Extra: You might see this as the exact opposite problem with the black border set to soft light.

With this type of border style, it's best if you can achieve an overlay effect with the entire white border, rather than just a corner.

Here are some examples of white inner borders set to overlay:

Soft light

Setting the inner white border to "soft light" rather than "overlay" gives it a much more subtle appearance. In this example, using soft light isn't a very good choice.

The white inner border isn't that noticeable. I tend to use the "soft light" technique with much darker images because the border will still be faded, but noticeable.

Here are some examples of white inner borders set to soft light:

Editing the opacity yourself

Lowering the opacity of the white border to around 85% gives me this:

While the white inner border is still noticeable, it's blended into the button a bit better. It's not so white that it's the first thing you notice.

Final tips

- With lighter images, editing the white inner border may not be a good idea. If you lowered the opacity of the white inner border, then it'll hardly be noticeable.

- For brand new button makers, I suggest perfecting single-coloured borders before moving on to these techniques. Choose a single colour for the border is harder than it seems, especially if you're still new to creating buttons. Use your colour palette - don't make your button border purple when your button base is comprised of blues and greens.

- Like a frame for a painting, your button border frames your base image. Your border is not the centerpiece of your button.

BACK TO MAIN TUTORIAL PAGE



Creating your own button borders

Step 1: Open up a new screen by holding "Ctrl" and pressing "N", or go to the top of the screen, choose "File" and click "New". This screen should pop up:

Make sure the height and width are 88 and 31, respectively. In the "contents" option, choose transparent. This last step is extremely important.

Step 2: Since the screen is a bit small, let's enlarge it so we can work a bit more easily. While holding "Ctrl", press the "plus" button until you're more comfortable with the size. Note that we'll be drawing using a 1 pixel pencil brush so anyway around 900% zoom and up is useful.

Step 3: In the "tools" screen, click on the "pencil" icon (alternatively, you can press "B" on your keyboard). If you see a "brush" icon instead, right click it and choose the pencil. Make sure your foreground colour is black since we'll be drawing the outside of our button base first.

For the border, our pencil size needs to be 1. Here's a screenshot of the top of the window (make sure your settings are the same):

Step 4: Now, just draw your outer button border. For this tutorial, I'll be creating the "plus" button border. After you're done creating the outer border, create a new layer above your outer border layer. You can do this by clicking the icon highlighted in the red square below or go to the top of your screen, click "Layer", "New", "Layer", then "OK". Choose your new layer by clicking on it. It should be highlighted in blue.

Step 5: Now we're going to draw the white inner border. To quickly switch colours, just click on the double-headed arrow indicated in the screenshot below.

Make sure that your second layer is chosen (i.e. the empty one that doesn't have anything in it). Using the black outer border as our guideline, draw your inner border.

Step 6: Save your border as a PSD file while keeping the layers.

Now whenever you want to use that border, you don't have to draw it from scratch. You'll have a saved copy!



BACK TO MAIN TUTORIAL PAGE



Creating scan lines from scratch

Step 1: In Photoshop 7, open a new screen. You can do this by holding "Ctrl" and pressing "N" or go to the top of the screen, click "File", and choose "New". A screen should pop up. For this tutorial, I'll be creating a scan line pattern that's 5 by 5 pixels.

Make sure that your new screen is transparent! This is a very important step. In the screenshot above, it has a red arrow beside it.

Step 2: The new screen is tiny! Let's zoom in so we can easily work with it. You can do this by looking at the very bottom left corner of your screen. I've input 1600%

Alternatively, you can just hold "Ctrl" and press the plus sign (near the Backspace or the Delete key) until your screen is large enough to work with.

Step 3: In the Tools screen, click on the "pencil" tool highlighted in the red square below (if you see a brush icon instead, just right-click on it, and choose the pencil icon).

For this tutorial, I'm going to be making black scan lines so that's what I've chosen as my foreground colour.

Step 4: Time to draw our scan line! Using the "pencil", draw the blocks so it looks something like this:

Don't limit yourself to only diagonal scan lines. Take a look at some others I've created:

It's strange to think of creating scan lines as creative, but it definitely can be!

Step 5: We've drawn our scan line so let's turn it into a pattern so that we can quickly and easily use it whenever we want. At the top of your screen, click "Edit" and choose "Define pattern".

Step 6: A screen like this should pop up:

Enter the name of whatever you want to call your scan line pattern. I'm lazy so I never name my patterns.

Step 7: Now that our scan line is a pattern, let me show you how to use it. The first step is to choose the "Paint Bucket" tool. You can do this easily by pressing "G" on your keyboard. If you see a "gradient" icon instead, right-click it and choose the paint bucket.

Next, look near the top of your screen. You should see something that says "Fill". Change that to "pattern".

Beside that, the "pattern" option should pop up. Click on the tab and select the scan lines.

Step 8: You're ready to go! Using the paint bucket, you can fill a layer with that scan line pattern.

Final tips

- The size of your original screen will dictate how spread out the scan lines are. In this case, I used a 5 by 5 pixel screen. The scan lines are rather spread out. Much smaller ones include 3 by 3, for a really "compact" scan line pattern. I would suggest around 4 because smaller sizes can look low-quality very easily.

- When adding scan lines to your image, always make sure that you're filling an empty layer above the image, not the image itself.

- Experiment with colours! I made mine black because it showed up more clearly.

BACK TO MAIN TUTORIAL PAGE



Site Map

Are you searching for something specific? Here's a comprehensive list of what you can find in each chapter:

Note: Only pages that are completely separate will be linked in the list below (ex. the tutorials). For chapters, this will only provide you with a list of what is covered in that specific section.

Ch.1: Terminology



Ch.2: Choosing an image



Ch.3: Cropping



Ch.4: Editing



Ch.5: Borders



CH.6: Adding text



Ch.7: Styling text



Visitor tips

General tips



More resources



Extra tutorials




Sitely

Has ABC helped you with your buttons? Why not tell others about it and link back to this site?

Link back



Listed at

Pixie Dust, The Shelf Directory, Plethora, Smiley Central, AllieCat's Directory, Lacuna Directory

Reviewed at



Credits

Layout designed and coded by TLB (image from Charly's SWF Collection; textures from Details and deviantArt; background pattern from deviantArt, edited and recoloured by TLB)
All resources are from TLB.
Button examples are linked to the site that made them, not the site that the button belongs to. If it's not linked, then the button was made by me at Open Eyes.
Content written by Turnip.
Copyright 2000-2013 Neopets, Inc. All Rights Reserved. Used With Permission. NEOPETS, characters, logos, names and all related indicia are trademarks of Neopets, Inc., © 1999-2013. ® denotes Reg. US Pat. & TM Office. All rights reserved.

Guide posted on November 16th, 2012




(DON'T DELETE THIS DIV!)



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