User Guide clickbooq v4 r

Transcription

1 User Guide clickbooq v4 r

2 Introduction About clickbooq Welcome to clickbooq! clickbooq is an easy-to-use website creation, management, and hosting solution developed exclusively for professional photographers like you. You can use clickbooq to create a professionally-designed, full-featured Flash website in minutes. clickbooq allows you to customize your site with near-limitless options: update your portfolios, captions, and content; access thousands of photos stored in your online image library; and share private web galleries with colleagues and prospective clients. How to Use this Guide This User Guide will provide you with step-by-step instructions for designing and publishing your clickbooq website for the first time. Once you ve published your first site, you won t have to go through these steps again sequentially just edit the sections you want to change. We recommend that you print this User Guide for easy reference. For More Information In addition to this guide, you also have access to clickbooq s online Support Center where you can find answers to commonly asked questions in our comprehensive KnowledgeBase, browse the User Forums for helpful hints from other clickbooq users, or submit a support ticket for further assistance. We recommend getting acquainted with clickbooq s support system by visiting clickbooq s support site at 2

3 CONTENTS 2 Introduction 3 CONTENTS 5 GETTING STARTED 5 Point your A-RECORDS 6 Building your website for the first time 7 Things to remember 8 PREPARING YOUR IMAGES 8 Resize your images: PREFERRED METHOD 10 Resize your images: ADVANCED METHOD 12 Automatic batch image resizing 13 IPTC Data 15 Accessing the toolbox 16 LAYOUT & STYLE 16 SITE LAYOUT 17 SITE NAVIGATION 18 SITE COLOR 19 SITE BACKGROUND 21 Create A Custom Backdrop : 23 FONTS 24 LOGO 25 IMAGE TRANSITIONS 25 Publish VS. Save Layout 27 UPLOAD your IMAGES 28 ORGANIZE YOUR IMAGES 29 ALL IMAGES 29 IMAGE ARCHIVE Folders 31 PORTFOLIOS 33 LIGHTBOX 35 HOMEPAGE 36 Adding Video to your site 41 Start Selling with PayPal 44 PUBLISH YOUR SITE 46 CREATE content pages 46 Content Pages 47 External MENU Links 49 BUTTON AREAS 50 PUBLISH YOUR SITE 51 WEBsite FEATURES AND settings 51 WEBSITE FEATURES 53 Portfolio Settings 54 Presentation Mode (Fullscreen portfolios) 57 SEARCH ENGINE SETTINGS 57 GOOGLE ANALYTICS 58 PUBLISH YOUR SITE 59 BILLING CENTER 61 SUPPORT CENTER 62 TROUBLESHOOTING TIPS 62 Layout & Style 3

4 62 Organize 63 Content Pages 64 Settings 4

5 GETTING STARTED By now you should have received your Welcome to clickbooq that contains important information for your account. Be sure to save a copy of this for your records. When you signed up for your clickbooq account, you also registered a new domain name or indicated an existing registered domain. If you registered a new domain name through us, your domain has automatically been setup and you do not have to continue to the next step. Point your A-RECORDS To use your existing domain name with clickbooq, you will need to contact your domain registrar to point your A-Records to clickbooq s servers. An A (address) record is a DNS record that can be used to point your domain name and host names to a static IP address. Many domain registrars allow you to log in to their websites and enter this information through an online form. If you are using a temporary clickbooq domain (ie. jsmith.clickbooq.com), you must let us know you are ready to go live on your domain, after you change your domain A-records. This is so we can make the necessary changes to your account on our end and transition your account to your custom domain name. To change your A-Records: 1. Log into your hosting or domain registrar s control panel for your domain 2. Edit the Host A-record for your primary domain name (yourdomain.com) and enter our IP address: Next, create a CNAME alias and label it www for the subdomain. For the Points to (Host) value, enter yourdomain.com. (note the trailing period as most DNS control panels require this format). This will create an alias for to be directed to your primary domain name (without the www ). Sometimes, an entry for www may already exist just edit if necessary. Note: Some registrars such as GoDaddy point www points to the IP address, so the only change you need to make is to entry. For registrar-specific instructions, visit our Support Center Going Live articles. 4. Allow 24 hours for your domain to point to clickbooq s servers. Once the above request is fully processed and the DNS information has propagated throughout the Internet, your domain will begin responding to Web requests at clickbooq s servers. Need more help? If you need assistance with this process, you have two options: 1. Contact your domain registrar s (or hosting provider) support team and they can make the changes for you. 2. Provide us with the appropriate login information to one of our support specialists by submitting a Going Live Request through the Online Support Center. Please note: This is not a registrar transfer. Your domain name registration will remain with your registrar, and you are still responsible for domain name fees and renewals with your current registrar. 5

6 Building your website for the first time The first time you use our system, follow these basic steps to build your site and create your portfolios. Please note: Changes must be saved or published before proceeding to the next section. If you leave a section without publishing or saving, you will lose your changes. Step 1: Prepare your images The first step is to choose the images you plan to import into clickbooq and use on your website. Open each of your large images in an image editing application (such as Photoshop), and reduce the dimensions or crop your image to fit within your clickbooq site the maximum image dimensions are 1800 pixels wide by 1200 pixels tall. While our system will automatically resize larger images during the upload process if needed, we highly recommend that you manually optimize your images to achieve the best image quality and the smallest file size possible before uploading to our system. Not only will you ensure that your images look great and download quickly for your viewers, but you will also greatly reduce the time it takes to upload your files to our servers. Step 2: Create your Layout & Style Log in to your clickbooq Toolbox. Start with the Layout & Style section to begin designing your site. In Layout & Style, you will customize your site s design by selecting from a series of options for the site navigation, site color, background, fonts, custom logo, and transitions. After you have chosen all of your design options and settings, publish your layout and move to the next section, Upload. Step 3: Upload your images In the Upload section, you will import the images you prepared in Step 1. Create Image Archive Folders to organize your images into categories or projects. Select the folder you want to upload images to, then import single images or batch-upload multiple images. When you are done uploading, move to the next section, Organize. Step 4: Organize your images The Organize section contains all of your imported images. The Image Archive Folders you created during Upload help organize all of your uploaded images into categories. Portfolios hold images you want to appear in your website. Create and title your portfolios how ever you wish. Drag-and-drop images from your Image Archives into the appropriate portfolio. Add caption and title information, if necessary. Publish your portfolios and move to the next section, Content Pages. Step 5: Create your Content Pages The Content Pages section contains all of your non-portfolio pages such as About, Contact, and News. Create each Content page in an image editing application using a combination of text and images. Upload your created pages and add hyperlinks to other websites and addresses. Publish your Content Pages and move to the next section, Settings. Step 6: Choose your website Settings In the Settings section, you can enable or disable certain features of your website, as well as input your website metadata for search engines. Make your selections and input your metadata into the provided text fields. You can also add Google Analytics to track your site stats. Publish your settings and your website is done! 6

7 Things to remember Here are some helpful tips to remember when using clickbooq. Please read this User Guide and reference the online KnowledgeBase for help. Nearly everything you need to know about using clickbooq, preparing your images, and even setting up your is contained within this User Guide. There is also a comprehensive online KnowledgeBase with additional step-by-step tutorials, template file downloads, and more. The online Support Center can be accessed within the clickbooq Toolbox application, or directly at: Always Publish before moving to another section. Publishing will commit your changes to our servers and your website. While we have Warning messages in place to alert you if you have unsaved changes, it is good practice to Publish often while you work. This will ensure that your changes are properly saved from section to section. Always allow each section to fully complete data communications with our servers. It is important that you allow the application to fully complete its data communications with our servers. Server communications will occur as each section is initially loaded as well as during Save or Publish actions. The time it takes to update our servers will depend greatly on the number of images you have in your account, the number of changes you have made to Folders and Portfolios, your connection speed, and your computer setup. Please be patient! What to do if the application does not respond. If the application does not respond after a reasonable amount of time, simply CLOSE your browser window and launch the application again. Since the application is non-destructive in nature, any mistakes can usually be corrected instantly. You will need to have an additional browser window open to view changes to your website. If your site is already resolving properly, open a second browser window and type in your web address. As you Publish your changes from the Toolbox, simply REFRESH the second browser window and your changes should be reflected. If you do not see your changes, it may also be necessary to empty your browser s cache. A Broadband (Hi-Speed) Internet connection is HIGHLY recommended. Due to the complexity of operations occurring within the application and the high occurrence of server communications, clickbooq will perform best with a broadband (Hi-Speed) Internet connection. 7

