인스타그램에 하나의 이미지로 게시된 파노라마는 피드에서 얇은 줄무늬로 변합니다. 서너 개의 슬라이드로 잘라 회전목마로 게시된 동일한 파노라마가 화면을 가득 채우고,스와이프는 마치 카메라를 패닝하는 것처럼 그림을 가로질러 움직입니다. 효과는 설명하기 간단하고 약간 잘못되기 쉽습니다: 한 픽셀을 슬라이드하거나,나머지 슬라이드보다 마지막 슬라이드가 좁아지고,스와이프가 점프합니다.
이 가이드에서는 원활한 캐러셀이 작동하는 방식, 주어진 파노라마에 필요한 슬라이드 수, 실제 픽셀 수로 절단 산술이 어떻게 보이는지, 사용 방법을 설명합니다 회전목마 스크롤 생성기 toolz에서 브라우저에서 슬라이싱을 수행합니다.
TL;DR: 이음새가 없는 회전목마는 그들의 가장자리를 정확하게 공유하는 동등한 활주로에 잘린 1 개의 넓은 심상이고,순서대로 이렇게 강타해서 올려 놓는 것은 그림을 두루말합니다. 활주 조사 slide's 종횡비로 분할된 panorama's 종횡비입니다: 3:1 파노라마는 3 개의 정연한 활주 또는 4 개의 초상화 (4:5) 활주입니다 회전 목마 스크롤 생성기 그 카운트를 제안,정확히 많은 slides' 로 이미지를 자르기; 폭의 가치,전체 픽셀 경계에 컷,및 JPEG,PNG 또는 WebP 로 1080 px 넓은 슬라이드를 내보냅니다 번호가 매겨진 zip 에서. 그것은 클라이언트 측을 실행,아무것도 업로드,무료, 가입 없음.
원활한 Instagram 회전 목마 란 무엇입니까?
매끄러운 회전목마는 슬라이드가 하나의 이미지의 연속 조각인 회전목마 포스트입니다. 한 사진에서 다음 사진으로 이동하는 대신 뷰어가 스와이프하고 그림이 틈새를 가로질러 계속됩니다. 풍경 사진작가는 파노라마에 사용하고 디자이너는 긴 일러스트레이션에 사용하며 브랜드는 여러 프레임에 걸쳐 실행되는 타임라인이나 제품 라인업에 사용합니다.
회전목마가 스트립에서 슬라이드를 나란히 보여주고,포스트의 모든 슬라이드의 크기가 같기 때문에 작동합니다. 슬라이드 1 이 원본의 픽셀 열 1,200 에서 끝나고 슬라이드 2 가 열 1,200 에서 시작하면 조인이 보이지 않습니다. 슬라이드 2 가 열 1,198 또는 1,203 에서 시작하면 그림의 조각이 반복되거나 사라지고 직선 수평선 또는 눈에 보이는 단계로 표시되는 건물 가장자리에서.
두 플랫폼 규칙은 다른 모든 것을 형성합니다. 이 글을 쓰는 시점에서 Instagram 은 하나의 캐러셀에서 최대 20 개의 슬라이드를 허용하며 게시물의 모든 슬라이드는 첫 번째 슬라이드의 종횡비를 공유합니다; 다른 모양의 슬라이드는 일치하도록 잘립니다. 플랫폼은 이러한 세부 사항을 수시로 변경하므로 고정 사양이 아닌 현재 동작으로 처리합니다.
어떤 슬라이드 모양을 선택해야합니까?
인물 사진 4:5 는 일반적인 선택입니다. 왜냐하면 Instagram 피드가 표시하는 가장 높은 모양이고 전화기에서 가장 많은 화면을 차지하기 때문입니다. 사각형과 풍경은 구성이 적합 할 때 거기에 있습니다.
발전기는 각각 1080px 너비로 내보낸 세 가지 캐러셀 모양을 제공합니다:
| 슬라이드 모양 | 출력 크기 | 비율(너비/높이) | 3:1 파노라마용 슬라이드 | 4:1 파노라마용 슬라이드 |
|---|---|---|---|---|
| 세로 (기본값) | 1080 x 1350 | 0.8 | 4 X 1000 X 1000 X 1000 X 400 X 400 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X | 5 X 1000 X 1000 X 1000 X 100 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 50 X 5 |
| 스퀘어 | 1080 x 1080 | 1.0 | 3 X 1000 X 1000 X 1000 X 100 X 100 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X 30 X | 4 X 1000 X 1000 X 1000 X 400 X 400 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X 40 X |
| 풍경 | 1080x566 | 1.91 | 2 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X | 2 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X 2000 X |
표의 슬라이드 수는 다음 섹션에서 다루는 한 부문에서 나옵니다. 주목해야 할 패턴은 좁은 슬라이드가 동일한 너비를 커버하기 위해 더 많은 슬라이드가 필요하다는 것입니다. 인물 사진 슬라이드는 슬라이드 당 파노라마의 가장 높은 높이를 보여 주며 일반적으로 풍경 사진을 크게 느끼게하는 것이지만 더 많은 스 와이프가 필요합니다. 풍경 슬라이드는 더 적고 짧은 프레임의 파노라마를 보여 주며 스카이 라인과 같은 매우 넓고 얕은 이미지에 적합합니다.
파노라마에는 몇 개의 슬라이드가 필요합니까?
파노라마's 종횡비를 slide's 종횡비로 나눈 다음 가장 가까운 전체 슬라이드로 반올림합니다.
slides = round( (image width / image height) / (slide width / slide height) )
인물 사진 슬라이드의 3:1 파노라마의 경우: 3 / 0.8 = 3.75, 이는 4로 반올림됩니다. 정사각형 슬라이드의 경우: 3 / 1 = 3. 가로 슬라이드의 경우: 3 / 1.908 = 1.57, 이는 2로 반올림됩니다.
6000 x 1500 이미지와 같은 4:1 파노라마의 경우: 4 / 0.8 = 세로 슬라이드 5개, 정사각형 슬라이드 4 / 1 = 4개, 가로 슬라이드 4 / 1.908 = 2.1이므로 가로 슬라이드 2개.
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 캐러셀 도구에 파노라마 이미지를 추가하자마자이 계산을 실행하고 1 과 10 사이에 답을 고정하고 & quot;4 와 같은 선으로 슬라이드 슬라이더를 설정합니다. image's 비율 가장 밀접하게 일치합니다." 슬라이더 자체는 2 에서 10 까지 실행됩니다. 일단 움직이면 제안은 선택을 무시하는 것을 멈 춥니 다; 새 이미지를 추가하거나 다른 슬라이드 모양을 선택하면 제안이 다시 나타납니다.
카운트가 완벽하게 분할되는 경우는 거의 없으므로 무언가를 제공해야 합니다. 더 많은 슬라이드로 반올림하면 파노라마의 위쪽과 아래쪽에서 약간 트림됩니다. 더 적은 수의 슬라이드로 반올림하면 왼쪽과 오른쪽에서 트림됩니다. 생성기는 절단하기 전에 중앙에 한 번 트림을 만들기 때문에 모든 슬라이드가 동일한 크기로 나옵니다.
공구는 솔기 없이 어떻게 슬라이드를 자르나요?
그것은 세 단계로 작동하며, 각각은 특정 종류의 솔기를 멈추기 위해 존재합니다.
1단계: 스트립 자르기. 슬라이드는 함께 슬라이드 비율 곱하기 슬라이드 카운트인 하나의 긴 스트립을 형성합니다. 1080 x 4 / 1350 = 3,2 인 4 개의 세로 슬라이드의 경우 도구는 정확히 그 비율로 이미지의 가장 큰 중심 영역을 취합니다. 이미지가 스트립보다 넓으면 측면이 다듬어집니다; 키가 크면 위쪽과 아래쪽이 다듬어집니다.
2단계: 스트립을 전체 픽셀 열로 분할합니다. 스트립 너비는 슬라이드 카운트로 나눈 전체 픽셀 수로 반올림되며 남은 픽셀은 한 번에 하나씩 선두 슬라이드에 나눠집니다. 3 개의 슬라이드에있는 3,199 px 스트립은 1,067 + 1,066 + 1,066 열이 연속되어 있으므로 각 슬라이드는 이전 슬라이드가 끝난 후 정확히 픽셀에서 시작됩니다. 열은 두 번 계산되지 않으며 건너 뛰지 않습니다.
3단계: 각 슬라이드를 출력 크기로 조정합니다. 각 열은 browser's 캔버스를 사용하여 세로 용으로 전체 사전 설정 크기인 1080 x 1350 으로 캔버스에 그려집니다 drawImage 에서 정의된 작업입니다 WHATWG HTML 표준, 고품질 이미지 스무딩으로.
왜 각 slide's 위치를 자주적으로 둥글게 하지 않습니까? 분수 경계가 편류하기 때문에. 지구가 3,201 px 넓고 4 개의 활주가 각각 800.25 px 로 산출되는 경우에,각 시작 및 폭을 반올림하는 것은 그것의 자신에 1 개의 slide's 오른쪽 가장자리 a 픽셀을 다음 slide's 왼쪽 가장자리 지나서 둘 수 있습니다. 주요한 활주를 가로질러 나머지를 퍼지는 것은 모든 경계를 정수 및 다른 사람의 1 개의 근원 화소 내의 각 활주를 유지합니다. 1,067 대 1,066 의 경우에,그 1 개의 여분 근원 화소는 보이지 않는 0,1% 미만에 의하여 산출의 수평한 가늠자를 바꿉니다.
실제 픽셀 수를 사용한 실제 예입니다
4000 x 1333 파노라마, 3.0008 의 종횡비를 가지고, 세로 슬라이드를 선택합니다.
제안된 카운트. 3.0008 / 0.8 = 3.751, 4개의 슬라이드로 반올림됩니다.
4개의 슬라이드를 위한 스트립입니다. 스트립 비율은 3,2 이고,3,0008 의 이미지 비율은 그보다 작으므로 이미지는 스트립보다 상대적으로 높습니다. 도구는 전체 4000 px 너비를 유지하고 높이를 다듬습니다: 4000 / 3,2 = 1,250 px 즉,위쪽에서 약 41,5 px 이고 아래쪽에서 41,5 px 인 83 px 를 제거합니다.
슬라이드. 4000 / 4 = 각각 1,000px이고 나머지는 없으므로 1000 x 1250의 4개 조각은 각각 1.08에서 1080 x 1350으로 확장되었습니다.
4000 x 1333 panorama, portrait, 4 slides
strip: x 0-4000, y 41.5-1291.5 (4000 x 1250)
slide 1: columns 0-999 -> 1080 x 1350
slide 2: columns 1000-1999 -> 1080 x 1350
slide 3: columns 2000-2999 -> 1080 x 1350
slide 4: columns 3000-3999 -> 1080 x 1350
대신 3 슬라이드 선택. 슬라이더를 3 으로 드래그하면 스트립 비율이 2,4 로 떨어집니다. 이제 이미지가 스트립보다 넓어지므로 도구는 전체 1,333 px 높이를 유지하고 너비를 다듬습니다: 1,333 x 2.4 = 3,199.2 px,반올림하여 3,199. 약 400 px 가 각 측면에서 3 으로 분할됩니다. 즉 1,067 + 1,066 + 1,066 px 이므로 첫 번째 슬라이드는 남은 픽셀 하나를 얻습니다.
너무 멀리 밀어붙이는. 6 개의 활주에 지구 비율은 심상 보다는 멀리 더 넓은 0.8 x 6 = 4.8 일 것입니다. image's 비율이 지구 비율의 75% 이하 떨어질 때 발전기는 경고를 보여줍니다. 이 심상을 위해, 0.8 x 6 x 0.75 = 3.6, 및 3.0 는 3.6 보다는 더 적은입니다, 그래서 페이지는 말합니다: "이 심상은 그 모양에 6 개의 활주를 위해 충분히 넓지 않습니다, 그래서 각 활주는 단단한 정상 및 바닥 자르골 것입니다." 5 개의 활주에 문턱은 3.0 이고 심상은 다만 그것을 맑게 합니다.
두 번째 예제는 정확히 맞는 파노라마를 보여줍니다. 6000 x 1500 이미지는 4:1 입니다. 세로 슬라이드에서 제안은 4 / 0.8 = 5 이고 스트립 비율은 5 x 0.8 = 4.0 이며 전혀 트리밍되지 않습니다: 1200 x 1500 의 5 개 슬라이스, 각각 0.9 에서 1080 x 1350 으로 축소 된 정사각형 슬라이드로 전환하고 제안은 4 이며 다시 트림이 없습니다: 1500 x 1500 의 4 개 슬라이스, 1080 x 1080 으로 조정됩니다.
어떻게 캐러셀을 단계별로 만들 수 있나요?
- 파노라마 추가. 열다 인스타그램 회전목마 스플리터 그리고 이미지를 드롭하거나,클릭하여 찾아보거나,클립보드에서 하나를 붙여넣습니다. 브라우저가 디코딩할 수 있는 모든 이미지는 작동하며,이는 실제로 PNG,JPEG, WebP,GIF 및 AVIF 를 의미합니다.
- 슬라이드 모양을 선택합니다. 인물 사진 4:5 가 기본값입니다. 피커 아래의 메모는 모양이 무엇인지 다시 설명합니다.
- 슬라이드 카운트 확인. 제안을 수락하거나 슬라이더를 이동합니다. 미리보기 스트립은 즉시 다시 그리며 헤더는 예를 들어 "4 x 1080x1350"와 같은 출력을 보여줍니다.
- 형식을 선택하고 다운로드. 누르기 "zip" 로 모든 4 를 다운로드하십시오; 전체적인 세트를 위해,또는 " 를 사용하십시오;Slide 1", "Slide 2" 단 하나 활주를 저장하는 단추.
파일은 원래 파일 이름에서 제로 패딩된 번호로 이름이 지정됩니다: harbor.jpg 된다 harbor-01.jpeg, harbor-02.jpeg 등등 내부 harbor-carousel.zip. 패딩은 슬라이드를 모든 파일 관리자에서 스와이프 순서로 유지하므로 휴대 전화에서 모두 선택할 때 중요합니다. zip 라이브러리는 zip 버튼을 누를 때만로드되므로 페이지 자체가 가볍게 유지됩니다.
슬라이드를 인스타그램에 번호순으로 단일 캐러셀 게시물로 업로드하세요. 순서대로 게시하지 않는 것이 올바른 슬라이드 세트가 깨진 것처럼 보이는 가장 일반적인 방법입니다.
JPEG,PNG 또는 WebP 를 내보내야 합니까?
JPEG 는 사진의 기본값이자 올바른 선택입니다. Instagram 은 어쨌든 JPEG 로 업로드를 다시 인코딩하므로 무손실 파일은 더 큰 업로드를 구입하고 마지막에는 아무것도 표시되지 않습니다. JPEG 압축은 에 정의되어 있습니다 ITU-T 권고사항 T.81를 참조하고 생성기는 0.92의 품질로 인코딩합니다.
PNG는 무손실이며 다음에 의해 지정됩니다 W3C PNG 추천그리고 Instagram's 자체 압축이 더 추가되기 전에 하드 에지 주변의 JPEG 아티팩트가 표시되는 일러스트레이션, 다이어그램 또는 텍스트가 포함된 파노라마에 적합합니다.
WebP는 비슷한 품질로 가장 작은 파일을 제공하며 손실 인코딩에도 0.92를 사용합니다. 웹 사이트 갤러리와 같이 Instagram 이외의 다른 곳으로 향하는 슬라이드에 합리적인 선택입니다.
나중에 다른 형식의 슬라이드가 필요하거나 그 폴더를 대량으로 변환해야 하는 경우 가이드를 참조하세요 이미지 형식 변환 JPG, PNG 및 WebP 간의 변경 사항과 각각의 가치가 있는 시기를 다룹니다.
분할하면 화질이 떨어지나요?
절단은 아닙니다; 스케일링은 할 수 있습니다. 각 슬라이드는 전체 해상도로 소스에서 가져온 다음 1080 px 너비로 스케일링됩니다.
슬라이스가 1080 px 보다 넓을 때,각 슬라이스가 1200 px 인 6000 x 1500 예에서와 같이 슬라이드의 크기가 축소되어 눈에 보이는 세부 정보가 손실되지 않습니다. 슬라이스가 1080 px 보다 좁을 때 슬라이드의 크기가 확대되어 더 부드러워 보입니다. 4 개의 세로 슬라이드에있는 4000 x 1333 이미지는 1000 px 슬라이스,온화한 1,08x 확대를 제공합니다. 5 개의 슬라이드로 분할 된 2000 px 와이드 이미지는 400 px 슬라이스,확대 된 2,7x 및 전화에서 부드러워 보입니다.
엄지 손가락의 규칙은 산술에서 다음과 같습니다: 선명한 슬라이드의 경우 소스는 슬라이드 당 최소 1080 px 너비가어야하므로 4 슬라이드의 경우 4,320 px, 5 의 경우 5,400 px입니다. 파노라마가 그보다 작으면 슬라이드가 더 선명 해 보입니다. 확대하면 세부 정보를 추가 할 수없는 이유에 대한 자세한 내용은 가이드를 참조하십시오 품질을 잃지 않고 이미지 크기 조정축소, 확대 및 리샘플링을 거칩니다.
눈에 보이는 솔기의 원인은 무엇이며, 어떻게 고칠 수 있나요?
대부분의 솔기는 다섯 가지 원인 중 하나에서 발생하며 발전기는 처음 두 가지를 제거합니다.
| 증상 | 그럴듯한 원인 | 고치다 |
|---|---|---|
| 접합부에서 얇게 반복되거나 누락된 스트립 | 분수 조각 경계는 독립적으로 둥글게 처리됩니다 | 생성기처럼 전체 픽셀 슬라이싱을 사용하십시오 |
| 마지막 슬라이드는 늘어지거나 짧게 잘린 것처럼 보입니다 | 하나의 슬라이드에 덤프된 나머지 픽셀 | 나머지 부분을 선행 슬라이드에 퍼뜨립니다 |
| 순서가 맞지 않게 슬라이드합니다 | 잘못된 순서로 업로드되었습니다 | 파일 번호 순서로 게시, 01 먼저 |
| 하나의 슬라이드가 나머지 슬라이드와 다르게 잘렸습니다 | 하나의 게시물에 혼합 종횡비가 있습니다 | 모든 슬라이드를 동일한 모양으로 내보냅니다 |
| 피사체가 얼굴이나 표지판의 중앙을 잘랐습니다 | 슬라이드 경계가 피사체에 도달합니다 | 경계가 이동하도록 슬라이드 수를 변경합니다 |
마지막 줄은 기술적인 문제가 아닌 구성 문제입니다. 4 개의 슬라이드로 경계는 스트립의 25%, 50% 및 75%에 위치합니다; 3 개의 슬라이드로 33% 및 67%에서. person's 얼굴이 조인에 정확히 착륙하면 한 슬라이드보다 많거나 적은 일반적으로 컷을 무해한 곳으로 이동합니다. 조인의 얼굴과 텍스트는 스 와이프에서 살아남지 만 뷰어가 단일 슬라이드에서 멈출 때마다 어색해 보입니다.
도구의 한계는 무엇입니까?
슬라이더는 2 에서 10 슬라이드까지 실행됩니다. Instagram 은 더 많은 것을 허용하지만 10 을 지나면 일반적인 파노라마는 더 이상 각 슬라이드에 실제 세부 정보를 제공 할만큼 너비가 충분하지 않으며 각 슬라이드는 그림으로 읽기를 멈추는 좁은 스트립이됩니다.
자르기는 항상 중앙에 위치합니다. 파노라마의 중요한 부분이 상단 또는 하단 가장자리 근처에 있고 선택한 카운트가 높이를 다듬는 경우 카운트를 변경하거나 소스를 먼저 자릅니다 소셜 미디어 이미지 자르기초점을 선택할 수 있습니다.
입력은 브라우저가 이미지로 식별한 파일이고 디코딩할 수 있어야 합니다. 이미지가 아닌 파일은 이름이 지정된 메시지와 함께 거부되며 손상된 이미지 또는 브라우저가 읽을 수 없는 형식의 파일은 gets "That image could not be read." iPhone의 HEIC 사진은 대부분의 브라우저에서 디코딩되지 않으므로 먼저 변환하십시오.
사이트의 모든 도구와 마찬가지로 다운로드는 일일 사용량 한도에 포함됩니다. 워터 마크가 없으며 계정이 필요하지 않습니다.
파노라마는 아무데나 올라와있나요?
아니요. 이미지는 브라우저의 HTML 캔버스에서 디코딩,잘라내기, 슬라이스 및 인코딩되며 zip 은 로컬로 조립됩니다. 서버로 전송되거나 저장되거나 기록되는 것은 없으며,페이지가 로드된 후에는 연결이 끊긴 상태로 계속 작동합니다. 아직 게시하지 않은 미공개 제품 샷이나 클라이언트 작업에 중요합니다.
캐러셀 포스트 관련 도구
스크롤 생성기는 소셜 게시물용으로 제작된 소수의 다른 이미지 도구와 나란히 위치하며 모두 클라이언트 측입니다.
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 소셜 미디어 이미지 자르기 9 점 초점 그리드를 사용하여 단일 이미지를 15 개의 플랫폼 크기로 자릅니다. The 매트 발전기 전체 그림이 회전 목마 전에 작은 전체 파노라마를 보여주는 커버 포스트에 맞는 피드를 살아남을 수 있도록 사각형 또는 초상화 매트에 비 정사각형 이미지를 넣습니다. 그만큼 사진 카드 생성기 템플릿에서 견적 카드와 뉴스 스타일 그래픽을 구축합니다 워터마커 게시하기 전에 모서리나 타일에 로고나 서명 워터마크를 추가합니다. 세트의 모든 도구는 에 나열되어 있습니다 소셜 이미지 도구 허브.
