photography for joomla!, presented at jugt 9 december 2014
TRANSCRIPT
Photography for Joomla!
Tips on how to take technically good photographs and use them on your Joomla! Web site.
Presented by: Douglas Pickett
9 December 2014,for
Joomla! User Group Toronto
Summary
Four steps that will be covered: Taking technically good photographs Optimizing those images with a free, simple tool Using Media Manager to make them available
for use on your Joomla! site Incorporate an image into an article using JCE
Caveats
Some parts of this presentation will be my personal opinions. Others may disagree with my opinions. They're welcome to.
I'm not trying to teach you to be a great photographer – I've been trying for the better part of a lifetime and I don't think I'm there yet, so I'm not going to be able to do that for you in one short presentation.
I'll be quoting some generally accepted rules for photographers – but rules are made to be broken.
What I hope to do is help you create a well-exposed, well-edited image that you can use on your sites and be happy with.
Blatant Personal Opinion
I see a lot of web sites where every single image is from a stock image site, and it makes me very suspicious. I look at that, and it makes me wonder if it is real or a scam.
If you want to do a little checking on this, look at reverse image search software like TinEye (https://www.tineye.com/)
Remember too that you only get what you pay for from sites like https://www.fiverr.com/ - one company I once did a search on shared its corporate logo (with minor variations) with half a dozen other sites, including a tattoo parlour. Did they get their logo from Fiverr? Well, maybe.
Types of images
What you want to put on your site is wide and varied, but I'll touch on a small group of general categories, which I hope will cover a lot of them.
Portraits – add that personal touch by putting your own, or your clients, real people on the site
Architecture – your physical storefront or shop, if applicable, but outdoor photography in general.
Objects – things you sell. Shiny objects – a subset of Object, but with
some issues unique to their reflective nature.
What you need
If you're a pro, you can spend a lot of money on this. I'm going to suggest some stuff that you may already have, or can purchase inexpensively, or improvise.
Camera Lights and/or reflectors Backgrounds Tripod or equivalent
Camera
Most of us have a phone with a camera in it – a reasonable choice if you don't have an alternative.
If you have an actual digital camera, it would be nice if it has an “optical” zoom, not just a “digital” zoom, especially for portraiture.
Also cameras have the mount where you can screw them onto a tripod, which will be necessary under some circumstances.
Lighting
I'm going to offer a radical suggestion – under many situations don't use the built-in flash of your camera/phone.
Most digital cameras are sensitive enough that you can use ambient light, and the picture you take will look like what you're seeing. You won't end up making the objects in the foreground well lit, with a dark background, and you won't have unexpected reflections.
Lighting, continued
One exception to using the in-camera flash is when you put your camera into the “always flash” mode, and your scene is well enough lit it doesn't actually need the flash.
This can help to highlight the central area of the image, especially for portraits.
But you'll want to review this to see if the balance between the main lighting and the flash is good, and you're not getting bad reflections.
Lighting, continued
As applicable, you may want up to four positionable light sources (key, fill, hair or kicker, background). But more or less can be used.
For shiny objects you'll want to use a translucent cone or box.
For outdoor photography, try to avoid putting the sun at the back of your subject. This may mean moving your position or that of your subjects where possible. You may need to do something to fill in the shadows. Shooting on an overcast day or near sunrise/sunset may be a choice.
Especially outdoors you may want to use a sheet of white cardboard or foamboard as a light source to fill in shadows.
Backgrounds
You may not have a choice, like with a building, but look behind what you're photographing. You may want to move your position or the subjects position to avoid busy backgrounds or objects growing out of peoples heads.
Under controlled circumstances, use a blank pale coloured wall, or a roll of paper, or a large sheet of paper, to create a background. Your choice will depend on the size of what you're photographing.
Tripod
You don't have to spend a lot on a tripod, but it will help you get the best image, especially in low light conditions where the exposure is longer.
Phones don't come with the threaded mount that allows you to put it on a standard tripod, but there are adapters that will do that.
You could take your phone, put it on top of some books, and then “sandbag” it (a couple of bags of dried beans?) to hold it in position.
Handheld images
Especially with a phone, you're likely to shake the camera as you press the shutter button, or touch the screen.
To reduce this, select the mode that introduces a delay after triggering the shutter before the picture is taken.
You can then leave the camera in its mount, or brace your arms, so it will be a still as possible when the picture is taken.
Exception – moving objects. Try to move your camera to track the moving object – it will blur the background but improve the moving object.
Why all this?
Start off with as good an image as possible – the less work you have to do after the fact the better.
Hold the camera level – this helps with the first point.
It probably has something to do with the fact that I started with a rangefinder camera, but I never count on getting exactly the image I see as the resulting image – leave a border that you'll edit out later.
Portraits
Lighting – Butterfly or Loop Butterfly – main light shining straight on face,
creating a symmetrical shadow under the nose, often considered best for women.
Loop (a variant on “Rembrandt” lighting) – main light at 45 degrees off axis, fill off to the other side (white card or foamboard may replace the fill light)
Both will have a hair or kicker light – above and behind shining on head
Background light on your background
Portrait, Continued
Torso at an angle to the camera. Head turned partly or fully towards the camera. Some suggest that men should look into the
camera, and women off to the side. Camera at eye level or above. Ideally use a moderate telephoto setting, not
wide angle. Don't shoot up the nostrils! Watch out for objects growing out of the head.
Background Light
Highlight
Fill
Key
Result
Architecture
Use a longer lens if possible Consider taking a picture on a day with
overcast, especially if the building is north facing – softens the shadows
If east facing, consider taking picture at dawn If west facing, consider taking picture at sunset
Outdoor pictures of people
Try to avoid putting the sun behind them Try to avoid facing directly into the sun Using large sheets of white cardboard or
foamboard to reflect light into the shadows may improve images taken in bright sunlight.
Depending on distance, and the power of a flash, turn on mandatory flash to help reduce shadows.
Small Objects
Lighting can be the same as for portraits Use sheet of cardboard as “seamless”
background, wrapping from under the object and up as the background
Keep a gap from the background, you may want to raise the object up if it can be done.
Shiny Objects
You are trying to avoid taking a picture of your own reflection.
Put the item on a plain background, or a light box to illuminate from underneath, then construct a cone or a box of translucent material. The object is inside the cone or box. Shine the lights in from the outside
Take the picture through a small opening through the apex of the cone, or through the side of the box.
This should eliminate most of the unwanted view of the environment around the item.
What Next?
You now have a good image that you can prepare for your web site.
We need to eliminate the extraneous part of our image (remember, I suggested you leave a margin around your images), and take into account that the shape of the image may not be what you need on your site.
You'll need to adjust the resolution down to something that works for your site, and doesn't take too long to load.
Editing Software
Options? Photoshop is the choice for pro's – but it costs
a lot of money, and has a significant learning curve.
GIMP – freely available, but still has a significant learning curve.
IrfanView – what I'll be talking about, free (although donations are appreciated), quick learning curve, but not nearly as powerful as Photoshop or GIMP. PC only.
Crop, Resize, Save
Most of the time, these are the steps I use. Crop – select the part of the image I want, in
the ratio that I need for the site Resize – reduce the number of pixels while still
keeping the desired vertical vs. horizontal ratio. Save the result – usually as a JPEG or PNG
Rule of Thirds
Often useful rule for composing a picture Draw imaginary lines horizontally and vertically
dividing the image space in thirds Usually the composition of the picture works
best if you align key features of your subject along these lines.
The result
Original was square, showing outside the desired area, and 1,139,437 bytes
This is image is 200 pixels wide by 300 pixels high, and 109,325 bytes
Other useful IrfanView features
Rotate to arbitrary angle – if you weren't holding your camera level, you can rotate the image to get things level.
Auto Adjust – makes your pictures look better, sometimes works better than others.
Reduce number of colours – if you want to reduce the size even more.
Adjust colour balance, contrast, gamma, saturation
Auto Adjust
Before After
Number of Colours
256 colours Greyscale 16 colours
Media Manager
Used to load your images onto your website Helps to organize the images Create multiple sub-directories to help organize
the images This can be useful with some slideshow or
image gallery software where you specify the contents of a directory to be displayed, rather than selecting individual images.
Insert image in article using JCE
Position cursor at insertion point Select image Set options, alignment, border, rollover action,
styles, and more
Biography
Douglas Pickett, Vogg Technology [email protected]
As a photographer, started serious photography in high school with a hand-me-down 35mm rangefinder camera, mostly taking black&white photos because colour was so expensive. Studied film making, with Super 8 cameras, in his high school's Film Arts program, and received a couple of regional awards
Over 40 years studying and working in the IT field, both software development, system administration, and network design and administration. The last several years he's been an active user of Joomla!