Make a new photoshop image, with the size and proportions you want your codes to have. I have templates for 88x31, 31x88, 50x50, 100x50, 100x35, and 200x40, so you might be interested in doing any of those, and even more if you feel like it.
So let's say we go with 100x50 right now. It's a seemingly harmless setting but I suggest you take special care to set the resolution to 72 pixels/inch because this is the standard for computer images and graphics. Bigger resolutions mean bigger file sizes, and that's sad since you don't really need it; smaller resolutions mean not-as-good images.
Okay, you've got your new document. Make a new layer with the default settings (
Shift+Ctrl+N, or on the menu,
Layer > New > Layer...), but name it something like "highlight" and select the Line Tool. The keyboard shortcut is
U, but make sure the line tool is selected (you can press on
Alt and cycle through the different shapes). Use the following settings for the line tool:
Zoom into the document (
Ctrl+Plus) until about 600% or so, and then draw lines for the borders, like so:
It is important to zoom in so that you see clearly that your lines aren't going outsize the canvas/image. Next, set the blending mode of the whole layer to
Linear Dodge, and you must lock the transparent pixels by clicking on the button encircled below.
Don't worry if the layer seems to have disappeared! It's the Linear Dodge effect. Next, make a new layer, and name it "shadow" or "dark" or something like that. Do the same thing with the borders, it doesn't matter if you're using the same color, BUT this time, make sure it's set to 1px width this time:
Again, it is important to zoom in so that you clearly see where you're putting the lines. After which, set the blending mode of that dark layer to
Linear Burn and lock the transparent pixels again.
Now, what if we want some text on the code? Easy. I pick a nice, uncomplicated pixel font, such as Ernest, and write something generic, like "SUBJ"; make sure that you're not antialiasing the font!! Pixel fonts are not made to be antialiased; they are supposed to be, er, pixel fonts.
I usually place it at the lower right of the button and make sure it's aligned to the right, with a little space for the code border and the border of the font itself (which we'll be getting to shortly):
Next, bring up the blending options for your text layer (right-click on the appropriate layer, and select
Blending Options...). I go to
Outer Glow and use the following settings:
(You can also use
Stroke.) Next, I set the whole layer's blending options to
And now you can save your file, because you're done with the template!
Okay, now we have a template, but how do we use it? Simple. I'll work with this screencap I made of Darcy from Pride and Prejudice so that you can see exactly how to "customize" the template to suit the image you'll be working with:
The actual screencap is bigger, and note that I had used blue for the borders of the template -- which won't really go well with this image, as it's all browns and greens. That's where our locking the transparent pixels come into play.
Paste the raw image on the template while it's open in Photoshop, above the Background layer and under our highlight/bright layer. This is what happens -- note that this time, the linear dodged border comes out rather nicely.
Next, start resizing the image -- I do this by hitting
Ctrl+T and dragging the ends of the image around. If you want to keep proportions, press the
Shift key while doing the dragging! This is what I come up with:
Okay, now take a color, any color you think will do well with the image. I usually take a color that's in the image itself by using the
Eyedropper tool. I chose a nice olive green color, the color of Darcy's clothes. Next, choose the
Brush tool (
B) and select the "highlight" layer, and color over it. Since transparent pixels are locked, you will only be coloring over the border itself! (Yay!) Do the same with the "shadow" layer, and then customize the font by changing the color of the font and the outside border's color.
And the end result: TA-DA!!
and other similar codes
As previously said, I have various templates for different sizes, and all usually have the same style for uniformity's sake. Feel free to experiment and make up your own styles, and have fun making lots of codes. :)
This tutorial may not be copied or placed at any other site without prior written and explicit permission from me.
Questions, comments, suggestions? Please feel free to drop me a line.