MENU
お役立ち記事
【近日公開】AIが物件資料からSUUMO・at homeの入稿文を作成「入稿メイト」|先行登録受付中(無料)

イラストレーターで画像にフィルターをかける方法

今回は、イラストレーターでできる画像にフィルターをかける方法をご紹介します!

基本的に、画像の処理はPhotoshopで行いますが、Photoshopを購入されていない方や、Illustratorは使えるけどPhotoshopは苦手・・という方に向けて簡単なフィルター効果の方法をお伝えしていきます!

まず、誤情報となってしまってはいけないので先にお伝えしておきますが、やはりなんといっても画像処理はPhotoshopに限ります。
Illustratorはデザイン制作ソフトの位置づけなので、本来であれば二つのソフトを使いこなしてこそ完璧なクオリティになるのかなと思います。

が!しかし!
やはりAdobeソフトはそれなりの維持費がかかりますので、お手持ちのソフトで完結できるのであれば、そうしたいですよね。

そんな方に必見でございます☆

まず、どんなことができるのかと言うと↓の画像のような効果を付けることができます☆

左上が元の画像です。
元々白黒に近くてカッコイイ感じの画像ですが、フィルターをかけるとまた違った味わいになって素敵ですよね♪

これらを作る方法がこちら!

はじめに、ここで使う機能【グラデーション】機能ですので準備しておきましょう。
グラデーションは、【ウィンドウ】から開くことができます。

グラデーションパネルの準備ができたら、フィルターをかけたい画像を配置します。
この時、リンク画像ではなく埋め込みにします。リンクと埋め込みについてはこちらから確認

次に、画像の上に長方形を作ります。
長方形のサイズは、画像に対してフィルターをかけたい範囲の大きさでOKです。
ここではわかりやすく、画像と同じサイズにしています。

線は無し、塗は何色でも大丈夫です。

長方形が描けたら、グラデーションパネルで長方形にグラデーションを付けていきます

長方形にグラデーションを付けるには、長方形を選択した状態でツールパネルのグラデーションをダブルクリックするか、先に準備しておいたグラデーションパネルから編集することができます。

更に詳しいグラデーションについてはこちらから確認できます。

試しに、グラデーションの鮮やかな青色の部分を少し濃いめの青に設定してみます。

左側のカラーは白から、濃い目のピンク色にしてみました。

好きなカラーの設定ができたら、選択ツールに持ち替えて(カラーを決定)コントロールパネルにある
【不透明度】から調整します。

不透明度は、【ウィンドウ】→【透明】から開くこともできますよ☺

不透明度を開いて【通常】と書かれているBOXのプルダウンを開くと、たくさんの効果の種類が出てきます☆

試しに【オーバーレイ】にしてみると・・・

じゃん!!!

右側に青系、左側にピンク系のフィルターがかかりました(*’ω’*)!

ちょっとフィルター機能がキツイな、という場合には【不透明度】のパーセンテージを下げると淡く馴染んでくれます!

さらに、のままの状態でグラデーションの編集ができちゃいます。
右側を緑色に変えてみると、、、↓↓のようになりますね。

黄色に変えてみると・・

ネガっぽくなりました!

ここで再び【不透明度】から【ハードライト】に変えてみると

レトロな雰囲気に仕上がりましたね!

これらの機能を【描画モード】と呼びます。

描画モードは選択したカラーによって仕上がりが違ってくるので、色んなパターンを試してみると楽しいですよ~

こちらが【乗算】の仕上がりです。

さて、ここまでは車の画像で試してみましたが、これが人物画像になるとまた素敵な表現をしてくれますよ!

お好きな画像を用意して、同様の手順でグラデーションをかけていきます。

ここでは右にオレンジと左に薄いピンクのグラデーションを作成し、【乗算】に設定します。

更に、グラデーションの角度を変更して右下にオレンジが来るようにしてみました。

どうでしょう?
元の画像と比較してみると、一気に雰囲気が変わってオシャレになりますよね!

更に、ブラウン系のグラデーションにして、【ハードライト】にしてみると・・

セピア系のデザインが出来上がりました!

水色系の【オーバーレイ】、こちらも素敵ですね!

このように【グラデーション】と【描画モード】を使えば簡単に画像に自分好みのフィルターをかけることができます(‘◇’)ゞ

