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

2022년 7월 1일부터 Extract 패널의 기능은 Dreamweaver 21.2 및 이전 버전에서 사용이 중단됩니다. Adobe Photoshop을 사용하면 스타일 정보, PSD 구성 요소의 에셋을 추출하여 Dreamweaver에서 재사용할 수 있습니다.

수영장으로 다이빙하는 모습의 일러스트레이션

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

PC 모니터, 태블릿, 휴대폰에 표시된 Queen of Flora 웹 사이트

Dreamweaver Extract에서 PSD 업로드

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

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

Extract 패널에서 PSD를 업로드하여 라이브 뷰에 사이트 에셋 표시

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

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

메인 이미지가 선택된 상태에서 에셋 추출 옵션 설정

Extract 환경 설정

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

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

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

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

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

Extract 환경 설정에서 경로 앞에 images/ 하위 폴더 추가

이미지 추출

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

다중 저장을 클릭합니다.

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

에셋 추출 옵션에서 다중 저장 클릭

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

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

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

각 미디어 쿼리의 배경 이미지를 CSS 스타일 시트로 설정

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

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

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

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

Extract 패널에서 백분율 측정 단위를 설정하여 이미지 크기 비율 정의
01/31/2022

컨트리뷰터: Sergiy Maidukov

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