Photoshop Bytes!

A quick series of mini tutorials introducing tools and basic Photoshop techniques

Slice Tool The slice tool is particularly useful for Webmasters who are concerned with image load times. Cutting the image into several different parts which fit together to create the larger image and then using these smaller images on the website allows the site to load more quickly. Simply click and drag the slice tool over your image in Photoshop to create a box designating what part of the image you want for a slice. Repeat this process to create multiple slices. Then go to File > Save for Web and Photoshop will open a new screen with lots of options. Saving for the web will create an HTML document with the sliced-up image put back together seamlessly. Since the slice tool was created with the Webmaster in mind, there are many options that modify the webpage that is output from Photoshop. In the Slice Options for example (right-click on your picture using the slice tool, click Edit Slice Options), you can give the slice image a name, URL if you want it to be a link, and can designate the target, message text and Alt Tag along with the image dimensions. There are also a lot of options in the Save For Web screen, including how severely you wish to optimize the image. Clicking on Output settings in the Save For Web screen will bring up a dialog box in which you can choose, among other things, whether you wish Photoshop to generate a table or CSS for the image slices in the resulting webpage. You can also fiddle around with other options such as default slice naming and what you want for a background for the webpage. Layer Masks Layer masks are grayscale images applied to a layer to determine its transparency. Anywhere the mask is white the layer will be opaque, anywhere the mask is black the layer will be transparent, and anywhere the mask is gray the layer will be partially transparent. Create a mask by selecting the Add a Mask button on the bottom of the layers/channels/paths window. This will automatically create a completely white mask attached to the layer currently selected. To edit the mask simply click on it next to its corresponding layer and treat it like any other Photoshop canvas you can paint on it, use a gradient, and use other tools to edit it. Clone Tool The clone tool is a nifty little tool that copies one part of an image to another using a brush-like tool. After selecting the tool from the menu (it looks like a little rubber stamp), alt-click a point on the image that you want to start copying from. Then start painting on another part of the image and it will paint from the source point that you choose. A cross hair will appear to show where you are painting. This tool is great to take out any blemishes or unwanted parts or a picture. For example, if you wanted to remove a buoy from a photo of a lake, simply alt-click over part of the water and then paint right over the buoy. To make sure the color matches (the water you paint down is the same color as the water surrounding it), choose a source point close to where you are painting. There are a few interesting options in the clone tool bar. You can choose what brush you want to use, the opacity and the blending mode. You can also choose whether or not you want to Use All Layers, which can be helpful if you wish to create an empty layer to do all your cloning on. The last option is Aligned, which affects where each brush stroke clones. If you do not have Aligned checked then each new brush stroke will start cloning from the original source point that you chose. If you check Aligned then all brush strokes will clone from a point that is relative to the displacement of the first brush stroke from the original source point. For example, if you Alt-click a point one inch to the left of where you paint, and then move to a different part of the canvas and make a new brush stroke, that stroke will clone from the area one inch to the left of where you are painting (it will not start cloning again from the original source point.)

A special "thank you" to contributing writer, Jenna Hoffstein [bluevenus], for taking time out of her busy schedule. We invite you to view bluevenus' Art Gallery bluevenus' Renderosity Store September 26, 2005