Avatar help
#1
Hey everyone!

As you can see from by current avatar, I don't know how to make the image background transparent. I use a combination of Gimp and Paint (to make images into png.). Does anybody know how to get rid of the white backgrounds?
[html]<style>
@import url('http://fonts.googleapis.com/css?family=Clicker+Script');
@import url('http://sleepyglow.net/rp/icons/signature-icons.css');
.CHARACTERSigOuter {width: 400px; margin: 0 auto; text-align: center; background-image:url(''); background-repeat: no-repeat; background-position: top center; padding-top: 135px;}
.CHARACTERSigName {font-family: 'Clicker Script'; font-size: 28px; text-shadow: 0 0 5px #fff; margin-bottom: -30px;}
.CHARACTERSigSplit {border-bottom: 1px solid black; margin-bottom: 5px; margin-top: -5px;}
#signature-icons a {
background-repeat: no-repeat;
display:inline-block;
position:relative;
margin:0;
opacity:.35;
filter:alpha(opacity=35%);
transition:200ms linear all;
-moz-transition:200ms linear all;
border-bottom: 3px solid transparent;

}
.CHARACTERSigOuter #signature-icons a:hover,
.CHARACTERSigOuter #signature-icons a:focus,
.CHARACTERSigOuter #signature-icons a:active
{
opacity:1;
filter:alpha(opacity=100%);
border-bottom: 3px solid #f0d82a; /* change the color under the icons when you hover over them on this line */
}
</style>

<div class="CHARACTERSigOuter">
<span class="CHARACTERSigName">Adrian Raven-Shadowryn</span>
<div class="CHARACTERSigSplit"></div>
<div id="signature-icons">
<a href="LINK" class="adoptables-available" title="ADOPTABLES available!"></a>
<a href="LINK" title="OPEN FOR THREADS!" class="open-for-threads"></a>
<a href="http://wiki.soulsrpg.com/index.php?n=Players.Silverfrost" target="_blank" title="PLAYER WIKI" class="player-wiki"></a>
<a href="#!" class="reply-fast" title="REPLY SPEED: FAST"></a>
<a href="#!" title="I will roleplay LASKY." class="will-lasky"></a>
<br>
<a href="#!" class="apparel-accessories" title="Adrian typically wears clothes (See wiki)."></a>
<a href="http://wiki.soulsrpg.com/index.php?n=Characters.Adrian Raven-Shadowryn" target="_blank" title="CHARACTER WIKI" class="character-wiki"></a>
<a href="#!" class="accompaniment" title="Adrian is typically accompanied by Cobalt (cNPC)"></a>
<a href="#!" class="references-okay" title="OOC references okay."></a>
<a href="#!" class="optime-preference" title="OPTIME unless otherwise stated."></a>
<a href="#!" class="skill-fighting" title="Adrian was a former assassin"></a>
<a href="#!" class="skill-stealth" title="Adrian is skilled in stealth."></a>
</div>
</div>[/html]
  Reply
#2
Here's your avatar with a transparent background:
[Image: GVwcA3T.png]

I did a quick walk through on how to make transparent backgrounds in gimp :3 Click images to enlarge.

Open your file.

Select the colour tool as shown here:


Click anywhere on the white background (or whatever colour you wish to remove). This will select all of that specific colour on the image. Resulting in the following:


Press delete on your keyboard. The background should now be replaced with the checked one shown. Right click, select, none to remove your selection now.


Ctrl+shift+e on your keyboard or file - export from the menu to save your file as a .png with transparent background.



Your file should now be saved as .png with a transparent background :3
[html]<div class="NivosusSigIcons">
<div class="Nivosussigtextbox">
<div class="NivosusSigname">By the grace of the fire and the flames</div>
<div class="NivosusSigname2">YOU'RE THE FACE OF THE FUTURE, THE BLOOD IN MY VEINS</div>
</div>

