HTML5/CSS3 Photo Gallery Plug-ins For Adobe Lightroom User Guide V 1.0

Transcription

1 HTML5/CSS3 Photo Gallery Plug-ins For Adobe Lightroom User Guide V 1.0 Copyright Digicrafts. All rights reserved. For license agreement, you can visit

2 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 2

3 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. 3

4 QUICK START Pre-Request An image collection imported into Lightroom. For support on Lightroom, you can visit Lightroom help and support section here: Quick Start Guide 1. Launch Lightroom. At the right top menu, choose Library. 4

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 5

6 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. 6

7 C 6. To export, click on the Export button. Choose a folder to export. Click save and wait the export finish After export your gallery, you can double click the index.html file icon to test your gallery. 7

8 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 main background color. Theme Color The background color for panel. Theme Text Color The color for the text. Theme Alpha The alpha of panel background. Navigation Bar Color The background color of navigation bar. Navigation Bar Color The text color of navigation bar. 8

9 Appearance Navigation Bar Position Set the position of navigation bar. Thumbnail Position Set the position of the thumbnail. Thumbnail Auto Hide Auto hide thumbnail. Thumbnail Resize Set the resize mode of the thumbnail image. Thumbnail margin Set the margin of each thumbnail. Footer Text Set the text of the footer. Enable Footer Enable/disable footer. Enable Control Bar Enable/disable controls bar. Enable Social Enable/disable social feature. Enable Image Zoom Enable/disable image zoom feature. Image Resize Set the resize mode of the main image. Logo Enable/disable logo image. 9

10 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

11 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

12 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

13 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. 13