I’m always surprised by which projects are successful. Of all my time at work, my most successful software creation is something I built in about half an hour.
The problem is, because I developed it more as a “proof-of-concept” than a fully formed application, the code is a horrible mess, and it pains me every time I have to touch it. Really I should sit down and refactor it, but no one understands that. “It works fine,” they say. The problem is they think the code is like this:
Whereas, in reality it’s like this:
Anyway, I haven’t come here to talk about that. But instead the importance of doing things correctly first time, rather than taking the easy option.
I’ll be honest, I’m a deeply lazy person. Almost everything I do is motivated by laziness. My quest is to make life as easy as possible. But I’m a bit of a pleasure delayer too. So, I’m happy to spend effort now, if it means less effort in the future.
Personally, I view this as a good thing. Spending half an hour more doing something right now is great if it means it saves five minutes (or even five seconds) every time I have to do a task in future.
In many ways this is a life skill that’s mirrored in the computer world:
[…] only lazy programmers will want to write the kind of tools that might replace them in the end. Only a lazy programmer will avoid writing monotonous, repetitive code. The tools and processes inspired by laziness speed up production.
It’s become a bit of a pet-theory of mine that computers give you a way of thinking that is applicable to other areas of life. It’s probably a good subject for a self-help book – Coding for the Soul or something like that.
Anyway, back to the subject of doing things right the first time. I recently read Scott Hanselman’s article about how to take screenshots. It’s funny, because before I read this I had been thinking to myself, “wow, this guy takes really nice screenshots.”
The first thing he recommends is to put the applications on a white background:
[…] open up notepad with its white background and put it behind the application you are shooting so the white is what you see behind the transparency.
This is a great tip and I’ve started doing it with all my screenshots. In fact, I’ve taken it a bit further. The text area on my Tumblr site is only 500px wide. So I create a new Photoshop canvas that’s 500px wide and see if I can resize the window so if fits in that width without looking stupid.
If I can’t, I’ll take a big shot and resize it down later.
The next thing is to take the screenshot and paste it into the canvas.
Now one of the reasons that Scott’s shots look so bloody marvelous is because they have little shadows around them.
I’m reminded of Robert Weedon’s analysis of Top Gear, and in particular the quote by A.A. Gill:
It is a triumph of the craft of programme-making, of the minute, obsessive, musical masonry of editing, the french polishing of colourwashing and grading.
When things are nice to look at and use, you use them more. You like them, you have fond feelings for them.
With things like websites, magazines or TV programmes, the visual appearence of them is intricately linked to the content. As Stephen Fry (of all people) notes, style is substance:
The use of that last phrase, “style over substance” has always been, as Oscar Wilde observed, a marvellous and instant indicator of a fool. For those who perceive a separation between the two have either not lived, thought, read or experienced the world with any degree of insight, imagination or connective intelligence. It may have been Leclerc Buffon who first said “le style c’est l’homme – the style is the man” but it is an observation that anyone with sense had understood centuries before, Only dullards crippled into cretinism by a fear of being thought pretentious could be so dumb as to believe that there is a distinction between design and use, between form and function, between style and substance.
Scott uses a special piece of software to create his screenshots, but rather than add yet more junk to my machine, I tweak them in Photoshop.
Once I have the screenshot on a canvas in Photoshop I select all the white space around it and delete it to show the layer beneath.
While the area is still selected I press Shift + Control + I to invert the selection. This is a bit of a find for me. I’ve been looking for this command for a while now. In Windows it’s on the edit menu, but Photoshop being Photoshop puts it on the select menu.
Once that’s done I colour the layer below grey, using colour #A3A3A3.
The final step is to set a Gaussian blur, with a width of about 10px, which puts a shadow around the edge of the image.
And there we go, you get something like the shot above, or any of the image I’ve posted recently. And suddenly, screenshots look a little bit nicer.
Not a time saving tip this, but it’s definitely the correct way to take screenshots.