Customised banner

[selenay]

For the first time in my LJ career, I now have a customised banner for my LJ. And I'm feeling rather pleased with it :-) When I have a few minutes, I'll pop it up on the Haven for anyone interested in owning their own greyscale Doctor Who-Stargate fan banner :-)

And now I must eat lunch and do post office things. Hmm.

Comments

[riverfox.livejournal.com]

That is so very damn cool. I love it! :)))

[selenay]

Thank you :-) I've never bothered with a custom banner before, but this layout makes it really easy to find a place for a banner that flows with the design so I'm feeling very proud of it.

[riverfox.livejournal.com]

You should be proud of it, it's so pretty, so cool (pardon the pun, given the color *g*). I'm just as proud of the one I made, so I can definitely understand that one. :)

Can you share how you did it???

[alyburns.livejournal.com]

I would love to make one, but have found a way!

Re: Can you share how you did it???

[selenay]

*g* The simple bit is adding a few lines to the Custom CSS page in your Edit Journal page:

#header {
background-image: url(http://www.mydomain.com/images/lj-banner01.jpg)
}

Change the URL to whatever URL you've got a banner stashed in and it should all work.

As for actually making the banner...

I started with a 1277 x 375 blank canvas. That's much bigger than the current header size, which is 940px by 235px so I put in some guides and made sure that the most important parts of the image where within those guides. But I also made sure that there was some nice stuff outside the main area in case anyone's screen makes the header larger for any reason. You can see the full image here:

http://www.selenayhaven.com/images/lj-banner01.jpg

It essentially uses two screen caps - one of the TARDIS and one of the Atlantis stargate. I greyscaled and brightened up both images (I might be able to remember all the settings if you're really interested, but it's all very geeky). Then I pasted in the TARDIS one as a new layer and fiddled with masks and gradients to get it to blend through nicely. Did the same with the stargate one, but in two sizes. The largest one is actually placed over the smaller one and I used a mask gradient to fade it out nicely, but leaving a bit of texture on the smaller one.

Then it was a grey to black gradient for the background darkening at an angle rather than straight up and lots of white dots with a 1px paintbrush. Last step was using a brush from tehindy three times, in different shades of grey, to create the effect at the bottom.

If you're interested, I could put together an actual tutorial with stage pictures and actual settings...

Or you might have just wanted the CSS to insert the header, in which case I'm babbling :-)

Re: Can you share how you did it???

[riverfox.livejournal.com]

You never babble, silly thing. And thanks for the dimension info. :)