Here you'll find some tutorials regarding the graphics I make so that you can make your own if you'd like!
Looking for something specific? Try clicking one of the links below!favicons | stamps | graphics
FAVICONS
First things first, I use ASEPRITE to make favicons. It does cost money, but it really is the best of the best in terms of pixel art that I've found. However, I'm sure that there are plenty of free alternatives online if you have a look!
For this tutorial I'll focus on ASEPRITE, but you could transfer a lot of the information to another application. For this tutorial let's make... A duck!
Open ASEPRITE and hit control + N or click "New File". You want to make the size 16x16!
Once you have the size set correctly, below is what you'll see. I'll explain the most important sections that are numbered in the image!
- Refers to the main drawing space. This is where you'll place your pixels for your art!
- This is where your layers and animation timeline are. Down to the bottom right of this section is a Frame + button. This will add frames to your current drawing to make an animation! But it's not necessary for this tutorial ATM.
- Your colour picker! Works with hexcodes too if you want something specific. Pressing the little exclamation mark below the picker will add your currently selected colour to the pallet above it.
- Here is the tools available to you, most (if not all) of which have shortcuts!
- And lastly, your pixel preview! This shows how your pixel looks true to size versus the zoomed in view we're going to use to draw in!
Now that we feel a bit more comfortable with the work space... Let's get drawing! Be sure you have the pencil tool equipped, or just hit B- that's the shortcut for the pencil tool! Draw whatever you want :D I'm gonna draw a duck...! Hint: you can press I for the eyedropper tool!
Waow! What a pretty duck if I do say so myself :D! I've added a black outline to make the duck stand out some more given its small size, but you can add a white one or even a different colour! Or none at all, I just think the outline helps a lot. If we wanted to, we could simply call our favicon drawing done here and save the file if you'd like! To do so, go to the top left corner and click "File" and then "Export". Clicking "Save As" will save the file as ".aseprite" and we don't want that! We want "PNG" or "GIF" depending on if you're adding animation or not.
Click the three little dots to decide where you want to save the file. Anywhere is fine, though I tend to have a dedicated folder for my pixelart. However, there is also another setting you might find useful in future- though not for this tutorial.
The resize option is very useful for when you're just making general pixel art. Both for sizing up and down. But for favicons I find 16x16 is the most comfortable for drawing and readibility reasons, so you don't have to touch this setting for now!
Once you're finished with placing your pixels and you've saved your file... We're done! Here is my finished duck favicon :D... What did you make?
STAMPS
There are two ways I make stamps! Using ASEPRITE like mentioned previously, or using multiple free online sites.
ASEPRITE METHODAssuming you either know how to use ASEPRITE already or have read the above favicon tutotial to learn the basics, I'll jump right into the tutorial! This method is best for when you want to make something completely customised versus using a gif!
First you're going to need a stamp template! There are plenty free or credited ones online if you have a look! Here is the one I use:
You'll want to open whatever template you have downloded in ASEPRITE for editing! Click "Open" in ASEPRITE and locate your stamp template file. It should look something like this...
Now... We just have to make the stamp LOL... We can start by making a new layer by pressing shift + N or right clicking layer and then clicking new layer. Moving the new layer (probably called "layer 1") can be a little tricky. You want to make sure that the new layer is the active layer by clicking it and then hover your mouse down to the little yellow border. Once you have a hold of the layer you want to drag it under the first layer (probably just called "Layer").
You can make as many layers as you want, but make sure that the stamp template on "Layer" remains at the top. Basically, we want to put all of our stamp design contents under the template layer.
Now it's time for the fun part! Draw whatever you'd like within the stamp, I can only recommend that you fill every inch "inside" the stamp with something. As in, do not leave any part inside the stamp transparent. Keep the outside borders of the stamp transparent!
Some other tips include: pressing T brings up the text menu, allowing you to type text without manually drawing the letters pixel art style. Pressing shift + G brings out the gradient tool, very helpful for quick gradients as seen in my example below! G brings up the paint bucket tool too! Now, here is what I made:
I used the gradient tool, the text tool, the paint bucket tool, and I placed the text on a seperate layer.
If all you want to do is make a static stamp then congrats! We're done. Be sure to Export As and not Save As (explained in the favicon tutorial). However, if you want to add animation, then let's get started!
You'll need to decide what sort of animation you want to add. For this tutorial, I'll simply make the letters flash different shades of pink! You can do so many things though, so have fun! Clicking the "+" symbol next to "Frame" is how we make animation frames, as seen below. It's located to the bottom right corner of ASEPRITE.
Depending on how fast you want your animation to be will depend on how many frames you end up using! Play around with it, see what works and what doesn't. It's all trial and error!
Here are all the frames I used as well as circling your animation controls. It helps to click the play button to see how your animation looks before finalising anything! I used two extra pink colours per frame to simulate blinking/movement. Pink 1, Pink 2, and Pink 3. We start with Pink 3, the darkest. Let me explain:
It goes 3, 2, 1, 2, 3. That's how I made this animation, moving those colours in that order across the letters!
Before finally exporting your new stamp, be sure to merge all of your layers onto the one layer so that it can be exported correctly. Direct the file to the correct folder and hit save! You'll then be given a prompt popup like this:
Save it however you want, but I recommend Animation Loop. Once you've done that... We're done! You have your very own new stamp made in ASEPRITE! Good job! Here is the one I made :D !!
FREE METHOD
I recommend this method mostly if you want to use GIFs for stamps! Though this method is also entierly free so :D!
The first thing you have to do for this method is either make or find a gif that you want to turn into a stamp. If I may recommend something like... tenor to start with! Though any sort of site that compiles gifs should work fine. In this tutorial I'll use Yuno Gasai as the example!
Once you have a gif selected as well as a stamp template (you can grab the one I use above or find another one online or even make your own!) then you have to likely resize your gif. To do this we need to head to ezgif! Once there we need to upload our chosen gif or simply copy and paste the url to your selected gif and then click upload! Doing so should take you to this screen:
This might look a little confusing at first, but don't worry! It's actually really simple. All we have to touch is the width and height properties! We want to change our gif to be 95x51.
Once we've resized it appropriately then we only need to scroll down a little to see the new resized gif, perfect for stamp purposes!
All that's left to do on this site is to download the new resized gif and store it somewhere safe on your PC! Once you've finished saving your gif then we have to head to online-image-editor to compile our gif with the stamp template. Once there, you have to click this upload an image button and select your resized gif to upload!
A new screen will pop up and... WAOW! Not gonna lie, this page confused me a lot when I first saw it! There's a lot of information to take in, but trust me when I say we'll be making as little clicks as possible on this site! It should look something like this right now.
First you want to click Advanced at the very top. I've circled the only two buttons we're going to be clicking after that.
First: Expand Canvas. We want to expand this to 104x56. Easy! Then once you've applied that change, you want to click on Overlay Image. This is where we'll upload our stamp template! Follow the instructions by choosing a file (the stamp template) and then pressing the green upload button. IMPORTANT: you might not initially see your stamp template, but it's been uploaded to the top left corner of the canvas.
Now all you have to do is drag and drop the stamp template over the top of your gif! This can be kind of tricky so I recommend zooming in on the page to make seeing a little easier. Once you have the template aligned perfectly over your gif, then you have to hit the big green APPLY on the left hand side of the screen. And after doing all that... We can now save our completed gif stamp to your PC! Wahoo! What did you make? Here's my one!
GRAPHICS
This one is a bit trickier to explain, so stay patient please! To start, download GIMP! It's the program I use to "cut out" gifs :D
Step one is to find a gif or make a gif of what you want to "cut out"! I usually use tenor for this, but you can use whatever you feel most comfortable with. You want to download the file and open it up on GIMP! I'm going to use this silly cat for the tutorial :D
You can see that I've hidden every layer (or frame) of the gif except for the one I'm editing. This makes the process easier, and I recommend doing this for every layer we work on, as in hide even the one we edit as we move up the layers. I start from the bottom and go up, but you can do whatever if easiest. To "cut out" the gif, you have to select the "free select tool (third from the top in the above screenshot). This will give you anchor points in your selection to make it easier to "cut out" the part of the gif you want to use for a graphic.
I "cut out" around the gif like so:
And then at the top left hand corner of GIMP there will be a menu. From here, you want to click select>invert and then delete on your keyboard. It should end up looking something like this!
Oh no! My gif doesn't have a transparent background now! What will I do?
I'm not sure if there's an easier way than this, but when the above happens then this is what I do!
Press select>invert again so we have the "cut out" section selected, and then copy this section. Don't paste right away! Create a new layer above the very last layer, and after selecting that layer, paste our copied image above it. Then, all you have to do is move the pasted section to overlay exactly with the image below, and then press "anchor"
You can then delete the original layer underneath from the "layers" on the right hand side of GIMP, and now you should have a transparent background to work with!
From here, it's just a process of going through each frame individually from the "layers" and cutting the gif out one frame at a time. It's time consuming, but I find it really relaxing and soothing to do! Let's get started! Make sure you click onto the right layer that you're editing, otherwise you'll end up cutting out the wrong layer and end up with a weird end product. To be clear, whatever "layer" is darkest is the one you're currently selecting, and that one should always be the layer with the "open eye" icon next to it!
... I'm done! What about you? Well, whenever you're finished, let's learn how to save the damn thing!
You want to click file>export as and make sure you're putting it in the correct folder and that it's the right file type (gif)! Below are the settings you'll use to make sure that one frame shows per second, rather than leaving a trail of itself! I hope that makes sense!
And once that's all done, here is my finished result!
