Photoshop 문서의 HiDPI 화면용 이미지 등 다양한 해상도의 웹에 최적화된 이미지를 일괄적으로 추출하는 방법을 살펴봅니다.
일괄적으로 에셋 추출

새로운 일괄 추출 기능을 사용하여 Dreamweaver의 Extract 패널에 있는 Photoshop 문서를 열어 다양한 해상도에 맞게 바로 사용할 수 있는 이미지를 추출합니다. 웹 이미지에 맞게 다양한 해상도가 지원되므로 사용하는 디바이스의 해상도에 따라 웹 사이트를 최적화하여 최고의 이미지를 표시할 수 있습니다.

일괄적으로 추출

Dreamweaver Extract에서 PSD 업로드

batch-extract-assets.zip 프로젝트 파일을 다운로드하고 압축을 풉니다. Dreamweaver CC에서 index.html을 열고 Extract 작업 영역으로 전환합니다.

Extract 패널에서 PSD 업로드를 클릭하고 프로젝트 파일에 포함된 vermilion-design.psd를 엽니다.

Dreamweaver Extract에서 PSD 업로드

Extract 패널에서 메인 이미지를 선택하고 Extract 아이콘을 클릭하여 에셋 추출 옵션을 엽니다.

이미지를 추출하기 전에 사이트 구조에 맞는지 추출할 위치 및 파일 이름 지정 속성을 확인합니다. 이 작업을 하려면 환경 설정 편집 아이콘을 클릭합니다.

메인 이미지 선택

Extract 환경 설정

기본적으로 Dreamweaver는 이미지를 MDPI(중간 해상도), XHDPI(고화질 해상도) 및 XXHDPI(최고 화질 해상도)와 같이 세 개의 해상도로 추출합니다. 환경 설정 대화 상자에서 다음을 수행합니다.

  1. 추출할 해상도를 지정합니다.

  2. 파일 이름에 추가할 접미사를 사용자 정의합니다.

  3. 이미지를 저장할 폴더를 선택합니다.

폴더 섹션에서 각 세 개 해상도의 파일 경로 앞에 images/를 추가합니다. 적용을 클릭합니다. 그런 다음 닫기를 클릭합니다.

Extract 환경 설정

이미지 추출

에셋 추출 옵션에서 에셋 이름 및 파일 유형과 같은 추가 사항을 설정할 수 있습니다.

다중 저장을 클릭합니다.

추출이 완료되면 파일 패널을 열어 일괄 추출 프로세스의 결과를 확인합니다. Extract 환경 설정에 따라 메인 이미지를 세 개의 해상도로 추출하고 사이트 구조의 사용자 정의 폴더에 추가합니다. 한 번의 클릭으로 이 모든 것을 수행할 수 있습니다.

이미지 추출

개별 미디어 쿼리에 이미지 추가

DeviceAware.css를 열어 세 개의 화면 해상도(작은 Non-Retina, 중간 Retina, 큰 Retina)를 정의하는 세 개의 미디어 쿼리를 확인합니다. 각 미디어 쿼리는 CSS 클래스를 포함합니다. 각 클래스에서 background-image 속성을 정의하고 각 미디어 쿼리에 맞게 추출된 이미지로 이동합니다.

예제의 오른쪽에는 중간 Retina 화면을 정의하는 미디어 쿼리와 해당 CSS 클래스가 표시되어 있습니다. 이 경우 해당 이미지를 XHDPI 버전으로 표시하는 것이 좋습니다.

개별 미디어 쿼리에 이미지 추가

백분율을 사용하여 이미지 크기 정의

반응형 웹 사이트의 경우 절대 픽셀 값 대신 백분율 값을 사용하여 폭, 높이 및 기타 위치 속성을 정의합니다.

Extract 패널에서 백분율 측정 단위를 변경하려면 메인 이미지를 선택하고 퍼센트 기호(%)를 선택합니다.

폭 및 높이 속성이 이제 백분율로 표시됩니다. 두 요소를 선택할 경우 거리가 백분율로 정의됩니다. 참고로 Extract 패널에서 바로 CSS를 선택하고 복사하여 코드에 붙여 넣을 수 있습니다.

백분율을 사용하여 이미지 크기 정의
04/11/2018

콘텐츠 제공: Sergiy Maidukov

이 페이지가 도움이 되었습니까?