• Looking for a Top Flight Web Development Team?
  • Professional & Affordable Web Design Services
  • Shaping Imaginations using Cutting-Edge Technologies
  • Dynamic Solutions for Dynamic Businesses
  • Analysis.. then Solutions with a High Tech Flair
  • Satisfied Customers In Over 30 Countries
  • National Association of
    Accredited Internet Professionals
  • (561)948-6074
Custom Website Designs
 
All you Need to Know About Web Resolution Standards

Screen Resolution Optimization for Mac and Windows

Screen resolution refers to the number of pixels a screen can display in a given area. The standard resolution for Web graphics is 72 dpi for Macintosh and 96 dpi for Windows. This means that all graphics should be saved to their needed exact size at 72 dpi. If graphics are larger than 72 dpi or 96 dpi, they need to be optimized and exported using Adobe Fireworks or Adobe Photoshop. Remember, all graphics should be 72 or 96 dpi to scale. Typically, 72 dpi works well for both platforms.

 

By using the lower standard web resolution for graphics on Windows and Macintosh platforms, Web page loading performance is improved. The quality between 72 dpi and 96 dpi cannot be seen when examining Web site pages. With a high-bandwidth connections of today’s Web users, 96 dpi will not cause too much of a performance issue. However, we want to try to make all Web pages as efficient as possible. So, 72 dpi for all graphics is not such a bad idea. Using Photography to Develop Content The use of digital photography for content development is highly effective for Web applications. For obvious reasons that include speed of transfer from the camera to the computer and the ability to shoot photos at will without laboratory development costs make digital photography an important part of Web portfolio development. Digital photographs used on your Web portfolio can present any number of imaginable images of your work.

Digital Photography and Standard Web Resolution

You may have sculpture, package designs, or student work that you want to show in the Web portfolio. If three-dimensional objects need to be captured, photography must be performed. Digital photography is effective in the creation of Web portfolios for any discipline. A landscape designer may have photographs of completed terrestrial projects. A natural scientist may have photographs of a field expedition or research subject matter. A social scientist may have photographs of research environments and historical artifacts. In addition, simple things like personal photographs of classrooms and conference presentations can make a tremendous impression on the user and potential audiences.  Keep this in mind as you go through professional situations.

 

Keeping a photographic record of these events and presenting them on your Web portfolio further validates your credibility and adds an engaging element to your site. Digital Photography Shooting Tips Using a digital camera, set up physical works (sculptures, 3-D design, bulletin boards, and classroom shots) and take several photos in good light, preferably outdoors. Use a tripod and the camera’s macro setting if available to get a photo that clearly defines the su bject and provides as much detail as possible. Bad photos should not be included in your Web portfolio. Out of focus images, distant subjects, and poorly lit should be eliminated from inclusion. All photos need to be opened in an image editing application to be cropped, color optimized, and set to 72 dpi or 96 dpi.

 

We will cover how to do this later in this web design lesson. Images stored and transferred from a digital camera are typically in JPG format so you will not have to save from another file format. However, when you open up the files from the digital camera in Adobe Photoshop and you start to edit them you may save the file as a Photoshop document (PSD) in order to perform editing and other digital imaging functions that require layers in Photoshop. Scanning Your Work If you need to capture flat artwork and paper assets, you must perform scanning. Scanning hard copy work and flat artwork can be accomplished using a flatbed scanner. Keep in mind the size and standard web resolution when scanning files for the Web.

 

• Scan all images at 150 dpi and then optimize to 72 dpi or 96 dpi (in Photoshop or Fireworks) and save to exact size that will be placed on the Web page.

• Scan photos using 24 bit full color scan settings.

• Scan b/w and line art images at 8 bit settings or Web color settings.

• Save your files as .JPG for photos & full color or .GIF for line art/clipart Web colors respectively.

Screen Capture for Sample Editing

