#剁主计划-天津#值站头图全解析和制作经验分享
写在前面:
自2017年10月开始什么值得买的原创之路,目今也有半年时间,大小原创40篇,文章写的也就那么回事,不过头图的制作方法摸索了一个,跟大家分享一下,请多多指教。
本文仅是分享下头图制作方法,包括:
1、什么值得买头图的几种规格
2、按照规格用PS做个头图图框
3、在创客贴应用模板制作头图
4、鸣谢
太长不看版:本文介绍了什么值得买头图的三种规格,汇总了不同规格图片所出现的场合,描述了利用PS制作图框以及应用该图框在创客贴网站制作头图的方法。
---
一、什么值得买头图的三种规格
值站在PC和APP两端的页面设计还是缺乏统一,有些功能PC端有、APP端没有,功能分类也不太统一,值站的攻城狮们还得加班、多多的加班。
至于头图,也是有三种,主图:官方使用的是710*300像素,比例为71:30。在其他一些展示方式,还会在主图的基础上进行裁剪,形成正方图和长方图,比例分别为:1:1和16:9。
下面分别介绍:
1、主图
主图是在发表原创时插入的那张图片,这张图片会在值友打开文章正文时显示出来,值站官方要求的像素尺寸是:710*300
(1)在酝酿这篇文章时,我就一直想知道值站为什么会选择710*300这个尺寸(相当于2.3666:1),后来发现电影业界有一种放映标准是变形宽银幕(Anamorphic Scope)使用的比例是:2.35:1,比较相近,估计是参考了变形宽银幕的尺寸吧。
变形宽银幕电影是“变形画面宽银幕电影”的简称,又称“悉尼马斯科普型电影”,“光学声带还音的变形画面宽银幕电影”。因胶片上的画面是变形的而得名,拍摄时利用水平方向“压缩”的镜头摄成画面;放映时另用镜头,把画面从水平方向“展宽”,放映画面宽高比为2.35:1,放映设备,可接应普通35毫米电影。
(2)虽然号称主图,但实际上,主图也仅会在两个场景下显示:一个是自己编辑原创文章时,另一个就是在值友打开文章正文时。
(3)有点诡异的是,在APP端主图的尺寸是16:9的,据我测试,如果主图尺寸是710:300的比例,那么会居中截取一个350:197(16:9)的图,作为APP端文章正文的头图。例如我之前的文章:
我制作的头图(710:300)如下:
PC端显示的文章头图是完整的头图,可以对比看出来是一致:
但是,APP端头图就变成了下面的情况:
我把两个头图都切屏下来,再放到Photoshop中比对,发现是从710*300的图中,居中截取了350*197(16:9)的部分,非常奇怪。
2、长方图
(1)长方图的尺寸
A.在PC端的情况,
在PC端长方图的像素尺寸是350*197(16:9),据我分析,长方图并不是从主图(710*300)截取/缩放来的,而是从你上传的那张作为主图的图片上,居中截取一个最大的16:9框而形成的(与APP端主图截取方式不一样),所以如果你上传的主图不是710*300的尺寸的话,那么长方图和主图显示的内容差别会比较大,主图会显得瘦长,长方图的上下边会有很多主图没有的信息,例如:
在好文页面展示长方图时的图文如下:
该文章的主图则显得比较瘦长,上下边截掉很多:
如果上传的主图比例不符合710*300的比例的话,主图和长方图的差别比较大,如果希望把确定的信息展现给值友的话,还是应该专门制作符合比例的主图,这时网站只会裁剪主图的左右两端而形成长方图,不会裁剪主图的上下两边。这个尺寸是主图左右各裁剪约90像素(保持高度不变),形成533*300,再缩小后形成350*197。
刚刚引用的这位值友的原文在这里,是一位49级的资深值友,可以看到其正方图又有厨师机上部更多内容了:
B.在APP端的情况,
APP端长方图的比例与PC端的不同,大约是2.43:1,比主图的2.37:1还要扁,来看个例子:
上面两个例子可以明显看出APP端的长方图又被截切了一块儿,本来两个小姐姐的头都是全的,到了APP端就从鼻子开始了。原文在这里(图上的那几个字,在正方图的时候也不全):
这也是在上传图的基础上取一个最大的2.43:1的框框,截切下来的结果。
(2)关于长方图的应用场景
在PC端,长方图主要应用在“好文-原创”、“好文-好文排行榜”栏目
网格布局也如是
在APP端,长方图是主要的展示图,你在浏览好文栏目时即是使用此比例图片:
长方图在PC端和APP端都是主信息流上的图片,一般值友浏览页面,在看了长方图和标题后,点击进入正文,就很少会再仔细看主图了,而是直接开始读内容。当然图片火爆的、清凉的或者沟壑纵横的除外。
所以从这方面来说,建议值站只使用主图或者长方图一种尺寸即可,省值站的服务器空间不说,看着也整齐。
3、正方图
(1)正方图的尺寸、比例
在PC端,正方图的像素尺寸是200*200,也应该是上传图上居中裁剪一个最大的正方形,如果是710*300的标准图,则是主图左右各裁剪205像素,形成300*300,再压缩成200*200。
在APP端,正方图的比例当然也是1:1,没啥可说的。
(2)正方图的应用场景
在PC端,正方图应用在“首页-值得买精选”(俗称:封推)、“首页-关注动态”、“首页-排行榜”、“个人主页”、“相关原创”、站内搜索、文内引用等多个场景:
由此可见,正方图很关键,新文章被推荐、老文章被搜索、众粉丝来探班,都要用到,所以以后文章热度要起飞的话,你就说:“我的文章被小编方了”
另外,以前好文频道的热门排行榜也使用正方图,现在都改成长方图了:
我个人建议还是还原回正方图进行热门展示的方案,原因有二:
一是保持APP端和PC端对热门文章的视觉识别统一,通过长方图和正方图的不同,让值友识别最新文章和热门文章。
二是使用正方图比长方图可以多展示一个热门文章,好文页面上的“今日热门”区域也是寸土寸金,能多展示一个,也就能多推荐一篇文章,这不但对于辛苦写作的值友是一种尊重,也是能为网站带来更多流量。
在APP端,正方图的应用场景与PC端基本对应,热门、搜索、个人主页等都是正方图,就不贴图例了。
4、小结
(1)综合前面的介绍分析,从尺寸上来说,值站在PC端、APP端,共有4种比例的图:2.43:1(APP端长方图),2.37:1(主图,710*300),1.78:1(APP端主图&PC端长方图,即16:9),1:1(正方图),当然还有第五张图,就是用户上传的那张图,相信也保留在值站的服务器上了。是不是有点多了?
(2)综合前面的介绍分析,从应用场景上来说,正方图特别重要,长方图也很重要——毕竟是首次公开发表时使用的图,主图反而是不太重要的,不过主图是基础,没有主图也没有正方图和长方图。所以在长方图区域放下大部分内容,在正方图区域突出重点内容,应该是个比较好的主图。
二、按照规格用PS做个头图图框
既然要一图三用,制作头图的时候就要多考虑一下,尤其长方图和正方图的展示作用很大,值友们都是通过看长方图或正方图快速了解文章的,要是主图设计不好,被自动裁剪的长方图或正方图就可能变得不知所云,所以最好是做个模板,能够看到主图上长方图和正方图的位置,方便制作合适的主图。
1、先看看几个站内实际的例子:
主图:
长方图:
刚刚好,上传的源图应该就是710:300的比例,裁剪后正好让美眉还在框内(上下没有出现新的内容),这篇文章在这里(正方图也还好):
再看看这位小姐姐:
正方图裁剪比较大,所以经常会有这种情况的:
正方图:
▲小姐姐只有一半脸,小姐姐会不会不高兴?我猜要是能设计好头图,让小姐姐在正方图居中,热度一定不止这些。
对比之前大热的两篇文章,文好、图更好:
两位大大实在是洒脱▲▼
2、PS一张作图模板
下面来看看怎么用PS(以CS5为例)制作一张模板标定长方图和正方图位置。
做法其实很简单,大致分为下面四个步骤,每步一个GIF:
(1)新建710*300的文件(背景设为透明):
(2)建立三个图层,分别命名为主图、长方图和正方图:
(3)分别在三个图层上画710*300、533*300、300*300的框,再各自居中:
(4)保存为PNG格式:
三、在创客贴应用PS模板制作头图
做好的模板就可以在以后制作头图的过程中应用了,我也是看了本站大神推荐的头图制作网站,经过试用,选择了创客贴网站来制作头图,大神的原作:
我一般是会把标题文字放在中间区域,正方图的时候会显示出文字,方便值友迅速辨别出所写的内容。
为了确定放置文字的位置,就需要之前创建的图框,可以先按照主图尺寸创建画布,再添加图框并设置为背景,按照图框的中间区域设置好文字,再添加真正要使用的背景,调节一下文字颜色,一张简单的头图就就好了。全过程分为5步:
1、创建710*300的新画布
2、插入头图的背景图
3、插入刚做好的头图模板
4、插入文字
5、删除头图模板并保存
小结一下,创客贴这个在线编辑头图的网站还是很不错的,尤其是制作文字有很多模板,用着很方便,偶尔会有些小毛病但不影响正常使用,所以我一直在用,已经编辑了许多头图了:
四、鸣谢
撰写这篇文章,也是这一段时间在值站发表原创的总结,汲取了很多前辈大神的养分,一并推荐给大家,希望能够帮助爱好撰写原创的朋友们:
头图制作的文章,推荐看看下面三位大大的内容:
文中有很多GIF动图,来源于这位大大推荐的ScreenToGif软件,炒鸡好用:
就酱,编辑大人,多赏我点金币吧。
橡椿枫
校验提示文案
涟灬漪
校验提示文案
严守七
校验提示文案
尾巴是只猫
校验提示文案
二月春风似柴刀
校验提示文案
hhpp
校验提示文案
记录生活点滴
校验提示文案
李俊河
校验提示文案
mars208
校验提示文案
轻指飞扬
校验提示文案
myfish
校验提示文案
磊磊爱吃饭
校验提示文案
Nusica
校验提示文案
Nusica
校验提示文案
记录生活点滴
校验提示文案
磊磊爱吃饭
校验提示文案
myfish
校验提示文案
hhpp
校验提示文案
尾巴是只猫
校验提示文案
严守七
校验提示文案
二月春风似柴刀
校验提示文案
轻指飞扬
校验提示文案
mars208
校验提示文案
涟灬漪
校验提示文案
橡椿枫
校验提示文案
李俊河
校验提示文案