Transparent Avatars?
#1
I had noticed many of the people on here use avatars with transparent backgrounds. The problem for me is that my current photo-taking program Snagit 13 doesn't really allow that. The closest I could get is hand drawn photo borders, which is really bad when I do it. Is there any way to work around this or is there a software that lets you have transparent backgrounds in photos?
[size=150]
I am not altogether on anybody's side, because nobody is altogether on my side...
[/size]
[html]<div class="snazzysig1">
<div class="title">Cloudy Irill</div>

<div class="bottom">
<div class="sigicons" id="signature-icons">
<a href="http://wiki.soulsrpg.com/index.php?n=Players.PLAYERNAME" target="_blank" title="PLAYER WIKI" class="player-wiki"></a>
<a href="viewtopic.php?f=13&t=1" target="_blank" title="POST LOG" class="post-log"></a>
<a href="#" class="reply-medium" title="REPLY SPEED: MEDIUM"></a>
<a href="http://wiki.soulsrpg.com/index.php?n=Characters.Cloudy_Irill" target="_blank" title="CHARACTER WIKI" class="character-wiki"></a>
<a href="#!" title="I will NOT roleplay sex, but other things should be fine." class="no-mature"></a>
</div></div><!-- Admin: I added div tag closers here; please remember to count and close all your tags in the future-->
<div class="bottom">
<div class="sigicons" id="signature-icons">
<a href="#!" class="character-note" title="Cloudy is highly unhumanized and would not understand riding horses, wearing clothes, or using weapons for some time."></a>
<a href="#!" class="lupus-preference" title="LUPUS unless otherwise stated."></a>
<a href="#!" class="references-okay" title="OOC references okay. She can be seen chatting a lot with others and practicing hunting."></a>


</div>

<div class="packicons">

</a>
</div>
</div>
</div>

<style>
@import url('http://sleepyglow.net/rp/icons/signature-icons.css');
</style>
<style type="text/css">
.snazzysig1 {
width:60%;
margin:0px auto;
}
.snazzysig1 .title {
margin:0px auto;
text-align:center;
padding:0px 5px 3px 5px;
border-bottom:1px solid rgba(0, 0, 0, 0.75);
font-family:'Garamond', serif;
font-size:18pt;
text-shadow:0px 0px 3px rgba(0, 0, 0, 0.75);
letter-spacing:2px;
word-spacing:4px;
text-transform:uppercase;
}
.snazzysig1 #signature-icon {margin:0px auto; text-align:center;}
.snazzysig1 .sigicons {
text-align:center;
margin:0px auto;
line-height:1em;
padding:2px 0px 2px 0px;
}

}
</style>
[/html]
  Reply
#2
GIMP is free and lets you make transparent backgrounds via a few tools. There is also SAI, Freeware Alpaca, Inkscape, and Kirta.

I prefer GIMP because it's easy to use Smile I either use the Fuzzy Select tool and select the background and then delete it. But, sometimes it doesn't work so then I select the background, right click, and then do Select > invert and the copy. Then I do File > Create from clipboard and viola, avatar!

