边框做的事比看上去多。它把图片与周围分开——当一张边缘发暗的照片放在深色页面上、直接融进背景时,这一点尤其要紧。它给一组图片统一的呈现方式,让一排产品图看起来是精心安排而不是随手凑齐的。而宽裕的白边是最古老的呈现技法:画廊的卡纸做的正是这件事,它让一幅画读起来像一件被认真对待的物品。
边框是通过扩展画布而非裁切来添加的,因此图片的任何部分都不会丢失。给 1000 × 800 的照片加 16 像素边框,得到的是 1032 × 832 的文件,原图完好地居于正中。
边框在浏览器内本地绘制,图片不会为了加框而被上传。
| 图片宽度 | 建议边框 | 效果 |
|---|---|---|
| 小于 600 px | 8 px | 干净的边缘,不占画面 |
| 800~1200 px | 16 px | 清楚可见又不张扬 |
| 1500~2500 px | 32 px | 比例上相当于小图上的 16 px |
| 大于 3000 px | 64 px | 这个尺寸下唯一还读得出是边框的粗细 |
边框粗细是绝对值而不是比例,因此同一设置在缩略图和高分辨率照片上看起来完全不同。若要让一组不同尺寸的图片呈现一致,请先统一到同一宽度再加边框。
白色作为默认是有道理的:它模仿画廊卡纸,几乎能把图片从任何背景上分离出来,也不会与内容争抢。黑色衬明亮、高调的图片很好,给照片一种电影般的分量,但在深色页面上会消失。
品牌色能把一组图片串成整体,用在产品网格和社交贴文上很有价值。但请把粗细控制住——大面积的高饱和色会把视线从它本该衬托的画面上抢走。
不会。画布被扩展、边框画在外侧,原图完整保留在正中。输出尺寸会增加两倍边框粗细。
选项是 8、16、32 和 64 像素。需要别的粗细可以应用两次:32 之后再 32 就是 64,换个颜色还能做出双层画框。
可以。取色器接受任意值,品牌色和自定义色调都能用。
只有尺寸相同时才一样。粗细是绝对像素,因此 16 px 在 600 px 的图上很显眼,在 4000 px 的图上几乎看不见。想要成套一致,请先统一到同一宽度。
PNG 输出会保留 alpha 通道,边框本身以纯色绘制。请注意边框位于可见内容的四周,而不是透明区域的背后。
不会。画布扩展和填色都在浏览器内完成。