Fanlisting Codes Tutorial @ Jun 13, 2021
I've been getting a lot of good feedback about the new button styles I've been doing for my fanlistings, and I thought I'd post a tutorial on how I go about doing them. They're really rather easy! I use Adobe Photoshop 7, though I think this can be easily done in PaintShop Pro as well, following the same principle. If you use a lower version of Adobe Photoshop, try substituting the layer blends I use with something else. :) I use file templates when I make my codes. They make for similar-style codes, but then you can make lots! You can also just make templates for every different sort of style you wish.

How to Make the Template

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.

 new file settings

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:

 line tool settings  line tool settings

Zoom into the document (Ctrl+Plus) until about 600% or so, and then draw lines for the borders, like so:

 2px borders

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.

 linear dodge and lock transparent pixels

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:

 line tool settings  line tool settings

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):

 text settings
 text positioning

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:

 outer glow settings

(You can also use Stroke.) Next, I set the whole layer's blending options to Linear Dodge.

And now you can save your file, because you're done with the template!

 finished template

How Do I Use 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:

 sample image

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.

 template with the image pasted

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:

 template with the image resized

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.

End Result

And the end result: TA-DA!!

 finished product

and other similar codes
 finished product  finished product

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.

News powered by CuteNews -