Author Message

Aesopl

Rank 1
Aesopl
Joined
22 Jul 2011
Posts
284
Location
Ajax ON Canada
PostedFeb 27, 2012 8:44 pm   Last edited by Aesopl on Feb 29, 2012 9:55 pm. Edited 11 times in total

[GUIDE] Karma Creation

Cause I'm getting lazy with requests >:
What's this all about? Check out this thread

I use Photoshop CS3 usually, however I've decided to try out Paint.NET so I could show people how to make simple Karma themes. I don't know of every function in Paint.NET and can't seem to find some things i'd use in PS, so this is for more simple Karma icons.

You Will Need (for following this guide perfectly)
1. Paint.NET
2. The ability to read instructions
3. The ability to ask me a question if you run into a problem!

Easier than it sounds

1. Find a Good Image

It would have similar dimensions as you don't want it to be too squished and blurry when you resize it. You'd usually want an image with a transparent background and not a full out photograph or picture. For example~
GOOD
A
B
BAD
A
B
If you're really new and don't know how to check an image's dimensions, right click it and either choose Properties or View Image Info in your internet browser.
For example, I will use GOOD example A throughout this guide. In Firefox I right click it and View Image from the page I was on, then repeat except this time View Image Info. I end up here and note that the dimensions (highlighted) are close. So far so good!

Save the image to your computer for use in Paint.NET.

2. Open and Resize
Really easy part.
In paint.net go to File > Open and select the image you just downloaded.
Once I open it I realize, oh no it doesn't have a transparent background! You can tell if an image doesn't have a transparent background if the background isn't gray and white checkered.

Select the Magic Wand tool...

and click on the background (won't work well for some images, which I'll go over some other time). Press Delete on your keyboard!

Now that we got that roadblock out of the way, we have to resize the image to be the same as that of the area for Karma icons on a profile. Each square is 35x35, so we will have to resize our image to just that. Go to Image -> Resize

Now uncheck Maintain Aspect Ratio, resize by absolute size,
and type in 35 for both width and height. Click OK.

Now you've resized your image to fit into your Karma!

Save this image, it will be what i call the base or primary karma icon.
You can use it to replace your filled stars or modify it to whatever you want your filled stars to be.
I save the image as leafprim.png, as png is transparent, and it'll help me remember it is the main Karma icon for step 3A.

3A. Color Coated Karmaprotip: Ctrl + Z = undo
You can make your Karma icon into anything after Step 2, but some ways might not look good. Having 3 colors for your Karma is simple and looks great with any picture! Just so you can remember what icons you'll be working on~
 

NEGATIVE STAR.PNG - The blank stars you've yet to fill! (for example, almost everybody's 5th star is blank.)

STAR #[1-5] HIGHLIGHT.PNG - Replace these with the image that will appear when you hover over the karma with the mouse.

FILLED STARS.PNG - The image in place for all your COMPLETELY FILLED STARS (eg. star 1-3 for most people are already filled)

HALF STAR.PNG - The image in place for your half a karma icon. (eg: my 4th star is half)
 

3AI. Filled Star
Already completed, I'll be using the plain resized leaf. However I'm sure you'll know how to make a custom filled star by the time we finish this.
3AII. Negative Star
For the negative leaf easy and common choices to settle for are invert, or black & white.
Black and White
Really easy. Go to Adjustments -> Black and White

Voila! That was so easy.

Invert
Just as easy as Black and White, it'll make the image have the exact opposite colors. Really fitting for something "negative" eh?
Adjustments -> Invert Colors

Now the image's colors are inverted.

You aren't gonna make the coolest things with only Inverts and desaturation though... play around and see what else you can get!
I settle for the invert cause it looks pretttttyyyyy.
Save it as something that will let you remember it is your negative icon.
I save it as leafnega.png
3AIII. Half Star
I want to make cut in half from the tip to the stem, I would normally grab the lasso tool, but as I can't seem to grasp using it with Paint.NET we'll be using the Rectangle Select tool.
I use the rect select tool on the Right half of the image, however since it's so small I zoom in first. protip: Ctrl + D to deselect if you mess up, or Ctrl + Z

Select the rectangle select tool.

Create a box over the right half of your image. It doesn't have to be exactly half, sometimes it will look better if it isn't perfect.

Press Ctrl + X or Ctrl + C to cut/paste it. Reset your zoom to 100%. Open up the primary image icon you saved earlier, and press Ctrl + V to paste.

You are now down the half icon!
Save it as whatever you want to remember it is the half icon.
I save my example as leafhalf.png
Almost doneeee.
3AIV. Highlighted Stars
As I'm not a Paint.NET expert, this part is going to be horribly explained.
I went to Adjustments -> Curves, Luminosity -> RGB
And played around and got this random cool color I liked LOL.

I saved it as leafhilite.png
Now we have an image for each of our Karma icons!

4. Creating the profile code
You've got all your images saved, they're all PNG and 35x35. The last step is to get it onto your profile to replace the boring Karma Stars!
Upload the hilite, primary, negative, half images all to an image hosting site such as
Tinypic,
Imageshack, or my personal favorite!
puu.sh (requires download)
Here is the link to my Karma template. link
Now replace the "XYZ.PNG" parts with the direct link to the images you just uploaded.
for example, I uploaded leafhilite.png, copied the url and replaced all 5 star highlights.

