当前位置: 首页 >> APP设计教程_APPUI设计教程_UI设计教程_网页设计师加油站 >> 阅读正文

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页面是个很细致的活,还是那句话,这里只说细节,阴影要小一点、颜色要浅一点,另外这里面其实还有一个问题,和前面讲的边框一样,如果图片是的投影颜色与图片颜色(或背景颜色)相同,效果会很尴尬,所以要边框一样给图片加一个间隔距离。
理论上讲,将一个没有质感的元素进行投影或加阴影是不现实的!前面讲的一些阴影效果,元素本身没有任何质感。
关于深色背景下的质感,阴影和投影是不现实的,所以只能用发光或光线质感来实现。

本文标题:25学堂原创教程-Web网页设计技巧经验之谈(一)

本文地址:http://www.25xt.com/allcode/689.html

本文关键词: ,

除非注明,本站文章均为原创或编译,转载请注明出处和原文链接,转载同时请务必保留原网站网址。