/Graphics/ Build a photo portfolio, part two
25/11/2008 | Filed under Develop > Graphics
In the concluding section of our tutorial, you’ll learn how to turn your Photoshop grid into a fully functioning website. Elliot Jay Stocks explains how
In part one, we designed a photography portfolio. Not only did the portfolio use thumbnails, but each page featured a striking photograph as its background image, and these images blended into the background colour to disguise all ‘seams’ in the photograph. This was complemented with some simple but bold typography to add impact to the site, and was set against semi-transparent blocks to let the background shine through. All of this was based around a carefully considered grid system that provided a sturdy framework for the various elements on the page.
Now, we’ll turn your Photoshop mock-ups into a functioning website. You’ll prepare the images for the web, get creative with semi-transparent PNGs and translate your grids into CSS. With the design in place, we’ll bring your portfolio to life by using the popular Lightbox JavaScript to display the full-size images, and use Flickr to take care of the image serving. At the end, you’ll have a stunning site that can be adapted to suit your needs or tied into a content management system, thanks to clean, standards-compliant XHTML and CSS.
About the author:
Name: Elliot Jay Stocks
Site: elliotjaystocks.com
Areas of expertise: Design, CSS, web standards, Photoshop
Clients: The Beatles, Massive Attack, Future of Web Design
Favourite school subject Art
Click here to download the support files
Click here to download tutorial PDF
Bookmark with:
