MiriCanvasに提出する素材は、以下の内容をご参考に制作を行ってください。
イラスト素材のファイル形式の設定
| SVG | PNG |
|
容量が150KBを超えないベクター素材(EPS、AI)はSVGファイル形式で保存して下さい。 |
容量が100KBを超えるベクターまたは |
SVG素材の作成方法
SVGはベクター素材なので、Abobe Illustratorを使用して制作して下さい。
線オブジェクトをアウトライン化し、すべてのオブジェクトをアウトラインのみで作成してください。
1) Illustratorで新しいドキュメントを作成します。
2500 x 2500px / RGB / 72dpi
2) アートボードにベクター素材を作成します。
3) Object > Artboard > Fit to Artwork Bounds(アートボードのサイズを[選択オブジェクトに合わせる]機能)をクリックします。
4) レイヤーにある全てのオブジェクトを選択し、グループ化して保存します。
※注意事項
SVG素材に使われている、同系列の色はすべて一つの色に統一する必要があります。
5) CSSのプロパティは必ずプレゼンテーションのプロパティを選択し、[OK]をクリックします。
※SVG素材におけるカラー調整のノウハウについて
MiriCanvasにSVG素材を登録する場合、ユーザーが色をカスタマイズできるように設定する必要があります。
上記のような作業をカラー調整と言います。
1) 明暗がつけられたところはブラック(#000000)、明るさが入ったところはホワイト(#FFFFFF)で処理し
、透明度(Opacity)を調整します。
2) レイヤーにあるすべてのオブジェクトをグループ化した後、保存します。
SVG素材制作時の注意事項
1) 人物のSVG素材は肌の色を変更できるように制作してください。
2) 先に設定した明暗(#000000)及び、明るさ(#FFFFFF)が入った部分は色を変更できないように
カラーロック設定をしてください。
3) SVG素材は最大5色の使用をおすすめ致します。
4) ホワイト(#FFFFFF), #353840のカラーは使用を控えてください。
#FFFFFF、#353840はMiriCanvasのエディタの背景色と同じであるため、素材リストで形が
表示されなくなります。
※SVG素材の境界線(crack)を取り除くTIP!
SVGを作成する時、オブジェクトの色の境目に線(crack)が見えることがあります。
境界線(crack)の例)以下の画像をご参考ください。
1) オブジェクト全体を選択して、別のレイヤーにコピーします。
2) パスファインダーの合体で一つのオブジェクトにします。
3) 境界線(crack)が見える領域の下にオブジェクトを置きます。
4) MiriCanvasエディタで背景 > 単色背景 > 黒を選択した後、境界線(crack)が見えるか確認します。
PNG素材の作成方法
PNGはビットマップ画像で、Adobe Photoshopを使用して制作します。
1) Adobe Photoshopで新しいドキュメントを作成します。
9800 x 9800px / RGB / 120dpi / 背景透明化(Transparent)を設定します。
2) 新しいドキュメントで素材を作成するか、イラストで作成した要素をコピー+ペーストで読み込み
ます。
・貼り付けオプション:Smart Objectを選択
3)切り抜き機能を使用して、アートボードのサイズを素材のサイズに合わせます。
4)File > Save As > PNG形式を選択し、保存します。
Smallest / Slow & Noneオプションを選択した後、[OK]をクリックします。
PNG素材作成時の注意事項
1) #FFFFFF、#353840はMiriCanvasのエディタの背景色と同じであるため、素材リストで形が
表示されなくなります。
2) Ctrl(Cmd) + U + Lightness(明るさ)を -5 ~ -3に設定してください。