Button Sizes and Graphics Types

[Sailor_Fabulous]

Hello! Hope this is the right board for this.

I missed most of the Web 1.0 sites and forum experiences when I was a kid, but have really loved all I've been seeing in the Web Revival space, as well as from friends reminiscing of old sites, and exploring some old fan senshi sites that are still standing, as well as fanlistings, and something I've been loving has been seeing some of the recurring small graphics types - usually buttons and banners of different sizes, and I'd really like to make some.

I was wondering if anyone is able to list some of these old "standard" graphics and their canvas sizes? Would also love any history or even a short description of what they were typically used for, if relevant.

An example is of course the classic 88x31 button, which I know could be used in button walls or to link to other sites, and similar for Blinkies with the 150x20 dimensions and being for showing interests.

There are also fanlisting "codes" with various sizes, including: 50x50, 75x50, 100x50, 200x40 etc., which I know were for displaying your membership and linking back.

I've also encountered thin, long images that I don't know the dimensions for and struggled to find a name for (which I have since forgetten TT.TT), but that I know were forum related and have actually seen around here in people's signatures before - I would love to know about these! This user has some of what I mean.

I'm also wondering if there's any advice for making these graphics on such a small scale without the images used looking terrible, and also what programs might be useful, as I've only done pixel art on this small scale xand I'd like to try using other art for some.

Some examples of what I mean in regards to small scale image, and a size that isn't one of the ones I've already mentioned knowing:


I hope that all makes sense, but to sum up, please tell me about the typical graphics you used to see everywhere and what dimensions I should be using to make some for myself!

[xixxii]

here you go! some images and their dimensions!

button - 88x31


blinkie - 150x20


stamp - 99x56


favicon - 20x20


livejournal icon, myspace avatar, many forum standard icon size - 100x100


AIM buddy icon - 50x50


windows icon - 32x32


banner ad - 468x60


userbar - 350x19 (these are the long thin images you mentioned! known by several other names as well)


internet bumper stickers - 250x40


bonus: userboxes, because i've seen them getting some buzz on tumblr. these are for wikipedia profiles and are not actually supposed to be images, but the image versions get passed around a fair bit.

userbox - 240x47



there's also signature banners, but signature graphics on forums vary a LOT sizewise. different forums had/have different rules or norms about how big your signature graphics can be. some are pretty big lol. favicons also vary a lot in size as they have different recommendations and implementations in different eras and browsers and contexts.

hope that helps! 

[Sailor_Fabulous]

Ahhh thank you so much @xixxii !!

This is super helpful, I definitely want to play around making some of these. Thanks for the userbar name as well, I was struggling to find the name again, and also the wikipedia userbox is good to have too, as I did see some on tumblr a while back and they seem like fun too haha

I appreciate the help, and to anyone else who may see this thread, if you have other graphics and sizes, or even just any history or fun facts about them, I am still keen to learn more!

[Paprika]

Was looking to answer but XIXXII knows a couple more than me so thanks for the post, I've learned the proper Banner Ad and Bumper Sticker sizes !

Thanks a lot ! 

[wygolvillage]

Making small scale pixel art is really fun honestly!!! I like using Firealpaca because it's free and has a gif export option (albeit limited, you'll need ezgif or a similar tool to make anything transparent or with any more complexity). I just use the pixel brush and I usually draw on one layer. It can be a challenge to make everything look good and parse well from afar but I approach it like any other drawing apart from that.

[Sailor_Fabulous]

Making small scale pixel art is really fun honestly!!! I like using Firealpaca because it's free and has a gif export option (albeit limited, you'll need ezgif or a similar tool to make anything transparent or with any more complexity). I just use the pixel brush and I usually draw on one layer. It can be a challenge to make everything look good and parse well from afar but I approach it like any other drawing apart from that.

I'm actually set on the pixel art stuff, though I still appreciate the tip; I use Pixel Studio on my phone and tablet for it and have had fun making buttons and deviantART group icons (100x50). Here are some I've done recently:




