All posts are my opinion and are not posted for monetary gain or other benefit, unless stated. Powered by Blogger.

Friday, 19 June 2015

Photoshop tutorial: pixel/bitmap text

This post is definitely not my usual material for this blog, but I had trouble uploading it to the relevant Tumblr blog, so thought I might as well plonk it here in case I had any Photoshop fans reading out there.

A craze on Tumblr at the moment is pixel graphics, more specifically little pixel speech bubbles with various quotes inside, in the style of Diesel Sweeties. I've been having a go myself and have managed to create some, by hand, in Photoshop.

I get a LOT of questions about this on Tumblr so decided to write a little tutorial on how to draw the pixel/bitmap style text. For some reason, Tumblr won't load my screenshots so maybe Blogger will help us out here! Here we go:

First, you will need to open Photoshop and create a blank document of any size, with a transparent background. Then, select the pencil tool and set it to 2px. This is the size we will be using for the text - meaning that each mark of the pencil will be 2x2 pixels.

Zoom in to the document so that you can clearly see the square pixel of the pencil tool. The general rule I follow for drawing this lettering is that each individual letter will never exceed 5x5 pixels.

For this tutorial, I will be writing out the word "example". So let's start with the letter E - this one is simple as it is a block letter made up of all straight lines. Following my general rule, the first line of the letter will be 5 pixels high and no more:

Easy! So for the parts of the E that stick outwards, I find that proportionally it looks best if these are 3 pixels across, so just add 2 more pixels to the top, middle and bottom to form the prongs:

Done! I would suggest leaving a 1 pixel gap between each letter to keep them evenly spaced out. I find it helpful to draw a line after each letter to make sure I am leaving the correct size gap.

Moving on to X, this is a fairly simple letter to draw as long as you keep in mind the 5x5 rule. As X is made up of two diagonal lines, you should draw two diagonal lines consisting of 5 pixels - to make them diagonal, each pixel must join at the corner, like so:

Do the same for the other side and you will have your letter X!

For the A, you must remember that pixel/bitmap texts do not involve curves - for the top of the letter A, where one might write it with a curve, you simply have to leave a blank pixel on each corner to replicate the curve. This means then that each side of the A will have 4 drawn pixels and 1 blank pixel (making it 5) in each corner.

Alternatively, you could fill in those empty pixels and have the A as a completely block letter, the same as the E - however, I think this style looks better.

M follows a similar rule to X, in that any diagonal lines must consist of pixels joined by their corners:

The final two letters, L and E, are both block letters which are easy to draw, as we know! Remember the 5x5 rule and draw in your last letters. Once you have drawn them, erase your separator lines (the lines I have drawn in red) and zoom out to see your text. This is where you can spot any proportion/alignment mistakes.

The beauty of pixel text is that because it is drawn on a pixel-by-pixel basis, it is very simple to go in and edit mistakes by changing each pixel individually.

Crop any excess background and you are done! If you want it to remain on a transparent background, make sure you save the document as a .png.