HOME | DD
Agaave β PE: Tools for Transparent Background
#gimp #tool #tutorial #pagedoll #transparentbackground
Published: 2015-04-01 08:00:05 +0000 UTC; Views: 12258; Favourites: 97; Downloads: 0
Redirect to original
Description
/* ------------------------------ INSTRUCTIONS ------------------------------ */ /* DO NOT EDIT THIS! UNDER NO CIRCUMSTANCE APPLY CHANGES TO THE CSS IN HERE, THE HEADER OR FOOTER! */ /* ----- Check out the full instructions: http://sta.sh/0h0h2gr62n9 ----- */ /* -----Week title ----- */ /* Put
Artists Toolbox
A guide how to remove background from traditionally drawn pagedolls
Would you like to decorate your page with fun little figures - so called pagedolls - but you're a traditional artist and don't know how to make background transparent behind those dolls? If the answer is yes, then this is a guide for you!
When drawing pagedolls digitally, getting them on transparent background is quite simple β just do not draw any but leave the pixels behind the figure untouched. When you have drawn your pagedoll on a paper, it requires a bit more effort to remove the paper white behind the figure, but it can be done easily with couple of steps. This tutorial advices gives you step by step guidance for transparent background.
In this tutorial the used program is Gimp. Gimp is a free photo editing software, which you can download it here www.gimp.org/ . Of course you can use any program you have available, as long as it supports layers and transparency.
Step by Step Guide
Using stencil layer helps you to minimize time and effort when cleaning the outlines of your doll.
Your layers should be in this order.
This step will transform your opaque pixels to transparent!
Make sure you're operating in correct layer!
Temporary background color allows you to see the areas that still needs to be removed.
Pick all the white background that is left with Magic Wand and press Delete.
When you have only background selected, you don't have to worry about erasing the character.Β
Notice those floating white pixels outside the doll that needs to be erased!
Make sure the file name has .png at its end!
Additional tip:
If you want to change the size of the pagedoll on your page, you can use this code:
1234567890 means a number from the thumbcode. Copy and paste the number from your pagedoll's thumbcode.
Altering numbers after width and height allows you to change the size of your doll. Try out which size looks best on your page!
Discuss!
- Anything to ask or to add?
- Share your best pagedoll tips or show off your pagedolls!
Related content
Comments: 55
Hello, I recently made a pagedoll for the first time following your tutorial and I just uploaded it like you would a normal deviation in my gallery because I do not know if there is a specific place or way your supposed to upload it and I donβt know how to get the png thumb code to show up or where Iβm even supposed to put it in at to change the size. This is my first time doing anything like this, so I feel really in the dark here
π: 0 β©: 1
Hi there, I replied your note! You should choose PNG format already when saving the picture on your computer after removing the background.
π: 0 β©: 1
Hey, sorry for the late reply. Yeah, I saved my pagedoll in the PNG format. But I had to go through some complicated steps to get it on my deviant art since I couldnβt directly upload it on my computer since the computer needs to be brought in to be updated because itβs so behind on updates that it wonβt show certain cites properly, such as deviantart. So, I had to upload the picture to my gmail account pictures album and then send the picture from gmail to my iCloud email account so it would go into the emails on my phone, so that I could save it to my actual pictures on my phone and then upload it to deviantart. Also, I donβt know if maybe sending it from those multiple different things might have done something to it or changed the file in a way as to maybe make it a jpeg. But, I definitely remember saving it quite a few times as a PNG.
π: 0 β©: 1
Hi there and sorry for super late reply! Haven't been around for a while...
Did you solve this problem already? If you didn't, I'd like to ask which program do you use?
I found couple of tutorials how to save a file as PNG:
For SAI:
SAI Version 2 PNG TransparencyOKAY so I don't usually make journals but it took me about 5000 years to find this? Geez thank you SAI
So! Let's say you wanna make a drawing on SAI with a transparent background. Simple enough, right?
Now, if you're using Version 1, it's pretty simple. Just export as PNG, and choose the second option available on the dialog that pops up.
However, SAI Version 2 Beta does not have this option. Up until now, I'd have to save my files as PSDs and export them again. Until I found this other option.
Take this image for example:
Β
Say I wanted to save this with a transparent background. Simply go into "Canvas>Background" and select "Transparent (White)" (or any other colour, so long as it is transparent).
Β
After selecting this, all it takes is selecting "File>Export>Export as .PNG", and you've got yourself a PNG with a transparent background! No other programs needed.
I hope this helped you~
For Gimp:
Yo! + How to save GIMP works as PNGΒ Hey guys, I got my art programs back! So I am back to working. ^^
Oh and as I was using GIMP, it can only save as an xcf file. However! I found a way to solve this problem.
How to save GIMP works as PNG:
Β 1. Make an xcf file of your desired work.
Β 2. Go to file
Β 3. Click export
Β 4. Pick a place you want to put your work in
Β 5. Continue, do any changes you desire in the box that pops up
Β 6. Ok, and finished! ^^
I hope these help you! ^^
π: 0 β©: 1
Thatβs alright, Iβm using gimp and this is the first time Iβve ever tried doing anything like this, since Iβve always done my art traditionally and Iβve never tried editing it digitally before. Also, I think I already have it saved as a png. The only problem I am having now is what are the exact steps I need to follow in order to upload it as a page doll on deviant art and how I can keep the background transparent because if you look at my gallery Iβve uploaded it like a normal deviation because I donβt know exactly how Iβm supposed to upload it for a page doll, and I also donβt know if uploading it like a normal deviation caused the background to still be black.
π: 0 β©: 1
Hmmm, you don't have to do anything special when submitting your pagedoll here. When the file is in png format, you can just upload it here like any other drawings. There isn't any special boxes to check at this point. So I think something has happened when saving the file. I took couple of screenshots from my Gimp so you can check if you have saved your file like this:
1) At first, before doing anything else, check that your transparency settings are on: Layer --> Transparency --> Add Alpha Channel
2) After your drawing is ready, it is time to save. Choose Export:
3) Make sure there is PNG at the end of your drawing's title:
4) After that the box with different settings appear. Check that color values from transparent pixels are saved:
Then click Export and everything should be ready! Now you can submit your drawing here like any other drawing. Last thing you can pay attention is that when submitting, it says PNG on the top right corner of the submission page, under green arrow and Downloads. You don't have to check the Downloads box, this is just take a look at that the file has right format.
Let me know if this helps! ^^
π: 0 β©: 1
Ok, the problem I had was that I couldnβt download the png directly to deviantart on the computer I was working on because whenever I would open deviantart up it wouldnβt show certain things such as the option to upload art to my gallery, and the computer Iβm working on hasnβt been updated in a while, so that may be the issue. So, I tried finding a way around that by sending the png to my email, so I could try using my phone to upload it instead, so Iβm thinking those extra steps I took to get around the issue may have changed the png into something else. So, Iβm planning on getting a nice new laptop soon and hopefully then Iβll be able to properly upload it or something, but thank you for all your help and advice, Iβll get this page doll uploaded properly sooner or later.
π: 0 β©: 1
Hopefully you got this problem solved. ^^
π: 0 β©: 1
I think i might be close, our computer recently got the update that it needed, so I might be able to properly upload the page doll directly to deviantart on the same computer.
π: 0 β©: 0
For digital work, I save it as png file on photoshop 7 and BG doesn't stay transparent when I submit it to DA...
π: 0 β©: 1
Hmmm, so the bg is transparent on your own computer but not after you submit it here?
Do you have any examples uploaded in your gallery?
I don't know if this a problem in your case, but in their latest page update DA changed gallery layout and thumbnails so that there are now light background behind thumbs when you look at the whole gallery. But when looking at a picture in full view, the background is transparent. Like all my pagedolls have now "boxes" behind them when you look at my gallery but luckily they look transparent posted elsewhere.
π: 0 β©: 1
I got BG to work not long after you responded. It was as simple as opening up artwork in PS after done working on it Sai. But, thanks for your quick response.
π: 0 β©: 1
Great, I am happy that you solved the problem!
π: 0 β©: 0
Yaaay! I did it~β₯
Thank you so much for this tutorial *-*
I'm going to check the one about scanning asap 
Have a great day~β₯
π: 0 β©: 1
Yay, you tried this? How did the method work for you?
Have a lovely day you too! Β
π: 0 β©: 1
Yes I did!
I had Gimp, so I just had to follow the steps with no further research! 
Maybe I've messed up a little, but it was my first time after all *-* It worked perfectly! Β Β
So, thank you very very much againΒ Β
π: 0 β©: 1
I am really happy to hear that!
And it is totally my pleasure, knowing that you tried this and it worked for you makes it worth of putting this tutorial together.
π: 0 β©: 0
Nice tutorial! Very easy to follow along and understand. ^^ I'm trying to build my own website (very slow going, lol), and I could see being able to do something like this being very useful for that.
π: 0 β©: 1
Thank you!
You're building your own website? Sounds like an awesome project! I wish you good luck with it and don't forget to post a link when you're ready to show it!
π: 0 β©: 1
Thanks. 
π: 0 β©: 1
Bah, I am sure your site will be fabulous! I hope the coding will spring to your mind quickly. ^^
I have once took Java class but I remember nothing about it... It was quite fun tho. About HTML and CSS I know only those short codes I use here in DA.
π: 0 β©: 1
Heheh, thanks for the vote of confidence! I haven't worked on it in a while though - there's always so many other things I find to do instead! :dummy - but hopefully once I sit down and make myself get into it, it'll come together. XD
Aw, we never made it to Java in our class. 
π: 0 β©: 0
that's some time consuming work but very informative also!!
π: 0 β©: 1
Thank you! Oh and even if this looks like a long method with lots of steps it actually is really simple and much quicker way than trying to erase the background with free hand.
π: 0 β©: 1
anything would be easier
π: 0 β©: 0
It's far easier (though possibly more time consuming depending on the work) to use a mask. Take a gander -Β Layer Masking 101 on Gimp Β Plus it preserves your work so you never really have erased anything.
Nice tutorial though, people probably don't use the alpha channel enough.
π: 0 β©: 1
Ooo, thank you so much for linking that tutorial! I knew there is a thing called masking but never really found out how does it work. I must try that out and see if it makes things easier.
π: 0 β©: 1
You're quite welcome. 
π: 0 β©: 1
OMFG This is really useful! thank u ^_^Β
π: 0 β©: 1
I am happy to hear that!
π: 0 β©: 0
Oh wow, the idea of using a stencil layer is really great and helpful!
π: 0 β©: 1
It helps me a lot, otherwise it would take ages to clean the edges.
π: 0 β©: 0
Thanx sooooooooooooooooo much for this Agaave !!!!!!!!!! I'm very to you for putting up this!
π: 0 β©: 1
Yay, I am glad if you like! Let me know if you try this method!
π: 0 β©: 1
I'll be soon submitting page dolls for my page
π: 0 β©: 1
You're most welcome! 
π: 0 β©: 1
I am glad to hear that!
π: 0 β©: 1
You're very welcome! I am happy if this is useful.
π: 0 β©: 1
| Next =>