Home Events! Entrance Everyone Wiki Search Login Register

Welcome, Guest. Please login or register. - Thinking of joining the forum??
November 02, 2024 - @36.28 (what is this?)
Forum activity rating: Three Stars Posts: 30/1k.beats Unread Topics | Unread Replies | Own Posts | Own Topics | Random Topic | Recent Posts
News: :skull: Websites are like whispers in the night  :skull:
Halloween Topics! Gfx + Costumes, Decor + Crafts, Prep, Horror Movies, Spooky Songs! ~ E-Zine #2 is out now!

+  MelonLand Forum
|-+  World Wild Web
| |-+  ✁ ∙ Web Crafting
| | |-+  Button Sizes and Graphics Types


« previous next »
Pages: [1] Print
Author Topic: Button Sizes and Graphics Types  (Read 275 times)
Sailor_Fabulous
Casual Poster ⚓︎
*


⛺︎ My Room

View Profile WWW

Bishoujo Senshi Sailor FabulousJoined 2024!
« on: August 10, 2024 @50.24 »

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!
Logged





xixxii
Full Member ⚓︎
***


they/them

⛺︎ My Room

View Profile WWW

Web 1.0 Picture Size Expertthe xixxiiJoined 2024!
« Reply #1 on: August 10, 2024 @269.38 »

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!  :dog:
Logged

Sailor_Fabulous
Casual Poster ⚓︎
*


⛺︎ My Room

View Profile WWW

Bishoujo Senshi Sailor FabulousJoined 2024!
« Reply #2 on: August 10, 2024 @324.75 »

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!
Logged





Paprika
Sr. Member ⚓︎
****


Go to the tanterwomps for they are lost in time

⛺︎ My Room
StatusCafe: matchaprika
XMPP: Chat!

View Profile WWW

Thanks for being rad!the one and only paprika!Giver of Many Welcomes!Joined 2024!
« Reply #3 on: August 10, 2024 @410.88 »

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 !  :4u:
Logged
wygolvillage
Sr. Member ⚓︎
****


meow!!!

⛺︎ My Room
StatusCafe: wygolvillage
iMood: wygolvillage

View Profile WWW

Thanks for being rad!melonlands goth cat!First 1000 Members!Joined 2023!
« Reply #4 on: August 10, 2024 @572.72 »

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.
Logged


Sailor_Fabulous
Casual Poster ⚓︎
*


⛺︎ My Room

View Profile WWW

Bishoujo Senshi Sailor FabulousJoined 2024!
« Reply #5 on: August 11, 2024 @102.07 »

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
Logged





larvapuppy
Full Member ⚓︎
***


⛺︎ My Room

View Profile WWW

First 1000 Members!Joined 2023!
« Reply #6 on: August 11, 2024 @139.11 »

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.
Logged

the end of an era, one starts anew
TheFrugalGamer
Sr. Member ⚓︎
****


⛺︎ My Room
Itch.io: My Games

View Profile WWW

First 1000 Members!Pocket Icelogist!Joined 2022!
« Reply #7 on: August 11, 2024 @145.84 »

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.
Logged

xixxii
Full Member ⚓︎
***


they/them

⛺︎ My Room

View Profile WWW

Web 1.0 Picture Size Expertthe xixxiiJoined 2024!
« Reply #8 on: August 11, 2024 @191.24 »

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
Logged

Sailor_Fabulous
Casual Poster ⚓︎
*


⛺︎ My Room

View Profile WWW

Bishoujo Senshi Sailor FabulousJoined 2024!
« Reply #9 on: August 11, 2024 @318.69 »

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!  :smile:

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 :ozwomp:
Or at least some time this year XD
Logged





xixxii
Full Member ⚓︎
***


they/them

⛺︎ My Room

View Profile WWW

Web 1.0 Picture Size Expertthe xixxiiJoined 2024!
« Reply #10 on: August 11, 2024 @742.21 »

happy to help!!! good luck graphic-making!  :ha:
Logged

candycanearter07
Sr. Member ⚓︎
****


i like slimes

⛺︎ My Room
SpaceHey: Friend Me!
StatusCafe: candycanearter
Itch.io: My Games

View Profile WWW

Suck At Something September - Did It!uh oh! a pigeon got in!Artsy Candy CaneJoined 2024!
« Reply #11 on: August 11, 2024 @821.64 »

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!  :dog:

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
Logged

new to oldnet be nice




xixxii
Full Member ⚓︎
***


they/them

⛺︎ My Room

View Profile WWW

Web 1.0 Picture Size Expertthe xixxiiJoined 2024!
« Reply #12 on: August 11, 2024 @856.88 »

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.
Logged

Pages: [1] Print 
« previous next »
 

Vaguely similar topics! (3)

++ Forum Badges and Graphics ++

Started by MelooonBoard ♺ ∙ Web Crafting Materials

Replies: 7
Views: 4699
Last post April 15, 2023 @779.31
by shevek
looking for some general advice on creating graphics for a new site

Started by MemoryBoard ✁ ∙ Web Crafting

Replies: 3
Views: 983
Last post August 11, 2022 @721.77
by Memory
HELP: Custom cursor that changes when you are pressing the mouse button

Started by Lulu FinksBoard ☔︎ ∙ I need Help!

Replies: 4
Views: 962
Last post January 29, 2023 @1.56
by Lulu Finks

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021, Simple Machines | Terms and Policies Forum Guide | Rules | RSS | WAP2


MelonLand Badges and Other Melon Sites!

MelonLand Project! Visit the MelonLand Forum! Support the Forum
Visit Melonking.Net! Visit the Gif Gallery! Pixel Sea TamaNOTchi