One of the first hurdles in learning Web design is understanding the use of graphics. The greatest of programmers can come up against the graphics barrier and sometimes just fall flat. Even professional desktop publishers when faced with a "design for the Web" task, can make critical errors.

网站设计中，第一个需要解决的问题就是图片问题。程序设计师经常会碰到图片问题，即使是专业的设计者在遇到这个问题时，也会犯错误。

1. Size Matters
1. 图片尺寸

Making your featured graphics too large is a web design no-no. Yes, a graphic generally looks better when it's big, but consider the costs. If a graphic is too large, text cannot flow around it gracefully. Most reading widths should be in the area of 480 to 600 pixels across, and if you have a photo you want to mix into an article that's 400 pixels wide, guess what? You'll either squeeze the text into an 80-pixel area (less Hspace), or just have to make the graphic take it's own row! Plus larger graphics as we all know take awhile to download. Let's not forget about those poor blokes who are still on dial-up! My rule-of-thumb is: experiment with the image and try it at various sizes... don't fall in love with the larger version! See what it looks like at 200 pixels across. Give yourself a moment and get used to the image 50% reduced. Also... never change image sizes of a file after it has been made into a jpeg. Make your edits and changes first in a hi-res format such as png, psd, or bmp, being careful to change width and height proportionally. Then and only then, optimize for the Web. Also, to make the text flow around the image, use align="left" or align="right" and be sure to add Vspace and Hspace of 6 to 20 pixels.

网站中图片尺寸不能太大。大尺寸的图片确实能吸引用户，但是你需要考虑后果。如果图片尺寸过大，文本就不能合理安排。阅读宽度应该设置在480到600像素，如果照片的宽度为400像素，那文本如何安排呢？或者把文本压缩为80像素，或者图片自成一行。大图片会浪费很多下载时间，不要忘记还有许多电话拨号上网用户。我的经验是：对不同尺寸的图片进行测试，不要执著于大尺寸图片。200像素宽的图片效果会怎样呢？考虑一下宽度减少50%会怎么样。同时注意，保存为jpeg图片之后，不要改变图片尺寸。如果是png、psd或者bmp格式的图片，首先进行编辑、修改，然后进行优化，使图片文字合理搭配。利用align="left" 或者align="right"；Vspace以及Hspace增加6到20像素。

2. Gif or Jpeg?
2. gif格式还是Jpeg格式

In a nutshell, gif files love flat colors, and stripes are ok too if they run horizontally. You can make a 2-tone image that's huge -- 1600 by 1200, and save it as a gif with just 2 or 4 colors, and have a file that's only 10k in size! For example, take a look at Lynda.com - that background image is 1280 by 1024 in size, and weighs in at only 15k. Why? Because it only uses a total of 4 colors! Gif is a great "bang for the buck" format, but photographic images look like something out of Blair Witch Project when reduced to 16 or fewer colors. You'll need 128, even 256 colors, and still gifs will pixelate a photographic image. No sweat... Jpegs excel at making these images look great while keeping the file size low. Gifs therefore, are a sneaky way to create great Web graphics of fewer colors, with incredibly low file sizes. And by using a Web Color Palette you can achieve exact color matches... which comes in handy for matching up with a specific background color. Jpegs just won't match exactly and your image will leave tell-tale square borders around that jpeg you hoped would match your background color.

简单地说，gif图片喜欢单调的颜色，如果颜色水平放置安排，条纹会很合理。如果图片为1600x1200，你可以保存为gif格式，只需要2种或4种颜色，占用10k的空间。比如说，Lynda.com中的背景图片尺寸为1280x1024，但只占用15k的空间，为什么？因为它只利用了4种颜色。Gif格式虽然尺寸小，但并不适用于摄影图片，因为当摄影图片颜色减少到16或者更少时，图片质量会很差。当然，jpeg格式可以在小尺寸的状态下，保持图片的质量，当gif却只能减少图片颜色数量。通过使用网站调色板，你可以合理搭配颜色，比如说与背景颜色的搭配。然而，jpeg图片与背景颜色搭配时，四周会留下边距。

3. Animation How To?
3. 动态图片

Ever hear of an animated jpeg? Nope. Using several frames of gifs that all use, say 2, 4, or 8 colors, you can piece together a fairly long animated gif while keeping the file size under control. But how is it actually accomplished? Well that depends on the program you use, but the principle is the same. In Macromedia Fireworks, a quick way to make an animated gif is to "duplicate frame" about 8 times, and as you go to each successive frame, you can alter the image slightly. In Adobe Image Ready a lot can be accomplished quickly by going frame to frame and making various layers visible, invisible, or by changing the alpha settings, adding layer effects, and more. But before you go crazy creating things remember... your final image will be equal in size to approximately the size of the original image (e.g. frame 1) times the number of frames. So a 6k image seems small enough until you multiply that by 9 frames, and suddenly you're at 54k! That's way too big! Your final HTML page in total should be 54k or less... are you going to double that just to add in 1 little animated gif? Rather, use the 4, 6, or 8 color method, create yourself a little 1k image and then go to town animating that! You could have 16 frames and still be small enough.

听说过动态的jpeg图片吗？利用2种、4种或者8种颜色的gif图片，你可以拼凑成一张相当长的gif图片。但怎么完成呢？这要根据你使用的程序来定，但规则是一样的。在Macromedia Fireworks中，一种快速方法就是8次复制这种结构，制成动态gif图片，在复制框架时，你可以稍微修改图片 。在Adobe Image Ready中，你可以通过层层框架，制作成可见或隐藏的各层，或者改变alpha设置，增加层次效果等等方法，达到理想效果。但是制作动画图片之前，你必须了解复制几次格式，图片的尺寸就是这种格式的几倍，比如说，6倍的图片看起来很小，但复制九次以后，尺寸就变为54k，是不是太大了？HTML页面的尺寸都不应该超过54k，你还想制作动画gif图片吗？但是，你可以利用4种、6种或者8种颜色的图片，制作成不大于1k的图片，然后再制作动画图片，这样即使复制16次，尺寸仍然很小。

适于打印的网页设计 网站设计应该灵活

评论 (0) All