Photoshop 7: Tips & Techniques in Objective-C

Encode Quick Response Code in Objective-C Photoshop 7: Tips & Techniques

10 To redraw your thumbnail design within this web page using pencil or pen on paper, choose File | Print 11 To redraw your thumbnail design within this web page using the tools available in Photoshop, begin designing now

When you begin designing a web page in Photoshop, one of your first tasks is usually to create a new file with the appropriate page size While this may be a fairly easy task for print designers who know exactly the size of their final printed page, web designers must grapple with the variability of screen size when their web designs are viewed on different monitors On the Web, a page refers to the information displayed within a single (sometimes scrollable) web browser window When you create your web graphics in Photoshop, you must specify a size (in pixel dimensions) that will determine how much of the image (and your page) is visible without scrolling So, exactly how do you decide which numbers to input into the Height and Width boxes in Photoshop s New dialog box You first need to determine your target screen resolution The most popular are the following, listed from most popular to least popular, according to recent surveys from WebSideStory and BrowserNews (wwwnetmechaniccom/news/vol4/accessibility_no24htm): 800 600 1024 768 640 480

The difficulty in determining which of these screen resolutions to target is caused by the fact that depending on how you build it, your pages can look drastically different on the screens not targeted To work around this, many designers choose to develop their pages to grow and shrink on whichever screen size they re being viewed This process is often referred to as creating liquid pages Creating images larger than the width of the available space on the screen will cause a horizontal scroll bar to appear If this is not intended, you need to create your web graphics to fit within the available space on the user s screen Unfortunately, targeting a 640 480 resolution doesn t mean you can create graphics that are 640 pixels in width Why Because the following screen elements also take up space: Operating system menus, such as the Windows Start menu and the Apple menu Browser menus, toolbars, and other aspects of the browser that display onscreen

Web page offset, the buffer space around the web page that most browsers add by default; this can be overridden with certain HTML codes Web page frames, the additional edges of the browser that appear in between some pages that use the HTML coding technique called frames After this space is taken into consideration, you re left with significantly less space to work with when designing web pages in Photoshop Table 4-1 shows rough estimates on available page widths for the most popular screen resolutions You can use any of these widths when creating your new page in Photoshop

These are average widths Some users have their screens set up in different ways that may reduce the available width for web pages

If you re planning to create liquid pages that grow and shrink according to the user s screen size, you still need to pick An article in a recent issue of Evolt does a good one of these sizes to target The reason is job of describing how to create liquid pages: that you want to make sure none of your wwwevoltorg/article/Liquid_Design_for graphics force a horizontal scroll bar when _the_Web/20/15177/ you didn t intend them to (In other words, to make sure your liquid pages don t force a horizontal scroll bar even on 640 480 resolutions, make sure none of your graphics extend beyond 600 pixels) The height of your web page is less important, because web pages can extend down as far as you d like them to This means you should use a value for the height of your file in Photoshop that will ensure there is room for all the content you need to fit on that page Keep in mind that users tend to prefer shorter pages over longer ones that require extensive scrolling