Get a free year on Tuts+ this month when you purchase a Siteground hosting plan from $3.95/mo
Emotes, emojis, smiley faces; whatever you call them they're ubiquitous within blogs, text messages, and chat programs. Being on such a small scale makes this a job for some cute pixel art, which is easily accomplished in Adobe Photoshop.
1. Draw the Circle Base
Make a New Document in Adobe Photoshop that's about 200px by 200px, or so (whatever amount of space you dig), and set the background to Transparent. Use the Pencil Tool (B) with the brush set to 1pt and use the Zoom Tool (Z) to zoom in 1500-1600%.
The circle is simple: five pixels for the top, two on either side, one diagonal from the two side pixels, and two more pixels down on either side. Repeat for the rest of the circle (see below).
Using the Paint Bucket Tool (G), fill in the circle with bright yellow (R: 255 G:204 B:51). Make sure Anti-alias is unchecked and Contiguous checked. Fill the black circle outline with dark yellow (R:102 G:51 B:0).
To tackle shading on the circle, reduce the Opacity of the Pencil Tool to 50% and concentrate these darkened pixels around the edge of the circle's interior. Use the Eyedropper Tool (I) to sample the shadow color, set the Opacity back to 100% and place pixels around the corners of the circle's sides (on either side of the strip of five pixels).
2. Make a Smiling Face
Since we'll be drawing multiple faces, make a New Layer (Control-N). Choose dark yellow again and draw two four-pixel boxes for the eyes. Shade between the eyes by reducing the Pencil Tool's Opacity to 20%, or so. The mouth is seven pixels wide and recedes downward (7-5-3). Add shading pixels on either side (50% Opacity) and shade below the mouth (20% Opacity).
Use white for bright highlights at 100%, 50%, and 30% to create dimension on the top of the circle, on the smiley face's cheeks, and on the top lip. Note the various shades of yellow on the outer edges of the circle, placed there to smooth out the edges.
3. Alternative Faces
Copy (Control-C) and Paste (Control-V) the base circle from Section 1. Make a New Layer. The process for the sad face is the same as Section 2's happy face, but the mouth is five pixels across with two pixels on either lower diagonal.
For the angry face, Copy and Paste the sad face.
- Move the entire mouth down. The easiest way is to use the Rectangular Marquee Tool (M) to select the mouth and surrounding shadows and highlights, and move it down by one pixel.
- Extend the eye pixels from little boxes to little z-shapes. This way the eyes are squinting with a furrowed brow, rather than wide open.
The laughing face has its eyes closed. Once again, Copy and Paste the main circle, this time with lines of shadow in the middle and at the bottom (see below). The eyes are closed and positioned downward while the mouth is positioned upward with shadow pixels covering most of the lower half of the circle.
This emote is terribly simple: three pixels for each eye, and five for the mouth.
Finally, the singing/whistling/"oohing" emoticon. The face starts out with the same base as all of the others within the set. The eyes are four-by-four squares. The mouth is two rows of three-by-two with a single pixel in the center top and bottom. Add highlights to the top left and dark shadows to the bottom to accentuate the shape of the mouth.
4. Easily Changing Colors
Select your emoticons (in this case I've Merged Layers (Control-E) for example's sake), and make a New Layer. Use the Paint Bucket Tool to fill the new layer's selection with a flat color. In the Layers panel, change the Blending Mode to Color.
Repeat with other colors as often as you wish, rather than redrawing the entire emoticon.
Great Job, You're Done!
Well done you! You've gone from zero to emoticon set in no time flat. Pixel art can be quite detailed for its small size, and at the same time, little mistakes in pixel placement can change an image's look. It's a fun way to spend some time, playing with little dots and seeing what develops.