<div class="Nivosussigicons" id="signature-icons">
<a href="https://wiki.soulsrpg.com/index.php?n=Players.Kitty" target="_blank" title="PLAYER WIKI" class="player-wiki"></a>
<a href="https://www.soulsrpg.com/forum/viewtopic.php?f=13&t=16051" target="_blank" title="POST LOG" class="post-log"></a>
<a href="https://wiki.soulsrpg.com/index.php?n=Players.KittyAdoptions" class="adoptables-available" title="ADOPTABLES available!"></a>
<a href="https://fav.me/d9waoqh" class="commissions" title="COMMISSIONS"></a>
<a href="#" title="I will roleplay mature material." class="will-mature"></a>
<a href="#" class="reply-medium" title="REPLY SPEED: MEDIUM"></a>
<a href="https://wiki.soulsrpg.com/index.php?n=Characters.Nivosus%20Moineau" target="_blank" title="CHARACTER WIKI" class="character-wiki"></a>
<a href="https://imgur.com/a/Ol8m2" target="_blank" title="CHARACTER GALLERY &amp; CREDITS" class="ic-gallery"></a>
<a href="#" class="optime-preference" title="OPTIME unless otherwise stated."></a>
<a href="#" class="mature-character" title="MATURE CHARACTER. Sensitive viewers beware."></a>
<a href="#" class="strong-prejudice" title="Nivosus has a strong prejudice against non-luperci."></a>
<a href="#!" class="skill-stealth" title="Nivosus is skilled in stealth."></a>
<a href="#!" class="skill-social" title="Nivosus is skilled in social skills."></a>
</div>
</div>

<div class="Nivbuttonblock">
<a href="https://wiki.soulsrpg.com/index.php?n=Players.KittyAdoptions"><img src="http://pile.randimg.net/0/144/36029/KittyAdopts.png"></a>
<a href="https://wiki.soulsrpg.com/index.php?n=Packs.SapientAdoptables#toc4"><img src="http://pile.randimg.net/0/144/36028/SapientAdopts.png"></a>
<a href="https://wiki.soulsrpg.com/index.php?n=Packs.SapientAdoptables#toc4"><img src="https://sapient.soulsrpg.com/public/adoptables/Featured_Adoptable_Small.png"></a>
<a href="https://sapient.soulsrpg.com/policies/joining/"><img src="https://sapient.soulsrpg.com/public/Pride/Pride1.png"></a></div>

<style type="text/css">
@import url('/images/icons/postsig/signature-icons.css');
@import url('https://fonts.googleapis.com/css?family=Eagle+Lake|Oswald');

.NivosusSigIcons .NivosusSigname {text-align:center; padding:25px 0 2px 0; font-size:28px; line-height:22px; font-family: 'Eagle Lake', cursive; text-shadow: rgba(255,255,255,.1) -1px -1px 1px,rgba(0,0,0,.5) 1px 1px 1px; letter-spacing:-1px; -webkit-opacity: 0.6; -moz-opacity: 0.6; opacity: 0.6;}
.NivosusSigIcons .NivosusSigname2 {text-align:center; padding:0px 0 2px 0;font-size:16px; line-height:16px; letter-spacing:4px; font-family: 'Oswald', sans-serif; text-shadow:#2B2B2B 0 0 4px; text-transform:uppercase;}

.NivosusSigIcons {max-width: 99%; margin:0px auto;}
.NivosusSigIcons #signature-icon {margin:0px auto; text-align:center;}
.NivosusSigIcons .Nivosussigicons { text-align:center; margin:0px auto; line-height:1em; padding:2px;}
.NivosusSigIcons .Nivosussigtextbox {text-align:center; margin:0px auto; padding:0px;}
.NivosusSigIcons a {-webkit-opacity: 0.45; -moz-opacity: 0.45; opacity: 0.45; -webkit-transition: all .5s ease;
-moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease;-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border:3px solid #8395ae; }
.NivosusSigIcons a:hover { -webkit-opacity: 1; -moz-opacity: 1; opacity: 1;}

.Nivbuttonblock { margin:0px auto; text-align:center; }
.Nivbuttonblock a {-webkit-opacity: 0.65; -moz-opacity: 0.65; opacity: 0.65; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; }
.Nivbuttonblock a:hover { -webkit-opacity: 1; -moz-opacity: 1; opacity: 1;}
</style>
[/html]
  Reply


Forum Jump: