设计师

显示标签为“设计师”的博文。显示所有博文
显示标签为“设计师”的博文。显示所有博文

2016年9月19日星期一

设计师日常使用的素材网站有哪些?


适合对象:经常需要搜集素材的UI小公举 以及 各位产品汪 运营喵 程序猿……

阅读时长:约10分钟

重点介绍:素材网站和必备小工具,不打算介绍太多,多了你也记不住,只推荐精品

文章概述:

1.图片:网站搜集 → 素材管理;2.图标:网站搜集 → icon管理;3.字体:字体下载 →字体管理;4.设计灵感:sketch和 psd下载5.微视频6.音频
一、图片

搜一下iPhone,百度是这样的:



其他素材网站是这样的,并且是5k的,两个差别有点大。。。



现在免费的素材也不少,而且有些还相当不错,比如上面的几张图片是不是看着很棒,跟百度简直是两种画风。

感谢那些将自己的优秀的图片和作品版权授权大家免费使用的设计师,介绍几个自己常用的素材网站吧。

不打算介绍太多,多了你也记不住,只推荐精品:五个站点+一个图库源软件

1.Unsplash:五颗星

图片主要在人物、自然、生活类的比较多,素材5k像素。每10天更新10张,更新速度还行,毕竟人家都是高质量的图片。
版权:CC0 – 可商用,不要求署名。想怎么用怎么能够用,用的时候不用问作者授权,反正随便折腾。



2.Pexels

搜索很方便,首页下面就有热门分类标签和热门下载,图片各种类型的都有,比较丰富,风格偏商业化一点。图片质量也还不错,值得收藏。
版权:CC0 – 可商用,不要求署名。想怎么用怎么能够用,用的时候不用问作者授权,反正随便折腾。



3.Realistic Shots

主要分为五大类:建筑、自然、人物、旅行、科技的素材为主,图片质量也挺不错。
版权:CC0 – 可商用,不要求署名。想怎么用怎么能够用,用的时候不用问作者授权,反正随便折腾。

上图感受一下:



4.Gratisography

这个用兔子作为logo的图站,图片主要集中于:动物,自然,对象,人物,城市,荒诞

重在个性,往往能发现一些很有新意的图片,够特别。我不会告诉你在上面发现了一张荒诞裸奔的皂片。
版权:CC0 – 可商用,不要求署名。想怎么用怎么能够用,用的时候不用问作者授权,反正随便折腾。



5.Pixabay

界面是中文的,可以限制横图竖图,颜色,尺寸等,可以精确地调整搜索条件。图库大,但质量一般,需要淘一淘。
版权是CC0 – 可商用,不要求署名。想怎么用怎么能够用,用的时候不用问作者授权,反正随便折腾。



终极必杀器:

其实还有一种办法比这一个个网站找方便多了,一个软件轻松搞定

Zoommy:一款多图库源管理应用,支持Windows/Mac/Linux

Mac V1.1.0 百度云链接: https://pan.baidu.com/s/1i5Gyu81 密码: wrvf



有了它我们可以很方便的关注40多个图库源,找素材的效率大幅提升。



那么存下来的图片如何管理呢?
Inboard:比Ember更轻盈

如果你用过Ember回头再来使用Inboard,你会发现它在功能上确实会少很多。但带来的好处就是应用足够轻盈,易用。再看看Ember中那些复杂的功能,我会用到的始终只会是它其中的一小部分。

1.文件夹和Tag方式的图片素材管理

2.Chrome、Safari的全屏截图保存

3.Dribbble like的关注两个核心功能

使用截图



二、图标
1.Freebies:Iconjar官方推荐

特点:19套图标,数量总共有5000+,基本满足日常需求

2.Iconfont :阿里巴巴矢量图标库

特点:1.分为阿里官方公开库 和 其他公司或个人的所有公开库2.支持用户自己上传图标3.支持Webfont字体


特点:1.共 189,189 枚矢量图标分布在 3,096 图标集里2.号称拥有最大的PNG, SVG, EPS, PSD and BASE 64图标数据库3.图标质量还是蛮不错的


特点:1.Lingo自己家的图标素材网站2.会有一些比较新颖的图标集,如下图:


