Sketchでイラストレーターのスウォッチデータを使う方法

  • 8
    Like
  • 0
    Comment
More than 1 year has passed since last update.

イラストレーター(イラレ、Illustrator)で、カラーパレットを作ったのでそれをSketchでも使いたい!例えば、

  • 最近、社内でデザインガイドライン作った!
  • イラストレーター色の管理をするようにした!

でも、Sketchに移行しようと考えている...とかとか。
そんな時のために、Sketchでイラストレーターのスウォッチデータを使う方法があります

イラストレーターで作ったカラーパレットを出力する

イラストレーターで作ったカラーパレットを「スウォッチライブラリ交換用として保存」で保存します。この時の拡張子は 「*.ase」になります

スウォッチライブラリ交換用として保存

スクリーンショット 2015-11-27 0.22.22.png

スウォッチをライブラリとして保存

スクリーンショット 2015-11-27 0.22.53.png

  • ase は、Adobe Swatch Exchange の略らしいです

ase ファイルをclrファイルに変換する

ase ファイルをclrファイルに変換します。clrファイルをSketchでは使います。

ColorTools を利用して変換する

ColorTools というのがあります。

releases から ColorTools-0.2.zip をダウンロード

スクリーンショット 2015-11-27 0.50.28.png

ColorToolsの使い方

デスクトップに ColorTools-0.2.zip を解凍
こんな感じに配置します。作った color_ai.ase を

スクリーンショット 2015-11-28 14.40.40.png

ターミナルで作業する

いわゆる黒い画面です。
起動したら、下記のようなコマンドを実行すると、color_ai.clr というファイルが生成されます

$ cd Desktop/ColorTools-0.2
$ ./Ase2Clr color_ai.ase

注意

clrという拡張子のファイルは、NSColorList というMac OS X のデータのファイルになります。
NSColorListについては、Appleのドキュメントに詳しく書いてあるので参考に。

https://developer.apple.com/library/mac/documentation/Cocoa/Reference/ApplicationKit/Classes/NSColorList_Class/

Sketchに登録する

作った color_ai.clr をSketchに登録します

登録方法

パレットを登録 登録方法
スクリーンショット 2015-11-27 1.01.42.png メニューの View -> Show Colors でカラーパレットを表示して登録可能になります

登録したら利用してみる

利用してみる 利用方法
スクリーンショット 2015-11-27 1.02.06.png 登録されたら普通に利用できます

実は...

このclrは、NSColorList ということで、Apple純正のアプリケーションであれば大体使えます。

Keynote

読み込んで普通に実際に使える

スクリーンショット 2015-11-29 10.14.59.png

まとめ

色をチームで管理する時には、どうしてもバラバラになりやすいですが、スウォッチデータや、clrファイルを用意すれば多少は管理しやすくなるハズ...

This post is the No.2 article of Sketch 3 Advent Calendar 2015