Adobe Creative Cloud Design Tools All-in-One For Dummies (2013)

Book I

Getting Started with Adobe Creative Cloud

Chapter 6: Handling Graphics, Paths, Text, and Fonts

In This Chapter

image Livening up your documents with graphics

image Getting control of paths and strokes

image Getting the scoop on text and font fundamentals

image Creating a layout

Graphics, paths, text, and fonts are all integral parts of creating documents with the Adobe Creative Cloud. You must know how to handle each element in your documents and how to make these elements successfully work together. Discovering the different ways you can work with images, text, and drawings is the fun part!

Whether you’re designing websites or creating a brochure layout, you can use these elements on their own or together, and you’ll likely find out something new every time you work with them. A layout can include text, images, and drawings but sometimes includes more. If you’re creating documents for the web or creating PDF (Portable Document Format) files with multimedia elements, you may be working with sound, animation, and video alongside text, images, and illustrations.

Using Graphics in Your Documents

graphic can be an image, a drawing, or a vector object. You can create graphics manually by making marks on a page or create them electronically using software. You can display graphics in many formats, such as on a computer screen, projected on a wall, or printed in a magazine or book.

Computer graphics come in many forms, grouped by the way they’re created electronically. Bitmap and vector graphics are formed in different ways to achieve the results you use in your documents.

Working with bitmap images

Bitmap images are pictures made up of many tiny squares, or bits, on an invisible grid. When these dots are next to each other, the picture is formed, depending on where and how the colors are arranged on the grid. If you zoom in far enough, you can even see the blocky dots, or pixels,that make up the image. At 400 percent zoom, notice how the image in Figure 6-1 is made of large squares. However, when you look at most bitmap images at their true sizes, you don’t even see pixels.

image

Figure 6-1: A bitmap image is created from pixels.

The bitmap is a useful way to display photographs and apply effects to text. When you paint or create detailed graphics, you frequently use bitmaps. However, remember that images can lose quality if you scale them (change their sizes). Resizing pixels causes the image to lose definition and quality. Most problems occur when an image is enlarged. Common kinds of bitmap files are PNG, BMP, GIF, JPEG, PICT, and TIFF. Fortunately, Photoshop CC includes improved upscaling capabilities that help you retain the quality you need for a good image. You can read more about bitmaps in Book IV.

Discovering vector graphics

A vector image (or graphic or drawing) is quite different from a bitmap image. A vector image is created by a series of mathematical calculations or code that describes how the image should be formed. These calculations tell the computer how the lines should display and render on the page. Some of the file formats that support vector graphics include .eps, .ai, .pdf, .psd, and .svg.

Vector images are usually smaller files than bitmap graphics because the mathematical information required to make the calculations to create the vector image is usually smaller in file size than the information that it takes to make up each pixel of a bitmap. (Compression can lessen a bitmap’s file size, but it’s usually larger and slower to display.)

For this reason and because vectors are helpful in scaling an image, as shown in Figure 6-2, these graphics are well suited for the web.

image

Figure 6-2: A vector image is smooth at any zoom level.

Scaling is easy to do when you’re using vectors because the program needs to modify the calculations only slightly to make the image larger or smaller. This means the file size won’t change, and the scaling is very quick. You can scale the image on a web page to fill the browser window, whatever size it is, or make the image huge for a large banner. The quality doesn’t degrade, and the file size remains the same.

imageIf you want to use vector graphics in your websites and applications, you can choose File⇒Save. In the Save As dialog box, you can name your graphic and choose SVG from the Save as Type drop-down menu.

Working with Paths and Strokes

Paths are the vector lines and outlines you create in a document. You can use paths to outline an image, separate areas of text, or be part of an illustration you create. You typically make paths using a Line tool, Pen tool, or the shape tools. You can use these tools to create paths of different shapes and sizes. You also can use tools to modify the color and size of strokes (the actual line that makes up a path).

You can use paths to create clipping paths and paths for text. Clipping paths are used to mask (or hide) elements on a page. You define that mask with paths to create a shape for the area you need to hide. Clipping paths can even be saved in a file and imported into a different design pattern. A common workflow is to create an image in Photoshop CC with a clipping path and import the image into InDesign. Because InDesign can interpret the clipping path, you can automatically remove the area you want to mask.

When you want to create text that flows along a path, begin by creating a new path and then use the Type On a Path tool to type text directly on that path. For example, in Illustrator, you create a path with the Pen tool and then select the Type On a Path tool in the Tools panel. If you click the tool on the path you created, you can type new text along that path.

If you have an existing path, you can select the Type tool and cross over the selected path. The Type tool cursor changes to indicate that it’s loaded as a Type On a Path tool, as shown in Figure 6-3. Click on the path, and the type is attached to the path.

image

Figure 6-3: The Type tool cursor changes when you cross over an active path.

stroke is the color, width, and style of the line that makes up the path you create. You might draw a line with the Pen tool, and the line making up that path is the stroke. However, that path can also have no stroke (represented as a diagonal line in the Tools, Swatches, and Stroke & Color panels), which means that you don’t see the path itself. However, you may see a color or pattern filling that stroke (the fill), as shown in Figure 6-4.

image

Figure 6-4: This path has a fill but no stroke applied to it.

You can change the color, width, style (or type), and shape of a stroke by using controls and tools in the Tools panel and the Stroke panel in Illustrator and InDesign. You can also therefore create dashed or solid strokes of different patterns that are wide or narrow. Some strokes are shown in Figure 6-5.

image

Figure 6-5:Paths that have different strokes can add a creative flair.

Adding Text

You may add text to your projects for different reasons. Text is frequently used to educate and inform people who read it, and this kind of document is a lot different from ones that use text for artistic purposes only. For example, if you’re creating an article, you may place the text in columns on the page under a large title at the top. At other times, you may use text as a creative element or even as an object instead of a letter. Alternatively, you may be laying out a web page and use the text for both a creative element in an animation and the content on pages that make up the website.

You can add text to a document by using the Text tool or by importing the text from another source, such as Microsoft Word. You can create a single line of text in a text field or large blocks of text with or without columns. Text fields can be rotated and resized, and you can change the color, font face, orientation, and character size of the text.

Text can also be placed on a path, as we mention briefly in the earlier section Working with Paths and Strokes. You can then add text to your documents in a different way because you can draw a path and have the text follow it. Paths are particularly useful for headings on a page, footers, and artistic works that use text as one of their elements.

Using fonts

font refers to the typeface of a set of characters. You can set the font to be a number of sizes, such as the miniscule size 2 or the gargantuan size 200. Fonts are given names, such as Times New Roman or Comic Sans.

You may also hear about the glyph, which is an actual character. For example, S is a glyph. A set of glyphs make up a font. You can view glyphs in the Glyph panel in Illustrator (choose Window⇒Type⇒Glyphs), which is especially useful when you’re using fonts such as Wingdings that are made of pictures instead of letters and numbers.

The fonts you use can make a huge difference to the look, feel, and style of your documents. Whether you’re working on a layout for a magazine article or creating a digital piece of art, the kinds of fonts you use help the feel of the work.

Two major groupings for fonts exist, as illustrated in Figure 6-6:

check Serif: Each character has a short decorative line at the start or finish of a stroke in a letter.

check Sans-serif: A character has no small serifs.

image

Figure 6-6: Serif and sans-serif fonts.

Sometimes sans-serif fonts feel more modern, whereas serif sometimes looks more historical, formal, or literary. This topic is, of course, all a matter of opinion. Take a moment to look at how text is used around the web and in books, magazines, advertisements, and even newspapers. How text is commonly used greatly affects how other people view your work and find the overall feel of it. Finding an appropriate font is sometimes a challenging design task, but it can also be fun.

Discovering types of fonts

Although you can find a gazillion fonts for free on the Internet, be concerned about the quality of your finished product. Typically, people in the professional graphics industry use PostScript fonts, and preferably OpenType fonts, which are more reliable when printing, as compared to TrueType fonts, which may reflow when printing to different resolutions.

