How did you make your site buttons?

Graphic Design
1

I’ve started my site 7 months ago and I really want to make a custom button for it.
How does everyone make their buttons? My idea was to use Piskel and create a canvas with the dimensions of 88 x 31, build a base, and then go into Affinity to add type.
The problem is that type might look weird if it starts off that small because of anti-aliasing so maybe I should make the base bigger at first and shrink it down later?

If anyone has any advice, I’d really appreciate it :3

2

So far, for my own I just cropped, rotated and scaled some PFPs and site logos I had lying around; mtPaint was plenty enough for that.

1 Like
3

I use Aseprite. It’s a paid piece of software ($20/lifetime) but it’s very good as you can do simple animations, drawing, and you can switch off anti-aliasing when resizing things.

It’s designed for video games, but it’s so simple.

1 Like
4

One thing I’ve found so frustrating is that there is no “here’s how you make an 88x31” because apparently it’s some kind of inherent knowledge that everyone but me has? I am absolutely not a graphics person but I’ve managed to cobble together some buttons (using GIMP, but I think that’s overkill for buttons) but it did not come natural and now I’m a fan of button makers. One big benefit to the makers is they have fonts preloaded so what they have fits within button dimensions.

My original site button (flashing green and purple monstrosity) was made using this and then EZGif to merge the frames:

Super basic button maker:

This one is kind of neat, has tons of text styles and button blanks to choose from.

OK, I lied, I did find one “how to make an 88x31 video” - it’s 16 years old and I think the YT account has since been taken over by someone other than the original owner but this is a good tutorial:
Button Tutorial Part 1 by Bladed Velvet

And this is a how to make a blinkie tutorial from Tumblr but I don’t see why you can’t extrapolate the instructions to make an 88x31:
How to Make a Blinkie

3 Likes
5

The Devil’s honest truth is that I don’t remember what I used. It might have been the GIMP, however poorly the Tarantino-esque name has aged, but I could be wrong.

1 Like
6

https://www.pixilart.com/ - free, in-browser, and easy!

2 Likes
7

Honestly just something like MS Paint and hand pixeling the design+letters with the pencil tool. I like simple straight forward processes

You could also shrink some logos/designs down in various programs. Depending on the program it may let you choose a smooth scale or a hard edged scale, you can try both to see which you prefer for your design

You can also download a random button and draw over top of it if you want to get the right size canvas easily ^^

1 Like
8

Initially, I used hekate2’s 88x31 Web Button Maker. After studying site buttons more, I used Adobe Photoshop CS5, then Affinity Photo 2.

For my main site’s buttons, I switched to Affinity Designer when I decided to make the buttons in vector format so I can resize the graphics without losing the graphic quality, but still can export them to raster image formats.

1 Like
9

the thing is that theres not really a defined way to make them, like some people just do a grey button with text, some a small drawing, some are heavily animated,… even the choice of the best software to use will depend on your personal preferences

anyway my 3 buttons are way different so heres how i made them:

  • for the rift i used sadgrl’s button maker to get the text and then i put it over a cool gif in photoshop
  • for gdland i used paint tool sai 2, i used a font for the text and redrew some bits to be better, then added the ianto image, then added some glossy effects with an airbrush, then animated the letters frame per frame and put them all together into a gif on ezgif
  • for isopals i literally just drew everything by hand in sai 2. but im not a huge fan of the final result i just dont have better ideas
2 Likes
10

I just use Krita, with the pixel art brushes that it has. For my original button I briefly tried using Affinity Designer but at a tiny size to get some nice anti-aliasing, but found it very difficult to work with and the results were way too smoothed out by the anti-aliasing. The actual original button was just pixel art done in Krita with no attempt to perform any anti-aliasing.

The new, current badge was also done as hard pixel art in Krita, but with half-transparent pixels added on the “aliased corners” to provide a very light anti-aliasing. This gives the badge a subtle smoothness but without feeling like a poorly done downscale of a larger artwork. I’ve also attempted to add a rounded border, which has a subtle gradient going on to give it a sorta 3D look. I also manually painted the type on it.

1 Like
11

I did not expect so many replies :open_mouth: Thank you so much, everyone! I’m currently trying to make the button for my site and we’ll see how it goes. As a few of you said, there’s not much info on it out there so I’m happy there’s now quite a lot of info here with a lot of different methods :3

I’m currently trying to do it like this but with Affinity bc I think you can turn the anti-aliasing and smoothing off now :3

1 Like
12

I found one online, downloaded, then used GIMP to change the gif frames, as it was animated. Hand drawn. I’m certain websites could do it faster today, but sometimes I find making things myself are more fun!

13

I used Inkscape for mine, but that’s only because that’s a program I was already using a lot of anyway. I’d recommend using whatever image editing/drawing program you’re most comfortable with. Like @solaria said, even MS Paint is fine.

1 Like
14

I used Piskel and spelled out the letters with pixels.

1 Like
15

I managed to make it with Affinity and I’m quite happy with it. Thank you everyone for your tips

dorians_page

Now if only I knew how to put images in my signature XD

5 Likes