Note that
although the rules within the remainder of this chapter are not formatted in this manner,
the rules within the download file style sheets are.
Creating a portfolio layout
This section will show how I created a layout for an online portfolio, suitable for a designer
or photographer (professional or otherwise) to show off their wares. The Photoshop file
for the document is gallery-layout.psd, in the PSD mock-ups folder within the chapter
10 folder of the download files. The completed web page (along with associated files) is
within the gallery-website folder, within the chapter 10 folder. The following image
shows the Photoshop mock-up of the page.
PUTTING EVERYTHING TOGETHER
373
10
About the design and required images
As you can see from the previous screenshot, this page has a simple structure. The fixedwidth
layout has a masthead that contains the name of the portfolio and is bordered on
the bottom, creating a visual separator between the site??™s name and its contents. The main
content area is split into two columns. On the right are thumbnail images, and on the left
are the main image, a caption, and basic instructions regarding how to use the page.
From the mock-up, only one image was exported: the site??™s heading from the masthead.
Although it would be possible to approximate this in HTML text, the size of the heading
and the nonstandard font used (Helvetica Neue) means it made more sense to export it as
a GIF.
Pages:
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477