Professional and Affordable Web Design

0800 080 5401

Batch resize, rename and watermark photos

In this tutorial we are going to show you a simple solution to the age old question many of our clients ask.

How can I resize, rename and watermark photographs taken by a digital camera - without expensive software packages?

To solve this problem we are going to demonstrate a single Shareware software package that will help you do all three of these tasks quickly and professionally.

The Software Package (Downloading and installing)

We need to download and install the software package ready to work through this tutorial.
The software package we are going to work with is called “Faststone Photo Resizer” published by Faststone Soft.
This fantastic package is provided under a “Freeware License” meaning it is free to download and use for personnel and educational reasons however like many of our clients, commercial use will require you to purchase a license.
We ask you all to obey the license requirements and for less than £15.00 you will help the developer to improve and increase their portfolio.

To download the package, visit the developer’s web site located at www.faststone.org.

Faststone websiteFaststone website

As you can see the developer currently offers 4 packages (all available for instant download); and in a later tutorial we will cover “Faststone Capture” but for now we are only interested in “Faststone Photo Resizer”.

If you click Download on the correct software package you will be taken through to a new screen allowing you to select the file format that you wish to download.

In this instance we are going to click the first option “Download exe”. Once clicked your browser might prompt you to accept the download. Once accepted the download should take only a few minutes to download if you are connected to the internet on an average broadband connection.

Now you have the package downloaded you need to run the installation file that is now on your computer; depending on your browser settings this could be stored in several locations; in my case the file has been saved to the desktop.

Double click on the installation file and follow the instructions to complete the installation.

Installed and ready to go

Before we jump into the software package I want to run through a simple task of organising the files and pictures we wish to manipulate.

On my desktop I have created a new folder called “Web Pictures” and within this folder I have created another 3 folders named “1_Original” “2_Converted” and finally “Watermark” these will be used to save the photos I am going to change as well as store the watermark I want to apply to each photo.

A logical folder structure for batch processingA logical folder structure for batch processing

Within the folder named “1_Original” I have placed the 8 original photographs taken by my digital camera that I wish to work with.

As you can see, I have highlighted just one of the images. The file size is 2.62MB, which would really slow down the load of my web site.

Raw images without watermarkingRaw images without watermarking

Now the software

With the Software installed and the photos organised we are ready to move on with the editing.
We now need to launch “Faststone Photo Resizer “ which should be located within your start menu or on your desktop. Once the program loads you should see a screen similar to the one below.

Faststone Photo Resizer - first screenFaststone Photo Resizer -  first screen

In this tutorial we are going to concentrate on only 3 of the options that this software tool has to offer; Resizing, Renaming and Watermarking. Each of these effects can be processed at the same time saving you huge amounts of work and effort.

Getting started

We need to select the pictures that we want to edit. This is a simple process of navigating to the folder that contains your pictures.

The pictures I wish to alter are saved to my desktop; by Double clicking on the desktop icon the program drills down to show you the next level of files stored in this location.

Finding images for batch processingFinding images for batch processing

Once you have navigated to the correct folder; you should see a list of your photos (as shown in the image below). In the top right hand corner you have the option to click on the “Thumb Nail View”; this is extremely useful when selecting the photos to edit.

Check images using thumbnail viewCheck images using thumbnail view

Once thumbnail view has been selected, your screen should look like the image below:

Thumbnails showingThumbnails showing

To select the image you wish to edit you simply need to click on the image once and click the Add button located in the middle section of the program window. Continue to do this process until you have selected all of the images you wish to edit, alternatively if you wish to add them all then simply click the “add all button”.

I want to edit all of my images so I have selected the “add all” option as seen in the screen shot below.

Adding images to Faststone Photo ResizeAdding images to Faststone Photo Resize

Now we have selected the images, we need to make sure that the changes needed are selected. Refer to the numbering on the above screen shot.

Number 1. Output Format - This allows you to select the file format you wish the new pictures to be saved as. “Jpeg” files are perfect for web sites so I have left this as standard.