For reference of where to place image links:
 

NEGATIVE STAR.PNG - The blank stars you've yet to fill! (for example, almost everybody's 5th star is blank.)

STAR #[1-5] HIGHLIGHT.PNG - Replace these with the image that will appear when you hover over the karma with the mouse.

FILLED STARS.PNG - The image in place for all your COMPLETELY FILLED STARS (eg. star 1-3 for most people are already filled)

HALF STAR.PNG - The image in place for your half a karma icon. (eg: my 4th star is half)
 


After replacing the necessary text in the template, I end up with a code!
Code:
<style text="text/css">#hasStars .hasStar, #hasStars.hasEmpty .hasStar {
background:url(http://puu.sh/iMQs) !important;}.show1 #star1,.show2 #star1,.show3 #star1,.show4 #star1,.show5 #star1{background:url(http://puu.sh/iMQD) !important;}.show2 #star2,.show3 #star2,.show4 #star2,.show5 #star2{background:url(http://puu.sh/iMQD) !important;}.show3 #star3,.show4 #star3,.show5 #star3{background:url(http://puu.sh/iMQD) !important;}.show4 #star4,.show5 #star4{background:url(http://puu.sh/iMQD) !important;}.show5 #star5,.starvenuya e{background:url(http://puu.sh/iMQD) !important;}.has1 #hasStar1,.has15 #hasStar1,.has2 #hasStar1,.has2 #hasStar2,.has25 #hasStar1,.has25 #hasStar2,.has3 #hasStar1,.has3 #hasStar2,.has3 #hasStar3,.has35 #hasStar1,.has35 #hasStar2,.has35 #hasStar3,.has4
#hasStar1,.has4 #hasStar2,.has4 #hasStar3,.has4 #hasStar4,.has45 #hasStar1,.has45 #hasStar2,.has45 #hasStar3,.has45 #hasStar4,.has5 #hasStar1,.has5 #hasStar2,.has5 #hasStar3,.has5 #hasStar4,.has5 #hasStar5{background:url(http://puu.sh/iMQh) !important;}.has05 #hasStar1,.has15 #hasStar2,.has25 #hasStar3,.has35 #hasStar4,.has45 #hasStar5{background:url(http://puu.sh/iMQS) !important;}</style>


Put it in the Flash/Media section to test/for use.


And it works!
Ask any questions of any problems you run into I'll be glad to answer them.

DO NOT REQUEST FOR KARMA THEMES IN THIS THREAD
Advertisement

Aesopl

Rank 1
Aesopl
Joined
22 Jul 2011
Posts
284
Location
Ajax ON Canada
PostedFeb 27, 2012 8:45 pm

Advanced Karma Creation

Who knows if I'll ever even use this post? o.o
reserved.

mauiceee

Rank 1
Joined
21 Oct 2010
Posts
299
Location
Will be back in The United States
PostedFeb 27, 2012 8:52 pm
I'm too lazy to make one Dylan. : D

stormcanuck19

Rank 2
stormcanuck19
Joined
21 Dec 2009
Posts
664
Location
Vancouver , Canada
PostedFeb 27, 2012 9:21 pm
I'll help join your Karma crew.....

if you pay me 1k gold per. loool JK

looks good so far, creating these karma is very very easy that just takes a few min tops, the only thing that could take long is finding those high quality images.

Actually you know what, if i have time, i can split the work if you want.

<center>

| Alice/Bodor/Ponchee | Crimsonited | PhoenixAero: 8X SharpShooter | CrimsonTalon: DarkStalker |
</center>

crystalpink

Rank 5.1
crystalpink
Joined
17 Aug 2009
Posts
7366
Location
Los Angeles United States
PostedFeb 27, 2012 9:46 pm
Nice, Dylan.

If you could provide a guide using GIMP, that'd be great, too ^^

iBambi

Rank 5
iBambi
Joined
05 Oct 2010
Posts
4849
Location
Whale hunting in Norway
PostedFeb 28, 2012 12:57 pm
mauiceee wrote:
I'm too lazy to make one Dylan. : D  


I agree. This looks complicated. :c

Aesopl

Rank 1
Aesopl
Joined
22 Jul 2011
Posts
284
Location
Ajax ON Canada
PostedFeb 28, 2012 4:24 pm
Bump finished the first post.

iBambi

Rank 5
iBambi
Joined
05 Oct 2010
Posts
4849
Location
Whale hunting in Norway
PostedFeb 29, 2012 6:13 am
You told me to wait before saying it's complicated, but it's already complicated, how can more steps make it easier. :c

Aesopl

Rank 1
Aesopl
Joined
22 Jul 2011
Posts
284
Location
Ajax ON Canada
PostedFeb 29, 2012 2:37 pm
I'd also greatly appreciate if anyone who makes their own Karma themes posts it here as I love seeing them!

Check out Ferisea's awesome Karma she made herself.

crystalpink

Rank 5.1
crystalpink
Joined
17 Aug 2009
Posts
7366
Location
Los Angeles United States
PostedFeb 29, 2012 4:51 pm
I used your CSS template to make my own karma images.

And last night, I used your CSS template again to make karma images for my kitty (leeleesan).

^^v

Display posts from previous:   Sort by: