Terrys Playpen: 01/08/2009

Friday, 28 August 2009

TIP - FotoSketcher

Another delightful little programme, FREE, that will enhance your blogging experience.

But it needn't stop there, because this little beauty will allow you to exercise your artistic skills to the full and produce prints that you could use for cards 'n' stuff to send to your family and friends!

FotoSketcher is completely free and does not contain any adware, spyware or virus. It runs on any version of Microsoft Windows (sorry, no Mac version available).

If you want to turn a portrait, the photograph of your house or a beautiful landscape into a painting, a sketch or a drawing then look no further. FotoSketcher will do the job in just a few seconds.

Don't believe me? Here is an example of something that I completed in less than 30 seconds. Honest!

It was a simple case of fire up the programme, pick a photograph, import it with a click, select the type of output you want, click another button that says "Draw it!", and you're done!

I chose this pic of one of our favourite bloggers, Shrinky (in preference to one of the delectable Anna Kournikova, in full tennis gear, scratching her bum), not least of all because of the strong contrast between the light and dark areas, which usually causes graphic software major headaches ...

... and turned it into this ...

... using the default settings!

The author, David Thoiron, has even produced a YouTube video to walk you through the various steps. It is interesting, but not necessarily a 'must watch', because the programme is so easy to use that you will probably find yourself converting tons of your digital photographs into cheeky little works of art in no time at all.

Don't hesitate. Go get FotoSketcher now!

Another fine addition to your blogging arsenal ...

Saturday, 8 August 2009

TIP - MoJoZoom

Here we go. I've collected all the bits of code, and the explanations, so it shouldn't cause you any headaches incorporating this stuff on your site.

Please remember that there are other 'zoomer' scripts available, but I've chosen 'MojoZoom' over the others for a variety of reasons:

Easier to install
Easy to configure
Fits limited Blogger window space
JavaScript and CSS files hosted by me

You are going to add stuff to your template, so ...

BACKUP ... BACKUP ... BACKUP!

1. Find ...

<b:skin><![CDATA[/*

Add the following (copy/paste) just above it ...

<link href='http://www.tapmal.com/playpen/mojozoom/mojozoom.css' 
rel='stylesheet' type='text/css'/>

2. Find ...

</head>

<body>

Add the following (copy/paste) just above it ...

<script src='http://www.tapmal.com/playpen/mojozoom/mojozoom.js' 
type='text/javascript'/>

These two bits of information will let your HTML know where to go to fetch the JS and CSS information when you include it in your post. Please note that both point to a folder on which I host the Playpen so, as long as the Playpen exists, you will always be able to call up the information. I am not planning to go anywhere soon!

3. Select the image you want to display. Make sure it is of a reasonable size, preferably no less than 800 x 600 pixels. This will ensure that the zoomed image, when you mouse-over the smaller image, will be instantly viewable as an enlarged replica.

4. Open your image in IrfanView or a similar photo-editing programme and reduce the image size to approximately 200 pixels in width. Let the programme automatically adjust the height. Now save the smaller version as a 'new' (renamed) image.

5. Upload your images to Blogger or via 'Windows Live Writer' (I've used the former for this example). Here is the code returned by Blogger for the large image:

And here is the code returned for the smaller one:

 

The bits you are interested in are the bits in RED, completely ignoring the rest of the blogger code, but DO NOT forget to delete the bit that says ...

s1600-h/

... which I have demonstrated by striking it out in the example.

Nearly done.

6. Now for the post itself. Not difficult if you copy/paste all the code and substitute your own image 'links' for the ones I've used for my pic!

 

Some points to note about the code above:

As mentioned, my pic links are highlighted in red and will need to be substituted with your own pic links. Just ensure that you insert the SMALL pic FIRST and the LARGE pic SECOND.
I have set the width and height parameters (picked out in blue) to 175 to accommodate the width of this particular template's post window. Your mileage may vary, so try slightly larger or smaller sizes if things don't work out from the get-go.
You have to give the pics an ID (purple). Use a short name that is meaningful to you.
I have set the parameter zoomalwaysshow to "false" (in brown) so that a window isn't displayed until the small image is moused-over. You can set this to "true" if you prefer to have the zoom window displayed at all times.

Now I shall demonstrate what a brave little hacker I am (drum roll, please) by copy/pasting that code above into the 'Source' window of WLW to make 100% sure that if you do the same thing the sky won't fall in on you ...

"By Jove, I think he's got it!"

BTW, if you think this album cover is the same as the one in the previous post, take a CLOSER look. You should at least be able to spot Bill Clinton and Osama amongst quite a few other surprise 'faces', including one or two blogger friends!

That's it.

If it doesn't work first time, don't despair. Compare the various bits of code carefully to make sure that you got everything as you should have. If you still have problems, come back and ask. I am always ready to help!

Can't say fairer than that ...

Friday, 7 August 2009

TIP - Zoomers

I have another Blog called Paradise Discovered which is not constrained by the content I have elected to post on this site. But it doesn't mean that I do not use all the 'tips-n-tricks' I throw up here. Indeed, anything I mention here can almost certainly be found in use on the other Blog. Makes sense, huh?

I recently found myself hunting through the Formula One Official Website looking for information on the freak accident that racing driver Felipe Massa suffered during the second qualifying session (Q2) in Hungary on Saturday, 25^th July 2009.

I was lucky. They had a fairly detailed explanation of the 'what', 'when' and 'where', and even had an artist's interpretation of what had probably happened. The TV cameras had caught the incident, but it all happened so fast that it was impossible to tell precisely how things had panned out. I am sure that there were other cameras trained on the event that the officials studied in great depth. The point is that the graphic was so tiny that it was impossible to make out some of the points (arrows) that the explanation invited the reader to look at.

That's when it occurred to me that a 'zoomer' window that allowed the viewer to see parts of the original small graphic 'enlarged' in another window would have been a nice touch. So I went looking for a script, preferably FREE, that would accomplish the task on a blog post.

I struck pay dirt on my first search. In fact I found a page that listed FIVE 'zoomer' scripts, four of them FREE! Some are pretty geeky, and I've discounted the paid-for script, which left me with 'MojoZoom' as the clear favourite for use on a Blogger platform.

(~~reminder to self - must remember to make a small PayPal donation to the author!~~) - DONE!

The script requires you to be able to host the JavaScript (.js) and CSS (.css) files on a server, but if you wish to use the script, I can provide that hosting - free of charge! All you will need to do is to point the link to the one I provide you with, and you're good to go!

I will give you the details in the next post, but here is an example of what you can expect. The image on the left is the album cover of the iconic Beatles album, 'Sgt Peppers Lonely Hearts Club Band', which was ground-breaking when it was first published for using 'pop art' in preference to images of the band or individuals. In short, I used this image because it is busy, busy, busy!

Simply run your mouse cursor over the pic to see a magnified version of the area under the cursor that will appear in a hidden window to the right of it almost like magic ...

If you think you can make use of this bit of JS-magic on your own blog, come back for the detail in the next post.

Watch this space ...

Top Menu