Instructions

Thank you for purchasing “Autumn Light” — a ProPhoto theme from That’s Kinda Cool!

———————————

Please be sure to check out my video tutorials for more in-depth help on working with your PSD file.:)

http://www.thatskindacool.com/video-tutorials

———————————

—–What’s Included with the “Autumn Light” template:

* 7 Masthead PSDs with Clipping Masks (instructions below)
* Individual PNGss for all uploaded images
* Sliced and layered PSDs of the elements used in the design
* Hanging Featured Gallery Icon (see instructions below)

All layout graphics are located in layout.psd.

This layout uses two custom fonts. You will need to download and install these fonts before you’ll be able to edit any text areas in the included PSDs.

Mathlete:  http://www.fontsquirrel.com/fonts/mathlete
Overlock: http://www.fontsquirrel.com/fonts/overlock

Changing the custom rollover font:

If you would like to change the custom menu rollover font, you’ll need to first install the new font under ProPhoto 4 –> Customize –> Fonts.  Once it’s installed  go to ProPhoto 4 –> Customize –> Advanced –> Custom Code –> Custom CSS and replace “MathleteSkinny” with the name of your font.  You can find the name of your font in the stylesheet that is included in the fontface kit you downloaded from fontsquirrel. :)

Turning off the top social menu:

If you prefer to remove the social tabs at the top of the site, you’ll create a new logo graphic with the included “logo_withoutsocialmenu.psd” file.  You can duplicate any color changes you’ve made to your main layout.psd in this file.

Once you have created your new logo_withoutsocialmenu.png file, just follow these quick steps to remove the social menu:

1. Go to ProPhoto 4 –> Customize –> Menus –> Secondary navigation menu

2. Click “do not show secondary navigation menu” and click “Save” at the bottom of the page.  This will turn off the menu.

3. Go to ProPhoto 4 –> Customize –> Header Area –> Logo and upload your new “logo_withoutsocialmenu.png” as the logo.  This will place both the logo and the site topper back where they should be.

 

Navigating the layout.psd file:

The layout.psd file included in this template makes use of the Photoshop “Notes” feature. When you open the layout.psd file, first use View –> Show –> Slices to turn on the slice view (if it is not already enabled) and then View –> Show –> Notes to be sure that you can see the notes available. The notes will tell you what each slice is and where it should be uploaded in the ProPhoto Customization area if you change it. Simply double-click each note if you need to know where to upload the graphic it represents. If you are unable to see the notes when you double-click, use Window –> Notes to open the notes palette.

Elements Users: You will use the file called map_of_ProPhoto_locations.jpg in the “Individual PSDS for Elements” folder to determine where your finished files should be uploaded.

 

HANGING GALLERY ICONS: 

These icons are located in ProPhoto 4 –> Customize –> Grids –> Custom Grid Items. Once you’ve created your gallery icons with the included hanging_featured_icon.psd file, you can upload them there.  You will also add the links to your galleries in that area (after you’ve created your galleries in Pages –> Add New).

If your hanging grid is accidentally deleted and you need to create it again, you’ll create a 4-column custom grid with a crop ratio of 19:20.  This is the only setting that will work when you use the custom gallery icons.  If you use a different number of icons or change the crop ratio, your grid will not line up properly.

 

SIMPLE GALLERY ICONS:

You can also use a simple featured gallery area like the one shown below.  Create your gallery pages, create a “Select Posts/Pages” gallery instead.  ProPhoto’s grid system will automatically create your gallery icons.  You can use any crop ratio and any number of columns if you are not using the custom frames.

You may need to remove one of the social icons or add an additional one depending on the amount of space you have to fill up.

 

Placing Your Logo and Exporting Changed Graphics:

Expand the layer labeled “logo” and hide the text to replace it with your own logo or change the text to your own name. Once you’ve made your changes, save layout.psd.

1. Choose File –> Save for Web and Devices. Click your logo so that it highlights in the preview window (it will light up and no longer look faded).

2. Choose PNG-24 in the box at the right.

3. Click “Save” in the “Save for Web and Devices” dialog box. A second dialog box will appear. Choose a destination for your images, then at the bottom of this dialog, choose “Selected Slices” from the “Slices” dropdown box. Click Save. Your images will be saved into a folder called “images” at the location you chose.

4. Upload your newly created logo.png at ProPhoto 4 –> Customize –> Header Area –> Logo.

NOTE — this template uses PNG images. If your exported graphic has an unexpected white background, simply retry your export as a PNG file.
Instructions for using Masthead Clipping Masks (mastheads and custom gallery icons):

1. Open the PSD for the slide template you wish to use. Then open the images you plan to use in that slide.

2. Highlight the appropriate clipping mask layer in the template (each is labeled by its position).

3. Drag the image you’d like to use to the template — it will appear on the layer directly above the clipping mask you’ve highlighted. If it doesn’t end up there, move it to the layer directly above the clipping mask.

4. Highlight the image layer you just created in the template (not the mask layer) and right click, then click “create clipping mask.” Or hold down the “alt” key and hover your cursor between the clipping mask layer and the photo layer until you see this icon:

appear between the layers, then click to create the clipping mask (note that this icon has changed for CS6 — you will see a bent arrow instead).

5. Once you have placed your image inside the clipping mask, you can use ctrl-t (cmd-t on Mac) to reposition and scale your image. Hold shift to prevent distortion while you transform.

6. Save each masthead image as a transparent PNG file and upload your new images at P4 –> Customize –> Header Area –> Masthead Image and Slideshow.

Getting in Touch:

I’ve done my best to put together basic instructions and information to help you get the most out of your new That’s Kinda Cool! ProPhoto template. However, if you run into snags while installing your template, please don’t hesitate to e-mail me at andrea@thatskindacool.com.

Thanks again for purchasing!