arlo atomickk's profile picture

Published by

published
updated

Privacy: Link-only
Category: Web, HTML, Tech

How to make buttons!

To make buttons you're gonna wanna use this site! It doesn't allow for gif saving but i'll show you a way around that!

I'm gonna make a fob button using this gif and some text! The optimal gifs/images for this would be those which are wider than they are long.

fall-out-boy-fob

Since the gif doesn't fit the 88x31 ratio im gonna head to this site to make change the width to 88 (not the height though because it would look weirdly stretched lol)

ezgif-3-c1a891fd25-1 This is the gif now!

Now since it is still too LONG we must crop it how we want it (with a height of 31px) - so use this site!

You're gonna wanna set the width to 88px and the height to 31px 

 Screenshot-2023-07-09-at-23-55-38

and then drag the cropper to wherever you want the image to be!

ezgif-3-26b0599bf2 Here's where the gif is now.

Now going back to the button generator, drag the image into the 'background image' section and then customise the borders, text etc however you want!

Here's what mine now looks like (as a still screenshot lol):

Screenshot-2023-07-09-at-23-59-22

Now: how to get it as a gif! This can be a little tricky but you have to zoom in as far as possible and then screen record your screen for the duration of the gif. You can either screenrecord jus the button section of ur screen or crop it out later.

This site can be used to cut your video down to the length of one gif.

Then head over to this site to turn your video into a gif:

Here's what I'm currently working with:

ezgif-3-0e3fd6237a

As you can see, it needs cropped slightly and resized so head over to those links to do so!

And here's my final product! An 88x31 button!

ezgif-3-ef36917f5b 

This is probably one of the more annoying graphics to get perfect but with practice it gets easier!!


I upload all of my images onto this site and then put them on my profile using the code:

<img src="DIRECT LINK"/>


Hope this helps!


Comments

Displaying 0 of 0 comments ( View all | Add Comment )