Scroll任何新闻帐号或品牌提要和大多数帖子共享一个形状:一张照片,一个大胆的标题,一个薄的重音栏,一个日期和一个手柄在角落里,这些都是照片卡,它们看起来是设计的,因为它们是由一个固定的布局构建的,只有文字和图像发生变化,这也是为什么一个团队可以每周发布几十个,而每个看起来都不一样。
本指南涵盖了卡片在提要大小下可读的内容、手机上文本大小如何缩小、哪些颜色通过了对比度指南、为什么卡片应导出为 PNG、如何将方形卡片适应其他平台以及隐私边缘在哪里。 照片卡生成器 用于分步零件,下面描述的每个设置都是该工具提供的设置。
TL;博士: 照片卡是由模板制成的社交图形:您的图像、标题和支持文本放入固定布局中。照片卡生成器有八个模板(经典报纸、现代粗体、突发新闻、名片卡、极简主义、功能卡、渐变新闻和垂直报价)、50 个 Google 字体、重音、背景和文本颜色选择器、图像比例和位置控制以及可选徽标。每张卡片都导出为 1080 x 1080 PNG,在浏览器中呈现。您的图像在本地读取且未上传,但字体从 Google Fonts 加载。它是免费的,没有注册。
什么是照片卡?
片(photo card)是将照片与叠加或相邻文字相结合的正方形或长方形社交媒体图像,从可重复使用的模板中排列出来,新闻媒体使用它们来分享头条新闻,品牌使用它们来发布公告,创作者使用它们来引用模板,固定排版、间距和位置;作者提供内容。
That split是全部,一个模板解决设计决策一次:标题相对于图像有多大,日期去向,文本周围有多少空间,改变单词无法打破那些关系,所以由同一模板制作的卡片馈送读取一个一致的出版物。
您应该选择哪个模板?
Card要携带的是什么来选择,每个模板只暴露其布局使用的文本字段,所以当你切换时,内容面板会发生变化。
| 模板 | 布局 | 文本字段 | 最好的 |
|---|---|---|---|
| 经典报纸 | 大图,文字区域如下 | 标题、副标题、日期、域 | 一般新闻和博客文章 |
| 现代大胆 | 图像上半部分,标题和下面的摘要,固定"阅读更多"按钮 | 标题、副标题、日期 | 公告 |
| 突发新闻 | 红色标题条、图像、标题、滚动式股票行情栏 | 标题、副标题、日期 | 对时间敏感的更新 |
| 报价卡 | 引用一张深色背景照片 | 目(引文)、副目(归属)、日期 | 拉报价,您有权分享 |
| 极简主义 | 带有大量空白空间的框架图像 | 标题、副标题、日期 | 简单的陈述、活动日期 |
| 特色卡 | 图像、重叠的圆形标志、页脚条 | 标题、副标题、日期、域 | 长篇文章 |
| 渐变新闻 | 全流血图像、重音梯度、页脚栏 | 标题、类别、日期、域 | 以图像为主导的故事 |
| 垂直报价 | 引用面板左侧,肖像图像右侧 | 容(引文)、作者、指定、日期、域 | 带有演讲者照片的引言 |
Most模板都有一条日期行,有几条添加域或句柄字段;任何字段都可以清除,布局中固定了一些标签,例如在Breaking News条上"BREAKING NEWS"和在Modern Bold上"阅读更多"只有当你添加一个标志时才会出现标志槽;没有一个,模板隐藏了标志区域而不是显示空帧。
社交卡上的文字应该有多大?
Bigger than it look on your monitor。a 卡片设计为 1080 像素宽,但在手机馈送中以大致屏幕宽度查看,典型的手机约为 390 CSS 像素宽。这意味着卡片上的所有内容都显示在其设计尺寸的 390 / 1080 = 36% 左右。
以下是模板使用的大小文本的作用:
| 1080 px 卡上的尺寸 | 390 px宽的馈送中的大约尺寸 | 可读性 |
|---|---|---|
| 64 px的标题 | 23个比索 | 很清楚 |
| 48 px的标题 | 17分鐘 | 清除 |
| 32 px 子标题或页脚 | 12个比索 | 可读 |
| 24 px 详细文字 | 9分比 | 小,需要注意 |
| 20 px 元数据 | 7分钱 | 难读 |
算简单大小×390/1080,对于48像素的标题,48×0.361 = 17.3像素,可与手机上舒适的身体文字相媲美,在20像素时结果约为7,这就是为什么卡片上的日期和句柄是装饰性的而不是必不可少的,把读者必须看到的任何东西放在标题中,而不是页脚。
48像素包裹到五行的标题,这也设置了长度的实际限制,迫使模板挤压图像或溢出,目标为6到12个字左右的标题。
照片卡应该使用什么颜色?
选择使文本与其后面的内容保持可读性的颜色。 Web 内容可访问性指南设定了一个有用的基准: WCAG 2.2 成功标准 1.4。3 求正常文本至少4.5:1,大文本至少3:1的对比度,WCAG将其定义为至少18点,或14点粗体社交形象不是网页,但同样的阈值描述了低视力或昏暗屏幕的人可以读取的内容。
生成器为您提供三种颜色:
- 强调 色条、丸、渐变和高光形状。它承载着品牌。
- 背景 为图像未覆盖的区域着色。
- 文本 在使用它的模板上为主副本着色;一些模板在其重音面板上设置白色文本。
| 组合 | 对比 | 正常文本 (4.5:1) | 大文本 (3:1) |
|---|---|---|---|
近黑色 #111827 白色 #ffffff |
大约17.7:1 | 通行证 | 通行证 |
默认红色口音为白色 #D9232D |
5.0:1左右的程度 | 通行证 | 通行证 |
中灰色为白色 #999999 |
2.8点1分左右 | 失败 | 失败 |
浅黄色上的白色 #facc15 |
1.5:1左右的情形 | 失败 | 失败 |
前两行是生成器's默认值,可以用the检查任意一对自有品牌颜色 颜色对比度检查器并且 颜色对比度指南 解释如何计算该比率。
直接放置在照片上方的文本没有单一的对比度,因为照片各不相同。渐变新闻等模板处理文本下方有渐变和文本阴影的照片。当您为这些模板选择照片时,请选择标题所在区域较暗或较平静的照片。
如何制作照片卡,一步一步
- 打开 照片卡制作器 template 下拉中选择一个模板,它的样本文本加载到内容字段中。
- 更换每个字段中的文本。在标题或内容框内按 Enter 键,强制在您想要的位置折断行。
- 添加主图像:单击上传区域选择文件,或将图像 URL 粘贴到其下方的字段中。
- Scale 滑块(0.5 倍到 2.0 倍)以及 X 和 Y 位置滑块(每个 -200 到 200 像素)调整图像,直到主题位于模板框住的位置。
- 可选地以相同的方式添加徽标。方形徽标图像最适合圆形和方形徽标槽。
- 打开字体下拉,按类别搜索或过滤(无衬线、衬线、显示、手写或单空间),然后选择字体。
- 使用颜色选择器设置重音、背景和文本颜色。
- PNG 点击下载。文件保存为
photocard-<template>-<timestamp>.png的,所以重复的导出永远不会互相覆盖。
您的设置、文本和图像在您工作时保存在浏览器中,因此重新加载页面会带回卡。重置清除它们并恢复经典模板。
为什么卡片下载为 PNG?
因为卡片大多是大文本和平坦的颜色,并且内容压缩得更好,并且看起来更干净,如 PNG 比如 JPEG。 JPEG'有损压缩在 8 x 8 像素块中工作,并丢弃精细的细节,这些细节围绕尖锐的字母边缘显示为微弱的光环和斑点,通常称为振铃。 PNG 完全使用定义的无损压缩来存储每个像素 W3C PNG 规格所以标题保持清晰。
| 格式 | 压缩 | 清晰的文字 | 平面颜色区域 | 照片 |
|---|---|---|---|---|
| 巴布亚新几内亚 | 无损 | 脆 | 小而精确 | 大文件 |
| JPEG | 有损 | 边缘周围的光环 | 可以显示条带和斑点 | 小文件 |
无论如何,大多数平台都会重新对上传进行编码。从干净的 PNG 开始,给他们的编码器提供尽可能最好的输入。如果照片较大的 PNG 对于上传限制来说太大了, 图像压缩指南 涵盖如何缩小它。
您如何在其他平台上使用方卡?
1080 x 1080时每个模板都导出,一个1:1的正方形,那就是Instagram和Facebook上的标准正方形提要大小,而且它在大多数提要上显示而不裁剪,其他放置想要不同的形状。
| 目的地 | 想要的尺寸 | 从 1080 平方开始 |
|---|---|---|
| Instagram 或 Facebook 源 | 1080×1080×成人电影网800另承接:工业自动化控制与系统设计,电气控制设备,自动化新技术的研究开发及推广,自动化成套设备与非标设备的技术开发与服务,自动化设备改造 | 按原样使用 |
| Instagram 肖像提要 | 1080×1350×快播电影大全800另承接:工业自动化控制与系统设计,电气控制设备,自动化新技术的研究开发及推广,自动化成套设备与非标设备的技术开发与服务,自动化设备改造 | 用哑光添加上方和下方的空间 |
| LinkedIn 或 X 链接风格的图像 | 1200×627×成人电影网, 苍井空电影大全1600×900×1200×627×1600×1200×1200×1200×1200×1200×1200×1200×1200×1200×1200×1200×1200×627×1600×1200×1200×1200×627×1600×900×1200×1200×627×1600×900×1200×1200×1200×627×1600×900×1200×1200×1200×627×1600×900×1200×1200×1200×1 | 裁剪到宽条或放在宽哑光上 |
| YouTube 缩略图 | 1280×720×成人电影网站800另承接:工业自动化控制与系统设计,电气控制设备,自动化新技术的研究开发及推广,自动化成套设备与非标设备的技术开发与服务,自动化设备改造 | 裁剪至16:9,然后稍微放大 |
| Instagram 故事 | 1080×1920×快播电影大全800另承接:工业自动化控制与系统设计,电气控制设备,自动化新技术的研究开发及推广,自动化成套设备与非标设备的技术开发与服务,自动化设备改造 | 放在高高的哑光上 |
Cropping 丢失了一部分卡片;一个哑光保留了所有对于 YouTube 缩略图,裁剪 1080 平方到 16:9 保留 1080 x 608 带,从顶部和底部删除 236 个像素,将该带放大到 1280 x 720 是 1280/1080 = 1.19 的比例,轻度放大如果计划此计划,请将标题保留在卡片垂直中心附近,因此裁剪不会切穿它 社交媒体图片裁剪者 使用平台预设进行裁剪,并且 图像大小指南 解释扩大对质量的影响。
为了将整个方形卡片放在更高或更宽的画布上,请将其放在背景上 哑光生成器。
你的照片上传了吗?
Toolz上传你的照片, 当你选择一个文件, 浏览器读入内存作为数据URL, 卡片在页面中布局, 下载由html2canvas库本地渲染, 这将页面's HTML重新绘制到一个画布上, 有三个网络和存储细节值得了解, 虽然:
- 字体来自 Google 字体。 字体列表是从加载的
fonts.googleapis.com因此,您的浏览器会向 Google 请求字体文件,Google 在其中对此进行了描述 谷歌字体隐私常见问题解答。您添加的文本和图像不是这些请求的一部分。离线时,尚未加载的字体会回退到默认字体。 - 图像 URL 是从主机中获取的。 如果您粘贴图像 URL 而不是上传文件,您的浏览器会从该地址加载图像,就像任何网页一样。
- 工作保存在您的浏览器中。 您的文本、颜色和图像保存在浏览器中's 本地存储中,以便它们在重新加载后幸存下来。在共享计算机上,完成后按 Reset 清除它们。
常见问题以及如何解决它们
下载的卡片显示与预览不同的字体。 Download PNG 时字体还没有加载完,所以导出回落到默认字体,选择字体后再等一两秒,然后再导出。
下载中缺少粘贴为 URL 的图像。 将远程图像渲染到可下载的画布中需要图像主机允许与 CORS 标头交叉源使用,这是一个限制 html2canvas 文档 notes。很多站点不发,下载图片,改成文件上传。
图像被切断或有空白。 Scale 滑块和 X、Y 位置滑块,在 1.0x 以下缩放可以揭示照片周围的模板背景;在其上方缩放则可以更紧致地裁剪。
文本溢出其区域。 Headline对于模板来说太长了,缩短它,或者切换到一个模板,给文本更多的卡片。
重新加载后卡片重置,或者大图像不会持续存在。 Browsers 将本地存储限制为每个站点几兆字节,存储为数据 URL 的大照片可以超过它,该卡仍然导出;它只是可能无法在重新加载后调整非常大的照片大小,然后再添加它们。
文本中的角度括号看起来错误。 文本作为标记插入模板,因此行会中断工作,这意味着诸如此类的字符 < ke以读作标签的开头,卡片文字中避免角括号。
人们阅读的卡片技巧
- Lead 一张卡一个思路,如果需要两个头条,就需要两张卡。
- 裁剪照片,使其主题不会位于模板的标题区域下。
- 保持您的品牌不变:一系列相同的模板、字体和重音颜色。
- Po文时添加alt文字,图片是文字图片到屏幕阅读器,所以把标题和关键细节写入平台's alt文字字段。
- Zhi有发布自己有权使用的报价和照片,并准确地Zhi出报价。
模板卡生成器的替代方案
- 一般设计工具 canva、figma 或 Adobe Express 等提供更多模板、免费定位和团队库,通常带有帐户。
- 新闻编辑室和社交日程安排平台 有时包含与发布工作流程相关的品牌卡模板。
- 基于代码的生成器 将 HTML 渲染到服务器上的图像适合自动为每篇文章生成卡片的网站。
浏览器模板工具适合中间立场:快速、无帐户、输出一致、图像保留在您的机器上。对于发布前的相关步骤, 图像水印 为照片添加徽标或信用,并且 社交媒体工具中心 列出全套。
