Paul Jenkins

Digital Photography for Website Designers

Posted in Website Design, Graphics by Paul Jenkins on the June 26th, 2007

As a website designer/developer most of the pictures I use are from stock photo websites/albums/CDs. Sometimes I’m needed to take a picture for a client, on occasions I have used a professional photographer to do some of the more demanding shots in the past. But I have been learning the past few months how to do them myself, so here is a quick guide of how to take good pictures if you are a web designer.

I will be uploading some pictures to demonstrate most of the bits I have mentioned when I am not to busy.

First off you’ll need a camera, try and stay away from the generic ones and go for more prosumer camera, or a digital SLR if you really want to get into it. You won’t need a high megapixel camera, as the images are going on the web so a 3-6 megapixel camera will be fine.

I’ve been using the Fujifilm Finepix S5600 (or S5200 if you’re in the US), these days you can get it for around £130. I think this is one of the best value cameras around for its price. It is a prosumer camera with a fixed lens and is not a digital SLR camera.

I have also recently bought a Nikon D80 which is about £700 with all the lenses. This is a digital SLR and has changeable lenses, this is a much higher pixel camera and is much better quality but this purchase was due to us doing quite a bit more printed media which require a better camera but for web, the S5600 is fine and will be the main focus of this tutorial.

Other accessories that will be helpful:

A Tripod - as some shots will need it if there is low light or the photos will blur.
Wide conversion lens - this is a bolt on lens that gives similar effects of a wide angle lense (lets you see more).
Macro conversion/Telephoto lens - this is a bolt on lens that will give you good close-up shots.
Filters, other bolt lenses - the S5600 has a 50mm screw on adapter, check ebay you will be able to get hold of some interesting filters and lenses for the camera.

Camera Features
I won’t waste your time going through every feature, I’m sure you will know what the on/off button does, how to zoom in/out. But I will explain in brief what the advanced features such as shutter speed, exposure, aperture, white balance, and what they all mean, I will go in to a bit more detail in the taking the picture section.

ISO - this setting is how much the camera is sensitive to light. The S5600 ranges from 64 to 1600. The higher the ISO speed the more chance of noise and loss of picture quality.

The mode dial - The S5600 has quite a few options, what we are interested in is the M, A, S and P (these will also be the same on other cameras).

Shutter Speed
Correct exposure is the results between the right balance between the sutter speed and arpeture.

Shutter speed is how fast the shutter opens and closes to allow the light in to the camera’s image sensor (CMOS or CCD). You will need different speeds depending on the light and how fast the picture is (high speed for car driving past, low speed if a landscape picture).

Low shutter speeds will need to be used with a tripod or be placed on something stable. This stops the hand-shake effect and blurring the image.

Aperture
Aperture is the size of the hole the light goes though before it hits the camera’s image sensor (CMOS or CCD). This also dictates the depth of field (the area in focus). This is usually described as ‘f’ and is followed by a number. A high number represents a narrow aperture and gives focus to the whole picture this would be used on a landscape picture. A smaller number represents a large or wide aperture, this is used to focus on the object and the background/foreground is out of focus for use on a person’s face.

To get the right exposure, you may need to change the ISO setting to suit the shutter speed and aperture value.
M - Manual gives you manual control over the aperture and shutter speed
A – Apperture Priority lets you set the aperture and the camera will automatically set the shutter speed.
S –Shutter Speed Pioritry lets you set the shutter speed and the camera will automatically set the aperture.
P – is the same as auto but lets you to override any settings.

Other buttons:
Macro – this is ually a flower-like symbol that allows you to take close pictures in focus.
Manual focusing might be useful if you want your picture out of focus, if not then automatic focusing is usually all you will need.

If you need to focus on something that isn’t in the middle of the picture, move the camera so the item is, press the shutter button half way down, this will focus it, then move away and the camera should stay focused.

The flash must be used consideratly, using the flash tends to make the pictures look ‘washed out’ so try with natural light if you can.

To express motion in the subject - Change the mode to S. Select a slow shutter speed, make sure you use a tripod.
To freeze the subject - Change the mode to S. Select a fast shutter speed, If its dark you may need to change the ISO setting, but don’t take it too high or the quality of the picture will be reduced.

Taking the picture
There are a few rules or guidelines in photography that should be worth learning.

The golden rule or the rule of thirds has been used as means of composition since the Greeks. If you divide the frame into two horizontal and two vertical lines and place the subject in these lines it is much more engading than just in the middle. Landscapes look better placed along horizontal lines, while portrates are better placed in vertical lines.
Lines look good if they are going towards or away from the subject. These can be anything that makes up our world, roads, paths, even the direction of people looking.

Doorways, arches or foliage make good frames for the subject.
Symmetery makes an image feel solid and ordered.
Balance the image, things that are out of balance make the eyes look at the objects.

You may be asked to take portraits of people, if they are posing for the picture keep it quick and keep them entertained. With single portraits try and place a prop in the picture to give an idea of what he or she represents. If its a group try and get them all to stand in different lenghs to the camera (not lined up) unless you want them to and take pictures from all sides.

When people get pictures taken they normally have a ‘photo face’ which could look a bit lifeless or wooden, take two or three pictures when they may be expecting one, this way they will be more relaxed.

If the picture is not posed then it’s important to anticipate the moment, think to yourself what might happen soon and try to get in the right position. Make sure you pre-set the camera settings as you wont have time to set them up.

Lighting is very important, think about where the light is coming from.

If you are taking a picture of people outside, try not to get them to face the sun. This might seem a good idea but everyone starts to squint.

Silhouettes can be easily done by setting the camera up for the right exposure for the background. Then focusing in on the subject. A good way is often in front of the sun.

To create a movement of say a car or jogger, turn the flash on (even if its sunny) this will give a nice blur to the moving subject.

To create moving car lights, set up near a road or where you want to view the image, wait till its dark. Make the ISO very low, 64-100 and turn the shutter speed to 15 or 30 seconds.

If you want to give water some movement, keep the shutter speed slow.

If possible shoot in RAW mode over JPEG.RAW files do take up around 10MB on the 5 megapixel S5600 which is much larger than JPEG. But it gives you many more options. JPEG is a finshed image, RAW is the data from the camera without applying white balance, colour information, sharpness etc. Photoshop (im using CS3 not sure on previous versions) can read these files and allows you to set all the settings. This is very helpful if you get the white balance wrong or want a sharper/softer image.

To create 360s or panaramic views you will need a tripod. Once the camera is attached make sure the angle of the tripod stays the same. Now slightly move the camera round the tripod taking pictures every 20-30 degrees. Keep the exposure the same on the camera when taking the pictures or you will get dark and light spots and the 360 will look wrong. Edit these in photoshop, feather the left and right edges in photoshop and create a long collection of the photos that fade into each other so they look like they it is a 360. You will need to chop a few pixels from the top and bottom. Once thats done, duplicate the image and merge the duplicate with the original so you have 2×360 in lengh. Look though the 360 and find a small pixel, or something 1 pixel big that you can easily notice (obviously in zoom). Make a note of using guide lines of the 2 positions of the pixel in the 2×360 image. Now crop the image between the 2 guidelines giving you the perfect 360. You can import this into flash and create the moveable 360. I am currently writing a flash 360 that can be used on websites for free which will be available on www.nurvex.co.uk developer section soon.

Hope this helps any website designers or anyone else really that have no experience with photography who need to take some pictures for your project.

Comments are closed.

The Pages

The Search

The Associates

The Storage

The Categories

Digital Photography for Website Designers