A Rough Guide to getting images onto our website (updated 26 Jan 2011)

Rod Bird

I thought I'd explain my procedure for preparing pictures and posting them on the club website, not because I think it's the best or only way of doing it, but because it's easy, it's quick, and it works. Photoshop gurus (or at least the self-appointed ones) have an annoying habit of saying things like "ooh no - you should be using Preserve Luminosity on a CMYK Halftone Diffusion Dither Layer with Overlay Unchecked" when you're just opening a file or something, so trust me not to use a tool if there's a simpler one. As far as I'm concerned "If it looks right, you've done it right."

What took me a while to get right was the sequence, so here's what I do.

		Notes, or actions in Photoshop/Elements
1	Upload images to PC	On the camera I save all images as Hi-Res JPEGs.
2	Open file in Photoshop	If PS tells me there's a Profile Mismatch, I convert to the working space sRGB.
3	Crop the image
4	Adjust image size	Image>Image Size : In the top box I specify a width of 600 or 700 pixels if it's a landscape format photo. I leave the two boxes at the bottom (Constrain and Resample) checked. NB: If I intend to use the image elsewhere, for instance as a print, I'd do all the adjustments first, and then resize a copy for use on the web.
5	Clean up image	I remove scratches, badly positioned sheep, people I don't like, etc, using the Spot Healing Brush and Clone Stamp
6	Adjust general appearance	Experts say never-ever use the Auto Levels command (Image>Adjust>Auto Levels) but I often give it a go. If I don't like what it does, I go back a step through the History palette (which you can see by Window>History). If I have to adjust it manually I use Levels and/or Curves, but both take a bit of practice. If I'm in hurry, Brightness/Contrast does pretty much the same thing only quicker. Occasionally I increase the Saturation - sometimes on the Master channel, sometimes on just one colour.
7	Make selective adjustments	Most of my pictures are landscapes so this is usually to darken the sky or to increase its contrast. I generally try the Magic Wand tool and then feather it by 1 or 2 pixels using Select>Refine Edge. Once it's selected I creat a Levels adjustment layer and then move the sliders until it looks right. Often a plain white sky can benefit from a subtle move of the white slider on the lower (output) control.
8	Sharpen	I sometimes sharpen the image. I ensure it's displayed at 100% (Ctrl+ or Ctrl- to magnify/reduce if it isn't) and then I use Filter>Sharpen>Unsharp Mask. I keep the Preview box ticked, and then nudge the sliders around until it looks right. Typical settings for me on a 700 pixel-wide image are: Amount=70, Radius=2, Threshold=5. Sometimes however unsharp mask makes what looks like dust marks appear, especially in skies. If this happens I select the sky, invert it, and then sharpen, in other words sharpening everything except the sky.
9	Penline	I add a thin black line round all images by first going to Select>All, then to Edit>Stroke. My lines are always 2px, black and "inside".
10	Save	I save the image as a JPEG. If the image size looks too high (you can see it in the bottom left-hand corner of the JPEG options box which comes up automatically) I slide the quality down until it's 120KB or less. Alternatively use the "Save for Web" option in Photoshop or Elements, which lets you see the resulting file size more easily and produces smaller filesizes because it cuts out a lot of the metadata.

Now I load the images onto the website. I don't need Photoshop running for this bit.

11	Create page	I decide where on our website I want my new page to be accessible from. For instance the way into *this* page (the one you're looking at now) is from the "Hints and Tips" page, so I opened that page, pressed EDIT, added a new line in the same format as the lines already there, and gave it a name.
12	Decide page layout	I click on the name I've created (on the Hints & Tips page in this case) to open my new page. Often the layout will be a copy of one I or someone else has already created, so being a naturally lazy person I go to THAT page, click on Raw Text, highlight the text, and copy & paste it into my new page. Then "Save Changes".
13	Upload pics	Click on the slim "Add a picture" button, then on "Browse". I locate the first picture I want to load, and double-click on it. Its name appears in the "Local File" box. I click the "Upload file" button and the progress indicator bar lower down will start to move. When it's finished the file is uploaded. If I have more files to upload to the same page I do them all now.
14	Add text	It's at this point I add my text. I just bung it in at this stage - I'll make it look nice later.
15	Position pictures	After the pics have been loaded, you'll find each one is represented by a block of characters that looks a bit like this: *(img src="%ATACHURLPATH%/pic01.jpg" alt="pic01.jpg" width="700" height="500 /).* I just cut & paste the blocks into the text so that they appear in the right sequence, amidst the relevant text.
16	Adjust size	By overtyping the "Width" and "Height" values I can control the size of the picture on the screen. Often I reduce the size. It's important to keep the values in proportion.
17	Justify pics	I add some text into the blocks of characters to position the pictures on the left or right, and to let text flow round them. For instance a picture on the left hand size will be look like this: (img *class="leftfloat"* src="%ATACHURLPATH%/FieldsnorthofMarlow.jpg" alt="FieldsnorthofMarlow.jpg" width="400" height="256" /). Changing leftfloat to rightfloat does what you'd expect.
18	If in doubt	Copy someone else's raw text and work from that.

-- RodBird - 23 May 2005

Topic revision: r8 - 23 May 2011 - 12:17:24 - RodBird

Parent page:
- HintsAndTips