PS制作科技感界面
条评论 科技感界面主要的特点是:偏深暗色的背景,机甲风格几何图形,光感效果,全息投影的虚幻感。其中机甲风格几何图形,光感效果,利用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 | .board{ |