8 PREPARING YOUR IMAGES The most important part of creating your website is deciding what images you want to include. Just like a traditional portfolio, your website should contain a selection of your best work. You can organize your selected photos into groups by category or specialty. Once you ve selected your images and decided what categories they fit into, you ll want to optimize them for publishing online. The maximum image size that can be displayed in a clickbooq portfolio is 1800 pixels wide by 1200 pixels tall. This means that no single dimension of the image can exceed 1800 pixels horizontally, or 1200 pixels vertically. Once your images are resized to the proper dimensions, you must optimize your images for the Web by decreasing their file size. While there are several ways to resize and optimize your images for use with clickbooq, we ve outlined two different methods that will guarantee compatibility with our system as well as ensure a high-quality image. Resize your images: PREFERRED METHOD The following walkthrough gives you step-by-step instructions for resizing your images by specifying a target output file size. This method will result in a consistent file size among all of your images, resulting in a consistent viewing experience by your visitors. 1. Choose the images you plan to import into clickbooq. 2. Open your images in Photoshop (or your preferred image-editing program). 3. Select the Crop tool from the main tools panel. 4. Next, in the Crop Tool menubar, enter 1800 px for width and 1200 px for height. (*If your image is a portrait or vertically-oriented image, leave the width field blank) 5. Now, position the Crop tool in the top-left corner of your image (Fig.1). Click-and-drag the marker to the bottom right of your image. As you drag, you will see dotted lines which represent the crop area. When you reach the bottom right of your image, release the mouse button. 6. You can now position the crop area over your image, or resize it as necessary by dragging the corner handles. The portion of the image within the dotted lines will represent the final image output area. 8

9 Fig. 1: Using the Crop Tool to resize your image 7. Hit the Return key to commit the crop. Your image is now properly sized and ready for final export. 8. Once your image has been resized, select the File > Save for Web menu item. When the Optimize panel opens, make sure JPEG is selected in the Preset menu. Then click the small, round button to reveal the additional optimization options and select Optimize to File Size. 9

10 9. Enter 350 for full-color, full-size 1800x1200px images, or 200 for black and whites or verticals. Click OK. 10. When you return to the Optimize panel, you can view the effect of the compression level in the right-hand preview pane. If your image looks noticeably degraded, you can repeat Step 8 and increase the Desired File Size value slightly. If your image does not appear degraded, experiment with an even lower setting. Smaller file sizes directly translate to faster downloading by your visitors, so make your images the smallest file size possible while retaining image quality. 11. Once you are satisfied with the image quality, Save your image to your hard drive. You can also organize your images into folders for easy batch uploads and organization. Note: File names should not contain special characters or spaces, like #,@,/,*, etc. Use an underscore (_) instead of a space, like so: file_name.jpg. Resize your images: ADVANCED METHOD The following walkthrough gives you step-by-step instructions for resizing your images by individually adjusting the image compression for each image. 1. Choose the images you plan to import into clickbooq. 2. Open your images in Photoshop (or your preferred image-editing program). 3. Next, select Image Size from the Image menu, to open the Image Size adjustment panel: 4. Once the Image Size panel opens, you need to reduce the image dimensions to fit your website. clickbooq portfolios are based on a standard 3:2 image aspect ratio which is a standard output 10

11 ratio of many high-end SLRs. To resize an Image with a 3:2 aspect ratio: If your original image has a 3:2 aspect ratio, it will resize perfectly to match the 3:2 image ratio of your website s portfolios. Make sure that the Constrain proportions option is checked. Enter 1800 pixels for the width. The height will automatically adjust to 1200 pixels. Click OK to commit the Image Size change. To resize an image that does not have a 3:2 ratio: Follow Steps 1-3 above. When the Image Size panel appears, enter a Width of 1800 pixels. If the adjusted Height value is larger than 1200 pixels, your image will be too tall: this image exceeds the 1200 pixel height requirement To resolve this issue, simply enter a value of 1200 pixels for the Height, allowing the Width to change proportionately: this image will fit within the 1800x1200px requirement Click OK to commit the Image Size change. Resizing Tips: You may also choose to crop your image instead of resizing it proportionately as shown above. If you choose to crop your image, make sure it does not exceed 1800x1200px in size. Some users will apply a small amount of sharpness and adjust saturation to compensate for color variances among different browsers and platforms. Experiment to obtain the best results. 11

12 5. Once your image has been resized, select the File > Save for Web menu item. In the window that opens, select the 2-up tab in the top-left corner. This will allow you to see your original image on the left, versus the optimized (compressed) version on the right. Make sure the pulldown menu on the right side panel is set to JPEG. Set the Preset pulldown menu to JPEG Medium to start: 6. Next, as you view the image on the right, adjust the Quality setting to a higher or lower setting. You will notice that the image quality will change depending on your selection. At the bottom of the Save for Web optimization window, you can check the estimated file size as you compress your images (e.g. ~282.20K). A good target for full-size, full-color images is 300KB -350KB, and for black-and-whites, verticals or duotones, 200K. Remember, smaller file sizes will result in even faster image loading for your viewers. Tip: The Quality setting directly affects the image quality. Too low of a setting, and the image will appear degraded. Too high, and it will result in a large file size. Try and find a setting that results in a high-quality image, yet produces the smallest possible file size. Generally, this will occur in Quality settings between Once you are satisfied with the image quality, Save your image to your hard drive. You can also organize your images into folders for easy batch uploads and organization. Note: Do not use special characters or spaces, like #,@,/,*, etc. in your file names. Use an underscore (_) instead of a space, like so: file_name.jpg. Automatic batch image resizing clickbooq now offers a fully automated resizing script to help you resize your images instantly using Photoshop. Please review our Support Article: Automatic Batch Image Resizing 12

13 IPTC Data IPTC data is a method of storing textual information in images. It provides a standard way of storing information such as headline, description, and keywords. Because the information is stored as part of the image s meta file data, it can be accessed by other IPTC aware applications. Clickbooq uses IPTC data to display an image s Title (headline) and Caption (description) in your website s portfolios. Keywords can be used to help facilitate searches in your Image Archive. If you have existing IPTC data contained in your images that you would like to preserve in your JPEGs, please follow the instructions below. You can also input new or edit existing IPTC data within the Organize section of your Toolbox. Tip: To optimize your image downloads when visitors view your website, use the Toolbox web application to input your IPTC data rather than preserving exported data - the Toolbox method produces much smaller image file sizes. To preserve IPTC data while exporting from Photoshop: 1. Make sure your image color mode is set to RGB and not CMYK. 2. Create the image in the correct image size you want, then use Adobe Photoshop s File > Save As menu item, not Save or Save for Web. 3. The Save As dialog window opens. 4. Select JPEG from the Format drop down menu, give the file a new name, choose its destination, then click the Save button. 5. When the JPEG Options window appears, select a Quality setting between 1 and 12 (12 being the highest quality and the least amount of compression). Check the Preview box to preview your image at different compression levels. A setting of 6 to 8 will generally result in high quality, small file size images. 6. Next, select Baseline Optimized from the Format Options section and click OK to save your settings and export the image. 13

14 Tip: Experiment with the Quality setting to get the best looking image at the smallest possible file size. At the bottom of the window, you can check the estimated file size (e.g. ~302.01K). Smaller file sizes will result in even faster image loading on your site. Compositing Multiple Images You can also create diptychs (2 photos side-by-side) or any combination of multiple images, by simply compositing multiple images as one, single large image. In the Support Center, you will find helpful Photoshop templates which contain predefined guides to assist you with multiple image compositions. Image courtesy Tim Hale 14

15 Accessing the toolbox To get started, you ll need to log in to your clickbooq Toolbox. This is where you create and manage your website and images. Access your Toolbox by launching your web browser and entering the URL To log in to your Toolbox, enter the User Name and Password and your site s registered domain name that you provided on sign-up. You can also find this information in the Welcome to clickbooq . Note: If you can t remember your password, you will need to submit a support ticket to have your password reset. Your new password will be sent via to the primary contact address you provided at sign up. Click Log In. The clickbooq Toolbox will pop-up in a specially-sized browser window. Do not close this window during your session without Saving or Publishing or you will lose your changes. The Toolbox is organized into five sections: Layout & Style, Upload, Organize, Content Pages, and Settings. You can access each of these sections by clicking on the tabs at the top of the Toolbox window. You can access your Admin and Support pages by clicking on the tabs in the top-right corner of the Toolbox window. 15

16 LAYOUT & STYLE In Layout & Style, you can customize your site s design by selecting from a series of options for the site navigation, site colors, background, fonts, logo, and transitions. Your selections are named and saved as a preset so you can create multiple layouts and publish them at a later time, or reuse your settings without having to manually make all of the same choices again. On the left side of the Toolbox window, you are presented with a series of options for your Layout & Style. The preview window on the right displays a smaller version of the site with your selected options. As you make changes to your layout, the preview window allows you to see the changes. SITE LAYOUT For the Site Layout, you are presented with two options: Create a New Layout or Edit an Existing Layout. 16

