AiファイルからadobeXDで画像切り出し

クラウドソーシングで案件をこなしていると、「aiファイルのデザインからコーディング」という案件が割とあると思います。初めのうちはデザインを行わずコーディングのみ勉強している方だとAdobe Illustratorは持っていないかと思います。毎月料金がかかるアプリですのでなかなか初心者の方には手が出しづらいものですよね。

そこで今回はAiファイルからAdobeXDを使って画像を切り出していく方法を書いていきたいと思います。aiファルとはAdobe Illustratorから作成されたファイルのとこです。AdobeXDは無料で使えますので初心者でも勉強して使う価値があると思います。

adobeXDで画像切り出し

今回Aiファイルではありませんが方法は一緒ですので、XDでこのような簡単なLPの例を作成しました。

「タイトル」の部分の画像切り出し方法

この部分はCSSでも記述することができますが画像で切り出した方が楽です。もし、クライアントの意向によりなるべく文字でお願いしますと言われていたらhtml,cssを使って書いていきましょう。

画像として切り出すには以下の手順で行います。

1. 切り出したいものをグループ化
2. 複製
3. 書き出し

切り出したいものを複数選択して、右クリックよりグループ化してください。

グループ化したものを選択し「shift」+「option」+ドラッグして複製してください。このコマンドを使うと、水平方向に固定されて複製できるのでおすすめです。（複製しなくても書き出しは可能ですが、後々複数まとめて画像を書き出したいときに複製してあるとどの画像を切り出すのかがわかりやすいため複製しています。）

複製したものを右クリックし「書き出し対象にする」左上の「ファイル」から「書き出し」で画像を書き出すことができます

なかなか文章では伝わりづらいので動画を参考にしてください。

adobeXDコマンド

おまけで、adobeXDコマンドで覚えておいた方が良いコマンドを軽くまとめましたので、この辺は覚えておいて損はないかと思います。

画像書き出しはスピードが重要ですのでこのコマンドを覚えてスピードを上げていきましょう！