Black and White: A Guest Blog

No, this is not really a guest blog. A few weeks ago my sister-in-law M asked if I'd be willing to be a guest blogger over at her site, and I said sure, and then I set to work on what I thought might be some good bloggage. But I never heard back from her on the matter, so I'll just cycle it into my own blog. And here it goes.

M and I are sisters by law, having married two brothers, and our surname is about the only thing we have in common. She likes a nice night out -- I like a comfortable evening in. She prefers heels -- I like comfy shoes. She likes kids -- I love my own two, but generally only tolerate all others. She's a vegetarian, and I am most assuredly not. We overlap in university degrees slightly -- me in the visual arts, her in the performing arts. We also probably get a few of the same design magazines, but I can image that she dog-ears the pages with classy white kitchens while I tend to tear out the pages featuring groovy eclectic art.

We are as different as black and white. But I love black and white. It has a clean boldness that highlights the strengths of each, without compromise. This week, I will focus on the visual beauty of B&W.

So, to start things off right, first of all, we'll have some homework. Today we're going to calibrate our monitors for accurate B&W display, so that during the rest of the week's blogging, we'll all be on the same page.

First of all, make certain that your monitor has been on for at least 15 minutes and make certain you know how to adjust the settings on your monitor (normally little knobs at the bottom). The room you're doing this in should have subdued light.

Ready? Have a look at this image (you might want to click on it to see it full-sized):

On the far left, you should be able to differentiate between the bands of grey and the band of black. Yes? On the right, same thing with the white. Around the whole thing is a border of 50% Grey. Even if you still see all of this, we're going to optimize.

In your monitor's Contrast setting, crank that puppy up as far as you can until the whites become a glaring, blown-out mess. Now, start turning it down, one notch/step at a time until the next to last white band becomes a very light shade of grey (97% to be exact) and separate from the white. When you can tell there are multiple bands, stop.

Now, turn your attention to the black/left and turn the Brightness down until the dark greys become abysmal black pits. One step at a time, start increasing the brightness until the 2nd band becomes distinct from the black. Now stop. (Obviously, if your monitor is now very dark, and your whites are looking sad and grey, keep pushing the Brightness up until your whites are white again.) Tweak the Contrast again to make certain all is well.

You should now have a perfectly calibrated gradient scale with black, white, and 32 shades of grey in between.

Now, have a look at this image.


You should see black, white, and two boxes of pure, neutral grey. If the grey boxes have any tint to them, identify what that colour is, go into your monitor's colour-settings and turn that colour down.

This is fairly simplified. If you're smarter than the average web surfer (which I'm certain you are since you're here at my blog), you might want to tweak the gamma value, but I don't care to go into that today, so we'll be happy with what we have.

Tomorrow: art.

Favicons for Miss I

Upon seeing the little tiny sharky at my other blog, my niece has requested knowledge about how to make favicons. Favicons are the little web icons that show up A) in your Favourites list, B) next to the URL in the address bar, and C) at the top of tabs. They are catchy and cool. In blogger (which is what I'm using), they distinguish your blog from all of the other bold orange B's. So we're going to specifically talk about putting a favicon on your Blogger Blog.

Ingredients:
-An image editting program -- Photoshop, PS Elements, Paint.net(free) Just something you can edit and save in.
-A program/website to convert your image file to .ico
-an appropriate web host or a dedicated favicon host
-the ability to type in one line of code in your blog layout

(BTW, there are vastly simpler directions at the bottom)

#1: You need a picture. Specifically, a picture that will look good at only 16x16 pixels. Open this picture up in your favourite image program. It's best if you can save in PNG format and also that you can use transparency (more on that later).
#2: Remembering that your picture will be tiny, start fiddling with it. Use a working size of about 200x200 px. Make certain you have a serious amount of contast between your elements. Did I mention it was going to be tiny?
#3: Transparency. If you browse around, you'll see that some favicons are square (like at Dictionary.com and Wikipedia, and some show the background colour (like here). If you have any negative space, it's nicer looking to make that transparent. If you're only able to save your file as a jpg or bmp, or it's just too complicated for you, make your favicon intentionally square. On purpose and stuff.
#4: Shrink your image to 32x32 pixels. Does it still look good? Tweak a few pixels if you need to. Now save it as myicon.png or myicon.jpg or whatever. Make certain to save as a .png or .gif if you've made anything transparent.
#5: Now you need to turn it into a favicon (right now, it's just a tiny picture). Favicons are magical files because they can be many pictures stacked into one file. Remember how we saved it as 32x32 but I told you that it would only be 16x16? It will actually be both. Magic! To do this magical transformation, I like to use an online Favicon Generator. There are things you can download onto your computer to do all of this, but frankly, how many favicons are you planning on making?!? Browse for your myicon file, click the field about merging a 32x32 icon, and click "Create Icon." If you approve of the preview images, click "download." Save the file somewhere safe and memorable as favicon.ico (or rename it later if you're making lots).
#6: The tricky part. Because a favicon is an .ico file, it is both magical and hated. Now it needs a place to live on the internet, but there aren't a lot of places that will take a favicon or if they do, they don't treat it right. I'm humanizing the poor misunderstood favicon a bit, but if you don't have your own hosting service, you will have a hard time going beyond step #5. There have been some sites that used to host favicons, but they are now defunct. Googlepages, which lets you upload and store all sorts of stuff will let you upload the file, but then breaks it. I did find one working favicon host: IconJ. I don't know how long they will last, but until then, it's a fair and free place to save your favicon. Just upload the favicon.ico file you saved in step #5. Make note of the url in the string under "Host your favicon file..." In fact, copy and paste just that url into a new tab or window and make certain that your favicon shows up (as an image).
(I know that IconJ will also generate your favicon, but they don't do as good a job as Dynamic Drive.)
#6b: If you do have your own web hosting, upload the favicon.ico somewhere there, and open the location in another tab/window like this.
#7: In blogger, from the blog, click "customize" and then "layout" or click "layout" from the dashboard. Then click on "Edit HTML" In the edit window, a few lines from the top, look for the HEAD tag. You should see:

Add this line under the HEAD tag to make it look like this: (changing the url ('http:/.../favicon.ico') to wherever the favicon is location).

Save it. Before you go and View Blog, you'll need to clear your cache (for favicons, a hard refresh won't work). In IE, go into Tools-->Internet Options-->General. Under browsing history, click "Delete..." Delete just your Temporary Internet Files and then delete your History. After you've finished, then go view your blog. Otherwise, it will show whatever former favicon you had. If you still see the crusty-looking bell at the top of this page, you should do the same thing, clear your cache, so you'll see I used DD to generate a better favicon myself.

Did all of that sound scary? Shorter version:
1. Create a 32x32 pixel image saved as myicon.gif (or .png)
2. Convert it to favicon.ico with an appropriate program like Dynamic Drive.
3. Upload it to the internet, maybe to a favicon-hosting site like IconJ. Note it's location/url/web address
4. Add this line
under the HEAD tag in your blog code but changing the url to the one from #3.
5. Clear the Temp Int Files and History if your favicon doesn't initially show up.

I look forward to the day when there are no more Big Blobby Blogger B's. Hope that helps!

Next week, "Why Blogger makes it nigh impossible to post code. Jerks."