ブログタイトル・アイキャッチ画像を作ってみよう!Photoshop(フォトショップ)簡単メイキング

こんにちわ!テンジク(ikinaritenjiku)です。

今回は「借りぐらしのテンジク」のタイトルロゴ画像の、Photohop(フォトショップ)でのメイキングの過程をお伝えします。

f:id:ikinaritenjiku:20170901044320p:plain

私がメイキングやHowto記事でモットーとするのは、検索のヒント・道を踏み外さないコツをお伝えするという事です。

世の中には私よりもはるかに優れた技術者の人はたくさんいますし、素晴らしい記事がもうすでにたくさんあります。

ひと昔前だと大学に行かないと学べなかった事が今はインターネットで無料で学べる…インターネット最高!

ある程度の事はネット上で既に解決されているという事と、私が1から10まで説明しても劣化コピーを生み出すだけなので、有益なリンクがある場合はサクッと貼っていきます。

「借りぐらしのテンジク」ブログタイトル画像メイキング

Adobe(アドビ)のPhotohop(フォトショップ)があればほんのひと手間で写真の雰囲気をガラッと変える事ができます。

ブログのタイトルや、アイキャッチ画像に取り入れる事ができたらブログがより楽しくなっていきますね。

本日はこちらのタイトル画像を作成した手順を公開します。簡単ですよ!

f:id:ikinaritenjiku:20170901025252p:plain

手順は、タイトルロゴの後ろにふぁーと白い光を入れたのがひとつと、背景の写真をイラスト風に加工しただけです。

ひと手間と言いましたがふた手間でした。それではいきましょう!

タイトル画像を用意する

f:id:ikinaritenjiku:20170901015757p:plain

f:id:ikinaritenjiku:20170901015804p:plain

今回はAdobeIllustrator(イラストレーター)で作成しました。Photoshop(フォトショップ)の[テキスト]で作成してもOKです。

Photoshop(フォトショップ)で背景に使いたい画像を開いておく

f:id:ikinaritenjiku:20170901020032p:plain

こちらが今回使用した写真です。

フリー素材のぱくたそさんにお世話になりました。

f:id:ikinaritenjiku:20170901020122p:plain

私が「葉」としか入力しなかったのでたくさん画像が出てきてしまいましたが、色で絞って検索するともっとスムーズに見つかります。

f:id:ikinaritenjiku:20170901020131p:plain

借りぐらし感が出ている葉っぱを見つけました。

Photoshop(フォトショップ)にタイトルロゴを貼り付ける

f:id:ikinaritenjiku:20170901015757p:plain

Illustrator(イラストレーター)の素材を選択して[コマンド ⌘ ] (winの場合はctrlキー)+Cでコピー

f:id:ikinaritenjiku:20170901021027p:plain

photoshop(フォトショップ)を開いて [コマンド ⌘ ] +Vでペースト (貼付)

<参考リンク>スマートオブジェクトについてはこちら

Photoshopのスマートオブジェクトとは?使い方・編集方法まとめ

f:id:ikinaritenjiku:20170901021531p:plain

貼り付ける前に大きさを調節。shiftキーを押しながら調節したら縦と横の比率を保ったまま拡大と縮小ができます。

f:id:ikinaritenjiku:20170901021718p:plain

enterキーで貼付が完了!

文字の後ろをふぁーて白くしたい

f:id:ikinaritenjiku:20170901021807p:plain

タイトル画像のレイヤーの右の辺りをクリックします。

(※左をクリックするとレイヤー名の編集ができます)

f:id:ikinaritenjiku:20170901022021p:plain

レイヤースタイルというパネルが出ました。

f:id:ikinaritenjiku:20170901022116p:plain

レイヤースタイルの効果を使う事で、素材に影をつけたり凹凸を表現したりする事ができます。

f:id:ikinaritenjiku:20170901022125p:plain

境界線をつけたり

f:id:ikinaritenjiku:20170901022414p:plain

ちなみにこちらのイラストの右下の文字もPhotoshop(フォトショップ)で白い文字を載せてレイヤースタイルの境界線を適用しました。

ドロップシャドウという効果で影も少しついています。

f:id:ikinaritenjiku:20170901022605p:plain

キラリーン。[ベベルとエンボス]という効果で凹凸を表現。どの機能も右側のパネルで光の角度や色などの細かい設定ができます。

Photshop(フォトショップ)で作成されたパチンコ屋さんのチラシは、きっとこの効果がたくさん使われているはず。

f:id:ikinaritenjiku:20170901022750p:plain

文字の後ろをふぁーと白くするのに光彩(外側)という機能を使いたかったのですが、あまり好みの感じにならず今回は別の機能を使いました。

今回は[ドロップシャドウ]という機能で文字の後ろをふぁーと白くしています。

[ドロップシャドウ]は本来は影をつけるために多く使われる機能なのですが、ここでは影の色を白くして使用しました。

「シャドウは黒いもの」なんていう固定概念を取っ払う事がさらに表現の幅が広がるコツ。あなたの好きに使ってOKです。

<関連リンク>光彩の機能についてはこちら

web-style.info

(※光彩の機能って、使いこなしたらサイバーチックな写真も作れるしカッコいいですよー!)

