customized theme tutorial
a couple of people have asked me how I do my customized themes, most recently messrxpadfoot. so here's a tutorial thing that hopefully makes sense?
first off, I suggest looking at theme-hunter's tutorial list.
but moving on.
I'm going to use my most recent one as an example:
it'll look a bit different as I'm trying to recreate it.
Feel free to shoot me an ask if something doesn't make sense.
(Scroll to the right on my container for all the images to show up fully)
The Background
So first, we're gonna make the swoopy bg for character. This is where the most freedom comes in, really.
For this, I use a free, online program called pixlr that is basically a free version of photoshop without gif capabilities. You don't need to worry about getting a virus because you don't need to download it.
1. Find fanart you like of your character (be sure to credit somewhere when you're all finished).
For this theme, I picked this one of Kirk and a lovely Han Solo by corankizerstone
But I don't want Han in there, even though he's a fucking great character. This is a Kirk blog, I don't need a Han Solo messing up my groove. So it's time to cut out Kirk. As far as I know, I haven't come across any on how to do this on pixlr, so I'll give a basic rundown.
Cut it down as small as you can like so
Now here, I'd suggest just using an eraser. Because using the magic wand tool leaves these annoying white lines and it's a pain in the ass. So. Unlock your background by double clicking the lock icon so it goes from
to
then open a new layer under this one by clicking the circled icon
Have fun erasing. And making your pic transparent. I assume you can deduce what the eraser icon looks like. It's an eraser. so. For larger images (like the one on this blog), I find it better to use their fancier eraser bruses. You can find those by clicking
Now that you've got your transparent Kirk (or whoever your character is), we're gonna add him to a background. You do this by first creating a new image large enough to be a background (I usually go with 900x700). Make your bg transparent by unlocking your background layer, adding a transparent one with the new layer button, then deleting the white layer. Back to Kirk. Select: Edit ---> Select All ----> CTRL+C. Then head on to your 900x700 image and press CTRL+P. Congrats. Your Kirk is now on your background. Move him to where you will. I'll stick him here.
Now my favorite part. Editing the coloring. You can do this by duplicating your layer with your character on it (right click on the layer and select "duplicate layer"). Then fuck around with the Adjustment tab until you find something like. Usually, I up the contrast/brightness/saturation, hit the exposure option and keep at in the 20s. Then play with the curves until I find something I like. Mine came out like (click to make bigger. hopefully.):
Now for some more fun stuff. Using this nifty tool, pick a color for the background, just so you can see what it'll look like (tumblr tends to change colors, so you'll have to delete the solid color layer later and simply make it your bg color on tumblr). I picked this because of the coloring on his comm and by his elbow.
Then we add in the container bg, which should be large enough to hold up to 500px posts. To do this, first make a new layer under your fanart layer, then click on the tool icon with a circle and rectangle overlapping. You can either use a rectangle or circle. I went for a cirle in this one. Using the color picker tool again, choose the color for your container. I moved Kirk a bit as I forgot to make room for the title/description. Oops.
Then by right clicking on your container bg, you can choose "Layer Styles" and select "Drop Shadow". You can do that however you think looks best. I chose:
Now for title/description. These can be whatever you want them to be, with whatever fonts you want in whatever place. Mine look like:
Congrats. Now you have your bg. You can delete the solid color and save it as a png. Mine with the solid color is:
Upload it as a static file here and save the url.
Coding/Theme
Now on to the tedius and painful part. The coding.
Choose a theme. Most people use ones from hollywhood or octomoosey. I prefer hollywhood. For my theme on geniusxx I used this base code.
Delete the sidebar/things you don't need below the <body> tag. BE VERY CAREFUL HERE. You don't want to delete something important. Change your bg color to whatever your solid color was.
Upload your picture to the background. CTRL+F body { then add this below that bracket thing:
background-image: url(yoururl.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom right;
only replace "yoururl.png" with whatever your image's url is. And bottom right can be bottom left, or top right/left.
Add this code before </style> #contain { width: 400px; height: 200px; padding: 100px; position: fixed; overflow-y: scroll; overflow-x: hidden; margin-top: 150px; margin-left: 450px; } and add <div id="contain"> before the post <div> which will be before the {block:Posts}. Then add </div> after {/block:Posts}.
Change the margin-top and margin-left until it fits inside your background container shape.
I'm way too lazy to explain how to add links, so simply add an updates tab and put them there.
Congrats! You done it! You made a theme!
