Home | Computers | Codes & Signals | DIY | Marginal Science | Security & Safety | Society | Miscellaneous        stolons: Worklooker | Monkeydoit | JobSpector


Resize a Website Header Image so it Does Not CAuse Distortion

Resize a Website Header Image

Here I'll show 4 ways to resize your website header image in Photoshop. The simple and least desirable way is called Image Resize. It's considered least desirable, or downright ugly, because it creates a lot of distortion to text and overall image detail. You probably already know that simply resizing web images creates a lot of distortion most of the time. Then there's a great feature only available in newer versions of Photoshop called Content-Aware Scale (CS4+). Scaling looks good using this feature, but not perfect in all scenarios when selecting the entire website header image. But, Content-Aware Scale does work flawlessly when selecting less complex image regions. Finally, I'll demonstrate the good old-fashioned no-scale by manually adding to the image in a resized canvas without any scaling applied. This approach is used with older versions of Photoshop.

Here I'll go ahead and setup a scenario. Pretend I have a website header with my company name and logo that is 200 pixels wide. In this project I want to make the header 300 pixels wide without changing the height of 48 pixels. As small as this specification is, it will serve just fine in order to illustrate the various methods of resizing an image of any size.


So here is my original website header image. It's 200 pixels wide:

Unscaled original website header image



Method #1: Using Photoshop's simple Image Size creates distortion


This is by far the worst method to use for most images if you are concerned about image distortion. With your image open try the following:

1. From the top menu in Photoshop, choose Image > Resize Image or keyboard (Alt + Ctrl + i)

2. Type-in the new 300 pixel width (constrain aspect ratio by clicking the link icon - see below). For this scenario I am maintaining the same height as my original header's properties. Click OK.

Photoshop constrain aspect ratio

3. What we get is this distorted image...

distorted website header from image size



Method #2: Content-Aware Scale to resize an ENTIRE website header image


1. Open up your image in Photoshop.

2. From the top menu choose Image > Mode > RGB

3. Double click the layer to release it from being a background layer.

4. From the top menu choose Image > Canvas Size or keyboard (Alt + Ctrl + C) and set your canvas width. For this example I am setting it to 300px. Be sure you anchor correctly. Click OK. See canvas anchor below and how your canvas should look:

Canvas size and canvas anchor image is anchored to the canvas to the left

5. From the top menu choose Edit > Content-Aware Scale or keyboard (Alt + Shift + Ctrl + C)

Choosing Content-Aware Scale from Photoshop's menu

6. Using the guides you can then widen your image to the border. It should snap to the edge once you are close.

Content-Aware Scale of the entire image

7. Click Apply transformation. What you end up with is pretty good, but far from perfect. Look closely at the trademark symbol (below). It looks blurry and distorted. There is also a slight stretch to the other letters and logo. The next method uses Content-Aware Scale more effectively by selecting only a region of the image.

far from perfect header image with blurry and distorted trademark and stretched text and logo



Method #3: Apply Content-Aware Scale to a REGION of a website header image for resizing


In method #2 we used Content-Aware Scale to an entire image, but this created some distortion to the areas of the trademark and some stretching of the logo and text. The steps below deal with selecting only a region resize instead of the entire image.

1. Open up your image in Photoshop.

2. From the top menu choose Image > Mode > RGB

3. Double click the layer to release it from being a background layer.

4. From the top menu choose Image > Canvas Size or keyboard (Alt + Ctrl + C) and set your canvas width. For this example I am setting it to 300px. Be sure you anchor correctly.

5. Using the Rectangular Marquee Tool Rectangular Marquee Tool select a portion of the image outside any detailed texture, logo, or text. In this case I chose a selection near the right-side edge. See below:

Selecting a portion of the image using the Rectangular Marquee Tool

6. From the top menu choose Edit > Content-Aware Scale or keyboard (Alt + Shift + Ctrl + C). Using the guides move the

7. Using the guides you can then widen your selected image region to the border. It should snap to the edge once you are close.

Content-Aware Scale applied and widen - resize the image width

8. Click Apply transformation. Using this method can provide the best outcome for preserving image detail and to avoid distortion.

The header image resized without distortion.



Method #4: Resizing a website header using older versions of Photoshop


This method illustrates how to resize an image by manually copying and adding to the image in a resized canvas. There is no scaling applied in this approach. This is for older versions of Photoshop.

1. Open up your image in Photoshop.

2. From the top menu choose Image > Mode > RGB

3. Double click the layer to release it from being a background layer.

4. From the top menu choose Image > Canvas Size or keyboard (Alt + Ctrl + C) and set your canvas width. For this example I am setting it to 300px. Be sure you anchor correctly. Refer the other methods for illustrations.

5. Using the Rectangular Marquee Tool Rectangular Marquee Tool select a portion of the image outside any detailed texture, logo, or text. In this case I chose a selection near the right-side edge. See below:

Selecting a portion of the image using the Rectangular Marquee Tool

6. Copy the selection keyboard (Ctrl + C) and paste the selection (Ctrl + V). This will create a new layer of your selection.

7. Using the Move Tool Move Tool move the selection to the right to fill the space. Repeat this process by copying the layer, keyboard (Ctrl + J) as many times as needed to fill the space. This will create a perfect website header image.

no scaling applied, manually copying portions for older versions of Photoshop