creatersnest20

日本語で読める!photoshopチュートリアル厳選50選!


WEB制作やデザインをお仕事にしようと思っている方々にとって力強い相棒でありながら、その多機能ゆえに出来すぎて敬遠したくなる相手、Photoshop。

海外のWEBトレンドなサイトを眺めては「こんなカッコイイ画像作ってみたいなァ」と思うものの、
英語のチュートリアルでは時間がかかってしまい、取り掛かる前から億劫になってしまいます。
今から20数年前、大きい会社に仕える小さい会社に所属していた私は、
当時ビジネスショーのブースに備えるカッコイイ印字サンプルを作成すべく、同僚と共にMacの前で残業したものでした。
しかし、当時アドビのソフトに日本語版はなく(というかほとんどのソフトが英語版でした)、
翻訳ツールも今よりはるかに発展途上であり、皆の知恵を結集してもPhotoshopを攻略することは難しいことだったのでした。
あの頃に比べたら今はメニューもマニュアルも日本語で、しかも気の利いた使い方を指南するサイトもとても充実していて、良い時代だなぁと思うのです。
私はその後4年かそこらでリタイアして現在に至るので、今でも5段階の2くらいのレベルでしかありませんが、自分だったらぜひチャレンジしたい!と思う日本語のチュートリアルを集めてみました。

目次

ライティングエフェクト

光が集まる場所というのは注目を集めるものですね。
目立たせたいテキストや画像にはやはりライティングエフェクトでしょうか。

 

(海外記事) フォトショップでキラキラに輝くライティングエフェクトをつくるチュートリアル – Photoshop VIP

img1

http://photoshopvip.net/archives/14357

みんなお世話になっているこちらのサイト。
このチュートリアルだけでメインの「ライティングエフェクト」の他にも「テクスチャを重ねて背景画像に質感を出す」「人物の髪の毛を切り抜く」「ナチュラルな写真の合成」などが学べるというテクニックの宝庫です。

 

SF好きにはたまらない!?Photoshopで作るライティングエフェクト 株式会社アクトゼロ

img19

http://www.actzero.jp/developer/report-8686.html

スクリーンショットの他に文章でしっかり説明してくれています。ショートカットキーなども書き込まれていて初心者の私には勉強になります。

 

フォトショップで夕日に輝く幻想的なライティング効果を作る方法 – Photoshop VIP

img35

http://photoshopvip.net/archives/3958

ライティング効果の作成はもちろん、背景画像を適切に処理する方法がじっくり解説されています。使用する画像のダウンロード先も書かれているので素材探しにも役に立ちます。

 

 

基本的な光の作り方2 KANTENNA.COM

 img42
http://www.kantenna.com/app/graphic/photoshop/tutorial/8
4ステップで光が作れます。

 

Photoshopで海外ドラマ「HEROES」ロゴのような日食を描く I love Photoshop

img15

I love Photshop

ロゴを引き立ててくれる背景画像の作り方です。このリングに負けないロゴ作成したいものです。余談ですがこちらのサイトのスクリーンショットはサイズが大きくて目にやさしいですよ。私は助かっています。

 

テキストエフェクト

どんなに美しい画像が表示されていても、人は自然に文字を目で追うと思うのです。
テキストエフェクトは、時に主役、時には脇役といったところでしょうか。

 

フォトショップでスポットライトを当てたようなテキストエフェクトの作り方 – Photoshop VIP

img33
http://photoshopvip.net/archives/10379

 

フォトショップの便利な機能のひとつ、「レイヤースタイル」を使ったチュートリアルです。3Dのような立体感が表現されています。 パターンファイルを使ったメタル系テクスチャ背景の作り方も勉強になります。

 

 

フォトショップで本物そっくりな錆びたカラフルメタル文字を作る方法 – Photoshop VIP

img36
http://photoshopvip.net/archives/7318
 

細かい影などの陰影まで作り込んでいるだけあって、テキストがリアルでとても存在感がありますよね。背景にはフォトショップのみで作成したレザーテクスチャを使用しています。 チュートリアルがやや長いため2回にわたっての解説になっています。

 

