How I made a blinkie from scratch!

I said I might do this last night and then immediately did it! I made a blinkie :D


Here it is! Wanna know how I did it? Read on!



Started writing out the text on a pixel art app I have on my phone called Dotpict. I believe the canvas I used was 96x96! It's a comfortable size for me where I don't have to really zoom in to be accurate, but still have space!


The letters are 16 pixels tall (which ends up working well! The comma dipping below the line made me need to shrink the letters but I'll go into that later!)ย 


Did it on a white background so I could easily color select it and erase it to make the letters transparent!


Maybe I'll make an alphabet canvas so I can just copy-paste letters and share it, it was good to have repeating letters here I could copy-paste. Even how the T was a base for the E and I saved me time! :)



Then I made two little background frames in a 150x20 size! The app offers saving the images larger in that ratio so they stay crisp and I didn't have to work too small! The 96x96 can be saved in increments up to 1536x1536. The 150x20 can be saved in increments from 150x20 to 2400x320 (I choose the largest).


Then I brought them both into the art program I use called Krita on my computer and opened both background frames and the text. I then erased the background of the text, selected the pieces I wanted and overlaid the text onto the background. I copy-pasted the text to the other background so it'd be in the same spot and saved each piece!


I did have to size down the letters a bit because the comma dips below the 16px of the other letters, but it wasn't too bad to deal with! The 16px fits the 150x20 pretty well though, smaller might be better if your border is thicker!


Rinse and repeat for the three sets of words. I brought them intoย ezgif and behold! A blinkie made from scratch!



You can size it down in ezgif too to standard blinkie size so you wouldn't have to manually do it in the code where you want to use it!



Next time I think I'll add more frames of the words with the backgrounds so it blinks faster but is still readable!


23 Kudos

Comments

Displaying 2 of 2 comments ( View all | Add Comment )

Wubzilla

Wubzilla's profile picture

Very cool! I should make some of my own asap!


Report Comment



I can't embed it here but I'll link it: https://i.postimg.cc/s2yqcnBr/wubzilla-88x31.gif

Thanks for the inspiration! I'll take a swing at a better one later too!

by Wubzilla; ; Report

Thanks!

by Wubzilla; ; Report

๐•ƒ๐• ๐•๐• ๐•ฃ๐•ช

๐•ƒ๐• ๐•๐• ๐•ฃ๐•ช's profile picture

How interesting! I normally just make do with those blinkie websites and customize the ones that are already preset but I did always wonder how people made them to begin with lol


Report Comment



I loooove those websites, they were my inspiration! I figured I had too much text for it to fit on a standard blinkie base and be readable, and there's something alluring to me about creating something custom!

It was really fun to do, and pretty quick. I think the text was the hardest part, but there's gotta be pixel alphabet templates somewhere! I'd totally recommend if you ever have something specific in mind!

by ๐“œ๐“ฎ๐“ญ๐“ฎ๐“พ๐”๐“ผ๐“ช; ; Report