remember me
Register | Forgot Login

Prettifying your profile, part 1

One of the goals of the RP Repository is to provide great looking character profiles to everyone, even if they don't know a drop of coding. Yes, good ol' drag and drop has been the name of the game around here for nearly 3 years. Easy peasy!

But recently, there's been a movement amongst a small group of members to put the "advanced" back into profile making. These intrepid designers have been taking advantage of every option offered to basic users, to take default templates and make them look amazingly custom.

fancytitleintro.jpgThis is one of the many profiles that Jane has customized. Notice the use of unusual fonts -- she's about to teach us how to do that on our own profiles!

We're very lucky that Jane, one of the ringleaders of this movement, has agreed to share some of her secrets for fancifying profiles! She has written three tutorials for us, to be published over the next few weeks.

Jane's tips on fancy titles (new fonts/colors)

Every template for character pages has a certain title font that is easy to read and suits the profile.

fancytitle1.jpgAn example of a custom font in use on a free template. This profile belongs to Tamed (played by EdtheNeko)
But what if you wanted to use a different one to highlight a section? This is easier than you think, and the result will look beautiful.

You could try using the “font” tag, but this is likely to only work for you. Why? Because web pages can usually only display fonts that are installed on the viewer's computer. So you will see the fancy font you just downloaded, but no one else will unless they happen to have downloaded and installed the same one.

But you can ensure everyone sees the beautiful font you want by using an image instead of typed-in text. Just use your favorite image editing program to make a picture of the text in the font you want to use, and implement it with BBCode.

Code:
[img]your picture url here[/img]

If you want to align the picture, which can be helpful it you want to have the picture on one side of the profile, and maybe some typed text on the other, you can use BBCode like this:

Code:
[img align=left]your picture url here[/img]

fancytitle2.jpgHere we see a custom font image being displayed with BBCode, with another image aligned to its left. This profile belongs to Anya (played by Twilit)


Instead of left, you can use right as well. Or, put it in center tags to center it:
Code:
[center][img]your picture url here[/img][center]

Creating the fancy title image


What you need:
  1. an image editing program (ie. GIMP) to make your picture (download for free here).
  2. a font you enjoy that suits your site (find some free fonts here).
  3. colors for your header that go well with your profile.
Do not forget that you need to upload those images somewhere so you can link them.
I personally prefer photobucket, because it is easy to use and you have much space.

At first, please download GIMP (or if you already have a program, feel free to use your own.)

When you have decided on a font (or several ones) that would suit your character, we can start.

Installing new fonts
Q: How do I install a font?

A: You download the font, and copy & paste the (.ttf)-file into your windows font-folder.
If you restart GIMP, the new fonts are accessible and you can use them without a problem. It can be helpful, if you write down the names of the fonts (if you have to many) so its easier to find them later.

Picking out a color
For the colors you want to use for your header, you can pick any color you want.
The code for the many different colors can be found here.

pipette.jpgI would recommend you use a color that is already used in the template. (ie. use the pipette-tool to pick up a color from a screenshot you took of your profile.)

palette.jpgOnce you have sampled the color that you would like to use for your text, you can find its hex code by clicking the sample swatch of it in the tool menu. It will open a window that has a section in it labeled "hex code." That is the information you will need to use this color.

Tip: You can make your normal text in a different color too, using the hex-name of the color and some BBCode.
Code:
[color=#ffc74c]insert text here.[/color]

Step-by-step image instructions (for GIMP)
  • Open GIMP, and then choose file > new
    createnewimage1.jpg
  • Click More Options, and make sure the background color is set to transparent. Then click okay.

    createnewimage2.jpg
  • texttool.jpgUse the button with the big A and then click and drag a square on the transparent background of the canvas.
  • That is where you will input your text. Just pick the font and the color and type.
  • rectangleselect.jpgUse the rectangular selection tool to draw another box around your text. Then go to the Image menu, and choose crop to selection.
    You might want to try to cut your “image-font” out as close as you can so it is easier to align later.
  • Save the image as a .png (This will allow you to use the transparent background)
  • Upload the image to somewhere like photobucket, and then use the BBCode above to add it to your character profile.

fancytitle3.jpgAnother example of title fonts put to good use. This profile belongs to Scrii (played anonymously)

And there you have it! Jane's tips on how to create strikingly fancy, grungy, or moody titles for your character profiles.

Have a character profile that uses this technique? Leave a link in the comments, so we can all gawk!

Community Feedback

1 2 3 »

  • liquidchaos

    December 2nd 2015

    3:50pm

    I constantly show this to folks when they talk about wanting to pretty their rpr, it is a amazing resource Jane. Thank you for making it <3
  • Jane

    December 2nd 2015

    3:27pm

    I am glad that people still appreciate this <3
  • Kim

    March 16th 2013

    10:17am

    Great resources, Hooke! Thanks so much for sharing them. :D
  • Hooke

    March 16th 2013

    10:14am

    (Er. Some NSFW for bare androgydude-chest.)
  • Hooke

    March 16th 2013

    10:13am

    Weirdmaker and alt codes are also pretty helpful, where sprucing up your text is concerned. I use both on this profile.
  • Kim

    March 12th 2013

    10:43am

    Oh wow, I can't believe how well people have taken all this and run with it. Your profiles are looking amaaaazing.
  • Rubix

    March 10th 2013

    9:39pm

    Voila! First one of mine down, of course I had to do the lunatic. :)
  • Zenith

    March 10th 2013

    8:04pm

    it's a work in progress but I decided to take the opportunity of these tutorials to hand build a website for a character of mine that was currently without one. I'm hoping to add things as more tutorials come out but so far this text tutorial has produced some pretty results in my opinion! :D Take a look! I'm excited to see what else I can do with it as the other tutorials come out.
  • Jane

    March 9th 2013

    12:52pm

    Thank you :)


    OMG - I love: Quincy Bird ...
  • Copper_Dragon

    March 9th 2013

    11:53am

    ... I did it again. Typhus(Warning: language!) and Wilhelm. I have a particular fondness for the Evanescent font on Typhus' page. <3 Gosh darn it, this is fun!
  • Kim

    March 9th 2013

    11:09am

    Wow guys, you have been going all out. I am loving seeing all these profiles!
  • LittleBattyLady

    March 9th 2013

    9:28am

    I believe I am satisfied with the outcome! This is a great tutorial. :3 I prettied up my hermit's profile using this knowledge.
  • Strangedisease

    March 9th 2013

    7:45am

    This is really cool! Thanks Jane for letting us in on your secret <3. Here is my attempt Your text to link here...It needs a bit of work.
  • TheLily

    March 8th 2013

    4:34pm

    It's not as grand as some of the other ones, but I've thrown together this profile in the last two days. http://www.rprepository.com/site.php?char=20871&page=47160
  • phylus

    March 8th 2013

    6:42am

    Jane, always making masterpieces :)

1 2 3 »

What do you think?

Log in to tell me!