Student Showcase: Restaurant Site Mockup: Version 1

We will showcase your version 1 movie site home page layouts in class. Tell us a bit about your design choices. Then we will seek feedback from your classmates. [5-10 minutes per student]

Using Imagery in Web Design

Regardless of how good a job you’ve done selecting images for your design (last week,) there’s another critical factor to consider: presentation. When you’re formatting images for use on your site, their presentation will often depend on the constraints of the layout you’ve chosen. The image size, for example, may depend on the size of the box you have available in your grid. As the designer, it’s up to you to determine:

  • how an image will be cropped and color corrected
  • if an image will have any framing or borders
  • what type of visual effects will be applied to the image, if any.

Always begin with the highest-resolution image you can obtain or afford before making your edits in Photoshop. I highly recommend you get really comfortable with and knowledgeable about Photoshop so that you can make the images that appear on your website as stunning as possible.

PSD TUTS+

Creative Cropping

Some of the most profound impacts you can make on the presentation of an image come from wisely choosing what should be included, and what should not. This process is known as cropping, and is a fundamental image manipulation technique.

Cropping can be used to eliminate unnecessary or distracting details from a picture.

Photoshop cropping
The original photo with perspective issues and some warping, along with extraneous details.

Photoshop cropping
I copied the image to a new layer. Then I pulled out a few guides and and used Edit > Transform > Distort to straighten out the lines of the house.

Photoshop cropping
I had lost the top of the house and it was looking a bit short, so I increased the height of the canvas (Image > Canvas Size…) Then I used the Transform command again to readjust the perspective and make the house taller. There are still some weird warps in the eaves that existed in the original photo. You could spend some time warping them back into place, but for now I’ll leave them be.

Photoshop cropping
I cropped out extraneous details on the left and right.

Photoshop cropping
The original photo compared to the corrected, cropped photo. The second photo will give a much better impression on a business website.

Cropping is also useful in increasing the emotional impact or enhancing the message of an image.

Photoshop cropping
The original photo is lovely but we feel a bit distant.

Photoshop cropping
The cropped photo feels more intimate and better focuses on parental concern.

Photoshop cropping
When you isolate the figures from the background, it can have even more appeal.

Lighting and Color Adjustments

If you’re not a professional photographer with gads of expensive equipment, it can be a challenge to obtain photos with just the right color and lighting balance. Do your best to consider composition and lighting before you take your shot. Then enhance the lighting and color in Photoshop.

Just about any photo straight of of the camera is going to need some corrections. Some need more than others.

lighting
On the left, a typical angled shot taken in a poorly-lit room taken by the model herself (a “selfie”). I rotated it to a more pleasing angle, cropped in to put the focus on her face, and generally improved the lighting and color. Because photos in low light often have a certain amount of noise that becomes more obvious when you lighten them, I liberally applied the Blur tool to soften the forms of her face.

lighting
In this image I did some lighting and color-correction, and then cropped in order to show the toddler’s expression better.

Photoshop Filters

In photography, a filter is a physical attachment for your camera lens that alters the way a photo is captured. These filters can acheive richer colors, compensate for bad lighting, or make an image feel warmer or cooler.

Photoshop filters follow this basic idea but go far beyond it. They can be used to create artistic effects, distort images, add texture, and much more.

Caution should be used with Photoshop filters. If you use a filter on its own without any adjustments to the default settings, it can look very cliché. If you spend some quality time with your image, however, you can achieve some nice results by adjusting the settings or even combining filters in differing strengths.

filters
Here I used a combination of three filters (Poster Edges, Diffuse Glow, and Texturizer) to convert a photo of a honey badger into an image resembling a watercolor painting on rough paper. I carefully adjusted the settings for each filter to get just the right look.

File Formats

Once you have your Photoshop file completed, you’ll need to save your image for the web (File > Save for Web.) It’s important to understand the characteristics of the three main image file formats used on the web. There’s a more complete rundown of these file formats here. But below is a summary.

GIF

GIF is an 8-bit format that supports a maximum of 256 individual colors for a given file. GIF is therefore useless for photography. It is instead ideal for graphics composed of areas of solid color. GIFs can display transparency, but it’s all or nothing: 100% transparent or 100% a specific color. GIF can also support animations.

sample gif - Starbucks logo
JPEG

JPEG was designed specifically for photographic images. Unlike GIF or PNG, JPEG can provide fairly small file sizes at 24-bit color (16.8 million colors.) The drawback is that JPEG is a lossy format that create visual artifacts depending on how much you compress the file.

sample JPG - photo of a toddler in a raincoat
PNG

PNG comes in two flavors: 8-bit and 24-bit. The 8-bit PNG works much like GIF. 24-bit PNGs can display as many colors as JPGs but without the lossy compression. For this reason, you get much higher quality, and at times a much higher file size that can go with it. PNG-24 can also supports variable transparency, which means that any given pixel can be partly transparent.

sample PNG - Windows logo