フォトショップで爆発しているカラフルな文字を作る方法 – Photoshop VIP

img37
http://photoshopvip.net/archives/3056
 

フィルタ機能の「風」フィルタと「極座標」フィルタを使うことによって、爆発したような文字を作成しています。レイヤーの色を好みの色に変えてみると違う印象のデザインが仕上がりそうです。

 

フォトショップで金色(ゴールド)の文字を表現してクオリティの高いロゴを作る方法

img38
http://threem-design.com/web-design/gold/ 
金色(ゴールド)はやはりゴージャスな感じがして外せませんね。

背景画像の解説はなく、テキスト効果のみなのでお好みの背景と組み合わせてどうぞ。

 

Photoshop Elementsを使用した簡単なロゴ加工方法

 

img3http://crowdworks.jp/public/jobs/category/26/articles/2005 

Photoshop Elementsを使用して簡単にテキストをロゴにする作り方です。5ステップで完成です。

 

Photoshopで床への映り込み(鏡面反射)した画像を作る方法|フォトショップの参考書 [sitebook]

 

img13
http://sitebk.com/photoshop/reflection/ 

押さえておきたい定番ワザは、こちらのようにロゴの作り方のみ解説しているサイトで習得すると取り組みやすいように感じます。

 

フォトショップでキラキラに輝くレトロな飾り文字を作る方法 – Photoshop VIP

img32

http://photoshopvip.net/archives/7023

レトロ感のある花をあしらった美しい飾り文字の作り方です。レトロでありながらキラキラですからトレンドの中でもポイント高いと思います。初心者にとってはロゴと背景画像の馴染ませ加減が難しいと感じる中、こちらのサイトはその両方を解説してくれているので勉強になります。ハードルは高いですけど。

 

Photoshop ロゴワークショップ

img5
http://web.kyoto-inet.or.jp/people/hikeda/justnet/logows/pictureindex.html

いろいろなロゴが揃っていてそれぞれの作り方を解説してくれています。ロゴの他にもチュートリアルが充実しています。

 

みずみずしいアクアブルーなロゴの作り方 ~ Photoshopの日本語チュートリアルまとめ

 

img22
http://pstips-japan.blogspot.jp/2012/06/blog-post_28.html  

夏には出番がたくさんありそうです。チュートリアルの方はロゴ作成のみで背景画像はフリー素材のようです。

 

デタラメPhotoshop クローム風文字

 

img24
http://www.detarame.jp/ex11-20/example11.html 

こちらのサイトから3つご紹介させていただきました。キラッとしたセンスを感じます。

 

デタラメPhotoshop 彫刻文字

img25
http://www.detarame.jp/ex11-20/example19.html
 

彫刻刀を使って彫ったような文字を作ります。文字の崩し方、ノイズの入れ方など参考になります。

 

デタラメPhotoshop 水文字

img26
http://www.detarame.jp/ex-21-30/example29.html 

「××劇場」という感じのドラマのタイトル画面に出てきそうな水が文字型に盛り上がったような効果です。とサイト内で紹介されています。水をまとったテキストたくさんありますが、私はここの好きです。

 

フォトショップ 使い方マニュアル プラスチック風文字の作り方

img30
http://h-matsuda.com/photoshop/index.php?ID=12 

ツルツルな質感を表現できます。覚えてしまえばサクサク作れそうです。

 

 

光る文字の作り方 プログラマにもできるPhotoshopの使い方 レビログ ( 10周年!! )

img39
http://revilog.com/2007/10/010965.html

プログラマにもできる、と言っているだけに説明は少々言葉少なです。「Step1 テキストにレイヤーエフェクトをかける。 以上 終了」ってことでした。「ドロップシャドウ」と「光彩(外側)」で出来てしまうという。

 

決定版!フォトショップで作る4種類の黄金文字の作り方 – Photoshop VIP

img44
http://photoshopvip.net/archives/4129
 

憧れの黄金文字って感じです。私はこのチュートリアルで初めて金文字作成しました。栗原はるみさんのレシピのように書いてある通りにすれば自分作とは思えない成果が得られます。

 

