(1-sec exposure, ISO100, camera braced against a hand-rail for a steady shot. Burst-mode was used to get the sharpest image)

That’s the KLCC Park seen from The Apartment Downtown at Suria KLCC, during one of its Acoustic Hearing sessions which are being held throughout November. Many Lumix owners do not know that they can actually vary the shutter speed of their cameras (under Normal mode, just go to Menu and scroll til you see “Slow Shutter”). There’re four speeds to choose from: 1/8s, 1/4s, 1/2s, 1s. Of course by convention 1/8s will be less prone to shakes and blurry photos but for night scenes like above, slower speeds are desirable (find a way to keep your camera steady during shooting).

Furthermore, under Scenery mode you can find Starry Sky and then you can select between 15s, 30s or even 60s exposure. These are fixed values for you to shoot stars (you obviously need a tripod!). But who says you can only shoot stars – you can use this long exposure to take other types of photos too. Technical note: If you don’t want to be limited to only these three available (fixed) options, you can use a black cardboard to control the exposure manually (place cardboard in front of camera lens during capture). I’ll leave it to you to think what type of photos you can produce with long exposures.

Shorttalk: Do you think the only way to achieve a ‘balanced’ upbringing in children is by having their father staying at home with them everyday? Does that mean men who travel or are often outstation/overseas will more likely to have ‘screwed up’ (just a figure of speech) kids? My dad worked in another state throughout my growing years and my sisters and I turned out fine!

1. Get a Hit-counter!

One of the first things you might want to do when you first set up your blog is to get a hit-counter to monitor your traffic. The earlier you install your counter, the better. This is so that you won’t miss the first few visitors who visit your blog.

Personal tip: Stay away from Webstats4u.com (aka Motigo webstats, formerly known as nedstats), because your visitors will be annoyed by ilead.track.it popups.

2. Use a Nickname

I personally know many bloggers who choose to use their own real name or initials when they blog, which is fine, really. Short, given names are okay but full names? I would suggest to use your full name only when you understand what you’re doing – because it takes away your anonymity online and that’s irreversible unless you start afresh again. On the other hand, if you start off by using a nickname, you could gradually shed away your cloak of anonymity whenever you’re comfortable.

3. Blog Selectively

Think carefully before publishing an entry, because (and I always stress this) no matter how personal or private you claim your blog to be, it is always accessible to virtually anyone in the world who has an internet access. Whether it is something very personal, controversial, or offensive, be aware that in the cyberspace, you’re never alone. Your contents could be indexed and cached by search engines, or reproduced in forums, other blogs, or heck, even newspapers! So you think removing an entry solves everything? Not really. Unless you understand and do not mind the consequences, think twice before you write.

Related example: Last year, a teenage Singaporean blogger, Wee Shu Min had to remove an offensive entry just one day after publishing, because it drew a flak from thousands of people worldwide. She admitted that she didn’t expect to receive so many readers overnight. Indeed, her average daily hits was never that high. (It’s a long story but if you’re interested, Wikipedia could help you out. And yes, her original text is there too.)

4. Fight Spam!

Most modern blog publishing tools have a comment spam filter. Additionally, you could also use a Word Verification system (for Blogspot users, for example), whereby commentors would need to key in characters displayed in a randomly-generated image when leaving a comment. WordPress, in addition to the standard Akismet Spam Filter, also has an anti-spam plugin that requires commentors to answer a simple math question. It’s an extra-step for your commentors who wish to leave a comment but they’ll understand it.

Personal tip: When you come across a WordPress blog that requires you to answer a simple math question when submitting a comment, beware of time-outs. That’s because sometimes that particular math question expires before you’re done typing your comment. Always copy your comments before submitting, as even the ‘back’ button in your browser can’t help you recover what you’ve typed! Personally, I think the Akismet Spam Filter that comes standard in all WordPress is sufficient for most use.

5. Ensure Compatibility

Try viewing your blog using another browser to ensure that it displays nicely, especially after you’ve modified its layout. Most default layouts are compatible with almost all browsers but once you want to modify something, you gotta do it at your own risk. I once (while using Firefox) came across a site that was really messy and the ‘Post a Comment’ link was hidden. I couldn’t leave a comment! I then switched to IE and everything appeared perfectly fine.

Personal tip: This can get a little technical. Well anyway, if you’re interested, try validating your site using the W3C Markup Validation Service. Here’s why.

6. Provide an Email Address

