17-七个步骤搞定文章封面图

▽
有好多小伙伴问我文章的封面图是如何制作,今天就用photoshop和skech出个图文教程~
壹: photoshop
1-打开PS新建文件
点击菜单栏的文件-新建,输入宽度900像素,高度500像素,点击确定。

2-新建矩形
点击工具栏的矩形工具,新建一个正方形矩形,可以使用快捷键command+T,调整矩形的大小和位置。调整时长按shift,还可以保持固定长宽比。

3-找一张背景图片
我一般是用Pexels来找图,直接右键点击复制图片就可以了。本文文末还总结了一份我常用的找静态图、gif图、原型icon的网站名单。似不似很贴心!

4-创建剪切蒙板
重新打开photoshop,使用快键键Control+V将图片粘贴。在PS界面右侧的图片图层,右键点击选择“创建剪切蒙版”。

5-调整图片大小
创建完剪切蒙版后,会发现背景图片变成矩形图片的子集了,超出矩形大小的图片都不再展现。
快键键Command+T进入图片的编辑状态,调整图片大小和位置。

6-使用文字工具
点击工具栏的横排文字工具,输入对应的文字,同时调整文字的字体、大小、颜色、透明度。

7-导出图片并保存PSD
点击菜单栏的文件-存储为,选择导出图片的格式,我一般选择png,存储在对应的文件夹。完工!

贰:Sketch
1-打开skech粘贴图片
将网站上的背景图片复制粘贴到新建的skech里,然后点击左上角的“➕”,选择Artboard(这个画板可以快速剪切)。

2-设置Artboard
将Artboard的宽度设为900像素,高度设为500像素。同时在控制面板移动背景图片的位置,将背景图片变成Artboard的子集。

3-增加一层阴影
点击左上角的“➕”,选择新增一个矩形,宽高比大于900*500,也在Artboard画板里。设置矩形颜色为黑色,透明度为35%。这是为了图片上的文字更为突出。

4-输入文字并导出图片
点击左上角“➕”,选择text,输入文字内容,颜色选择#FFFFFF(纯白色),字体大小排版都可以根据自己喜好进行调整。右上角点击Export,保存,完工!

叁:常用搜图网站
1-静态大图
① PEXELS:www.pexels.com
② 花瓣网:huaban.com
③ 站酷网:www.zcool.com.cn
2-GIF动图
http://www.gifparanoia.org
3-icon图标
EASYICON:www.easyicon.net
ICONFINDER:www.iconfinder.com
— END —
作者:pmwiki,一只创业中的产品狗。写文章是为了督促自己独立思考,也想看看自己能坚持多久。内容多为产品感悟、读书笔记以及生活思考。