이미지 및 사진 · 브라우저 이미지 및 그림 편집기
래스터 vs 벡터 그래픽: 사진의 그림이 픽셀이 되는 이유
· 배경
이미지 편집 캔버스 브라우저 처리 중
래스터 이미지는 픽셀 격자입니다. 벡터 그래픽은 모양을 그리기 위한 지침입니다. 이 게시물에서는 차이점, 사진이 래스터로만 가능한 이유, 사진에 그리는 모든 내용이 내보낼 때 동일한 운명을 상속받는 이유를 설명합니다.
흐려진 로고와 결코 '벡터화'할 수 없는 사진 — 하나의 설명으로 인한 두 가지 일상의 혼란
흐릿한 로고와 주석이 달린 사진은 종종 같은 문제로 비난되지만, 그것들은 다른 종류의 재료에서 시작됩니다. 벡터 로고는 패스, 획, 채우기에 대한 일련의 지침입니다. 사진은 샘플링된 색상의 유한한 필드입니다. 편집기는 사진을 캔버스 크기의 래스터 비트맵으로 열므로 작업 세계는 선이나 직사각형이 그려지기 전에 이미 픽셀 격자입니다.
사진 위에 상자를 그리고 내보낸 다음 가장자리를 확대합니다. 결과는 주석이 사진과 함께 픽셀을 차지하는 래스터 이미지입니다. 해당 파일을 더 큰 디스플레이 크기의 원본 SVG와 비교하면 차이점이 드러납니다. 내보내기를 확대하면 그리드가 다시 샘플링되고 SVG를 확대하면 경로가 다시 계산됩니다. 이 편집기는 첫 번째 개체를 두 번째 개체로 변환하지 않습니다.
래스터: 색상이 지정된 셀의 그리드 — PNG, JPEG 및 WebP가 사진을 저장하는 방법과 확장이 픽셀을 생성하는 이유
래스터 이미지는 그리드의 위치에 색상을 기록합니다. PNG, JPEG 및 WebP는 인코딩과 압축이 다르지만 내보낸 그림은 표시될 때 여전히 픽셀로 확인됩니다. 1픽셀 경계, 앤티앨리어싱 곡선 및 작은 캡션은 모두 최종 이미지의 유한 샘플입니다. 파일을 위쪽으로 확장하면 추가 샘플을 추정하기 위한 보간 프로세스가 요청됩니다. 원래 그리기 명령을 복구하지 않습니다.
주석이 다양한 크기에서 선명하게 유지되어야 하는 경우 이러한 제한이 중요합니다. 하나의 고정 디스플레이를 위한 스크린샷 콜아웃은 래스터 내보내기로 딱 맞는 반면, 표지판, 인쇄 및 다중 인터페이스를 위한 브랜드 마크는 일반적으로 벡터 자산으로 계속 사용할 수 있어야 합니다. 독립적으로 크기를 조정해야 하는 소스 아트워크 대신 합성 이미지용 편집기를 사용하십시오.
벡터: 수학적으로 설명된 모양 — SVG와 같은 형식의 경로, 획 및 채우기 및 손실 없이 크기가 조정되는 이유
벡터는 표시된 모든 픽셀을 저장하는 대신 형상을 설명합니다. SVG 경로는 곡선, 획 너비, 채우기 및 변환을 지정할 수 있습니다. 그런 다음 렌더러는 현재 크기에 적합한 픽셀을 계산합니다. 이것이 바로 동일한 단순 마크가 여러 차원에 배치되어도 깨끗하게 유지될 수 있는 이유입니다. 설명은 형식 수준의 배경이며 이 편집기가 그러한 지침을 내보내거나 보존한다는 주장이 아닙니다.
브라우저 편집기는 선 및 모양 동작에 일시적으로 기하학적 정보를 사용하므로 놓기 전에 미리보기가 포인터를 따라갈 수 있습니다. 제스처가 완료되면 결과가 래스터 레이어에 그려집니다. 내보내기는 표시되는 레이어를 합성하고 PNG, JPEG 또는 WebP에 대해 canvas.toBlob을 호출합니다. 이 경로에는 SVG 내보내기 또는 벡터 프로젝트 문서가 없으므로 형상이 독립 개체로 유지되지 않습니다.
사진이 본질적으로 래스터인 이유 — 센서는 모양이 아닌 샘플을 캡처하며 변환 변경은 없습니다.
카메라는 센서를 통해 빛의 샘플을 기록하고 해당 샘플을 이미지 데이터로 저장하므로 사진은 래스터 자료입니다. 사진을 벡터로 기술하려면 사진의 질감, 노이즈, 음영, 불규칙한 디테일을 발명된 모양으로 대체하는 해석이 필요합니다. 확대하거나 다르게 내보내면 그리드가 변경될 수 있지만 어떤 작업도 원본 캡처에 포함된 정보 종류를 변경하지 않습니다.
이러한 구별은 사진과 로고가 동일한 것이 되지 않고 한 번의 편집으로 공존할 수 있는 이유도 설명합니다. 로고는 다른 곳에서는 벡터로 시작할 수 있지만 이 편집기에서 래스터 사진에 그려진 후에는 결합된 결과가 픽셀 격자가 됩니다. 향후 재사용이 중요한 경우 원본 로고를 별도로 보존하고, 브라우저 내보내기를 현재 목적에 맞게 완성된 이미지로 처리하십시오.
래스터에 그리기: 편집기가 수행하는 작업 — 편집하는 동안 주석은 모양이 될 수 있지만 내보낸 이미지는 단일 그리드입니다.
동작 중에 선 및 모양 도구는 간결한 기하학적 지침처럼 작동할 수 있습니다. 편집자는 시작점, 끝점, 윤곽선 및 현재 미리보기를 알고 있습니다. 출시 시 해당 지침은 래스터 레이어로 렌더링됩니다. 브러시 자국은 생성된 래스터 페인트이며 텍스트는 이동 가능한 텍스트 개체로 유지되지 않고 배치 시 래스터화됩니다. 따라서 세션은 나중에 개체 수준 편집 가능성을 보장하지 않고도 편리함을 제공합니다.
내보내기는 경계를 명시적으로 만듭니다. 표시되는 래스터 레이어는 하나의 캔버스로 합성된 다음 브라우저를 통해 PNG, JPEG 또는 WebP로 인코딩됩니다. 해당 파일을 다시 열면 사진과 표시가 일반 픽셀로 표시됩니다. 수신자에게 선택 가능한 직사각형, 재사용 가능한 경로 또는 편집 가능한 캡션을 제공하지 않습니다. 단순히 사진을 공유하는 대신 주석을 변경해야 하는 경우 계층화된 세션 또는 소스 자산을 유지하세요.
작업에 적합한 종류 선택 — 벡터 로고를 요청해야 하는 경우와 래스터 내보내기가 정확히 원하는 경우
마크 자체가 이동해야 하는 경우 벡터 자산을 선택하십시오. 로고에 다양한 크기가 필요하거나 다이어그램이 수정될 수 있거나 기호가 여러 배경에 배치되어야 합니다. 공유할 준비가 된 스크린샷, 설명이 포함된 교정본, 눈에 보이는 메모가 포함된 사진이 목표인 경우 래스터 내보내기를 선택하세요. 올바른 결정은 한 가지 형식이 항상 우수하다는 믿음에서 나오는 것이 아니라 다음 사용 시부터 따릅니다.
브라우저 이미지 및 그림 편집기는 두 번째 범주에 적합합니다. 사진에 브러시, 선, 직사각형, 타원 및 래스터 텍스트 표시를 배치한 다음 합성물을 래스터 파일로 내보낼 수 있습니다. SVG를 출력하거나 벡터 객체 모델을 보존할 수 없습니다. 클라이언트가 로고를 독립된 자산으로 요청하는 경우 편집된 픽셀에서 더 큰 버전을 추출하는 대신 원본 벡터 소스로 돌아갑니다.
요약: 어떤 것을 들고 있는지 확인하세요. 브라우저 이미지 및 그리기 편집기가 래스터 이미지를 편집하고 래스터 이미지를 내보내는 방식은 설계에 따라 결정됩니다.
신뢰할 수 있는 정신 모델은 간단합니다. 편집자는 형상을 사용하여 제스처를 설명할 수 있지만 문서와 해당 내보내기는 래스터 이미지입니다. 열려 있는 모든 사진과 편집기 레이어에는 유한한 픽셀 격자가 있습니다. 해당 그리드를 확대하면 기존 정보가 다시 샘플링되고, 내보내면 보이는 레이어가 다른 래스터로 합성됩니다. 이 워크플로우의 어떤 단계도 이미 픽셀이 된 선에서 재사용 가능한 벡터 경로를 생성하지 않습니다.
그리기 전에 파일 형식과 대상 수신자를 확인하세요. 수신자가 하나의 완성된 그림을 봐야 하는 경우 래스터를 내보내고 실제 디스플레이 크기에서 가장자리를 검사하십시오. 수신자가 표시를 편집하거나, 로고를 다시 칠하거나, 아트워크의 크기를 반복적으로 조정해야 하는 경우 적절한 벡터 또는 레이어 소스를 제공하세요. 이러한 구별은 기술적으로 유효한 수출이 다른 종류의 결과물로 오인되는 것을 방지합니다.