Shooting and optimizing your internet images



Get Web Design Tips and Tricks on mps-web-design.com. Shooting and optimizing your internet images topic will increase your understanding on Web Design Tips and Tricks. We at mps-web-design.com only provide news, articles, information in Web Design Tips and Tricks. Web Design Tips and Tricks at mps-web-design.com provides the most up to date news and articles. If you have questions please do not hesitate to contact us.

For corporate communicators brought up on printed publications, the immediacy of on-line communications is a breath of fresh air. But just as we have had to adopt our writing style for the net, we should also be thinking differently about how we take and edit photographs.

Why? Internet and intranet images are used very small – often no bigger than about 250 pixels wide. This immediately throws up a problem. On printed pages where we had a whole page to play with we could afford to be clumsy with our cropping and composition. Not any more.

Photographers should adopt a different shooting style for intranet, one that involves much tighter composition and adherence to the common shapes that are used.

Take a look at your on-line news service and you will see that most imagery tends to be landscape shaped. The more enlightened will have adopted portrait-shaped images too, which seem to give the viewer more to look at when placed alongside copy, while still leaving space for a decent column width for text.

But, with a few exceptions, I bet you don’t use cut-outs, or full-screen shots that whack the reader right between the eyes. And you don’t have too much room for picture stories that tell the tale across about 10 images either.

So what we need is a single image that has impact, even when only two inches wide.

The answer then is to brief your photographer carefully about the space you wish them to fill. If possible, show them a typical page or send a print-out. If you don’t brief your photographer carefully how can you expect to get the results you require?

If you’re taking the pictures yourself then try to a) get a lot closer to the action and b) compose your shots to maximize the area you have. I have one consultancy client who nicknamed me “Phil the Frame” as apparently that’s all I kept saying to them! I don’t care – the message seems to have struck home!

But how can you compose your shots better?

The first trick involves heads. If you are shooting a group of three or four people don’t just line them up, stagger them so that their heads are closer together. The same with a shot of a couple. OK, it may feel a little strange for them to be so close to their neighbor, but you can lose that irritating space between their heads and so come up with a tighter image.

You can use the same technique if photographing someone with an object, such as an award. Get them to hold it up against their face, not on their chest.

When using the viewfinder or preview screen really work hard to fill every pixel, moving people around if need be.

Once you have the shot there is a lot you can do to improve it. I have yet to see any image straight out of a digital camera that couldn’t be enhanced.

First, make sure you are viewing the image on the type of monitor that everyone else in the organisation is going to use. If using a Macintosh, change the gamma setting from 1.8 to 2.2 (the Windows standard). Images displayed on a PC are inherently more contrasty than they look on a Mac if you don’t.

In Photoshop, adjust the levels using the histogram as a guide. This is better than using the brightness and contrast controls. Sometimes it can help to boost the saturation by +10 too, depending upon what camera you use.

Then crop the image to show what you want, bearing in mind how it will be used on the screen. Once cropped, resize the image down to 250 pixels or whatever you normally use. If you resize and then crop you will end up with something totally the wrong size!

The final step is to apply some Unsharp Masking to the image to put back some of the definition lost through resizing. It is amazing how many people don’t do this. Typical settings in Photoshop are Amount: 30-100%, Radius 1.5 pixels and Threshold 5-7 levels.

Don’t overdo the sharpening. If it looks too gritty, cut the Amount down by half.

Finally, save as a JPEG file (not a GIF, which only uses 256 colors, instead of the JPEG’s 16.7 million), choosing an appropriate level of compression. When all internet connections were via a modem it was important to get the file size incredibly small, but with most intranets you can afford to make them a little bigger.

Using the “Save for Web option” you can play with the “Quality” control to get a good balance between file size and image quality. You should be able to get a 250 x 200 pixel image down to around 10k with no sign of degradation or artefacts – these are the strange squiggles you see in over-compressed images.

Voila! You now have an image that is well composed, tightly cropped, optimized, sharpened and ready for use.



Burn The Fat Feed The Muscle. - Diet & Weight Loss Secrets of Bodybuilders and Fitness Models: #1 Best Selling Diet & Fitness E-Book In Internet History!
Reliant Sports Group. - Why Choose An Immitator When You Can Have The Real Deal! We Are The #1 Sports Handicapping Service on the Internet.



Article Index: | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79


More Articles:


1. Seven Free Tools to Create your Web Site
Coding your HTML by hand gives much better results thanusing a WYSIWYG program. You can get the layout that youwant, and make small adjustments easily.NotePad comes free with Windows - but a much better texteditor is NoteTab Light. This has a sidebar with HTML tags -double-click to enter the tag you want, with a dialog boxfor those that have options or preferences, such as size,colour, placement, etc. Download it fromhttp://www.notetab.com/ . There is also a NoteTab mailinglist, where you can as…

2. What to avoid to make your website design effective?
What to avoid to make your website design effective?By Veselin AndreevWritten in April 2003 --------------------------------------------------------------------------------The effective design is this one, which is maximum simplified, conformable to your users because they are your main purpose. This one, simply and clearly announcing what is your website about. This one, quickly offering the users exactly what they are expecting to see on your pages without being troubled with insignificant inf…

3. Creating myspace layouts without any coding experience
When we want to create or edit our myspace profiles, we must add or manipulate a piece of HTML and CSS code. The problem is just that not everyone know how to code and is not interested in that part either. So what are you going do? Well, you will probably look on all these myspace layout sites. There is surely something interesting that you can find, but you are limited to the current range only. There's nothing that is designed exactly after your wishes. If you want to copy something from thes…

4. Flash Design Adds Website Versatility By Wendy Maynard
You have probably viewed many Flash-based components while surfing the Internet. Most smooth animations on websites and in banner ads, short films, and presentations are built in Flash. Macromedia Flash is a powerful and adaptable software program. It enables Flash web designers to incorporate sound, movement, and interactivity that cannot be achieved with standard HTML websites.Web designers use Flash to develop a wide array of presentations, tutorials, and websites. They can create entire we…