科技感界面主要的特点是:偏深暗色的背景,机甲风格几何图形,光感效果,全息投影的虚幻感。其中机甲风格几何图形,光感效果,利用PS能简单地制作出来。
 前期可以去设计类网站找几个喜欢的设计稿来模仿学习如优设网Behance,Behance可能需要翻墙。

颜色选定

 首先要挑几个主色与辅助色定下来,在主色的基础上调整其透明度、亮度来衍生出一系列颜色形成整体风格。比如说挑深暗蓝与亮浅蓝作为主色,辅助色包含一些字体颜色(偏白、灰)、正常用的绿色、预警用的橙黄、亮红等等。

制作六角形图标

 六角形图标很符合机甲风格,首先去iconfont 阿里巴巴图标库下个图标,然后再利用PS套一个六角形外壳,如视频操作所示:

 注意导出png格式的文件,这样图片才有透明度,CSS上可以这样配置:

1
2
3
4
5
6
.icon{
background-image: url('./list-icon.png');
background-size: contain;
height: 5em;
width: 5em;
}

光感效果

 光感效果(内发光,外发光,点高光,渐变色)也是重要效果,也是在混合选项里就可以调出来。这些效果除了点高光在CSS里做比较烦恼些,其它都很容易做出来。PS里点高光可以使用画笔画一点,调整尺寸压平,放到边框上,就能做出点高光效果。一般PS里只放一个比较透明的底色,而内发光,外发光,渐变色则自行利用CSS来控制。
 CSS中内发光:box-shadow: 0px 0px 16px #00ffff96 inset;

利用CSS实现响应式

 要想将背景图片变成响应式,算出图片的高宽比,比如说我绘制了一张480*360的图片,高宽比为3:4,那么使用时CSS保证其是3:4就能保证利用CSS实现图片响应式缩放,代码如下:

1
2
3
4
5
6
7
.board{
width: 20vw;
height: 15vw;
background-image: url('/static/img//board.png');
background-repeat: no-repeat;
background-size: cover;
}

附录