アセット書き出しとは

こんにちは。

今週も早いもので折り返し地点にきました^o^

あと2日頑張っていきます！

そんなこんなで、今日はアセット書き出しについてお話ししようと思います！

これがとても便利なんです・・・！

実は働き始めた時、書き出しする方法は「web用に保存」する方法しかないと思っていました・・・^^;

私が通っていた訓練校ではツールの使い方などの基礎を学ぶだけだったのでwebに関しての操作は身に付いていない状態でした。

訓練校によってはそこまで教えてくれるのでしょうか(＞＜)

でもこういうのはやはり実務で経験してみないと気づかないことも多いのかなと思いました。

それぞれの方法にメリット、デメリットがありその場に応じて使い分けるといいみたいです(￣^￣)ゞ

簡単にご説明すると、レイヤー名を拡張子込みの保存したいファイル名に変えて書き出しするというものです。

画像をSVG形式で書き出しする場合は「web用に保存」の方法ではできないのでその過程で教えていただきました。

知った時こんな方法もあるのかとびっくりしました笑

さっそく見ていきましょう！

慣れると簡単です＾＾

アセット書き出しの方法

適当に画像を見立てて長方形を作りました。

これをアセット書き出ししたいと思います！

レイヤーを拡大するとこのような状態です。

今は「長方形１」というレイヤー名ですが、これを保存したいファイル名に書き換えます。

今回は実務をイメージして、コンタクトページにある画像という感じで「contact_img01.jpg」としました。

画像は基本JPGで保存します。

そして拡張子込みで入力しないといけないので注意！

PNG,JPEG,SVGどれでもつけることができます＾＾

すごいですよね笑

ただ、元々の画像がPNGで作られていた場合はSVGで書き出しできなかったり・・・と

イレギュラーもあります。アイコンなどですね。

下記の画像のようにファイル→生成→画像アセットに✔︎

そうすると画面上は何も起こりませんがFinderにいくと

フォルダ名＋　-assets というフォルダが作られてその中に画像が入っています！

このようにレイヤー名を変えて「画像アセット」にチェックを入れるだけで自動的に画像が書き出されます！！

便利ですよね＾＾

もちろん複数設定していたらその分だけ書き出しされます！

画質やサイズなどを詳細に設定できたりこれまた便利なのですが、それは明日の記事にしようと思います！

では今日はここまで〜〜