How to Create a Website Portfolio Using Photoshop CS2

1
How to Create a Website Portfolio Using Photoshop
CS2

• By Chelsea Meindl
• 2007

2
Step 1

• First begin by taking digital photos of all the
  artwork you would like to include in your website
  portfolio.
• Tips
• Use a good equal source of lighting to prevent
  glare.

3
Step 2

• Think about whether you want to have one gallery
  of all your art work or separate ones for each
  media.
• If so you will be making multiple web photo
  galleries in which you will follow this lesson
  for each media.
• Example

Graphic Art
Prints
Drawings
Ceramics
4
Step 3

• Edit and resize all your digital photos
• First, go to image adjustments levels and tweak
  them until you get desired look
• Second, using the crop tool, crop out desired
  area and set the height to 480 px and then press
  enter on the keyboard.

Before After
5
Step 4

• Now go to File Save for Web and save into a new
  folder you can always access.
• If you are creating multiple galleries for one
  portfolio create multiple folders for each media
  and save your images into desired folder
• Example

6
Step 5

• Now you are going to automate the web photo
  galleries.
• FileAutomateWeb Photo Gallery
• There are many different styles to choose from.
• I decided to use the Flash Gallery 2, you can
  chose the one you like best.

7
Step 6

• Under source images, browse for the folder you
  have all your images saved in and select that.
• Then chose a destination to where you want the
  gallery saved.
• Before choosing a destination, create a new
  folder titled website.
• Inside that folder add another labeled gallery
  and then select the gallery folder (note if you
  have more then one media inside the gallery
  create separate folders to save each group of
  images) as your destination.
• This keeps your files more organized and easier
  to locate as well as help establish the website.

8
Step 7

• Under Options you can edit
• General
• Banner
• Large images
• Thumbnails
• Custom Colors
• Security

9
Step 8

• When making a website these sizes for the large
  images work well.
• You can change these settings if you would like
  but I found when viewing the website they are not
  too large nor too small.
• If you keep the height constrained it gives it a
  clean look as well.

10
Step 9

• Once you have all your options complete you can
  select OK and it will resize all your images and
  create the files in a matter of seconds and open
  an internet page similar to this.

11
Step 10

• Now that you have your Web Photo Galleries
  created you need to create a webpage to be able
  to allow people to view your gallery online.
• Using you can create
  a frameset that opens a menu in one frame and a
  main page in another.
• Using a style sheet you can edit the look of your
  page by changing colors, fonts and even adding
  images.

12
Step 11

• When you are all finished and the page opens you
  can test the navigations of your web photo
  gallery.

• If you do not like how it turned out you can go
  back, edit and recreate another by following
  these steps over.

13
Final Production