网站建设
移动互联网
品牌设计
创新应用
新闻动态
网站百科

为图片加框:几种常用的作法与选择

时间:2018-06-22 09:31:12 来源:追天 类型:网站百科
字号:   

网页设计时总是有许多考虑,而不得不为图片元素加上框线处理。商业摄影的图片常常会有全白的背景出现;或是大面积留白的插画图片,若是没有框线,实在很难看到图片的边界在哪里,在网页上与文字一起编排的时候容易造成困扰。

为图片加上框线有几种常见的作法,这边先以白底网页、配上浅色及深色的图片作为范例讨论:

1. 深色线条:最简单的作法,不论图片内容为何,都可以很快速的将图片与白色背景分隔开来,但如果图片背景为浅色时则因为对比过度强烈而得到反效果:

2. 浅色线条:为了不让线框过度显眼而抢去图片主题,因此使用与白色接近的灰色线条作为框线,可以很适合的适应各种图片。Facebook 采用的即为此种作法,在图片内部加上1 像素、20% 透明度的黑色线条,因此线条本身还会带有图片本身的色彩。

3. 加上阴影:为图片加上阴影可以快速的入图片跳脱出来而让平面的设计产生层次的立体感,但是在图片没有任何框线的时候加上阴影的效果并不是非常好。

4. 在图片与线框之间加上间距:兼顾视觉效果与实用性的作法,可以很明确的将图片与背景其他元素分别开来:

5. 在加上间距的线框外加上阴影:有点类似相纸的效果,仿真风格的设计常用的作法

当然,在黑色网页上想要加上阴影是不切实际的作法,因此改为亮色的阴影、也就是光晕,这种较为强烈的视觉效果通常是用在滑鼠滑上等互动效果较为适合。

以上只是举例网站设计的几种基本作法,当然像是框线还可以有各种色彩、粗细,间距也有不同宽度、切圆角等等的作法。


上一条: 如何使用论坛做产品推广  下一条: 网站设计中巧用动画怎么样

400-700-4979

无论您在哪里,尚品都愿意为您提供高价值服务! 请选择您方便的咨询方式:

0.020569s