Transcript Photo Guide2x

Photo Display Options
Preparing & Displaying Photos
Last Updated 2/2010
Introduction
Photos are one of the most commonly
used content types. There are two
general types of photos you might add
to your website:
1. Showcase or view book photos:
You might use these photos on the
homepage, for the campus tour, or
as sidebar or accent images.
2. Candid photos: You might use
these photos to exhibit events
such as an alumni reunion or pep
rally.
The type of photos you upload may
determine where on your website they
appear. It may also dictate which
display format you use.
Preparing & Displaying Photos
Display Format
When you first add a photo
category to a page (or
portal), you will need to
choose a display format
using the Channel Options.
There are 5 display formats
to choose from:
- Embedded Player (HTML)
- Embedded Player (Flash)
- Gallery View
- List View
- Thumbnail View
Preparing & Displaying Photos
Embedded Player (HTML)
Displaying a Single Photo
Many times a single accent photo is
added to the sidebar of a page. The
Embedded HTML Player is an ideal
format for displaying these photos.
Tip: Don’t forget to set the Channel Style
by going to the Channel Options.
Preparing & Displaying Photos
Embedded Player (HTML)
Displaying Stacked Photos
You can also stack multiple photos in the sidebar
of a page using the Embedded HTML Player.
Tip: To create stacked photos, each photo must be
in its own album in the photo category.
Also under Channel Options > Embedded Player,
make sure “Multiple Item Display Mode: Stacked”
is selected for the HTML Player Options.
Preparing & Displaying Photos
Embedded Player (HTML)
Displaying Photos in a Gallery
Another way to display multiple
photos is in a click-through or
rotating gallery. The Embedded
HTML Player can be used in this
way to display showcase photos
(such as for a campus tour) or for
candid photos.
Tip: The Embedded HTML
Player will expand to fit the
tallest and widest photo in the
gallery. To avoid blank space
around smaller photos, make
sure all photos are cropped to
the same dimensions.
Preparing & Displaying Photos
Embedded Player (Flash)
Displaying Photos in a Gallery
Similar to the Embedded HTML Player, the Embedded
Flash Player allows you to display photos in a clickthrough or rotating gallery. This display format is
useful for showcase photos (such as for a campus
tour) or for candid photos.
When you add the Embedded Flash Player to a page,
it will automatically resize itself to fit in the page
column (or you can enter a custom height and width).
The photos will also automatically be centered in the
player. Because of this, it is not as important that you
crop all of the photos to the same dimension like you
would with the Embedded HTML Player.
Tip: To find a page’s column
widths, go to Edit Page. Your
standard-sized photos should not
be wider than the column widths.
Preparing & Displaying Photos
Embedded Player (HTML & Flash)
Displaying Zoom Photos
Each photo you upload can have three versions:
thumb, standard and zoom. When you add an
Embedded Player to a page/portal, it will display
the standard version of the photo. However, users
can opt to view the zoom version by clicking on the
photo in the Embedded HTML Player or by clicking
the Full Screen icon in the Embedded Flash Player.
Tip: To create zoom photos, make sure the zoom
option is enabled in the photo category. Also, the
photo you upload must be the zoom-sized photo
(for example, upload a photo that is 800 x 800px
instead of a photo that is 200 x 200px). Podium will
then automatically create the standard-sized photo
based on the specified dimensions.
Preparing & Displaying Photos
Embedded Player Options
Whether you use the Embedded HTML Player or
the Embedded Flash Player, you will be able to
set display features for the player itself. Your
selections will have an important effect on how
your photos are showcased on the page.
Go to Channel Options > Embedded Player.
Among your options for the HTML Player are:
– Manual or automatic photo rotation
– Next & Back button appearance
Among your options for the Flash Player are:
– Manual or automatic photo rotation
– Transition style and length
– Photo caption appearance
– Navigation (play, pause, etc.) appearance
Preparing & Displaying Photos
Gallery View
The Gallery View format is
ideal for displaying
multiple albums on a
page, especially of candid
photos. Users can click
through the individual
album photos or click Play
to view the zoom photos
in the flash player.
Tip: Mark albums as “Featured” to
highlight new or important photos.
Preparing & Displaying Photos
Thumbnail View
Similar to Gallery
View, Thumbnail
View is ideal for
displaying multiple
albums on a page.
Users can click
through the
individual album
photos or click Play
to view the zoom
photos in the flash
player.
Preparing & Displaying Photos
Tip: Give users the ability
to download photos. On
the album details page,
users can download
individual photos or the
entire album.
List View
Similar to Gallery View
and Thumbnail View,
List View is ideal for
displaying multiple
albums on a page. Users
can click through the
individual album photos
or click Play to view the
zoom photos in the flash
player.
Preparing & Displaying Photos
Tip: For every photo you
upload, you can enter a
title, caption and long
description. You can also
enter an album description.
Media Gallery Master Page
The Media Gallery Master Page is a
photo library where users can browse
through multiple photo categories
and albums. This page can be public
or private, and can display user
associated content. Managers will
determine which categories display
and set the default display settings.
The Media Gallery Master Page can be
accessed from your left-hand Podium
navigation.
Tip: Allow users to search for specific
photos in the Media Gallery by tagging
them with keywords such as “athletics” or
“graduation.”
Preparing & Displaying Photos
Photos in a Text Category
The five display
formats previously
mentioned can be used
when photos are added
to a Photo category.
However, photos can
also be added to a Text
category. This allows
you to wrap text
around the photo(s).
Tip: Use the Channel
Options to determine
where the photo(s) appear
in relation to the text (on
the left, on the right, etc).
Preparing & Displaying Photos
Preparing Photos for Podium
Cropping & Saving Images for the Web
Preparing & Displaying Photos
Introduction & FAQ
Before you upload photos to your website, it is important that you prepare them for the web. This
includes cropping and saving the photos for the web.
This document provides instructions on how to crop and save photos for the web using Photoshop
Elements. If you are using different photo editing software, please reference that product’s
documentation.
Why should I crop my photos and save them for the web?
Oftentimes, when a raw photo is downloaded from your camera directly to your computer, the file
dimensions and file size are fairly large. For example, the photo you took at the varsity football game
could be 5MB and 3000 pixels wide by 3000 pixels high. By cropping the photo and saving it for the
web, you can drastically reduce the file dimensions (so the 3000px photo will display nicely in your
sidebar that may only be 250px wide), and you can drastically reduce the file size (so 5MB becomes
70KB). With smaller file sizes, your website visitors will have a much faster load time and a much
easier time viewing your photos.
Preparing & Displaying Photos
Introduction & FAQ
What dimension should I crop my photos to?
Your photo dimensions will vary, depending on where the photos are going to appear on your site (in a
sidebar, on the homepage, in the embedded flash player, etc). Your Project Lead (or a Support
Representative) will provide you with your Site Specs document, which will contain the exact photo
dimensions for your site.
If you use the Embedded HTML Player (such as if you add photos to a sidebar), it is
important that you crop your photos to the dimensions specified in your Site Specs
document. This will help prevent the photos from appearing too small or from “spilling” off
the page. If you use the Embedded HTML player for a photo gallery, make sure all of the
photos are cropped to the same dimension. This will provide for consistently sized photo
galleries and prevent white space from appearing around your photos (as you can see in
the example to the left).
If you use the Embedded Flash Player, the photos will
automatically be centered in the player and the player
will automatically resize itself to the width of the page
column. Therefore, it is not as important that you crop
all of the photos to the same dimension. However, all
photos should be saved for the web, regardless of their
dimension.
Preparing & Displaying Photos
Introduction & FAQ
What are the Max Width and Max Height options in the photo category?
Podium has its own default dimensions for the thumbnail, standard and zoom versions of a photo:
Thumbnail: 80 x 80 pixels
Standard: 320 x 320 pixels
Zoom: 800 x 800 pixels
These maximum dimensions will automatically be applied to the photos you upload, unless you override them
by entering a custom max width and max height in the photo category (such as from your Site Specs
document).
This is especially important to do when using the Embedded
HTML Player. For example, let’s say you need to add a photo
to the sidebar of a page, which is only 190px wide. You would
not want to use the default width of 320px because the photo
would be too wide for the sidebar. Instead, you would enter
190 for the max width in the photo category. Your photo would
then never be wider than 190px and would fit nicely in your
sidebar.
Even if you enter a custom max width and height, it is still
recommended that you crop your images to the correct
dimension and save them for the web to ensure that you get
the best quality and file size.
Preparing & Displaying Photos
Initial Photoshop Setup
1. Open Photoshop Elements
2. On a Mac, go to Photoshop Elements >
Preferences > Units & Rulers
On a PC, go to Edit > Preferences >
Units & Rulers
3. In the Rulers dropdown, select Pixels
In the Type dropdown, select Points
Set the Screen Resolution to 72
pixels/inch
Preparing & Displaying Photos
Cropping Photos
Step 1
Open your file in Photoshop
a. Go to File > Open
b. Locate the desired file
c. Click Open or double click the file name
Preparing & Displaying Photos
Cropping Photos
Step 2
a. Select the Crop Tool (located in your Tools Palette)
b. On the Crop Tool Options Bar (at the top of the screen), enter the width
and height values (in pixels [px]) and the resolution (72 pixels/inch)
Preparing & Displaying Photos
Cropping Photos
Step 3
a. Drag the marquee tool on the image
until the desired area is selected
b. Press Enter/Return or double click
inside the marquee to crop the photo
Notes:
To resize the marquee, drag any handle on
the box.
To reposition the marquee, place your
pointer inside the marquee and drag it to
the desired location.
Preparing & Displaying Photos
Saving Photos for the Web
a. Go To File > Save for Web
b. In the Save for Web dialog box:
- Select JPEG for the format
- Select High or Very High for the quality
c. Click OK
d. Choose where to save the image and click Save
Notes:
In the bottom left-hand corner of the Save for Web dialog
box, you will see the file format (jpeg) and the file size.
First instinct may be to set the image at the highest
quality, but this will increase the file size and
consequently increase the load time. While you are in
the Save for Web dialog box, you can select different
quality settings to view the result and the subsequent file
size. The key is to find the most acceptable quality at the
smallest size. “High” is a safe setting in most scenarios.
Preparing & Displaying Photos
Additional Resources
Adobe Photoshop Elements Help and Support:
http://www.adobe.com/support/photoshopelements/
Preparing & Displaying Photos