快速制作凹陷直线

UI / UI设计教程 /      

uimaker
UI设计师 / 江苏 南京

来源:未知   作者:ui制造者

关键词

 先来看看效果图:

刚刚我做界面需要制作一条带点凹陷在页面的直线,努力经过半小时的研究。总结出其中的规律!有好方法当然要分享给大家啦。希望能对大家有帮助!


这样的凹陷的的直线!一般都是由上下两条一像素直线组合起来!然后通过颜色相差!差生凹陷效果,估计有很多人对这个颜色选定还存一定的不好把握!接下来我告诉大家一个巧妙选定颜色值的办法


当你要在一个颜色上做凹陷一条直线(比如说我现在在如下图)背景颜色值 #555555
 
使用 单行选框工具 划出一条直线 (此线是两条线位置处上面)

新建一个图层 然后为这一个像素的填充颜色 颜色值的选着规律为:在背景色的基础上亮度减去 20% 左右 
#555555  
亮度减去20% 

确定颜色值 用油漆桶工具把选着好的颜色填充前面做的单行选区 

然后把 单行选框下移一个像素!新建一个图层! 做下面的哪条直线
下面线的颜色值选区 
在#555555底色的基础上 亮度增加 20% 左右


然后把选着好的颜色值填充到选区

然后效果 如下:



总结:一定要注意好!两条一像素的直线。处于上面直线的颜色值要比背景色低20%左右的亮度   处于下面的直线的颜色值要比背景色高20%左右的亮度。
  
大伙都去试试这个办法吧!如果觉得实用!多顶下!谢谢!

然后说填充的快捷键吧!为新学员加下油  
填充前景色快捷键 alt+delete   填充背景色ctrl+delete

 收藏