동기

어느 정도 Illustrator에 익숙해지면,

직사각형 객체를 대량으로 만들어도 관리하기 쉽습니다

어차피 아이콘이나 일러스트는 Illustrator에서 만든다

견본 창에서 색상 폴더를 사용할 수 있습니다

그렇기 때문에 웹페이지의 캠프를 만들 때 Photoshop이 아닌 Illustrator를 사용하는 것이 많아졌다.
특히, Illustrator와 머티리얼 디자인의 친화성은 매우 기분이 좋다.

머티리얼 디자인을 기반으로 사이트를 만들 때 Polymer가 Materialized되어 프레임 워크를 사용하는 경우가 많습니다.
그 프레임워크 내에서 사용되고 있는 칼라를 견본에 ​​등록할 수 있으면 매우 편리한 것은? 라고 생각했다.

개요

Photoshop을 사용하여 프레임 워크 (이번에는 Materialize)의 CSS를 기반으로 호환되는 견본 파일을 만듭니다.

Illustrator를 사용하여 색상 견본을 색상 폴더에 결합합니다.

전제

Materialize CSS 파일이 로컬로 다운로드되었습니다.

CSS 로딩 절차(@Photoshop)

로드 준비

Photoshop을 시작하여 적당히 웹용 파일을 새로 만든다.



대체로 같은 느낌으로 기본 견본이 표시됩니다.
이번에는 필요 없기 때문에, Alt+Click(Command+Click?)로 하나씩 지워 간다.



깨끗이.

CSS 로드

오른쪽 상단의 '견본 메뉴'를 열면 '견본 로드'가 표시됩니다.



클릭하면 읽을 파일을 선택하게 되므로, 파일 형식을 「*.css」로 해 건의 CSS 파일을 읽어들인다.



로드한 상태의 캡처를 찍는 것을 잊었다.

가져온 견본을 호환 가능한 형식으로 저장

다시 견본 메뉴를 열고 교체용 견본 저장을 선택합니다.



저장처는 Illustrator의 사용자 정의 파일을 두는 장소가 좋다고 생각했다.
덧붙여서 자 환경에서는 여기.



이상으로 Photoshop에서의 작업은 끝.

견본 로드 절차(@Illustrator)

견본 로드

Illustrator를 시작하여 빈 파일을 열고 불필요한 견본을 제거합니다.
'견본' > '견본 라이브러리 메뉴'(왼쪽 하단) > '사용자 정의'에서 'Materialize'를 로드할 수 있습니다.

컬러 폴더로 묶기

Photoshop에는 "컬러 폴더"라는 개념이 (아마) 없기 때문에 Illustrator에서 사용하기 쉽도록 컬러 폴더에 견본을 정리하고 싶다.



"Materialize"탭의 견본을 완전히 선택하면 견본 창에 추가됩니다.
그 추가된 견본을 새로운 컬러 폴더에 정리해 다시 "교환용으로 견본을 저장"하면 행복해졌다.

감상

스크립트라든지 사용해 더 스마트하게 할 수 없는 것일까.

라고 하는 것도, Materialize는 클래스명으로 색 지정하기 때문에, 견본의 이름도 Hex가 아니고 셀렉터로 해 주었으면 했다.

Illustrator 맛있어

참고 웹페이지

Photoshop에서 웹 디자인을 효율화하는 편리한 사용법 | LIG

Adobe Photoshop * 컬러 피커 및 견본 사용자 정의

Adobe Illustrator CC에서 원본 컬러 그룹 저장 - Qiita