AIツール解説 Webデザイン基礎

画像生成AIをクリエイティブに活用! Adobe Firefly×Illustrator でデザインを作成

画像生成AI使ってみたいけど。。どうやって使えば。。

そんなデザイナーさんに朗報です。

画像生成AIを活用して、パーカーのロゴをデザインしたのでその方法を実際に納品したデザインから紹介します。

AIを使って、私自身では描けないグラフィックデザインが出来たことと時短での制作ができました。

是非この記事をヒントに活用方法を広げていってくれれば幸いです。

画像生成AIでイメージの画像を作る Adobe FireFly活用

まずは元となる画像作成から。

今回のテーマは手書き風、海の生き物、一色なので、

プロンプトで「サメ 後ろ姿 水中から撮った モノクロ 手書き風」 

チェックではグラフィック→リノカットを選択します。リノカットを選択することでオブジェクトをはっきりとした線で表現できるので、後に行うイラストレーターでのトレースがしやすくなり、単色デザインに向いています。

リノカットとは:リノリウムと呼ばれる樹脂や木紛、コルク粉などを亜麻仁油と混ぜたものを、ジュートなどの布に塗布して固めた素材(ゴム板のような合成樹脂材)を彫って版にする版画の技法です。 このリノカット技法の特徴は、大胆で荒削りな躍動感のある描画を表現できることです。

▼出来上がった画像がこちら▼

画像生成AIでは、思った通りの画像がすぐに出来るわけではありません。何回も試したりプロンプトを変えることで思い通りの画像を生成して行きましょう。

Adobe Illustrator 【イラストレーター】で画像トレース

1:出来上がった画像をイラストレーターに貼り付ける

2:トレース→トレース結果とアウトライン→拡張

【トレース結果とアウトライン】→ 【拡張】

3:調整

【グループ解除】してから、不要なパスを消していきます。

ダイレクト選択ツール(A)と消しゴムツールで不要なパスを消去します。

サメの後ろ姿のベクター画像が完成です。

仕上げとモックアップ画像

では、こちらの画像を使って仕上げて行きます。

好みの色に変更します。(今回はチャコールグレー)

後はお好みの文字と組み合わせます。

モックアップの作成

イラストレーター2024では便利な新機能が搭載され、なんとモックアップが作成できるのです!

今までフォトショップで作成していたようなモックアップがイラストレーター単体でできるようになりましたので、是非試してみてください!

クライアントへの提案やチェック等で使えますよ!

モックアップしたい写真と画像データを両方選択→【モックアップを作成】

組み合わせて完成です。

他にもモックアップで作ってみました。

まとめ

いかがでしたでしょうか?

今回は画像生成AIのリノカット画像からデザインを作成する方法を紹介しました。

AIを使って、イメージの補完とイメージ画像のイラスト化を行いかなりの時短でデザインを作ることができました。

皆様の参考になれば幸いです。

※今回のデザインは実際に沖縄のダイビングショップ(Dive Focus 様)からご依頼いただいたツアーパーカーのデザイン案件から紹介させていただきました。

▼画像生成AIを学習していち早く使いこなせるように▼

  • この記事を書いた人

Gasson

Webデザインと海を愛する現役Webディレクター クリエイティブのヒントとなる情報と海のBLOGを発信します。

-AIツール解説, Webデザイン基礎