Eleventy-two

Ever since I set my blog up I have been using the awesome pixeled theme by samk, unfortunately it’s so great there are thousands of blogs now using it so I decided to try and make it more my own.  The great thing about this theme is that though it looks like it’s built from complex CSS with layers in transparencies it’s actual much simpler than it looks.  To find out how I created my new theme click the read more button.

The main design is based around one large (60kb) image, so it’s possible to change the look of the site by simply changing or replacing this one image.  So I booted up gimp and loaded the old file to use as a template for my new theme.

The first layer, which is the background “noise” in the theme was created by using the Plasma filter, which was then shifted toward the blue/green hue it hows by using the layer tool to reduce red channel.  Notice that this layer had to be quite bright as the other effects I add later really darken it up.

Next up I added the green slashes of noise which you can see towards the right of the theme.  These were created with the flame filter, if you going to try this just fiddle with the setting until you find something that you like.  Again I colour shifted one of the layers towards green this time by adjusting it’s hue with the Colourise tool.

Next I started work on the glassy fade out around the outside of the theme.  This is simply a black to transparent gradient applied to all four sides of the image.  I used the default “FG to Transparent” gradient in the Gimp and created the gradients in 3 layers so it would easier to tweak later if I needed to and so I could use the layer transparency tool to control how dark I wanted the image.

I added the glass effect banner on the top by again using the linear gradient tool. It is simply three gradients pulled in from the bottom and sides. A trick that I learnt after doing this but that would have been helpful is to create a black rectangle the size of the area you want to work on, you can then make this layer invisible, but if you want to work on only that part of the image again you can use the alpha to selection tool to work on the area again. Alternatively you can create you selection and use the selection to path tool to save the selection, then use the path to selection tool to reselect the area.

Finally I created the centre glass effect. This is simply a two black rectangles with rounded corners with the layer transparency tool controlling how “glassy” they look. The rounded rectangle was created using the “rectangle select” tool, with rounded corners set to 12 then filled black. I used a negative select rectangle to then reduce the size of this rectangle to the top bar of this centre section and also filled it black.

I hope some one finds this useful, and if you like the new style for the theme please let me know in the comments bellow.