17 To Create a New Layout: 1. Select the radio button for Create a New Layout. 2. Enter a simple, but descriptive name for the layout in the text field. This name will only be visible by you. 3. Click Continue. When you click Continue, the Layout panel will collapse and reveal the Navigation panel. To Edit an Existing Layout: 1. Select the radio button for Edit an Existing Layout. The text below the radio button changes to Edit or Delete an Existing Layout. 2. Click on the drop down menu to see a list of your saved layouts. Your currently published layout is labeled (current). If this is your first time creating a layout, your list will only include the Starter Layout, which is set to the default settings for the Layout & Style section. 3. Select a layout in the drop down menu and click Continue. The Layout panel will collapse and open the Navigation panel. To clear previous Layout & Style selections and restore the default system settings in the Preview Window, click the Restore Default Layout button. To Delete a Saved Layout: 1. Select the layout from the layout list window. 2. Click Delete. 3. You will receive a warning message. Confirm your choice by clicking Yes. This permanently deletes the layout from your list. You cannot delete your currently published layout. To Publish a Saved Layout: To publish a saved layout without making any changes to your previously saved selections, select the layout you wish to Publish with the pulldown menu, then click the Publish button. Your selected layout will be Published and designated as Current. SITE NAVIGATION In Site Navigation, choose from one of the two options for site navigation: Left-hand navigation or Topdown navigation. You can preview either option in the preview window by clicking on the radio buttons. Select the option that best suits your design and site audience by reading the following comparison. Left-Hand vs Top-Down Navigation The Left-Hand navigation places your menu items along the left-hand side of the browser. This template is optimized for display resolutions of 1024x768 or higher. Select this navigation scheme if your viewing audience uses smaller, low-resolution displays. Typically, this means a minimum screen size of 15 for desktop monitors or a minimum screen size of 12 for laptops. The left-hand navigation template was specifically designed to be fully viewable on smaller, lower-resolution displays without the need for scrolling vertically. 17

18 The Top-down navigation places your menu items along the top of the website. This template is designed for higher display resolutions and larger monitors. Select this navigation scheme to optimize your site for a viewing audience that uses higher resolution monitors. Generally, this includes desktop LCD monitors with a screen size of 17 or larger, desktop CRT monitors 19 or larger, or newer hi-res laptops with screen sizes of 13.3 or larger (such as the MacBook). If your user has a lower resolution monitor, they can still view your site, but may need to scroll vertically to view the site in its entirety. SITE COLOR In Site Color, you can customize the area within the body of your site by selecting from a list of options: Site Color, Site Outline, Site Corners and Drop Shadows. Note: Depending on your selections, some options will not be available. Available options will display automatically depending on your selections. The Site Color appears underneath all your images, navigation bar, toolbar, thumbnails, and logo. It is the main body of your website. To set your Site Color: 1. Click on the Color Picker and choose a color from the standard color palette. Or enter a hex value into the text field. You can fine-tune your color selection using the advanced color picker. 2. Your selected color appears in the small Color Picker preview pane. Tip: To allow your background color or pattern to show through the site frame area, set the site color to None. For the most part, you will set your Site Color to None if you plan to use a Custom BackDrop with your design (see Create a Custom BackDrop for more information). 18

19 The Site Outline is a border (stroke) that outlines the site body. It can be set to 1 or 2 pixels in thickness or none. To set the width and color of your Site Outline: 1. Click on None, 1 px (1 pixel wide), or 2 px (2 pixels wide) to set the pixel width. 2. Click on the Color Picker and choose a color from the color palette. Or enter a hex value into the text field. You can fine-tune your color selection using the advanced color picker. 3. Your selected color appears in the small Color Picker preview panel. Rounded or Square Corners The corners of your site may be rounded or squared off. Select the radio button next to Square or Round to set the option for your site corners. If you select None for your Site Outline and None for your Site Color, your site corners are not visible and this option will be grayed out. Drop Shadow Turning Drop Shadow On applies a shadow around the edge of your site body. If you selected None for your Site Color, the drop shadow turns off automatically. When you have finished setting your options for Site Color, click Continue to collapse the panel and move to the next section. SITE BACKGROUND The Site Background appears underneath the site and fills the entire browser window around your site frame. If you selected None for your Site Color, the background you choose will also be your site color. Your background can be a solid color, a pattern, or a custom created design. 19

20 Select a Background Color (Required): Click on the Color Picker and choose a color from the color palette. Or enter a hex value into the text field. You can fine-tune your color selection using the advanced color picker. Your selected color appears in the small Color Picker preview pane. Tip: Even if you are using a Pattern or Custom Background, you still need to select a Solid Background color. If a user extends the browser window beyond the dimensions of the Custom background image, this color will appear in the browser window. Choose a color that is visually compatible with your Pattern or Custom background. For example, if your custom background is primarily white, select White as your Solid Color background to match. Next, choose one of the following three options: Solid Background To keep the solid color you picked above as your background, select Solid Background. Pattern Background To use one of clickbooq s pattern backgrounds, select Pattern Background. In the panel below, Choose a Pattern Background appears. Click on the Pattern Picker to choose one of the pre-loaded patterns. Your selected background appears in the Pattern Picker preview pane. Custom Background (BackDrop ) In its simplest form, a Custom BackDrop is an image that is used as a background for your website. By using the provided Photoshop templates in the Support Center, you can design and create your own custom background that incorporates your site s navigation menu, the frame of your site, and your site images. With a little creativity, any design concept imaginable can become your site s unique BackDrop. Please see the Gallery section of clickbooq.com for examples of websites that use the BackDrop feature to truly personalize their design. To select a custom or preset BackDrop: To use a custom or preset background, click on Custom BackDrop. In the panel that appears, select a custom background from the list window. You will see a few custom backgrounds that clickbooq has provided for you to use. These preset backgrounds are labeled with a (P) along with an identifier to mark the navigation type it is best-suited for. Backgrounds without the additional identifier can be used by either navigation type. To delete a saved custom background, highlight the background name in the list window and click Delete. Preset backgrounds cannot be deleted. Preset BackDrops are marked as: (PT): Preset Top-Down Navigation (PT): Preset Left-Hand Navigation (P): Preset BackDrop only 20

21 Note: Many of the preset BackDrops can be downloaded as Photoshop templates in the Support Center for you to modify by adjusting colors, adding design elements, etc. clickbooq will periodically update the presets with new designs. Create A Custom Backdrop : 1. Download the BackDrop Template. In the online Support Center, you can download a Photoshop template file with guides for creating your own Custom BackDrop. Download the file that correlates to the Navigation type you want: Top-Down or Left-Hand. The template file dimensions are 1280 pixels wide by 1024 pixels tall and has been preset to the correct resolution of 72dpi. This should be sufficiently large to fill most browser windows. You may make your background image larger, but this will also increase your file size. Fig.1 Example of the Left-hand template. The main site areas are shown in grey. 2. Design your BackDrop. The template outlines the placement of your main site areas in a browser window. Your site is always centered within the browser window. By using the transparent grey areas as a guide, you can create a background design that fits the layout of your website s main areas. Fig. 2 Designing the background using the template as a guide for where your main site elements will appear. 21

22 The grey areas outline where your logo (if you are using one), navigation menu, site frame, and images will appear on top of your background. Depending on your design, you may wish to change your Site Color to None to remove the site frame. You can select this option in the Site Color panel in Layout & Style. When designing your background, keep in mind where the Navigation menu will appear. If you have Site Color set to None, make sure your navigation menu text is visible against your custom background. You may need to adjust the color of your font so it is clear and legible. The logo area displays where your logo appears if you decide to upload one in Layout & Style. However, you can integrate your logo as part of your background design if desired. Experiment! Create a custom border around your site frame. Set your site color to None to test a floating site. Add text, images or patterns. You can always create and save a new site layout to play around with the different Layout & Style options and your custom backgrounds. Feel free to extend your design outside of the template boundaries - don t feel restricted to what you can create for your design! 3. Save the background as a JPEG (best suited for full-color, photographic images) or GIF (best suited for line art, illustrations and solid color images) to your hard drive with an easily recognizable name. As always, aim for the smallest file size possible. Try not to exceed a background of 250KB as a maximum. Be sure to Turn OFF Visibility of the template layer before exporting, so it does not appear in your final background design. Fig. 3 The final background, ready for exporting. 4. Click Upload. Locate your file on your computer and click Select. Once uploaded, your background will appear in the list window. Click on the uploaded background name to select it and preview it in the Preview window. 22

23 Fig. 4 The final background in use as the website design. When you have finished setting your options for Site Background, click Continue to collapse the panel and move to the Fonts panel. FONTS Choose from a selection of typefaces and custom colors for your active and inactive text. This includes your navigation bar text, icons, slideshow controls, and Lightbox text. To select your Font typeface, choose from the drop down menu of fonts. The font size automatically defaults to the best fit for your site. Note: The fonts displayed in the Preview window may not accurately represent the typeface in terms of size and legibility. To view the actual typeface, Publish your layout and view the font on your actual website. The Active Font Color is the color of your menu text or icons on mouse rollover or when selected. To set the active font color, click on the Color Picker and choose a color from the color palette. Or enter a color value into the hex text field. The Inactive Font Color is the normal state, when the text or icons are not selected or highlighted. To set the inactive font color, click on the Color Picker and choose a color from the color palette. Or enter a color value into the hex text field. 23

