Tip of the Day | Page 28

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.

October 3rd, 2008 | Web Editor | Tip of the Day | Comments (1)

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).

October 2nd, 2008 | 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.

September 30th, 2008 | 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.

September 29th, 2008 | 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.)

September 26th, 2008 | 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.

September 25th, 2008 | Web Editor | Tip of the Day | Comments (1)

Imageready Feature Comes To Photoshop

One of our favorite little features from Adobe ImageReady has made its way into Photoshop—it’s called Slices From Guides. What it does is slice your image (for the Web) where your guides are positioned. To make use of this handy little number, just make your rulers visible by pressing Command-R (PC: Control-R), drag out guides where you’d like your slices applied, and then press the letter K to use the Slice tool. With the Slice tool selected, look up in the Options Bar and you’ll find a button called Slices From Guides. Click the button and Photoshop will do the rest.

September 22nd, 2008 | Web Editor | Tip of the Day | Comments (0)

Zoom Out For Sharper Web Images

This is a tip we use almost daily when we have to greatly reduce the size and/or resolution of an image. Sometimes when you make a drastic size/resolution change, it can really make the resulting image blurry, so what we do is simply zoom out on the image so that the window and image are at either 50% or 25% view. Then, we take a screen capture of our image window at the new smaller size. That way, the image still looks sharp, but it’s much smaller when we open the screen capture in Photoshop. The trick to making this work is using either a 50%, 25%, or 12.5% view size for making the capture. If you view the image at 66.7%, 33.3%, or 16.7%, the image won’t be as crisp (because of the way Photoshop draws the image at those views).

September 19th, 2008 | Web Editor | Tip of the Day | Comments (2)

Let Photoshop Make The File Size Call

Oftentimes you have a target size you’re trying to hit when creating Web graphics; for example, you’re creating a Web banner and your file size limit is 32 K. If that’s the case, and you know the target size, why not let Photoshop do all the work? Here’s how: Under the File menu, go to Save for Web. In the Save for Web dialog, just to the right of the Settings pop-up menu, is a right-facing triangle. Click-and-hold it and when the pop-up menu appears, choose Optimize to File Size. In the dialog, enter the target file size you need your graphic to be and click OK to have Photoshop optimize the graphic to fit your target file size. If it doesn’t matter to you whether it’s a GIF or JPEG, choose Auto Select GIF/JPEG and Photoshop will “make the call.”

September 17th, 2008 | Web Editor | Tip of the Day | Comments (1)

Crop It Even Closer

When you’re designing graphics for the Web, you don’t want even one extra pixel of unused space, because it adds to the overall file size of the image. Because of that, you want to crop your Web graphics as tightly as possible. Luckily for us (you, them, etc.), Photoshop CS can do it for you automatically. Just choose Trim from the Image menu, click OK in the dialog, and it will crop your Web graphic as tightly as possible for the smallest possible file size. It does this by looking at the pixel color in the upper left-hand corner of your image and cropping down until it hits another color. (Note: The Trim dialog also gives you the option to base the crop on the bottom right-hand corner pixel color or transparent areas). This works especially well when creating type for the Web, because you’ll often create it on a white background.

September 16th, 2008 | 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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71

Photoshop Tutorials

2012 Text Effect

Recreate the text effect from the title to the new blockbuster movie.
More Fun with 3D

Continue exploring the possibilities with Photoshop’s new 3D tools.
Reverse Restoration

Corey shows you how to make a new photo look damaged by blending in some unusual textures.
3D Background Effects

Use Photoshop’s new 3D tools to create some dazzling background effects.

Premium Video Tutorials From NAPP

Photo Retouch
Scott Kelby shows you how to take an overexposed photo into a great photo using Photoshop. Want Great Photoshop & Photography Skills?

Extended Definition Processing
Scott Kelby shares a technique he's been working on, which gives your final image an HDR look using just one photo.
Join NAPP & Get a Free DVD.

Smart Object Masking Trick
Dave Cross shares a trick he discovered that will help you remove white from around your subject when using smart objects.
Want More?

Light Painting
Dave Cross takes a popular trend - light painting - and shows you how you can paint text recreating this cool trend.
You Don't Need to be a Pro to Join NAPP.

Viewing and Basking in your Image

When I’m done working with an image, I like to sit and admire it (hey, I spent six hours working on it, I should). To do that, I hit the Tab key, then hit the F key three times. This hides all of the panels and toolbars and lets you see the image by itself surrounded by black. To get back to regular mode, press the F key and the Tab key one more time.