【Photoshop】バナーの模写でスキルアップ!おすすめサイトを紹介

アマノ

グラフィックデザイナー/WEBデザイナーのアマノです。
今回は、バナーの模写に挑戦しました!

この記事はこんな人におすすめ

・Photoshop初心者の人
・Photoshopのテクニックを学びたい人
・短時間でPhotoshopを覚えたい人
・無料でPhotoshopを覚えたい人

初心者のための「本当はむずかしくない」はじめてのPhotoshop

初心者のための「本当はむずかしくない」はじめてのPhotoshopでは、様々なバナーの模写を通して、Photoshopの基本操作や画像の作成について学ぶことができます。
現在、第1回から最終回の第12回まで記事が公開されています。

記事の執筆者のカトウヒカルさんは、福岡を拠点にするWebデザイン事務所kanvasのWebデザイナー。これまでに100以上のWebサイト制作に関わったそうです。

記事はすべて無料なのですが、「これ本当に無料で学べる内容なの?!」と驚くほど良かったので、皆にシェアしたいと思います。

【第1回~第5回】バナーの模写

バナー

【初級編】バナーデザインのトレースでPhotoshopをマスター|初心者のための「本当はむずかしくない」はじめてのPhotoshop| Adobe Blog

第1回は「半額SALE」のバナーを模写しました。文字を並べただけのシンプルなデザインです。

簡単な内容でしたが、Photoshopの操作に慣れていない&記事を読みながらゆっくり進めたため、1時間~1時間半ぐらいかかったと思います。

バナー

【初級】 #3 人物を切り抜いて華やかに加工しよう|初心者のための「本当はむずかしくない」はじめてのPhotoshop| Adobe Blog

第3回はカラフルなバナーの模写でした。グラデーションを使ったり人物を丸く切り抜いたり、初回と比べると複雑なデザインになってきました。

バナー

【初級】#5 シェイプツールでいろんな図形を作ろう|初心者のための「本当はむずかしくない」はじめてのPhotoshop (adobe.com)

第5回はシェイプツールを使ったバナーの模写でした。POPでかわいいデザインです。Photoshopはillustratorと似た操作もあるのですが、まだまだ操作に慣れていません。

【第6回~第10回】バナーの模写

バナー

【初級】#6 パスを操作して自由な形を作ろう|初心者のための「本当はむずかしくない」はじめてのPhotoshop (adobe.com)

第6回はパスを操作して作ったバナーの模写でした。回が進むにつれ、文字を加工したり、自由度の高いデザインになっていきます。

個人的にこういう上品なデザインが好きなので、模写していて楽しかったです。

この頃には少しづつ操作に慣れてきたので、復習しながら進めました。

バナー

【初級】#10 ぷるぷる質感の文字を作ろう|初心者のための「本当はむずかしくない」はじめてのPhotoshop (adobe.com)

第10回はベベルとエンボスを使ったバナーの模写でした。美容系にありそうなデザインですね。

【第11回~第12回】バナーの模写

バナー

【初級】#11 ゆがみフィルターで笑顔を作ろう|初心者のための「本当はむずかしくない」はじめてのPhotoshop (adobe.com)

こちらは第11回のバナーです。
文字が斜めに大きく配置されて、インパクトのあるデザインです。
ゆがみフィルターを使った笑顔の作り方について、詳しく学びました。

第12回

【初級】#12 ニューラルフィルターで印象的な表現を作ろう|初心者のための「本当はむずかしくない」はじめてのPhotoshop (adobe.com)

とうとう最後の第12回になりました。
キャンプの写真の奥と手前をニューラルフィルタ―でぼかしました。

これでバナーの模写は終わりなのですが、とっても良い教材だったので個人的にはもうちょっと学びたかったです!

バナー模写の感想

PCと本

カトウヒカルさんのバナー模写をしてみた感想です。

①実践的な内容が学べた
カトウヒカルさんのバナーは、実際にありそう・使えそうなものばかりで実践的な内容が学べました。動画や本によっては「これあまり実務で使わない」「初心者には難しすぎる」という内容もあると思うのですが、そういった無駄な情報が排除されている印象でした。

②お題のバナーがお洒落だった
自分好みのお洒落なデザインばかりだったので、模写していてとても勉強になりました。シンプル、POP、上品など、毎回色んなテイストのバナーだったのも良かったです。フォント選びやグラデーション、レイアウトの参考になりました。

③丁寧で分かりやすかった
Photoshopの解説が丁寧でとても分かりやすかったです。

④ちょうどいいボリュームだった
バナーの模写は毎回30分~1時間ぐらいで完成するので、量的にちょうど良かったです。時間のあるときにサクサク進めました。長時間作業が必要なものだと、途中であきらめたり集中力が無くなったりしますが、毎回必ず完結することができました。

⑤無料で学べた
無料で学べたのがありがたかったです。

⑥素材が用意されていた
バナーの模写用の素材が用意されていたので、すぐに作業に取りかかることができました。
※通常バナーを模写する場合、自分で似た写真やイラストを用意する必要があり、素材選びにけっこう時間がかかります。

バナーの模写のメリット

勉強する女性

私が感じたバナーの模写のメリットです。

①色んなデザインの引き出しが増えた
普段は作らないようなバナーの模写をすることで、デザイン(色・フォント・あしらいなど)の引き出しが増えました。

②Photoshopの操作が覚えられた
バナーの模写で、自然とPhotoshopの操作が覚えられました。

③Photoshopの操作が早くなった
繰り返しPhotoshopの操作をすることで、作業スピードが少しずつですが速くなりました。

④デザインの観察力がついた
模写をするときに、文字と文字の間など細かい部分をよーく見るので、観察力がつきました。

今回初めてPhotoshopでバナーの模写をしましたが、メリットが多かったです。

まとめ

Photoshopを覚えたい、上達したい方は、バナーの模写にぜひ挑戦してみてください!

初心者のための「本当はむずかしくない」はじめてのPhotoshop

今後も無料で学べるPhotoshopやIllustrator、XDのコンテンツがあれば、皆さんに紹介したいと思います。