猫史档案馆


【教程】教你绘制精美的渐变色UI(1)

用户:Ys蛊惑茶Ys蛊惑茶查看:117 回复:124 评论:117 创建时间:2022-11-16T18:01:16


先来看一张图片center_image没错,这是大佬AcMax#的作品—百万挑战2的界面,很炫酷

渐变色UI有很多优点,比如赏心悦目,让作品更养(晃)眼

那你知不知道怎样画?

这次蛊惑茶要教大家绘制精美的渐变色UI!

现在浏览器里搜PS,点这个center_image

 

注册一下就可以用了,是免费的

点开后,界面长这样center_image

点击创建文件,来到一个选择题center_image

center_image

选择一个尺寸,开始画画~(这里用Desktop做示范)

看到页面左边的栏了吗,从上往下依次是

尺寸,图形,画笔,文字,剪切,模板,插件center_image

 

单击“图形”按钮,点击“矩形”,按住右键拖出图形center_image

点击这个“插件”按钮center_image

center_image

输入“渐变色”,然后按下出现的按钮(如上)center_image

就会出现这样的情况,点击一下刚刚创建的矩形,再选一种颜色,就NICE  

最后别忘了导出欧~

啊对了,状态栏上部有一个“圆角”,调整数值可以做出圆角矩形

center_image

不过这远远不够~,再来看,这时状态栏,在界面右侧center_image

上面有多种操作~这里只讲颜色啦center_image要是渐变色都不合适怎么办?不是凉拌啦,点击这个色块center_image

看见了吗,可以自己弄渐变色!点击上方色带上的小球,就可以改颜色啦,如果意外发现自己填的颜色很好看,可以点左下键的“+”收藏

再讲一下导入图片吧,方法和渐变色差不多,在“插件”里搜索“导入图片”就行啦,在“模糊”里调一下,可以做成这样center_image

 

虽然好看,但太散了,像一团光,放在作品里也不好看center_image

这时,可以拐个弯,做出如上的果冻效果center_image

比如,创建一个比画板大的矩形,调好颜色和模糊,再把页面设置成圆角,就做出了“神散形不散”的果冻效果

PS:有时拐个弯有意想不到的效果!

可是,AcMax#作品右上角的“活动”按钮怎么那么多颜色?

别着急,看下面(敲黑板,划重点)

center_image

用鼠标右键单击色带,可创建一个新渐变色点,就能做出漂亮的彩虹效果啦

这节课先讲到这儿,以后有时间再讲一节

在回帖里交作业~


回复

上一页1 页 / 共 5下一页
Ys蛊惑茶Ys蛊惑茶

学废了嘛?

点赞0


评论


AcetobacterAcetobacter

center_image

点赞1


评论


协作专业户协作专业户

az

 

点赞0


评论


蒽好蒽好

废了

点赞0


评论


初夏晴雨初夏晴雨

即时设计的UI渐变色的确不错的!

点赞0


评论


星野残翼星野残翼

废了

点赞0


评论


PayCoPayCo

为什么不用XD...

点赞0


评论


RightAboveChilamRightAboveChilam

https://kitten4.codemao.cn/?invite_code=GTRW3S喵:GTRW3S我在编程猫发起了一个协作项目,点击链接即可加入一起创作!

点赞0


评论


春天的信鸽lsx春天的信鸽lsx

ddd

点赞0


评论


来自远方的panda来自远方的panda

center_image

不谢emotion_doge

点赞0


评论


Ys蛊惑茶Ys蛊惑茶

抱歉,创建图形时是按住左键,打错了

点赞2


评论


暮柳春暮柳春

能麻烦给链接吗,找不到QvQ

点赞0


评论


橘络byaf橘络byaf

不行他总是闪退

点赞0


评论


内涵本涵内涵本涵

这不是即时设计吗?????!!

点赞0


评论


一朵清云一朵清云

这是即时设计吧

点赞0


评论


CapZenithCapZenith

我一直叫它XD。。。

点赞0


评论


永恒跳动的红色火焰永恒跳动的红色火焰

这好东西)拿来把你)

点赞0


评论


肝佬肝佬

我废了,三克油!

点赞0


评论


肝佬肝佬

作业被我的宠物吃掉了QWQemotion_编程猫_搓头

点赞0


评论


大圣牛柳大圣牛柳

这个真的很好用……谢谢

点赞0


评论


SCS_user_LoeheodVOQSCS_user_LoeheodVOQ

我感觉用mastergo比较方便

点赞0


评论


大圣牛柳大圣牛柳

center_image作业来喽!

点赞0


评论


DDguanDDguan

这东西叫jsdesgin,没艺术细胞的建议别用,做出来很花哨的

点赞0


评论


猫站YYDS猫站YYDS

厉害

点赞0


评论


星蘑本尊星蘑本尊

emotion_编程猫_谢谢老板emotion_编程猫_点赞

点赞0


评论


克雷寄寄克雷寄寄

不要滥用渐变

点赞0


评论


ficfrkficfrk

推荐mastergo,即时设计

点赞0


评论


散宝我爱你散宝我爱你

内个...怎么画个很自然的拐角阿qwq......

点赞0


评论


一朵清云一朵清云

建议不要什么都搞渐变,有时用渐变真的不好看emotion_doge

点赞1


评论


嘉佳63下嘉佳63下

发一下网址行吗?

点赞0


评论