Your SlideShare is downloading. ×
Image Editing Fundamentals for Web Producers
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Image Editing Fundamentals for Web Producers


Published on

There are only a few things you really need to know to edit high-quality images for websites: Cropping, Adjusting, Resizing and Exporting. You can do this with Photoshop or programs like Graphic …

There are only a few things you really need to know to edit high-quality images for websites: Cropping, Adjusting, Resizing and Exporting. You can do this with Photoshop or programs like Graphic Converter, GIMP or Picasa.

Published in: Art & Photos

1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Image Editing Fundamentals for Web ProducersThere are only a few things you really need to know to edit high-quality images forwebsites: 1. How to edit the image. This includes... a. Cropping b. Adjusting "levels" c. Resizing 2. How to export it for use on the web.Adnaan Wasey @adnaanwasey Page 1/14
  • 2. Image Editing Fundamentals for Web Producers1. EditorialFirst of all, you should find a “good” image. What does “good” mean?Good images for the web are... ● Compelling - The image should grab attention. ● Illustrative - It should show what you need it to show. ● Recent - Especially when dealing with a news event. ● Unique - You shouldn’t use the same images over and over to represent the same thing. ● Large - You should always have the luxury of scaling down and image. When you have a choice, start from the highest quality picture possible -- i..e, the original and largest one. ● Nice - They should be shot well, crisp with lots of color information. Not overexposed, underexposed, washed out, pixely, etc.And dont ignore copyright! ● Always confirm the copyright/license of the image and photographer. ● Always confirm the legitimacy of the image and photographer. ● Always include a photo credit and a caption along with your image. Creative Commons licenses are more relaxed but they usually require some form of attribution. The URL of a website is not an appropriate photo credit.Adnaan Wasey @adnaanwasey Page 2/14
  • 3. Image Editing Fundamentals for Web Producers2. Image EditorsSome cost money and some are free. You don’t need Photoshop. Free tools includeGraphic Converter, GIMP and Picasa. Photoshop, Graphic Converter and GIMP giveyou fine grained control over images, but Picasa is also powerful.Best Practice #1: Always make a copy.Make a copy so you don’t overwrite the original by mistake, so you can start again,and so you have the ability to use it later for a different purpose.Best Practice #2: Never use an image as isWhy? Images might be too big, poorly composed, too dark, contain hiddeninformation, have bad filenames, are in the wrong file format, and many other problemthat you can solve very quickly -- within seconds. Another reason, other apps andwebsites might extract this data for you and display it without your knowledge -- Siteslike Flickr can extract image comments that you may not have written, or data aboutyour camera and when the photo was taken.Adnaan Wasey @adnaanwasey Page 3/14
  • 4. Image Editing Fundamentals for Web Producers3. CroppingImages may need to be cropped to adjust composition. This will also reduce the size ofthe file which could improve the speed of your editor.Know the rule of thirds for composition before you break the rules: ● Imagine the frame as having 9 boxes like a tic-tac-toe board. Align elements to be on the lines, or sections to be separated by those lines.Tighten the frame! ● Amateur photographers have a tendency to zoom out when they should be zooming in. ● Luckily with cameras having so many pixels, you can crop images and still have enough resolution for a great web image.Horizontal looks better than vertical for the web: ● Computer monitors are this size, and web layouts are usually in columns, so tall images take up too much space and don’t fit with most layouts. ● For print images, photo editors prefer a variety of sizes. ● 16x9 (i.e., HD-ish dimensions) is a good benchmark for web images.Tips for cropping faces: ● Use the 2/3rds rule of thumb for the location of the eyes on an image of a face. When your brain sees a face it wants it to look like a face, where the eyes are 2/ 3rds of the way up. ● If you put the eyes 1/3th from the top, it almost doesn’t matter where you crop! You can cut off some hair very easily or part of the chin too (but don’t crop exactly at the chin!) ● But... for people with large foreheads, eyes can be closer to half way from the top. ● If you deviate from the 2/3rds rule, you might notice the following: ○ If the eyes are lower than 1/3rd from the top, it’s like we’re looking down. ○ If it’s higher are higher than 1/3rd from the top, then it’s like we’re looking up.Tips for cropping bodies:Adnaan Wasey @adnaanwasey Page 4/14
  • 5. Image Editing Fundamentals for Web Producers ● Don’t crop at knees or thigh. Don’t crop at ears. Cropping at the biceps is OKTips for cropping scenes: ● Watch out for strange edges, lines at the edge of the frame, or dark objects at the edge of the frame.Best Practice #3: Crop consistentlyWhatever you do, it’s better to be consistent in cropping (i.e., the 2/3rds rule for eyeplacement) than using different crop styles. Web layouts frequently include rows offaces, so they will look strange to viewers if the eye lines don’t match up!General cropping tricks: ● If you see white around the image, you can "Trim" to remove them before you begin your real cropping, which will automatically remove edges that match your background color (usually white). ● Crop a little at a time. Be conservative and take off pixels from each side individually if you have to. This is especially useful for screen captures. ● Squint or move your head back as you are cropping to judge it. ● For cropping to make thumbnails, you can often pick a detail, don’t scale down the whole image.Adnaan Wasey @adnaanwasey Page 5/14
  • 6. Image Editing Fundamentals for Web Producers4. LevelsAfter cropping, the next edit youll want to do is adjust levels. Best Practice #4: Edit images to maximize how much information is displayed Your goal is to produce as many perceptible differences as possible in the region your viewer is going to be most interested in. Adjusting Levels is the primary approach for maximizing information.Viewing LevelsIn your image editor, open the Levels tool.The histogram you see is showing you the amount of black pixels, white pixels andeverything in between in your image. Ideally this histogram isn’t skewed to one side orthe other, there are no gaps on the left and right sides where there are no pixels, and nosections reach the top of the chart (this is called “clipping”).Can the image be salvaged if it’s clipped? Possibly. If clipping happens on the left side,you won’t be able to easily extract detail from the shadows. If clipping happen on theright side, you won’t be able easily extract details from sections that were overexposed(e.g., lights and hard lighting).Remember the goal of adjusting levels: to maximize information. Use the full range ofthe histogram to create more perceptible differences, and better images.Editing LevelsYour edits may be "destructive" (once you edit this image, you cant undo the changes)or "non-destructive" (the original image remains intact while you make adjustments).Photoshop can edit in either mode. Simpler tools are more likely to be destructive.You have five points you can play around with. 1. A black point (on the histogram) 2. A midpoint (on the histogram) 3. A white point (on the histogram) 4. A black point (on the "output")Adnaan Wasey @adnaanwasey Page 6/14
  • 7. Image Editing Fundamentals for Web Producers 5. A white point (on the "output")Tips for adjusting levels: ● Image washed out? ○ Pull in the end points (i.e., move (1) and (3) toward the middle) ● Image too dark? ○ Histogram: Move midpoint (2) to the left (toward black) ■ This stretches out dark side of the image so the image becomes brighter. ○ Output Level: Or move black output level (4) toward white. ■ This removes black and could give you a little bit more detail in the shadows, but will wash out the image, so only do it a little bit. ○ Warnings: ■ Look out for splotches where there is no information (light sources or cheeks). ■ Don’t automatically pull the whites in. There’s a lot of good (but subtle) information in the whites. ■ To retain brightness, when you pull whites (3) in, push midpoint (2) toward white. ○ Clipped brights? ■ As long it’s not a giant band, you can probably ignore them if you’re adjusting everything else well. You could even pull (3) toward the middle to ignore that section in which you’re not going to have any detail anyway. Best Practice #5: Brighten more than you need if youll be exporting at JPEG JPEG compression will darken images, so once you’re done with levels, push them to be a little brighter before you export. Also, the web is primarily a black-on-white medium, and images should be brighter than most people make them anyway.Inescapable problems: ● If you overdo it or of the image has too little information to start (i.e., it’s too clipped), you’ll get a pixely look (posterization), which doesn’t look good. ● Don’t adjust levels over and over again on the same image. It only works once! If it’s already been adjusted, your level adjustments will have to be more subtle otherwise you’ll get posterization or you’ll lose useful image information.Adnaan Wasey @adnaanwasey Page 7/14
  • 8. Image Editing Fundamentals for Web Producers5. ScalingAfter cropping and adjusting levels, scale your image.Use the default scaling algorithm. It might be “bicubic” or “best for shrinking” or “best forinterpolation”. The scaling methods are too similar for you to worry about all the options.Never scale up. Instead start with a bigger image or rethink the application of theimage. For example, It might be OK as a thumbnail, but not as an image as part of aslideshow.Make images the sizes you need them to be. Dont let the browser (or an app, or asocial media site) do the resizing because it could ruin the presentation of your image inthe process.Another reason not to let other apps scale down for you: The thumbnail might be toosmall to show detail or you might lose the ability to read text in the image. In this case,crop before scaling down to select a detail or feature (such as a face among a crowd orbackground).How to Resize into a templateIn Photoshop: 1. Create a new image with your target dimensions. 2. Open your source image. 3. Drag the source image into your new image. This will create a new layer with the image youve dragged in. 4. To resize: Click Apple+T (Mac), then hold down the shift key, then drag a corner so this image layer fits in the new image. 5. You can move the image around to optimize the composition, and resize again if you need to. 6. Hit Enter to accept the resized image. Note: Resizing is destructive, so if you make the image to small, you should delete the layer and drag the source image in again.Adnaan Wasey @adnaanwasey Page 8/14
  • 9. Image Editing Fundamentals for Web Producers6. EthicsImage manipulation introduces some ethical issues that you should consider.Generally, you can make uniform adjustments (i.e., using a filter that works on thewhole image, such as brightness, contrast, levels or tint). The ethical goal is to retainthe integrity of the image.Any manipulation, either manual or automatic, that treats one section of an imagedifferently than another section could lead to a subtle distortion on one extreme to acompletely false representation on the other extreme. (In the context of journalism,these pose legal problems in addition to ethical problems.) Selective additions to animage present the same issues.Cropping is a manipulation, but there is a difference between in removing 2 pixels fromone side of an image and cropping people out of an image to disguise the fact that theywere present at the time and place of a photograph.Other times, image licenses may stipulate that you must use the image withoutmanipulation.Also, keep in mind the intention of the photographer. The image may be very dark,but the photographer may have created the image to dark for some other creative oreditorial aim. Its important to know this type of information before you begin editing.Adnaan Wasey @adnaanwasey Page 9/14
  • 10. Image Editing Fundamentals for Web Producers7. Saving & Exporting7.1. Whats the Difference?Saving and exporting are different. Youll probably have at least 3 files when youredone this process: the original file, a copy or new file that contains an edited butuncompressed image (the result of saving), and an image that is suitable for postingonline (the result of exporting).(If you want to re-edit an image, start from the original image or the saved version, notthe one you exported - especially if the image has been compressed in a lossy way.)Always export using a "Save for Web..." feature, which you should think about asExporting for Web. (Its called this in Photoshop. Photoshop also has a "Save As..."but this gives you fewer options and not recommended for exporting images for webproduction).Saving for Web removes metadata (when the photo was taken, what camera is wastaken on, etc.) that might be private, incorrect or unknown. You don’t want to propagatemetadata that you havent vetted. You should control what information that goes alongwith the image, including its metadata.Most web images are too large in their file sizes. Saving for Web can shrink the file sizeconsiderably, which speeds page load times, especially on mobile devices.Adnaan Wasey @adnaanwasey Page 10/14
  • 11. Image Editing Fundamentals for Web Producers7.2. JPEGs vs PNGs vs GIFs JPEG PNG GIFUse it for... Most photos Graphics Old Browsers For most photos with PNGs are preferred A format that PNG lots of color information. over JPEGs for has tried to replace. graphics, such as GIFs have limited color screenshots (it’s palettes, while PNGs why your Mac saves have more colors screenshots as .png possible. not .jpg), drawings, diagrams, logos, icons, Works well with very images with hard simple graphics with edges. few colors. If IE6 and older phones are key platforms, then choose GIF over PNG.Transparency? No Yes YesTransparency is usefulfor graphics, rarely fordaily web production.Dont use it for... Graphics Universal Display Photos ...or any images with IE6 and older phones Only for the simplest only a few colors or don’t support PNG, graphics. hard edges -- use PNG. so don’t use PNGs when providing critical information via an image.Lossy? Yes Yes NoImage formats are But the idea is that GIFs will reduce your PNGs are usuallycalled “lossy” when JPEG quality is color palette to a uncompressed.compression removed selected so that no one smaller number ofinformation from an will notices. colors (e.g., 256),image. The information making your image lookwill be lost and can’t be pixelated.recovered unless yougo back to the original.Adnaan Wasey @adnaanwasey Page 11/14
  • 12. Image Editing Fundamentals for Web Producers7.3. JPEG Resolution & QualityJPEG Resolution: JPEGs for the web are 72dpi, so they should be exported at thisresolution. Photoshop will do this for you. Check your Graphic Converter settingsbefore you export. If you export to a different resolution, the image may appear toosmall or too large.JPEG Quality (A scale from 0-100): Make it as low as tolerable for the application,because that will mean the smallest file size. Look at the image and decide (usePhotoshops 2-Up or 4-Up tabs to see multiple options). Aim to have no meshy or boxy-looking artifacts in the image: ● Start around 65 ● For photography (photo slideshow) or sharp images with lots of detail: Choose higher quality (usually in the 80s, pretty much never beyond 90). ● Thumbnails: Can be very low (less than 65). ● If there’s little perceptible information in the image: Go lower.Note: 0-100 is not a percentage. i.e., 65 is not 65% and it is not inherently bad.Adnaan Wasey @adnaanwasey Page 12/14
  • 13. Image Editing Fundamentals for Web Producers7.4. Naming the Exported FileThe filename is important for many reasons: 1. To stay organized - Its common for websites to use a lot of photos! a. To know the who, what, when, where. b. To know the source of the image (photographer, copyright) c. To know the difference between an original image, an edited image and an exported image. 2. For search engines - The filename is a part of the image that is actually seen by search engines so take care with naming! a. Use keywords b. Be specific c. Be unique (how is this picture different than another one that might have the same name) d. Separate keywords in the filename by dashes, not underscores. This may change in the future, but it’s dashes for now. 3. For humans - Filenames are visible to humans too! a. Web users can easily see image names (e.g., in tooltips), so create appropriate names for them.So, use a convention. It will vary based on the kinds of images you produce reguarly.Heres an example:[keywords]-[who/what]-[where]-[datetime]-[credit]-[dimensions].jpgoscars-2012-red-carpet-fashion1-20120222-adnaanwasey-cc-bysa-500.jpgThe convention might be simplified by putting the image file in a subfolder, which in theabove case might be /images/oscars2012/fashion/.Adnaan Wasey @adnaanwasey Page 13/14
  • 14. Image Editing Fundamentals for Web Producers8. Useful ShortcutsFor PhotoshopCropping ● Select a Box: M, click and drag to make box. Shift + (click and drag) to keep a square. ● Crop after Selecting: Image:CropLevels ● Destructive: Apple+L (Mac) (or Image:Adjustment:Levels)Resizing ● Grabber tool: V ● Resize: Option + Apple + I (Mac) (or Image:Image Size) ● Resize Layer: Apple-T (Mac), grab the corners, hold down shift to keep dimensionsFor Graphic ConverterCropping ● Select a Box: M, click and drag to make box. Shift + (click and drag) to keep a square. ● Crop after Selecting: Apple-Y (Mac)Levels ● Destructive: Apple+L (Mac)Resizing ● Ctrl+Apple+Y (Mac)Adnaan Wasey @adnaanwasey Page 14/14