O'Reilly logo

How to Design Websites by Alan Pipes

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Step-by-step 3

A basic portfolio website

Step 1.

First prepare your images using Photoshop. For each image, we will require a thumbnail. As the images in this example can be either portrait or landscape, we will opt for square thumbnails 180 x 180px, which will entail some cropping. For aesthetic reasons, make all the large versions the same width, e.g. 550px. An easy way to create thumbnails is to reduce the shortest dimension (the width if the image is portrait; the height if it is landscape) to 180px, then use Photoshop’s rectangular marquee tool, set at fixed size, to make your selection, then Image>Crop and File>Save for Web & Devices. Give your images meaningful names, with no spaces, and all lower case. It is good practice when naming ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required