What I'd really love tips on though is how to use non-pixel graphics on such a small scale without them looking terrible from re-sizing. I did see something about GIMP having a scaling function with options to retain quality though, so I may try that at some point. I'd personally love anything with an Android app though, as I love drawing and making things on my tablet with my S-pen while I'm hunched up in bed or on the lounge lol

[larvapuppy]

What I'd really love tips on though is how to use non-pixel graphics on such a small scale without them looking terrible from re-sizing.

Not sure about GIMP, but if you have access to Photoshop you can try the bicubic sharper reduction method when resizing.

[TheFrugalGamer]

What I'd really love tips on though is how to use non-pixel graphics on such a small scale without them looking terrible from re-sizing. I did see something about GIMP having a scaling function with options to retain quality though, so I may try that at some point. I'd personally love anything with an Android app though, as I love drawing and making things on my tablet with my S-pen while I'm hunched up in bed or on the lounge lol

Are you talking about going UP in size, or DOWN? If you're wanting to go up, Lospec.com has a Pixel Art scaler in their tools section that will let you size pixel art up without losing quality:

https://lospec.com/pixel-art-scaler/

If you're going down, that obviously doesn't work though. When I've done that in the past, I usually have always had to go in after the scale down and touch up the individual pixels. Art programs that let you have two separate views up are really helpful for that, and it's probably the one thing I wish Photopea.com would add.

[xixxii]

Not sure about GIMP, but if you have access to Photoshop you can try the bicubic sharper reduction method when resizing.

Paint.NET is free and lets you change between different types of resizing! if photoshop and gimp don't work.

here's some examples;
big size:


in order: bicubic, bicubic smooth, bilinear, bilinear low quality, adaptive (sharp), lanczos, fant, nearest neighbor

[Sailor_Fabulous]

Not sure about GIMP, but if you have access to Photoshop you can try the bicubic sharper reduction method when resizing.

No photoshop I'm afraid, but thanks for the tip regardless! 

Are you talking about going UP in size, or DOWN? If you're wanting to go up, Lospec.com has a Pixel Art scaler in their tools section that will let you size pixel art up without losing quality:

https://lospec.com/pixel-art-scaler/

If you're going down, that obviously doesn't work though. When I've done that in the past, I usually have always had to go in after the scale down and touch up the individual pixels. Art programs that let you have two separate views up are really helpful for that, and it's probably the one thing I wish Photopea.com would add.

I'm specifically interested in scaling non-pixel art down. The app I use for pixel art actually comes with upscale exports that I do use sometimes, which is handy. That said, that seems like a neat tool, so thanks for sharing regardless ^^

Paint.NET is free and lets you change between different types of resizing! if photoshop and gimp don't work.

here's some examples;
big size:


in order: bicubic, bicubic smooth, bilinear, bilinear low quality, adaptive (sharp), lanczos, fant, nearest neighbor

This is very helpful, thank you so much! Especially thank you for showing how the different types work out! I hope to be able to make some fun non-pixel web graphics soon now
Or at least some time this year XD

[xixxii]

happy to help!!! good luck graphic-making! 

[candycanearter07]

here you go! some images and their dimensions!

button - 88x31


blinkie - 150x20


stamp - 99x56


favicon - 20x20


livejournal icon, myspace avatar, many forum standard icon size - 100x100


AIM buddy icon - 50x50


windows icon - 32x32


banner ad - 468x60


userbar - 350x19 (these are the long thin images you mentioned! known by several other names as well)


internet bumper stickers - 250x40


bonus: userboxes, because i've seen them getting some buzz on tumblr. these are for wikipedia profiles and are not actually supposed to be images, but the image versions get passed around a fair bit.

userbox - 240x47



there's also signature banners, but signature graphics on forums vary a LOT sizewise. different forums had/have different rules or norms about how big your signature graphics can be. some are pretty big lol. favicons also vary a lot in size as they have different recommendations and implementations in different eras and browsers and contexts.

hope that helps! 

Wait, are you allowed to use a bigger image for your favicon? I kinda reused an image for my favicon and its i think 48x48

[xixxii]

Wait, are you allowed to use a bigger image for your favicon? I kinda reused an image for my favicon and its i think 48x48

you're allowed to do whatever you want :U i think different browsers & devices display them at slightly different sizes.