2009年のトレンド型押し文字をフォトショップで作る方法 – Photoshop VIP

img2
http://photoshopvip.net/archives/3694

2009年の、とありますが、今見ても十分いけると思います。背景画像の「宇宙の星空を現した壁紙」こちらもフォトショップのみで作成とのことです。

 

 

 

Photoshop|ネオンサインのテキストエフェクトの作り方チュートリアル – Dynamite Design Blog|海外Webデザインネタ日本語訳&作成チュートリアル

img50
http://weblog.weska.jp/2009/10/neon-sign.html#more

「海外デザインネタを翻訳して作るWEBデザインチュートリアル」ということです。確かにこういうデザインを良く海外のサイトでみかけるような気がしますね。日本語に翻訳されているなんて嬉しいです。

 

Photoshop|錆びついた銅のテキストエフェクトの作り方チュートリアル – Dynamite Design Blog|海外Webデザインネタ日本語訳&作成チュートリアル

img51
http://weblog.weska.jp/2009/03/rusty-copper.html#more
 

さび感を表現する為にテキストにたくさんのレイヤースタイルをかけています。作ったらスタイルに登録しておけば、ダメージ&グランジ系デザインに使いまわせますね。

 

アイコン・ボタン加工

つい押してみたくなるような魅力的なアイコンやボタン、作ってみたいですね。

 

Photoshop SFXブルーアイコン

img4
http://web.kyoto-inet.or.jp/people/hikeda/sfx/sfx44/sfx44.html

カスタムシェイプツールで描画したマークにレイヤースタイルをのせて作成しています。各シェイプごとにアイコン作りたくなりますね。

 

Photoshopでメタリックなボタンを作る I love Photoshop

img8

I love Photoshop

Step9で完成です。思ったより少ない工程で作れるんだなと思いました。こちらのサイトはスクリーンショットが大きくて見やすいので気に入っています。

 

簡単だけどカッコいい!!メタル風ボタンの作り方(Photoshop) Photoshop, Illustrator手抜きチュートリアル

img45
http://tutorial.yossy-m.net/?p=166
 

ボタンの作り方は、どちらのチュートリアルを見てもそれほど目新しいテクニックがある訳ではないのに作り手によってガラッとイメージが変わるので不思議です。中のマークや色を変えるだけでバリエーションが楽しめそうです。

 

 

テクスチャ

目立たないようでいて全体の印象を握っているテクスチャです。思い通りのものを自作できたら作成の幅が広がりますね。

 

紙の材質を作る:ザラザラ紙・シワシワ紙 イラレ・レシピ 時々フォトショ

img27
http://illure-to-photosho.seesaa.net/category/7028942-4.html
 

背景の質感がとても良い感じです。配置されている形の色使いに女性らしさを感じます。素敵です。

 

Photoshopでくしゃくしゃの紙テクスチャを作成しその上に自然な文字を載せる方法  楽してプロっぽいデザイン Forty-N-FiveBlog

img7
http://forty-n-five.boy.jp/blog/2014/09/photoshop_36.php#

 

くしゃくしゃにした紙の素材感を再現していて、さらにその上に載せた文字も含めてくしゃくしゃ感を出しているところがポイントでしょうか。

 

フォトショップで古い紙を作る ワシログ

img34
http://www.e-earthborn.com/2007/03/old-paper-tutorial/

 

フォトコラージュの素材として、質感を出したり背景画像にしたりがオススメとのこと。いくつか作り置きしておきたくなりますね。 

Photoshopでシワの入った革のテクスチャの作り方

img54
http://designers-tips.com/archives/19682
 

3種類のバリエーションが紹介されています。デザインのちょっとしたアクセントとして重そうです。

 

2014年の流行!?Photoshopを使ったポリゴンスタイルテクスチャの作り方|フォトショップの参考書 [sitebook]

img47
http://sitebk.com/photoshop/polygon-style-texture/
 

フラットデザインの次に流行すると噂される『ポリゴンスタイル』。多角形のモザイクがかかったようなアレですね。作り方の他にも実際にポリゴン風デザインを取り入れているwebサイトも紹介されています。

 