It’s useful to provide your email address somewhere on your site (eg. in your profile or sidebar), especially if you’ve turned off commenting in your blog. However, don’t provide your complete email address in text. Replace the alias with something like [at] or .at., or use spaces. If you have your email address provided in full (like me@me.com), web crawlers/spiders/robots (strictly speaking, they’re scripts) could index your email address and pick it up for spam purposes. So come up with a way to ‘fool’ these web crawlers. The best way is to display your email address as an image (check out my About page). You can generate your email image here.

7. Personal Photos

This is a no-brainer. From (3), you know that your blog is accessible to virtually anyone who has internet access. Even though you have never provided your URL to anyone, people can still reach your site via search engines. Understand what you’re getting yourself into when posting up pictures of yourself, friends, family members, your car (with the vehicle registration number visible), your house, etc.. Attracting stalkers is the last thing you’d want to do online. I would say that children (since anyone could set up a blog these days) should be extra careful when posting up photos of themselves.

Technical note: I don’t know if there’s a way to prevent indexing by search engines. The ‘noindex, nofollow’ for robots meta does not work all the time.

8. The Statement “I Blog for Myself” is Codswallop

Don’t bother setting up a blog if you’re not expecting any readers. However, there are instances when you might want to make a particular entry private. I don’t know about other blog-publishing tools, but WordPress allows you to do this. When enabled, that blog entry becomes password-protected. (Maybe someone could shed some light about Blogspot, MT, LiveJournal, Xanga, Vox, etc).

9. Go Easy on the Advertisements

If you’re gonna monetize your blog, you gotta remember to keep a balance. Unless you’re running a corporate/commercial blog in support of a product or brand, go easy on the ads. The very reason why advertisements exist in the first place is traffic. Your contents, not the adverts, is what drives your traffic. So start by focusing on your contents before anything else.

10. Turn On Comment Notifications

A reader may drop by your site and leave a comment in one of your older entries (say, a few months old in your archives). It could be a compliment or even a question – whatever it is, you most likely wouldn’t want to miss it. Turn on comments notification (which is sent to you via email) so that you know there is a new comment left in your blog. Alternatively, you could also display all recent comments on your sidebar.

Personal tip: I’ve found the ‘Recent Comments’ section in my sidebar useful in drawing traffic to my entries. Try it and you’ll know what I’m talking about.

11. Credit Your Sources

Don’t be a thief. Credit your sources. If you publish photos, texts or anything that do not belong to you, the least you can do is provide a hyperlink to the original source. Watermarks in photos are there for a reason (especially if taken from another blog). So if you intend to use that photo, don’t crop away the watermark – it’s one way of crediting your source.

Personal tip: Have you ever suspected that someone might have plagiarised your work? Try http://www.copyscape.com/, and weed out the copycat!

Footnote: Everything provided here in this entry is based on my personal opinion, experiences and observations. They are in no way affiliated with or endorsed by any organizations, companies, or associations.

This was a special request by Eunice, who was clearly hungry for more tricks after reading my previous Photoshop entry (by the way, she turns 23 today, so Happy Birthday Eunice!). She showed me an example on Ladyshanice’s blog (I was told that she was some beauty queen… which I’m not surprised), and she said that she wanted to produce something similar. To be honest, I hadn’t done this before but it shouldn’t be too difficult. Let’s try it, step-by-step:

Note: Here I shall assume you already have 9 photos, and all of them have been resized to 175 x 200 pixels. (Read my entry on How to Resize Multiple Photos in Photoshop).

Step 1: Open all the 9 photos in Photoshop.

Step 2: Create a new canvas by going to File -> New… (alternatively, hit CTRL+N). Define the Width to be 175 pixels, and Height to be 200 pixels. Click OK.

Step 3: Use the Move Tool to drag one of the photos into the newly-created canvas.

The photo will snap itself perfectly into place. We shall call this photo “Layer 1″. You may close the original photo now as it is no longer needed.

Step 4: Repeat Step 3 to drag the next photo over. We shall call this photo “Layer 2″.

Step 5: Repeat Step 3 again until all 9 photos have been dragged over (9 layers).

By now you should have closed all the original photos as they are all no longer needed. You can toggle the visibility of Layer 9 by clicking the ‘eye’ icon.

Step 6: Next, we insert a greyish frame around the photo to create the polaroid effect. Do this by first increasing the canvas size: Image -> Canvas Size… Set the Width to 200 pixels, and Height to 300 pixels. Click OK.

Step 7: Crop away the upper portion of the frame by using the Crop Tool. Normally polaroids look like that right?

