#graphics tutorial

1- Make your graphic and find a gif

This is pretty self explanatory, you need to create the graphic while keeping in mind that you're going to have a gif in it, you can visualize it by putting your gif as if it was an image and then deleting some parts to make space for it. Keep in mind that when you're doing this the graphic will be on top of the gif, so you can still put things over it, once you're done save it as it is. For the gifs I usually just go to Pinterest, but you can get them from pretty much any image site!

# Tip: the way I make space for my gif is by adding it to my graphics, pressing the three dots and then "select opacity" and finally "clean layer" on the parts that I don't want (my version is in Spanish but you get the idea), I don't do this on the texts or the things on top so it has a little more pizzazz

2- Export the gif to Capcut

Press on "create a new project" in Capcut and use the graphic you made as a base (you shouldn't change it as it will mess up the placement), once you're there the gif over it and position it as best as you can (use the superposition option for this)

# Tip: if your graphic is transparent in some places then try to make it as fit as possible, or else it will show!!

Once you're there add another image on top, this one has to be flat colored and a color that isn't on the gif or is even close to a color inside the gif (in this case since the gif is green I had to use a pastel pink), then export it (the quality doesn't matter, but I'd recommend 480 or 720, exporting it as anything bigger is kind of just a bother XP

3- Go to ezgif and export your video

Once you're on ezgif go to "video to gif" and select your video, then "convert video to gif", once there go to the "more tools" option and click on "remove background", the first thing you'll see is a "replace background color with transparency" section.

That's where you have to put the HEX code of the color you choosed for the background of your gif, then press the check ✅ on the same place where you put the hex code

# Tip: ibispaint x has an option to show you the HEX code of your colors! Color drop the color you used and go to the color wheel, you can copy paste the code

3.5- Resize the gif

Go to the Resize option and use the same size as your graphic! You can do this by looking at your graphic on ibispaint x and pressing the ⓘ button, make sure they're the same height and width as the graphic!

4- Put the graphic as an overlay

Now that you have the gif part done, go to the "more tools" option again and click on "add overlay / watermark" and select your graphic, adjust if needed and click the "generate image" button, then you're done! Download the gif and enjoy your graphic <3

1. BASIC APPS AND WEBSITES

apps, my one and only — ibis paint x

so good give me 15 of it right now. is useful for everything and i swear by it.

the only downside it has is that i cannot use it on my laptop.

alternatively, canva is also OK! laptop friendly, but i might be biased because it doesn’t allow as much control and freedom as ibis does.

next — remove.bg for making pngs.

and that’s all we need!

2. MY CREATIVE PROCESS

good graphics are easy but great graphics lowk rare so js tone down ur expectations ok? im gonna start this off by simplifying ibis as much as possible and treating YOU like a full on beginnnerer N im also bad at spelling pls excuse thx

if u alr know the basics this might be boring.

using the sweetest reverie poster for reference OK

first things first decide on a color scheme!!! it helps sm and will let you make your bunch of things into one cohesive and lookable peice of work ok????

it doesnt even hv to b anything fancy. color scheme for tsr was literally blues & thats it. it does play a bigger role if ur vision has more than one main color in it.

step 2 is go get ur things.

let's dissect this banner thing orwhatever that is. heh. see if u can spot what is where

+ some text thats it. everything is from pinterest!!

my tip?? make a board on pinterest w ur vision of what it's supposed to look like. not the graphic but the story or wtv, get a nice n good vibe of it.

i have a tsr pinterest board to get me the overall vibe of that story, and i expanded from there

tsr is very summery, ocean-y, sea-y, crabby-y etc so i was litr js looking up shit like enoshima (the place tht inspired tsr), blue pngs, summer pngs, ocean pngs, etc bec then again, more vibes, more ideas and hopefully some inspiration.

ALSO!! now's the time to use ur color scheme!!! e.g. i looked up blue png a lot which helped, also it keeps it looking intentional and idk more put tgt.

if u see, there's 2 green things in there & also nanami is looking yellow af but dw!! thhe green things kinda break apart the monotone & yellow kento is easily fixable.

so dont be too afraid to step out of the color scheme, use it as a guide not like, law

dimensions. - now, for tumblr in general, i wld say keep ur banners a respectable height. about 3800x1200 is my preference

the tsr banner is 2810x1470. it's bigger than what i would go for, but i was confident enough in it's catchiness so i took the risk

ppl tend to scroll away/not read ur thing if the graphic is too big and also not catchy enough so try to keep it smaller, if possible, but!!! ultimately you do yoo, ok? dont conform and cave in bbg

get ur ass to remove.bg & make pngs of everything you frolicked and picked from pinterest ok?

get EVERYTHING, not just what you think will need. it will alllow a lot more creative freedom trust meeee

i had like 20 other pngs who couldve been on the banner but didnt make the cut

now, create ur canvas -

js click on the '+' enter ur dimensions(use the above ones for reference) or choose a premade one

now you have a blank canvas and the world is ur oyster!!! yippie!!!!

firstly, my way of doing ts is picking a subject.

tsr suject - kento nanami. but it doesnt have to be a person or object, it can also be the text.

ok? doesnt have to be center, any alignment is ok. also!! you can akways, always change it later.

remb we r keeping our expectations, stress and cortisol low af

ugh im so sleepy

now add in your elements. i.e. the img you got off pinterest & turned into pngs

this depends on ur creativity now, essentially. it's also a practised skill so dont give up if it doesnt look amazing on the first try.

my personal tips are uhh, add in the bigger props first.

refer to the dissected banner img upwards, there are 2 photos, right? also, the biggest elements out of everything.

so my first priority would be to just place and situate them. my thought process is -> kento (subject) -> other elements (supporting props), so both the photos will kinda emerge (?) from kento.

it like, 60% done now🔥🔥🔥🔥🔥

now add in everything else. take ur time to find what feels 'right' to you. ask urself if u saw this in the wild, would it catch ur eye or make it sore

something that might help if ur struggling here is looking at other graphics for inspo!!! i have a board of my liked posters/graphics but make one yourself so you can constomise it to your style.

make sure ur only taking inspiration and not copying !!!!!!!!!!!!!!!!

like this tsr banner was inspired by this poster but u literally cannot tell

i couldve stopped here but then i added the green fan & lily and i think that subtly ehanced focus on kento more. it's just busy enough now, yk? totally could differ on everyone's opinions but as long as u like what u made!!

now the fixing partttttt

cohesion -

kento is still piss yellow. what now.

ok so! here's what ->

hold and pick out a color from one of ur elements. i picked blue so it'll help more in blending.

find and click on the layer that your subject is on. THEN click the add button. now, click on the new layer.

open the brush setting -> find felt tip pen (hard)

MAKE SURE YOU COLOR THE NEW BLANK LAYER. MAKE SURE OF IT.

NOW!!! click on that arrow thing

it will look like this.

if it doesnt, go back and repeat everything again. if it still doesnt, text me 😭😭😭😭😭😭

now adjust.

soft light/screen/overlay works best w it but u pick!!! explore!!

here we are --

u can absolutely stop here!!! add in text and you're good to go!!! but js for comparision -

this is what the final product looks like. so there's a liiiitle more we can do.

come now, see. first, my child, observe.

eye of an artist or wtv. it's a learned skill.

subject (kento) & main supporting elements (the photos) both have a shadow behind them.

here's a quick tutorial.

select the layer you want to shadow. click on the circled thing

click duplicate layer -> select the bottom layer now

turn on alpha lock (the circled button). make sure ur on the right layer!!! (the bottom one)

pick the color u want for ur shadow from the middle box in the bottom

now you will run your brush around the canvas. you wont see any changes & that's ok!

if you did everything right, it'll look like this!!.

now click on move layer (circled button) and adjust it.

repeat it with whatever u want shadows for!!! adjust the transparent, color, whatever

now typography

im gonna be honest it's such a big ass topic and so much to explore in there like nghhhh my beloved i LOVEE typography so much1!!!!

back when i used to do this on a semi-professional level, i used Pixellab geneuinly goated 10/10, dont reccomend if youre just starting out, it will feel overhyped and confusing.

but, if you want to make things easier for urself, get phonto, get ur preffered font from Dafont, write ur text, make a png of it from remove.bg & add it to ur ibis canvas !!!! it's the most beginner friendly method i can think of

adding text in ibis is not as beginner friendly but i'll still show you.

start by selecting ts - click on the canvas for the 'add text' popup

add in ur text & make adjustments

now, save that layer as a 'transparent png'

now, click on the eye, hide that layer.

you will upload the 'transparent png' of that text

NOW u can turn on alpha lock (the lock button with greek letter alpha/a symbol on it), color your text what you want & ajdust it's position!! i have run out of images i can add so you're on your own now.

i've tried to squeeze in as much as i could so i REALLY hope this was at least a little helpful 😭😭😭

if you want, i can make a tutorial post for detailed typography, expanding more on ibis freatures, how i made my intro post banner etc etc

but this was the very foundations of my graphic making shtick !!!!! hopefully it was comprehensive

love u & dont hesitate to text me if you're stuck and need help.

here's the time lapse of me making this banner & here's the timelapse of my typography. i used clipping tool to add in the texture!!

This is about the size I like to have them. You can save this template as a separate canvas so you’ll always have a blank!

❀ Step Two ❀

Make some text to put in your userbox! This is the font website I like to use:

Remember to be mindful of line length, as the text needs to fit comfortably in the userbox!

Example text:

The website will try to make you pay or sign in to download the text but you can literally just screenshot it and isolate the text on your own either with a background remover or the selection tool on your program lolol don’t give them any money

❀ Step Three ❀

Find the image you want to use! Be mindful of the size of the image and maybe consider cropping it to just the most important part, as putting it in a small canvas can seriously knock down the quality.

For the purpose of this demonstration, I’ll be using this image:

I’m then going to take this image, put it in the canvas, and turn it into a clipping mask over the square of the userbox.

I usually merge these layers to reduce cluttering but it doesn’t really matter.

❀ Step Four ❀

Color fill the text box and background! This is pretty simple, I just usually try to pick colors that not only match the image but contrast enough for the text to be easily readable, as I like the text and background color to be the same.

❀ Step Five ❀

Add the text! I usually color it by just alpha locking and then filling the layer.

Make sure it’s centered in the text box; I suggest turning on snapping in your program if possible to ensure this!

And you’re done! Congratulations, you just made a userbox!

Hopefully this is helpful, feel free to ask me any questions and thank you for reading!!

This tutorial is for Procreate only. This might work for other things but idk I only use procreate

^ everything you need is in there

Import the blinkie psd to Procreate.

2. Open Procreate. Open the blinkie.

3. Turn on animation assist. This can be done by pressing the wrench, then pressing “canvas” and flipping the switch labeled animation assist.

4. I have no idea how the text will react if you don’t have the font downloaded. You can either download the font linked or use the pixel brush linked to write your own letters. If you need tutorials on either of those things, here’s a font tutorial and here’s a brush tutorial. You might need to move the text up so it shows up on screen.

5. Time to change the colors! You can use color fill, I trust you to be able to change the border and background. For the dashes it’s a bit harder, however. First, make a new layer on top of dashes 1 in frame 1, then use the color fill to fill the entire layer with the color you want. Then, press on the layer and press “Clipping Mask”.

Nice n easy, right?

6. Then do the same on frame 2, except clip the color you used to dashes 2. This is how you get the blinking effect!

7. For your second color, just do the same, except clip it to dashes 2 in frame one and dashes 1 in frame 2.

8. When exporting, export as “animated gif”. If you don’t like how fast it’s going, turn down the frame rate. Also turn off dithering (unless you prefer it idk)

And there you go! That’s how you make a blinkie in Procreate.

You can customize this to your liking. For example, you can hide the border layer to make a solid color, hide the background layer and activate background2 layer to make the border transparent, and more!

If you have any questions feel free to ask, I don’t bite. I did this at like 3 am so this may be incoherent

credits:

blinkie base: Blinkie cafe

font: EXEPixelPerfect

pixel brush: me

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!