β彑 HOW TO MAKE BLINKIES - A tutorialβ彑
tiny animated gifs for your blog β‘
βββββββββββββββ
β§ WHAT IS A BLINKIE? β§
blinkies are 150Γ20 pixel animated gifs that blink, flash, or sparkle β¨
theyβre from the old internet and they are PERFECT
βββββββββββββββ
β§ WHAT YOU NEED β§
β‘ aseprite
ALTERNATIVES:
Photopea (free, browser-based, easiest)
GIMP (free, downloadable)
Photoshop (paid)
β‘ pixel font (optional but cute)
βββββββββββββββ
β§ STEP 1: NEW FILE β§
File β New
β¦ width: 150 px
β¦ height: 20 px
β¦ color mode: RGB
β¦ background: transparent
βββββββββββββββ
β§ STEP 2: PICK COLORS β§
β‘ use 2β4 colors max
β‘ high contrast = easier to read
β‘ neons + black/white = blinkie classic
(save your palette if you want a matching set!)
βββββββββββββββ
β§ STEP 3: ADD TEXT β§
use the Text Tool (T) or draw letters by hand β§
β‘ pixel fonts look best
β‘ antialias OFF
β‘ keep it short + centered
examples:
β¦ I LOVE U β¦
β¦ ONLINE β¦
βββββββββββββββ
β§ STEP 4: DECORATE β§
tiny details make it cute β‘
β‘ hearts β‘
β‘ stars β¦
β‘ dots β’
β‘ sparkles β§
(1β3 only or it gets messy!)
βββββββββββββββ
β§ STEP 5: ANIMATE β§
open timeline:
View β Timeline
β‘ duplicate frame 1
β‘ make small changes:
β¦ change text color
β¦ turn sparkles on/off
β¦ blink background
β± frame time: 200β400 ms
βββββββββββββββ
β§ STEP 6: CHECK IT β§
view at 100% zoom
if you canβt read it β more contrast or less detail
βββββββββββββββ
β§ STEP 7: EXPORT β§
File β Export β GIF
β‘ loop: ON
β‘ resize: OFF
β‘ transparency: ON
β‘ keep it 150Γ20
βββββββββββββββ
β§ POSTING ON TUMBLR β§
upload the gif directly β‘
βββββββββββββββ
β§ TINY TIPS β§
β¦ antialias OFF forever
β¦ test dark & light backgrounds
β¦ less animation = more charm
β¦ old internet rules only
βββββββββββββββ
β§ YOUβRE DONE β§
you made a blinkie β‘
welcome to tiny web art πΏβ¨
βββββββββββββββ
β§ If you need a tutorial on how I make specific animations feel free to bully me in my ask box. I am still relatively new to this but I will try my absolute best to help out <3 β§