24 When you have finished setting your options for Fonts, click Continue to collapse the panel and move to the next panel. Tip: Pick font colors that are visible against your selected Site Color, the area within the frame of your site. If you chose None for Site Color, make sure your font colors are visible against your Background or Pattern. You can preview your color choices in the Preview window on the right. LOGO Depending on your design, you may want to include a logo. Your custom created logo will appear in the upper-left area of both navigation templates. Depending on the orientation you selected in Navigation, your logo is limited to a specific size. If you don t have a logo ready or do not require one with your particular design (perhaps you are integrating a logo into a custom background), you can skip this step. To create your logo: 1. In the clickbooq Support Center, you can download a Photoshop template file with guides for creating your logo. Or, you can create your own document in Photoshop. Set the Dimensions to 136x136 pixels for Left-Hand templates, or 390x50 pixels (WxH) for Top-Down templates. If your logo exceeds these dimensions, it will be cropped. 2. Set the resolution to 72dpi and Color Mode to RGB. 3. Export your logo in one of the following file formats:.jpg,.gif, or.png (see tip). 4. Save your logo to your hard drive with an easily recognizable name. Avoid special characters or spaces in the file name. Tip: You can also create a transparent PNG ; an image file whose background is transparent and allows the underlying color or image to show through. To create a transparent PNG, please see the KnowledgeBase document titled Transparent PNG at To upload your custom logo: 1. Click Upload. The system file browser appears. 2. Navigate to your file and click Select. 3. Once uploaded, your logo will appear in the logo list window. 4. Click the logo name and your selected logo will appear in your site preview window. 5. Click Continue to move to the next panel. 24

25 To delete saved logos: Highlight the logo name and click Delete. IMAGE TRANSITIONS Your portfolio images are displayed one image at a time and manually controlled by your site visitors, allowing them to move through your images at their own pace. Or, visitors can click the Slideshow icon in the bottom toolbar to display images automatically. Control the transition effect between images as visitors click the next and previous buttons or as images automatically play during slideshow mode. Select a transition effect: Choose one of the following transition options: Simple Fade (default), Cross Fade, Wipe (Horizontal), Wipe (Vertical), Slide (Horizontal), or Slide (Vertical). You can preview the selected transition effect in the Preview window. Note: You will be able to set the transition effect for your Homepage in the Organize section. Publish VS. Save Layout Image Transitions is the last section of Layout & Style. At the bottom of the Layout & Style window are buttons to Save or Publish your selected layout. Before leaving Layout & Style, you must save or publish your changes. If you make changes that you want to be reflected on your website right away, choose Publish. If you are simply editing a layout preset and you are not ready to publish the layout, select Save. When you click Save, your changes to the selected layout will be saved but the layout will not be published. However, if you are making changes to your currently published layout, Save or Publish will publish your changes instantly. This ensures the currently published layout in your Toolbox is always in sync with your live site. When you click Publish, your changes to the selected layout will be saved and the selected layout will be published. 25

26 If you attempt to leave Layout & Style before saving or publishing your changes, a warning dialog box will appear. To Publish and Save your layout, click Publish. If you do not want to Save or Publish your layout, you can click Discard Changes. This will discard any changes you have made and load the next section. To continue making changes to your layout, click Cancel. Congratulations! You have completed the Layout & Style section. To add photos to your site, continue to the Upload section by clicking the Upload tab at the top of the Toolbox window. 26

27 UPLOAD your IMAGES In Upload, you import images from your hard drive and upload them into your Image Archives (where images are stored for your account). Organize your images into categories by saving them to individual Image Folders. Or just save your images to the All Images folder. The All Images folder contains a copy of every image you have uploaded. You may upload single images or multiple images. Total Image Count: 128 To Upload your images: 1. Select the Image Archive Folder where you want the image(s) to be stored. You can import images to an existing folder, create a new folder, or save it to the All Images folder. 2. To create a new folder, enter a name in the text field and click Create New. Select the new folder in the Image Folder window. 3. Once you have selected a folder, click Upload. The Operating System file browser appears. 4. Select the image(s) you want to import. To select multiple images that are next to each other, hold down the Shift key and click the first and last item you want to import. To select multiple images that are not next to each other, hold down the Command key (Mac) or Control key (PC) and click each item individually. 5. Click Select in the file browser to begin uploading the images. A progress bar will indicate the upload progress. Please be patient as the upload time depends on your connection speed. 6. When images have imported successfully, a dialog appears confirming successful upload. 7. Continue uploading images as needed. Your Image Archive can store up to 2,000 images. Your Total Image Count appears below the folder list window. If you exceed the maximum number of images, you will not be able to upload more images until you delete images from your All Images archive in the Organize section. If you are done uploading images, continue to the Organize section by clicking the Organize tab at the top of the Toolbox window. Within Organize, you will be able to review and manage your newly imported images. Read the section Preparing Your Images for detailed instructions on preparing images for upload. 27

28 ORGANIZE YOUR IMAGES The Organize section contains all of your imported images. Within this section you can categorize your Image Archive into folders, create your portfolios, reorder and delete images, apply image titles and captions, and even custom Lightbox galleries to clients. On the left-hand side of the Organize section are four panels: Image Archives (including the All Images folder), Portfolios, Lightboxes, and Homepage. The Image Browser to the right of the panels displays thumbnails of your images. Your Image Browser displays 36 images at a time. You can select images within your Image Browser by clicking on the thumbnails. Click-and-Hold, to drag thumbnails within the Image Browser to reorder them, or drag images into Image Archive folders, Portfolios or Lightboxes. All of your Image Archive folders, Portfolios and Lightboxes display the number of stored images to the right of the folder name. Above your Image Browser, the name of the folder your are browsing is displayed. When browsing the All Images folder, you can use the Keyword search field to find and display images by keyword. You can also use the Sort pulldown menu to sort your All Images folder by upload date, file name, or image title. Below your Image Browser are buttons for deleting images, creating new folders, and publishing your site. Note: The Organize section must load your entire Image Archive and store all changes in memory until you choose to Publish them. For these reasons, you may experience slower load times when you are in Organize, the most server-intensive section. Your load times may vary depending on the number of images, folders and image info you may have stored and your computer setup. 28

29 To use the Search field: You can search for images within your Image Archive by the titles, captions and keywords you assigned to them. You can only search the All Images folder. Select the All Images folder and type a keyword or keywords into the search text field to filter your results instantly. See Image Info Editor for more information on adding keywords to your images. To use the Sort by menu: You can sort the images within your All Images folder by the upload date, file name, or image title. You may select ascending or descending sort. To delete images: CLICK the Thumbnail(s) of the image you want to delete in order to highlight them. Then CLICK the Trash Button at the bottom of the screen. Do not drag. Images deleted from Image Archive folders, Portfolios, or Lightboxes will only remove images from that specific folder. To permanently delete an image, it must be deleted from the All Images folder above the Image Archives window. This permanently deletes ALL instances of the photo from your Toolbox. To delete an Image Archive folder, Portfolio or Lightbox: Click the X icon next to the name of the Image Archive folder, Portfolio, or Lightbox you wish to delete. To add or edit image info: Double-click an image thumbnail to launch the Image Info Editor. See Image Info Editor later in this section for detailed instructions on editing your image information. ALL IMAGES Every image you upload is stored in the All Images folder. To permanently delete images, they must be deleted from your All Images folder. The All Images folder also tracks the number of total images you have stored in your Image Archive. You may store up to 2,000 images in your Image Archive. IMAGE ARCHIVE Folders Create Image Archive folders to organize your imported photos by category, project, client, etc. Choose an organizational method that works best for you. You can store as many images as you need in each folder. To create a new Image Archive Folder: 1. Click on the Create New button in the bottom left corner of the Toolbox window. 2. A pop up dialog box appears. 3. Choose Image Archive Folder from the drop down menu. 4. Enter a name for the folder and click create. 29

30 Renaming Folders You can rename existing folders by double-clicking the folder name. Type the new name into the editable text field and click outside of the text box when you are done editing the name. To add or move images between Image Archive folders: 1. Click on the folder where the image is stored. The images in the selected folder are displayed in the Image Browser. 2. Select the photos you want to move by clicking on the thumbnails in the Image Browser. To select multiple images that are next to each other, hold down the Shift key and click. To select multiple images that are not next to each other, hold down the Command key (Mac) or Control key (PC) and click. 3. Drag the selected images from the Image Browser to the destination folder in the Image Archive panel. When your cursor arrow is over the selected Image Archive folder and the name is highlighted, release the mouse button. A red X will warn you if you drag out of, or leave, the drop area. within drop area outside of drop area 30

31 4. Click on the destination folder to confirm your photos have been moved. Note: When moving images from the All Images folder to an Image Archive folder, a copy of the image is moved to the Image Archive folder. This way your All Images folder will always contain a copy of every image in your Image Archive. Folders are listed in the order they were created, with the newest folders on top. You can rearrange the order by clicking and dragging folder names into a new position. A black horizontal line will indicate where the image will be dropped. To delete images or folders from your Image Archive: To delete an image, click the thumbnail(s) to highlight them. Then CLICK the Trash Button. Do not drag the thumbnail(s). Photos deleted from an Image Archive folder do not affect the photos stored in the All Images folder. To delete an entire Image Archive folder and its contents, click the X icon next to the name. PORTFOLIOS The Portfolio panel appears within the Organize menu, under the Image Archive panel. This is where you will create and organize the images you would like published on your website. By default, your website will contain a Portfolio section titled Portfolios. You can rename this section however you like (ie. Work, Gallery, etc.) - this section name appears within your website s navigation menu. You can also create and name new Portfolio sections as needed. Creating more than one Portfolio section is useful if you would like to group certain Sub-Portfolios together. For example, you may wish to create one Portfolio section titled Portraits and organize all your portrait Sub-Portfolios (Baby, Seniors, Family) within this section; then create a second Portfolio section titled Weddings containing your wedding Sub-Portfolios (Getting Ready, Ceremony, Reception). Once you have created your Portfolio section(s), you will create your Sub-Portfolios. Each of your Sub- Portfolios can hold up to 72 page views (images). 31

