TUTORIAL: Theme backgrounds!
Hey, guys! It’s tutorial time with Chii!
I was asked about making theme backgrounds earlier, so I figured I might as well share my process in hopes it might help anyone out!
I use a combination of GIMP and PHOTOSHOP to make my themes, and they’re usually made to suit octomoosey’s the sketch theme, as I personally find it easier to work with-- and way more customizable! Anyways, let’s get started!
first, I open a 1280x720px document in gimp-- I’ve found this is usually the average size for laptop screens? You can make this smaller or larger if you need to, but beware of screen resolutions-- something too big may not show up properly on others’ screens!
next, I open the piece of art I want to use as a new layer-- in this case, it’s Fire Emblem Cipher artwork of Gaius. I try to stick to using official art as often as I can when making themes-- IF YOU WANT TO USE FANART, MAKE ABSOLUTELY SURE THE ORIGINAL ARTIST IS COOL WITH IT FIRST.
Next, I block out squares where the theme content is going to go! The smaller one is for the sidebar, and the bigger one is for the posts! These can be any size and located anywhere you want. The default post size for the theme I would be using here is 400px, so I made the content box 450px. It gives the posts a bit of room! If you want to make your box smaller go right ahead, but you’ll need to edit the code a bit in the html to make your posts fit.
Now that I have my framework out of the way, it’s time to save the document!
ummm, ignore my weird file names. As you can see, I’m saving it as a .psd-- This way, I can open the document in more than one place and retain its layers. If I didn’t want to use Photoshop I could open it in Paint Tool SAI, for example! But I like using Photoshop.
Alright, helloooo Photoshop! As you can see, the layers were retained when we ported it over. You can do the following in Gimp or other programs, too, but as Photoshop is laid out differently you may have to search around for the tools you’re looking for.
First thing’s first, I start adding the colours I want to the theme. The Cipher art is blue, so I decided to use a predominantly blue colour scheme! I also added a whole bunch of paint splatters on a layer above the background for effect. To see what I was doing, I unchecked the layer with Gaius on it. These are custom brushes I downloaded from deviantart-- Searching the tags can yield interesting results!
Next, I made Gaius visible again and turned the layer into a clipping layer so that the art only showed up within the borders of the paint splatter. You COULD stop here and call it a day if you really wanted to, but if you’re anything like me, you like detail work and really making things pop.
To do that, I started playing around with adjustment layers! I won’t go into a whole bunch of detail as to what these do, as there are plenty of tutorials out there, but I’ll talk about the ones I used.
Colour Balance: This adjustment type allows you to alter the colour scheme of your piece by moving three different bars around: Cyan/Red, Magenta/Green, and Yellow/Blue. You can move them in three different ways, too-- Shadows, Midtones, and Highlights! For example, selecting Shadows and moving the gauge on the Yellow/Blue bar towards blue will make the shadows in the art that much bluer. Experiment with this to find colours you like!
Hue/Saturation: Here, you can adjust the saturation and hue of the entire picture, or by specific colour. You can rotate a slider to shift your selection on the colour wheel, make the selection duller or more vivid, and even lighten and darken it!
Vibrance: This is kind of like saturation on another, smaller scale. The lower the vibrance, the duller the picture will be.
Brightness/Contrast: And finally, you can lighten and darken your piece, then make it duller or contrast more here! Pretty self explanatory, I think?
Anyways, that’s what I usually do to a picture, in that order; Changing the order of your layers around can yield different effects. Try it out!
While I really liked how the colours looked after editing, I also didn’t want the theme to be quite so red-- To fix that, I added another layer at the very top and filled it in entirely with blue. I then changed the layer to overlay. It ended up being a little too blue for my liking, so I lowered the opacity down to 70%.
Finally, I added a few more details! Extra paint splatters, a few white dots, some text... Really, you can go wild here! I also added one more layer of blue, dropped its fill to around 30% and set the layer style to hue for just a little more kick.
When you’re done, save it as a .png, aaaaaand...
Ta-daaaaaa! There you have it-- How I make my backgrounds! From there, I usually install the theme and then upload the background from the editor. In the case of my current theme, since it’s a .gif I had to do a little extra step-- I uploaded the .gif to imgur, then went into the code and found background in the... body section, I believe? From there, I simply swapped what was in the code with a url to the .gif. c:
A thing I like to do is also make the theme background from the editor the same colour as the image I put together-- that way, if your theme ends up being too small to fit someone’s screen, that way it’s nice and seamless.
Well-- That’s how I do things! I really hope this helps someone in some way, I had fun putting this together, and I’m always happy to try and help anyone who might want it!
