Skip to main content

Prettifying your profile, part 2

Posted by Kim on March 13, 2013, 10:46am

Yes, we're back with more fantastic tips from profile artist Jane! See her first round of tips here.


Jane's tips on fancy pictures

simpleimagealign.jpgBryg (played by KrypticRaven) makes phenomenal use of images throughout her profile, from simple character portraits, to a full illustrated menu of food she sells!
Some of you probably already use the image tag in your profiles, but there are a few little tricks to make your pictures look even more beautiful in your profile!


Basic code review
Let's review the basic code. This is the simplest way to add an image on your site:
Code:
[img]your picture url here[/img]

If you want to align the picture, which can be helpful if you want to have the picture
on one side, and let's say some text on the other:
Code:
[img align=left]your picture url here[/img]

Instead of left, you can also use right. And finally, you can center the image like this:
Code:
[center][img]your picture url here[/img][/center]

As I said last week, my favorite place to put images to link to is photobucket.

Using pictures as links
imagegal1.jpg
Freya Morris (played by iskait) created a custom gallery to show off all the pieces of jewelry the character wears. Each image links to a larger image. She's even used images of copper and silver coins to denote how much the character charges to craft different types of jewlery!
But did you know it is also possible to use a picture as a link?
For example if you use a crop-out and want to link it to the original (big) picture.

You could use this little effect to show wares your character is currently selling, or even the clothes he/she wears without cluttering your profile. Or simply to make your site look not as boring.


Here is how to turn an image into a link:
Code:
[url=link here][img]url of the picture here[/img][/url]

Here is a version that you can play with, to see what I mean:
gal1.jpg gal2.jpg gal3.jpgAn example of cropped out images, linking to the fullsize versions. What an awesome way to show off your character's wardrobe!

As you can see, just using pictures on your RPR gives you so many wonderful possibilities to prettify your site. If you do not have any pictures, and no money to commission them, there are a few artists that are wiling to draw your character for free. Check out this forum. Of course, always be nice.

Creating images with transparent backgrounds
If you have a sketch (black/white) you can easily make it transparent with GIMP. See the first tutorial for instructions on obtaining a free copy of GIMP.

When commissioning artwork, I mostly ask for a transparent background. If the artist does know about it before he/she starts, its not much hassle. Requesting it afterward could be tricky.

If you already have a black and white image, making it transparent is very easy.

Open the sketch in GIMP, and open the menu “Colors” and then click “Color to alpha”. If you try it on colored pictures you will see, that it works as well but bleaches your picture or even worse. But a try never hurts, if you do not save it.

Cropping and framing images in shapes other than squares
ovalcrop.jpgCusith (played by GreenCinders)'s profile is decorated with an image that has been cropped into an oval, and framed with a dark brown border.
If you have a colored painting, you can crop a part out and frame it so it looks good.

Note: Framing cube shaped pictures is easier than rounded ones. But it is not impossible.

When I made my own profile, I used a complicated method to frame rounded crop-outs, until Eyadi, a friend of mine that is an artist, told me about a method that is easier. Gladly, she used GIMP as well.

I want to thank her for this tip.
  1. Open the picture you want to use for your crop-out in GIMP
  2. ellipse.jpgUse the ellipse select tool to select an oval you want.
  3. Copy it and then paste it into a new transparent image so you have the oval, separate.
  4. selectbycolor.jpgUse the magic color wand, and click into the picture with the oval.
  5. Go to the menu "Select" and choose "Invert", so just the oval is selected. Now in the same menu, choose "grow".
  6. Let the selection grow by 1 pixel or 3, it depends on what you want. This will help to remove ragged edges of color.
  7. Ctrl + X, and the oval is now a few pixels bigger, and empty.
  8. Fill it with a color, and press Ctrl + V and the cropout is in the middle of the colored frame.
  9. It should align itself, and now simply save it as a png, and say yes when it asks if you want to put the layers together.
  10. Upload the image to your favorite image site, such as photobucket, and place it onto your profile with the BBCode at the start of this article. You can wrap it in a link to the full, uncropped image as well!


And that's Jane's tips on making more creative use of all your character reference images. There's one more tutorial packed with tips for prettifying your basic profiles coming next week, and you don't even need to have any art to make use of it.

If you try these techniques out, please leave a link in the comments so we can marvel at your fancy profile!

Comments

Jane

April 7, 2013
5:05am

omg lily, thats awesome. How did you do the different shapes for the gallery?

TheLily

March 19, 2013
5:56pm

Hey, Lily!
What Brain?
I got an amazing idea. It won't be hard or time consuming at all!
I'm in the middle of class. Have this idea later.
No! This is really important Lily. Like, so important if you don't listen to me, I'll stop working forever. Listen to me, Lily. I'm your brain, I know what's good for you!

No, no my brain doesn't. This took four times as long as my brain insisted. (18+ images!)

Jane

March 15, 2013
3:03am

I have heard from others that its is addicting, and personally I agree.
Maybe BBcode is the new 'knitting' ? ;)

Kim

March 14, 2013
7:15pm

@kalirigby89 I like that you added an overlay to your crops, so that they all have the torn up edges look!

Rigby

March 14, 2013
4:05pm

So I used pictures-as-links...as-profile decor and a content divider. on this dude. I'm pretty okay with this.

Still picking away, but these are BOTH very helpful tutorials! This is weirdly addicting...

Jane

March 14, 2013
9:07am

I love Roze's <3

TheCoffeeWolf

March 13, 2013
6:12pm

So I got poked to post up some of my work due to Jane's helpful gimp

Your text to link here... enjoy my first page ;)

Dog

March 13, 2013
4:36pm

I'm also a fan of having aligned images surrounding text - love all the examples put up so far!

Jane

March 13, 2013
2:40pm

I looooove Yarla's profile.

Dylan

March 13, 2013
2:28pm

It is wonderful how nice and easy it is able to do all on your own with help from a freely available tutorial! :3

Xheila

March 13, 2013
1:25pm

Holy poop! These tops are fabu <3 I tried some tips on Yarla! I really wanna try the picture links the would probably be neater!

Jane

March 13, 2013
1:13pm

Thank you so much Kim <3

Rubix

March 13, 2013
12:56pm

<3! Great tips! I've been working on this with Alonzo to get it just right!

Kim

March 13, 2013
12:43pm

I was wondering who that friend was! I will go add it.

TheCoffeeWolf

March 13, 2013
12:33pm

<3 Fantastic as ever!!

Jane

March 13, 2013
12:32pm

Oh, the friend that gave me the tip was "Eyadi" - it took the link out of the tutorial :/

Loki

March 13, 2013
12:26pm

Another awesome tutorial! I can't wait to try some of this out! :)

TheLily

March 13, 2013
11:32am

Oh yay. Things I do already. This makes me feel smart :D Thank-you.

LittleBattyLady

March 13, 2013
11:16am

Time to have even more fun with Quincy's profile! Thanks, again, for this resource, it's totally appreciated.

Ilmarinen

March 13, 2013
11:02am

I am a huge fan of having aligned images to flank lovely text! A couple days ago I painted a portrait for Heimdall that I think does the trick quite nicely on its stats page. http://www.rprepository.com/c/heimdall/5824

I'm not the best at prettifying profiles... in fact, I'm so indecisive, I'm always changing things around. My tip is to work on one page at a time. That way, when you change your mind in a couple hours, you only have to redo one page instead of all of 'em.