Views
1 month ago

design3

182 The Principles of

182 The Principles of Beautiful Web Design 8-bit or 24-bit format. Both of these flavors of PNG support transparency, but transparency in 24-bit PNG images is implemented by means of an alpha channel that sits alongside the red, green, and blue channels; this means that each pixel in a PNG image can have up to 256 different levels of opacity. The effects of this difference are illustrated in Figure 5.30—notice that you can still see the background image through the PNG image, while the GIF is either completely opaque or completely transparent. 8-bit transparency is like that of the GIF in Figure 5.30—it’s either on or off. Therefore, if you plan to put your transparent PNG image over a different background image or texture, you’ll have to modify the image so that the opaque edges match the background. I’m hoping that by the time you read this, we’re no longer coding websites for IE6, but just in case, 24-bit transparency is only supported in IE7 and up. Other than IE6, file size is another reason to consider saving your PNGs as 8-bit. The 24-bit version of an image can be several times the size of its 8-bit cousin. Creative Image Treatments Once you’ve inserted your JPEG, PNG, or GIF image into your web page, you may still find yourself a bit underwhelmed by its presentation. By default, images that are placed on a web page using an HTML tag sit inline with the text that surrounds them. A hyperlinked image typically has a rather unattractive blue border. Not a very exciting default presentation, but that’s what CSS is there for. What if you want to give an image a frame like one you might use to display a picture on your wall? What if you want an image to have a border around it that makes it look like a Polaroid picture? Perhaps you want it to have corner tabs like the ones you’d use to stick an image in a photo album. In each of these cases, you have two options: apply your desired effects directly to the photo using image-editing software, or use CSS background images and borders to style the image within your web page. Using Images to Enhance Images Altering an image to add borders, edge effects, and transparency may seem like minimal hassle. It only takes a few minutes in Photoshop to give a photo the look you want. But problems can arise if you have to give every image on a website the same look. And what would happen if you had to add new images or change any of the existing pics? In either case, a task that would normally involve only a minor change to your HTML, plus a second or two to copy the new photo to the web server, might take half an hour or more. On top of that, the whole point of semantic markup is to separate style from content. An image in the content of a website is just that: a piece of content. With CSS turned off, the portfolio of graphic and web designer Wing Cheng 22 simply looks like a page full of images, as shown in Figure 5.31. 22 http://wingcheng.com/

