Currently Reading
Find me elsewhere:
Your book counter - make it fun and pretty! (Reblogged from Anna)
One thing I was jealous of in a wooden theme was a book counter. And since I couldn't get over it, I made my own:
First we need to create our background picture, but if you don't want to do it, and like the one I use, here's a link (and skip to the part II of this tutorial):
http://24.media.tumblr.com/bfe31175fd6790cb85817cb6620b8ea0/tumblr_mtwj80XpoV1sakj51o1_250.png
For the rest of you that want to know how to make your own picture, stick around.
PART I
1
You'll need a program to cut out your image. I use PhotoFilter 7 (because it's free and I don't want to go to jail)
2
You need an image (I claim no copyrights. Don't sue me):
3
Open it in your image editor and remove all the unwanted stuff.
Start with duplicating layers (right click on a background layer and then click duplicate):
4
Switch to a background layer (an active layer is highlighted with orange) Just click on a background one, and you'll get this:
5
Then on your right side change settings:
So that you get this:
6
Now switch back to a layer1. You can use an eraser (or any preferred tool) to get rid of the white.
* A tip - if you click somewhere with an eraser tool, and then hold the shift key and click in other place, it will clear a straight line between those two points. You can just hold shift and click around your edges.
7
If it'll make you see better, create another new layer. Fill it with black, place it under layer1 you're working on, to see better if you're erasing properly (get accustomed with tools on your own. Leading you step by step would take forever. Unless I knew how to make a video... Which I don't).
See? Now I can crop my image much better. I like to do it near the end to see what did I miss. Or turn the visibility of black layer on and off. I find working with it constantly visible underneath annoying in a long run. I much prefer a chequered background.
You could also make it gray
8
Keep working until you're satisfied.
There. Much better
9
Remove unnecessary layers:
10
Now let's crop our image to the right size:
Adjust the size of a selection, then right click, crop:
11
Now resize a whole image to what you want to use on your page (remember that size! You'll need it later!)
12
And now it's time to save. Don't worry about background, just keep it hidden.
Save as png file That's the key part!
It will spit at you:
Just say yes.
YES! OUR BACKGROUND IS DONE! MUAHAHAHAHAHAHAHA
(Don't you dare bitching about it! Making this tutorial took me forever. Making a book counter took me less than 20 minutes)
Upload it to some site to get an url to it (pintrest, tumbrl... whatever you like)
PART II
1
Now a much easier part. Go to
settings-> blog -> customize -> edit HTML
and find this part
Use a search engine, I don't want to hear that you can't find the code. If you don't... )
2
Let's make some merry changes!
3
It worked but it needs customizing. The code in quotation marks will be:
background-image: url (http://24.media.tumblr.com/bfe31175fd6790cb85817cb6620b8ea0/tumblr_mtwj80XpoV1sakj51o1_250.png);
width: 220px;
height: 112px;
4
Now it would be nice to change font colour and the size of the number of books:
That's a line of code in question:
Let's add:
style="font-size: 40pt; color: DarkSlateGray; padding-top: 7px; "
*padding -> an inner margin. It moved the number and the text down my image a bit, so it wouldn't touch the top border of book in my background.
*As always, you can put in a name of a colour or it's code number.
5
It's too crowded around my counter, so I'll add some empty spaces:
Much better.
As always don't forget to save.
THE END
If you want to further mess with code, please do. You can get rid of the word "BOOKS" or do anything you want.
Any questions? Please ask.
1 )
