11 July 2007

How to Make a Web Banner in Slightly More Than 3 Easy Steps


So the Mafia tapped me to be co-administrator of a queer group she started up on Ravelry. As long as there are no business meetings, I am fine with this, but she also asked if I knew how to make a web badge and banner. Little did she know.

I really have very little innate artistic talent. I don't draw or paint or sculpt or make pretty things out of wood or papier mâché. I have, however, played around with Photoshop just enough to be dangerous. So I whipped out the banner you see above. And by whipped out, I mean the following:

1. Google "rainbow flag" and find a suitable image. Copy it.

2. Paste into a new Photoshop file and resize it to the dimensions of the banner.

3. Apply Gaussian blur to get rid of the sharp demarcation between the stripes. This is for the background, after all.

4. Create a new white layer and adjust the opacity so that the colors aren't too deep to make text difficult to read (Brightness could be adjusted, too, but I find this way does a better job).

5. Go through every font in Font Book to find just the right one (Harrington won. Dontcha just love those e's?).

6. Insert text.

7. Adjust size and positioning of text.

8. Go back online and google "ball of yarn". Decide that the ball of yarn pendant on a pet rememberance jewelry site is your best bet. Copy it & paste into another new Photoshop file.

9. Sharpen edges on the ball of yarn several times.

10. Adjust contrast on the ball of yarn way the hell up.

11. Take 12 tries to get the @&*^@*&%^)* elliptical marquee tool just right over the ball of yarn so that it can be cut and pasted into yet another new file.

12. Shrink the ball of yarn down so that it will fit onto the banner.

13. Apply the graphic pen filter to the ball of yarn to make it look like a "drawring".

14. Draw lines over the ball of yarn to make a knitting needle.

15. Merge said lines (each line is it's own layer) into a single layer so that you don't have to manipulate each layer separately.

16. Again take 12 tries to get the @(*^*#&^#)(*& elliptical marquee tool just right so that you can cut out the chunk of knitting needle that passes over the ball of yarn.

17. Go back online and google "crochet hoook".

18. Tell Google that, yes, you did actually mean to search for "crochet hook" (smarmy bastards).

19. Find a picture of some wooden crochet hooks that are sufficiently fat that you can still see it's a crochet hook once it's shrunk down to 6 pixels across. Copy & paste into new file.

20. Free rotate the image so that you can get one of the crochet hooks perfectly vertical and crop everything else out of the photo.

21. Convert to black and white & then to a negative image. Burn the hell out of the highlighted areas and increase the contrast all the way up so you get a black image.

22. Use the magic wand tool to select the crochet hook silhouette, cut and paste into a new layer over the ball of yarn.

23. Free rotate the crochet hook layer to get it oriented just right over the ball of yarn.

24. Again with the @)(*&^#)(*_#* elliptical marquee tool (You'd think by now it wouldn't take so many tries. But you'd be wrong.). Cut out the section of crochet hook overlying the yarn.

25. Merge the ball of yarn, knitting needle and crochet hook layers into a single layer so that the image can be copied and pasted onto the banner.

26. Adjust the ball of yarn icon on the banner until it is placed just so and save as a jpeg and a Photoshop file.

27. Upload the thing.

Piece of cake, no?


Anonymous said...

The line about the business meetings made me giggle. I'm on the margins of a groups that is trying to make it possible for the executive to decide on stuff without the whole membership voting and some folks think that is a bad idea. I suspect they also wonder why folks aren't coming to meetings.

M-H said...

No. It's bloody hard work! Fiddly and frsutrating. I remember the day I spent making icons for the glbt knitlist, everyone found some fault with them, then there was agreement on a final version, and then it was never used. I've still got a folder with them all in.

Anonymous said...

Wow!! The banner is wonderful!

Sheepish Annie said...

Ack! I need a nap after just reading that. And I've only been up and about for a couple of hours at this point...

It reminds me of my trials last year trying to design promotional literature for job #2. To say that I am not a graphic designer would be an understatement...

I love the banner! It was worth all the hard work!

FemiKnitMafia said...

Good lord. I had no idea! Thank god I don't own Photoshop; there'd be a lot more swearing my house.


Our little group is already truckin' along. 35 members already. Hooray!

Carry said...

hahaha! Just joined that group yesterday! Just stumbled across the fact that there were groups on Ravelry...work has been crazy busy, so I haven't had as much time to get sucked in...dammit

Nice job on the bannner (oops, banner!) :)

knitnzu said...

I knew there was a reason I haven't done a lot of this kind of stuff. TWENTYSEVEN steps? I'd be stuck with a lot like 11, 16, and 24. Great job! I really like how the knitting needle isn't just in the background but looks like it's sticking out of the ball and somewhat towards the viewer on its pointy end.

Anonymous said...

Mel, this is why Diane does all the image manipulation in our house. She says it's the ADD hyper-focus thing. I just know that I would throw the laptop out the window! The banner looks great, and I figured out how to get mine on ravelry as well :)

Unknown said...

Excellent banner! Listen, I've spent many hours screwing with PhotoShop for the tech writing that I do. Graphics artist is another hat you must wear as a tech writer.

But it galls me that my 15 year-old granddaughter uses PhotoShop like it were nothing big deal. I've learned plenty from the kid, let me tell ya.

Carole Knits said...

Easy for you to say. ;-)

knitintensity said...

I'm impressed! I can't even figure out how to get buttons on my sidebar.

knitnzu said...

Have you seen the knitted coracle in Debbie New's book Unexpected Knitting? WAY cool!

Sydney Ran said...

But Smelly, the banner says Revelry, I thought it was Ravelry? Educate your little sister, she's been whipped around craploads lately, maybe she's not that sharp. . .