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

2017/02/17 13852

编者按:今天推荐的两个网站,一个收录了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

界面设计 交互设计师 HTML5 素材 用户体验设计 好文 UI 转场动效 设计师专访 设计师 设计规范 排版布局 扁平化设计 素材下载 视觉设计 职场 产品设计 设计趋势 配色 web前端开发 海报设计 AI教程 字体下载 设计理论 动效设计 神器下载 图标设计 psd下载 logo设计 神器推荐 ICON 职场规划 App设计 酷站推荐 字体设计 交互设计 用户体验 ui设计 设计师职场 优秀网页设计 酷站 ps技巧 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里