今はスマホアプリで簡単手間なく画像加工ができちゃいますが、なんといっても世界共通のAdobeソフト!
保存形式も多数あり、業者入稿も、Adobeファイルに限定されていることがありますので業務で使う方は是非、Illustratorで試してみてくださいね!

以上!イラストレーターで画像にフィルターをかける方法でした!
その他チュートリアルも更新中です!

それでは!SeeYou~

Art-Pi

独学で「なぜこの作り方なのか」が埋まらないとき

操作の手順は調べれば出てきますが、どの場面でどの機能を選ぶのかは、記事を1本読むだけではつながりにくい部分です。デジタルハリウッドの通信講座はIllustrator・Photoshopを課題を作りながら進める形式で、つまずいた箇所を質問できます。講座内容と料金は無料で確認でき、個別相談会だけの参加もできます。

デジハリ・オンラインスクールの講座内容を見る

ソフトの契約がこれからなら、講座とAdobe Creative Cloud 1年分がセットになったコースもあります。
Adobe CC付きの講座を見る(アドバンスクールオンライン)

※ 上記リンクは広告(アフィリエイト)を含みます。

作業環境をもう少し楽にする道具

Illustratorの操作そのものより、画面の広さと入力機器で作業時間が変わります。買い足すなら、効く順に並べるとこの順番です。

Acer モバイルモニター 15.6インチ フルHD
Acer モバイルモニター 15.6インチ フルHD

ノートPCでIllustratorを使う場合、画面が足りないのが一番のつまずきです。サブ画面に解説やパネルを逃がすと、作業領域が一気に広がります。

IODATA 27インチ 4Kモニター(USB-C 90W給電・無輝点保証)
IODATA 27インチ 4Kモニター(USB-C 90W給電・無輝点保証)

据え置きで長く使うならこのクラス。4Kだとパスやアンカーポイントが見やすく、拡大縮小の回数が減ります。国内メーカーで保証がはっきりしています。

ロジクール M575S ワイヤレストラックボール
ロジクール M575S ワイヤレストラックボール

腕を動かさず親指だけでカーソルを動かせるので、長時間のパス編集で手首が楽になります。狭い机でも使えます。

Wacom Intuos Small ベーシック(ペンタブレット)
Wacom Intuos Small ベーシック(ペンタブレット)

マウスで描くのに限界を感じたら最初の1台。小さいサイズでも、線の入り抜きが筆圧で変わるので文字ロゴや吹き出しが描きやすくなります。

※ 本記事には広告(アフィリエイトリンク)が含まれます。紹介している商品は、記事の内容に関連するものを編集方針にもとづいて選んでいます。Amazonのアソシエイトとして、おかあさんのおうちは適格販売により収入を得ています。

Googleで「おかあさんのおうち」の新着を優先表示する

災害・道路・住まいの新しい記事がGoogleのトップニュースに出やすくなります。ボタン1回で登録できます。

このページについて聞いてみる・教える

この街のことを知っている人が答えてくれるかもしれません。ニックネームだけで書けます。

投稿内容必須
0 / 2000
画像任意・2枚まで

位置情報(EXIF)は保存時に自動で削除します。表札・ナンバー・人の顔が写っていないか確認してください。

投稿すると利用上の注意に同意したものとみなします。

    まだ書き込みはありません。最初のひとことを書いてみませんか。

    個人が特定される内容(氏名・住所の番地・車のナンバー・電話番号)は書かないでください。 見つけた場合は各投稿の「通報」からお知らせください。 削除のご依頼はこちら

    よかったらシェアしてね!
    • URLをコピーしました!
    • URLをコピーしました!

    この記事を書いた人

    ハウスメーカー2社で営業職を経験し、不動産・建築の基礎を習得。
    その後、地域密着型の不動産会社にて営業事務として勤務し、
    契約書作成、ポータルサイト管理、物件情報の入力・更新など、
    実務全般に携わってきました。

    特に、ポータルサイトを「より魅力的に見せる工夫」や、
    反響につながる「分かりやすい間取り図作成」を得意としています。
    自分が関わった物件に反響があった時の喜びが、今の原動力です。

    現在は子育てのため一線を退いていますが、
    これまでの実務経験を活かし、
    フリーランスとして不動産会社様向けの
    バックオフィスサポート業務を開始しました。

    現場目線を大切にしながら、
    「早く・正確に・伝わる」業務サポートを心がけています。

    コメント

    コメントする

    目次