Imagery 183 Figure 5.31. Wing Cheng’s portfolio with CSS turned off Now take a look at the site with CSS turned on in Figure 5.32. The style of Wing’s portfolio is fun, whimsical, and creative. The paper pages angle in and out to give the appearance that it’s a single 3D piece of paper that’s accordion-folded. Each of the folds below the “about” page you see in the screenshot contains a single portfolio item. There are several items for each of the categories, and the site ends with a contact form and then the back cover of the leather sketchbook.

  • Page 1:

    Summary of Contents Preface . . . .

  • Page 4 and 5:

    iv The Principles of Beautiful Web

  • Page 7 and 8:

    Table of Contents Preface . . . . .

  • Page 9 and 10:

    ix Color Scheme Designer 3 . . . .

  • Page 11:

    xi Creative Image Treatments . . .

  • Page 14 and 15:

    xiv bathroom with the work that we

  • Page 16 and 17:

    xvi Tips, Notes, and Warnings Hey,

  • Page 18 and 19:

    2 The Principles of Beautiful Web D

  • Page 20 and 21:

    4 The Principles of Beautiful Web D

  • Page 22 and 23:

    6 The Principles of Beautiful Web D

  • Page 24 and 25:

    8 The Principles of Beautiful Web D

  • Page 26 and 27:

    10 The Principles of Beautiful Web

  • Page 28 and 29:

    12 The Principles of Beautiful Web

  • Page 30 and 31:

    14 The Principles of Beautiful Web

  • Page 32 and 33:

    16 The Principles of Beautiful Web

  • Page 34 and 35:

    18 The Principles of Beautiful Web

  • Page 36 and 37:

    20 The Principles of Beautiful Web

  • Page 38 and 39:

    22 The Principles of Beautiful Web

  • Page 40 and 41:

    24 The Principles of Beautiful Web

  • Page 42 and 43:

    26 The Principles of Beautiful Web

  • Page 44 and 45:

    28 The Principles of Beautiful Web

  • Page 46 and 47:

    30 The Principles of Beautiful Web

  • Page 48 and 49:

    32 The Principles of Beautiful Web

  • Page 50 and 51:

    34 The Principles of Beautiful Web

  • Page 52 and 53:

    36 The Principles of Beautiful Web

  • Page 54 and 55:

    38 The Principles of Beautiful Web

  • Page 56 and 57:

    40 The Principles of Beautiful Web

  • Page 58 and 59:

    42 The Principles of Beautiful Web

  • Page 60 and 61:

    44 The Principles of Beautiful Web

  • Page 62 and 63:

    46 The Principles of Beautiful Web

  • Page 65 and 66:

    2 Chapter Color Whether you’re de

  • Page 67 and 68:

    Color 51 reason, it’s often used

  • Page 69 and 70:

    Color 53 Figure 2.5. Calming stones

  • Page 71 and 72:

    Color 55 Figure 2.7. These wind tur

  • Page 73 and 74:

    Color 57 Chromatic Value The measur

  • Page 75 and 76:

    Color 59 Figure 2.12. The tradition

  • Page 77 and 78:

    Color 61 thick that you’re unable

  • Page 79 and 80:

    Color 63 Another example of saturat

  • Page 81 and 82:

    Color 65 An Analogous Color Scheme

  • Page 83 and 84:

    Color 67 Figure 2.22. Blinksale’s

  • Page 85 and 86:

    Color 69 put off by the stark contr

  • Page 87 and 88:

    Color 71 Figure 2.27. Cross Cross C

  • Page 89 and 90:

    Color 73 Figure 2.30. The Bulls+Arr

  • Page 91 and 92:

    Color 75 Figure 2.34. The adventuro

  • Page 93 and 94:

    Color 77 Table 2.1. Counting from 1

  • Page 95 and 96:

    Color 79 Scheme Designer 3 works. U

  • Page 97 and 98:

    Color 81 Figure 2.39. Pictaculous C

  • Page 99 and 100:

    Color 83 Figure 2.41. A mood board

  • Page 101 and 102:

    3 Chapter Texture There are many we

  • Page 103 and 104:

    Texture 87 Figure 3.2. The A-Team b

  • Page 105 and 106:

    Texture 89 Figure 3.5. Geometric an

  • Page 107 and 108:

    Texture 91 Rounded Corners So we’

  • Page 109 and 110:

    Texture 93 Figure 3.10. Ithaca Even

  • Page 111 and 112:

    Texture 95 Figure 3.12. Speed Kids

  • Page 113 and 114:

    Texture 97 Figure 3.14. Perspective

  • Page 115 and 116:

    Texture 99 Figure 3.17. A clear and

  • Page 117 and 118:

    Texture 101 Although repetitious ba

  • Page 119 and 120:

    Texture 103 declaration background-

  • Page 121 and 122:

    Texture 105 Figure 3.25. Three repe

  • Page 123 and 124:

    Texture 107 Figure 3.27. Team Fanny

  • Page 125 and 126:

    Texture 109 said, just because you

  • Page 127 and 128:

    Texture 111 This site certainly fal

  • Page 129 and 130:

    Texture 113 Another notable example

  • Page 131 and 132:

    Texture 115 Figure 3.36. Minimalism

  • Page 133:

    Texture 117 Figure 3.38. The site d

  • Page 136 and 137:

    120 The Principles of Beautiful Web

  • Page 138 and 139:

    122 The Principles of Beautiful Web

  • Page 140 and 141:

    124 The Principles of Beautiful Web

  • Page 142 and 143:

    126 The Principles of Beautiful Web

  • Page 144 and 145:

    128 The Principles of Beautiful Web

  • Page 146 and 147:

    130 The Principles of Beautiful Web

  • Page 148 and 149: 132 The Principles of Beautiful Web
  • Page 150 and 151: 134 The Principles of Beautiful Web
  • Page 152 and 153: 136 The Principles of Beautiful Web
  • Page 154 and 155: 138 The Principles of Beautiful Web
  • Page 156 and 157: 140 The Principles of Beautiful Web
  • Page 158 and 159: 142 The Principles of Beautiful Web
  • Page 160 and 161: 144 The Principles of Beautiful Web
  • Page 162 and 163: 146 The Principles of Beautiful Web
  • Page 164 and 165: 148 The Principles of Beautiful Web
  • Page 166 and 167: 150 The Principles of Beautiful Web
  • Page 168 and 169: 152 The Principles of Beautiful Web
  • Page 170 and 171: 154 The Principles of Beautiful Web
  • Page 172 and 173: 156 The Principles of Beautiful Web
  • Page 174 and 175: 158 The Principles of Beautiful Web
  • Page 176 and 177: 160 The Principles of Beautiful Web
  • Page 178 and 179: 162 The Principles of Beautiful Web
  • Page 180 and 181: 164 The Principles of Beautiful Web
  • Page 182 and 183: 166 The Principles of Beautiful Web
  • Page 184 and 185: 168 The Principles of Beautiful Web
  • Page 186 and 187: 170 The Principles of Beautiful Web
  • Page 188 and 189: 172 The Principles of Beautiful Web
  • Page 190 and 191: 174 The Principles of Beautiful Web
  • Page 192 and 193: 176 The Principles of Beautiful Web
  • Page 194 and 195: 178 The Principles of Beautiful Web
  • Page 196 and 197: 180 The Principles of Beautiful Web
  • Page 200 and 201: 184 The Principles of Beautiful Web
  • Page 202 and 203: 186 The Principles of Beautiful Web
  • Page 204 and 205: 188 The Principles of Beautiful Web
  • Page 206: 190 The Principles of Beautiful Web
Layout and Design - In Easy Steps
Boot Camp
QUICK START GUIDE FOR CLUB WEBSITES
How to build a department web site (starter pack) - University of ...
30 ways to create amazing web experiences on tablets
Download PDF - Shop.org
to download our handy prepress guide - Peel Graphics Inc.
Elements and principles of design - MichaelAldana.com
Marketers_Guide_to_UX_eBook_Brafton
designing-for-credibility
Responsive Email Design Guide - e-Dialog
Structure, Content and the Development process by Deirdre Kiorgaard
academic studies by european standards / module catalogue