32 To create a new Portfolio Section: 1. Click on the Create New button in the bottom left corner of the Toolbox window. 2. A pop up dialog box appears. 3. Choose Portfolio Section from the drop down menu. 4. Enter a name for the portfolio section and click create. The portfolio section name will also appear as the title of your portfolio section on your published site. To create a new Sub-Portfolio: 1. Click on the Create New button in the bottom left corner of the Toolbox window. 2. A pop up dialog box appears. 3. Choose Sub-Portfolio from the drop down menu. 4. Select one of your Portfolio Sections from the drop down menu to add your Sub-Portfolio to. 5. Enter a name for the Sub-Portfolio and click create. The Sub-Portfolio name will also appear as the title of your Sub-Portfolio on your published site. To add images to your Sub-Portfolios: 1. Click on the Image Archive folder where the image is stored. The images in the selected folder are displayed in the Image Browser. 2. Select the photos you want by clicking on the thumbnails in the Image Browser. To select multiple images that are next to each other, hold down the Shift key and click. To select multiple images that are not next to each other, hold down the Command key (Mac) or Control key (PC) and click. 3. Drag the selected images from the Image Browser to a Sub-Portfolio in the Portfolio panel. When your cursor arrow is over the selected Sub-Portfolio and the name is highlighted, release the mouse button. A red X will warn you if you drag out of, or leave, the draggable area. 4. Click on the Sub-Portfolio to confirm your photos have been moved. Each Sub-Portfolio can contain a maximum of 72 images (pageviews). You can display multiple images as one single image. Please refer to Preparing Your Images: Compositing Multiple Images for more information about multiple image compositions. If the Sub-Portfolio already contains the maximum number of images, you will not be able to drop additional photos into the full Sub-Portfolio. The number next to the Sub-Portfolio name indicates the current number of images contained within that Sub- Portfolio. To organize your Portfolio Sections and Sub-Portfolios or reorder your images: To change the order of your Portfolio Sections as they appear on your website, select a Portfolio Section and drag-and-drop it to a new position. A black horizontal line indicates where the portfolio section will be dropped. To change the order of your Sub-Portfolios as they appear on your website, select a Sub-Portfolio and drag-and-drop it to a new position. A black horizontal line indicates where the portfolio will be dropped. You can also move a Sub-Portfolio from one portfolio section to another. To change the order of your images within a Sub-Portfolio, select the Sub-Portfolio images in your Image Browser and drag-and-drop them to a new position. A black vertical line will indicate where the image will be dropped. 32

33 To rename a Sub-Portfolio: You can rename existing Sub-Portfolios by double-clicking the Sub-Portfolio name. Type the new name into the editable text field and click outside of the text box when you are done editing the name. To delete images or Portfolio Sections or Sub-Portfolios: To delete an image, click the thumbnail(s) to highlight them. Then CLICK the Trash Button. Do not drag the thumbnail(s). This will remove the photo from your site. Photos deleted from a Portfolio DO NOT affect the photos stored in the All Images folder. To delete all instances of a photo, you must delete it from your All Images folder. To delete a Portfolio Section, click the X icon next to the name of the portfolio section. This will remove the Portfolio Section and all of its Sub-Portfolios and Sub-Portfolio images images from your site. If you do not wish to delete a Sub-Portfolio contained in a Portfolio Section, move it to a different Portfolio Section first. To delete a Sub-Portfolio, click the X icon next to the name of the folder. This will remove the Portfolio and all of its images from your site. LIGHTBOX Your Lightbox feature allows you to pick and choose from any of the photos in your Image Archive to create a custom, private online gallery. Send your Lightboxes to clients for proofing or to art buyers for potential jobs, or just showcase some of your latest projects to a select group of individuals. You can even use Lightbox links to create an unlimited number of mini-portfolios, by first sending the Lightbox to yourself, then using the link to post in a blog or other website. To create a new Lightbox: 1. Click on the Create New button in the bottom left corner of the Toolbox window. 2. A pop up dialog box appears. 3. Choose Lightbox from the drop down menu. 4. Enter a name for the Lightbox and click Create. 5. A new Lightbox will appear in the Lightbox panel. To add images to a Lightbox: 1. Click on the Image Archive folder where the image is stored. The images in the selected folder are displayed in the Image Browser. 2. Select the photos by clicking the thumbnails in the Image Browser. To select multiple images that are next to each other, hold down the Shift key and click. To select multiple images that are not next to each other, hold down the Command key (Mac) or Control key (PC) and click. 3. Drag the selected images from the Image Browser to the desired Lightbox in your Lightbox panel. When your cursor arrow is over the selected Lightbox name and it is highlighted, release the mouse button. A red X will warn you if you drag out of, or leave, the draggable area. 4. Click on the Lightbox name to view its contents and to confirm that your photos have been added successfully. To send a Lightbox: 1. When you are ready to a Lightbox, click on the Mail icon next to the name of the Lightbox 33

34 you wish to send. 2. The Send Lightbox window appears. 3. Enter your address for the From field and the recipient s in the To field. You can send to multiple addresses by separating addresses with a comma. You can all cc and bcc additional recipients. 4. Enter a subject and message. 5. If you want to show file names instead of titles for your captions (this may be easier for your clients to reference when proofing images using the Lightbox feature), check the box next to Display files names instead of titles in captions. 6. Click Send. Your recipients are sent an that contains a link to the custom Lightbox. Clicking the link launches your website with your custom online gallery. Your Lightbox recipients can even delete images or add images from your site to their Lightbox, and send you a new version of the Lightbox with their selections. Note: If your Lightbox messages are being detected as Spam by recipients, try sending the Lightbox message to yourself, then copying and pasting the link into your program and sending it. To edit a Lightbox: 1. To change the order of your images within a Lightbox, select the Lightbox images in your Image Browser. Drag-and-drop them to a new position. 2. To rename an existing Lightbox, double-click the Lightbox name, then type the new name into the editable text field. Click outside of the text box when you are done editing the name. To delete an image or a Lightbox: 34

35 1. To delete an image, click the thumbnail(s) to highlight them. Then click the Trash Button. 2. To delete an entire Lightbox, click the X icon next to the name of the Lightbox. HOMEPAGE Your Homepage is the first thing visitors see when they come to your site. You can create a slideshow of images that plays automatically, set your homepage to a single static image, or show a different image each time someone visits your site. To create your Homepage: 1. Select the photos by clicking on the thumbnails in the Image Browser. There is a maximum of six images that can be shown in the Homepage. 2. Drag the selected images from the Image Browser to the Homepage Panel. When your cursor arrow is over the title of the Homepage folder and it is highlighted, release the mouse button. A red X will warn you if you drag out of, or leave, the draggable area. 3. Click on the Homepage folder to view the Homepage images and to confirm your photos have been added successfully. 4. Choose Slideshow or Static image playback. For Slideshow mode, drag-and-drop your images to set their playback order. Or check the box for Randomize Slideshow Playback to randomly display images in slideshow mode. For Static, select either Only Display Image in Position 1 or Randomize display image per visit. 5. If you selected Slideshow mode, select an image transition effect and enter the duration interval in seconds. The minimum duration is 3 seconds. 6. Click the Publish button to save and commit your changes. To rename your Homepage: You can rename your Homepage by double-clicking on Home. Type the new name into the editable text field and click outside of the text box when you are done editing the name. 35

36 adding video to your site Your clickbooq website supports integrated video playback. Our servers are optimized to play video files using streaming technology. This allows viewers to skip to any moment in your video and the video will resume playback immediately, without waiting to download the entire video first. You have the option to mix and match your still images alongside videos within your Sub-Portfolios. To display video on your site you will need to upload two files: (1) A Flash compatible video file, and 2) a preview image, or a Poster Frame image. Converting your existing Video to.flv or.f4v format In order to display video within your clickbooq website, your videos must be Flash compatible. clickbooq is compatible with 2 video file formats:.flv and.f4v only. To convert video files to.flv or.f4v format, you will need to use a conversion application, often called flash video encoders or converters. Since there are so many different video formats in use today, we cannot provide detailed instructions for converting each format. We invite you to do your own research and find a conversion method that works best for you and your workflow. There are many conversion programs available online. We ve listed some programs below for your convenience. Please note, we do not offer support for these programs. Adobe Media Encoder (CS5) or Flash Video Encoder (CS3): Mac or PC, may be included with Adobe CS3 and CS4 Creative Suite depending on version, iskysoft Video Converter (Free trial version, $35 licensed version; for Mac OSX systems): moviesmac.com/ ffmpegx: Mac, Free, Recommended Video file settings for optimal file output size and compatibility: Output File Type:.FLV or.f4v Frame Rate: fps Bitrate Settings: kbps, VBR ( Mbps Target Bit Rate; 2Mb Max. Bit Rate) Audio Type: MP3 (mono or stereo) Audio Bit Rate: 96 kbps File Size: 75MBs or less Optimization tip: It may be necessary to expriement with different settings in order to reduce the file size of very large videos. Changes to the Video Bit Rate or Audio settings can drastically reduce output file size. 100MB Video File Limitation Converted video files may not exceed 75MBs in file size. For reference, a 75MB video file in FLV/F4V format is equivalent to about 15 minutes of video or longer, depending on the parameters used in the 36

