#graphic and gif tutorials

[graphic--horde]

How do you make your stamps? :0

Disclaimer: this is an obscenely long explanation, with pictures. Efficiency is stupid

So, for the static ones, I make a 99x56 px file on ibis paint x. Other programs are probably available online but I don't use them.

After that, I either upload an image I want to make into a stamp, or I draw one.

Then, I find a frame I want to use. Ill upload them here but let it be known I stole all of these right from deviantart

Most of them are from Lil-Devil-Melii on deviantart. The rest i have no idea. They're not all 99x56px but you can crop the canvas it's fine

Make sure to erase the edges of the picture , so they're transparent. It's not as cute otherwise

Upload those frames over your image in whatever art program you're using and viola, stamp.

For moving ones, it's a lot harder. Mostly because I refuse to download Photoshop.

There are a couple ways to do this. Some are simple animations, like with flashing text and whatnot. For these, you download the individual animation frames from your art program. Make sure it's transparent.

Then, upload each frame to ezgif.com under the option "GIF maker." You can play around with how fast each frame goes and whatnot but in the end, it'll be a stamp with some rad text that moves. This is easy, and doesn't make me want to shit my pants and cry. If you're new, do this. This is fun. This is good. This does not kill me inside

I made that↓ stamp with this method :)

this next one is how we turn gifs into stamps. This one makes me sad. It involves math and sucks. But we gotta do it. For the vibe

First, grab your gif. I'm using this cow gif because it's awesome

Then, I resize it using ezgif. Literally everything for this will be using ezgif. I am a simple man

At this point you should decide what frame to use. I'm using this one because its the first one I clicked

Figured out what size the inside of the frame is. That's what I resize the gif to, so the edges can be transparent. The inside of this one is 93x50 px, so those are the dimensions I'm making the gif.

Figure it out by putting the frame into ibis paint and realizing the canvas to fit just the inside of the frame, then seeing what the dimensions are. But there could be easier ways

Woah it's so small now

Then, still on ezgif, I go to the "crop" option.

Make sureeee to upload the smaller gif

press the button that says "extend canvas size", and then put the "width" and "height" as the dimensions for your FRAME. This'll put a bit of a transparent border around the gif. For this frame, I did 99px and 56px.

The "left" and "top" boxes show how many pixels the cropping happens from the edges of the canvas. The formula for finding that is

(width of gif / 2) - (difference between gif width and frame width / 2) = left box

For me it's (93 / 2) - (6 / 2) = 43.5

Then you do the same.for the height, which for me ends up being 22 from the top

This is reallyyy touchy and annoying though

Here's my result , with no visible difference

Okay so THEN you go to the "overlay" option, under "effects." And upload your frame. If the cropping was done right, you shouldn't have to move the frame at all and can just download it

Here's my result:

if you don't care about transparency, you can resize your gif to be the same size as the frame, and then put the frame over it. But I'm a slut for transparency

Anyways. I'm sorry if anything was unclear, it's two am. And I hope this was helpful :) these really are fun to make once you get it down

also if anyone has an easier way to make stamps from gifs, please god tell me

[neosprites]

Digital Stamp Making Tutorial

Hello, and welcome to the long-awaited(at least on my part) digital stamp-making tutorial from neosprites! I’d like to preface that I learned what I was doing from this tutorial so it may be a bit redundant, but if anything I get a bit more specific. Thank you so much to @graphic--horde for your work, it changed me as a graphic maker. This is gunna be a long post so feel free to bookmark it for later. Now, onto the show!

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)

If you’d like to tag me in stamps you’ve made using my tutorial I would love to see them, but it’s not required!! Make sure to always give credit for pictures/gifs when you can and try not to make stuff out of personal/fan art. Thank you to the person in my inbox who requested this tutorial, I had been meaning to for a while but it was just the kick I needed. :)

[dollywons]

For any tutorials I do on how I make my dividers, banners, etc! :>

1. Animated Christmas Dividers

1． 𝘈𝘯𝘪𝘮𝘢𝘵𝘦𝘥 𝘉𝘢𝘯𝘯𝘦𝘳 𝘎𝘪𝘧

𝘕𝘰𝘵𝘩𝘪𝘯𝘨 𝘺𝘦𝘵．．．

1． 𝘞𝘩𝘢𝘵 𝘐 𝘜𝘴𝘦 𝘛𝘰 𝘔𝘢𝘬𝘦 𝘎𝘪𝘧𝘴

