넓은 풍경을 촬영하고 포스트 화면을 열면 앱이 두 개의 가장 좋은 산이 잘린 사각형을 제공합니다. 또는 차트의 스크린 샷을 찍고 피드 크롭은 차트를 공유 할 가치가있게 만든 축 레이블을 제거합니다. 그림은 틀린 모양입니다.
두 가지 방법이 있습니다. 그림을 자르면 틀에 맞출 수도 있고,이미 올바른 모양을 한 배경에 전체 그림을 놓을 수도 있습니다. 두 번째 접근법은 매트라고 하는데,그것이 바로 매트 발전기 빌드: 전체 이미지가 그 안에 배치 된 사각형, 인물 사진 또는 이야기 모양의 캔버스, 그 자체의 흐릿한 복사본 또는 단색. 이 가이드는 무광택이 작물을 이길 때, 기하학이 어떻게 작동하는지, 패딩, 반경 및 그림자 설정이 픽셀에서 수행하는 작업 및 각 플랫폼에 대해 선택할 출력 크기를 설명합니다.
TL;DR: 무광택은 오프셰이프 사진이 놓인 배경이므로 자르지 않고 게시할 수 있습니다. 16:9 이미지를 1:1 로 자르는 대신 전체 이미지를 1080 x 1080 또는 1080 x 1350 프레임 안에 넣고 남은 공간을 흐릿한 사진 사본이나 단색으로 채웁니다. 무광택 생성기는 HTML 캔버스에서 이 클라이언트 측을 수행하며,15 개의 플랫폼 사전 설정,0 에서 25%까지의 패딩,둥근 모서리,선택적인 드롭 섀도우,PNG, JPEG 또는 WebP 내보내기가 있으며 무료이며 가입이 없으며 아무 것도 업로드되지 않습니다.
포토 매트란?
사진 광택이 없는 것은 그림과 그것의 구조의 가장자리 사이 경계입니다. 낱말은 그림 짜맞추기에서 옵니다,절단 창을 가진 매트 널이 인쇄와 유리 사이 앉는 곳에 그래서 이미지는 구조 가장자리에 달리지 않습니다. 소셜 미디어에 아이디어는 판지 없이 동일하: "frame"는 플랫폼이 원하는 종횡비이고,매트는 당신의 그림이 아닙니다 공간을 채우는 무엇이든입니다.
매트의 정의 속성은 이미지에서 아무것도 제거되지 않는다는 것입니다. 구성한 모든 픽셀은 게시물에 남아 있습니다. 거래는 이미지가 더 이상 전체 타일을 채우지 않으므로 동일한 사진의 자르기보다 화면에서 더 작습니다.
무광택을 사용하거나 이미지를 잘라야 합니까?
피사체가 가운데에 앉았을 때 가장자리가 부수적 일 때 자르기. 가장자리가 잃을 수없는 정보를 전달할 때 매트를 사용하십시오. 그것이 전체 결정이며 업로드 화면이하는 모든 것을 받아들이는 것보다 의도적으로 만드는 것이 좋습니다.
| 상황 | 더 나은 선택 | 왜 |
|---|---|---|
| 한 사람의 초상화, 일반 배경 | 크롭 | 주제는 타일을 더 많이 채우고 축소판 크기에서 더 잘 읽습니다 |
| 넓은 풍경 또는 파노라마 | 매트 | 너비는 사진의 포인트입니다 |
| 차트, 코드 또는 대화의 스크린샷 | 매트 | 라벨과 가장자리는 정보를 전달합니다 |
| 전체 개체를 표시해야 하는 제품 샷입니다 | 매트 | 제품에 자르면 목적이 무산됩니다 |
| 양쪽 끝에 사람들이 있는 단체 사진 | 매트 | 작물이 누군가를 제거합니다 |
| 디테일 샷 또는 텍스처 | 크롭 | 지켜야 할 의미 있는 엣지는 없다 |
| 사람들이 스와이프하기를 원하는 매우 넓은 파노라마 | 둘 다 아닙니다 | 대신 회전목마로 쪼개세요 |
결국 작물이 옳다고 결정하면 소셜 미디어 이미지 크로퍼 동일한 플랫폼 사전 설정으로 결정의 해당 측면을 처리합니다. 어느 접근 방식이든 너무 넓은 파노라마의 경우 회전목마 스크롤 생성기 쓸어넘길 수 있는 패널로 자릅니다.
매트는 어떻게 이미지를 사각형에 맞출 수 있나요?
피팅 규칙은 CSS 호출과 동일합니다 object-fit: contain에 정의되어 있습니다 CSS 이미지 모듈 레벨 3 명세: 프레임 안쪽에 그것의 폭 그리고 그것의 고도를 둘 다 지키는 가장 큰 요인에 의하여 심상을 가늠하고, 그 후에 중심에 둡니다. 부호에서 계산은 3 개의 선입니다:
const scale = Math.min(frame.width / image.width, frame.height / image.height)
const width = image.width * scale
const height = image.height * scale
프레임 가장자리에 먼저 닿는 치수가 스케일을 결정합니다. 넓은 이미지가 왼쪽 및 오른쪽 가장자리에 닿고 위와 아래에 막대가 남습니다. 높은 이미지가 위와 아래에 닿고 측면에 막대가 남습니다. 매트 발전기는 패딩을 먼저 적용하여 프레임을 축소 한 다음 남은 부분 내부에서이 핏을 실행합니다.
실수를 사용한 실제 예입니다
1920 x 1080 풍경 사진(16:9)을 찍어 기본 6% 패딩으로 Instagram 사각형 사전 설정인 1080 x 1080에 넣습니다.
- 패딩은 프레임의 6% & #39;s 짧은 측면: 1080 x 0.06 = 모든 가장자리에서 64.8 픽셀.
- 이미지를 위해 남은 공간은 1080 - (2 x 64.8) = 950.4 픽셀 정사각형입니다.
- 적합 척도는 950.4 / 1920 = 0.495 및 950.4 / 1080 = 0.880 중 더 작으므로 0.495입니다.
- 이미지는 너비 1920 x 0.495 = 950.4, 높이 1080 x 0.495 = 534.6으로 그려집니다.
- 수직으로 중앙에 위치합니다: (950.4 - 534.6) / 2 = 207.9에 64.8 패딩을 더하면 상단 가장자리가 272.7픽셀이 됩니다.
도구는 "1080 x 1080 프레임 안에 950 x 535 에 배치로 미리보기의 밑에 이것을 보고한다" 당신은 어떤 다른 케이스든지 동일한 방법으로 검사할 수 있다.
어떤 출력 크기를 선택해야합니까?
게시할 배치의 크기를 선택하고 넓은 이미지의 경우 키가 큰 프레임이 이미지를 더 크게 만들지 않는다는 점을 기억하십시오. 너비가 이를 제한하는 것입니다. 아래 표는 일반적인 사전 설정에서 6% 패딩으로 두 개의 소스 사진에 대해 동일한 적합성을 실행합니다.
| 미리 설정 | 프레임 | 1920 x 1080 풍경이 그려져 있습니다 | 1080 x 1920 전화 초상화가 그려져 있습니다 |
|---|---|---|---|
| 인스타그램 스퀘어 포스트 | 1080 x 1080 | 950 x 535 | 535 x 950 |
| 인스타그램 인물 게시물 (4:5) | 1080 x 1350 | 950 x 535 | 686 x 1220 |
| 인스타그램 스토리 또는 릴(9:16) | 1080 x 1920 | 950 x 535 | 950 x 1690 |
| X 게시물 이미지(16:9) | 1600 x 900 | 1408 x 792 | 446 x 792 |
두 가지가 눈에 띕니다. 풍경 사진의 경우 정사각형과 4:5 초상화는 동일한 이미지 크기를 제공합니다; 인물 프레임은 더 무광택을 추가합니다. 따라서 넓은 사진의 경우 정사각형이 더 깔끔한 선택입니다. 키가 큰 휴대폰 사진의 경우 4:5 인물 사진은 정사각형보다 이미지 높이가 약 28% 더 높습니다(950픽셀 대비 1220). 이것이 세로 사진의 기본값이 초상화인 이유입니다.
도구의 전체 사전 설정 목록은 Instagram (사각형,세로, 풍경,스토리), Threads (사각형,세로), Bluesky (피드 이미지 및 사각형), X (포스트 이미지 및 요약 카드), Facebook 피드,LinkedIn 피드,YouTube 썸네일,Pinterest 표준 핀 및 Open Graph 링크 미리보기를 포함합니다. 플랫폼은 작물을 변경하고 업로드를 다시 인코딩하므로 이를 보증이 아닌 "what fits today"로 처리합니다.
무광택은 어떤 배경을 사용해야 합니까?
이 도구는 네 가지 배경을 제공합니다: 이미지의 흐린 복사본,선택한 단색,흰색 또는 검정색. 흐린 복사본은 기본값이며 일반적으로 사진에 가장 적합한 선택입니다. 왜냐하면 프레임을 picture's 자체 팔레트로 채우기 때문입니다. 색상을 선택할 필요없이.
| 배경 | 처럼 보인다 | 위한 최고의 | 조심하세요 |
|---|---|---|---|
| 이미지의 흐릿한 복사본 | 익숙한 인스타그램 "fill" 보세요 | 사진, 여행, 음식, 화려한 무엇이든 | 바쁜 이미지는 바쁜 배경을 만들어냅니다 |
| 단색 | 이미지 뒤에 있는 플랫 카드입니다 | 브랜드 계정, 제품 샷, 로고 | 사진과 싸우지 않는 색상을 선택하세요 |
| 화이트 | 흰색 벽에 갤러리 인쇄 | 최소 피드, 라이트 모드의 스크린샷 | 밝은 모서리의 사진은 그림자없이 경계를 잃습니다 |
| 블랙 | 시네마 레터박스 | 야간 촬영, 필름 스틸, 어두운 UI 스크린샷 | 어두운 가장자리의 사진은 그림자없이 경계를 잃습니다 |
흐릿한 배경이 만들어지는 방법
흐릿한 배경은 어울리는 색에 대한 추측이 아닙니다. 그것은 당신 자신의 이미지이며,전체 프레임을 채우기 위해 자르고,무겁게 흐려지고 약간 어두워지며,그 위에 날카로운 이미지가 그려져 있습니다. 흐림은 캔버스를 사용합니다 filter 재산, 문서화됨 MDN's CanvasRenderingContext2D.filter 페이지그리고 그 반경은 프레임에 따라 확장됩니다: 짧은 면의 6%이므로 1080 정사각형에 65픽셀입니다.
한 가지 세부 사항은 품질에 중요합니다. 캔버스 가장자리 근처의 흐림은 외부에서 투명한 픽셀로 평균을 내며 테두리 주위에 창백한 테두리를 남깁니다. 도구는 모든면에서 프레임보다 12% 더 큰 배경을 그려서 (1080 사각형에 130 픽셀의 오버 드로우) 이를 방지하므로 흐림은 가장자리까지 샘플링 할 실제 이미지 데이터가 있습니다. 그런 다음 12%의 검은 색 워시가 상단을 넘어 선 날카로운 피사체를 피사체로 계속 읽습니다.
패딩, 코너 반경 및 그림자는 무엇을합니까?
세 가지 설정은 모두 비례하므로 1600 에서와 마찬가지로 1080 픽셀에서도 동일하게 보입니다.
패딩 0 에서 25%에 달리고 frame's 더 짧은 측에 대하여 측정됩니다. 0 에,넓은 심상은 양쪽 가장자리를 만지고 광택이 없는 것은 위와 아래에 막대기로서만 보여줍니다: 순수한 레터박스. 4%와 8% 사이는 그림을 매우 긴축하지 않고 고의적인 경계로 읽습니다. 더 큰 가치는 배경이 디자인의 부분인 따옴표 카드 작풍 포스트를 적응시킵니다. 1080 사각에,패딩의 각 백분율 점은 image's 유효한 폭에서 21,6 화소를 제거합니다.
코너 반경 0 에서 50%까지 실행하고 배치 image's 짧은 측에 대하여 측정됩니다,프레임이 아니라. 위의 풍경 예제와 함께,이미지는 534,6 픽셀 높이,그래서 기본 12% 반경은 약 64 픽셀로 각 모서리를 반올림합니다. 50%에서 짧은 측면은 전체 반원이되어 알약 모양을 제공합니다.
그림자 는 기본적으로 켜져 있습니다. 그것은 frame's 짧은 측의 3%의 흐림을 가진 28% 까만 그림자 및 1%의 아래쪽으로 오프셋입니다,1080 프레임에 32 화소 흐림과 11 화소 하락을 의미하는 유사한 광도의 배경에서 이미지를 분리합니다,정확히 백색 까만 매트가 도움을 필요로 하는 경우입니다.
무광택에 사진을 넣는 방법, 단계별로
- 열다 무료 매트 발전기 그리고 파일을 삭제하거나,찾아보기를 클릭하거나,클립보드에서 붙여넣기를 통해 이미지를 추가합니다. 붙여넣기는 스크린샷의 가장 빠른 경로입니다.
- 그룹화된 사전 설정 목록에서 출력 크기를 선택합니다. 넓은 사진은 Instagram 사각형으로 시작하고 키가 큰 사진은 Instagram 세로.
- 배경을 선택하십시오. 사진을 위해 흐리게 한 사본을 지키십시오; 단색에 전환하고 상표 일을 위한 육 가치를 타자를 치십시오.
- 미리보기를 보면서 패딩,코너 반경 및 그림자 토글을 조정합니다. 미리보기 캔버스는 실제 출력 크기로 렌더링되므로 표시되는 것은 얻을 수있는 파일입니다.
- 형식을 선택하고 다운로드하십시오. 파일의 이름은 원본의 이름을 따서 명명되었습니다
-matte추가, 그래서beach.jpg된다beach-matte.png.
PNG, JPEG 또는 WebP: 어떤 형식을 내보내야 합니까?
결과에 투명도나 날카로운 텍스트가 있을 때 PNG 내보내기,모든 플랫폼에서 허용하는 작은 파일을 원할 때 JPEG,가장 작은 파일을 원할 때 대상에서 지원하는 WebP 내보내기 JPEG 및 WebP 는 92% 품질로 인코딩됩니다.
| 포맷 | 압축 | 투명성을 유지합니다 | 일반적인 사용 |
|---|---|---|---|
| PNG | 무손실 | 예 | 스크린샷, 투명한 매트 위에 로고, 결과 보관 |
| JPEG | 손실, 품질 0.92 | 아니요, 평평해지거나 불투명해집니다 | 모든 플랫폼의 사진 게시물 |
| 웹P | 손실, 품질 0.92 | 예 | WebP를 허용하는 웹사이트 및 플랫폼 |
대부분의 소셜 플랫폼은 어쨌든 업로드 한 것을 다시 인코딩하므로 내보내기 형식은 자신의 복사본보다 피드에 덜 중요합니다. 결과를 더 편집 할 계획이라면 PNG 를 유지하십시오. 업로드하기 전에 파일을 더 작게해야하는 경우 이미지 압축 가이드 품질 설정을 더 깊이 있게 살펴보세요.
투명한 PNG 를 사용할 수 있습니까?
예,그리고 로고와 컷 아웃 제품 샷에 잘 작동합니다. 단색 복합재 위에 놓인 투명한 PNG 는 깔끔하게 합성되므로 매트는 브랜드 사각형에 로고를 넣는 빠른 방법이됩니다. 먼저 배경을 제거해야하는 경우,the 배경 제거기 가이드 그 단계를 다룹니다. 파일의 투명성을 유지하기 위해 결과를 PNG 또는 WebP 로 내보내기; JPEG 에는 알파 채널이 없으며 평평하게됩니다.
무광택은 화질을 저하시킵니까?
아니,소스가 그려진 공간보다 큰 한. 출력 프리셋은 1080 픽셀 이상이고,일반적인 전화 사진은 긴 쪽이 3000 ~ 4000 픽셀이므로 이미지가 축소되어 보이지 않게됩니다. 캔버스는 고품질의 스무딩으로 그립니다.
한 가지 예외는 작은 소스입니다. 600 x 400 이미지를 6% 패딩이있는 1080 사각형에 배치하면 약 1,58 의 요소 인 950 x 634 까지 확장해야하며 확대와 같은 이유로 부드러워 보일 것입니다. 도구는 파일에 없었던 세부 정보를 추가 할 수 없습니다. 소스가 작으면 패딩을 줄이거나 더 작은 사전 설정을 선택하여 스케일 팩터가 1 에 가깝게 유지됩니다. The 이미지 크기 조정 가이드 왜 업스케일링이 흐려지는지, 그리고 언제 허용되는지 설명합니다.
일반적인 실수 및 오류 메시지
몇 가지 문제가 충분히 자주 발생합니다.
- "그 파일은 이미지가 아닙니다." 도구는 디코딩하기 전에 file's 보고된 MIME 유형을 확인합니다. 이 단계에서 실수로 끌어온 PDF 또는 문서가 거부됩니다.
- "그 이미지를 읽을 수 없습니다." 파일은 이미지라고 주장하지만 브라우저는 그것을 디코딩 할 수 없습니다. 이것은 손상된 다운로드와 특정 브라우저가 지원하지 않는 형식으로 발생합니다. dropzone 목록 PNG,JPEG, WebP,GIF 및 AVIF; 아이폰에서 HEIC 사진은 일반적으로 먼저 변환해야합니다.
- 매트한 색상이 컬러풀하지 않고 회색으로 보입니다. 아마도 단색 옵션을 선택하고 기본 밝은 회색을 남겼을 것입니다. 배경을 흐린 복사본으로 다시 전환하십시오.
- 흰색 이미지가 흰색 매트로 사라집니다. 그림자를 켜거나 약간의 패딩을 추가하거나 흐릿한 배경으로 전환하십시오.
- 게시물이 여전히 잘립니다. 내보낸 사전 설정이 게시한 위치와 일치하지 않습니다. Instagram 피드 게시물로 업로드된 1200 x 630 Open Graph 이미지가 잘립니다. 1.91:1 은 가로 게시물로만 허용되기 때문입니다.
- 다운로드가 시작되지 않습니다. 다운로드 수는 일일 사용량 한도에 포함됩니다. 한도에 도달하면 도구에 파일이 아닌 메시지가 표시됩니다.
뭐 올라온 거 없나요?
아니요. 이미지는 HTML에 합성된 로컬 개체 URL로 읽혀집니다 <canvas> 브라우저 탭의 요소이며 캔버스가 있는 파일로 인코딩됩니다 toBlob 에 설명된 방법 WHATWG HTML 캔버스 사양. 어떤 이미지 데이터도 서버로 전송되거나 저장되거나 기록되지 않습니다. 페이지가 로드되면 연결이 끊긴 네트워크로 계속 작동합니다. 사용 추적 기록은 사용한 사전 설정,배경 및 형식만 기록하며 이미지는 기록하지 않습니다.
온라인 매트 발전기의 대안
브라우저 도구는 여러 경로 중 하나입니다.
- The platform's 는 선택권을 적합했습니다 소유합니다. 일부 업로드 화면,Instagram's 그 중,그것을 자르는 대신 일반 막대와 프레임 내부에 사진을 넣을 수 있습니다. 그것은 빠르지만,당신은 배경,패딩 또는 그림자에 대한 거의 또는 전혀 제어 할 수 없습니다.
- 전화 사진 편집기. 많은 갤러리 앱과 편집 앱에는 "fit" 또는 "no crop" 배경이 흐릿한 모드가 있습니다. 전화기의 단일 사진에 잘 작동하며 결과는 앱마다 다릅니다.
- 데스크톱 디자인 소프트웨어. Photoshop,Affinity 또는 Figma 는 정확한 픽셀 위치를 포함하여 모든 권한을 부여합니다. 시간이 더 오래 걸리고 소프트웨어가 설치되어야 합니다.
- 명령줄. ImageMagick은 이미지를 고정된 크기로 패딩할 수 있습니다
-gravity center -extent 1080x1080서버의 일괄 작업에 적합합니다.
클라이언트 측 접근 방식의 장점은 설치 또는 계정이 필요하지 않으며 모든 운영 체제에서 동일하게 작동하며 사진을 장치에 보관한다는 것입니다. 단일 게시물 또는 일반적으로 가장 빠른 옵션 인 작은 배치의 경우 수백 개의 이미지에서 스크립트가 승리합니다.
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 10 소셜 미디어 도구 허브 다음을 포함하여 관련 유틸리티를 한 곳에 나열합니다 포토 카드 생성기 견적 및 뉴스 카드용 이미지 워터마커 게시하기 전에 로고나 크레딧을 추가하세요.