Step 8: Use the Paint Bucket Tool to fill the entire frame with a light-grey colour (#DEDEDE should be a good pick).

Now, we are done creating the polaroids. Let’s put them all together in one big canvas.

Step 9: Create a new canvas by going to File -> New… (alternatively, hit CTRL+N). Define the Width to be about 700 pixels, and Height about 800 pixels. Click OK.

Step 10: Now we are ready to drag our polaroids over to the big canvas, one by one. We first merge the Background layer with Layer 1. To do this, toggle the visibility of the other layers (make them invisible), and link Layer 1 with the Background layer, like this:

The little ‘chain’ icon in Layer 1 indicates its linkage with the Background layer.

Step 11: Now, with the two layers linked, press CTRL+E to merge them into one.

Step 12: Next, use the Move Tool to drag the polaroid over to the big canvas.

Step 13: On the big canvas we’ll tilt the polaroid a little bit for a nice effect. To do this, select the Marquee Tool (which is just next to the Move Tool on the first row), and then right-click on the polaroid that has just been dragged over. Select Free Transform.

You can tilt the polaroid as much as you like. Now let’s drag the rest of the polaroids over.

Step 14: Toggle the visibility of Layer 2 and link it with the Background layer.

Step 15: Merge the layers by pressing CTRL+E. Then, repeat Step 12 to drag it over to the big canvas.

Step 16: Repeat Step 13 to tilt the polaroid.

During Free Transforming, the polaroids will appear jittery but once you apply the changes, it will smoothen itself out.

Step 17: Repeat Steps 14, 15, and 16 for Layers 3 onwards. Here’s how the big canvas should look like with all the 9 polaroids together:

Haha, I know, it doesn’t look right. You can actually determine which polaroid should overlap which, by rearranging the order of the Layers. Simply click and drag a layer up or down, like this:

I’ve also readjusted the positions of each the polaroids. Just select the layer you wish to move, and use the the arrow keys on your keyboard to move them up, down, left or right.

Step 18: Finally, Drop Shadows by adding a Layer Style onto any layer.

Step 19: Then we need to apply the style onto the rest of the layers. To do this, first link up all the layers.

Then, right-click on the layer with the style (in the screenshot above, it’s Layer 4), and select Copy Layer Style. After that, right-click again to select Paste Layer Style to Linked and voila, you’re done!

My method may not be the most efficient, mind you. But it’s logically simple enough. Heh. It’s my first try, and I must stress that there is an infinite many ways to produce the same result, maybe even better. For me, I’m pretty much a results-oriented kinda person, so anything goes as long as it works!

Footnote: I’d like to acknowledge a Photoshop guru by the name of Nic, whom I met once upon a time in PJ. I had the opportunity to pick up some tricks from him many moons ago, some of which I’ve used here.

This tutorial is widely available on the internet, but I’m just going to share it here with Narrowband.org audience (I know for a fact that many among my friends do not know this). Here it is, step-by-step:

Step 1: Open a photo in Photoshop.

Step 2: Create a new Action in your Actions Window. (If you don’t know which is your Actions Window, hit ALT+F9 repeatedly).

A New Action window will pop out. Give your new Action a name, and click Record.

Step 3: Resize the photo by going to Image -> Image Size

In my example, I want to put the photos on my blog. A width of 400 pixels will fit nicely within my blog body. The height value will change according to original proportions if you check “Constrain Proportions”. Click OK.

Step 4: Save the photo in a new folder (create one!) by going to File -> Save As…

Step 5: Close the photo by clicking the ‘X’ button.

Step 6: Stop the Action recording.

Now, you’re ready to repeat the Action you’ve just created and apply it to the other photos.

Step 7: Go to File -> Automate -> Batch…

Pick your Source folder (folder which contains all the photos you want to resize) by clicking Choose…. Specify also your Destination folder in the same way. In the figure above I’m gonna put the resized photos into a new folder called ‘Resized’. Click OK and watch.

There you go, 7 simple steps to save you time and trouble. Batch Processing in Photoshop allows you to record virtually any kind of actions (watermarking, photo-filtering, etc), and have them repeated and applied onto all files within a specified folder.

Note, however, you may need to separate (put into different folders) vertical photos from horizontal photos and create two separate actions for them. Also, since the Actions cannot be undone, I recommend that you always specify a Destination folder.

Have fun!

Next, it’s the CSS. You need to edit your CSS file (usually, for WordPress, it’s your style.css file). Open it using Notepad, and add the code in anywhere you like (I put mine right at the bottom. You don’t need to delete any lines). The CSS code to be added can be found here (tip: Just click ‘Select Code’ and Copy everything). Remember it’s the CSS code you’re supposed to Copy, ignore the HTML code for now. Edit@1312hrs: I forgot to mention something. For WordPress’ style.css file, you don’t need to copy the first and last lines: <style type=”text/css”> and </style>. Like this:

Please ignore the red underlines – it’s my Firefox’s auto spell-check ;-)

