Home arrow Photoshop arrow Page 15 - Using Adobe Photoshop CS, Part 1

Using Adobe Photoshop CS, Part 1

Adobe Photoshop CS comes with an amazing asortment of tools to help you edit your images. The latest version includes a wide range of features to make things easier, but how can you get the most out of it? In this first part of Chapter 5 from Mordy Golding's Adobe Creative Suite, (Sams, ISBN: 0672325918), you'll learn how to use masks, layers, filters, feathers, and more.

Author Info:
By: Sams Publishing
Rating: 4 stars4 stars4 stars4 stars4 stars / 143
November 23, 2004
  1. · Using Adobe Photoshop CS, Part 1
  2. · Opening, Creating, and Importing Files
  3. · Creating a New File
  4. · Importing Images
  5. · Working with Selections
  6. · Lasso Tools
  7. · Selecting a Range of Colors
  8. · Modifying Selections
  9. · Channels
  10. · Creating a Clipping Path
  11. · Layer Opacity and Blend Modes
  12. · Working with Masks
  13. · Painting and Drawing
  14. · The Brush and Pencil Tools
  15. · Photoshop and the Web

print this article

Using Adobe Photoshop CS, Part 1 - Photoshop and the Web
(Page 15 of 15 )

We will cover Web graphics extensively in Chapter 6, "Using Adobe ImageReady CS," but for getting graphics ready for the Web quickly, the following basic concepts will serve as an introduction to the world of Web graphics.

Save for Web

The World Wide Web, as we know it today, supports several image formats. Actually, it isn't the Web itself, but the software-or browsers-that people use to view the Web. A Web browser, such as Microsoft Internet Explorer, Netscape Navigator, or Apple's Safari, is a window in which we can view the content of the Web. These browsers support various image formats, mainly GIF and JPEG. There are other formats that are supported through the use of plug-ins-add-on software that you can download (usually free)-which add functionality to your browsers. Formats that are supported by plug-ins are PNG, SWF, and SVG-although the latter two are vector-based formats and don't apply to Photoshop.

If you've ever surfed the Web, you know that speed is everything. Although DSL and cable modems are becoming more and more popular, the majority of people who connect to the Internet still use 56K dial-up connections. That means surfing the Web and viewing Web site pages filled with graphics and images could take a long time. A designer's challenge is to design Web graphics that are small in file size, which would allow their pages to load faster. It's always a balance-you don't want a page that's filled only with text, yet you also don't want a page that contains so many images that a user will skip to the next site because he has to wait too long for your page to load.

The image file formats that are supported in Web browsers have many settings for such things as colors and compression, giving designers some degree of control over the final file size of each graphic. There is a direct correlation between the visual quality of a graphic and its file size. You can choose to make a file size smaller at the expense of how good the image looks. Likewise, a better-looking image will result in a larger file size.

Photoshop's Save for Web feature allows designers to make that decision easily by allowing you to preview an image in any of the supported Web formats, along with all the color and compression settings. The Save for Web feature also lets you know what your final file size will be, giving you all the information you need in order to decide how you want to save your Web graphic-all before you even save the file.

Note -The Save for Web feature is such an integral feature for Web designers that Adobe has included the entire Save for Web feature inside Illustrator and GoLive as well. We'll cover that specifically when we get to those chapters.

When you're ready to save your image for the Web, you choose File, Save for Web, which will launch a larger-than-life dialog box that features tools, previews, and palettes of its own (see Figure 5.85). We'll cover these settings in detail in the ImageReady and Illustrator chapters.

Figure 5.85 The Save for Web dialog in Photoshop CS.


In an effort to gain even more control over how images are displayed on the Web, a method calledslicingwas born. By taking a large single image and chopping it up into smaller pieces (called slices), designers found that they could optimize their graphics better (see Figure 5.86).

Figure 5.86 An image with Web slices indicated.

Photoshop has a Slice tool that lets you indicate how to chop up the image, and you can use Save for Web to optimize each slice individually. There are other benefits to slicing images as well, such as indicating rollovers and animation. We'll cover this subject in detail in the next chapter.

Setting Type

Although you might not need text features to color correct your digital photos, you will most likely need them for doing any kind of Web design. In fact, you never really know when you might need a little bit of text. Although you're better off using Illustrator or InDesign for most text needs, there will be plenty of times when it will make sense to add text in Photoshop.

To add text to your image, choose the Type tool and click in your document. You'll get a blinking insertion mark and you can begin typing. Notice that Photoshop automatically creates a new kind of layer for you-a type layer (see Figure 5.87).

Tip -You can double-click on the thumbnail of a type layer to select the text quickly and easily.

Use the Move tool to position the type layer in your document. You can also double-click the layer in the Layers palette to apply a layer style, just as you can with any normal layer (remember to click anywhere in the layer except on the name of the layer itself).

Figure 5.87 A type layer in the Layers palette.

Styling Text

With the Type tool selected, you'll notice that the Tool Options bar will update to offer text-specific settings such as font, size, justification (left, centered, right), and color. You can also choose from several antialiasing options (see Figure 5.88).

Figure 5.88
Choosing an antialiasing method from the Tool Options bar.

Tip -Antialiasing is a method used to make graphics appear smoother onscreen. With small text especially, antialiasing can make some words blurry or unreadable. Various algorithms are available for antialiasing and Photoshop lets you choose from among them to get the best result. As you change algorithms, you'll see a live preview of your text.

Choose Window, Character and Window, Paragraph to access even more text controls (see Figure 5.89). The Character palette lets you specify kerning and tracking values (the spaces between letters), as well as leading (pronounced "ledding"), which is the amount of space between each line of text in a paragraph.

Figure 5.89 The Character and Paragraph palettes.

Warping Text

To add cool effects, you can apply warps to text (see Figure 5.90). To do so, select some text and click on the Create Warped Text button in the Tool Options bar (see Figure 5.91) to get the Warp Text dialog. Here you can choose from 15 warp effects, as well as tweak the individual settings of each type of warp (see Figure 5.92).

Figure 5.90
Text with a warp effect applied to it.

Figure 5.91 The Create Warped Text icon in the Tool Options bar.

Figure 5.92 Applying a warp from the Warp Text dialog.

Note -Illustrator has identical warp effects but can apply the effects to any kind of art, as opposed to Photoshop, which is limited to warping only text objects.

This chapter is from Adobe Creative Suite, by Mordy Golding (Sams, 2003, ISBN: 0672325918). Check it out at your favorite bookstore today. Buy this book now.

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus

- Photoshop Text Techniques: Transformers
- 3D Text in Photoshop
- Photoshop Text Tutorial: Creating Indy Text
- Photoshop Productivity Tips and Tricks
- Photoshop Keyboard Shortcuts
- The Critically Important Color and Gamma Cal...
- Using Adobe Photoshop CS, Part 2
- Using Adobe Photoshop CS, Part 1
- 20 Things About Photoshop You Have to Know
- Photoshop Tricks, Part 2
- Photoshop Tricks, Part 1
- Keeping Up Appearances: Techniques for Retou...
- Navigation Menus in Photoshop
- Slicing and Saving Graphics in Photoshop for...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials