The Fundamentals of Page Layout in CS5

Page layout incorporates text and images (and sometimes other forms of multimedia) to create a design on a web page in Adobe Creative Suite 5. 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 print and web layouts. Both formats require you to work with many of the same elements.

Decide which Creative Suite 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 a concern 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 Suite. 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 synch using Fireworks.

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

Templates for page layouts factor in common dimensions of paper and help you lay out content into defined areas. For example, if you’re creating a brochure, you have to think about where the page will be folded and how to orient images and text so they’re facing the correct way.

Many kinds of templates are available online, and you can download them sometimes for free; others are available for a small fee depending on the template.

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

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

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

  • Follow the rule of thirds and divide pages into thirds. Parts of your layout should fall into these three areas.

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

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com