<before>レイヤー効果を適用する前

f:id:ikinaritenjiku:20170901021718p:plain

<after>レイヤー効果で文字、ふぁー

f:id:ikinaritenjiku:20170901023523p:plain

このままでも使えそうですが、今回は借りぐらし感を出したいので背景の画像を手描きイラスト風にしていきましょう。

フィルター効果で背景を手描きイラスト風に

フィルターという効果を使ってこちらの写真を手描きイラスト風にしていきます。

f:id:ikinaritenjiku:20170901023743j:plain

フィルターギャラリーを選択

f:id:ikinaritenjiku:20170901024115p:plain

フィルター効果で写真を色んなテイストに変える事ができます。

<アーティスティック/エッジのポスタリゼーション>

f:id:ikinaritenjiku:20170901024711p:plain

<アーティスティック/カットアウト>

f:id:ikinaritenjiku:20170901024628p:plain

<ブラッシストローク/はね>

f:id:ikinaritenjiku:20170901024823p:plain

<アーティスティック/ドライブラシ>で、イメージしていた物に近づきました。

f:id:ikinaritenjiku:20170901024307p:plain

<before>レイヤー効果・フィルター効果を適用する前

f:id:ikinaritenjiku:20170901021718p:plain

<after>レイヤー効果・フィルター効果で自分のイメージしていた物に近づきました。

f:id:ikinaritenjiku:20170901025252p:plain

完成!

f:id:ikinaritenjiku:20170901044320p:plain

一言メモ

f:id:ikinaritenjiku:20170901021531p:plain

  • もし、パーツの大きさを変更したい時は[コマンド ⌘ ] +T で拡大・縮小できます。

f:id:ikinaritenjiku:20170901030254p:plain

例としてちょっと極端に縮小してみましたが、使いたいシチュエーションに応じて変更してみてください。

  • 拡大・縮小やフィルター効果をかける前に、念のためレイヤーをコピーしておく事がおすすめです。

<参考リンク>Photoshop のレイヤーの基本に関する学習

いかがでしたか?ほんの少し写真に手を加えるだけで雰囲気がガラッと変わりますね。

 楽しい機能を覚える前に、まずはショートカットキーも使いながらその都度覚えていく事をお勧めします。

helpx.adobe.com

“その都度”というのがポイントです。必要に応じて覚えていく方が身につきますし、使わない機能を覚えても時間と脳のキャパがもったいないので。(経験者談)

Photoshop(フォトショップ)の話をしておいて身もふたもないですが、Photoshop(フォトショップ)を持ってないし買いたくないけど写真加工したいという方はこちら

<参考リンク>Photoshopの代用になる!無料で使えるツール10選 | TechAcademyマガジン

いつか誰かのお役に立ちますように。

テンジク(ikinaritenjiku)

おまけ

素人っぽくならないコツ

Photohop(フォトショップ)などの加工ソフトで、画像をそれっぽくしていくコツは便利な機能を使いすぎない事。

文字に影がついたり、ツヤをつけたりする効果を使うと「おお..!」となる気持ちわかります。そこ一回通ります。

コテコテにレイヤー効果やフィルターを使ってしまうと素人っぽくなってしまいます。

影も、しっかりつけたい気持ちを抑えてほんの少しだけつけてあげるとか、色を薄くする。青い素材なら影の色に少し青を入れる。これだけで段々それっぽくなっていきますよ。

わかりやすい例として、写真加工アプリを例にあげます。インスタで、かわいい女の子をたくさん見かけます。かわいい女の子の写真って癒されますよね。

でも、加工しすぎて目が宇宙人みたいに巨大になってしまっている女の子とか、いませんか?

できる女の子は、ほんの少ぉおしだけ加工してます。

Photoshop(フォトショップ)の機能も露骨に使うのではなくほんの少ぉおしやってみてください。そのさりげなさが素人っぽくならないコツです。

Photoshop(フォトショップ)で消耗しないコツ

先に欲しい画をイメージすること

使い慣れないソフトを覚える時って、思った以上に時間を取られます。上達への近道は「あんな風にしたいな」でもいいので、先に、欲しい画をイメージする事です。

完成像のイメージがないまま画像だけ用意して、やみくもにPhotoshop(フォトショップ)をいじってしまうと時間を取られてしまいます。

Photoshop(フォトショップ)の機能の組み合わせは無限です。せっかくたくさん覚えても忘れてしまったりするので、欲しい画を先にイメージして”その都度”、そのイメージに近づく方法を探すというやり方をおすすめします。

まず本屋さんでPhotoshop(フォトショップ)の本をさらさらーっと流し読みして「Photoshop(フォトショップ)でこんな事ができるんだな」くらいのレベルで把握しておく。

その後、必要になった時に必要な技術を調べるのが「ただのPhotoshop(フォトショップ)に詳しい人」になってしまわないコツです。

※検索のヒント「photoshop  光」とか「photoshop 影をつける」「フォトショップ  凹凸」などなど。

<参考リンク>Adobe公式チュートリアル

helpx.adobe.com

www.pakutaso.com

[関連商品]

%d人のブロガーが「いいね」をつけました。