Colorization Coloring the Entire Image: Let s say you have a colored image, but you wish to make it only black and white with a SINGLE color tone. The first thing to do is to make your image devoid of color. There are two ways of doing this: 1. Go to Image > Mode > Grayscale. 2. Go to Image > Mode > Lab Color. In your Layers palette, select the Channels tab. Click on the triangle to the right, and select Split Channels. Your image is now split into 3 channels. Delete the a and b channels, leaving the channel that has your image. Now you have an image in only black and white. In order to colorize it, we need to go to Image > Mode > RGB Color. This will leave the image in black and white, while allowing us to color it. Go to Image > Adjustments > Variations. Now you should see your photo in a number of tones. It may look as if it had been colored already, say with purple or blue. Simply click on the image at the top left that says Original to return it to its black and white state. You can change the colorization effect now, by clicking More Red, or More Cyan, or whatever color you wish. Click OK to finish. We chose this flower: And gave it a sepia color: Colorizing a Part of the Image: Now what if you only wanted the white flower to change color and to leave the leaves gray? In that case, you would make the entire image black and white, following one of the two ways above. And you would return it to RGB color, as written above as well. Select the area of the flower you wish to color, using the magic wand. You can hold shift and click on additional areas for more coverage. Once you have the flower selected, press CTRL+C to copy it, and then CTRL+V to paste it on a new layer. Select the layer of only the flower. Go to Image > Adjustments > Hue/Saturation. Check the box that says Colorize. Changing the hue changes the general color of the flower, from pink to yellow to green
to blue back to pink again. The saturation changes how much of the color shows up. The higher the saturation, the more colored your flower will look. The lightness will lighten or darken the entire flower as a whole. You can play around with these settings until you re happy. If you want, you can select the middle of the flower with the magic wand, paste that on its own layer, and colorize that as well. We did so and ended up with the purplish flower shown on the right: Clearing a Foggy Day Do you have a picture of a foggy day that you want to make look clear? reset the exposure levels, then replace the sky. Then what you want to do is to To edit the levels, go to Image > Adjustments > Levels. Make sure the Preview box is checked. Drag the black slider on the left towards where the mountain range begins, and drag the white slider on the right to where the mountain range ends. Now move the gray slider around to a contrast level that you re happy with. To get rid of the sky, select the magic wand tool, setting a tolerance of 10 (if this isn t sensitive enough, you can make it 5). Check the Anti-aliased box. Now hold down the shift key and click in the sky until the entire sky is selected. If you accidentally select something you don t want, you can press CTRL+Z, then go back to holding shift and selecting. Once the entire sky is selected, press delete and the sky is gone. Create a new layer before your Background image. Select the gradient tool and change the foreground color to a nice shade of sky blue. Now drag from top down to create a sky on the new layer. You can erase any spots left by the previous sky and change the levels again accordingly. Our original foggy day: Our new bright day:
Creating a Web Photo Gallery Before you can create a web photo gallery, you need pictures to put in it. Prepare your photos for the Web by rotating, cropping, resizing, and color correcting, if necessary. Refer to the related information in the links below for tips on prepping your pictures. Place the photos you want to include in the gallery in a folder on your hard drive. Choose an empty folder or create a new one to use as a destination folder for the files created by the Photo Gallery command. Now in Photoshop, choose File > Automate > Web Photo Gallery to open the photo gallery dialog screen. In the folders area, click Browse to find the folder where your images are located. If that folder has sub-folders that include images you want to include, make sure the box labeled Include All Subfolders is checked. Click Destination to find the folder where you want your gallery html and information to be saved. In the Site Name field, type a title that will appear on all the pages of your gallery. This is the text that also appears in the title bar when the page is viewed in a Web browser. If desired, you can fill in the Photographer, Date fields, and all other preferences listed there. This information will also appear on the Web pages if it's filled in. In the Options, select the Thumbnails section (the Options defaults to the Banner section). Choose a size for the thumbnails. The choices are: Large (100 pixels maximum), Medium (75 pixels maximum), and Small (50 pixels maximum). If you wish, you can make a customized pixel size, but the maximum is around 450 pixels. Click OK in the photo gallery dialog. Your Photo Gallery should automatically launch in your Web browser. Notes Photoshop creates an index.htm file and individual folders for images, pages, and thumbnails and places them in the destination directory. The destination folder can be uploaded to your Web server as-is, or opened in an HTML editor for further editing. The UserSelections.txt file is not required and can be deleted. You can replace the home.gif, next.gif, and previous.gif icons with your own images. If you use custom icons of a different size, however, you'll need to change the height and width attributes in your HTML files. You may want to rename all your photos with a informative file name before creating your photo gallery. Photoshop creates an individual page for each picture rather than linking directly to the image. This provides easier navigation and allows you to customize the page.
Slices The Slice tool is often overlooked, but it can be extremely helpful in the creation of web content, as well as performing certain photo editing tasks. The benefits are that each slice can have its own actions, whether it be a rollover, link, or animation. Also, when selecting a compression scheme, each slice can have its own compression setting. To create slices, simply select the Slice tool and draw the area of the slice you wish to create. A user layer is one that you have drawn, and will have a blue number. The other grey ones are slices that the program automatically generated. In the example below, the middle portion was sliced, therefore there must be two more portions on each side which the program generates. You can change these auto generated slices to user slices by right clicking it and selecting Promote to User slice. The benefit of doing so is that now it can have independent actions and settings. You can also create a Layer Slice by selecting the layer you want to become a slice (not the background layer), then click on Layer New Layer Based Slice. The benefit of doing this is that the slice will follow the size of your layer as you transform it.
Now, to change slice #03 to a hyperlink to Adobe s website about ImageReady, right click on the slice and select Edit Slice Options Input the URL you want the slice to link to, and you can also name it for easier reference later. This type of editing, combined with ImageReady, can allow you to create buttons for your webpage quite easily. Also, ImageReady has the capability to Export as a Macromedia Flash file (*.swf) for those who wish to use Flash on their website. Also, you can split up large graphics by slicing them, then saving the optimized version as Images only. This will create a folder called Images in the directory you selected, and inside that folder there will be each slice of the picture saved as a separate file. This type of optimization may help those with slower internet connections, so that they will not need to download one large graphic, but a few smaller ones. Another side benefit of using slices is to quickly edit and transform parts of your picture. If you simply right click on your image with the slice tool and select Divide Slice, you can divide your entire image into a matrix of slices, provided you don t have any other slices at the moment. When you have created slices, you may notice that the Marquee tool snaps to the slices that you have created. This allows for easier selection of different areas, especially if you need to do a repetitive task.
Creating your own animated buddy icon 1. You want to select pictures that will be recognizable when shrunk down to a buddy icon size. If they are photos, you may want to only select about 4-6 different ones, but if they are more simple graphics or just text, you can choose more. 2. Open the pictures you want in Photoshop, and find the focus of the picture that you want to include. It must fit in a square, since buddy icons are square. To accomplish this, you can use the Rectangular Marquee and hold SHIFT while selecting your area, or select Fixed Aspect Ratio in the marquee s option and set it to 1 to 1. 3. Copy the selected area and create a new file and paste it there. In the new image, click on Image Image Size, and change the size to 50 pixel by 50 pixel. If your image is unrecognizable, you may want to select a different image and/or portion of the original picture. 4. Once you are happy with your selection, it is time to move to ImageReady, which helps create animated graphics. Click on the Edit in ImageReady button on the bottom of the toolbar. 5. When you are in ImageReady, you will want to make sure your Animation Window is open. If it is not open, click on Window Animation. It ll look like this: 6. When you want to add your next frame, select your next 50x50 pixel picture and copy it onto your ImageReady file. Continue this process until you have all of the different pictures that you want. 7. Click on the Duplicates current frame button to create the next frame in animation. The visible layers in the next frame are independent of the othe frames. So, to get the pictures to change, you want to change the visibility of your layers until you have the right ones showing in sequence. 8. To set the display time of each frame, click on the little arrow next to the time (by default it is set to 0 sec.), and a drop down menu will appear. Select the amount of time you want that particular frame to show. You can set it for multiple frames by selecting them by Shift or Ctrl and left click. 9. If you mess up and want to delete a frame, you can use the little trash can button next to the Duplicate frame button. 10. In order to save your file, and ensure that AIM will accept it, you will need to save it in the GIF format and have the file be small enough (about 7KB). To do so, you will want to Click on the Optimized tab and look at the bottom. In this sample gif, it shows that the file will be about 11.57KB, and take approximately 5 seconds to download on a 28.8kbps modem. Since it will be too big, you will need to change the compression settings. This can be accomplished by going to the Optimize window that is located on the top left of your workspace by default.
workspace by default. 11. Currently, my optimized is at the quality preset of GIF 128 Dithered. GIF is the format, and will have a maximum of 128 colors, and will be dithered. Dithering is a process in which the program will try to simulate colors that aren t available, since you only have a certain number of colors. This can be useful in cases where you have smooth color changes, such as for photos. If you want to try to shave some of the filesize, you may select No Dither, and this works alright for simpler graphics with larger areas of same color. Try out different quality settings until you can get the filesize to 7KB or under. If you cannot reach it using the presets or manually editing the quality settings, you may want to consider deleting a frame and/or layer. 12. Once you have your file at an acceptable size, click File Save Optimized As Type in your filename and select Images Only (*.gif) for the type, and then hit Save. 13. Now it is time to try it in your AIM client. Go to your buddy list and click on My AIM Edit Options Edit Preferences In that window, click on Buddy Icons on the left column, and then click on the Browse PC button. Find your file and click OK. Newer AIM clients will ask you to ensure that you are not infringing on a copyright. If your file was small enough, it will show up in the preview window. If not, you will receive a pop up message like this: 14. If this happens, you will need to go back to ImageReady and try to reduce your filesize more.
File Formats and Color Spaces Choosing the wrong file format for a Photoshop document can ruin hours of work and leave your images in an un-editable or unusable state. Additionally, an improperly selected color mode can lead to unexpected results when printing the final product. Thankfully, however, both of these problems may be easily avoided with a little care. Common File Types The following table summarizes the characteristics of common Photoshop file types. Each has its strengths; how the image will be used in the future usually determines the proper format. File type Transparency Compression File size Purpose Photoshop Supported None Large Bitmap None None Large GIF Supported Color downsampling Small JPEG None Lossy Small PDF PICT TIFF Supported None Supported Lossless or Lossy None or Lossy Lossless or Lossy Medium Large Medium Saving images for future editing in Photoshop. Saving full-quality images on a Windows-based computer. Uploading diagrams and graphics to the internet. Posting photos on the internet. Saving high-quality photos on your computer. Saving images that will definitely work on another person s computer. Saving full-quality images on a Mac. Saving high-quality and full-quality images that both Macs and PCs can use. Common Compression Methods Saving an image at full quality without compression can result in a huge file. However, some types of compression degrade the quality of the image, which can lead to dissatisfactory results the next time it is opened. The following are common compression types and what they are optimized for. Method Name Type Optimized for RLE Lossless No image type in particular. LZW Lossless Images with large areas of single color JPEG Lossy Photographs and images with color blends ZIP Lossless Images with large areas of single color Original Image Detail of original No Compression GIF Color Downsampling JPEG Lossy Compression
Common Color Modes This may not seem to be of much importance, but using the right color mode can save plenty of trouble when the time comes to email your photo to a friend or print it out for a report. For example, a black-and-white image saved as CMYK may become blurry when printed, but a CMYK image on screen won t have nearly as many colors as an RGB image. Method Name RGB CMYK Grayscale Used for Images that will be displayed onscreen or printed from an inkjet printer Images that will be printed onto paper using professional printers Black and white images and diagrams Touching Up an Image While some people use Photoshop to create stunning images from scratch, such as backgrounds and stylized text, the application s real power lies in its ability to enhance, distort, and otherwise manipulate existing images to your liking (hence, it s a photo shop). Distorting images from their original appearance generally requires simply finding the right filters and tools for the job, and the same is true for restoring photos and images as well. Below are tips on fixing two common image problems. Repairing Compression Residue As mentioned earlier, some forms of compression are lossy, meaning that they cut down on file size by sacrificing image quality. If you plan on using a compressed image for something that demands high photo quality, such as a picture that will appear in a newsletter or be printed onto photo paper, you ideally wouldn t want to use a GIF or low-quality JPEG image. However, in some cases you ll have no other choice, and at those times you ll want to recover as much of the original image quality as possible before printing it. To repair damage done by JPEG or GIF compression: 1) Run the Despeckle filter found under the Noise submenu in the Filters menu. 2) If that does not completely fix the problem, try running it a second time. Original JPEG Image Detail of discarded color information Image after running Despeckle filter twice
The despeckle filter is also good for fixing the color interlacing effect you ll get whenever you try to scan a photo or graphic from a newspaper or magazine. This color interlacing occurs when you scan something at such high resolution, you begin to see the individual dabs of colored ink used to simulate colors and gradients. Original Scanned Image Covering Blemishes Detail of interlaced color region Image after running Despeckle filter Sometimes you ll scan a photo that had a fold running through it, a tear on the upper edge, or some other little bit of damage that you want to conceal. In other instances, you may have a blemish (especially on portraits of people) that you want to hide before printing the image. Situations like this simply require the use of the rubber stamp tool (and a creative imagination at times, too). To cover up or conceal some small part of a photo: 1) Select the rubber stamp tool. 2) Choose an appropriate brush shape (circular usually works best) 3) Choose an appropriate brush size (it should be about 10 pixels or so for average-resolution images) Original Photo of Cracked Bumper Image after using the Rubber Stamp tool 4) Option-click or Alt-click (Windows) a place close to the blemish to clone from. 5) Based on where you set the clone source, choose an appropriate spot on the blemish and paint. (Refer to upper left image: arrows point from a particular source point to the appropriate spot to paint on the crack.) 6) Choose new clone sources near the blemish that resemble and paint over with them appropriately. Be sure to use small sections at a time. Original Photo of Liberty Bell Image after using the Rubber Stamp tool
Filter Combinations If you re already well-acquainted with Photoshop, you ll know that sometimes it just takes the right combination of filters and effects to get novel or stunning results. Below are two simple methods for achieving an effect in Photoshop. Making Liquid Most people have figured out that you can use the Add Noise and Motion Blur filters to create a brushed metal look, and with an overlay of a gradient you can come darn close to recreating the appearance of Apple s very own Brushed Metal. But sometimes, you want a background that s a little less cold and rigid, and in cases such as this you might try a variation of this effect. 1) Begin with a high-resolution document of about 200 dots per inch. The resolution you choose here will determine the distance from the water you appear to be. 2) With black and white as background and foreground colors, respectively, run the Clouds filter in the Render submenu of the filters menu. 3) Run the Chrome filter in the Sketch submenu of the filters menu. You may want to begin with mid-range values for the Detail and Smoothness settings. If you are unhappy with the end result, you may always try this liquid-making technique again with different values for Chrome Detail and Smoothness. 4) Make a layer above the chrome and fill it with the color (or gradient) you want to use for your liquid. 5) Change the blending mode of the color layer to achieve the liquid effect. Linear Dodge and Hard Light work well for light solid colors, Soft Light works well for light gradients. Dark gradients and dark colors are usually not the best choices for this effect.
Backlit Text 1) Make a new layer and type the text you want to use in a white font. The end result will vary depending on where you place your text. The light will appear to come from the center of the document, so in the example to the right, the word Spotlight was centered (horizontally) but close to the top (vertically). 2) Rasterize the layer by right-clicking it in the layers palette and choosing Rasterize Layer. 3) Run the Polar Coordinates filter in the Distort submenu of the Filters menu. Choose Polar to Rectangular in the options window. 4) Rotate the entire canvas 90 CCW by going to Rotate Canvas in the Image menu. 5) Run the Wind filter from the Stylize menu, choosing Wind and from the Left in the options window. 6) Repeat two or three times to achieve a more dramatic effect, if desired. 7) Rotate the canvas 90 CW. 8) Run the Polar Coordinates filter again, but this time go from Rectangular to Polar. 9) You may want to have another layer of text on top of your backlit version, just so it s easier to read. Type the text again and set it on top of your backlit layer. You may have to use the Scale command in the Transform submenu of the Edit menu to get it to fit perfectly over the backlit layer.