Adobe Photoshop Tutorial: Adding Logo or Images to the template
Before reading manual, you can watch video and see how images customization is done in action:
The Photoshop files (.psd) that come with your AlgoZone template package in the graphics_source directory consist of number of layers that are embedded into a single design giving the look of a single image. This design is cut up into individual .jpg, .png or .gif images and put back together again using HTML/PHP to create your web pages. Adobe Photoshop's slice tool and Save for Web capability facilitates this process immensely.
You can view slice properites in Photoshop, the Photoshop Save for Web dialog box, and ImageReady. The following characteristics can help you identify and differentiate between slices: (see Fig. 1 below)
Define the boundary of the slice. Solid lines indicate that the slice is a user slice or layer-based slice; dotted lines indicate that the slice is an auto slice.
Differentiate user slices and layer-based slices from auto slices. By default, user slices and layer-based slices have blue symbols, while auto slices have gray symbols.
Slices are numbered from left to right and top to bottom, beginning in the upper left corner of the image. If you change the arrangement or total number of slices, slice numbers are updated automatically to reflect the new order.
The Slice Tool
Slice tool has two options.
Right click with your mouse on its icon in the tool bar will give you the list of the two choices.(see Fig. 2 below)
The Slice tool allows you to create new slices, the Slice Select tool allows you to select an existing slice to modify it:
With the Slice Select tool, right-click on a user slice (blue color) to get these options:
Right-clicking on an auto slice (gray) gives you these:
You may resize an existing user slice by clicking on its number with the Slice Select tool and dragging the small boxes in its boundary, which are circled in Fig.5:
Adding a new slice
Adding a new slice can sometimes be done simply by choosing the Promote to User Slice option (Fig. 4) - if an auto slice happens to fit the area where you want your new slice.
You may also draw a new slice onto the document using the Slice tool: Click and drag to cover the area you wish to become a slice. (Fig. 6). Let go of the mouse and the new slice boundaries will appear, as well as its surrounding auto slices. (Fig. 7)
Naming and Saving Slices
Naming your slices is important because the names you give your slices will be the names of the .jpg or .gif images that will go into your web pages.
Double-click on a user slice's number to open the Slice Options window:
Fig. 8. The Slice Options window allows you to name the slice, give it a link (if it is to be a button in your web page), and change its dimensions.
Customize the way to save slises
You may also wish to customize way your slices are named and saved.
Choose File>Save for Web from Photoshop's top menu. The Save for Web window will open. Click the Save button on the upper right and the Save Optimized As window will open. At the bottom of this window, choose Images Only for the Save as type: option. Then click on the Settings dropdown and choose Other from the list. (Fig. 9)
The Output Settings window will open. (Fig. 10)
Fig. 10. It is recommended to set up your slice options as pictured, as the default names (what you get when you do not do any customization) can be very long and confusing.
When slices are saved using the settings in Fig. 10, your saved image will simply bear the name you gave it in the Slice Options window (Fig. 8) plus its file extension, i.e.: az_logo.gif.
Sliced images will also be placed in an images folder, to keep them separate from the html files in your template.