5..Instantlogosearch(只提供Logo,国内大厂的也有,覆盖挺全的)


管理工具:iconjar

支持 SVG、PNG、Gif 三种格式的图片。建议大家去官方下载官方素材库资源时候尽量导入svg格式,毕竟是矢量的,以后改着也方便。

选中某个图标,侧边栏会出现名称和标签,当然不需要的右边栏话也可以在菜单栏隐藏.


偷懒姿势:

1. 下载图标并安装:官方素材库
2. 使用时直接把图标拖进sketch或ps 里,搞定。


三、字体

1.字体下载:

设计师常用中文字体 英文字体,需要的自己下载吧:百度云链接: https://pan.baidu.com/s/1c2n2jXu 密码: w85v

2.Mac字体管理工具:Rightfont查看官方介绍与指南





四、设计灵感:包含Sketch和PSD下载

1.UI8.net:高质量,设计资源交易网站,每个设计稿都不便宜,一个作品至少$20,话说资源,放上来会被和谐吗?在线等,挺急的。

2.Sketch It’s Me:一个专注于 Sketch 分享交流的互动平台,更多更好的 Sketch 相关资源汇聚地。让每一位 Sketch 使用者都能轻松掌握 Sketch

中文站点,资源也算还可以,包括图标和各种UI设计稿都有,耐心找,也是可以找到好东西的。



3.Reeoo:什么资源都有,诸如UI、图标、甚至html都有,质量不错,分类↓



4.Sketchappsources:sketch资源站,在上面找到了不少很不错的资源,分类↓




5.Mobile-patterns:只有移动端界面,可以在左边菜单分类检索,诸如登录、列表、搜索常见的元素都可以找得到。



6.Pinterest:国外大名鼎鼎的收集idea的地方,国内的类似的就是花瓣,比如要做登录,直接都关键词,如下图 ↓



国内Pinterest花瓣



汲取灵感,这六个网站足矣~

五、微视频

现在很常看到网站把视频做成首页背景,不用按下播放按钮,就有动态显示效果

比如:手机淘宝app 下载页面



Coverr:就找到了一个,找到其他的再更
Coverr 提供的免费首页背景影片素材,这里的素材皆能在线预览、免费下载,而且使用上没有任何限制。

网站每周一更新七个全新影片,目前在这里也可以找到超过 200个以上短片。

版权:CC0 – 可商用,不要求署名。想怎么用怎么能够用,用的时候不用问作者授权,反正随便折腾。



六、音频

挖坑,找到再更
之前好像看过一个国外网站,音效也挺多的,当时没有保存地址。。。
……我……把名字也忘了……坑等我想起来再填……

最后,借助小调查安利一个颜值爆表的表格Chartico免注册,免费用

2016年8月24日星期三

用PS打造抽象艺术视觉效果


前言

很多人以为,做一个PS高手就是需要用到各种复杂滤镜,最后把图片变得面目全非才好。而在我看来,软件的背后是创作者的心。把PS视作一件玩具,其实就是几个简单的几何形,也能玩出不同的花样。其中,抽象艺术的表达法可以拿来一用,仅仅是一些形状、色彩就能创作出让人耳目一新的视觉感受。

同心圆肖像

STEP 01

你一定听过,人脸是最吸引眼球的画面。先准备好相应的人像素材。再打开PS,创建一个尺寸为1800*1200的文档。



STEP 02

画出三个圆,第一个圆是一个实心圆,第二、三个圆是空心的圆环。总之让它们看上去像一个靶心。它们的大小比例可以参考下图。



STEP 03

将准备好的人像图片导入到文档内,这时,复制两次,也就是让人像也变为三个。这样让人像与上一步中的圆形保持一一对应的关系。



STEP 04

关闭三个圆形的可见,这时,将这几个圆的“形”作为与其对应的人像图层的蒙版。当然,由于是三个不同的形,它们之间的关系就不能太平铺直叙,你一定懂得利用这三个不同的“形”创造一种有趣的错落关系。



STEP 05

可以利用调整图层工具对整个画面的色调进行修饰。



自制抽象画笔

STEP 06

