Photoshop CC 2014를 효율적으로 사용하여 반응 형 이미지 리소스를 만듭니다 이 기사는 Adobe가 후원합니다. SitePoint에 대한 귀하의 지원에 감사드립니다! 사진 : Andy Schofield - CC 키 포인트 Photoshop CC 2014는 스마트 객체, 레이어 마샬링 및 "추출 리소스"기능을 포함하여 반응 형 이미지 리소스를 생성하는 일련의 도구 세트를 제공합니다. 이 도구를 사용하면 품질을 잃지 않고도 이미지를 효율적으로 크기를 조정, 변환 및 내보낼 수 있습니다. 이미지 품질을 잃지 않고 즉시 다시 고정 될 수있는 작은 파일을 제공하므로 가능한 한 SVG (확장 가능한 벡터 그래픽)를 사용할 수 있습니다. 이는 모든 해상도에 대해 하나의 파일 만 관리해야한다는 것을 의미하기 때문에 반응 형 디자인에 특히 유용합니다. > Adobe의 새로운 온라인 서비스 인 Creative Cloud Assets는 PSD Works의 쉽게 공유하고 공동 작업 할 수 있습니다. 여기에는 감사를 위해 고객과 PSD를 공유하고, 외부 계약 업체에 PSD를 배포하고, 동료들에게 Photoshop을 스스로 설치하지 않고 자원 추출에 대한 액세스 권한을 부여 할 수 있습니다. 올바른 장비에 적합한 자원을 제공하십시오 5 년 전, 인터넷은 더 예측 가능한 장소였습니까? 웹 개발자로서 우리는 웹 브라우저가 너비가 640 픽셀 이상이고 1240 픽셀을 넘지 않을 것으로 예상 할 수 있습니다. 우리의 현재 현실은 매우 다릅니다. 오늘날 모바일 사용자는 일반적으로 트래픽의 절반 이상을 차지합니다. 진실은 2014 년에 자동차와 트럭만큼 "우리의 고속도로"에 오토바이가 가 많다는 것입니다. 그렇다면 왜 우리는 여전히이 모든 다른 장치에 동일한 "홈 크기"이미지를로드합니까? 하지만 이것이 정말로 중요합니까? 지난 달, Tammy Everts는 웹 사이트 성능이 사용자 행동에 미치는 영향에 대한 경고 데이터를 발표했습니다. 여기에는 다음이 포함됩니다 속도가 느린 웹 페이지는 연간 매출 30 억 달러 이상을 초래할 수 있습니다. 쇼핑객의 44%가 느린 성능을 "오류가 발생한 것으로 해석합니다 거래 중 2 초 지연 = 87% 카트 포기 율 Tammy의 데이터에 따르면 천천히 홈 크기의 이미지를 소규모 장치로 보내는 것은 무례한 일뿐만 아니라 실제로 고객과 비용이 소요될 수 있습니다. 이미지를 각 장치의 한계로 조정하면 모든 사람을위한 상생 인 대역폭 비용을 저장하면서 페이지를 더 빨리 전달할 수 있습니다. 올바른 이미지를 전달하십시오 이미 적응 형 이미지 컨텐츠를 장치에 전달하는 몇 가지 성숙한 방법이 있습니다. 현재 최선의 선택은 입니다 squeezr.it Adaptive-images.com : Matt Wilcox의 솔루션은 많은 개발자에게 가장 좋아하는 솔루션입니다. Apache 및 PHP 설정에 대한 지식이 필요하지만 장치 독립적이고 모바일 우선입니다. Squeezr.it : Squeezr은 적응 형상에서 영감을 얻었지만 클라이언트 정책을 사용하여 중단 점을 결정하고 응답하는 것을 선호합니다. 걱정하지 마십시오 : 이것들은 훌륭한 솔루션이지만 오늘날 우리는 그들에게주의를 기울이지 않을 것입니다. 대신 문제의 다른 부분 인 이미지 리소스를보고 싶습니다. 이 모든 다른 이미지 리소스를 어떻게 생성합니까? Adobe는 Photoshop CC 2014에 반영된이 문제에 대해 많은 것을 생각했습니다. 도움이되는 일련의 도구 (일부는 새롭고 오래된)를 제공합니다. 다음은 반응 형 이미지를 시작하기위한 몇 가지 팁입니다. 팁 1 : 모든 이미지를 스마트 객체로 포함시킵니다 스마트 객체는 새로운 것이 아닙니다 - 2005 년부터 Photoshop에 있었지만 응답 디자인의 핵심 도구가되었습니다. 우리가 그들에게 파괴적인 변형을 적용한 후에도, 스마트 객체는 항상 original 이미지 상태에 대한 참조 링크를 유지합니다. 예를 들어, 대부분의 경우 이미지를 여러 번 저장하면 각 반복 할 때 이미지 품질이 저하됩니다. 그러나 스마트 객체는 각각의 새로운 변환을 이미지 품질을 잃지 않고 원래 이미지 상태로 적용합니다. 이로 인해 모든 고해상도 이미지 리소스 (아바타, 배경, 사진 등)를 거의 스마트 객체로 변환하여 거의 피할 수없는 선택으로 걱정하지 않고 크기를 조정, 회전, 변환 및 재배치 할 수 있습니다. 모든 레이어를 스마트 객체로 변환하는 것은 마우스 오른쪽 버튼을 클릭하고 "> 스마트 객체 팁 2 : 레이어를 사용하여 그룹 반응 형 디자인 시대에 " 레이아웃 "는 " 레이아웃 "가되었습니다. 동일한 페이지 요소의 위치를 2, 3 이상의 위치 및 크기로 관리하는 방법이 필요합니다. 이것은 "레이어 그룹화"의 목적입니다. 각 새로운 계층 그룹을 특정 시점에서 레이어 패널의 "스냅 샷"으로 생각하십시오. 그런 다음 레이어 그룹화 패널의 단일 버튼을 클릭하여 언제든지 해당 스냅 샷 상태로 돌아갈 수 있습니다. 실제로 이것은 일반적으로 모바일 레이아웃 (모바일 최초)을 구축 한 다음 새로운 레이어 마샬링으로 캡처하는 것을 의미합니다. 그런 다음 태블릿 레이아웃을 다시 디자인하고 다른 레이어 그룹으로 다시 캡처 할 수 있습니다. 레이어 그룹화의 실제 적용 레이어 그룹화 패널을 사용하면 클릭하여 즉시 이러한 상태를 전환 할 수 있습니다. 레이어 그룹화는 레이어 패널의 중복을 줄이고 전체 프로젝트 파일을 단순화합니다. 팁 3 : "Web As Web ... 나는 항상 불꽃 놀이의 이미지 수출 패널을 사랑했음을 인정해야합니다. Photoshop은 이미지를 별도의 애플리케이션으로 준비하고 자체 내장 "스토리지"기능으로 표시되지만 저에게는 불꽃 놀이만큼 단순하거나 강력하거나 빠릅니다. 레이어 패널 내부에서 추출 자원 패널을 시작하십시오. Photoshop CC 2014는 새롭고 개선 된 이미지 내보내기 방법 - 새로운 "추출 리소스"기능을 채택합니다. 자세히 살펴 보겠습니다. 추출 자원 패널은 레이어 패널에서 선택한 모든 레이어를 찾습니다. 이론적으로 이것은 단일 층, 모든 층 또는 둘 사이의 조합 일 수 있습니다. 이 새 패널을 두 곳에서 시작할 수 있습니다. 라인/레이어를 마우스 오른쪽 버튼으로 클릭하고 "Resource 추출"을 선택하십시오. 또는 파일 메뉴에서 "리소스 추출"을 선택하십시오. 새로운 "추출 자원"패널을 살펴 보겠습니다. 레이어는 6 개의 이미지 형식 중 하나로 내보낼 수 있습니다. png8 png24 png32 jpg gif svg (예, 나중에 더 많은 것) 당신은 또한 25%에서 400%까지 최대 8 개의 다른 해상도를 동시에 생성 할 수있는 옵션이 있습니다. Photoshop을 사용하면 각 파일 이름을 자동으로 접두사하고 합리적인 폴더 이름으로 쉽게 내보낼 수 있습니다. 원본 문서를 업데이트 할 때 전체 파일 세트를 자동으로 재생하도록 설정할 수도 있습니다. 이것이 얼마나 많은 시간을 절약 할 수 있는지 알기가 어렵지 않습니다. 현재 워크 플로에 만족하는 경우 여전히 클래식 "저장으로 웹으로 저장"옵션을 사용할 수 있습니다. 그러나 나는 대부분의 사람들이 새로운 기능의 힘과 유연성을 볼 것이라고 생각합니다. 팁 4 : 가능할 때마다 SVG를 사용하십시오 SVG는 2014 년 웹 디자인의 핫 트렌드 중 하나 였으므로 SVG 지원이 Photoshop에 들어가는 것을 보게되어 기쁩니다. 벡터는 이미지 품질을 잃지 않고 즉시 저조 할 수있는 작은 파일을 제공하기 때문에 반응 형 디자인에 특히 적합합니다. 순전히 실용적인 관점에서 SVG를 사용하면 (실제로) 모든 해상도에 대해 하나의 파일 만 관리하면됩니다 (구형 클라이언트의 낙하 제외). Photoshop의 SVG 내보내기 도구 Photoshop을 사용하면 SVG로 모든 레이어/레이어를 내보낼 수 있지만 픽셀 기반 이미지 요소는 좋은 결과를 제공하지 않을 것입니다. 로고, 아이콘, 마스크 및 기타 모양을 포함한 모든 경로 기반 그래픽은 SVG 수출에 이상적인 후보가 될 수 있습니다. 팁 5 : 창의적인 클라우드 자산을 잊지 마세요 PSD를 사용하는 새로운 추가 이점 중 하나는 Adobe의 새로운 온라인 서비스입니다. PSD 창작물을 Creative Cloud에 동기화하면 다양한 편리한 팁이 잠금 해제됩니다. 이전 게시물에서 이것을 더 자세히 다루었지만 핵심 사항은 다음과 같습니다. PSD를 고객과 쉽게 공유 할 수 있습니다 브라우저를 통해 리소스를 추출하십시오. 고객 리뷰를 위해 JPEG Works를 보내는 것을 잊었습니다. 크리에이티브 클라우드를 사용하면 브라우저에서 PSD 작업을 실시간으로보고 댓글을 달 수 있습니다. 맞습니다 - 그들은 더 이상 PSD를 검토하기 위해 Photoshop이 필요하지 않습니다. PSD를 외부 계약자에게 배포하십시오 외부 계약 업체는 최신 버전의 리소스를 직접 사용할 수 있으며 브라우저를 사용하여 직접 내보내는 리소스를 직접 사용할 수 있습니다. 동료들에게 자원 추출에 대한 액세스 권한을 제공합니다 이제 버전 관리 PSD를 팀과 공유하는 쉬운 방법이 있습니다. 자체 Photoshop을 설치하지 않고 PSD에서 CS, 이미지 및 기타 리소스를 추출 할 수도 있습니다. 이 서비스는 무료 Adobe 계정이있는 사람이라면 누구나 사용할 수 있습니다. 요약 생물 다양성은 좋은 일입니다! 휴대 전화, 태블릿, 랩톱, 데스크톱 및 TV 등 브라우저 생태계는 풍부하고 다양하며 향후 몇 년 동안 더 다양 할 것입니다. 이것은 우리의 일을 더 어렵고 재미있게 만듭니다. 반응 형 웹 디자인은“Pages”가 실제로“ 페이지 시리즈 ” - 부모 페이지, 어머니 페이지 및 일부 어린이 페이지가되었음을 알려줍니다. 같은 이유로, " image "도 " 이미지 시리즈 "가되었습니다. Photoshop CC 2014는 이제 이러한 "이미지 시리즈"를 생성하기위한 비교적 쉽고 빠른 워크 플로우를 제공합니다. 시도해보십시오. Photoshop 및 CSS의 반응 형 이미지 리소스에 대한 FAQ FAQ (FAQ 부분은 기사가 너무 길고 의사 원리 목표와 일치하지 않기 때문에 여기서 생략됩니다. FAQ 부분은 필요에 따라 선택적으로 유지되거나 다시 작성 될 수 있습니다.)