𝘌𝘻𝘎𝘪𝘧！ 𝘐𝘵’𝘴 𝘢 𝘸𝘦𝘣𝘴𝘪𝘵𝘦， 𝘯𝘰𝘵 𝘢𝘯 𝘢𝘱𝘱 ：）♡︎

2． 𝘞𝘩𝘢𝘵 𝘐 𝘜𝘴𝘦 𝘛𝘰 𝘔𝘢𝘬𝘦 𝘋𝘪𝘷𝘪𝘥𝘦𝘳𝘴

𝘗𝘪𝘤𝘴𝘈𝘳𝘵 ! I have the pro version

𝘔𝘰𝘳𝘦 𝘴𝘰𝘰𝘯．．．

[luigraphics]

How to have animated rentry graphics with semi-transparency!!

Have you ever had this problem? You find this super pretty clipping mask that you wanna use...

...But when you try to save it as a gif, it suddenly breaks the pretty blurring?

So, let's talk about APNG:

APNG (Animated PNG) is exactly what it sounds like: a png that can be animated, with all the benefits of our beloved png format!! Such as unlimited colours!! Bet you didn't know this could be done!

Actually, you probably didn't know that for a good reason: APNG does not work everywhere. For example, I&'m not using it in this post because the animation won't work on Tumblr. It also doesn't work on old browsers, which you can check here if yours supports it or not:

However, even if the animation doesn't work, it will show the first frame as a still image!! So even those on older devices will still get to enjoy the graphic!!! (unless like... you want to do a fade-into-existence animation where the first frame will have nothing... but those are uncommon anyway)

But for this post, what's important is where it DOES work, and that is image hosting websites like imgur or catbox. And so, by extension, it will also work on Rentry + its forks!!

So how does one actually make an APNG?

Ezgif:

Note: DO NOT CONVERT GIFS TO APNG! It's useless because the gif file does not store any information about transparency, has less colours/lower quality, and you'll be needlessly removing backwards compatibility.

Go to APNG Maker and upload your frames individually. Check "don't stack frames" and make your APNG.

Photopea:

Works normally same as if you would save a gif. File -> Export as -> PNG. (You do need to have the frames layers in a folder same as you would for a gif)

Photoshop and Ibis Paint:

Unfortunately, Photoshop and Ibis do not let you just export as an APNG like that. You'll have to save each frame individually and then import them into Ezgif or Photopea.

As you can see, it's that simple! If you'd like, you can see a rentry template I& made using this the example APNG I& was showing throughout the tutorial here. I& was not able to find who made the overlay mask in the first place but a frame version of the cherry blossoms there did show up on adobe stock when I& tried to reverse search it so all they did was fill in a circle in the middle anyway.

Lastly, I& wanted to address one more question:

Why not use WEBP and/or AVIF instead? They offer the same benefits!

Well for one, fuck Google and fuck WEBP all my& homies hate WEBP. But for two, APNG has the benefit of backward compatibility: it's older (supported by more browser versions) and if the animation doesn't work, it still shows the first frame of it. WEBP and AVIF, on the other hand, don't show up at all/show alt text.

That's all, happy APNGing!

[drblacula]

This isn't a request I've just been having trouble figuring something out, how do you do your rentry/graphics mainly the gifs? I really wanna learn!

:3c < hey ! I learned how to clip gifs in my graphics so I can finally give this tutorial :

end result :

this can apply to any mask !! if you have any questions please contact me at any time !

[unknown-till]

if its alright how did you make the status boxes? i.e. in your gyaru/gyaruo post >_<

Hiya!! My BF created the IMVU status boxes / buttons from that post so he made a tutorial detailing how to make them as well!

📖Programs/sites used ☆ Clip studio paint & ezgif (I use ibispaint to make shiny buttons and the process is the same).

⭐️This button doesn’t include these but if you want to have a symbol (like the star from the gyaru buttons) at the front of yours, find an imvu status button (one from the game to use as a base) that includes the symbol you want and in the backgrounds layer recolor it along with the background so they are the same color.

Here’s the finished button from the video with a few alternate color schemes if anyone would like to use them!

I hope this helps & let me know if you have any questions! ♪

[brokenbard]

Hiiii!! How do you make your pixels bounce? I’m using Ibispaint and Ezgif ^_^

if you mean like this

i use alight motion (auto-shake & sway effect)

i use alight for all of my my complicated pixels like these, also i do not have pro ! i just crop the watermark out in ezgif

