CSS Copy 기능은 포토샵 CS 6.1 버전에서 업데이트 된 기능입니다. 포토샵 CC에서는 기본으로 설치돼 있습니다. 이것은 포토샵을 이용해서 버튼이나 HTML 요소를 이미지로 만들고 CSS Copy를 선택하면 스타일시트를 자동으로 만들어주는 기능입니다. 이를 그대로 스타일시트에 붙여서 사용하면 됩니다. 하지만 포토샵의 모든 효과가 스타일시트로 전환되는 것이 아니라 일부는 스타일시트를 생성하지 못합니다. 그래서 제3자 확장 프로그램이 개발됐습니다. 우선 포토샵 CC의 CSS Copy 기능을 알아보겠습니다.
포토샵 CC로 직접 버튼을 만들어도 되지만 부트스트랩 PSD 파일을 이용해보겠습니다. 이 파일을 포토샵 CC에 열고 기존에 열려있는 요소들을 안보이도록 눈아이콘을 모두 꺼준 다음 버튼 그룹의 Main Buttons Small - Normal 의 눈 아이콘을 켜주고 Primary Buttons의 레이어를 선택합니다. Main Buttons Small - Normal 의 레이어를 선택하면 모든 버튼의 CSS가 복사되지만 시간이 오래 걸립니다. 선택한 다음 오른쪽 마우스 클릭하면 메뉴가 나옵니다. copy CSS를 클릭하면 클립보드에 복사됩니다.
코드를 실험할 수 있는 위의 사이트로 이동합니다. CSS 창에 복사해온 코드를 붙여넣고 HTML 창에 <button class="Primary BTN_Primary">버튼</button> 코드를 만듭니다. 위치 속성인 position, left, top을 제거하면 버튼이 창 바로 아래에 만들어집니다. 클래스 선택자는 포토샵의 레이어 이름이 그대로 사용됩니다. 그러니 html 코드에 바로 사용하기 위해서는 원하는 레이어 이름을 입력하는 것이 좋습니다.
포토샵 CC의 레이어스타일을 열면 여러가지 스타일이 적용됐지만 CSS는 Inner Shadow나 Drop Shadow가 제대로 적용이 안됩니다. 그래서 외부 확장 플러그인을 사용해봅니다.
위 사이트로 이동해서 zxp 파일을 내려받습니다.
포토샵 CC 뿐만 아니라 다른 버전의 확장 프로그램도 있습니다.
확장 프로그램 관리자에 열고 설치합니다. 이 프로그램은 포토샵 버전별로 별도로 있으니 해당 버전의 프로그램을 이용해 설치해야합니다.
포토샵 CC는 CC 관리자 프로그램에서 설치하면 됩니다.
확장 프로그램이 설치되면 메뉴의 Window-->Extension에 CSS3Ps가 만들어집니다. 이를 클릭하면 도구 아이콘이 만들어집니다. Primary Buttons 레이어를 선택하고 CSS3Ps의 패널을 클릭하면 해당 웹사이트로 이동합니다.
스타일시트의 양에 따라 코드가 만들어지는 시간이 달라집니다. 만들어지면 버튼의 스타일시트가 나타나고 버튼에 적용된 모양을 볼 수 있습니다. 포토샵 CC의 코드와는 달리 inset 속성값이 추가돼서 버튼의 하이라이트 부분이 나타납니다. CSS 뿐만 아니라 SCSS, SASS까지 만들어집니다.
어도비 프로그램에 추가된 기능을 보면 플래시에서 벗어나서 HTML5와 CSS를 적용할 수 있는 기능을 많이 추가한 것으로 생각됩니다. 특히 엣지 프로그램은 기존에 플래시에서 만들어지던 애니메이션이 HTML5와 CSS3, 자바스크립트로 쉽게 만들어지고 있습니다. 코드를 몰라도 에니메이션을 쉽게 만들 수 있습니다. 기회가 되면 엣지 프로그램군(엣지 에니메이트, 엣지 리플로우, 엣지 인스펙트)에 대해서 알아보겠습니다.
