Articles by Web Editor | Page 36

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.

October 8th, 2008 | 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. Continue Reading »

October 7th, 2008 | Web Editor | Tip of the Day | Comments (1)

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.

October 6th, 2008 | 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.

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)

Design Elements from Photos

Here is a cool way to use parts of you photos as abstract design elements. Continue Reading »

September 28th, 2008 | Web Editor | Effects, Tutorials | Comments (21)

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)

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 72 73 74 75 76 77 78

Photoshop Tutorials

3D Light Beams
This effect was discovered by a 'happy accident' and uses the 3D features inside of Photoshop CS4 Extended.
More Texture Effects
Further experiments into what you can do with texture images in Photoshop.
Reverse Restoration
Corey shows you how to make a new photo look damaged by blending in some unusual textures.
Rain Drops
In this tutorial, Corey not only creates the raindrops, but also the splashes that are formed with the raindrops hit the hands.

Light From 3D Shapes

Corey shares another way to get a cool 3D light beam effect.
Olympic Graphics, Part 2

Corey finishes up the Olympic-inspired design that he began last week in Part 1.
Olympic Graphics, Part 1

The Olympic-inspired tutorial will be coming in two parts. Stop by next week for the conclusion to this video.
Masking with Channels

This week’s tutorial deals with creating masks for complicated images by using channels.

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.

Open in Camera Raw from Bridge

You can open RAW images in Camera Raw right from Bridge in Photoshop CS3. This frees up Photoshop to continue working on your files while they’re being processed in Camera Raw. Just select one or more images in Bridge, Control-click (PC: Right-click) on them, and choose Open in Camera Raw. This will open the image(s) in Bridge’s Camera Raw rather than Photoshop. You can also use the keyboard shortcut Command-R (PC: Ctrl-R).