Photoshopで点線を使った縫い目風デザインを一から作る方法 Photoshop, Illustrator手抜きチュートリアル

img16
http://tutorial.yossy-m.net/?p=786 

 

「Photoshopで点線を描く」と「縫い目のような質感を出す」の2つについて習得できます。シンプルな効果ですが覚えてしまえば応用が効きそうです。

 

タイポグラフィポスターの簡単な作り方 ~ Photoshopの日本語チュートリアルまとめ

img23
http://pstips-japan.blogspot.jp/2012/06/blog-post_07.html
 

おしゃれなパン屋さんの紙袋みたいなテクスチャです。レイヤーを重ねて背景画像を作りあとは文字の配置がモノを言いいますね。出来上がってしまえばそれなりに見えるのもこのチュートリアルのお勧めな点、とのことです。

 

写真エフェクト

Photoshopが本領を発揮するのはやはりこの写真エフェクトなのでしょうか。使いこなせたら良いですね。

 

Photoshopで雰囲気たっぷりなモノクロ写真エフェクトをつくる方法 – Photoshop VIP

img18
http://photoshopvip.net/archives/60539
 

ハイファッション雑誌などで見かける雰囲気のあるモノクロ写真を作成するチュートリアルです。使う素材によっても仕上がりが違いそうですが、こちらのサイトではイメージ素材の入手先も書いてあるのでクォリティの高い素材でアートワークにトライできます。

 

割れたガラスで都会の景色を演出するPhotoshopのチュートリアル I love Photoshop

img40
I love Photoshop
 

フリー素材のガラスブラシを使って演出しています。チュートリアルでは都会の風景にエフェクトをかけていますが、冬景色の山並みとか日本海に沈む夕陽などネイチャー系でも使えそうですね。

 

Photoshopでブラシツールを使って月明かりに照らされた湖を作成する方法 – ウェブデザインライブラリー

img48
http://www.webdesignlibrary.jp/2012/10/moonlit-lake.php
 

明るい風景画像が月夜の画像に変身します。特殊メイクが出来上がっていく様子を見ているような楽しみがありますね。おみごとです。

 

Photoshopで写真にビンテージ効果を付ける I love Photoshop

img9
I love Photoshop
 

トーンカーブで色味を調節しています。色調補正などは初心者の私には見当のつけようもない感じですが、設定のスクリーンショットがのっているので助かります。

 

Photoshopで写真をスタンプ風に加工する方法

img10
http://designers-tips.com/archives/19049
鍵の写真を使ってインクが滲んでいるような加工をしています。好みの色をのせることでまた雰囲気がでますね。

 

Photoshopで写真をミニチュア(チルトシフト)風に加工するチュートリアル I love Photoshop

img11
I love Photoshop
 
都会のビル群の写真がちょっと手を加えるだけで両手で包み込めそうなミニチュアの街に変身します。写真の加工はプロの領域のようで敬遠してしまいますが、覚えたら楽しめそうですね。

 

 フォトショップでアメコミ風に加工する所要時間たった3分のフィルター活用テクニック。

img31
http://threem-design.com/web-design/amecomi/

 写真をイラスト風に仕上げるとすればフィルターを使用して各種調整をかけると思うのですが、上手に調整しないとわざとらしくなってしまいそうです。ここでは難しい調整なしで初心者でも3分程度で簡単に加工する方法が紹介されています。

 

Photoshopで水しぶきを加工した合成写真に挑戦! Webクリエイターボックス

img14
http://www.webcreatorbox.com/inspiration/photoshop-watersplash/
 

「女性」「水しぶき」「水面」の3つの画像を合成するテクニックです。「ポイントを抑えておけば、水の代わりに火や植物など、テーマを変えても使える技です」とのこと。動画も用意されているのでぜひチャレンジしましょう。

 

折り目のついたアンティーク加工の写真の作り方(Photoshop)

img41
http://designers-tips.com/archives/14604
 

