轩枫阁

前言

一图胜千言，有配图的文章显得更容易理解更有兴趣去阅读而不觉得枯燥，所以会经常给文章加上配图。而有些操作是需要gif动态图像去表意的，如实用的sublime插件集合 这篇文章中的配图就都是动态的，这里推荐一些gif录制、截图、录像软件。

1. GifChm_CHS

简介：gif图像录制

推荐指数：★★★★★

下载地址：http://pan.baidu.com/s/1qWnZAFi

功能：可录制Gif图像、捕获光标、可编辑、可导出成AVI视频等

特点：使用简单，无需安装，必推荐 查看全文

前言

最近很流行图片高斯模糊处理，让网站的图片看起来有高大上的效果。应用点：如网站Banner、大气背景图等。模糊背景（blurred backgrounds）是一个很常见的设计效果，也被称为背景虚化，在网页和App的设计中屡见不鲜。虚化的界面设计直观的给人一种干净自然的视觉感受，因此，模糊背景的基调会使整个界面看起来更柔美。合理运用虚化背景可以将界面效果提高一个档次。

案例素材

背景虚化案例

优秀案例参考：http://www.uisdc.com/blurred-background-website-design

国外优秀案例：http://www.onextrapixel.com/2013/12/06/effective-use-of-blurred-images-in-web-design/

透明效果网站：http://www.uisdc.com/transparency-website-design

背景图片资源

模糊图片下载：http://vdisk.weibo.com/s/dt23BkiXHbFmp

150+背景素材：http://vdisk.weibo.com/s/aj4Q1htdUrYaV

模糊景观背景：http://vdisk.weibo.com/s/aj4Q1hteoqwVO

模糊材质纹理：http://pepsized.com/100-free-blurry-textures/

实现方案

方案一：图片高斯模糊

直接利用PS处理图片，使图片高斯模糊，调节参数可达到不同效果。 查看全文

不知道大家平时玩转空间、微博等应用的时候，有没有注意到加载图片的时候，图片是有个从模糊到清晰的过程。

图片加载时由模糊到清晰，道理很简单，实现也很容易。对用户体验上的提升也很大。所以现在被广泛采用。之前还以为这个需要用js来实现，但是证明是平时没注意，993回答了这个问题，下面来介绍下：原理很简单，就是大家在ps中保存为web所用格式图片的时候，选择对应的设置就行。

查看全文

现在切出来的很多设计图都是PNG的，而PNG透明的图在IE6下会出现灰底的现象，这会让人很头疼，看了W3cfuns提出的8中解决方案（链接），挺好的，但是稍微分析了下，比较完美的是下面的2种方法。

解决IE6png的方法主要有滤镜、纯CSS、原生js、jQuery或者引入插件等方法。但是以上方法的缺点很明显，要么是不支持IMG标签的，或不支持background，不支持CSS Sprite，不支持hover的种种问题。而且有的写法也很麻烦，导致代码很复杂，然后我觉得以下两种方法是不错的。 查看全文

前言

从某种程度上说，判断一个网页设计师是否优秀，可以从其在WEB开发（或网页设计）中是否合理的采用各种图片格式得出结论。事实上，或许所有人都知道图片存在GIF,JPG和PNG等格式，但并非所有人都知道它们之间的具体区别和使用技巧。

接下来，代码吾爱将给大家介绍：WEB开发中几种最受欢迎图片格式的前世今生以及如何正确的使用它们。

1.JPEG

JPEG格式是一种大小与质量相平衡的压缩图片格式。通俗一点讲，就是：高的压缩比=低的图片质量=小的文件大小。反之，低的压缩比=高的图片质量=大的文件大小。由于JPEG文件无法保持100 ％的原始图像的像素数据，所以它不被认为是一种无损图像格式。

用途

由于这种极其敏感的平衡特性，JPEG非常适合被应用在那些允许轻微失真的像素色彩丰富的图片（照片）场合。反之，JPEG格式图片并不适合做简单色彩（色调少）的图片，比如LOGO，各种小图标（ICONS）。

2.GIF

GIF格式，是为使图片能够应用在在线（online）应用程序上所特别开发的图片格式。Gif，有时也被成为“Giff”，是一种无损，8位图片格式。“无损”是指100%的保持原始图片的像素数据信息。专业名词“8位”是指，所能表现的颜色深度——一个8位图像仅最多只能支持256种不同颜色（一个多余256种颜色的图片若用gif图片保存会出现失真）。 查看全文