image check TrueType: Like other digital typefaces, the TrueType font file contains information, such as outlines, hinting instructions, and character mappings (which characters are included in the font). Available for both the Windows and Mac formats, the TrueType fonts designed for each operating system have slight differences; therefore, Windows and Mac users can’t share TrueType fonts.

image check PostScript (Type 1): The scalable PostScript font system is compatible with PostScript printers; users can see fonts on the screen the same way the fonts would be printed. Type 1 font files consist of two files: a screen font with bitmap information for onscreen display and a file with outline information for printing. For high-end printing, both parts of the Type 1 font files (Printer and Screen fonts) must be included with the file. Because of differences in their structures, Windows and Mac PostScript Type 1 fonts aren’t cross-platform compatible.

image check OpenType: The OpenType font technology was created in a joint effort between Adobe and Microsoft and is an extension of the TrueType font format that can also contain PostScript data. OpenType fonts are cross-platform — the same font file works under both Windows and Macintosh operating systems. This digital type format offers extended character sets and more advanced typographic controls. As with TrueType, a single file contains all the outline, metric, and bitmap data for an OpenType font. Although any program that supports TrueType fonts can use OpenType fonts, not all non-Adobe programs can access the full features of the OpenType font format. You can find the symbols on the Font menus of many of the CC programs representing the type of font.

Using text and fonts on the web

Using text and fonts on the web is a difficult task at times. When you use fonts in a web page, system fonts are used to display text. You usually specify a font or a group of fonts to use on each page, and the fonts that are installed on the visitor’s computer are used to display the text. The problem arises if you use (or want to use) fonts that aren’t installed on the visitor’s computer. For example, if you use the Papyrus font and the visitor doesn’t have that font, a different font is substituted, and the page looks completely different as a result.

When you’re using Dreamweaver to create websites, you can set up a set of fonts that you want to use on each page. These fonts are similar in how they look, and if one of the fonts isn’t available, the next font is used instead. Among the fonts in the set, at least one of them should be installed on the visitor’s computer, to ensure that your pages will look similar to your original layout.

imageYou can use Photoshop and Illustrator to create an image using any font installed on your computer and then save that image for the web. (Choose File⇒Save for Web.) Then you can place that image in your web page with Dreamweaver. This option is best used for small amounts of text — say, for buttons on a navigation bar, headings to separate areas of text, or a customized banner at the top of a web page.

The Fundamentals of Page Layout

Page layout incorporates the many elements we discuss earlier in this chapter, mainly text and images (and sometimes other forms of multimedia), to create a design on a page. When you’re creating a page design, you must consider how people view a layout, such as how the eye moves across the page to take in the flow of information. Also consider how the elements are arranged and how much empty space surrounds them.

Two main kinds of page layout are discussed in this book: print and web layouts. Both formats require you to work with many of the same elements.

Deciding which Creative Cloud programs to use

Many differences exist between preparing a layout for the web and preparing it for print; however, you’ll find that you use many of the same tools for both, and a great deal of information crosses over between the two mediums.

Image manipulation for the web is frequently done in Photoshop. It’s also the standard program for manipulating and correcting images intended for print. You can even design a page for print and also put it online by using the Export XHTML/Dreamweaver command in InDesign.

However, you have to make certain considerations when you post information online. Navigation, usability, file size, dimensions, and computer capabilities are considerations for the web that aren’t concerns when you’re working for print. However, resolution, colors, and cropping (to name a few) are considerations of someone designing a piece for print, which aren’t concerns for the web.

Another option for creating web page layout is to use Adobe Fireworks, included in the Creative Cloud. Fireworks not only helps you create web graphics, but also provides excellent prototyping tools for the web. Using Fireworks, you can establish styles, build a master page, and even apply interactivity to your pages. Building multiple page prototypes with hyperlinks is a cinch using Fireworks.

Designing a layout for print