Also, your sig might be broken. Count your div tags! It's either too many or too little <3
[html]
<div class="Avisig2"><div class="bottom"><div id="signature-icons" class="iconblock" style="padding-top:0px; margin:0px; float:left;"> <a href="http://wiki.soulsrpg.com/index.php?n=Players.Silverfrost" target="_blank" title="PLAYER WIKI" class="player-wiki"></a> <a href="http://wiki.soulsrpg.com/index.php?n=Players.SilverfrostAdoptions" class="adoptables-available" title="ADOPTABLES available!"></a> <a href="LINK" title="OPEN FOR THREADS!" class="open-for-threads"></a> <a href="#!" class="reply-medium" title="REPLY SPEED: MEDIUM"></a> <a href="#!" title="I will roleplay LASKY." class="will-lasky"></a> <a href="#!" title="I will roleplay mature material." class="will-mature"></a><br>
<a href="http://wiki.soulsrpg.com/index.php?n=Characters.Avinalora" target="_blank" title="CHARACTER WIKI" class="character-wiki"></a> <a href="http://imgur.com/a/D2STM" target="_blank" title="CHARACTER GALLERY &amp; CREDITS" class="ic-gallery"></a> <a href="#!" class="secui-preference" title="Uses all forms equally equally. Refer to thread for details."></a> <a href="LINK" class="permanent-disability" title="Avinalora is nearly blind and has a lame leg"></a><a href="https://soulsrpg.com/forum/viewtopic.php?p=270615#p270615" target="_blank" title="POST LOG" class="post-log"></a><a href="#!" class="mature-character" title="Avinalora swears a lot. Sensitive viewers beware."></a><br><a href="#!" class="apparel-accessories" title="Avinalora can be seen in clothing a lot. Check thread for details"></a><a href="#!" class="references-okay" title="OOC references okay."></a>
<a href="#!" class="character-typical-location" title="Avinalora is typically found in Anathema or within 60 miles of the territory"></a>
<a href="#!" class="skill-medic" title="Avinalora is a skilled medic."></a>
<a href="#!" class="skill-scholar" title="Avinalora is skilled at reading and writing."></a><a href="#!" class="skill-animals" title="Avinalora is skilled with owls, cats, and corvids"></a></div>
<div class="buttonblock" style="margin:0px; float:left;padding-right:201px;"><center> <a href="http://wiki.soulsrpg.com"><img src="http://soulsrpg.com/images/pride/promo/wiki_88x31.png" style="border:0px;" title="Check out the 'Souls Wiki!" title="Check out the 'Souls Wiki!" /></a> <br><a href="http://anathema.soulsrpg.com/joining"><img src="http://anathema.soulsrpg.com/public/images/pride/anathema_88x31c.png" style="border:0px;" title="Join Anathema!"></a></center></div> </div> </div> <style> @import url('/images/icons/postsig/signature-icons.css'); @import url('http://sleepyglow.net/rp/icons/signature-icons.css'); </style> <style type="text/css">
#signature-icons a.permanent-disability { background-image: url('http://i.imgur.com/XVMFfdB.png'); }
.Avisig2 {width:290px;margin:0px auto; background-image:url('https://i.imgur.com/Ja51G8X.png'); background-position:top right; background-repeat:no-repeat; background-size:288px; height:198px;padding-right:161px;}
.Avisig2 .title {margin:0px auto;text-align:left;padding:5px; font-family:'Merriweather', serif;font-size:11.8px;letter-spacing:-.6px;text-transform:lowercase;opacity:0.7; } .Avisig2 .buttonblock a {opacity:.85; filter:alpha(opacity=80%); transition:200ms linear all; -moz-transition:200ms linear all;}
.Avisig2 .buttonblock {margin:5px;width:230px;float:left;padding-right:197px;}
.Avisig2 .buttonblock a:hover, .Avisig2 .buttonblock a:active, .Avisig2 .buttonblock a:focus { opacity:1; filter:alpha(opacity=100%); }
.Avisig2 .iconblock { font-size:0; margin:0 auto;}
.Avisig2 .iconblock { font-size:0; margin:0 auto; }
.Avisig2 #signature-icons a:hover,
.Avisig2 #signature-icons a:focus,
.Avisig2 #signature-icons a:active {opacity:1;filter:alpha(opacity=100%);}
.Avisig2 .iconblock a { opacity:.65; filter:alpha(opacity=90%); transition:200ms linear all; -moz-transition:200ms linear all; border-radius: 50%; border: 1px solid grey; } .Avisig2 .iconblock a:hover, .Avisig2 .iconblock a:active, .Avisig2 .iconblock a:focus { opacity: 1; filter:alpha(opacity=100%); box-shadow: 0px 0px 2px #000;border:#30712d 1px solid; }
</style> <link href='http://fonts.googleapis.com/css?family=Merriweather:400,400italic' rel='stylesheet' type='text/css'> [/html]
  Reply
#3
If the image you're working with already has a transparent background, all ya gotta do is save it as a PNG and it'll keep the transparent background :)
[html]
<div class="LithSig">
<img src="https://i.imgur.com/hlorMYI.png" style="height:350px; z-index:-1; margin:0px 0px -70px;">
<div class="buttonblock">
<a href="https://wiki.soulsrpg.com/index.php?n=Players.SammiieAdopts"><img src="http://pile.randimg.net/0/91/22980/Adoptable%20Buttons.png"></a>
<a href="http://salsola.soulsrpg.com/culture/joining"><img src="https://images2.imgbox.com/c7/02/KahZHq8m_o.png"></a>
<a href="https://wiki.soulsrpg.com/index.php?n=Packs.SalsolaAdoptables"><img src="http://i.imgur.com/6rQpoaQ.png"></a>
</div>
<div id="signature-icons" class="iconblock">
<a class="optime-preference" title="OPTIME unless otherwise stated."></a>

<a href="https://imgur.com/a/EDGTf" target="_blank" title="CHARACTER GALLERY &amp; CREDITS" class="ic-gallery"></a>
<a href="http://wiki.soulsrpg.com/index.php?n=Characters.LithiaNapier" target="_blank" title="CHARACTER WIKI" class="character-wiki"></a>

