めも

メモ.

クリップスタジオで使用するカラーセットを画像から作成する

やりたいこと

画像を指定して、画像から色をピックアップしてクリップスタジオで使用できるカラーセットを作成したい。

f:id:misos:20200730205635p:plain
左の画像から、右のようなカラーセットを作成したい

そのために、画像からクリップスタジオで読み込める形式のカラーセットファイルを作成したい。 最終的に、https://img-to-aoc.herokuapp.com/ でクリップスタジオで読み込めるカラーセットのファイルをダウンロードできるようにしました。

カラーセット

クリップスタジオのカラーセットは独自の.cls形式のファイルか、Adobe Color Swatches(.acoファイル)の読み込みに対応している。

CLIP STUDIO PAINT リファレンスガイド - カラーセットパレット

Adobe Color Swatches(.acoファイル)は以下のページに仕様がある。

Color Swatches : Color swatch files are loaded and saved in Photoshop's Color Swatches palette. These are typically stored in the Color Swatches sub-directory in the Presets directory....(省略)

.cls形式のファイルは内部の仕様が不明だったため、.acoファイルでカラーセットを作成し、クリップスタジオで読み込む。

実装

カラーセットの出力

pythonにて実装。画像を読み込み、色をクラスタリングし、.aco で出力する。出力する色の作り方については色についてもう少し勉強したり、他の方の作成したカラーセットを参考にしながら決めていきたい。作ると決めてからクリップスタジオで読み込んで動作確認するまで約1時間かかりました。

Webアプリとしてのリリース

Herokuで行います。

はじめに、documentation に従いHeroku CLIをインストール。 The Heroku CLI | Heroku Dev Center

以降はHerokuのドキュメント通りに実行まで行います。

色の抽出とカラーセットの作成

画像に対してクラスタリングを行い、そのセントロイドのデータを指定された基準でソートします。

colorsys --- 色体系間の変換 — Python 3.8.5 ドキュメント

完成したWebアプリケーション

画像の通信+画像処理が行われるため、一度の処理に数秒〜10秒前後待機時間が発生します。ウェブアプリケーションフレームワークはFlaskを使用しました。

https://img-to-aoc.herokuapp.com/

f:id:misos:20200801021605p:plain
画像から作成したカラーセットのプレビュー

最後に.acoファイルをダウンロードし、クリップスタジオのカラーセットから読み込みを行います。クリップスタジオで先ほどプレビューした色が読み込めていることを確認します。

f:id:misos:20200801021742p:plain

参考文献

sklearn.cluster.KMeans — scikit-learn 0.23.1 documentation

Adobe Photoshop File Formats Specification

リファレンス一覧 - リファレンス - CLIP STUDIO | 創作応援サイト