html5/css3 photo portfolio plug-inslivedocs.digicrafts.com.hk/examples/photoportfolio/user... ·...

®Copyright 2010. Digicrafts. All rights reserved. For license agreement, you can visit www.digicrafts.com.hk/components

HTML5/CSS3 Photo Portfolio Plug-ins For Adobe Lightroom

User Guide

V 1.0

C

HTML5/CSS3 Photo Portfolio Plug-ins User Guide

2

C

CONTENTS

Installation p.3

Quick Start p.4

Setting Panel UI Reference p.8

Custom Styles by CSS p.11

Custom iPhone/iPad home screen icon p.12


3

C

INSTALLATION

For Windows

After download the product zip file, extract it to a temp folder. Double click on the setup.exe. Follow the setup guide and finish install.

For Mac OS X

After download the product zip file, extract it to a temp folder. Double click on the plug-ins icon. Lightroom will launch and ask you if you want to install the plug-ins. Click “OK” and install the plug-ins.


4

C

QUICK START

Pre-Request

An image collection imported into Lightroom. For support on Lightroom, you can visit Lightroom help and support section here: http://www.adobe.com/designcenter/photoshoplightroom/

Quick Start Guide

1. Launch Lightroom. At the right top menu, choose Library.


5

C

2. Choose each photo in the collection and fill in the Title and Caption in the Metadata. Furthermore, you can add the Copyright if you want to have watermark on your photos.

3. Choose Web in the section menu.

And that is the Web interface


6

C

4. Select “Digicrafts HTML5/CSS3 Photo Portfolio” from the engine menu.

5. Edit the parameters in the Site Info, Color and Appearance to see the changes. You can see the preview immediately in the preview window. More info about the setting, you can reference to the “Setting Interface UI Reference” section of this manual.


7

C

6. To export, click on the “Export…” button. Choose a folder to export. Click save and wait the export finish.

7. 10. After export your gallery, you can double click the “index.html” file icon to test your gallery.


8

C

SETTING PANEL UI

The setting panel is appearing on the right side of the preview windows in web section. You can change setting of the gallery in the setting panel and it will preview in real time on the preview panel.

Site Info Site Tile The name of the site. It will appear on as the tile of the site when export. Contacts The text show on the menu for display contacts. Empty the text will disable the menu. Filename The filename used to load when click on the contact menu. Color Palette Background Color The color of the background. Theme Color The color for panel background color. Theme Text Color The color for the text. Theme Alpha The alpha of panel background.


9

C

Appearance Header Position Set the position of header. Thumbnail Position Set the position of the thumbnail. Gallery Menu Text Set the text in the menu for categroy. Footer Text Set the text of the footer. Show Title Enable/disable to show title. Logo Enable/disable the logo image. Slideshow/Transition Transition Type Set the transtion type. ( Remark. 3D transition only function on Safari browser) Enable Slideshow Enable/disable slideshow Auto Start Slideshow Enable/disable auto start slideshow when gallery loaded Slideshow Interval Set the value of delay between slide


10

C

Image Info You can select different meta data use as the text of title, caption. “Category” define the metadata use for define the category. Output Settings Thumbnail The image file size use as thumbnails. Large The image file size use as the poup image. This setting also affect the actual appearance dimension when popup. Add Copyright Watermark Enable lightroom to add copyright water on the images. ( You need to fill in the copyright information in each photos). Sharpening Set the sharpening method for the output images.


11

C

CUSTOM STYLES BY CSS

You can find the custom.css in the output folder inside the resources directory. You can open and edit it with your favor text editor.


12

C

Custom iPhone/iPad Home Screen Icon

When user bookmark your gallery in home screen, there will be an icon. Our gallery allow you custom this icon. The icon is named “icon.png” and located in the “resources” folder. You just need to edit this icon with your favour photo editor. We also included a icon template with Photoshop format in the zip of the product download.

html5/css3 photo portfolio plug-inslivedocs.digicrafts.com.hk/examples/photoportfolio/user... ·...

Documents