25学堂原创教程-Web网页设计技巧经验之谈（一）

从10月20日期，25学堂将会不定期推出相关网页设计，ui设计，APP界面设计系列的设计技巧课程。我们会以图文并茂，或视频教学的方式展示给网页设计者。对于网页设计初学者来说，是一个快速走上设计之路的便捷之路，也是前辈留下的设计宝典。对于我们这些从事设计的老鸟来说，也是一次温故而知新的设计回味。

在此，25学堂的《Web网页设计技巧经验之谈》第一节课正式上课了。

1、如何处理ps设计过程中一些技巧。

首先掌握好ps的设计快捷键。

选择功能 

  全部选取：【Ctrl】+【A】

  取消选择：【Ctrl】+【D】

  重新选择：【Ctrl】+【Shift】+【D】

  羽化选择：【Ctrl】+【Alt】+【D】

  反向选择：【Ctrl】+【Shift】+【I】  撤销选择：【Ctrl】+【Z】

  路径变选区 数字键盘的：【Enter】

  载入选区： 【Ctrl】+点按图层、路径、通道面板中的缩约图

图层混合模式 

  循环选择混合模式 ：【Alt】+【-】或【+】

  正常 ：【Ctrl】+【Alt】+【N】

  阈值（位图模式）： 【Ctrl】+【Alt】+【L】

  溶解 ：【Ctrl】+【Alt】+【I】

  背后 ：【Ctrl】+【Alt】+【Q】

  清除 ：【Ctrl】+【Alt】+【R】

  正片叠底： 【Ctrl】+【Alt】+【M】 

  屏幕： 【Ctrl】+【Alt】+【S】

  叠加： 【Ctrl】+【Alt】+【O】

  柔光： 【Ctrl】+【Alt】+【F】

  强光：【Ctrl】+【Alt】+【H】

  颜色减淡 ：【Ctrl】+【Alt】+【D】

  颜色加深 ：【Ctrl】+【Alt】+【B】

  变暗： 【Ctrl】+【Alt】+【K】

  变亮：【Ctrl】+【Alt】+【G】

  差值： 【Ctrl】+【Alt】+【E】

  排除：【Ctrl】+【Alt】+【X】

  色相： 【Ctrl】+【Alt】+【U】

  饱和度： 【Ctrl】+【Alt】+【T】

  颜色： 【Ctrl】+【Alt】+【C】

  光度： 【Ctrl】+【Alt】+【Y】

  复制当前图层：【Ctrl】+【J】

色阶：【Ctrl】+【L】  曲线：【Ctrl】+【M】

  强行关闭当前话框：【Ctrl】+【Alt】+【W】

  粘贴：【Ctrl】+【Alt】+【V】

  无限返回上一步：【Ctrl】+【Alt】+【Z】

2、ps毛边的处理方式

(1)调整后的毛边

当对一个位图的大小进行调整后，正常情况下会留下1px的毛边（如果你注意的话），边界会变得模糊，如果继续调整模糊度会加大，这个问题太不起眼了，以至于你无法用肉眼来理绘，我们先用商品图片举例子：

在这里，我们应该把图放大合适的倍数，把出现透明的区域删除掉或补齐。

再者，不能放大图片，最好重新画质图片，因为放大就会出现锯齿。

（2)关于边框和背景

有些区块需要用边框装饰点缀得醒目一点,有文字区块图片区块等,文字区块加边框的建议使用同基色的背景色填充区块,不然内容会很空洞，图片加边框的话,如果是CSS定义的边框最好是加上间隔距离,因为图片不是固定的,所以可能会出现底色与边框不协调,严重的会造成毛边效果。

注意一：白色背景下，背景不要比边框太深，再努力的调整区块内容的颜色能与背景融合也于事无补，边框成了毛边。

注意二：在深色背景下，才使用加亮边框。或是透明背景等设置。

注意三：关于图片边框，图片本身就有背景，而且色彩是多样的，在给图片加边框时也最好是与图片背景同一个基色的背景，而且最好是取与图片最边上的色彩的深基色，如果是边上有多种颜色，取最多的那颜色。

注意四：在多个图片混排的时候，图片边框的色彩就不协调了，如果在图片是不确定的情况下，加边框时最好是给图片与边框之间加上边框距。白色为底。

注意五：在看看在深色背景下的效果，深色背景下可以有两种方案，一是去掉外框，以白色间距边框，二是加亮外框，留出与背景相同颜色的间距。

（3)关于边距与对齐

设计师寻找灵感时，偶尔会随意、自由的拖拉摆放区块、填色、绘制等，直到满意才会停下，在这个过程中会出现有与“经验”挂钩的细小漏洞。

（4)关于阴影与质感：

在设计点缀版面时需要有深度和3D质感的时候，可能就会用到投影、阴影、光线感等效果。但web设计和平面广告不同，太强、太硬的质感只会让页面显得粗糙，web页面是个很细致的活，还是那句话，这里只说细节，阴影要小一点、颜色要浅一点,另外这里面其实还有一个问题，和前面讲的边框一样，如果图片是的投影颜色与图片颜色（或背景颜色）相同，效果会很尴尬，所以要边框一样给图片加一个间隔距离。

理论上讲，将一个没有质感的元素进行投影或加阴影是不现实的！前面讲的一些阴影效果，元素本身没有任何质感。

关于深色背景下的质感，阴影和投影是不现实的，所以只能用发光或光线质感来实现。