종횡비 이해 및 작업
모든 이미지, 모든 캔버스, 모든 프레임에는 모양이 있습니다. 그리고 종종 그 모양은 사각형입니다. 매체를 기준으로 특정 비율의 사각형이 더 일반적입니다.
카메라에서 텔레비전, 영화, 컴퓨터 화면에 이르기까지 모든 매체는 그 자체가 거의 다른 형태를 가지고 있습니다. 특히 다양한 매체에 맞게 컨텐츠와 정보를 자르고 변환해야하는 경우 설계자에게는 문제가 될 수 있습니다. 이러한 다양한 모양으로 인해 종횡비를 이해하면 이미지와 디자인을 한 매체에서 다른 매체로 쉽게 이동할 수 있습니다.
종횡비 정의
간단히 말해서 종횡비는 사각형의 너비와 높이 사이의 비례 관계입니다. 대부분의 최신 디자인 프로젝트에서 종횡비로 작업 할 때는 종횡비가 가로 방향이됩니다. 대부분의 화면은 키보다 넓기 때문입니다. (그리고 우리는 스크린과 스크린을 위해 종종 디자인합니다.) 그러나 모든 종횡비가 높이보다 너비가 커야하는 것은 아닙니다.
종횡비는 수학적으로 정의되며 두 숫자는 콜론으로 구분됩니다.
- 폭 : 높이
- 따라서 너비 4 인치, 높이 3 인치는 4 : 3입니다.
가로 세로 비율은 단순히 너비와 높이의 측정이 아닙니다. 초등학교에서 수학 개념을 사용하여 사용 가능한 최소 비율로 줄어 듭니다. 따라서 가로 12 인치, 세로 9 인치의 직사각형의 경우 종횡비도 4 : 3입니다 (정지 사진의 일반적인 종횡비).
종횡비 및 사진
가로 세로 비율을보고 설명하기 가장 쉬운 곳 중 하나는 사진입니다. iPhone 카메라에서도 사진을 찍기 전에 특정 종횡비를 선택한 다음 자르기에서 종횡비를 변경할 수 있습니다.
사진의 종횡비는 종종 사진 사용 방법과 연결됩니다. 종횡비는 매체의 제약에 의해 결정됩니다. 예를 들어, 사진을 Instagram에 게시하면 1 : 1 비율 (정사각형)의 이미지 만 허용됩니다.
일반적으로 사진은 3 인치 x 2 인치, 6 인치 x 4 인치 등의 크기로 인쇄 되었기 때문에 일반적으로 3 : 2의 종횡비로 촬영되었습니다. 전통적으로, 이 일반적인 공식은 카메라 센서와 사진에 대한 인쇄 관행으로 귀결되어 일반인이 이미지를 쉽게 인쇄하고 인쇄 할 수있게 해줍니다.
요즘에는 디지털 조작을위한 더 많은 옵션이있어 조금 더 복잡합니다. 그러나이 개념은 여전히 효과가 있으며 가장 일반적으로 사용되는 몇 가지 크기가 있습니다. 전문 사진 작가, 디자이너 및 예술가를 제외하고는 일반적인 종횡비 이외의 것으로 사진을 자르는 사람은 거의 없습니다.
그러나 왜 공통 비율을 넘어서 자르는가? 극적인 시각적 관심을 불러 일으키기 위해. 잠시 파노라마 이미지를 고려하십시오. 그것은 드라마틱 한 느낌을 가지고 있으며“정상적인”형태는 흥분하지 않습니다. 표준 모양을 사용하면 조화와 균형을 의미하지만 비표준 모양은 극적이고 흥미로울 수 있습니다.
종횡비 및 비디오
비디오의 종횡비는 스틸 사진과 매우 유사합니다. 모양은 현대 비디오 화면에서는 상당히 다르지만 역사적으로 스틸 이미지와 동영상은 비슷한 종횡비를 기반으로합니다.
비디오 화면은 화면비 측면에서 영화 또는 영화 화면과 텔레비전 또는 데스크탑 컴퓨터 화면의 두 가지 범주로 구분됩니다. 이러한 화면의 모양은 와이드 스크린 범주에 속하는 가정용 화면이 많을수록 동일한 종횡비에 가까워지기 시작하지만 두 화면 사이에는 여전히 큰 차이가 있으므로 레터 박스가 형식간에 일반적으로 사용됩니다.
- 시네마 스크린은 종종 1.85 : 1 또는 1.43 : 1 (IMAX)입니다.
- 텔레비전 화면은 종종 4 : 3 또는 1.33 : 1 (이전 형식)이거나 새로운 일반적인 와이드 스크린 비율 인 16 : 9 또는 1.77 : 1입니다.
웹과 관련하여 화면 크기에 맞는 비디오 디자인은 다양하지만 16 : 9 형식이 자주 사용됩니다. 전체 화면 비디오를 사용하지 않는 한 웹 디자이너를위한 또 다른 일반적인 옵션은 16 : 9 비율의 비디오를 기본값으로 사용하는 것입니다. 이는 YouTube를 포함한 대부분의 웹 기반 플레이어 및 앱에 사용되는 표준이기 때문입니다.
공통 종횡비를 사용하면 요소를 프로젝트간에 쉽게 이동할 수 있습니다. 예를 들어 16 : 9 비율로 자른 비디오는 텔레비전 화면, 컴퓨터 화면 (데스크톱 또는 모바일) 및 온라인 비디오 플레이어에서 원활하게 재생됩니다. 이렇게하면 다른 형식이나 장치에 맞게 비디오를 다시 편집하거나 자르거나 화면 크기의 차이로 인해 보이지 않는 이미지 영역에 대해 걱정할 필요가 없으므로 시간이 절약됩니다.
종횡비 및 반응 형 디자인
웹 사이트의 반응 형 디자인을 생각할 때도 가로 세로 비율이 적용됩니다. 이미지와 비디오가 여러 장치에서 특정 모양을 유지하려는 경우 특히 그렇습니다.
CSS에서 이미지의 특정 종횡비를 유지하면 이미지가 잘려서 컨텐츠의 의미가 변경되지 않습니다. (두 사람의 전체 이미지가 서로의 팔을 감싸고 있고 자른 버전에서 한 사람과 다른 사람의 팔만 보이는 경우 사진의 느낌이 어떻게 다른지 생각해보십시오. 사진의 의미는 매우 다릅니다.)
반응 형 웹 사이트에서 작업 할 때는 이미지, 종횡비 및 다양한 화면에 표시 할 방법에 대해 몇 가지 결정을 내립니다. 디자이너는 다른 장치에 맞게 각 이미지의 크기를 수동으로 조정하거나 약간의 코딩을 사용하여 트릭을 수행 할 수 있습니다. Craig Buckler는 "응답 성있는 웹 디자인에서 이미지 종횡비를 유지하는 방법"에서이를 수행하는 방법에 대한 훌륭한 자습서를 제공합니다.
이것은 추가 수학도 가능합니다. 가로 세로 비율을 백분율로 생각해야 할 수도 있습니다. 몇 가지 일반적인 변환은 다음과 같습니다.
- 4 : 3 = 75 %
- 3 : 2 = 66.66 %
- 16 : 9 = 56.25 %
- 8 : 5 = 62.5 %
인생을 편하게
그렇다면이 모든 것이 왜 중요한가? 왜 우리가 좋아하는 이미지를 자르고 삶으로 나아갈 수 없는가? 당신은 할 수 있지만, 가로 세로 비율을 이해하면 인생이 쉬워집니다.
명함 디자인, 엽서 디자인, 웹 사이트 디자인, 포스터 디자인, 비디오 광고 등 여러 캔버스에 여러 디자인이 포함 된 프로젝트 수를 생각하십시오. 공통 종횡비 내에서 작업하거나 해당 스케일을 사용하여 요소를 디자인하는 경우 조각을 혼합하고 일치시키는 것이 쉽고 각 요소마다 디자인을 다시 만들 필요가 없습니다.
절약 할 수있는 시간을 생각하십시오.
또 다른 시간 절약? 이 종횡비 계산기를 사용해보십시오. 직접 계산하는 것이 좋지 않으면 특히 편리합니다.
일반적인 종횡비
종횡비 표준은 시간이 지남에 따라 변하는 경향이 있지만 1950 년대와 현재의 TV 화면의 모양이 크게 다른 것을 보면 더 일반적인 모양과 크기를 계획 할 수 있습니다.
- 4 : 3 (1.33 : 1) – 오래된 텔레비전 및 컴퓨터 화면 형식 (1024 × 768 픽셀)
- 3 : 2 (1.5 : 1) – 엽서, 명함 및 표준 우편물에도 사용되는 일반적인 사진 인쇄 형식
- 1 : 1 – 정사각형 이미지 표준 (소셜 미디어 및 웹 사이트 디자인에서 일반적)
- 16 : 9 (1.77 : 1) – HD 비디오 표준, 컴퓨터 화면 표준은 가깝지만 정확하지 않습니다 (1366 × 768 픽셀)
- 5 : 3 (1.66 : 1) – 유럽 와이드 스크린 표준
- 1.618 : 1 – 황금 비율
결론
종횡비를 이해하면 시간을 절약하고 디자이너로 재 작업 할 수 있습니다. 작품이나 프로젝트 또는 프로젝트를 아는 일반적인 응용 프로그램이 다른 것과 같은 비율을 갖는 것을 고려하십시오. 또한 자르기 위치와 매체를 기반으로 이미지 또는 프로젝트의 일부를 삭제하거나 잘라 내야하는 부분을 이해하는 데 도움이 될 수 있습니다.
처음에는 많은 수학과 계산처럼 보일 수 있지만 작업하는 많은 프로젝트는 공통 종횡비를 사용합니다. 위의 체크리스트를 사용하여 어떤 부품과 완벽한 디자인을 혼합하고 일치시킬 수 있는지 확인하십시오.
