Tip of the Day | Page 25

Use Layer-Based Slices

If you’re getting ready to slice an image for the Web and you still have your layers intact, don’t flatten that image before you slice. Instead, let Photoshop create the (layer-based) slices for you. There are two main advantages: (1) it’s easier. You don’t have to drag out slices—Photoshop does it automatically, perfectly slicing at the size of your layer. But even better is (2), when you create a layer-based slice, you can move the layer and (get this) Photoshop will automatically adjust all the slices to accommodate your move, and it will create a new slice for your layer as well. If you slice manually and move your layer—you’re out of luck—the old slice stays right where it was. Plus, creating a layer-based slice couldn’t be easier. Click on the layer you want to slice, then go under the Layer menu and choose New Layer Based Slice—Photoshop does the rest.

April 25th, 2007 | Web Editor | Tip of the Day | Comments (0)

Don’t Load That Bogus Slice!

If you’re slicing images for the Web in Photoshop (using the Slice tool), here’s a tip to save even more space. If you have a slice in your image that’s going to be the same color as your background (for example, you’ve got a solid white slice going on a solid white background), you can save file size by having that slice load no image at all. Sound like a plan? (I thought you’d like that.) Here’s how to do it: Once your slice is in place, make it active (using the Slice Select tool), and then double-click within the selection to get the Slice Options dialog. In the Slice Type pop-up menu, choose No Image and click OK. That way, when Photoshop generates its HTML for the page, there will be no image in that spot, just the white background showing through, giving you a faster loading Web page. Pretty sweet!

April 24th, 2007 | Web Editor | Tip of the Day | Comments (0)

Make Sure You See It The Same Way They See It

If you’re designing Web graphics on a Macintosh, you can be sure they’re going to be viewed by lots of people using a PC, and vice versa. A design problem arises because the monitors on Macs and on PCs display with different levels of brightness. For example, if you design Web graphics on a Macintosh, they’ll look more than 10% darker when viewed on a PC using Windows. Photoshop will let you see an approximation of how those graphics will look when viewed on a PC. Here’s how: Choose Save for Web from the File menu. Then, at the top right of the preview window you’ll see a pop-up menu called the Preview Menu. From that menu, choose Standard Windows Color to get a preview of how your currently opened graphic will look when viewed on a standard Windows monitor. Windows designers can do the same thing and view how their Web graphics will look when viewed on a Mac (they’ll look lighter). Knowing how your graphics will look on each platform will help you find a happy middle ground that looks good on both.

April 23rd, 2007 | Web Editor | Tip of the Day | Comments (0)

Imageready’s Auto Tile Maker

ImageReady has a built-in tool for creating seamless backgrounds. It’s called Tile Maker and it’s found under the Filter menu, under Other. It brings up a dialog where you can choose how much you want to blend the edges of your images (the default setting of 10 percent works fairly well for most images), but you can increase it if it doesn’t look smooth enough to you.

April 20th, 2007 | Web Editor | Tip of the Day | Comments (0)

Imageready’s Supercharged Eyedropper

In previous versions of Photoshop, you could only use the Eyedropper tool to sample a color from other open images in Photoshop, but for some reason, ImageReady had a supercharged Eyedropper. If you clicked the mouse button within your image and held it down, you could leave your image window and sample colors from, well… just about anything—including your computer desktop or any other open application. Freaky! Fortunately, Adobe finally added this same power to Photoshop’s Eyedropper tool.

April 19th, 2007 | Web Editor | Tip of the Day | Comments (0)

Read The Web Color Onscreen

Want to know the hexadecimal Web color values of any color in your image? The Info palette can tell you instantly. Go under the Window menu and choose Info. In the Info palette, click on the little Eyedropper icon next to the CMYK readout and a pop-up menu appears. Choose Web Color, and you’ll get the hexadecimal readouts right in the palette.

April 18th, 2007 | Web Editor | Tip of the Day | Comments (0)

Exercising Your Influence On GIFs

This is an old trick we use to influence how Photoshop builds its color table when creating GIF images. We put a selection around the area of the image that’s most important to us (for example, if we had a product shot, we’d put a selection around it), then we’d convert to Index Color (by choosing it from the Mode submenu under the Image menu). Photoshop will look at the colors contained in your selection and build the Indexed Color Table giving preference to those colors. It’s another slick way to use less colors, creating a smaller file, but with a better-looking image.

April 17th, 2007 | Web Editor | Tip of the Day | Comments (0)

Got A Folder Full Of Images For The Web? Batch ‘Em!

Do you have a whole folder of images that you’re going to convert to Web graphics? If the images are somewhat similar, don’t do them one at a time—automate the process using actions. Start by opening one image from the folder. Go to the Actions palette (under the Window menu) and click on the Create New Action button. Give this action a name (something like Optimize as JPEGs) then go about the business of optimizing this one graphic into a JPEG for the Web. When you’re done optimizing it, click the Stop button at the bottom of the Actions palette. Then go under the File menu, under Automate, and choose Batch. In this dialog, under Play, choose the name of the new action you just created. Under Source, choose the folder of images you want converted using that action, and under Destination, choose what you want to happen to those images after they’re converted. Click OK, and Photoshop will convert that folder with absolutely blinding speed. This one tip can really change the way you work, especially if you create for print first, then repurpose for the Web afterward.