[frostghost]

pokedoll 60x60 pixels. f2u no credit needed 👍👍👍

[mxbo]

I couldn't fit the tutorial on a reply lmao, here's a full post explaining my process :]]

STAMP TUTORIAL (TF2 edition, but works for everything)

99% of the process is done on the website ezgif. Ezgif carries the stamp-making process lmao

1. Get your GIF

Tenor: Ok place to grab your GIFs. Average quality of the GIFs is good enough, and looks ok when resized to the size of the stamp. You'll find like 1 normal GIF every 4 buff characters GIF tho.

GIPHY: Average quality of the GIF is better (I don't think the web compresses the GIFs that are uploaded)… If you find what you're looking for. You'll have to SCROLL before finding what you're looking for because there are always non-related GIFs on the top of your searches or the same GIF multiple times, it's crazy.

makeagif: You will find cool GIFs, but the quality is pretty low (I think the web itself compresses the GIFs a lot). It looks bad even when resized down. And it has a watermark, which I recommend cropping because it's not even visible when resized, it just looks like a gray blob on the corner.

Google: Best option by far, quality is pretty good and the ratio of “things I was looking for/things I actually find” is SLIGHTLY in favor of “things I was looking for” (and most of “things I actually find” are just the characters rotating, not NSFW, so that's only a nice change from Tenor). You won't have to scroll much to see different and interesting GIFs. JUST REMEMBER TO FILTER BY GIFS.

You search whatever > Images > Tools > Type > GIF

Make it on your own: Aka, you download your video, go to ezgif's “Video to GIF” (then you can crop it, CUT IT. THIS IS IMPORTANT, YOU DON'T NEED TO GO ANYWHERE ELSE TO CUT YOUR CLIP, YOU CAN DO IT ON EZGIF ITSELF). Ok, I lied, it wasn't Google, this is the best oftion by far. You get exactly what you want, the best quality if you don't compress it much until after the GIF has been resized into the size of a stamp… It's just super time-consuming, and you'll have to spend like an entire hour just watching a video to find the clips.

OK, I HAVE MY GIF NOW

Hehe, his legs go pipupipu

2. Resize

Go to ezgif, this is where the fun begins (if you weren't on ezgif already). You download your GIF, or copy the link and insert it, or you'll have it there if you made it yourself.

A STAMP MAKES 99px × 56px

THE INNER PART OF THE STAMP MAKES 91px × 47px

I RECOMMEND MAKING YOUR GIF 92px × 48px

BTW, THESE MEASURES ARE FOR THE TEMPLATE I'LL GIVE YOU LATER. If you use another template, just go to an image editor and see what the inner size of the stamp is.

So, you set your GIF's width to 92px.

Then crop it, so your height is 48px.

Or you can resize it so it's directly 92px × 48px, but the crop will be in the center, and SOMETIMES YOU DON'T WANT THAT.

For example:

It's a vertical GIF whose area of interest is not in the center, so if we resize it directly-

oops-

ANYWAY

Once you have your GIF resized:

IMPORTANT: BEFORE THE NEXT STEP, REMEMBER TO CONVERT TO GIF IF THE FILE YOU'RE WORKING ON ISN'T A GIF ALREADY

Sometimes you'll be working with a webp without even noticing (EW, I hate webp) and transparencies don't work particularly well with that extension.

3. Overlay

Click on this icon.

Ok, now that that's fixed:

Extend the size of the canvas.

Select your template and Upload image!

This is the template, btw.

Then move the overlay around until it contains the GIF nicely, or just set Left to 43, Top to 20 and Generate image! (I have these numbers memorized, it saves you like 20 seconds lmao)

Also, again, these numbers work on MY template, if you use another one, you'll have to figure it out yourself.

4. Crop

THIS OPTION IS A TIME-SAVER FR

5. Optimize (optional, highly recommend)

I always set my optimization method to Lossy GIF and level 10 because I find that there is no quality loss, and the file size might drop by 30%-70% (actually crazy). These percentages don't change much in higher compressions, even though you'll start seeing a drop in quality around level 35 of compression (the default).

6. Save

YIPPE!!! Your stamp is done :D

You can save it and look at it and place it on your profile or website.

Here it is btw, in case someone wanted it :]] The Sniper GIF but correctly cropped and made into a stamp as well.

Now do that another… eleven times, and you'll have a stamp pack to make into a Tumblr post... Oof TT