这里我们将要分享一个快速自制抽象画笔的方法,再新建一个800*600的文档,背景为透明。在这个文档中画上一条矩形,然后复制多次后,均匀排布,只是保持左右端非对齐。如下图所示。



STEP 07

将这些条状矩形旋转-40度。旋转后得到的形状定义为画笔,进入【编辑>定义画笔预设】,确认了画笔名称后,点击确定即可。这个画笔是一个非常容易制作同时又能很好表达现代感的元素,我们将接下持续使用到它。



建筑抽象

STEP 08

回到我们的抽象艺术的文档,把三个同心圆肖像图层集合成组,给这个组增加一个蒙版,利用上一步做成的画笔在这个蒙版上点击创作。这里的目的是要将左同心圆的左边部分做一部分隐藏处理。



STEP 09

增加一个矩形,填充为深色,具体颜色可以是从人像图片中吸取的深色。这个做法最能做到整体的色彩和谐。为矩形增加蒙版,在蒙版上运用自制抽象画笔来创作出一种类似建筑一样的抽象造型。



自然抽象

STEP 10

让我们再为整体增加一些表达浪漫的元素,在自定形状工具中找到空心圆的形状,然后填充不同的色彩和大小,散点分布。整个过程并不局限于使用哪种颜色哪个大小,这种圆圆圈圈的形状本身就能传递一种自然主义的浪漫感。



STEP 11

给这些“圆圆圈圈”编为一组,增加一个蒙版,再用你的有趣画笔把它也融入到整个设计中。

再次锁定焦点

STEP 12

在同心圆外再增加一个圆,这个圆形保持空白填充,描边为8。大小确定后为其增加蒙版,又拿出你的抽象画笔进行涂抹,你会看到涂抹效果会很明显地让它的存在感褪去但又能依稀可辨。



STEP 13

再为人像增加“点睛一笔”,运用光圈笔刷,点击这里可以下载。你可以选择红色或其他任意色彩,在所有图层的上方新建一个图层,将图层的混合模式改为“滤色”。



在这里需要更加灵活,画笔有多种,你可以从中选择一款最适合的。光圈的方向可以根据图片本身的光线方向进行改变。刷一次并不会有太大变化的可以多刷几次。

完成后你可以增加一些文字和背景,最后效果可以是这样:

后记

经过体验,抽象的方式并不难,几何体加上一款简洁又有趣的笔刷就能做出不错的视觉效果。这里所运用的组合完全可以进入你的大脑创意的素材库,这种在蒙版上运用画笔进行创作的方式也值得你进一步探索。

浅谈日式网站——我们需要学会哪些?


色彩

当我们看到小清新的网站的时候首先一定会想到日式网站!主要为年轻化的用户群网站居多!

01:sarara   一家纯净水的网站!主要突出网站的  静  纯  自然

所以它的网站主题色系为蓝色系,主要由高饱蓝色到低饱蓝色的过度,加上明暗对比的强烈!直接了当的突出宣传的产品!足够吸引用户的购买欲望。!


02 : 该网站的主要面向目标人群是大学生!所以选人物上面 比较有清纯 活力的女生作为主角 让她在炎热的夏季能够体验到一瓶饮料给他们带来凉爽的感觉是多么的喜悦。同样是的采取了 蓝色系作为背景  采用紫色作为点缀色! 画面的女主角传递出了 清纯 可爱 运动 年轻的气氛!所以一样给用户传递出了清新的感受。所以产品吸引大量的大学生购买!



03 : 这也是一家日本矿泉水的官网

同样它也是运用了大量的蓝色系作为背景:画面中主要以亮蓝色和亮黄色以及白色的对比再加上强烈对比的人物!一种 天然 阳光  愉悦的心情   不知不觉就吸引了用户!自然突出了人物和产品!最后加上亮黄色的点缀吸引购买!成功增加了产品的购买率!



还有很多例子!我在这里只举例了几项!

在我们需要清楚的是在我们设计小清新的网页的时候可可以吸取日式网站中的优秀元素!

01: 大部分采用蓝色系进行过渡

02: 增加色彩的对比 例如:亮蓝色和亮黄色等

