科技感界面主要的特点是：偏深暗色的背景，机甲风格几何图形，光感效果，全息投影的虚幻感。其中机甲风格几何图形，光感效果，利用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;
}

附录