37 encoding process. Remember, smaller video file sizes means even faster loading for your viewers. Poster Frame image Your video Poster Frame is a full-size image that displays when your video initially loads in your portfolio. It is a static image, just like the regular images in your portfolio. You must have a Poster Frame ready to upload at the same time as your video, or you will not be able to complete the video upload process. You can use any image for your Poster Frame, although typically a still frame from the video itself is used. The Poster Frame is also used to generate the Thumbnail image of your video. How to create a Poster Frame from your video: 1. Open your video in a compatible video player to view it. 2. Adjust the playhead to the desired frame that you want to use for your Poster Frame image. 3. Copy and Paste the image into a program such as Photoshop, where you can edit the image. Or, take a screen capture of the frame and edit it in Photoshop. Tip: For Mac Snow Leopard (10.6+) users, if your video is Quicktime compatible, right-click on your original video, select Open With and open it in Quicktime Player 7 app. If you do not have QT7, see this Apple support article for installation instructions: HT3678. This will allow you to Copy (Command-C) the frame and Paste (Command-V) it into a new Photoshop file for editing. 4. Resize your image to fit within clickbooq s maximum image area of 1800 pixels wide by 1200 pixels tall. Alternatively, our Uploader will automatically resize your image to the correct dimension. If your Poster Frame image is smaller than our maximum image size, it will simply be centered in the image area. To Upload your Video: 1. Click the Upload tab to load the Upload section. 2. Click the Video button to load the video uploader. 3. Click the first Browse button to upload your video file. The Operating System file browser appears. 4. Highlight the video file (.flv or.f4v) you want to import and click Select in the file browser. 5. Click the second Browse button to upload your poster frame image. The Operating System file browser appears. 6. Highlight the poster frame image file (.jpg,.gif, or.png) you want to import and click Select in the file browser. 7. To upload both files, click the Upload button. A progress bar will indicate the upload progress. 37

38 Please be patient as the upload time depends on your connection speed. 8. When the files have imported successfully, a dialog appears confirming successful upload. To add videos to your Sub-Portfolios: 1. Click the Organize tab to load the Organize section. 1. Click on the All Videos folder. This will display all of the uploaded videos. 2. Select the video you want by clicking on the thumbnail in the Image Browser. 3. Drag the selected video from the Image Browser to a Sub-Portfolio in the Portfolio panel. When your cursor arrow is over the selected Sub-Portfolio and the name is highlighted, release the mouse button. A red X will warn you if you drag out of, or leave, the draggable area. You can add video to your homepage with drag-and-drop to your Homepage section. 4. Click on the Sub-Portfolio to confirm your video has been added successfully. All video assets in your Image Archive are marked with a pink play icon. 5. Publish your changes. To delete a video from a Sub-Portfolio or your Homepage, click the thumbnail to highlight. Then click the Trash Button. To delete a video permanently, delete it from the All Videos folder - this will also remove it from all portfolio and homepage folders. Video Scaling The normal-sized viewable area for videos is 804x536px (WxH). This means that any videos that exceed these dimensions will automatically be resized smaller to fit the normal viewable area. Videos smaller than 804x536px will be centered within the viewable area unless you have enabled the video scaling option as shown below. If Presentation Mode (fullscreen) is enabled, your videos will also be scaled to fit the viewer s display if the scaling option is enabled. The video scaling option is located in the Image Info panel. Double-click the thumbnail of the video from within the Toolbox application to toggle this setting. Video scaling is enabled by default for all videos uploaded after Feb Problems uploading videos Uploading your video to our server requires very fast upload speeds in order to successfully complete the upload process. If you consistently get an error during upload (eg. bubbles=false cancelable=false ), it may be due to a less than optimal upload speed. Please try a smaller file size, or if the issue persists, contact us and we will investigate the issue further. Video Conversion Services If you do not feel comfortable converting videos yourself, clickbooq can convert your videos for a fee of $50 per video. The process requires uploading your original video files to our FTP server, where we can 38

39 then convert your video to the required format. If you would like clickbooq to convert your videos, please see below for instructions on uploading your video files to clickbooq s FTP server. Using an FTP program, log onto the following server: Host: ftp.clickbooqmedia.com username: clickbooquser@clickbooqmedia.com password: upandaway1 (note: case-senstive) 1. Once you are logged into the FTP server, create a new directory on our server and name it with your Toolbox Username (you may see other user s folders as well). 2. Within that folder, create one folder for each of your videos (i.e. video1, video2, etc.) 3. Upload your video along with the associated Poster Frame image (.jpg or.png format preferred) to the new folders. Compress (or Archive) your files to make them smaller and make your upload faster. Popular compression methods include.zip and.sit. 4. Notify us at support@clickbooq.com that you have uploaded your videos and they are ready for conversion. Please include your Full Name and Username in the message. 5. Within 2 business days, we will convert your videos, upload them to your Toolbox, and notify you when the process is complete. The conversion fee will be charged to your billing account on file. Please allow up to 2 business days for video conversion. We will complete your conversion as quickly as possible. If there are any issues with the files you ve submitted, we will let you know as soon as we ve reviewed them. Helpful hints for uploading files: Never use spaces in your file and folder names. Instead use an underscores or dashes, like so my_file-name.jpg. Avoid punctuation in your file names, unless it is used as a file extension (i.e. wedding.zip or actionshot.jpg) Compress (or Archive) your files to make them smaller and make your upload faster. Popularcompression methods include.zip and.sit. IMAGE INFO EDITOR Within the Image Info Editor, you can view and edit your images IPTC data (Title, Caption, Keywords) and you can enable print purchasing with our built-in PayPal shopping cart feature. Image Info In the Image Info tab, clickbooq automatically imports any IPTC data you may have embedded in your image file. This auto-populates clickbooq s Information fields for captions and titles, and keywords for search functionality. (see Prepare Your Images for more info on preserving IPTC data in Photoshop). Within this tab, you can edit or add new metadata. Note: clickbooq imports the following IPTC fields: Headline, Description/Caption, and Keywords. These fields correspond with the clickbooq image Title, Caption, and Keywords. 39

40 At the top of the Image Info window is an automatically generated thumbnail image of the selected image. This small preview image is displayed when visitors click on the Thumbnails icon on your site. You can view and edit imported or previously saved titles, captions, and keywords for each image. The image title and caption are displayed when visitors click the Info icon in the bottom toolbar of your live site. You can also use this data to locate images in the Organize section. You can quickly sort your All Images folder by Image Title. Image keywords allow you to quickly find a defined set of images using the Image Archive Search tool. To launch the Image Info Editor: Double-click the desired image thumbnail to launch the Image Info pop-up window. To pop-up a full size preview of the image: Click the View Full Image button (displays the actual size of the image on your site). To edit Titles and Captions: Click within the Title or Caption text field. Titles must be contained in one line of text, while Captions may not exceed 2 lines. Do not use carriage returns within your captions. Tip: Don t want to display image captions on your website? You can disable this feature in Settings. To add a keyword: Click within the Keyword text field and type a keyword. Separate multiple keywords with commas. To save your changes: Click the Update Image Info button to save your changes. You must then Publish to see the changes 40

41 on your actual website. Saving image info will update all instances of the image in your Toolbox and on your site. Click the X button in the upper right hand corner of the Image Info window to close the window when you are done making changes. Note: Newly updated Image Info will not appear in all instances of the updated image in your Toolbox, however, the information will have been properly updated on our servers. You may need to reload the Organize section for the updated image info to appear for all instances of an image. This can be accomplished by clicking a different section tab (i.e. Upload) and then returning to the Organize section. Purchase Info The Purchase Info tab is where you will create and manage the products you would like to sell. For each image, you can set your own pricing and product variations. See the Start Selling with PayPal section below for more information. Start Selling with PayPal PayPal is one of the most widely used online payment solutions available worldwide. It is a safe and easy way for your clients to pay you online. Now, you can give your clients the ability to shop on your clickbooq website and checkout using PayPal s Website Payments Standard solution. Clients simply click the Add to Cart button next to your purchase-enabled images. They are then redirected to PayPal s secure website where they can login to their PayPal account or choose to pay without logging in. After paying they return to your clickbooq website. To use PayPal with your clickbooq website, you will need to sign up for a PayPal Business or Premier account: For Merchants within the United States and other countries, except the UK, visit paypal.com For UK merchants, visit How to enable the PayPal feature: 1. First, you will need to enable the PayPal Shopping Cart within your Website Settings. From the Toolbox, click the Settings tab. This will load your Website Features options. 2. Check the box for Enable PayPal Shopping Cart. 3. Enter the address associated with your PayPal account. 4. Click the Publish button to save your changes. How to create Products: 1. Click on the Organize tab. Double-click the image you would like to make available for purchase. 41

