Creating a Photography Website:

Creating a Photography Website:
Using Photoshop and ImageReady
to Design Your Online Portfolio
Instructor: Seán Duggan

The focus of this class is for photographers to learn how to use Photoshop and its web companion program ImageReady to design and create a web site portfolio to showcase their work. A goal for this class is for you to go home with nearly finished web site project burned onto a CD that you can finish on your own and upload to the the World Wide Web.

This class is for photographers (not web technicians) who are interested in making a web portfolio of their best images. Some prior Photoshop experience and familiarity with the basics of the program are necessary. Knowledge of HTML or popular web editors such as GoLive and Dreamweaver is not required.
Topics include:

* Identifying Your Audience: Is your photography site a way for you to share your images with friends, family and other photographers? Or will it be used as a marketing and self-promotional vehicle to expose your work to galleries and potential collectors? Knowing who the site is designed for will help you answer many questions that deal with how the images will be prepared, or optimized. We will also talk about "Browser Issues" and how your site might appear different when view in a different web browser than what you currently use.

* Planning the Site: Building a web site is similar to building a house; before you start hanging beautiful artwork on the walls, you have to map out what the "house" will look like. Having a well-formed vision of what the web site needs to be and what content will be included will help you create a site that can be easily updated and also one that can be expanded for new material without having to tear everything down and start over. Other issues that we will cover are the ideal dimensions of the design so that the most people can view it easily.

* Developing Overall Structure and Navigation: Once you have a vision and a clear idea of who the site is for and what the site will be, it's time to create a Site Map. A Site Map will help you see the layout of the entire site at a glance and anticipate any navigation problems that might be encountered by visitors. A navigation system is developed to help people find their way to different sections. Will you use graphical buttons or simple text links? Will there be access to the main areas of the site on every page?

* Automated Web Gallery Features: For those who do not require a custom design for their site, Photoshop provides an automated feature that lets you "fill in the blanks" with some basic information. Click OK and you are presented with a simple, finished web site a few minutes later. In this section we will discuss the pros and cons of this approach and suggest ways to improve the images that the automation gives you, as well as preview hot those savvy with HTML can edit the automation code and create their own custom templates.

* Simple Techniques for Basic Interface Design: Photoshop provides all the tools you will need for creating a simple, yet elegant interface to present your work. We will go over what is needed to provide a clear navigation path for visitors to your site and show you how to use Photoshop to create a basic web interface.

* Advanced Interface Design Techniques: Here, we will expand the coverage from the previous section and demonstrate how Photoshop's vector shape layers are perfect for creating interface elements that can be easily altered and customized. Layer Styles will be discussed for adding 3-D touches such as drop shadows and beveled edges to consoles and buttons. And yes, you can have drop shadows and bevels and still have something that looks elegant, serious and professional.

* Using Layers to Create Flexible Page Templates: Just as with editing your photographs in Photoshop, layers give you the ability to create a flexible "Master File". With layers, design elements, even your images, can all be treated individually for maximum flexibility. Layer Sets can be used to group different design ideas all within the same file. Additionally, layers can be used for some items to create "layer-based slices" for the smallest possible graphics.

* Slicing Layout Files for the Fastest Possible Download Times: In order to create web designs that download as fast as possible, the layout is cut up into many smaller pieces called "slices". Both Photoshop and ImageReady provide you with the ability to create simple or complex slice arrangements. We'll go over how to do this in both programs and also discuss when a slice needs to contain an image, and when it should be treated as "empty" in order to speed up download times.

* Creating Rollover Effects: ImageReady lets you prepare layers so that a button lights up, or text becomes bolder, when a visitor moves their mouse over that part of your web page (the classic "rollover" effect). It even writes all of the JavaScript code for you so you don't have to! We'll go over the ins and outs of using ImageReady to create rollover elements

* Choosing Your Images: Which of your images will you include on the site, and how many? Will your site have different "galleries" (i.e., portraits, landscapes, still life, etc)? If you already have a portfolio book, you may just want to duplicate the content on your web site. If you are starting from the beginning, however, you may want to re-examine you best images. Some images may look great in print, but may not translate that well when viewed at web size.

* Resizing, Sharpening and Optimizing Images: In this part of the class we'll go over all you need to know to make the best-possible web versions of your photographs. Differences in file formats such as JPEG vs. GIF will be explained; compression factors and advanced weighted optimization features that use alpha channels to compress one area of an image less than others; how to best sharpen an image for the web; differences in how your images will look between Mac and PC systems.

* Testing Your Site & HTML Tips: Once you have your site completed, you'll need to take it for a test drive and make sure that everything works ok. We'll talk about the best ways to test a site and also how to fix any minor problems that you may discover. We'll also discuss some basic HTML (the basic code that makes web pages work) and give a demonstration of Adobe GoLive for those people who want to explore a more full-featured web-editing solution.

* How to Upload files to a Remote Server: Finally, we will go over the basics of how to get your web site from your own computer to a remote web server so that the rest of the world can beat path to your door and check out all your great photographs. Some of the items to be discussed here include FTP clients; site folder hierarchy; how to maintain an accurate "mirror" site on your own computer.

For more information about Seán Duggan, see:

If you have any questions or comments about
Creating a Photography Website please e-mail us.