猫史档案馆


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

用户:Ys蛊惑茶Ys蛊惑茶查看:3056 回复: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


评论

可用不惯,还是喜欢用mg(虽然说差不多,而且可能mg功能还少点())


星野残翼星野残翼

废了

点赞0


评论


PayCoPayCo

为什么不用XD...

点赞0


评论

XD网页和PS是一个网页,搜XD也能找到

...那些是仿版,我说的是正版的Adobe XD!!!!!!!!!

而且纠正你的错误,Adobe XD是个软件!!

xiexie

谢谢,收费

XD有bug,使用后照样可以用,不信你试试。

谢了

我会试试哒~

额,实际上

他们都是使用svg矢量图形式进行绘画的

所以他们都是一类东西

手感差远了。XD颜色怎么调都好看,不信你试试。还有,XD有背景模糊,国内网站根本没法比。正经UI设计师都用Adobe PS 和XD好吧。

还有,我知道SVG是个什么东西,你不用装得你很厉害。

谢谢,我会试试,但不要喷别人哦~

全程没一点引战的意思呀。。。哪来的喷。。。

但他们明明都是一样

我用Pixso也一样有,虽然我也用XD

PS也有背景模糊


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


评论

即时设计

js.design/square


橘络byaf橘络byaf

不行他总是闪退

点赞0


评论

建议使用windows10以上系统


内涵本涵内涵本涵

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

点赞0


评论

没错啊,就是即时设计

那怎么是PS

我是说搜PS能搜到……


一朵清云一朵清云

这是即时设计吧

点赞0


评论

没错啊,就是即时设计

为什么那里是PS

我是说搜PS能搜到……

emmmm,误会了


CapZenithCapZenith

我一直叫它XD。。。

点赞0


评论

差不多


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

这好东西)拿来把你)

点赞0


评论

???


肝佬肝佬

我废了,三克油!

点赞0


评论

OK


肝佬肝佬

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

点赞0


评论

az

真的,别不信

不是不信,只是惊讶


大圣牛柳大圣牛柳

这个真的很好用……谢谢

点赞0


评论


SCS_user_LoeheodVOQSCS_user_LoeheodVOQ

我感觉用mastergo比较方便

点赞0


评论

谢谢,我会试试的~

mastergo 狗(go)师傅


大圣牛柳大圣牛柳

center_image作业来喽!

点赞0


评论

恭喜你把下节课的内容自学了

什么,腾讯体获取吗

不,学习怎样做发光和漂浮按钮,所以你学了一半了 字体,描边,高斯模糊,阴影第3节讲

那个是从别人的教程白嫖的…就一张图片

描边不是编辑器自带的吗

高斯模糊能不能快点讲(我不会,想学)


DDguanDDguan

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

点赞0


评论

额,也不是没道理


猫站YYDS猫站YYDS

厉害

点赞0


评论


星蘑本尊星蘑本尊

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

点赞0


评论


克雷寄寄克雷寄寄

不要滥用渐变

点赞0


评论

渐变是锦上添花,不是本身

谢谢


ficfrkficfrk

推荐mastergo,即时设计

点赞0


评论


散宝我爱你散宝我爱你

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

点赞0


评论

浅浅de问一下

下节课讲

~\(≧▽≦)/~


一朵清云一朵清云

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

点赞1


评论


嘉佳63下嘉佳63下

发一下网址行吗?

点赞0


评论

js.design/square