42 This will launch the Image Info Editor. 2. Click the second tab, Purchase Info. 3. Check the box marked, This image is available for purchase. Images you have enabled for purchase are indicated with a icon in the corner of your Thumbnail image. 4. Enter the product and payment details of your item: Item name: Enter the name of your item - this should be a short description of the item for sale. This will appear on your site and in your customer s shopping cart. Items names are limited to 32 characters long, including spaces. Item ID: Enter an ID that will help you identify the image and product option you are selling - this is for your reference when receiving your orders. Price: Enter the price of your item and select the currency from the drop-down menu. Weight (optional): Enter the weight of the item. Select Lbs or Kgs from the drop-down menu to specify the unit of measure. PayPal uses the value you enter here to calculate shipping charges, if you set up shipping rates for your PayPal account with a basis of weight. Shipping: Select Use PayPal Prefs or Use Flat Rate from the drop-down menu for the shipping costs. If you select Flat Rate, enter a rate in the provided field. Tax: Select Use PayPal Prefs or Use Flat Rate from the drop-down menu for sales tax. If you select Flat Rate, enter a rate in the provided field. See Setting up PayPal Preferences for more information on Weight, Shipping, and Taxes. 5. Click Add Item once you have finished entering in your product and payment details. The item will appear in the Item list below. 6. Continue adding items as needed. 42

43 To edit a product item: Click on the Item in the Item list. Edit the options by clicking within the provided fields or selecting from the drop-down menus. When you are done making your changes, click Update Item or Cancel to clear your changes. To delete a product item: Click the X next to the item to delete it. Note: Within the Content Pages section, you can also create PayPal Add to Cart buttons for selling specialty products on your content pages. These may be items that are not attached to a single image, such as Books, DVDs, or other custom products. Setting up PayPal Preferences PayPal Shipping and Tax preferences are the default preferences that you create for orders that you accept through PayPal. By creating presets through PayPal, you can facilitate the checkout process for your users and make creating items for sale faster and easier, too. clickbooq s integrated PayPal cart works with two PayPal presets: Shipping Calculations and Tax Calculator. To set PayPal Shipping Method Preferences: 1. Log into your PayPal account. Click the Merchant Services tab. 2. On the right-hand side of the page, click the link that says Shipping Calculator, then select either Domestic or International shipping. 3. Follow the Shipping Method Wizard to create shipping methods for each level of service or pricing structure that you require. To set PayPal Tax Calculator Preferences: 1. Log into your PayPal account. Click the Merchant Services tab. 2. On the right-hand side of the page, click the link that says Tax Calculator. You may define a separate sales tax rate for each of the 50 U.S. states, provinces, territories, or for your country. 3. Click the link Add New Sales Tax for either Domestic or International rates. 4. Follow the Tax Calculator Wizard to create the tax configurations that you require. Note: Generally, tax rates are not applied to the shipping amount, so leave that option unchecked if you are not sure. 43

44 How your customers will use the PayPal shopping cart Once the PayPal cart is enabled and your items have been enabled for sale, those images that are available for purchase will have an Add to Cart link. Clicking this link will display the purchase info for that item, with additional links to purchase it. Clicking the Add to Cart link will then pop-up the PayPal shopping cart window with that item s information in it. Once the PayPal cart window appears, your user can then proceed with the checkout process, or continue shopping. The user can also view their Cart at any time by clicking the View Cart menu item in the main website s navigation. PUBLISH YOUR SITE Before leaving the Organize section, you must click the Publish button to Save and Publish any changes you ve made within this section. You do not have the option to Save in Organize. Although Image Archives and Lightboxes are not actually published, you still must click Publish to save newly created Lightboxes or changes to Archive folder names, etc. When you are done making changes to the Organize section, click Publish in the bottom right hand corner toolbar of the Toolbox window. When the site has finished publishing, a dialog box confirming that your site has been published appears. Tip: Use your Image Archive folders to save drafts of your Portfolios. When you re ready to publish, copy the images to a Portfolio and click Publish. 44

45 Congratulations! You have completed the Organize section. To add content pages to your site, continue to the Content Pages section by clicking the Content Pages tab at the top of the Toolbox window. Content Pages contain all of your non-portfolio pages such as About, Contact, Client List, or News. Within this section you can create, edit, and organize your content pages. You may name your pages to fit your needs. The Content Pages menu along the left-hand side of the Toolbox window is split into three panels: Content Pages, Image Upload, and Button Area. The preview window to the right of the menu displays a preview of your selected Content Page. Use the scrollbars to navigate within the window. Note: Unlike other Toolbox sections, creating and uploading Content Pages will be published to your site instantly. Only editing button areas and re-ordering pages do not publish until you click Publish. Please be aware that you are committing changes to your live site in Content Pages. 45

46 CREATE content pages Content Pages are simply images, just like the ones in your portfolios. This means you will create them yourself using an image editor, like Photoshop. Since they are images and not created with a text editor, you can design your pages using any fonts or images you like. You can use any combination of photos or text in your created page. You can add a short biography, current news, client list, contact information, etc. You can also add hotlinked text for addresses, web addresses, etc. In the Button Area panel, you can create and position hyperlinks that link to addresses or other web pages, like blogs or stock photo agencies. You can also create PayPal Add to Cart buttons, for selling your specialty items on your Content Pages. To create your Content Page image in Photoshop: 1. Create a new document and set the Color Mode to RGB, the dimensions to pixels: 804w x 536h. 2. Set the resolution to 72pixels/inch. Leave the remaining settings as-is. 3. Once the document has been created, set the color of the background layer. Any text or images will appear against this background color. Choose a color that coordinates well with your overall site design. For a seamless Content Page, match the background color to the Site Color you chose in Layout & Style (you can check the hex value in the color picker). 4. Using Photoshop s Type tool, select any font available to you and enter the text you would like to display on the page. Adjust the type color and/or size as needed. 5. Optional: Add Images to your Content Page. You can also insert graphics or images into your Content Pages to create a unique look. Visit the clickbooq.com Gallery for ideas and inspiration. 6. When you are satisfied with your page layout, use Photoshop s Save for Web menu to export an optimized GIF, JPEG, or PNG. Please refer to Preparing your Images for additional information on 46

47 optimizing your images. 7. Now, save your layout as a Photoshop (.psd) document in case you need to edit any information later. Tip: If you set the site color within the frame of your site to be transparent (invisible) in Layout & Style, to allow the background to show through the site, you may want to consider creating your Content Pages as transparent PNGs. This will allow you to maintain the pass-through effect of your site design. To create a transparent PNG, please see the KnowledgeBase document titled Transparent PNG in the Support section of your Toolbox. To add a new Content Page: 1. Create a new Content Page by clicking on the Create New button in the bottom left corner of the Toolbox window. 2. A pop-up dialog box appears. 3. Choose Content Page from the drop down menu. 4. Enter a name for the Content Page. This is the name that will appear in your site s main Navigation Menu. Keep names short, simple and easy to understand (e.g. About, Contact, Events, Client List, Stock, etc.). Avoid special characters or punctuation. 5. In the Content Page Options panel, click the Add Image button. The System file browser will appear. 6. Locate the content page image you previously created and select it. 7. Once the image has successfully been uploaded, you will be able to preview it in the Preview Area. External MENU Links You can create external links to other websites that link directly from your navigation menu. When your site visitors click on an External Link, it will launch a second browser window and load the URL you indicate. These External Links count toward your total number of Content Pages. To add a new External Link: 1. Create a new External Link by clicking on the Create New button in the bottom left corner of the 47

48 Toolbox window. 2. A pop-up dialog box appears. 3. Choose External Link from the drop down menu. 4. Enter a name for the External Link. This is the name that will appear in your site s main Navigation Menu. Keep names short, simple and easy to understand (e.g. About, Contact, Events, Client List, Stock, etc.). Avoid special characters or punctuation. 5. Enter the URL for the link. The link must include 6. Click the Create button. Your new external link will appear in the Content Pages and Links panel with an external link icon next to it. To add a new Link: 1. Create a new Link by clicking on the Create New button in the bottom left corner of the Toolbox window. 2. A pop-up dialog box appears. 3. Choose Link from the drop down menu. 4. Enter a name for the Link. This is the name that will appear in your site s main Navigation Menu. Keep names short, simple and easy to understand (e.g. About, Contact, Events, Client List, Stock, etc.). Avoid special characters or punctuation. 5. Enter the address for the link. When this link is clicked on your site, it will automatically pop up the user s program with this address in the To: field. 6. Click the Create button. Your new link will appear in the Content Pages and Links panel with an external link icon next to it. Renaming Pages You can rename existing Content Pages and Links by double-clicking the name of the page. Type the new name into the editable text field and click outside of the text box when you are done editing the name. Reordering Pages To change the viewing order of your content pages, click-and-drag the Page Name within the Content Pages panel and drag it into a new position within the list. A thin, black bar will indicate where the Page can be dropped. The order of this list is the order of appearance on your website. Content pages always appear after your Portfolio section. 48