That’s simply because they already exist in your style.css (the first line at the top, and the last line at the bottom). It’ll be redundant to have them appear twice!

Then, save the changes made to your style.css. Now, you are ready to write a post in WordPress and use this CSS functionality. So, log in to your WordPress and write a new post as you would always do. Remember to turn off Visual Rich Editor (I’ve never found Visual Rich Editor helpful – never use it). Throw in the HTML code which can be found here (tip: again, click ‘Select Code’ and everything in there will be highlighted. Copy them and Paste into your Writing area.). Edit@1312hrs: For this, yes you need everything including the first and the last lines: <div class=”gallerycontainer”> and </div>. Like this:

Now, on to things (in the HTML code that you copied) that you should change – the filenames (and paths). Unless you’re very sure, use absolute address rather than relative address to be safe. This means that for each <img src=”foldername/filename.jpg”…, use instead <img src=”http://www.yourdomain.com/foldername/filename.jpg”… this will take you directly to where the file is kept. Note the sequence: The thumbnail should precede the actual image. (From the code on Dynamic Drive, you can see that the thumbnails are denoted by the suffix ‘_thumb’).

“<br/>” in the code simply means ‘begin in a new line’. That is why you see in the examples there are two images in row one, and then comes the “<br/>”, followed by two more images in row two, and so on.

Where do the Enlarged Images Appear?

This needs to be adjusted in the style.css file ;). So, again, open it using Notepad and scroll until you see this:

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

Change the ‘top’ and ‘left’ values. These values indicate how many pixels to offset (relative to where your <div class=”gallerycontainer”> is in the HTML code). If you want the enlarged images to appear on top of the thumbnails, put values like ‘top: -300px’ or something. If you want it to appear below, try ‘top: 300px’. ‘top: 0′ means that the image will appear at the same level (horizontal) with the thumbnails. Similarly, adjust the ‘left: 230px’ value accordingly. A negative value means the enlarged images (strictly speaking, it’s the top-left edge of the image) will appear on the left handside of the thumbnails. Try different values to see the effect.

This is the basic idea on how the code works. Once you get a hang of it, you could try to do a gallery like mine. Good luck!

Update [Feb 24th@1511hrs]: A friend of mine, Jian, successfully made his own CSS Photo Gallery, similar to the one I did. It’s good!!

Sure, we could leave the filenames alone but sometimes there are photos that turn out bad and you’d just want to remove them. When that happens, the filenames inside that folder are no longer in a ‘perfect’ numbering order.

The usual method of using “F2″ in Windows XP is not feasible either, because it introduces spaces and brackets (picture.jpg, picture (1).jpg, picture (2).jpg) which are not internet-friendly. Spaces will be converted to “%20″ and the ( ) brackets will be converted to “%28″ and “%29″ respectively. This means that ‘picture (1).jpg‘ will become ‘picture%20%281%29.jpg‘, which is very messy if you asked me.

I want to have my filenames appear like ‘pic01.jpg‘, ‘pic02.jpg‘, etc. This utility helps you to do exactly just that. You can remove and/or add characters to your filenames as you like. In this example, I have removed the first two characters (letters “I” and “M”), and added a prefix ‘pizza’. You can also replace a string – it’ll produce the same result. For example, replacing the string ‘IMGP’ with ‘pizza’ will result in ‘pizza6236.JPG‘, ‘pizza6237.JPG‘, etc. Next, comes the most important part – numbering.

In this example, I chose put the numbers behind so I selected ‘Suffix’. If you’d like the sequence to increase by more than 1, just change the ‘Incr.’ (increment) value. Usually, that won’t be necessary for most use. If you have more than 9 files, you’d probably want to add some ‘padding’.

A padding of ’3′ should be used if you have more than 99 files. ‘Padding’ simply inserts zeros in front of your digits for proper sorting. In this example, I’ve used only a fraction of the features included in the program. It’s capable of doing much more, actually (the interface is laden with buttons!).

Once all the settings have been done, simply click ‘Rename’ and your filenames will be renamed accordingly – within a blink of an eye. I renamed more than 1000 files and it took less than 2 seconds. Version 2.4.1.0 (latest, released last month) can be downloaded for free at the BRU downloads page (~650Kb).