April 16th, 2007 | Web Editor | Tip of the Day | Comments (0)

Get Super-Clean Type For The Web

If you’ve been faced with having to create small type on the Web (usually 12 points or fewer), you know the smaller you go, the blurrier your type gets. That’s because of the anti-aliasing that’s automatically applied to the type, which works fine at larger sizes but tends to run together at smaller sizes, making your type look fuzzy. You can adjust the amount of aliasing (from the Options Bar), but here’s a tip that many Web designers feel works even better: Once you get below 12 points, start adding positive tracking to your type (anywhere between 20 to 50 points) in the Character palette. This increases the amount of space between letters, and therefore, decreases the amount of blurriness. Increasing the space between your letters this way minimizes the effects of anti-aliasing and makes your type cleaner and more readable at smaller sizes. As a general rule—the smaller the type, the larger the tracking amount.

April 13th, 2007 | Web Editor | Tip of the Day | Comments (0)

Getting To The Hexadecimal Code

As you may know, there are hexadecimal codes for the colors used in webpages. Not only does Photoshop know these hexadecimal codes, it can extract them from an image and let you paste them into your HTML code editor. First, press the letter I to switch to the Eyedropper tool, and then hold the Control key (PC: Right-click) and click on a color within your image. A contextual menu will appear where you can choose Copy Color as HTML. Now you can switch to your HTML editor and choose Paste to copy the HTML code into your app.

April 12th, 2007 | Web Editor | Tip of the Day | Comments (0)

Spend More Time Animating, Less Time Clicking

If you’re building Web animations in ImageReady, you don’t have to keep clicking the tiny controls at the bottom of the Animations palette. Instead, navigate using these quick shortcuts: To play your animation, press Shift-Spacebar. To stop it, press Shift-Spacebar again. Press Option-Left Arrow (PC: Alt-Left Arrow) to go to the previous frame. Press Option-Right Arrow (PC: Alt-Right Arrow) to go to the next frame. To quickly jump back to the beginning of your animation, press Option-Shift-Left Arrow (PC: Alt-Shift-Left Arrow).

April 11th, 2007 | Web Editor | Tip of the Day | Comments (0)

Change One Preference, Save a Bundle

If you’re creating Web graphics with Photoshop and you’re not using the Save for Web feature (which is perfectly fine not to do), make sure you go under the Photoshop menu (in Mac OS X), under Preferences, and choose File Handling (in Windows, Preferences can be found under the Edit menu). In the Image Previews pop-up, change the setting from Always Save to Never Save. Image Previews are those tiny thumbnail icons that are visible on your system. They look cute, but they take up big space—often accounting for 70% of your file size. Turn them off, and you’ll save file size big time. (Save for Web does this automatically, so if you’re using that feature, don’t sweat it.)

April 9th, 2007 | Web Editor | Tip of the Day | Comments (0)

Style Warning for Web Designers

If you’re designing Web graphics using Photoshop and ImageReady, you’re probably spending a decent amount of time swapping back and forth between the two apps. The two programs share many of the same features and commands. However, they don’t share custom styles that you’ve saved in Photoshop’s Styles palette. So just be forewarned: If you create a custom style in Photoshop, don’t expect to find that same style in ImageReady.

April 6th, 2007 | Web Editor | Tip of the Day | Comments (0)

Get the Real 100% View

When creating Web graphics, it’s often important to view your graphic at the same size your audience will view it. To view your image at 100%, just double-click on the Zoom tool. If your image is too big when viewed at 100%, just zoom out until the view of your image is the size you’d like it to appear on the webpage (use the zoom-out shortcuts—click with the Zoom tool while holding the Option/Alt keys, etc.), then look in the lower-left corner of the image window and you’ll see the percentage of zoom. Write that down, then go under the Image menu and choose Image Size. When the Image Size dialog appears, in the Height pop-up menu in the Pixel Dimensions section, choose Percent. Then enter the percentage amount you wrote down earlier. By default, Photoshop will enter the Width when you enter the Height setting to keep your image proportional (if not, make sure the Constrain Proportions checkbox is turned on at the bottom). Click OK and it resizes your image to the exact size you want it to appear on the webpage.

April 5th, 2007 | Web Editor | Tip of the Day | Comments (0)

If It’s Web Safe, Don’t Use It

The one palette that we absolutely don’t use at all anymore is the Web-safe Color palette (choose Web Color Sliders from the Color palette’s flyout menu). Why? You don’t need it—and it can make your file sizes significantly larger than necessary. The Web-safe colors were created back when most computer users had computers that could only display a maximum of 256 colors. Out of those 256, the “Web-safe” colors were the 216 colors that were the same on both Macintosh and Windows browsers. Even back then you could still use a non-Web-safe color, but it might dither to the next closest Web-safe color so the color might be off a bit. However, if you’ve ever looked at a row of monitors at the computer store, you’ll notice the color is slightly different on every one, but that’s another story. Luckily these days, you’d be hard-pressed to find anyone using such a lame computer that it only displays 256 colors. They haven’t sold a computer like that for literally years.

April 4th, 2007 | Web Editor | Tip of the Day | Comments (0)

Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31