PhotoshopCC에서 프로젝트 생성해서 EdgeReflowCC에서 PSD불러오기

AdobeEdgeReflowCC 는 반응형에 최적화된 툴이라고 보시면 됩니다.

반응형으로 웹페이지를 제작하는데 있어 AdobeEdgeReflowCC는 마우스로 비교적 간단이 웹페이지를 만들수 있게 해주는 툴입니다.

AdobeEdgeReflowCC 의 좋은점중 하나가 포토샵의 전용파일인 psd 파일을 불러올수 있다는 점입니다.

여기에는 몇가지 조건이 있는데요. 하나 하나 알아보겠습니다.

먼저 포토샵에서 작업하던 psd 를 열어서 Edge Reflow 프로젝트를 생성합니다.

조건 1. 최신버젼인 14.2 여햐 합니다.

포토샵에서 파일 - 생성 - Edge Reflow 프로젝트 생성을 클릭합니다.

psd의 이름이 프로젝트의 이름이 됩니다.

제가 연 psd 의 이름은 Homepage.psd 입니다.

이제 AdobeEdgeReflowCC 를 엽니다.

참고 삼아 현재 최신버젼입니다.

우측 메뉴바쪽에 보시면 Ps라는 아이콘이 있습니다.

클릭하면 포토샵에서 생성한 프로젝트가 보입니다.

Create New Page 를 클릭하면 기타 설정이 나옵니다.

웹에서 사용할 수 있는 웹폰트나 기본 글꼴을 설정할 수 있습니다. 기본으로 사용하려면 그냥 OK를 클릭합니다.

이런식으로 psd 를 불러올수 있으며 계속해서 추가적으로 psd를 불러올수 있습니다.

Photoshop Asset Sync 를 클릭하면 포토샵에서 작업하던것을 그대로 가지고 올수 있습니다. 

즉 싱크를 맞추듯이 바로 반영이 된다는거죠.

AdobeEdgeReflowCC 에서 작업을 한 후 저장합니다.

Asset Library 를 클릭하면 관련 파일을 AdobeEdgeReflowCC 프로젝트를 저장한 곳에 생성을 합니다.

보시면 아시겠지만 Boilerplate 의 CSS를 사용하며 AdobeEdgeReflowCC 작업한 설정은 Homepage.css 에 저장이되어 html 파일로 만들어져서 브라우져에서 볼 수 있습니다.

이렇듯 포토샵에서 작업한 psd 를 간단하게 반응형으로 만들어서 작업하는것이 무척 간단합니다.

psd가 제작 제작한것이 아니라 스샷을 보여주기가 좀 그렇네요....

크롬이나 AdobeEdgeReflowCC 등에서 제작한것을 쉽게 볼 수 있습니다.