<a class="character-typical-location" title="Typically found in the Northern Tides, but occasionally comes to Seabreeze Brink."></a>
<a class="apparel-accessories" title="Wears a leather skirt, purple or black crop top, and a ruby necklace (see Wiki!)"></a>
<a class="accompaniment" title="Lithia is often accompanied by her slave, Totem, unless otherwise stated"></a>
<a class="scent-warning" title="Disguises her scent with pine, dirt, and budding flowers."></a>
<a class="skill-fighting" title="Lithia is a skilled fighter, specializing in the use of short swords or daggers."></a>
<a class="skill-stealth" title="Skilled in stealth."></a>
<a class="skill-trade" title="Character is skilled in trade."></a>

</div>
</div>

<style>
@import url('/images/icons/postsig/signature-icons.css');
.LithSig {margin:0 auto; text-align:center; margin:0 auto; }
.LithSig .buttonblock { margin:0 auto; }
.LithSig .buttonblock a { opacity:.7; filter:alpha(opacity=70%); transition:300ms ease-in all; -moz-transition:300ms linear all; }
.LithSig .buttonblock a:hover, .LithSig .buttonblock a:active, .LithSig .buttonblock a:focus { opacity:1; filter:alpha(opacity=100%); }
.LithSig .iconblock { margin:0 auto; }
.LithSig .iconblock a { opacity:.75; filter:alpha(opacity=75%); transition:300ms ease-in all; -moz-transition:300ms linear all; }
.LithSig .iconblock a:hover, .LithSig .iconblock a:active, .LithSig .iconblock a:focus { opacity: 1; filter:alpha(opacity=100%); box-shadow: 0px 0px 2px #000; border-radius:50%; }
</style>
[/html]
  Reply
#4
<!-- m --><a class="postlink" href="https://www140.lunapic.com/editor/?action=transparent">https://www140.lunapic.com/editor/?action=transparent</a><!-- m -->

You can use some online editors like this to select a colour and it’ll make whatever you selected transparent. It’s definitely not perfect or as clean as Photoshop or Painter SAI, but a decent resort to those without those programmes (I had to use this method before, I feel ya).
[html]
<div class="basilSig">
<img src="https://i.imgur.com/tWAv92J.png" style="height:200px; z-index:-1; margin:0px 0px -50px;" />
<div id="signature-icons" class="iconblock">
<a href="#" class="optime-preference" title="OPTIME unless otherwise stated."></a>
<a href="#" class="apparel-accessories" title="Basil most often may wear a black shirt buttoned to the neck or a plain mauve t-shirt. He may also wear black pants or black cut-off shorts, depending on the weather. During winter, he can be seen with a brown leather jacket. He always wears a necklace of hemp string and a silver ring pendant that his mother made him, as well as a jade rosary."></a>

<a href="http://wiki.soulsrpg.com/index.php?n=Players.Pablo" target="_blank" title="PLAYER WIKI" class="player-wiki"></a>
<a href="http://wiki.soulsrpg.com/index.php?n=Characters.BasilButler" target="_blank" title="CHARACTER WIKI" class="character-wiki"></a>

<a href="#!" target="_blank" title="Basil speaks French. When they speak English, it is moderately accented (Cockney)." class="foreign-language"></a>
<a href="#" class="reply-slow" title="REPLY SPEED: SLOW"></a>
<a href="#!" class="skill-scholar" title="Basil is a skilled scholar."></a>
<a href="#!" class="skill-spirituality" title="Basil is a skilled spiritualist (Catholic)."></a>
<a href="#!" title="I will roleplay mature material." class="will-mature"></a>
</div>

</div>

<style>
<style type="text/css">
.snazzysig1 {
width:60%;
margin:0px auto;
}
@import url('http://sleepyglow.net/rp/icons/signature-icons.css');
.basilSig {margin:0 auto; text-align:center; margin:0 auto; }
.basilSig .buttonblock { margin:0 auto; }
.basilSig .buttonblock a { opacity:.7; filter:alpha(opacity=70%); transition:200ms linear all; -moz-transition:200ms linear all; }
.basilSig .buttonblock a:hover, .basilSig .buttonblock a:active, .basilSig .buttonblock a:focus { opacity:1; filter:alpha(opacity=100%); }
.basilSig .iconblock { font-size:0; margin:0 auto; }
.basilSig .iconblock { font-size:0; margin:0 auto; }
.basilSig .iconblock a { opacity:.7; filter:alpha(opacity=70%); transition:200ms linear all; -moz-transition:200ms linear all; }
.basilSig .iconblock a:hover, .basilSig .iconblock a:active, .basilSig .iconblock a:focus { opacity: 1; filter:alpha(opacity=100%); box-shadow: 0px 0px 2px #000; }
</style>
[/html]
[size=85]signature image by Lin[/size]
  Reply


Forum Jump: