Hi,我是优设小编

cyRotel

浏览全部 4063 篇文章

到我的微博瞧瞧

利器两连发!收录180种渐变背景+最值得学习的交互作品集

编者按:今天推荐的两个网站,一个收录了180种超美的渐变背景,可直接下载PSD/Sketch 的源文件,一个是高手亲荐的交互设计作品集,看完保证收获爆多。

WebGradients

一个收录 180 个线性渐变背景免费集合的网站,你可以从这里挑选网站背景,利用产生的 CSS 语法将它快速套用到你网站的任何部分。WebGradients 让使用者能直接点击后预览背景效果,一键产生 CSS 语法或下载 PNG 图片格式。

此外,WebGradients 还提供免费的 Photoshop 和 Sketch 下载!如果需要的话,你能从网站上找到购买链接,自由赞助金额,亦可免费取得这两种素材组合包。

STEP 1

开启 WebGradients 网站后,往下拖曳就能找到收录的所有 180 种线性渐变背景颜色,网站右上角有两个链接,分别是 .Sketch 和 .Psd 两种不同图片格式的在线购买链接。

STEP 2

WebGradients 收录的每个背景颜色都有名称、色码及预览图。

点击预览后会直接放大、套用到你目前的网页背景,就能看到该渐层颜色的变化效果。

STEP 3

点击背景图右上角的「下载」图示可以取得背景图的 PNG 格式,不过更方便的方式是点击右下角的「Copy CSS」,WebGradients 会自动产生渐层图案的 CSS 样式并复制到剪贴簿,例如我取得的某一段语法看起来像这样:

background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);

只要把它加入你网站或应用程序的 CSS 样式表单就能轻松套用,非常简单。

STEP 4

如果你想获取这些渐层背景的 Sketch 或 Photoshop 原始图档,点击网站首页右上角的下载链接就能找到,会连接到 Gumroad 商店,可以自由填入购买价格(输入 $0 元免费下载),若喜欢或觉得对你来说非常有帮助不妨付费赞助一下。

交互设计作品集

@锦妖_BCJ2嘤 :Simon Pan的作品集,极度详细,一个case study能抵一本手册:simonpan.com/ 里面的流程学校讲过,但这些业界真实的案例和方方面面的细节依然有很强的指导作用。

另一个无比详细的作品集,就一个case,是设计Adobe Portfolio的。由于要搭梯子,我就引用一些图吧,有条件的可以去Medium原文看。

仔细看完这篇blog,至少能学到:

  • 较完整的设计过程是什么样的?
  • 做决策有哪几种方式?
  • 如何用草稿引导思维?
  • 如何做详尽美观的标注?(更适用于缜密的大公司)
  • 如何展示和排版自己的作品?
  • 如何记述自己的设计过程?

想看到更多的作品集,请到博客:alldesignprocess.tumblr.com (梯子)

「优设最新的神器推荐

  1. 《这款图标神器,让你体验用完即走的畅快感》
  2. 《超过5万张!免费高清可商用图库ZOOMMY 3.0重磅来袭!》
  3. 《超好用的PS字体管理插件FONTAGS(附安装方法)》

原文地址:free.com.tw/zhihu

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量190万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.uisdc.com/gradient-background-interaction-portfolio