There's no website that lets you make stamps faster lmao (I wish)

@sir-broken-bones (I'm @ them so they actually see it, I made this tutorial for them after all lol)

[artmanoil]

Lil tutorial for how to draw flames!

[seraphmaws]

hi ^-^! Can you do a tutorial on how to make this icon? I would like to learn :3

https://64.media.tumblr.com/64eb5472b1d49fc941ccefbae558846e/cb2b70c34ebba0a7-b4/s1280x1920/d9e44a125324b309a533a1e56be842355046d740.gifv

Hello! I apologize in advance for my poor explanation skills, and also for how convoluted this process can get 😭 But I saw this as a worthy challenge, so here’s how you too can make a gif icon where the character comes out of the frame like this and this:

This is going to be very long so the full tutorial is under this cut!

Programs I use: IbisPaintX and Procreate*

*full disclosure, procreate is exclusively for iPad and costs 10 USD. however every thing I do in procreate you should also be able to do in Photopea

1. First things first, after finding the gif you’ll want to use, you’ll need to download each individual frame. By importing it into either procreate, photopea, or any program that’ll allow you to view individual frames, you’ll be able to save each frame

A note about gifs: The best gifs to use are ones with less frames due to the fact you’ll be editing the individual frames. Not to say you can’t use gifs with higher frame counts, however it is much more time consuming the more frames there are

2. Next you’ll have to remove the background from each frame. You can remove the background by hand, but I like to use this website to help make things a bit easier. Just pop your frames into it and download each one

It is unfortunately not always accurate and often misses things on images where the background isn’t clearly defined or is lower quality, and you most definitely will have to do touch ups on your frames For example here, for some reason, the first two frames (on the left) were left with a semi transparent gray background and in the image in the middle, you can see sizable areas where the website missed. And also as of recently there as been practically invisible dots it leaves where the background once was that stroke filter picks up some how. You’ll need to hit each frame with the magic wand tool or similar to remove these dots if you plan on adding strokes

3. Now add all your frames into your program and stick them in a folder. Then, reposition the frames on top of the image mask you are using (in ibis, make sure all frames are visible and select the folder before repositioning the frames, in other programs, you should just be able to select multiple layers and move them that way). Once you’ve repositioned them, duplicate the folder then select clipping on the bottom folder like shown in the right image (I know I forgot to duplicate the folder then 💀)

4. Now here’s where the tedious stuff comes in. Make sure you number your frames, because it’ll help you out a lot. In the top folder, erase the bottom part of your gif that you want to be in the frame (I’ll call this the clipping layer) but keep the top where you want to be coming out of the frame intact (this’ll be the overlapping layer). Repeat this process for all of the frames

Note: Try to use a simple shaped frame for these kinds of icons. However, if you choose to use something with a more complex shape, be weary of where you erase! You will need to be more precise with shapes like these depending on where you want things to go

And if you haven’t edited the frame itself, you should do so now

5.5. After that, you can leave things off there and skip this step if that’s what you’re going for! However, if you want to add things like strokes, it’ll get a lil more complicated

Firstly, I duplicate my clipping layer and then select stroke (both). You can also use stoke (outer) or whatever your program has, but this is my personal preference. I then duplicate that layer and keep applying stroke till I get what I want (if you use stroke (outer) duplicating your layer isn’t necessary). I think merge my stroke layers together, but I keep it separate from my main frame

That way I can duplicate my stroke layer and add it to my overlapping layer. Then I erase the unnecessary parts shown on the left. You may need to clean up the stroke on certain frames or reapply it depending on the position of things and what you’ve erased and what not. It takes a lot of trial and error. You can also apply the stroke before you make your overlapping layers, however when I was making this graphic I fucked it up in the process of making this tut and had to remake it so that’s what I did the second time around 💀 if you were wondering why I didn’t just do that in the first place, now you know

6. Now it’s time to export your layers as a psd and import it into procreate/photopea! You’ll now have to merge your clipping layer into your image mask then merge your overlapping layer on top of it to create one layer. Repeat this for all the frames and you’ll be finished!

Tada! Now you can add filters and whatever else if so desired. And that’s my process for making these kinds of graphics! There’s definitely an easier way of doing this but that’s just what I’ve got figured out for now. Don’t hesitate to ask any questions for the things that make zero sense lol

[kitchenwizardkisser7]

Blocktales stamps :0

I have more of these I need 2 make

[visualallocution]

MY BLINKIE TUTORIAL !!! :D in this video i show you step by step how i make my blinkies! if you want, i could make a tutorial for making stamps as well! please tell me if you found any parts confusing!! it was hard trying to describe everything and make it make sense. hope this helps !!! :]