03: 选择带有清纯 年轻化 清新 愉悦的人物 来传达气氛

等等!

掌握了这些要领 相信各位设计一个接地气的日式小清新的网站。

图片

日式网站在处理页面中的图片的时候,会哪些规律呢? 那么下面我们看看一些案例。

01:AIM info  网站团队栏目中运用的图片具有统一的调性,主要体现在:

她们的色调,人物视角, 及人物占有画面的比例,通过男女对相别比的先后顺序缓解视觉的疲劳!因此这样的处理方式会给用户一种专业 严谨  信任的感觉。



02:下网站是一个传统服饰的网站:网站中的图片运用了孩子的 摄影角度 一个正面和一个反面作为对比,通过性别对比,女孩和男孩错列顺序,通过色彩的 暖色和冷色进行一个对比,通过板块大小的对比 网站中 小图片和大图片进行对比!通过几何图形来对比,正方形和长方形的对比!这样的好处就是让用户即使阅读这么多图片的时候 变的清晰条理还不乱还能保持很大的新鲜感!减少用户的视觉疲劳!



03:网站中的图片使用 近景远景的对比处理手法:如下网站:

中的图片处理方式:第一张图片使用近景来表现食物的细节!

第二张采用 远景来表现饭店的外观,

第三张第四张:同样通过近景的手法来表现食物的加工过程

第五张:使用远景表现整个全景照片

第六张:使用近景来表现食物细节诱惑的感觉

第七张:使用远景体现整个参观的内部感觉



这样的处理手法 使得整个画面中图多而不乱,增加了图片中的节奏感和层次!让用户不断有新鲜感去浏览图片!

04:下网站也是通过近景和远景的方式来搭配图片



根据上面几个案例分析得来我们在网站运用图片可借鉴的几种方式!

01: 具有统一性[主要体现在 色调 人物占有画面的比例 人物的造型 人物表情状态 等]

02: 通过对比来{主要体现在 近景和远景的对比   冷暖色彩的对比   人物性别的对比 人物的造型姿势的对比   形状大小比例的对比  利用图形来做对比 等}等等方式!都是可以值得我们在网站中运用的时候需要注意的.

03: 突出主体!弱化背景!

文字

01:使用几何图图形的形状比例来进行文字排版

使用三角形比例进行文字文字排版





使用竖长方形比例来排版



使用横长方形比例来排版



使用六边形比例进行排版





使用正方形比例进行排版



使用圆形的比例进行文字排版



下面食品网站:文字进行竖排有效的将主视觉和介绍性的文字结合起来。又不失美感



同样使用竖排的文字方式进行排版的案例,下图文字采用竖排的方式!使得整个画面更加有贴切感。



等等!

02:使用图案和文字结合的方式进行排版!这样使文字更加的趣味!使用户更快的理解!获取vi中的图形和文字结合排版!不适单调。让页面更加紧密。



下面页面也是类似这样的方式,延展vi中的元素进行图文搭配通过特殊处理文字效果,

使得文案中重要突出的内容  直接抓取了用户的视觉!



通过特殊处理文字效果,使得文案中重要突出的内容  直接抓取了用户的视觉!



通过添加了图形让整个文字变的更加的丰富!



比较夸张的图形和文字内容进行结合展示!也是很有趣味性



下面案例也是巧妙的利用图像和文案结合排版 ,也是很有趣味!



03:使用图像和文字排版的案例

下图就是使用实景图像和文字进行一个巧妙结合设计!夸张的人物模特和神情。

增加了文案排版的视觉冲击力!让原本单调的文字变的有活力。



根据上面几个案例分析得来我们在网站中进行文字排版可借鉴的几种方式!

01: 学会借鉴几何图形的比例去排版文字

02: 文字排版中巧妙的加入图形,不仅变的具有创意还会让你所表达的信息内容更加易懂。

03: 文字排版中学会融入来生活中图像元素,不仅会让你的视觉上得到质的提升 还会让你整个内容更加的接地气。等等还有很多方式需要你们去发掘了。

元素

网站中的 线条运用!几何图像的运用!

01:搭配文字一起运用!