Taking Screen Captures Capturing samples of Web pages, page layout documents, and animations may require you to get screen shots. This can be accomplished by viewing the document on your monitor and then taking a screen capture (shot) of the entire desktop. After taking the capture it is your job to crop, optimize, and save the graphical piece you need. Screen captures are always grabbed at a web resolution standard of 72 dpi on MAC and 96 dpi on WINDOWS computers. On the Mac, you press shift + apple + three and you get a camera shutter click. The captured file is placed on the root directory of your hard drive and is saved as a PCT file that can be opened in Adobe Photoshop or Adobe Fireworks.

 

On a Windows computer, use the Print screen key (PrtScrn) and the desktop is captured to the clipboard. When you create a new file in Adobe Photoshop or Adobe Fireworks the default page size is the same as the captured document. This size will be equal to your screen web resolution setting. You want to capture at a high screen resolution so that the detail is clear when you scale and crop the desired image portion. To do this, set your monitor resolution to a high resolution, 1024 x 768 or above bef ore doing the screen capture. Once you perform a screen capture, you should crop out any unwanted areas of the desktop that were grabbed. Then, the image should be saved or exported as a GIF or JPG. We look at this task later on in this web design lesson. Image Preparation, Crop, Scale and Save Getting your images ready takes time. It is a process requiring acute detail, but it must be done.

Image Editing for Web Standards

Image editing software makes preparing images relatively easy. There are several things that you should be aware of when preparing your images:

 

1. Set the resolution to 72 dpi. To set the resolution of a bitmap graphic in Adobe Photoshop: With the file open in Photoshop, go to Image>Image Size. Set the resolution to 72 DPI then set the pixel height and width sizes. Be sure to keep Constrain proportions are checked on to keep the aspect ratio of your graphic true. To set the image size in Adobe Fireworks, go to Modify>Canvas>Image Size.

Cropping a graphic eliminates wasted image area. Using the crop tool in Adobe Fireworks or Adobe Photoshop allows you to drag the crop tool around the image section that you want to keep, and then adjust the parameters of the crop with adjustment handles located on the crop box. Once the crop is complete, press the enter key and the crop will take effect. Cropping will also make file sizes smaller and decrease load times. Use the crop tool to surround the desired area, then press enter.

 

2. Set the color palette of the image to 24 bit RGB or 8 bit (NO CMYK) (this is done automatically when you export or save as a GIF or JPG in Fireworks and Photoshop’s Web exporting function). Note: conversion from CMYK to RGB must be done manually on files saved as JPG in Adobe Photoshop. If you use Adobe Fireworks, the color conversion process is completed regardless of file format, all you need to do is decide on whether you will use JPG or GIF.

 

3. Set the background color of the image to what you want in the image editing program. You can not edit images in Dreamweaver.

 

Placing background colors is part of the image editing process. In Fireworks, select Modify>Canvas Color to change the background color of the image. If there is bitmap information in the background, say a white border, you would use the magic wand tool of the image editing program to select the white portion pixels and then press delete to eliminate them. The background color should show through. It will become bitmap data when the file is flattened and saved as a JPG or GIF. Export or save as JP G or GIF file format. Fireworks automatically assigns GIF or JPG file formats to any exported graphic. If you use Photoshop, you can save for Web to create an optimized Web file. Or, you can manually save a JPG or GIF file from Photoshop and export a GIF or JPG file from Fireworks. In Fireworks, saving means saving a PNG file.

Saving and Exporting for Web Resolution Standard

PNG is a Web format that has layers and transparency, much like the native Photoshop format. PNG is the proprietary format of Fireworks. Exporting in Fireworks gives you the Web graphics needed for Web sites. In Photoshop, saving can be done with any file format including PSD, the native file format for Photoshop. Scaling graphics is done in the image editing application. Open graphics and use the free transform tool (CTRL+T) in either Adobe Photoshop or Adobe Fireworks. The graphic can be adjusted using handles for scaling and rotating. Once scaled, use the crop tool to eliminate extra space around the graphic. Then save or export the graphic as a GIF or a JPG.

 

Back
to Top