#Graphic Tutorial
Explore tagged Tumblr posts
Text
the ultimate beginner metadata tutorial !! by a dummy :3
HEY PALS AND PEOPLE doing some tips and tutorials ,,,, kinda explaining the metadata that people do in rentry
the site already have a "tutorial" on the "how" window, these on the post are the ones who need further explanation
i will put in topics and try to do my best on this, its a long read!
• the border i will be using for example its by @/suturical on this post
• now, how to understand this and make the magic happen?
GOTCHA!!!
1. Borders: container adjustements
• the least important thing is the container width, you can put as you please but i use it on 400px — 610px, its just my recommendation
• now the padding is important, its basically the distance between the border and the elements of your rentry
• example: padding on 25px
• example: padding 20px
2. Borders: slice
• the image slice is basically how much it will slice your border and repeat it, i recommend using it 20% – 40%, however adjust as you please!
• example: slice 37%
• example: slice 23%
big difference isnt it? and i only changed the slice part, nothing else!
3. Borders: width
• basically the width of the border, adjust as you please but i also recommend to put on 30px as its the maximum size you can put
• example: width 30px
• example: 15px width
4. Borders: repeat
• this is another thing that dont have much secret and explanation about, there are 4 repeating types for borders, they are:
• stretch: will stretch the original size of the border across the entire container
• round: most used, 'normal', will make your border get around the container
• repeat: will repeat a certain part of the graphic image across the sides
• space: will give space between the repetitions
• onto the next part, text!
2. Text: font applying
• ngl its pretty simple, first catch ANY font of the google fonts site and do like the screenshot above, detail, if you font name has a space between the name (example: playfair display) you MUST put the _ to substitute the space, or it won't work
• but if the font name doesn't have any spaces, write it normally
2. Text: text size
• also really simple, explore the sizes on the rentry, i use it 10px – 25px, adjust to your liking!
2. Text: coloring
• tired of coloring all sentences manually? just do the code from screenshot and input your color! it can be written like i did or the hex code/whatever!
• you can still color things manually even when using this
• final with all these changes:
SO THATS IT! the most important actually :33
hope it isnt confusing, any questions please send an ask!
tagging oomfie @chokingonchairs bc finally got the courage to make this and yu asked for hehe ^___^
THANKS FOR READING!
#ᛝ the messy little angel ꒱ .#rentry tutorial#tutorial#rentry#rentry decor#rentry graphics#graphics tips#graphic tutorial#icon pack#icons#random headers#twitter icons#headers#icon#random icons#twitter header pack#twitter headers
221 notes
·
View notes
Text
*✶ please please please
a template ��by cozysip.
by clicking in the source link you’ll find 02 different dash icon templates made by me from scratch. credit is not needed , but do not claim as your own ! if you enjoy this or you use it, please reblog or like this post . thank you !
#01. PSD TEMPLATES : mine.#template#free template#rp template#psd template#free psd#dash icon#dash icons#dash icons template#icon template#icon psd#psd#rpc#rph#graphic tutorial#free graphics
239 notes
·
View notes
Text
Hello and welcome to "Icon Making With Killian: An Intro to the 'Lost' Art of LiveJournal Icons"
aka, I'm still making them and I'd like to teach you how to do it, too!
This tutorial was written in Photoshop 2020, but you can probably recreate it in as far back as CS2-ish (since I still use the same sort of techniques I've been using since then, lmao). It also assumes basic understanding of the software, though I've tried to be as clear as possible throughout.
With that out of the way, let's get this tutorial on the road!!!!!!
I started with the bloomed art of Hiiro from the White Lilies scout box (image courtesy of the Ensemble Stars!! English Wiki).
I basically always start with a blank 100x100 canvas and paste the image into it. I try to go into icon making with a vague idea of what I want to do, and I knew from the beginning that my vision for this icon would have the top 1/4-1/3 of the image covered by a solid band of color. To make positioning the image of Hiiro easier, I made a rough version of the band with temporary colors (though they're pretty close to what I ended up using in the end).
With that in place, I could start working with the actual image for the icon. After pasting it in and adjusting the layers so it was under the band, I resized it and moved it around a bunch until I was happy with the position. Once I liked how it looked, I used an Unsharp Mask on the base.
Next up, I used a texture from lookslikerain. However, purple is all wrong for the color scheme I had in mind, so I went to Image > Adjustments > Hue/Saturation... to change it up to better suit my needs. Never be afraid to mess around with textures!
Here's how I adjusted this specific texture, but each one is unique- both the texture and the icon you're creating, so it's best to play with it until you get good results.
I then pasted this into the icon, making sure it was under the layers making up the top bands of color (because I was only trying to affect the base for now), and set this layer to Darken.
Now it's time to mess with the colors of the top band. They sorta matched before I did anything to the base, but now...not quite. I used a layer style for each part of it, but using the paint bucket tool would work just as well. I went to Layer > Layer Styles > Color Overlay... for each, changing the colors as necessary. The thickest band is #85d0bf, the middle band is #086371, and the thinnest, lightest one is #fcfcd8.
Time to start putting stuff on top of everything!! I took this light texture from ianthinae, rotated it, and set it to Lighten. I decided I wanted it to be a little bit brighter, so I duplicated the layer, set it to Screen, and dropped the Opacity to 20%.
I then used a texture from Sarah-Dipity and set it to Lighten as well.
Okay, now that's what I'm talkin' about!!! It's time to throw some text on this~ I went for something simple to go with the theme of the story this card is from: Princely. The font is Georgia, 10pt, in #086371, set to all caps. I decided it didn't stand out enough, so I duplicated it, changed the color to #8b4235, dragged it under the first text layer, and moved it 1 pixel to the right.
I wanted a bit more embellishment around it, so I used this simple tiny text brush from colorfilter in #06444d. I also erased part of it to make it fit the space better.
Finally, I used a texture from shiruji, set to Darken to get a bit more color variation in it, and called it done! :D
If you have any questions, please feel free to ask, and I'll answer as best I can- as long as it's not about making icons in other software D: I only know Photoshop (and Paint Shop Pro, but I don't think anyone uses that anymore). If there are any other icons of mine you're interested in seeing tutorials for - or even just specific techniques! - just lemme know. I love helping :D
Also, I'm happy to share where I get icon resources from. I have a whole post dedicated to that on my DW graphics journal, though tbh that's the best place to talk to me about making graphics in general. But I will absolutely answer asks/replies/etc about icons here on tumblr, don't worry!!!!
#livejournal#icons#icon tutorial#graphics#graphic tutorial#photoshop#LJ icons#100x100 icons#100x100#tutorial#tutorials#reference#what do I even tag this as XD
90 notes
·
View notes
Note
hey balu, do you know how to recolor skin / how a coloring psd works for that? like for a character that's pale and not the shade they should be ( cough cough natlan ) asking bc I want to that but idk how
Hiya, anon! I can explain how I personally do it, but here's a huuuuuuge disclaimer: I'm colourblind, so I heavily rely on colour wheel pointers. Throughout this tutorial, you'll see me constantly comparing where the pointer is and trying to use my somewhat limited knowledge of colour theory. I'm sure other creators have other ways to do this that are much simpler and/or more effective; you should look for and check out other tutorials here on Tumblr, YouTube, or Twitter!
Due to the limited previews of images on Tumblr, you can also open the images on new tabs to see more details.
For religious and political reasons, I will not use a Natlan character as an example. Instead, I'll use Candace (also from Genshin Impact) as our muse. Specifically, I will use her character card art image, which can be found on the Genshin Impact fandom wiki. The image quality is not so great, so that's why we'll see some bleeding pixels here and there. Dealing with those is another tutorial altogether. Also, if you meant an absolutely pale character (with littler to no melanin), that would be another tutorial, too. So, I'll be sticking with these examples and explanations here! This can give you a starting point.
In this tutorial, we will go from this before (left) to this after (right):
Also, I'd like to point out that these steps are for this specific picture/character. Though the same logic can be applied to other characters and images, it's imperative to remember, especially when you're starting your editing adventures, that there is no fool-proof and 100% universal PSD. I'm just explaining the logic behind how a colouring PSD works and some of my mental processes behind it.
Please consider reblogging, liking this post, and/or supporting me on ko-fi if this helped you! That way, I can keep bringing you tutorials like this faster and more effectively. ~
Now, let's begin!
First, we must notice that skin colours (even paler ones) are shade variations of yellows and reds. If we check the hex code colour/colour pointer on the colour wheel, we will see that Candace's skin colour is at the intersection between red and yellow, and is on the lighter/less saturated part.
Here, I am deepening/saturating the blues of her clothes by creating a Hue/Saturation layer, changing from Master > Blues and adjusting the Hue and Saturation values. Colour theory basics: opposing colours on the colour wheels will give a more significant idea of contrast; the bluer colours will appear colder, and the warmer colours will appear hotter and, therefore, more saturated.
In this second step, I am creating a Selective Colour layer, focusing on the Reds. I want this to be highly reddish for now, so I'm lowering the Cyans to the minimum values I can. Notice how the colour wheel pointers went down, meaning we are in a redder, more saturated and more precise zone. The darker the skin, the redder its colours will be in pictures.
Thirdly, I am now creating a Colour Balance layer. Since I want to adjust the warmer colours (e.g., Reds), I am adding more reds, magentas, and yellows.
The exact process I did for Candace's clothes, I'll do for her accessories. Her accessories blended too much with her skin tone (hex code-wise and I imagine that for the normal eye, too). So, to make the yellows on her accessories pop and be more different from her skin, I created yet another Hue/Saturation layer and changed from Master > Yellows, altering the Hues, Saturation and Lightness values.
Now that we have the image's primary colours (blues, reds, yellows) separated, it is time to deepen/saturate the reds. So here, I made another Selective Colour layer, also focusing on the Reds. Notice that now I'm also increasing the Cyan values. Why? Because Cyans make the reds look darker, and I want exactly that. So everything will increase in value.
To further deepen these colours, I created a Curves Layer and tweaked each RGB curve. I made the blues lighter; meanwhile, the greens and reds went darker. Again, colour theory! Notice on the colour wheel that her skin is extremely red and saturated. This is precisely what I want. Why? Well...
... Because now, by using a Selective Colour layer again, I can make her skin magentaish. Pure magentas are rare in pictures, even fantasy/2D characters. Generally, you will find variations of purples, pinks or reds, but magentas are more difficult to find. Therefore, they're easier to work with/edit. Even if the character had magenta colours, we could've isolated them beforehand, too. This step guarantees that my PSD will solely focus on her skin tone, basically.
Our final step is to create another Hue/Saturation layer and change the setting from Master > Magentas. We will decrease the Saturation and Lightness values and slide the Hue bar to the right. And now, check the colour wheel: it's a beautiful dark brown! It's popping a lot against the yellows and blues. ~
This is where we started vs where we finished!
So there you have it! A speedy but hopefully informative tutorial on how colouring PSD works and how you can quickly love your characters a bit more when doing edits and graphics for them!
Again, please consider reblogging, liking this post, and/or supporting me on ko-fi if this helped you! That way, I can keep bringing you tutorials like this faster and more effectively. ~
If you have any questions, please let me know!
#♡: tutorials! *#gfx tutorial#graphics tutorial#graphic tutorial#gfxs tutorial#resources#rolep#ps tutorial#ps tutorials#photoshop#photoshop tutorial#photoshop resources
31 notes
·
View notes
Text
Tutorial: ¿Cómo hacer gifs sin PS y no morir en el intento?
¡Holi! Hoy les traemos este tutorial que creemos que les puede ser muy útil si no tienen photoshop (como una brujita de este coven jaja). Eso sí, se usan al menos tres sitios web o apps distintos, así que sobre aviso no hay engaño.
Usaremos un descargador de videos online (el que sea de tu confianza y preferencia), Canva y Photopea. Otra opción que recomiendo es descargar VideoProc Converter, pero no es necesario para este tutorial.
Yo usaré este video de Timothée Chalamet para hacer este gif:
PASO 1. Primero, debes elegir tu video de donde harás el gif. Recomendamos videos de Youtube o Dailymotion de calidad muy buena (mínimo 720p). El consejo es que veas el video entero para que identifiques los segundos que quieres convertir a gif.
PASO 2. Descarga el video ya sea en línea (una simple búsqueda de "youtube downloader" y listo) o en VideoProc y guárdalo.
PASO 3. Vamos a Canva (si no tienes cuenta, tendrás que registrarte). Das click en "Crea un diseño" y eliges Video. Una vez que se abra tu proyecto, ve a la pestaña "Archivos subidos" > Videos y sube tu video.
PASO 3.1. En este punto podrás cortar la escena que deseas convertir a gif. Recomendamos no pasarse de los 10 segundos o será demasiado pesado.
También puedes agregarle algún filtro o jugar con los colores y tonalidades. El consejo es que intentes equilibrar el tono en caso de que los colores sean muy cálidos o fríos, o sean tipo Twilight con filtro verde, pero nada más. Esto para no saturarlo y que se vea de baja calidad.
En este caso, lo dejaré en 6 segundos y le quitaré el tono azulado.
PASO 4. Una vez que tengas tu clip, da click en "Compartir", luego más abajo en "Descargar" y, por último, en tipo de archivo, elige "GIF". Automáticamente, Canva lo guardará con las medidas 1152 x 648 pixeles. Pero a menos que necesites un gif más grande, esa medida es suficiente. Descarga y guarda tu gif.
PASO 5. Ahora vamos a Photopea, que es lo más cerca que existe a Photoshop. Aquí podrás cortar tu gif a la medida y agregar PSD's, colorings, textos, etc.
Mi gif de Tim de 6 segundos tiene 149 capas (por eso les recomendamos mantenerlo lo más corto posible), así que eliminaré las capas que no tengan demasiado movimiento entre una y otra. Puede ser dejar 1 y eliminar 1, cada 2 o cada 3; depende de qué tanto movimiento haya en la escena.
Decidí dejar 1 capa y eliminar 2, quedando así con 50 capas. También agregué un coloring.
PASO 6. Cuando tengas tu gif como te gusta, das click en Archivo > Exportar como > GIF. Al momento, surgirá una ventana donde podrás jugar con la calidad, la velocidad y el número de repeticiones (por defecto está en repetición infinita y recomiendo dejarlo así). También podrás elegir si quieres que se reproduzca en reversa o tipo boomerang.
En este caso, bajé la velocidad pues al eliminar un tercio de las capas, el gif se reproducía muy rápido para mi gusto.
¡Listo! Tu gif está terminado ✨.
Pero, Coven, ¿por qué no sólo hiciste el gif directamente en Photopea? Ah, excelente pregunta. Quizá no he encontrado la opción, pero me pareció mucho más complicado sin la línea del tiempo como la que tiene PS. Además, no sé si es igual de eficiente la herramienta de Importar videos a capas, así que preferí tomar el camino largo 😅.
Esperamos que este tutorial les sirva. Intentamos que las instrucciones sean simples y claras, pero si les quedan dudas nuestro inbox está abierto.
64 notes
·
View notes
Text
𓆩♡𓆪 transparent png tutorial ˖˚
꒰ step one ꒱ ↳ first, find an image or two on a search engine or pinterest/something like it. if doing images from real life (not art), try to use images that don't have noticeable lighting. for example, product images with white backgrounds are best rather than product images in a real life setting with strange lighting.
꒰ step two ꒱ ↳ either copy and paste the image or download and upload the image into remove.bg. use erase/restore as needed.
꒰ step three ꒱ ↳ you're done! pretty simple, huh? good work \(^_^)/
#carrd graphics#rentry graphics#rentry decor#rentry resources#carrd resources#png#transparent png#pngs#transparent#tutorial#rentry tutorial#graphic tutorial#editing tutorial#transparent png tutorial#transparent tutorial
13 notes
·
View notes
Note
graagagagaghhhh i need a tutorial how you make these !!,,, EATS EVERYTHJG RAAHH!!!
IF U GUYS EVER WANT A TUTORIAL U CAN TELL ME!!! JUST DM ME AND ILL TRY TO EXPLAIN THE BEST I CAN!!!
#Inbox#inbox open#inbox answered#Tutorial#graphic tutorial#banner tutorial#layout tut#Layout tutorial#Tut#— ⟢ pupdial ! ᘏᘏ#rentry graphics#tbhk#kou minamoto#rentry#requests open#— ⟢ talking !!#toilet bound hanako kun#— ♡ requests ) layouts#silly#— 𝜗𝜚 requests ) graphics#Replying
15 notes
·
View notes
Note
how do you make your graphics?
Hii there! It’s very simple. First step I do is just finding photos, I usually just use Pinterest and sometimes sites with pre cut out photos.
Then I use IbisPaint X to actually edit the pngs ect, I use: the lineout effect aka the stroke one and i’ll sometimes add a blur frame to mines if i feel like it needs / looks good with it. (Depending on the photo it might not show up as much) I normally don’t do this for my pixels, but i’m sure it turns out just as good as my larger favicons. 💝🍀
Then for animation I just move around the photo, so if I want it go to small to big I just make it go like this 👇 if I want it tilted I tilt it ect!
To get it to be a actual GIF i use ez gif! And the gif maker option! I have the speed be around 50 and make sure to select the “don’t stack frames” option!
I hope this helps and i’ll answer further questions too. I’ll also get to requests soon! Some personal stuff has come up and it really has my mood down so i haven’t touched pixel making😭😭💦
#tut#tutorial#carrd grahpics#graphic tutorial#cute#deco#Not sure how to tag this one ngl.#Favicon tutorial#Pixel tutorial#𓈒ㅤׂ 🌈 Mine !
6 notes
·
View notes
Text
I need help with getting screencaps so I'm hoping people on tumblr can help. I know there's a method to extract them from a website like the one linked HERE because many years ago I used to do it, but for the life of me I can't remember how to do it, and I really don't want to go through each picture individually to save it onto my computer so I can make icons
So if anyone can help I would be eternally in your debt
4 notes
·
View notes
Text
Follow this easy tutorial to find out how to make this cute gradient speech bubble graphic.
Things you need:
GIMP
Start a new canvas. I'll make mine 540x by 300px.
2. Use the softest round brush and paint in circles of different colors like this. I'd stick to just 3-4 colors max.
3. Go to Filters > Blur > Gaussian Blur and increase the radius by a lot. I think 250px is good enough for the size of my image. You might to increase/decrease this number depending on your canvas size.
4. Make two new layers: A text layer and a white rectangle (using the rectangle tool and fill it in with white).
5. Right click on the rectangle layer in the layer tab and pick "Alpha to Selection". Then, go to Select > Grow and pick 3px.
Fill that new selection with black.
Move the black rectangle layer down. Ctrl +Shift + A to deselect.
5. Add a layer mask to the black rectangle and zoom in really close. Remove these corners by using the rectangle tool to select a square cut out and filling it with black to erase.
Should look something like this when you're done.
Then, make a new layer on top of the white rectangle and put in a small square like this. Do this for the res tof the corners.
It doesn't have to be super perfect cuz it's not that obvious when zoomed out.
6. Select back the black rectangle layer and mask out around 4 pixels like this.
7. Then, use the rectangle tool to create a jagged shape like this on a new layer. Hold on Ctrl to add in the shapes and Alt to remove any extra bits.
Once you are happy with the blocks and make sure they're all the same pixel width, fill it in with black.
8. Make a new layer below the black outline layer and use a brush to paint in white. Now, my layers tab looks something like this (ignore the typo, LOL):
9. If you want to create a drop shadow, just merge down all the layers and duplicate that. Use the bucket tool to color it to whatever color you want. Then, put that layer below your speech bubble layer. Change the opacity to your liking.
And you're done!
4 notes
·
View notes
Note
haii !! i was wondering on how to put gifs in banners like the one on your profile?? 🎀🧐 I've always wanted to do something like your banner but i just don't know how...😔🎀
HELLO its pretty simple :3 i use capcut for putting the gif into the bg
i let an empty space for the gif on the banner / graphic / whatever
then i go on capcut and put the graphic in front of the gif , using mai banner as example :
after it i just export as a normal video on high quality
now yu go to ezgif on mp4 to gif converter and upload ur video there
do the config. there , but like usually yu dont need to so dont worry
THEN YUR GIF GRAPHIC IS READY !!!!!!
( just realized i used mai old layout pic lol )
#ᛝ the messy little angel ꒱ .#rentry tutorial#graphic tutorial#tutorial#rentry#capcut#tumblr graphics#tumblr layouts#icon pack#icons#random headers#twitter icons#headers#icon#random icons#twitter header pack#twitter headers
10 notes
·
View notes
Text
easy tutorial for how i made this simple stylized "nebula" from my 'head full of stars' piece. note that this is not the only way, or the best way to do it, it's just the way i did it (and i made it up). enjoy
btw this was made with my 8 colour palette 'supernova' which you can download free here. eyestrain warning maybe
30% off pixquare pixelart app with code 'tofu' 💕
pixelart guide | support me | commission me | buy a print | buy a sticker
#pixel art#pixelart#artists on tumblr#art#dark art#dark aesthetic#pixel#illustration#pixel illustration#pixel aesthetic#pixel graphics#pixel art tutorial#tutorial#stars#space#nebula#eyes#cw#eyestrain#scopophobia#art tutorial
3K notes
·
View notes
Text
Welcome back to "Icon Making With Killian: An Intro to the 'Lost' Art of LiveJournal Icons"
aka, you didn't think I was one and done, right?
This tutorial was written in Photoshop 2020, but you can probably recreate it in as far back as CS2-ish (since I still use the same sort of techniques I've been using since then, lmao). It also assumes basic understanding of the software, though I've tried to be as clear as possible throughout.
I was possessed with a need to both make an icon of Madara's new event card and then write a tutorial, so let's all be proud that I busted it out before Halloween 💪
I started with the bloomed art of Madara from The Howling Forest★Lupine Halloween event (image from the Halloween 2024 campaign announcement, because the event hasn't started yet).
Since there's a lot of extra text & etc on this, I knew I'd be cropping it pretty close. I started with a blank 100x100 canvas, pasted the original image in, and then resized + rotated it until I liked the composition/crop.
First up, I wanted to get some cobwebs in here (for Halloween!), but didn't want them to overwhelm the whole icon. I used a texture from lookslikerain, set to Lighten, and rotated it a bit before erasing anything covering his face.
Next, I used another texture from lookslikerain and set it to Darken. There's a lot of green in the images for this event and I wanna pull some of that back into the icon, since it most got cropped out.
Time for light textures!!! I used a bunch in this icon~ I started with one from lookslikerain (can you tell I love their resources?), rotated it, and set the layer to Lighten, before deciding that it was too harsh. I used a small, soft brush set to 30% Opacity to erase most of the texture from his face, as well as softening the edges of the light.
The next few light textures are kinda subtle, but overall add to the icon. I'd say sometimes less is more, but I'm a maximalist at heart XD For the next few steps, just assume that the light textures were rotated/resized/moved/etc as I saw fit. I used yet another texture from lookslikerain, set to Lighten, and tucked in the bottom right corner.
This light texture from Sanami276 is also set to Screen. I moved it around to get just a bit of orange in the top left corner- gotta keep those Halloween colors in there!! :D
I wanted some more depth/texture in the upper left corner, so I decided to use part of a texture from Sanami276.
However, it's way to harsh to just throw in there like that...at least not for my purposes. I decided to invert the colors and recolor the black parts orange. My go-to method is with a Gradient Map adjustment layer. The easiest place to find it is in the Adjustments window.
I then used these colors for the gradient itself: #e7b676 at 0% and #ececec at 100%.
And it left the texture looking appropriately orange! I then pasted it into the actual icon, moved it so the rectangles were in the upper left corner, and set the layer to Darken.
Now for more light textures!! I used a couple from ianthinae, set them to Lighten, and went to town. I cut them up, moved them around, rotated them...just about anything to make them fit where I wanted. I love playing with light textures in general, and I find that even when I use similar ones a lot, they can look very different depending on how they're place.
Finally, I used part of a large grunge-y texture that I've unfortunately lost the source to D: I inverted it and set the layer to Multiply, before moving it around a bunch until I found a spot that looked good.
And with that, it's done! You've now got some new skills to make icons with~
If you have any questions, please feel free to ask, and I'll answer as best I can- as long as it's not about making icons in other software D: I only know Photoshop (and Paint Shop Pro, but I don't think anyone uses that anymore). If there are any other icons of mine you're interested in seeing tutorials for - or even just specific techniques! - just lemme know. I love helping :D
Also, I'm happy to share where I get icon resources from. I have a whole post dedicated to that on my DW graphics journal, though tbh that's the best place to talk to me about making graphics in general. But I will absolutely answer asks/replies/etc about icons here on tumblr, don't worry!!!!
#livejournal#icons#tutorials#graphics#icon tutorial#graphic tutorial#photoshop#LJ icons#100x100#100x100 icons#tutorial#reference#halloween#madara mikejima#enstars#ensemble stars
11 notes
·
View notes
Note
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
#web graphics#old web#neocities#custom#custom blinkies#stamps#page decor#web resources#da stamps#deviantart stamps#blinking gif#How to#tutorial#How to make stamps#Spacehey#deviantart#rentry graphics#old internet#early internet#stamp collecting#ezgif#stamp making#stamp template#Stamp frames#blinkies
5K notes
·
View notes
Text
𓆩♡𓆪 pixels tutorial ˖˚
꒰ step one ꒱ ↳ first, find an image or two on a search engine or pinterest/something like it. if doing images from real life (not art), try to use images that don't have noticeable lighting. for example, product images with white backgrounds are best rather than product images in a real life setting with strange lighting.
꒰ step two ꒱ ↳ either copy and paste the image or download and upload the image into remove.bg. use erase/restore as needed. download or copy this image.
꒰ step three ꒱ ↳ open either photopea or ibispaint x, and create a new canvas. set the size to 25x25 or 50x50 px and open/copy the transparent image into this canvas. shrink the size as needed.
꒰ step three ꒱ ↳ you're done! pretty simple, huh? good work \(^_^)/
#carrd graphics#rentry graphics#rentry decor#rentry resources#carrd resources#transparent#tutorial#rentry tutorial#graphic tutorial#editing tutorial#pixels tutorial#pixel tutorial#transparent png tutorial
4 notes
·
View notes
Text
Tutorial on how to edit graphics! (Or improve your edits! + tips!) Part 1..
Well firstly, if you’re entirely new to editing or a beginner. Then editing can seem very confusing and tricky, especially the intense psd, cluttered kind of edits, mine are also very cluttered but I think the best way to go as far as being a beginner is to figure out what style you want to do.. minimalistic? Cluttered? Eye strain? Gif/animated? I personally don’t do very many animated graphics and I also don’t do eye strain, so.. you’re on your own for that but it’s important to know what ur GOAL is. You need to know the basics of editing before doing anything else.
The editing apps I recommend are photopea and ibisPaint X, both are free. I really don’t recommend any paid apps other than ibispaint.. yes there’s ibispaint x then ibispaint. (The paid version has everything in it and is a one-time purchase, and has the same mechanics as the free version. If you are editing on pc or laptop, there is a version of ibispaint on desktop but you are only able to use it for 1 hour, if you are most comfortable with ibispaint then you can just delete it and re-download it. But if you don’t want to do that (you can use photopea!) I don’t use photopea so this will be a tutorial using only ibispaint! I can probably find a moot of mine that uses it LOL
So as far as resources go.. they’re everywhere.. I know @/lavendergalactic, @/llocket and @bydollita have a lot of good resources. (I didn’t fully mention the other two because well.. they’re not my moots so I felt awkward LOL) I can probably post some of my most used ones on a separate side blog like I did with my last account so.. also tell me if ur interested in that.
But for the basics of your resources: you want the character or person. An image then a transparent cut-out of them, a frame and/or pfp/image mask to use, and some decorative PNGs like bows, curtains, hearts, whatever you’d like. I can link some good resource rentries too!
Once you have all of that: find a reference/inspo, if you are taking HEAVY inspiration off of someone from tumblr or whatever, PLEASE check if they are okay with it, message or send them an ask in their inbox if it’s okay.. or they might have it somewhere on their pinned post if they allow it.
And now.. the question ur probably asking.. how do I do all of that?!
I had quickly made this. You can see the main components. The character cut-out, the inner image behind the frame, the decor, and the silly texts and textures behind the graphic to make it pop.
If you want ur graphics to be this cohesive there’s a few things to note. You need to know colours look best together, what style of editing looks best with certain art styles, and characters.
If you’re wondering “why does this character look so out of place?” Or just finding yourself in a rut with certain characters, you need to examine the character, like you can’t make a goth style graphic with a happy and cheery character like emu otori (depending on the card you choose) or like paimon from Genshin impact.. like that’s just gonna look SILLY. So take note of what this character looks like and what their original colour palette is. Are they a happy person? Are they emo and depressed? What colours do you usually see this person in?
Having range in your editing style will help you a lot, so branch out and edit different characters, and use different colours, and aesthetics!
Now for colours, you need to understand colour theory which quite frankly.. I am not about to teach out so probably at the end of this post I will have some videos linked for you to look at and watch that just overall will help you understand better how to edit that includes a video about colour theory!
If you are an editor and find yourself not being able to edit a certain style or can’t fulfill someone’s request for a certain aesthetic.. don’t be afraid to decline because a lot of the times you’ll have people who know nothing about what looks good with ur editing style or what aesthetics fit certain characters so it’s okay to decline stupid people… (/j.. they’re not stupid but ykw I mean..)
Using the stroke filter on ibispaint or photopea, aswell as the glow filter on ibispaint make ur edits look VERY good! (I use it on everything because it gives everything a little bit of separation yk? So you can see the different layers to the graphic!
Using textures over top of your graphics make it look very visually appealing aswell!
So as I mentioned I will link some videos, and I will also link some posts for good textures, and then add some photos for downloadable fonts to use on ibispaint (if you don’t know how to download fonts on ibispaint I can make a tutorial too! If you are also confused on how to use ibispaint they have a built-in tutorial, and it’s also best to learn as you go, look at all of the filters, the effects, the built-in images/materials)
Please for the love of god.. DONT over-do it with ur overlays and psds, unless that’s the style you like, don’t do it.. me personally.. I don’t like it but if you like it then go right ahead but over-usage of overlays and colourings make it look kinda bad 😭 and kind of confusing to look at, please make sure you can see the different components of your graphics and what is what.. if it’s too confusing to look at, chances are you’re less likely to have people like it or enjoy it. And don’t over-do it with fonts either… people need to be able to see whatever ur trying to say.. I wear glasses and people who over-do stupid fonts piss me off.. I literally block them, so keep that in mind aswell 🫶🏻
Photopea tutorial How to use a pfp/icon mask Colour theory If you needed a visual for how to make graphics here you go Some textures and overlays How to make a rentry How to use borders on rentries How to make blinkies
Some tags for reach: @frilliette @blinkndgone @hellhoundsdoth0wl @smilepilled @nomkiwi
#( ╹ ╹)? a post!#rentry stuff#rentry graphics#rentry#tutorial#tutorials#rentry tutorial#rentry graphics tutorial#tumblr tutorial#editblr#rentryblr#editors on tumblr
448 notes
·
View notes