49 Deleting a Content Page Click the X button in the button bar next to the Content Page name to delete it. BUTTON AREAS You can create hyperlinked (button) areas within your Content Pages that launch a webpage in a new browser window, opens a new message, downloads a file, or adds an item to your PayPal cart. This is useful for adding links to other websites like your stock photography agency, addresses of your agent(s) and assistants or download links to press releases, client lists and resumes. To create a new Button Area: 1. Click Add Button in the Content Page options panel. You must have a Content Page selected before you can create a new button. 2. A button will appear in the top left corner of your preview window. For placement purposes, the button will appear as a transparent pink rectangle. It will not be visible on your published Live site. 3. Click-and-drag on the button to position it in on your page. Drag the square corner handles to resize the actual button area. The transparent pink rectangle should encompass the link or address in your image that you wish to make clickable. 4. Once your button area has been positioned, select the link type from the drop-down menu in the Button & Link Options panel. You may create a link to an address, URL (web link), or a button for adding an item to the PayPal shopping cart. 5. For and links, enter the corresponding address or URL. For addresses, the address must contain a valid address (e.g. name@domain.com). For URLs, the address must begin with and use either of the following formats:

50 For PayPal buttons, click the Edit Paypal info button, then enter your item name, item ID, price, weight, and shipping and tax. Click the Update button to save your changes. For more information about PayPal, see Start Selling with PayPal. Make sure your PayPal cart has been enabled in the Settings tab. Tip: For best results, when editing existing content pages, we recommend creating a new button and deleting the old one, rather than attempting to edit an existing button, or converting a button from a URL to an and vice versa. Deleting a Button Area Click the red X button in the top-left corner of the Button Area to delete a button area. PUBLISH YOUR SITE You do not have the option to Save in the Content Pages section. Creating and uploading new content pages will automatically publishes your changes instantly. You will still need to publish any changes to button areas or the page order of your content pages. If you have made any changes, you must click on the Publish button before exiting the Content Pages section. If you try and exit before publishing, you will get a warning message to publish or discard your changes. If you would like to continue making changes to your Content Page, click Cancel. Congratulations! You have completed the Content Pages section. To select your website settings and enter your search engine data, continue to the Settings section by clicking the Settings tab at the top of the Toolbox window. 50

51 WEBsite FEATURES AND settings In Settings, you can enable or disable certain features of your website as well as create the metadata for search engines. WEBSITE FEATURES General Settings Low res printing Enable printing of low-res images by checking the box. Disabling print removes the print button from your website. Public Lightbox Enable public Lightbox sharing by checking the box. Disabling public Lightbox will remove the menu item from your site s Navigation and prevent visitors from sending others a Lightbox gallery of your images. However, you can still use the Lightbox feature through your clickbooq Toolbox. Terms Enable the Terms link by checking the box. This will display a link on your website that will pop up a Terms window. Your website Terms is where you can inform your visitors of any information that they should be aware of while viewing the work on your site. In most cases, the Terms page will refer to copyright and ownership issues. 51

52 Pre-June 2011 users only: clickbooq provides a default placeholder Terms page, but you may add or edit the text on the Terms page if you wish. Your Terms page is a simple HTML page that is stored in your website s FTP space. To access the Terms page, you must log into your FTP account first. You can find information about accessing your FTP in our FTP User Guide in the Support Center ( How to edit your Terms: (Pre-June 2011 Users only) Once you have logged into your FTP, you will see a terms.html file. Download that file to your computer s desktop and open it in any basic text editor. It is important to not change the file type or file name from terms.html. TextEdit on the Mac or Notepad in Windows is well-suited to edit the terms and retain the format of the file. You may want to make a backup copy of the original terms.html file in case you wish to revert to the original later. When you are done editing the file, save your changes and then copy the file back into your FTP, replacing the existing terms.html file. The next time you access your site, click on the Terms link to view your changes. If you do not see the Terms link, make sure the feature is enabled in the Toolbox Settings. Music Settings Add music to your website to enhance the visitor experience. You can turn music on or off in Music Settings. If you select On, the panel expands to reveal the MP3 file upload button. If you have uploaded a file previously, the audio file name appears next to Currently. If you have not uploaded a track before, it displays Currently: none. To upload a new audio file: 1. Click Upload New to upload your audio file. Audio files must be in the MP3 format and encoded with a sample rate of khz. This is the default setting for most audio.mp3s. 2. The System file browser pops up. 3. Locate your file and click Select. The file begins uploading and a progress bar appears. 4. When the audio file has imported successfully, a dialog appears confirming successful upload. Click OK. Tip: When creating your MP3 file, you may want to optimize the file for online playback. By converting your audio file to a lower bit rate, you can further decrease the file size. If the.mp3 did not import successfully, an error message appears indicating the file could not be uploaded due to an invalid file name or format. Check to see whether the file has been named correctly and saved in the correct format. Click OK to try again. When a user visits your site, it will automatically stream your audio file and play continuously. Users can turn off music when visiting your site by clicking on the Audio icon located next to the copyright information of your website. Note: Make sure you have permission to use the audio files you have uploaded. Most music is copyright-protected. 52

53 Portfolio Settings Captions Adding captions to your images allows users to view the image titles and descriptions. To turn off captions, uncheck Display image captions. This also removes the Info button from the bottom toolbar. Thumbnail Settings Thumbnails are smaller versions of your full-size images that are displayed when a user clicks Thumbnails in the bottom right corner of your site. Users can browse through thumbnails and click on them to quickly jump to the full-size image. To turn off thumbnails, uncheck Enable image Thumbnails. Disabling Thumbnails will remove the Thumbnails menu item from your bottom Toolbar. Toolbar Settings These buttons appear when users view your Portfolios or Lightboxes and are located along the bottom of your site. The default setting is to use small icons for Captions, Printing, and Slideshow. If icons are not your style, you can choose to use text instead of icons. Check the box to use icons instead of text for your toolbar. Click to Advance Users can click on the left and right-side of your iamges to navigate your portfolio. Check the box to enable the Arrow graphic to be displayed to your viewers to indicate the direction of the navigation. Slideshow Settings By default, your users can click the Slideshow icon in the Toolbar to turn on Slideshow mode in your Portfolio. You also have the option to make Slideshows start automatically when users click on your Portfolios. You can set the number of seconds between images by clicking the drop down menu next to Delay. There is a minimum of three seconds between images. To disable Slideshows entirely, uncheck the box for Enable Portfolio Slideshows. 53

54 Presentation Mode (Fullscreen portfolios) Introduction clickbooq is pleased to announce Presentation Mode fullscreen viewing of your portfolios! Now, your visitors can view your best work on any size display from the smallest netbooks up to the largest desktop displays. You can also control your viewing experience directly from your keyboard: left and right arrow keys navigate through your portfolio images quickly and intuitively a great way to show off your work to clients. Requirements Presentation Mode requires larger images than our normal 804x536px (3:2) image size. The maximum size for fullscreen, Presentation Mode-ready images is 1800x1200px (3:2). We have found that this size offers a good compromise between image loading speed and the resolution necessary to support high-quality scaling on virtually all larger displays. In order for your portfolios to be PM-Ready, you may need to re-upload your existing images at the larger size so they will be displayed at the best image quality when viewed in fullscreen mode. Enable Presentation Mode You can enable Presentation Mode from the Toolbox > Settings Tab > Website Features > Portfolio Settings: Enable Presentation Mode will enable fullscreen viewing only when viewers click the fullscreen icon in the portfolio Toolbar: Enter Automatically When Viewing Portfolios (sub-option) will enter fullscreen viewing immediately when a portfolio is accessed. The user does not have to click the fullscreen icon. Using Presentation Mode Browsing Images Viewers can navigate through images by clicking directly on the screen. Clicking the left half of the screen moves to the previous image, and clicking the right half of the image advances to the next image. Arrows will appear to indicate the direction of navigation. 54

55 Using the Toolbar Once you are viewing a portfolio in Presentation Mode, users can also navigate images using the Toolbar (individual features are enabled in Settings): Using your Keyboard You can also use your keyboard s left and right arrow keys to navigate through the portfolio. Perfect for presentations! The Escape key will exit Presentation Mode. FAQs How will I know that my uploaded images are Presentation Mode-ready? Images that meet the requirements for Presentation Mode, will be marked with a new fullscreen icon in the image thumbnail. If your image is also PayPal-enabled, the icons will appear together. Images that are not large enough to support Presentation Mode will not display a fullscreen icon. What happens if I upload an image larger than 1800x1200px? Images that are larger than 1800x1200px will be resized by our system to 1800x1200px. Since the system uses a general level of compression when resizing, some artifacting may occur during the resize process. For best results, we recommend that you resize your images prior to uploading them through the Toolbox so you can visually inspect the image quality first and make adjustments if necessary. Images that meet the 1800x1200px requirement will be left unprocessed by our system and be uploaded directly. What if my image isn t exactly 1800x1200px (3:2), such as a vertical or panorama? To be compatible with our fullscreen feature, the image can not be wider than 1800px or taller than 1200px. If necessary, the Toolbox will automatically detect the image dimensions and resize it to be compatible with Presentation Mode. If your image is larger than 804x536px, but less than or equal to 1800x1200px, the system will not process your image further. 55