Next we need to click on “settings” opposite the Jpg selector; this will launch a new screen as shown below.

Selecting JPG quality in Faststone Photo ResizeSelecting JPG quality in Faststone Photo Resize

This screen allows us to edit the actual file size of the pictures; as standard a Digital photo straight from the camera is normally above 2mb in file size and this will impact the load time of your website.

To avoid this we really need to reduce the file size down; ideally our target is between 200 and 400k per photo. Don’t worry though as reducing the file size will not be visually noticeable on a web page – your pictures should still remain sharp and colour rich.

This is achieved by sliding the marker down to 3 and then click ok; returning you to the main screen.

Number 2. Output Folder - We need to select the location that our formatted images will be saved in, helping to preserve the original pictures. In this example I have selected the file we created earlier “2_converted” as my destination folder.

Number 3. Rename - This option helps give all of the pictures a new file name separated by a numeric string at the end. In this example I want all of my pictures named “website” followed by a 4 digit number.

Number 4. We have now confirmed within the program what file size we require and also the name we want the photos swapped to; our final task is to add a watermark to each image.

To make the final changes we need to click the advanced options and dig a little deeper into the software.

Watermark tab in Faststone Photo ResizeWatermark tab in Faststone Photo Resize

As default this window will open on the Tab named “Resize”.

We don’t want to actually resize the pictures (Height and Width) on this occasion - we just need to add the watermark.

Once you click on the watermark tab you will be presented with a screen displaying a single tick box (currently un-ticked), you need to tick this option and the screen below will appear:

Adding a watermarkAdding a watermark

If you don’t have a watermark prepared for your photo’s the tab named “Text” located at the top of the screen allows you to add a simple text water mark.

The first thing we need to do is locate the image; this is a simple process of browsing your computer’s hard drive. Click on the button marked as “1” this will open a window allowing you to browse your files for your selected image.

Opacity (Number 2) is a useful tool if your watermark is to strong and dominates the screen. In this example I have moved the slider down to 23 giving my image a ghostly appearance in the bottom right hand corner.

Clicking OK in the bottom corner confirms your selections and returns you to the main screen.

Final Step - Now we have made the required selections we simply have to confirm that we want the photos converted; on the main page simply click the convert button and the software will work its magic.

Once the photos have been converted, you can simply exit from the software and navigate to the folder containing your new images. They should be watermarked and ready for use.

Comments1 Comments

Dareen

nice post

27 August 2010

All comments are moderated for spam and will not be shown. All genuine comments wil be show, however the links will be based on a NO FOLLOW RULE. Repeat commenters adding value to the articles and discusions will have removed alowing Follow Rule to Work.

Make a Comment

Notify me when someone responds

Quick Contact

See Full Portfolio Some Of Our Work

Screenshot of dsbs.co.uk website
dsbs.co.uk

Driving Schools Booking Service (DSBS) is a network of driving instructors, covering the whole of the UK. For this project, we were...

Screenshot of countysecurity.co.uk website
countysecurity.co.uk

County Security is a fully featured E - commerce solution, with an integrated "system configurator", which allows users to choose...

Customer News & Resources

At Mutiny Design we are constantly gathering together articles and help guides to assist our clients.

Introduction to sitemap.xml

Checking for a sitemap A site map (or sitemap) is a list of pages of a web site accessible to crawlers or users. It can be either a document in any form used as a planning tool for web design, or a web page that lists the pages on a web site, Some developers feel that site index is a more appropriately used term to relay page function, web visitors are used to seeing each term and generally associate both as one and the same. However, a site index is often an A-Z index that provides access to content, while a site map provides a general... Read More »

Center a web page in CSS

One simple way to center a web page using CSS is to create a container div, that is horizontally centered by having its left and right margins set to auto. Using this method, you can still apply colours / background images to the body tag, so its a flexible solution. (if you didnt need this ability, just apply margins and width to the body tag instead, and forget using the container div). The container div has the same width as your webpage and, well, contains it. All the code for your web page is placed inside the container div. This will... Read More »

-