(here's the result btw :P )

[togamicchi]

PLEASE GIVE A TUT ON HOW TO MAKE PIXELS I AM BEGGING YOU

HKEGDUSHDGDGD okay this is gonna probably be really overexplained since i talk a lot BUT ITS VERY EASY tuto under cut

What i personally do is start on picsart with a blank canvas (make sure its a perfect square, anything like 700x700, 400x400 whatever), What i do is use some of the cute stickers i can find by using certain search terms and rotate/move it to each frame id want it to be, picsart lets u see where its centered or not so its a lot easier than just winging it

this would be so much easier to explain if picsart allowed me to take screenshots on this DAMN PHONE!

But anyway save each frame to whatever ur using and go to Ezgif.com's gif maker to combine those frames together :3 theres a delay option on the bottom of each frame u saved, i usually set that from around 50-80 so it doesnt go too fast

Once u set that and u have ur frames in order, remember to set THIS option

And then u click "make gif" at the bottom and horray :3 u can still edit things on the page if u might not like it

Once u get the finishing gif, u can save it as the original size (if youd like to have an extra), and go to Resize at the bottom

U should get to this, what i do is make the width and length 60x60 or 80x80 but it doesnt really matter tbh, if u want it bigger or smaller then go ahead

Disregard everything else after that and click Resize image :D and boom we did it

Both original and teeny size IF I DIDNT MAKE SENSE THATS TOTALLY MY BAD but i hope this helps😅😅😅 maybe..

[dollicacy]

Hello I know that this rentry is not yours but I wanted to ask you how to make that chibi character thingy move like that (tell me if u understood😭) i tried looking through the internet on how to make rentry graphics or rentry gifs but there's no tuts or anything, I'd so appreciated if you helped me and thank you

sorry for the late reply, i forgot about this ask </3 @bat9litc

ok so first ur gonna download a transparent png of the image u want and make sure u download it twice

2. then make sure to rotate one of them however u want

3. then go on https://ezgif.com/maker and upload ur images (hold shift to select both) and hit upload

4. then select ur wanted delay time for this gif i selected 30 and make sure to check the "dont stack frames" box then click on "make a gif"

5. k n there u have it :3

btw mine looks weird bc the image was too small so i couldnt rotate properly anyways hope this helped! and again sorry for the delayed reply

im p sure u already learned how to do it by now but i still decided to post this incase u didnt and maybe someone else wants to learn :')

[elysiansugar]

hi !!! with your gifs, theres also video with the rentry-like mask/frame, please can i get a tut ?? i love your graphics sooooo CUTE !!! ٩( 'ω' )و keep up the good work !!

Of course !!!! If I said no, you can throw bricks at my window

And thank you for the compliment anon (❁´◡`❁)

Anyways HERE WE GO---

Before we begin, I would like to let you know that I'm using Photopea for all of the edits that have gifs in them. It's free and you can use it on your device's browser. [ Better to use on a big screen, less of a hassle to work ]

For my example I will be using this random frame I found on Google and a gif of Blind Obsession Ishmael !

But, you can use this tutorial for any Rentry frame or gif of your choosing. [ Though, if both are squared shape then it'll be a lot easier because you just put the gif under the frame with some resizing ]

Import them into Photopea in different canvases

Go to the canvas where your gif is and then click on layer at the top and then ' Duplicate into '

A pop will appear and then click on ' Destination ' and select the one where your frame is [ for me it's New Project.psd, I was too lazy to name it LMAO ]

Boom ! There's Ishy with all her frames in a nice folder :D

Now, if your gif is like mine where it's too small or too big, use the transformation tool to fit and arrange ! [ Edit > Free Transform ]

Now, click on the layer the frame is on, and then select the wand tool on the side. Then click on the area where you want your gif to show up

Click on the folder where it has the frames of your gif, then click on 'Layer' at the very top, go down to ' Raster Mask ' and click on ' Reveal Selection '

Boom ! Here is Ishy in her little frame :3

To save it, go to ' File ' at the top then down to ' Export as ' and choose GIF

And all done !

I hope this helps anon ! If you have any question, then please do not hesitate to ask me, I'm always happy to help ^-^