ポケットやお財布に折りたたんで入れてた古い写真のような加工です。折り目や傷のテクスチャを加えてアンティーク調にした写真に、さらにリアルな折り目を加えています。

 

 普通の写真を加工して、ミニチュア風にかわいくしてみよう!|フォトショップはじめの一歩 Adobe Photoshop 簡単マニュアル

img43
http://namakemono.mods.jp/cat1/post-20.html
普通の風景写真をまるで模型を接写したかのように見せるテクニック。これ最近よく見かけますがモノがアイスケーキというだけで素敵に見えてしまいここに紹介してしまいます。

 

Photoshopできれいな水彩画風デザインに挑戦! Webクリエイターボックス

img6
http://www.webcreatorbox.com/inspiration/watercolor-web-design/

写真をほんわかした水彩画風に加工する方法です。便利なPhotoshopブラシや水彩画風デザインのWebサイトも紹介されていて参考になります。

 

超簡単!PhotoShopで写真を質感あふれる水彩画風に加工する方法! – NAVER まとめ

img46
http://matome.naver.jp/odai/2138572276969566001
 

写真を使って水彩画風に加工するチュートリアルを2つご紹介しました。紙に滲んだ感じに、筆で塗ったような質感、更には鉛筆の線。とってもリアルな感じがしますね。

 

Photoshopで秒速作成!マルチストライプ(縞模様)の作り方|フォトショップの参考書 [sitebook]

img49
http://sitebk.com/photoshop/multi-stripe/

ポールスミスのようなマルチストライプが作成できます。複雑そうに見えるボーダーパターンですが、こちらのサイトでは画像を使って簡単に作成しています。

 

シズル感演出!食品から湯気を出す画像加工方法|フォトショップの参考書 [sitebook]

img52
http://sitebk.com/photoshop/steam/
 

WEBでも紙媒体でも、食べ物の紹介記事ほど画像のイメージに左右されるものはないと思うのです。湯気が上がった美味しそうな食べ物が写っていたらお店のイメージ2割増しくらいではないかと。実際は湯気を接写するとなればレンズが曇ったりで思い通りにはいかないのかもしれませんが。そんな時、こちらのチュートリアルはお役立ちですね。

 

その他いろいろ

まだまだあります。Photoshopを駆使した表現は限りありませんね。見ているだけで楽しくなってきます。

 

Webデザインで大流行!すりガラスの様なぼかし効果がかかった画像作成のチュートリアル|フォトショップの参考書 [sitebook]

img20
http://sitebk.com/photoshop/blur-background/
 

フルスクリーンで浅くボカした背景の上に商品やテキストを置いて注目させるという視覚効果。最近おしゃれなサイトでよく見かけますよね。このぼかしのテクニックをブラー(blur)効果というのだそうです。ブラー効果が使われているWebサイトも紹介されています。

かわいいプクプクシールの作り方(Photoshop)

img21
http://designers-tips.com/archives/20051
 

立体的にぷっくりと盛り上がっているように加工する方法です。イラストだけでなく文字にも使えるので、いつでも使えるようにレイヤースタイルを登録しておくと便利そうです。

 

Photoshopで平面素材から3Dのリングを作る Photoshop, Illustrator手抜きチュートリアル

img12
http://tutorial.yossy-m.net/?p=181

ワープ機能を使った3Dリングです。いびつにならないようにワープ機能に取りかかる前にパスを使ってアウトラインを考えるのがポイントのようです。

 

Photoshopでくもった窓に文字を書く方法 – ウェブデザインライブラリー

img53
http://www.webdesignlibrary.jp/2010/02/photoshop.php

 「水滴が付いた窓の画像」と「ガラスの向こうの風景画像」の2枚を使って加工をし、ブラシで書いた文字を加え水滴もブラシを使っています。

まとめ

いかがでしたか。
千里の道も一歩からと言いますから、コツコツとチュートリアルをこなしてPhotoshopの達人を目指しましょう。

 

 

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


NESTonlineBlog編集部

NESTonlineBlog編集部です。ご寄稿頂いた記事などを公開していきます。

Next Articleメタルな質感がカッコいい無料Photoshopパターン素材50選