Hello, and whalecome to Buttoneer, a high quality, composition focused button request and tutorial site run by me, Thomas. Here at Buttoneer, I aim to provide you with the perfect button for your site! But it's not just sites you can get a button for. You can also get one for your guild, shop, or anything you can think of! I also try to make this the best button-requesting experience you have ever had by being friendly and making everything easy to use. I hope you find everything you are looking for here. Happy browsing!
June 6, 2015 @ 12:58 PM NST | Button mood
Nothing major to report today! Although, today only, you can request 4 basic buttons at once! This offer ends at 11:59 NST tonight.
I alos got creative cloud yesterday and have access to PS CS6 and so I'm VERY excited about it! I used it to create my first button today!
June 5, 2015 @ 7:40 AM NST | Its my birthday :D
First, I'm very sorry for not updating Buttoneer! I got caught up with Pentool. So I'll put focus here for the next few days!
It's my birthday today!! So that means I'm getting Creative Cloud and will have a PS CS6 and no longer have to use CS3!!!!!!!! So I'm very excited! :3
Custom requests have been closed
One last thing: I might remove layout requests from here and tack it onto my site, Whale.CSS. Thoughts?
Buttoneer is also looking for a sibling site! Just go to the sitely page for more info/application
A new texture has been added to the resources section
May 26, 2015 @ 5:03 PM NST | small hiatus
Ok, so I'm headed off to a camp for 5 days (I'll be back on June 1st), so I'm trying to finish all requests tonight, but if I don't get to yours for some reason, know that's why.
Requests will stay open, I just won't be able to reply until June 1st. Thanks!
May 23, 2015 @ 9:22 AM NST | I've returned to Earth!
Sorry for my absence! I was finishing up my last week of school and so I pretty much avoided all technology so I could focus on my studies. So I'm sorry for not warning everyone! But I'm back now, so it's business as usual; if anything, better, because school.IS.OVER!
May 13, 2015 @ 2:53 PM NST | So busy but hangin' in
I only have a few more buttons to finish and I will have finished all current requests! *throws confetti* I will still be open, but I think I will put more focus on getting Pentool up and running, so requests will be a little slow....again.....just one more week..
May 12, 2015 @ 3:04 PM NST | school is almost out...
Ok, so I have some free time today, so I'm going to try and finish all my button requests! In two weeks though, I will be on summer break and have TONS of time for buttons!
Also, my new site, Pentool, is getting close to done! I have the layout about 75% coded, so I'll be sure to let you know when that's finished!
May 9, 2015 @ 7:50 PM NST | I'm back
School is slowly starting to wind down, so I will be able to finish up all the requests this weekend!
Most buttons have been moved to my porfolio
May 1, 2015 @ 4:07 PM NST | Happy May day!
Sorry for the lack of updates and work! I got caught up with huge projects at school, but they are done now, so for the next week, I should update more regularly and finish buttons in a more timely manner.
You can probably expect to see layout requests open within the next month or so!
Buttoneer is now affiliates with the pleasing Peaceful! A pretty button request site! check it out!
I got a review back from Gingersnap, and so I will be modifying some things (nothing big thought! Thanks for the review!
April 28, 2015 @ 4:26 PM NST | New site
I've begun work on my new png rendering site, and so hopefully it will be open in a week or two. Also, I'll be opening Whale.CSS back up soon too! Once school is out I should be able to do a lot more! Keep an eye out!
April 27, 2015 @ 3:36 PM NST | just another day
Not much news to report other than to keep an eye out for my new site, Topaz! It's still in the works, but it will be a png resources site!
April 26, 2015 @ 7:32 AM NST | updates
Now that my update box is filling up, I think I'll make like an "updates archive" page. It's not really necessary, but sometimes it's fun to see your progress and what you were doing through the year!
April 25, 2015 @ 7:45 PM NST | slow weekend
I'll be busy with four school projects this weekend, so I apologize for my slow output of buttons!
Buttoneer is affiliates with the amazing Abstraact! Check it out!
April 24, 2015 @ 4:31 PM NST | New Affiliate
Buttoneer is now affiliates with the wonderful Whitespace! A wonderful, minimalist premade css directory! Check it out!
New textures have been added to the resources page!
April 23, 2015 @ 4:24 PM NST | Just another day
Pretty normal today. OH--I got my review back from the amazing Route 10 and so I will be modifying some things on the site for the better!
Buttoneer is now affiliated with the superb Seconds! Check out this awesome site!
Affiliation with the beautiful Bisou! Check out Ashe's cool site!
April 22, 2015 @ 2:36 PM NST | Good to be back
It's really nice to be back, and I'd like to thank all my new affies, listers, and requesters for supporting me!
Buttoneer is now affiliates with the jubilant Jewel! Check out this amazing site!
Affiliation between Buttoneer and the exuberant Evanstar. Check out this wonderful site!
April 21, 2015 @ 2:40 PM NST | Back in full swing
Got some requests in, so Buttoneer is now back in full swing!
Buttoneer is now listed at Dragon's Lair.
Buttoneer is now affiliated with the cool Cataclysm. Check out this wonderful site!
April 20, 2015 @ 4:53 PM NST | The moment is here!
WOOOOOOO! The layout is done and I really enjoy it (for the most part) and it went so fast and I'm just so happy to start requests again!
Both types of button requests are open; didn't open layout yet cause, ya know, don't want to jump into freezing cold water; gotta dip my toe in first.
The suave Someday in Ecstasy is no an affiliate! Check out the site!
We are now affiliated with the exuberant Exquisite, a button request site by the lovely Emma! check it out!
Affiliation with the lovely Landscapes is underway! Check it out!
Buttoneer is now affiliated with the superb Spring Fresh! Check out the site!
Make the Button
Let's begin! Open up gimp (or whatever software you are using), and create a new canvas. The dimensions should be 88x31. This is the Neopets universal button dimensions, mainly to keep sites looking neat.
Once you have your canvas set up, click ok. Now you are ready to find an image. I usually get my images from here, but you can get one from anywhere (Dr. Sloth Image Emporium is a good place!). Once you have found the image, go back to GIMP and hit ctrl+V. The image should now be on the canvas, but way too big. Use the scale tool and scale it down to an appropriate size.
Once it is scaled, move it around until the part of the image you want is showing. Keep in mind, though, that the focal point should be on the left or right (it makes it easier to add text while seeing your picture). Of course, if your image doesn't have a focal point, then just position it so it looks nice.
Now that your image is placed, go to layer - layer to image size. The image should now fit the canvas. For ease of work, hit Ctrl+L to open the layers dialog box (in GIMP). Add a new transparent layer above the image. Use whatever colors, designs, or gradients you want to decorate the new layer. I set a blue layer to soft light and then added a texture (from my extras page) set to overlay. Once you have yours done, set the layer mode to overlay or color or any of the different layer modes. Once it looks good, right click on your new layer and click merge down. The background of your button is complete! :)
It is now time to add the border! I'm using the regular square border (you can find it on the extras page). Add the border on top of the background. Now you can do one of two things. 1) You can change the dark part of the border to a color that blends with the background or, 2) you can set the borders mode to overlay. I set mine to overlay and duplicated it a few times. In my opinion though, only certain images look good with the overlay border. So for most buttons, change the border's color to something that matches.
Now it is time to add text. Find the font you want, although I do suggest using a small pixel font such as 04b03 or Bangalor (from dafont). Make the text small enough to fit on the button but big enough to read. I'm using 8pt Bangalor font (8pt is the recommended font size for this particular font). You are generally going to want white font, unless your background is mostly white; it can be any color though, as long as it looks pleasing with the rest of the composition. At this point your text might not be very visible. Don't worry! The next step will show you how to make a border.
Go to the layers dialog box and right click on the text layer. Select Alpha to Selection. The text should now be selected. Add a new transparent layer behind the text layer. Then go to Select - Grow. Set it to grow one pixel. click ok. Make sure you are on the new layer behind the text layer, and fill in the selection with a color. I usually fill it with a color slightly darker than the main color in the image. Your text should now stand out a little more.
To make it stand out more, let's add a drop shadow. First, right click on the text layer and merge it down with the outline layer. Right click on the newly merged layer and click alpha to selection. Then go to Filters - light and shadow - drop shadow. Change both of the offsets to 0px and set the blur radius between 5 and 10. Choose the color and hit ok (I usually leave it black). Your button is now complete! But how 'bout we take it even further and make it animated. :)
One By One
So, this is by far the simplest animation you can make. To start, zoom in 400% to 800%. Next, count how many letters the button has, and duplicate the button that many times. For example, the button I'm using has 9 letters, so once I finish duplicating, I should have a total of 10 layers.
Now that you have all the layers you need, change the foreground color to a color that is light (dark would work depending on the image), but make sure it matches your image. Now go to the bottom layer. Fill in the first letter and then go to the next layer. Fill in the next letter. Go to the next layer and fill in the third letter. Once you have done this to each layer, you are ready to move on.
You may be wondering "what do i do with this extra layer?" Well, simply duplicate the layer ( I duplicate mine 10 times). The more duplicate layers there are, the longer pause there will be before the animation restarts. So, don't go overboard with the duplicate button. Now go to filters - animation - playback. If you like what you see, keep on reading.
Good, you're still here! Now to finish your button off, go to file - save as (if you are using GIMP 2.8, you will have to click file - export). Make sure you save/export as a .gif image. When you click ok, a box should pop up. Check save as animation and then ok.
The swish animation is quite similar to the one by one. The only difference is that this animation takes more layers, and more colors. So, let's begin. As always, zoom in about 400% to 800%. Next, duplicate your layers so that you have the same amount of layers as letters. Then, add three more layers.
First things first, choose a color. For your color, you should probably pick one that is lighter than the main color of your image. Make it fairly light, but not too light as you need two more colors slightly lighter. So with the color you chose, fill the first letter on the first layer, second letter on the second layer, and so on.
Now, choose a color lighter than the color you just used. Start on the second layer and fill in the first letter. Then on the third layer, fill in the second letter, on the fourth, fill in the third. Keep doing this until you have reached the end of the word. Finally, get a color even lighter (almost matching the font) and start on the third layer, and fill in the first letter. On the fourth layer, fill in the second letter. Keep repeating until you are done.
At this point, I'm sure you are about ready to break your computer monitor. Well, don't, because we are done....almost. All that's left is to duplicate the last layer about 5 times (If the layer you are duplicating has any letters filled in, you must have done something wrong. NM me if you can't figure out the problem). Finally, export the image in the same manner as the first animation.
The sparkle animation is by far my favorite animation to do. It just has such a cool and beautiful look to it. So, once again create a new image. Zoom in 800% to 400%. Now, duplicate your image 5 times. This is how many frames it will take to make one sparkle. Let's begin!
Creating a sparkle is quite simple. First, choose a color for your sparkle. As a general guide, you should probably make a white sparkle. Once you have the color, select the pencil tool. Make sure you have a normal round brush selected and make it as small as possible. Now that you are ready, draw the first step on the first layer (steps are to the side), the second step on the second layer, and so on. This should take 5 steps (make sure you have a sixth layer and keep it plain).
Once you have made your sparkle, it should look something like the image to the right. Oh! wait! I almost forgot to tell you to duplicate the plain layer a few times to give your animation a break. Phew! Good thing I remembered now.
Now, you might be looking at my button to the left and wondering how I got it to have so many sparkles. Well, It is simple to do. Begin making your first sparkle, and when you get to step four or five, start making your next sparkle. This will make them overlap a little. If you don't want an overlap, give a break between sparkles. Just remember not to use too many sparkles as it can easily make your image seem crowded.
So...if you read the first animation tutorial, I said it was the easiest...well I lied. The appear animation is the easiest, most simple animation ever. To start, zoom in 800% to 400%. Now, you need three layers of your button. Make sure the first two are without text and the third has text.
Now, go to filters - animation - blend. Set the intermediate frames to 10 and the maximum blur radius to 0. Make sure it is looped. Click ok. A new "image" should pop up with lots of layers. Find the layer without faded text (the layer that has the most clear text) and duplicate it. Duplicate it as many times as you want, but as a good rule of thumb, duplicate it around 10 times.
You might be thinking "Now what?", well....that's it. No joke! That is really it. All that's left is to save it as a .gif. Look at mine to make sure you did it right.
Think you can handle the glow animation? Well, don't worry, because anyone can. To begin, zoom in 800% to 400%. Next, duplicate your button twice which will give you three layers.
Make sure you are on the top layer. Now, select the border of the text. Just the border! On a new layer, fill in the selected area with white. Then change the opacity of the layer to about 30 to 35. Now go to filters - light and shadow - drop shadow. Make both offsets 0, color to white, blur radius to 5, and opacity to 100. Place the shadow between your text and the button. If the white is not visible enough, duplicate the layer.
Merge all this onto one layer but don't leave yet. By merge to one layer, I'm talking about merging everything you have done with the first layer. If done correctly, you should have two normal layers, and one layer with the white drop shadow. Now, go to filters - animation - blend. Set the intermediate frames to 10 and the maximum blur radius to 0. Make sure looped is checked. Click ok.
Hooray! We are done! All that is left to do is save it as a .gif. Enjoy your new animation!
Please give me credit! It can be listed under a credits section, or you can have the button link back to me. Just be sure people know who made it.
You can request up to three basic buttons at a time, and only two customs.
You may have to wait five days for your request to be completed, so please be patient.
If you are requesting a custom button, add the words fire flower to the form.
Once your button is done, please pick it up within ten days. After ten days, it will be moved to my portfolio.
If you do not like the button, simply tell me what's wrong, and I will fix it for you.
If you are requesting a basic button, add the word tree to your form.
Please wait at least two days before requesting again. (Feel free to ask me if you can request again earlier).
Please use the button. I put time and effort into it.
For Layout Requests
You MUST leave the credit in the credits section.
You may only request one layout per month. I know it seems extreme, but coding and making layouts takes a while.
Please wait up to three weeks for your layout to be completed. That will be the maximum amount of time it will take, but you could get your layout within a few days.)
If you need your layout by a deadline, tell me so I can make your layout first priority.
Add the word whale somewhere in your form.
If you don't like the layout, kindly tell me what's wrong, and I will fix it.
Yes, you may edit your layout (although I ask not too much, as I did spend time on coding it).
Please use the layout. I put a lot of time and effort into it.
I will only do redo your layout 3 times.
Please, please, please, PLEASE, be specific. The more specifications you have (including examples), the better your layout will look.
Do you have that perfect button pictured in your mind? Now all you need is for someone to get it out? Then you came to the right place! Using custom requests allows you to tell me almost every exact detail of how you want your button to look. Start by choosing the border, then the animation, and finally the font! There is also a place in the request form to specify the image you want me to use. Happy requesting!
Fill Out as You Go Along
This is the first step to creating your ideal button! Look through them all, and when you find one you like, add that number to the form. If you don't see a border you like, describe to me the border you want in the form, and I will try my best to make it look good.
Now it's time to choose your animation! Feel free to choose multiple animations, just don't go overboard. If it is too much, I will tell you. Also, if you don't see an animation you like, describe the animation you want in the form.
You can select up to two different fonts you want me to use. Please specify what part of the text you want with a certain font. If you have questions or want an example on how to pick out fonts, click here.
How To Select Fonts
So you are a little confused on the whole choosing fonts thing huh? Don't worry, that is 100% ok! So first thing is first. Look at what text you want on your button. Lets pretend mine is Heavenly Premades.
Lets say I just wanted pixel fonts. I'm just going to use 04b03 as an example. It looks kinda...ordinary like that. Now don't get me wrong, on some buttons plain pixel font looks good. But some need a little more.
So now I want two fonts. I want angelina and o4b03. However, before I send in the form, I need to specify which text I want with what font. So that part of the form would look something like this:
Site Name: Heavenly Premades
Site Link: /~alink
Border #: 2
Animation #: 16
Font(s): angelina and 04b03
Text: Heavenly (angelina) Premades (04b03)
Image: Image Link
Colors: yellow and blue
Other Things: None
Now that I have specified the text, the button will look something like the one to the left. Now it looks how I want it! Now if you want a certain letter(s) to be a different font, such as bangalor and 04b03, do this:
Site Name: Heavenly Premades
Site Link: /~alink
Border #: 2
Animation #: 16
Font(s): angelina and 04b03
Text: Heavenly Premades (Make the first letter of each word be bangalor, and the rest of the text be 04b03
Image: Image Link
Colors: yellow and blue
Other Things: None
That would look something like the button to the right. If you don't specify, and you simply give me two fonts, I will use the fonts in a way that make the text look good.
As you can see, it is important to specify what font you want for each part of the text. Thank you for reading!
Before you send the form, please make sure you were super-specific, almost to the point of being annoying!
Here, you can find answers to some of the questions that I get asked the most!
See all the buttons I have made! (external link)
Need some button borders or backgrounds? Maybe even a button placeholder? Click here!
Do you need buttons to support your team for the AC? Or maybe some other themed button?
Want to know what others think of my site? Click to find out.
Here you can find some of my all-time favorite buttons!
Awards & Reviews
Do you want to see the awards and reviews I've received?
If you want to get to know me better, click here!
Q. Do you take requests?
A. Of course I do! C: Just go to the requests page to find out rules and how to get one.
Q. What program(s) do you use?
A. I use GIMP only...well, for graphics, anyways. I use photoshop for drawing.
Q. What fonts do you use for buttons?
A. I generally use 04bo3 and Bangalor. You can find a complete list on the custom request page.
Q. Where do you get your images?
A. I usually get them from here. I also get them from various "background .swf" sites.
Q. Where did you get your layout?
A. I made it C: If you are in need of one, you can request one! Just click on requests.
Thomas is a very friendly and helpful person with tons of creativity at his fingertips. His buttons are beyond exceptional, the best quality, and beautiful. He makes the most unique buttons I have ever seen on Neo, and I would recommend anyone to request from him. c:
Hello! I am Kanata and I requested a button from Buttoneer! My guild needed a button so I found this site. I noticed the buttons it had created had this very unique style which no other button site had. It was also one of the only buttons sites where requests were open! I requested my button and waited..... A few days later I got a reply saying my button was finished. AMAZING QUALITY! My mind was blown when I saw it. It was perfect! Buttoneer has unique buttons and animations and button stuff that no other button site has. I plan to request there for the future and I hope you do too!
Thomas makes high-quality buttons for anyone! It's absolutely always at High-Quality and Thomas has always put his best effort into making each button. He's super friendly and nice so his service is beyond excellent! I would recommend revisiting Buttoneer!
Awards & Reviews
Achievements• I reached 500 pageviews on June 8, 2013 @ 6:50
• I reached 1000 pageviews on July 10, 2013 @ 9:26
• I reached 3000 pageviews on December 26, 2013 @ 3:12
• I got and completed my 100th button request on July 15, 2013 @ 5:21
Hello, I'm Thomas! So I guess you came here to learn a little bit about me, huh? Well, I'll start with the basics. I have blond hair and blue eyes and am currently 17 (my birthday is June 5th). Doing art and making graphics is my passion! I have been doing it since I can remember!
I joined neo when I was about 10, but didn't make this account until I was about 13. Most days you can find me playing neo...well not exactly playing. More like making buttons for people and creating petpages for my guild. That's right, I also code! :D How else do you think I got this layout? Lol!
Favorite Color: Blue!
Favorite Food: Carrots
Favorite Singer: Lana Del Rey, Florence + The Machine, and Icona Pop
Favorite Season: Winter
Likes: WHALES!!!!!!!!, rain, relaxing, coding, painting, talking to people, and being outside!
Dislikes: Apples with stickers, ruder people, when things don't work as they should, seafood, and infomercials.
Landscape is a very quality button request site run by the lovely Mika! At Landscape, a client can request a gorgeous button of the highest calibre in which they will receive the finished product in no time at all! Having made over 100 buttons, Mika possesses a great amount of experience; if you request at Landscape, you won't be disappointed!
Previous, now inactive, sibling site: Lucid