下面网站为了突出数字部分,采用明亮的线条作为提示作用! 这样不仅潮流,而且有效的抓住了用户的视觉和突出了重点!



相同的道理 这里也运用了线条 来突出文字的重要性!



02:按钮的运用!

下面的网页 将线条运用在网页中的按钮上!告别实色为主的方式,利用线条更好和整体融合 !加强了按钮的透彻感也是非常新颖的展现方式!



03:网页整体的装饰作用:

线条的加入让下面的网页每一屏之前有了区分感!同时也吸引了用户的注意力。避免了两屏内容相互干扰。



等等:

2: 常用的利用线来辅助作用!

01:利用线条进行分隔作用的案例:下面网站为了让整个信息更加的有条理的去展示!避免了彼此的干扰。



下面案例的线条也是采用一样的修饰辅助作用!



3 : 网页中的利用纯色方式来突出信息内容

01:下面利用纯色方式提炼文字的案例

下面网站为了让用户第一视觉看到网站表达的重要内容,所以利用了纯色打底方式来修饰文字,成功的让用户第一眼注视到了它们!



下面案例为来日式文字为来和英文区分,也采用了纯色的方式来区分和突出需要表达的信息内容



02:下面是利用纯色来作为板块之间的区分案例 这是网站设计最常用的方式。

下面是一个网站的底部,为来让top到顶部的功能和底部板块信息得到有效的区分,所以网站采用了两种色彩来分离两个板块的信息,从而避免它们彼此的干扰,让原本杂乱的页面变的有条理。



下图网站也是采用不同的背景颜色,让画面变的有主次,富有层次感。



03:采用活泼的几何形状作为背景的方式。

使得整个网页不单调,给用户一种活力青春的感觉,使模特和和整个画面结合的更加紧密.



04:加入科技的元素,让你的产品增分出彩。

下面网站是一家卖眼镜的产品,画面中让流线型的科技元素的加入,使得眼镜给用户 先进 科技 现代的感受,使得用户更加直观的了解产品的卖点。



05:下面网站是一家市场杂志的模特网站,网站同样加入了 现代 科技 感的元素,使整个网站变的潮流

超前起来。



06:加入绘画的元素让网站更富有活力和创新色彩

下面网站是一家寺庙的景区网站,网站将平时在寺庙运动的人群, 使用绘画的方式唯美的展示出来,

既不抢主体视觉,又为网站增加了几分色彩,真正的让用户看到此网站就想去当地体验一番。



下面网站的开场动画,也是利用绘画的方式来描述了整个企业的历史-发展到现代,利用绘画让历史感体现的十足,同时也很有创新的网站。



下面网站是一家卖苹果的网站,网站中背景采用大量的种植苹果树景色的插画,搭配文字,简单而不失优雅,用简单粗暴的方式 告诉用户我们就是卖苹果的。



07 : 让实景图片的元素融入网站,使得网站更加的接地气。

下面网站是一家婚庆公司的宣传网站,网站背景采用了将新娘手捧鲜花的照片 设置透明度模糊展示

既不强主视觉,又让背景和照片完美的融入和呼应,给用户一种淡雅 幸福的感觉。



下面网站也是采用了生活照片元素,巧妙的融入网站中,给用户感觉就像在现场观看一样!



08: 加入强烈的几何图形,让网站变的更有创意力!

下面是一家设计创意的公司,整个网站背景采用大量的立体图形元素作为背景装饰,告别传统,加上炫酷的动效,足以说明是一家创意十足的设计公司!



根据上面几个案例分析得来我们在网站中进行元素运用的时候可借鉴的几种方式!

01:线条的运用,既可以起到装饰 辅助分隔的作用,又可以作为重点信息突出

02: 背景纹理纯色的运用,有效的起到了网站分隔和区分对比的作用。

03: 几何图形的运用,让你的网站更有新意。

04:科技的元素的运用,让你的网站的产品卖点更突出,优势更明显。

05: 增加氛围,可以让你的网站的变的更有青春活力。

06: 实景图的运用,可以使网站更贴切生活。

07:手绘元素的运用,让你的网站更出彩。

等等,还有很多元素  也需要各位仁兄去发掘,并且巧妙的运用!