Deer of the Internet Forest

The frame I will be using for this tutorial (which is the frame I use on 99.9% of my stamps) I found from the above linked post, which I believe is from a creator that OP lost track of. Its inner dimensions are 94x50 pixels and its outer dimensions are 99x56 pixels. Here it is!

Find your material! - I recommend using websites like Tumblr and searching with the “GIF” filter only on, or alternatives such as Giphy or Tenor. Your browser may let you directly save the .gif file; if not and you are noticing it restricts you to save it as a .webp file you can try an extension like “Save webp as PNG or JPEG” (for Firefox but I image other browsers have similar functions, but I really recommend you switch to Firefox). To use this you will right click on your source .gif like normal but instead of clicking on “Save image as…” click “Save webP as…” and then click “GIF”. You should be redirected to the website ezgif.com where we will actually be doing all of our editing! Here’s the .gif we’ll be working with.

Convert to GIF (optional) - if you used the extension from the above step you should already be ready to click the blue “Convert to GIF” button. If not, go ahead and open ezgif.com and click on “webP” and then “WebP to GIF”; then convert to a gif with the blue button.

Resize the GIF - now that we have a gif ready to edit, let’s make it the right size. The easiest method I have found is to change it directly to the frame’s inner dimensions, 94x50 pixels. [EDIT: Make sure in the aspect ratio drop drop menu you select "stretch to fit" and not "center and crop to fit" like I did in the photo example.] Click “resize” and then type [94] in for the width and [50] for the height. Next press the blue “resize image” button.

Add the frame - next click “overlay” then click the thin blue button that says “Extend canvas size(use if overlay exceeds GIF sizes)”. This will give us some extra room to add the frame onto the design. Next click “Browse…” and find the frame you have saved onto your device, then click the blue “Upload image” button.

After that it’s going to be misaligned, that’s normal! It will say you have the option to drag it into place, but don’t bother. That’s one of the reasons my old stamps look wack, it’s just harder to do. Instead type [44] in for the Left box and [22] in for the Right box. It took me a while to figure out these dimensions to be honest, and I’ve only tested it with this frame so I don't know if it works with others. Then click the blue “Generate image” button.

Crop the transparent edges - click on “crop”. You will have the option to check a box that says “trim transparent pixels around the image” however, I don’t recommend this as it tends to crop a few of the frame’s pixels with it sometimes. Next, set the Left position to [44] and the Right position to [22]. For the other dimensions we will use the outer dimensions of the frame which are 99x56 pixels, this will trim everything except the tiny spaces in between the stamp frame’s spikes. Type the width as [99] and the height as [56] and click the tiny blue button that says “set”. After that click the blue “Crop image” button.

Save and use! - all that's left is to click “save” and upload the graphic to your liking. (best seen on dark mode obviously)

To start I wanna dump some resources on ya,, here have some more tutorials!

[alfea]

[irldenji]

[pixelsgarage]

Here have some extra templates you can play around with later!

[irldenji]

[wedielikefools]

[ix-c-999]

[webthingsformetouse]

[radiotrophicfungi]

[ix-c-999]

[webthingsformetouse]

[glittergroovy]

[webthingsformetouse]

[webthingsformetouse]

[webthingsformetouse]

[sweetsatellite-tv]

[glittergroovy]

Now for the actual pieces we’re gunna be using today:

These two are the blinkie parts of the blinkie we separated.

The frame part of the blinkie, optional; honestly we only recently started using it but do like the look! It may be slightly uneven, we did it with a brush in photopea lol.

The extras we’re gunna work with for our example.

credit for this image goes [here]

The two websites we’re going to use to make this blinkie are Photopea and Ezgif.

Open the pink blinkie base in Photopea

Click ‘File’ in the upper left corner, click ‘Open & Place’, open the blinkie frame

Click ‘File’ in the upper left corner, click ‘Open & Place’, open one of the two blinkie addons; repeat step 3 for the second one

Click ‘Layer’ in the top toolbar, hover over ‘New’, click ‘Layer’; repeat this twice. Optionally, but to make things a bit easier let’s rename our current layers and make sure they’re in this order. The layers marked ‘addOnMask’ are the two new blank layers we just created

Right-click on each addOnMask and then click ‘clipping mask’ on each one; this will turn each on into a layer that will only paint/display on what is directly below it. In this case our clipping masks are gunna change the color of our blinkieAddOns way easier! The display will change for the masks to have an arrow pointing at its target layer

If you have chosen to do a picture for a background do this step! if not skip to the next one

Click ‘File’ in the upper left corner, click ‘Open & Place’, open whatever you have chosen to be the background. There will be small squares the the corner of the image that if you click+drag it will resize the image. If they disappear for some reason, or if you need to reposition something again, click ‘Edit’ in the top toolbar then click ‘free transform. Once you’ve made your background image the correct size, ensure its directly above the pink background layer and below the blinkie frame

If you have chosen to do a solid color or even a gradient background check here!

Click on the paint brush on the left side toolbar, pick a bigger brush to make things easier, pick your background color, the paint directly on the background layer from earlier

If you’d like a gradient, make sure you have the background layer painter a solid color and selected, before clicking the magnifying glass/search icon on the top toolbar. Search the word ‘gradient’ and then click ‘Gradient Overlay’. Alternatively click ‘Layer>LayerStyle>GradientOverlay’

It will initially look something like this

Next click the little black and white gradient filled bar next to the label ‘gradient’ to open the gradient editor.

Click on the lower two boxes attached to the gradient bar in the middle, assign them each a color for the ends of your gradient. Optionally you can change the direction, fade distance, etc. before clicking ok on each menu to close them and see your new image!

If you’d like to make more edits click the drop down arrow next to the background layer, and click on the ‘gradient overlay’ layer

From now on we’re gunna go back to the Garfield background, but feel free to explore with other options! To recolor the blinkie frame there’s two methods we usually use

Right click the target layer and click ‘select pixels’. Then paint over the area with a desired color, a separate image/pattern in its own clipping mask, or even another gradient who cares!

Or create a new layer, position it directly above the frame layer, turn it into a clipping mask, and paint away!

Now to recolor the blinkie bits, paint the clipping mask directly above the layer you wish to change color, go ahead and paint the whole thing with a big brush cause it should only paint the target layer. We chose to keep the blinkie bits black and white, but still you should paint the clipping mask for the next step! Your layers should look something like this, with the addOn masks fully whatever color you chose

Adding text in cool fonts right about now would look great on most blinkies, with more solid backgrounds!

How about adding a foreground image? Try it out with a drop shadow or a little background for itself

Click ‘File>Export As>PNG>Save’ to save the first frame of your blinkie gif

Now drag the ‘addOnMask1’ above the top ‘blinkieAddOn’ and ‘addOnMask2’ above the lower ‘blinkieAddOn’; essentially swap the two layers. This will swap the color of the blinkie bit layers

Click ‘File>Export As>PNG>Save’ to save the second frame of your blinkie gif. You now have two PNGs saved

Now change websites over to Ezgif

Click ‘Gif Maker’, then “Browse’ to select both images you’ve downloaded. Scroll down a bit and click the blue ‘Upload Files!’ button

Click the blue ‘Make a Gif’ button and see your brand new blinkie! Feel free to resize to 150x20 pixels as well (the average blinkie size vs 730x99 which is more of a tumblr post sized banner)