文章目录

全息效果卡片可分成四层制作:深色渐变背景、光影、带彩色纹理的卡片,以及最上层文字。先完成卡片形状,再把纹理用蒙版限定在卡片内部。这里的“全息”指视觉风格,不是真正的光学全息成像;按下面十一段步骤,可在Pixso 设计画布中完成一张可继续调整的卡片。

全息效果卡片怎么做?渐变、纹理与蒙版

1. 怎样绘制全息效果卡片

先观察上方成品的色彩与层次。制作时先让背景和卡片能够区分,再加入椭圆、星形与贴纸,不必一次把所有装饰都做完。

第一步:登录Pixso账号,建立一个新的Pixso文件。

建立新的Pixso文件

第二步:使用画板工具,快捷键输入【F】新建一个尺寸为1440x900的空白画板,在右侧属性面板的填充颜色处,修改填充颜色为线性渐变模式,渐变色值为#4F4983、透明度100%与色值#A91EB9、透明度100%。

新建空白画板

第三步:使用矩形工具,快捷键为【R】,创建一个尺寸为1325x743的矩形,并设置圆角为24,填充颜色模式为径向渐变,渐变色值为#31184F、透明度100%与色值#1B1125、透明度100%。

使用矩形工具

第四步:使用圆形工具,快捷键为【O】,绘制阴影尺寸为1161x217与高光尺寸为624x429,如下图所示。设置高光填充色值为#7228EA、透明度100%,效果为高斯模糊且模糊值为300。设置阴影填充色值为#0B030E、透明度100%,效果为高斯模糊,模糊值为200。

使用圆形工具示例

第五步:使用矩形工具,快捷键为【R】,绘制一个尺寸为372x224的矩形,设置圆角为18,旋转角度为-168度,如下图所示。

使用矩形工具

第六步:沿用矩形工具,绘制一个287×224的矩形,填充渐变色#5B95D7与#AA43BC,透明度均为100%。它提供卡片内的色彩层,与第四步用于背景光影的圆形不是同一对象。

绘制矩形

第七步:使用圆形工具,快捷键为【O】,绘制一个136×136的圆,删除填充色,设置描边为120,描边样式为虚线,虚线参数为(1)(2),然后使用导出,导出2倍图素材。

导出2倍图素材

第八步:将第七步导出的2倍图素材拖回Pixso,旋转至合适角度,放到第五步的卡片上,再用卡片形状建立蒙版,裁掉超出卡片的部分。保留一份未导出的矢量纹理作为母版,之后要修改虚线密度时,回到母版修改后再导出。

纹理为何要先导出,再放回卡片

原例把密集虚线纹理导成图片,方便把它作为一个整体旋转与裁切。代价是导回后的图片不能像原矢量圆那样直接修改虚线参数;因此不要删掉第七步的源图层。若后续卡片会放大很多,应先确定最终展示尺寸,再决定导出倍率,不把“2倍图”理解成任何尺寸都不会模糊。

蒙版只应约束纹理与卡片装饰,不应把标题也一起裁掉。可以临时隐藏背景,确认卡片外部没有残留纹理;再显示背景,看四个角是否露出色块。若裁切区域偏移,先核对蒙版形状的位置及层级,不要急着缩小整张图片。

使用蒙版工具

第九步:使用圆形工具与星形工具绘制椭圆环与星形。椭圆尺寸为592×204,旋转-24度,关闭填充,设置2像素描边,并把描边设为线性渐变:#E422BA与#5E4ABB,透明度均为100%。这样得到细线环,不会用实心椭圆遮住卡片。星形尺寸为45×45,星角为4,旋转-7度,填充#F154BB,透明度100%。

绘制一个椭圆与星形

第十步:绘制146×146的圆形贴纸,采用径向渐变,沿用#A344C3、#9C82E5、#6642E5、#504EBB、#EA58B5这组色值,透明度为100%。再复制第七步生成的纹理图片,通过圆形蒙版放进贴纸。贴纸与卡片各用自己的蒙版,便于分别调整角度与位置。

圆形贴纸

第十一步:使用文字工具,快捷键为【T】,添加文字信息,如下图所示。

装饰可以复杂,标题区域要简单

把标题放上去后,先看它经过最亮纹理的部分是否仍清楚。必要时移动纹理、降低局部不透明度,或把标题放到较平静的深色区域;不要用更重的描边补救所有遮挡。编号、小标签与正文说明分别承担不同信息,至少应在最终展示尺寸下看得清。

最后复制一张无装饰版本:关闭星形、椭圆和贴纸,只保留主卡片与文字。若这时主题反而更清楚,逐个恢复装饰并判断它是否真的有作用。用于会员卡或产品卡时,名称和关键权益比纹理细节更重要;用于海报时则可以给主视觉更多空间。

添加文字信息

2. 用Pixso绘制全息效果卡片

全息卡片的色彩可以从一组已有调色板开始,但应在最终背景上重新组合。可从下方的纯色和渐变调色板中选出主色与辅助色,再调整亮度和覆盖面积;复制资源前查看对应资源页的使用说明。

纯色和渐变调色板

纯色和渐变调色板

制作多张系列卡片时,可以把共同的尺寸、圆角、标题和标签整理为可复用结构,再分别替换每张卡片的纹理与内容。不要把所有卡片当作一张位图铺开,否则后续改标题或颜色会失去便利。

除了本例的渐变与纹理叠加,矢量网格也可用于绘制带闭合色块的装饰。下图展示另一种绘图能力;它不是完成本例全息纹理的必需步骤,复杂纹理与简单几何图形可以采用不同做法。

Pixso矢量网格

3. 新一代协作设计工具Pixso的特点

团队协作:团队成员面对一个复杂的设计项目,不再需要等主视觉完成后再进行子页面设计。在 Pixso 完全可以多人云端协作设计,实时同步字号、边框、颜色等各种细节。

设计工具:自带组件变体、自动布局等专业设计工具,支持UI/UX设计和原型播放,一体化完成高保真产品设计。

私有化部署:企业如有内网环境与权限管理要求,应结合部署方案、运维条件和安全要求评估。它属于团队使用环境,不改变本例卡片的绘制步骤,也不能单凭部署方式保证没有数据泄露风险。

设计资源:不仅可以直接拖拽使用Pixso自带的设计资源库,还可以将项目中常用的图标、自制组件一键保存,共享至团队资源库,省去大量重复劳动,形成统一视觉规范。