滾動任何新聞帳戶或品牌提要,大多數貼文都有一個形狀:照片、粗體標題、細重音欄、日期和角落裡的手柄。這些是照片卡。它們的設計是因為它們是根據固定佈局構建的,其中只有文字和圖像發生變化,這也是為什麼一個團隊可以每週發布數十個,而每個頁面看起來都不一樣。
本指南涵蓋了卡片在提要尺寸下可讀的原因、手機上的文字尺寸如何縮小、哪些顏色通過對比度指南、為什麼卡片應該匯出為PNG、如何使方形卡適應其他平台以及隱私邊緣在哪裡。這 照片卡產生器 用於逐步部件,下面描述的每個設定都是該工具提供的設定。
TL;DR: 照片卡是由模板製成的社交圖形:將圖像、標題和支援文字放入固定佈局中。照片卡產生器有八個模板(經典報紙、現代粗體、突發新聞、報價卡、極簡主義、功能卡、漸變新聞和垂直報價)、50 種Google 字體、重音、背景和文字顏色選擇器、圖像比例和位置控制以及可選徽標。每張卡片都會匯出為 1080 x 1080 PNG,在瀏覽器中呈現。您的圖像是在本地閱讀的,而不是上傳的,儘管字體是從 Google Fonts 載入的。它是免費的,無需註冊。
什麼是照片卡?
照片卡是一種方形或矩形社交媒體圖像,它將照片與疊加或相鄰的文字結合起來,從可重複使用的模板中排列出來。新聞媒體使用它們來分享標題,品牌使用它們來發佈公告,創作者使用它們來引用。模板固定版式、間距和位置;作者提供內容。
這種分裂才是重點。模板一次解決設計決策:標題相對於圖像有多大、日期在哪裡、文字周圍有多少空間。更改單字不能破壞這些關係,因此由相同模板製作的卡片來源讀作一致的出版物。
您應該選擇哪個模板?
選擇卡片必須攜帶的內容。每個範本僅公開其佈局使用的文字字段,因此切換時內容面板會變更。
| 模板 | 佈局 | 文字欄位 | 最好 |
|---|---|---|---|
| 經典報紙 | 大圖像,下面是文字區域 | 標題、小標題、日期、網域 | 一般新聞和部落格文章 |
| 現代大膽 | 圖片上半部,標題和摘要如下,固定並引用;閱讀更多內容;按鈕 | 標題、小標題、日期 | 公告 |
| 突發新聞 | 紅色標題條、圖像、標題、滾動式股票行情欄 | 標題、小標題、日期 | 對時間敏感的更新 |
| 報價卡 | 引用一張深色背景照片 | 標題(引文)、小標題(歸屬)、日期 | 拉出您有權分享的報價 |
| 極簡主義 | 具有充足空白的框架影像 | 標題、小標題、日期 | 簡單的陳述、活動日期 |
| 功能卡 | 圖片、重疊圓形標誌、頁腳條 | 標題、小標題、日期、網域 | 長篇文章 |
| 梯度新聞 | 全出血影像、重音漸層、頁腳欄 | 標題、類別、日期、網域 | 以圖像為主導的故事 |
| 垂直報價 | 引用面板左,肖像圖像右 | 內容(引文)、作者、名稱、日期、網域 | 帶有演講者照片的引言 |
大多數模板都有日期變更線,有些模板會新增網域或句柄欄位;任何欄位都可以清除。有些標籤固定在佈局中,例如 "突發新聞&引用;在突發新聞條和 " 上;閱讀更多內容;在現代粗體上。只有當您新增標誌時,標誌槽才會出現;如果沒有一個,模板會隱藏徽標區域而不是顯示空框架。
社交卡上的文字應該有多大?
比顯示器上看起來更大。卡片的設計寬度為 1080 像素,但在手機來源中查看時大致與螢幕寬度相同,典型的手機寬度約為 390 CSS 像素。這意味著卡片上的所有內容都以大約 390 /1080 = 設計尺寸的 36% 顯示。
以下是模板使用的大小文字的作用:
| 1080 px 卡上的尺寸 | 390 px 寬進給中的近似尺寸 | 可讀性 |
|---|---|---|
| 64 像素標題 | 23 像素 | 非常清楚 |
| 48 像素標題 | 17 像素 | 清除 |
| 32 px 子標題或頁尾 | 12 像素 | 可讀 |
| 24 像素詳細文字 | 9 像素 | 小,需要注意 |
| 20 px 元資料 | 7 像素 | 很難讀 |
算術只是尺寸 × 390 /1080。對於 48 像素標題,48 × 0.361 = 17.3 像素,相當於手機上舒適的正文。在 20 像素時,結果約為 7,這就是為什麼卡片上的日期和手柄是裝飾性的,而不是必需的。將讀者必須看到的任何內容放在標題中,而不是頁腳中。
這也設定了長度的實際限制。標題以 48 像素纏繞為 5 行,迫使模板擠壓影像或溢出。目標是大約 6 到 12 個單字的標題。
照片卡應該使用什麼顏色?
選擇能夠保持文字可讀性的顏色與文字背後的顏色。網路內容可訪問性指南設定了一個有用的基準: 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 | 失敗 | 失敗 |
前兩行是生成器'預設值。您可以使用以下方式檢查任何一對您自己的品牌顏色 顏色對比度檢查器,並且 顏色對比度指南 解釋了該比率是如何計算的。
直接放置在照片上的文字沒有單一的對比度,因為照片各不相同。 Gradient News 等模板處理時,文字下方有漸變,並帶有文字陰影。當您為這些模板選擇一張照片時,請選擇標題所在區域較暗或較平靜的照片。
如何製作照片卡,一步一步
- 打開 照片卡製造商 並從模板下拉式中選擇一個模板。它的範例文字載入到內容欄位中。
- 替換每個欄位中的文字。按在標題或內容框內輸入,以強制您想要的位置換行。
- 新增主圖像:按一下上傳區域選擇文件,或將圖像 URL 貼到其下方的欄位中。
- 使用比例滑桿(0.5x 至 2.0x)以及 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 x 1080 | 按原樣使用 |
| Instagram 肖像動態 | 1080 x 1350 | 用遮罩在上方和下方添加空間 |
| LinkedIn 或 X 連結樣式影像 | 1200 x 627 或 1600 x 900 | 裁剪成寬條或放在寬啞光上 |
| YouTube 縮圖 | 1280 x 720 | 裁剪至 16:9,然後稍微放大 |
| Instagram 故事 | 1080 x 1920 | 放在高高的霧面 |
裁剪會失去部分卡片;啞光保留全部。對於 YouTube 縮圖,將 1080 平方裁剪為 16:9 會保留一條 1080 x 608 的條帶,並從頂部和底部刪除 236 個像素。將該條帶放大到 1280 x 720 的比例為 1280 /1080 = 1.19,這是一個輕微的放大。如果您打算這樣做,請將標題保持在卡片的垂直中心附近,這樣作物就不會切穿它。這 社群媒體圖片裁剪器 是否使用平台預設進行作物,以及 圖像調整大小指南 解釋擴大對品質的影響。
要將整個方形卡片保留在更高或更寬的畫布上,請將其放在背景上 霧面產生器.
您的照片已上傳嗎?
您的照片不會上傳到 Toolz。當您選擇檔案時,瀏覽器會將其作為資料 URL 讀入記憶體,卡片會放在頁面中,下載由 html2canvas 庫在本地呈現,該庫會重新繪製頁面'將 HTML 繪製到畫布上。不過,有三個網路和儲存詳細資訊值得了解:
- 字體來自 Google 字體。 字體列表是從載入的
fonts.googleapis.com,因此您的瀏覽器會向 Google 請求 Google 在其中描述的字體檔案 Google Fonts 隱私常見問題. 您新增的文字和圖像不屬於這些請求的一部分。離線時,尚未載入的字體會回退到預設字體。 - 圖像 URL 是從主機取得的。 如果您貼上圖像 URL 而不是上傳文件,您的瀏覽器會從該位址載入圖像,就像任何網頁一樣。
- 工作已保存在您的瀏覽器中。 您的文字、顏色和圖像保存在瀏覽器中'本地存儲,以便它們在重新加載時能夠保存下來。在共用電腦上,清除它們後按重置。
常見問題以及如何解決
下載的卡片顯示與預覽不同的字體。 當您按一下「下載 PNG」時,字體尚未完成加載,因此匯出回預設字體。選擇字體後等待一兩秒鐘,然後再次匯出。
下載中缺少貼為 URL 的圖像。 將遠端影像渲染到可下載的畫布中需要影像主機允許與 CORS 標頭跨來源使用,這是一個限制 html2canvas 文件 筆記。許多網站不會發送它們。下載圖像並將其作為文件上傳。
影像被切斷或有空白。 使用比例滑桿以及 X 和 Y 位置滑桿。縮放到 1.0x 以下可以顯示照片周圍的模板背景;縮放到它上面會更緊。
文字溢出其區域。 標題對於模板來說太長了。縮短它,或切換到為文字提供更多卡片的模板。
重新載入後卡片會重置,或大圖像不會持續存在。 瀏覽器將每個網站的本地儲存限制為幾兆字節,並且儲存為資料 URL 的大照片可能會超過該值。該卡仍然導出;它可能無法在重新加載中倖存下來。在添加非常大的照片之前調整大小。
文字中的角括號看起來不對。 文字作為標記插入模板中,以便換行工作,這意味著諸如 < 可以讀作標籤的開頭。避免卡片文字中的尖括號。
人們閱讀的卡片提示
- 每張卡帶一個想法。如果它需要兩個標題,則需要兩張卡。
- 裁剪照片,使其主題不會位於範本的標題區域下方。
- 保持您的品牌不變:整個系列的模板、字體和強調色相同。
- 發布時新增替代文字。該圖像是螢幕閱讀器的文字圖片,因此請將標題和關鍵詳細資訊寫入平台's alt 文字欄位。
- 只有發布您有權使用的報價和照片,並準確地屬性報價。
模板卡產生器的替代方案
- 通用設計工具 canva、figma 或 Adobe Express 等公司通常提供帳戶,提供更多範本、免費定位和團隊庫。
- 新聞編輯室和社交調度平台 有時包括與發布工作流程相關的品牌卡片範本。
- 基於程式碼的生成器 將 HTML 渲染到伺服器上的圖像適合自動為每篇文章產生卡片的網站。
瀏覽器範本工具適合中間立場:快速、無帳戶、一致的輸出,並且您的圖像保留在您的電腦上。對於發布之前的相關步驟, 圖像浮水印 在照片中添加徽標或信用,以及 社群媒體工具中心 列出全套。