When you design a page layout for print, you have to factor in the size and type of paper that will be used. Sometimes, you create letterhead with certain elements on the page that remain the same, whereas other elements (the main content) differ from page to page. You can also create page layouts that serve as templates for a book and use particular elements (such as bullets or sidebars) repeatedly in varying ways throughout the pages. Page size, font size, and image resolution are all important considerations in print.

imageOnscreen image resolution is measured in pixels per inch (ppi), which refers to the number of pixels that are within 1 inch onscreen. The printed resolution of an image is measured in dots per inch (dpi) — a dot of ink is printed for each pixel. A higher dpi means that the image is clearer and has finer detail, which is extremely important for print. Printed images almost always use a higher resolution than onscreen images, so you may find that an image that measures 4-x-4 inches onscreen (at 72 ppi) prints at less than 1-x-1 inch (at 300 dpi). Read more about resolution in Book IV, Chapter 6.

Templates are available for page layouts that factor in common dimensions of paper and help you lay out content into defined areas. Many kinds of templates are available online, and you can download them sometimes for free; others are available for a small or modest fee depending on the template. For example, if you’re creating a brochure, you may have to think about where the page will be folded and how to orient images and text so that they’re facing the correct way when someone reads the brochure.

Here are a few issues to think about when you’re laying out a page:

check Use a grid and snapping-to-align elements whenever possible. If certain elements on your page aren’t aligned, you should have a good reason.

check The eye travels in the direction of the elements on the page. For example, if a picture of a person is facing away from the center of a spread, the eye travels in that direction. Make sure that the eye travels to the important elements on the page.

check Follow a grid. Although it's not absolutely necessary to follow a grid, using a layout grid can help you better organize your content, whether you are planning a printed piece or an online one. For more information about following grids, see www.thegridsystem.org.

Choosing a web page layout

Layout for the web is quite different from layout for print. However, many of the same issues arise in both print and web layout, such as keeping text legible and flowing across the page (or screen) in an intelligent way. In web layouts, navigation and usability open a few doors for issues you should consider when planning a web page:

check Usability: A usable site is accessible to most, if not all, of your visitors. Visitors must be able to access your content easily because the text is legible, the file formats work on their computers, and they can find content on your site. Also, visitors who have physical challenges, such as sight or reading problems, can use software on their computers so that the website is read or described aloud to them.

check Revision: The best way to build a successful site is with lots of planning and sketching. If it has been a while since you’ve broken out a pencil and sketchpad, make a habit of keeping them handy now. By jotting down the needs of the typical user, you can determine which information needs to be most accessible and prominent on the page. You can then start mapping out your ideas in sketch form. Sketching allows you to iterate (come up with new versions) over and over again without feeling committed to any one idea. Work out the user’s experience on your sitebefore you start building your pages. You’ll not only save days of time, but have a much more successful site as well.

check Size: File size should always be kept to a minimum, which may mean changing the size of your layout. If many parts of your design require large images, you may need to change the design completely to reduce file size. Also, you need to design the page with the average user’s monitors in mind. If a visitor’s monitor is set to a resolution of 800 x 600, your site scrolls horizontally if it’s designed any larger than 780 pixels wide. Most web surfers dislike this horizontal scrolling effect, so you must consider the dimensions of visitors’ monitors when designing sites.

check Rearranging content: Nowadays there are many methods for automatically scaling and rearranging content. Read Book VI on Adobe Dreamweaver, most importantly Chapter 8, to find out more about dynamically adjusting your site according to user needs using Cascading Styles Sheets.

check Navigation: Users have to navigate the pages on your site. To help them do so, you need to create links to those pages by using buttons, text links, menus, and other screen elements. Making navigational controls easy to find and use takes some forethought and planning. Be sure that navigation is a big part of the plan when designing the layout of your site.

You have to think not only about usability and navigation, but also the different kinds of devices accessing the page and how people from all over the world may try to access your page. If you need your page to be universal, you may need to translate it into different languages and use different character sets. (This statement applies to print also, if you’re designing a page that requires a special character set other than the ones you regularly use.)

Because you may be using multimedia (such as images and animation) alongside text, you’re constrained to the dimensions and color limitations of the user’s device and have to think about both file size and scrolling.