뉴스 계정이나 브랜드 피드를 스크롤하면 대부분의 게시물이 모양을 공유합니다: 사진,굵은 헤드라인,얇은 악센트 표시줄,날짜 및 모서리에 있는 핸들. 이들은 포토 카드입니다. 단어와 이미지만 변경되는 고정된 레이아웃으로 제작되었기 때문에 디자인된 것처럼 보입니다. 이는 팀이 각각 다르게 보이지 않고 일주일에 수십 개를 게시할 수 있는 이유이기도 합니다.
이 가이드는 피드 크기에서 카드를 읽을 수 있게 만드는 요소,폰에서 텍스트 크기가 줄어드는 방법,대조 지침을 통과하는 색상,PNG 로 카드를 내보내야 하는 이유,다른 플랫폼에 사각형 카드를 적용하는 방법 및 개인 정보 보호 가장자리가 있는 위치를 다룹니다 포토 카드 생성기 는 단계별 부품에 사용되며, 아래에 설명된 모든 설정은 도구가 제공하는 설정입니다.
TL;DR: 포토 카드는 템플릿으로 만든 소셜 그래픽입니다: 이미지,헤드 라인 및 지원 텍스트가 고정 레이아웃에 배치됩니다. 포토 카드 생성기에는 8 개의 템플릿 (클래식 신문,현대 굵게,속보, 견적 카드,미니멀리스트, 기능 카드,그라디언트 뉴스 및 수직 견적), 50 개의 Google 글꼴,악센트, 배경 및 텍스트 색상 선택기,이미지 스케일 및 위치 제어 및 선택적 로고가 있습니다. 모든 카드는 브라우저에서 렌더링 된 1080 x 1080 PNG 로 내보냅니다. Google 글꼴에서 글꼴이로드되지만 이미지는 로컬로 읽혀지고 업로드되지 않습니다. 무료이며 가입이 없습니다.
포토카드란?
포토 카드는 사진을 겹쳐 놓거나 인접한 텍스트와 결합하여 재사용 가능한 템플릿으로 배치한 정사각형 또는 직사각형 소셜 미디어 이미지입니다. 뉴스 매체에서는 헤드라인을 공유하기 위해 사용하고,브랜드에서는 공지사항에 사용하고,제작자는 인용문에 템플릿을 사용하여 타이포그래피,간격 및 위치를 수정합니다; 작성자는 콘텐츠를 제공합니다.
그 분할이 전체 요점입니다. 템플릿은 디자인 결정을 한 번 정합니다: 헤드 라인이 이미지에 비해 얼마나 큰지,날짜가 어디로 가는지,텍스트를 둘러싸는 공간이 얼마나 큰지. 단어를 변경해도 이러한 관계가 깨질 수 없으므로 동일한 템플릿으로 만든 카드 피드는 하나의 일관된 출판물로 읽습니다.
어떤 템플릿을 선택해야 합니까?
카드가 휴대해야 하는 것에 따라 선택하십시오. 각 템플릿은 레이아웃에서 사용하는 텍스트 필드만 노출하므로 전환할 때 콘텐츠 패널이 변경됩니다.
| 틀 | 레이아웃 | 텍스트 필드 | 위한 최고의 |
|---|---|---|---|
| 고전신문 | 큰 이미지, 아래 텍스트 영역 | 제목, 소제목, 날짜, 도메인 | 일반 뉴스 및 블로그 게시물 |
| 모던 볼드 | 이미지 상단 절반, 헤드 라인 및 요약 아래, 고정 "자세히 보기" 단추 | 제목, 소제목, 날짜 | 공고 |
| 속보 | 빨간색 헤더 스트립, 이미지, 헤드라인, 스크롤 스타일 티커 바 | 제목, 소제목, 날짜 | 시간에 민감한 업데이트 |
| 견적 카드 | 어두운 배경 사진 위에 인용 | 제목(인용문), 소제목(귀속), 날짜 | 공유할 수 있는 권한이 있는 견적을 가져옵니다 |
| 미니멀리스트 | 충분한 공백이 있는 프레임 이미지 | 제목, 소제목, 날짜 | 간단한 진술, 이벤트 날짜 |
| 기능 카드 | 이미지, 겹쳐지는 둥근 로고, 바닥글 지구 | 제목, 소제목, 날짜, 도메인 | 장문 기사 |
| 그라디언트 뉴스 | 풀 블리드 이미지, 악센트 그라데이션, 바닥글 막대 | 제목, 카테고리, 날짜, 도메인 | 이미지 주도 스토리 |
| 세로 따옴표 | 인용 패널 왼쪽, 인물 이미지 오른쪽 | 내용(인용문), 저자, 지정, 날짜, 도메인 | 발표자의 사진과 함께 인용합니다 |
대부분의 템플릿은 날짜 선이 있고,몇몇은 도메인이나 핸들 필드를 추가한다; 어떤 필드든 지울 수 있다. 몇몇 레이블은 레이아웃에 고정되어 있는데,이를테면 "BREAKING NEWS" on the Breaking News strip and "Read More" on Modern Bold 이다. 로고 슬롯은 로고를 추가할 때만 나타난다; 하나가 없으면 템플릿은 빈 프레임을 보여주는 것이 아니라 로고 영역을 숨긴다.
소셜 카드에서 텍스트의 크기는 얼마나 커야 합니까?
모니터에서 보는 것보다 큽니다. 카드는 1080 픽셀 너비로 설계되었지만 대략 화면 너비의 전화 피드에서 볼 수 있으며 일반적인 전화기는 약 390 CSS 픽셀 너비입니다. 즉,카드의 모든 것이 설계된 크기의 약 390 / 1080 = 36%로 표시됩니다.
템플릿이 사용하는 크기의 텍스트에 대한 작업은 다음과 같습니다:
| 1080 px 카드의 크기 | 390px 너비의 피드에서 대략적인 크기입니다 | 가독성 |
|---|---|---|
| 64px 헤드라인 | 23px | 매우 명확합니다 |
| 48px 헤드라인 | 17px | 클리어 |
| 32px 소제목 또는 바닥글 | 12px | 읽을 수 있는 |
| 24 px 세부 텍스트 | 9px | 작은, 주의가 필요합니다 |
| 20px 메타데이터 | 7px | 읽기 힘들다 |
산술은 단순히 크기 × 390 / 1080 입니다. 48 픽셀 헤드 라인의 경우 48 × 0.361 = 17.3 픽셀로 전화기의 편안한 본문 텍스트와 비교할 수 있습니다. 20 픽셀에서 결과는 약 7 이므로 카드의 날짜와 핸들은 필수적이기보다는 장식적입니다. 리더가 헤드 라인에서보아야 할 모든 것을 바닥 글이 아닌 넣으십시오.
이것은 또한 길이에 대한 실질적인 제한을 설정합니다. 48 픽셀에서 5 줄로 감싸는 헤드 라인은 템플릿이 이미지를 짜내거나 오버 플로우하도록 강요합니다. 약 6 ~ 12 단어의 헤드 라인을 목표로하십시오.
포토카드는 어떤 색을 사용해야 하나요?
뒤에 있는 내용과 비교하여 텍스트를 읽을 수 있도록 유지하는 색상을 선택하세요. 웹 콘텐츠 접근성 지침은 유용한 벤치마크를 설정합니다: WCAG 2.2 성공 기준 1.4.3 WCAG가 최소 18 점 또는 14 점 굵게 정의한 일반 텍스트의 경우 최소 4.5:1, 큰 텍스트의 경우 3:1 의 명암비를 요구합니다. 소셜 이미지는 웹 페이지가 아니지만 동일한 임계값은 시력이 낮거나 화면이 희미한 사람들이 읽을 수 있는 내용을 설명합니다.
발전기는 당신에게 3 개의 색깔을 줍니다:
- 악센트 색깔 막대기,알약, 기온변화도 및 강조 모양. 그것은 상표를 나릅니다.
- 배경 이미지에서 다루지 않는 영역을 색칠합니다.
- 텍스트 이를 사용하는 템플릿의 기본 복사본에 색상을 지정합니다; 일부 템플릿은 악센트 패널 위에 흰색 텍스트를 설정합니다.
| 조합 | 명암비 | 일반 텍스트(4.5:1) | 큰 텍스트 (3:1) |
|---|---|---|---|
거의 검은색 #111827 화이트에 #ffffff |
17.7:1쯤 | 패스 | 패스 |
기본 빨간색 악센트에 흰색 #D9232D |
약 5.0:1 | 패스 | 패스 |
중간 회색에 흰색 #999999 |
2.8:1 정도 | 실패하다 | 실패하다 |
연한 노란색 바탕에 흰색 #facc15 |
1.5:1 정도 | 실패하다 | 실패하다 |
처음 두 행은 generator's 기본값입니다. 당신은 당신의 자신의 상표 색깔의 어떤 쌍든지 the 색상 대비 검사기, 그리고 색상 대비 가이드 비율이 어떻게 계산되는지 설명합니다.
사진 바로 위에 놓인 텍스트는 사진이 다양하기 때문에 단일 명암비가 없습니다. Gradient News 와 같은 템플릿은 텍스트 아래에 그라데이션과 텍스트 그림자가 있는 것을 처리합니다. 해당 템플릿에 대한 사진을 선택할 때 헤드라인이 있는 더 어둡거나 차분한 영역이 있는 것을 선택하십시오.
포토카드 만드는 방법, 차근차근
- 열다 사진 카드 메이커 그리고 템플릿 드롭다운에서 템플릿을 선택합니다. 해당 샘플 텍스트는 콘텐츠 필드로 로드됩니다.
- 각 필드의 텍스트를 바꿉니다. 제목이나 내용 상자 안에 Enter 키를 눌러 원하는 곳에 강제로 줄을 끊습니다.
- 기본 이미지 추가: 업로드 영역을 클릭하여 파일을 선택하거나 이미지 URL을 아래 필드에 붙여넣습니다.
- 피사체가 템플릿이 프레임을 구성하는 위치에 위치할 때까지 스케일 슬라이더 (0.5x ~ 2.0x) 와 X 및 Y 위치 슬라이더 (각 -200 ~ 200 픽셀) 로 이미지를 조정합니다.
- 선택적으로 같은 방식으로 로고를 추가하십시오. 정사각형 로고 이미지는 원형 및 정사각형 로고 슬롯에 가장 적합합니다.
- 글꼴 드롭다운을 열고 카테고리(세리프, 세리프, 디스플레이, 필기 또는 고정 공간)별로 검색하거나 필터링한 다음 글꼴을 선택하세요.
- 색상 선택기로 악센트, 배경 및 텍스트 색상을 설정합니다.
- 다운로드 PNG 를 클릭합니다. 파일은 다음과 같이 저장됩니다
photocard-<template>-<timestamp>.png, 따라서 반복된 내보내기는 결코 서로를 덮어쓰지 않습니다.
작업할 때 설정,텍스트 및 이미지가 브라우저에 저장되므로 페이지를 다시 로드하면 카드가 다시 돌아옵니다. 재설정은 해당 항목을 지우고 클래식 템플릿을 복원합니다.
카드가 PNG로 다운로드되는 이유는 무엇입니까?
카드는 대부분 큰 텍스트와 평면 색상이며,그 내용은 JPEG 보다 PNG 로 더 잘 압축되고 더 깨끗하게 보이기 때문입니다. JPEG's 손실 압축은 8 x 8 픽셀 블록에서 작동하며 미세한 디테일을 버립니다. 날카로운 문자 가장자리 주변에는 종종 벨소리라고 불리는 희미한 후광과 얼룩이 나타납니다. PNG 는 모든 픽셀을 정확하게 저장합니다. 에 정의된 무손실 압축을 사용합니다 W3C PNG 사양, 헤드라인이 선명하게 유지됩니다.
| 포맷 | 압축 | 날카로운 텍스트 | 편평한 색깔 지역 | 사진 |
|---|---|---|---|---|
| PNG | 무손실 | 크리스프 | 작고 정확한 | 대용량 파일 |
| JPEG | 손실 | 가장자리 주변의 후광 | 밴딩과 얼룩을 보여줄 수 있습니다 | 작은 파일 |
대부분의 플랫폼은 어쨌든 업로드를 다시 인코딩합니다. 깨끗한 PNG 에서 시작하여 인코더에 가능한 최상의 입력을 제공합니다. 큰 사진이있는 PNG 가 업로드 한도에 비해 너무 큰 경우,the 이미지 압축 가이드 축소하는 방법을 다룹니다.
다른 플랫폼에서 사각형 카드를 어떻게 사용합니까?
모든 템플릿은 1:1 정사각형 인 1080 x 1080 에서 내보냅니다. Instagram 및 Facebook 의 표준 정사각형 피드 크기이며 대부분의 피드에서 자르지 않고 표시됩니다. 다른 배치는 다른 모양을 원합니다.
| 목적지 | 원하는 크기 | 1080 광장에서 |
|---|---|---|
| 인스타그램 또는 페이스북 피드 | 1080 x 1080 | 그대로 사용 |
| 인스타그램 인물 피드 | 1080 x 1350 | 매트 위아래로 공간을 추가하세요 |
| LinkedIn 또는 X 링크 스타일 이미지 | 1200 x 627 또는 1600 x 900 | 넓은 스트립으로 자르거나 넓은 매트 위에 놓습니다 |
| 유튜브 썸네일 | 1280x720 | 16:9 로 자른 다음 약간 확대하십시오 |
| 인스타그램 스토리 | 1080 x 1920 | 키가 큰 매트 위에 놓습니다 |
자르기는 카드의 일부를 잃어 버립니다; 매트는 모든 것을 유지합니다. YouTube 썸네일의 경우 1080 사각형을 16:9 로 자르면 1080 x 608 스트립이 유지되고 위쪽과 아래쪽에서 236 픽셀이 제거됩니다. 그 스트립을 1280 x 720 으로 확대하는 것은 1280 / 1080 = 1.19 의 스케일이며,약간의 확대입니다. 계획하는 경우 헤드 라인을 카드의 수직 중심 근처에 유지하므로 자르기가 자르지 않습니다. 그만큼 소셜 미디어 이미지 자르기 플랫폼 사전 설정을 사용하여 자르기를 수행합니다 이미지 크기 조정 가이드 확대가 품질에 미치는 영향을 설명합니다.
대신 전체 정사각형 카드를 더 크거나 더 넓은 캔버스에 보관하려면 배경에 놓으십시오 매트 발전기.
사진이 업로드 되나요?
당신의 사진은 Toolz 에 업로드되지 않습니다. 파일을 선택하면 브라우저가 데이터 URL 로 메모리에 읽고 카드는 페이지에 배치되며 다운로드는 html2canvas 라이브러리에 의해 로컬로 렌더링되며 page's HTML 을 캔버스에 다시 그립니다. 그래도 알만한 가치가있는 세 가지 네트워크 및 저장 세부 정보가 있습니다:
- 글꼴은 Google 글꼴에서 가져온 것입니다. 글꼴 목록이 로드됩니다
fonts.googleapis.com따라서 귀하의 브라우저는 Google이 설명하는 글꼴 파일을 Google에 요청합니다 Google 글꼴 개인 정보 보호 FAQ. 추가하는 텍스트와 이미지는 해당 요청의 일부가 아닙니다. 오프라인에서는 아직 로드되지 않은 글꼴이 기본 서체로 돌아갑니다. - 이미지 URL은 호스트에서 가져옵니다. 파일을 업로드하는 대신 이미지 URL을 붙여넣으면 브라우저는 모든 웹 페이지와 마찬가지로 해당 주소에서 이미지를 로드합니다.
- 작업은 브라우저에 저장됩니다. 텍스트,색상 및 이미지는 browser's 로컬 저장소에 저장되므로 다시 로드해도 살아남습니다. 공유 컴퓨터에서 다시 설정을 누르면 지우기가 완료됩니다.
일반적인 문제와 해결 방법
다운로드한 카드는 미리보기와 다른 글꼴을 보여줍니다. PNG 다운로드를 클릭했을 때 글꼴 로딩이 끝나지 않았으므로 내보내기가 기본 서체로 되돌아갔습니다. 글꼴을 선택한 후 1~2초 정도 기다렸다가 다시 내보냅니다.
URL로 붙여넣은 이미지가 다운로드에서 누락되었습니다. 원격 이미지를 다운로드 가능한 캔버스로 렌더링하려면 이미지 호스트가 CORS 헤더와 함께 원본 간 사용을 허용해야 하지만 이에 대한 제한은 다음과 같습니다 html2canvas 문서 참고. 많은 사이트가 보내지 않습니다. 이미지를 다운로드하고 대신 파일로 업로드하십시오.
이미지가 잘리거나 빈 공간이 있습니다. 스케일 슬라이더와 X 및 Y 위치 슬라이더를 사용합니다. 1.0x 이하로 스케일링하면 사진 주위의 템플릿 배경이 드러날 수 있습니다; 그 위의 스케일링은 더 단단하게 자릅니다.
텍스트가 해당 영역을 오버플로합니다. 템플릿에 대한 헤드라인이 너무 깁니다. 단축하거나,텍스트에 더 많은 카드를 제공하는 템플릿으로 전환하십시오.
카드를 다시 로드한 후 카드가 재설정되거나 큰 이미지가 지속되지 않습니다. 브라우저는 로컬 저장소를 사이트당 몇 메가바이트로 제한하고 데이터 URL 로 저장된 큰 사진은 이를 초과할 수 있습니다. The card still exports; it just may not survive a reload. 추가하기 전에 매우 큰 사진의 크기를 조정합니다.
텍스트의 각도 괄호가 잘못되었습니다. 텍스트는 마크업으로 템플릿에 삽입되므로 선이 작업을 중단합니다. 이는 다음과 같은 문자를 의미합니다 < 태그의 시작으로 읽을 수 있습니다. 카드 텍스트에서 각도 괄호를 피하십시오.
사람들이 읽는 카드에 대한 팁
- 카드당 하나의 아이디어로 리드하세요. 헤드라인이 두 개 필요하다면 카드 두 장이 필요합니다.
- 사진을 자르면 제목이 템플릿의 헤드라인 영역 아래에 위치하지 않습니다.
- 브랜드를 일정하게 유지하십시오: 시리즈 전체에서 동일한 템플릿, 글꼴 및 악센트 색상.
- 당신이 게시 할 때 alt 텍스트를 추가. 이미지는 화면 판독기에 단어의 그림이므로 platform's alt 텍스트 필드에 헤드 라인과 키 세부 사항을 작성합니다.
- 사용할 권리가 있는 인용문과 사진만 게시하고 인용문을 정확하게 귀속시킵니다.
템플릿 카드 생성기의 대안
- 일반 설계 도구 canva, Figma 또는 Adobe Express와 같은 제품은 일반적으로 계정과 함께 훨씬 더 많은 템플릿, 무료 포지셔닝 및 팀 라이브러리를 제공합니다.
- 뉴스룸 및 소셜 스케줄링 플랫폼 게시 워크플로우와 연결된 브랜드 카드 템플릿을 포함하는 경우도 있습니다.
- 코드 기반 생성기 모든 기사에 자동으로 카드를 생성하는 서버 슈트 사이트의 이미지에 HTML을 렌더링합니다.
브라우저 템플릿 도구는 중간 지점에 적합합니다: 빠르고,계정이 없으며,일관된 출력이 가능하며,이미지가 컴퓨터에 유지됩니다. 게시하기 전에 관련 단계에 대해,the 이미지 워터마커 사진에 로고나 크레딧을 추가합니다 소셜 미디어 도구 허브 전체 세트를 나열합니다.
