creatersnest60

【デザイナー必見!】WebデザインのためのPhotoshopチュートリアルまとめ


初めまして、この度、執筆を担当させて頂く、
たかひろまーきゅりーでございます。

今回の記事は、WEBデザインにおいて役立つPhotoshopのチュートリアルです。
Webデザインをする上で基礎を学びたい方などにはお役に立てるかもしれません!

それでは早速、いってみましょう!

ワイヤーフレーム作成するチュートリアル。

IllustratorでWebデザインをはじめよう! 第3回

コンテンツを配置してワイヤーフレームを作ろう

adobe公式サイトのPhotoshopチュートリアルページです。
ワイヤーフレームの作成方法が詳しく解説されています。

その他にもPhotoshop基礎技術のチュートリアルが乗っているので、
これからPhotoshopを学びたい方にもオススメ

 

Photoshopを使ったWebサイトデザイン入門。

クリエイターボックス

PhotoshopでWebサイトのデザインをしよう

これからWebデザインを学びたいんだけど、何から手をつければ良いかわからない!
そんな貴方にオススメのサイトがあります。

上記のサイトでは、PhotoshopでWebデザインをする上での一通りの作業チュートリアルを体験できます。
作業しながらPhotohopの機能を覚えていくのも効率的な方法なんです!

 

ボタンを作成する方法。

PSYCHEDELEDGE

Photoshopボタンの作り方ー初心者向け

Webサイトを作る上で欠かせないのがボタン作りです。

上記のサイトでは、Twitterアイコンを使用したボタンですが、
一連の作業は、別のボタン作りに応用可能な内容です。

 

光沢感のあるキレイなボタンの作り方。

手抜きTUTORIAL

さりげない光沢感のシンプルだけどきれいなボタンの作り方

 お次は、次へボタンや、送信ボタンに応用できそうなボタン作りのチュートリアルです。

わりとシンプルで使いやすいデザインです。

 

ボタンデザインをする際に知っておきたい知識。

LIG

【Photoshop】ボタンデザイン時に使える10の効果まとめ

思わず押したくなる様なボタンを作りたいのなら今回紹介するサイトの知識は必要不可欠です!
細かい設定の説明がされているので中級者レベルの方も参考になりそう。

 

Photoshopで光沢のあるシンプルなナビゲーションを作成する方法。

Web Design Library

 

Photoshopで光沢のあるシンプルなナビゲーションバーをデザインする方法

ボタンに続き、Webサイトを作成する上で欠かせないのがナビゲーションです。

ウェブデザインライブラリーさんでは、シンプルで実用的なナビゲーションの
作成方法を詳しく解説してくれています。

 

カボンファイバーを埋め込んだナビゲーションを作る方法

ウェブデザインライブラリー

Photoshopでカーボンファイバーをはめ込んだナビゲーションを作る方法

引き続き、ナビゲーション関連です。
シンプルで凡庸性の高いナビゲーションのチュートリアルです。

 

一味違うナビゲーションを作る方法。

ウェブデザインライブラリー

 

Photoshopでいつもと違うナビゲーションバーを作る方法

更にナビゲーション関連です。

ナビゲーションと言えば、棒タイプのナビゲーションが主流ですが、
今回紹介するチュートリアルでは、少しの工夫で一味違った
ナビゲーションを作る方法を解説しています。

 

ロゴに使用できそうなフォント加工をする方法。

テックマガジン

Photoshopで文字を加工する方法

ロゴを作るときに参考になりそうな文字加工のチュートリアルです!
基本的なことから応用まで 、工夫次第でいろんなデザインができるようになりそうなチュートリアルです。

 

icloudアイコンの作成方法。

ウェブ学のすすめ

アップルのiCloudアイコンをPhotoshopで描くチュートリアル

icloudアイコンの様なメタリックの背景に雲の絵を乗せたアイコンの作り方チュートリアルです。
メタリックなアイコンを作りたい方にオススメです。

 

ファビコンの作成方法。

リグ

もう何も恐くない…綺麗なfavicon作成の基本的なコツ・アイデアまとめ

faviconの作り方や斬新なアイデアが載せられた記事です。
基本的なことから、アニーメーションを作る方法まで説明されていて、とてもわかりやすいのでおすすめです。

 

ライティングロゴを作成する方法。

photoshopvip

フォトショップでハイレベルなライティング効果を作り出す方法

かっこいいオリジナルロゴを作成したい貴方。
ライティング効果をつけたロゴなどいかがでしょうか。

中~上級者向けですが、わかりやすい解説がついているので安心です。
作成になれたら作りたいロゴに応用してみましょう。

 

画用紙のような質感の背景を作る方法

LABPhotoshopで画用紙の様なザラザラの紙を作る方法

背景はWebサイトの印象を大きく作用する要因となる部分です。
今回は画用紙のような質感の背景を作るチュートリアルを紹介します。

 

しわのある紙を作成する方法。

LIGphotoshopで紙っぽい質感を表現しよう!

ちょっとした見出しをつけたい時に、紙の質感の背景を付けるのが効果的です。
作成の仕方も簡単なのですぐに応用可能ですよ!

 

水玉のグラデーションを作成する方法。

らぴたの日記〔殺りん妄想日記〕

Photoshop講座 水玉グラデってどうやって作るんだっけ?

水玉グラデーションの作成方法です!
ワンポイントで差し込むと、ガーリーな雰囲気を演出することができます。

 

三角の旗を作る方法。

dezignedge

 

フラッグガーランドをPhotoshopで作る方法

ポップで子供向けのサイトを作りたい方にオススメの一品です!
三角旗(フラッグガーランド)の作り方チュートリアルの紹介です。

簡単な上にかなり凡庸性が高く、これを挿入するだけで一気にかわいい雰囲気を出すことができますよ!

 

ストライプ柄の背景を作る方法。

LIG

Photoshopでシームレスでオシャレな斜めストライプをサクッと作る方法

スタライプ柄の背景を作るチュートリアルです!
簡単なのにすごいオシャレなのでぜひ!

 

Photoshopでモックアップを作成する方法。

moc

Photoshopでモックアップを作成する方法。

Webサイトを作るときにはHTMLやCSSを使い情報を記述し見栄えを整えますが、
そのモデルを作成したものをモックアップといいます。

レイアウトを学ぶことがWebデザインを行う上での基本となります。

 

モックアップを作成する方法2

ウェブデザインライブラリー

Photoshopでウェブレイアウトを作成する方法

もう一つおまけに、モックアップを作成するチュートリアルを紹介します!
こちらも参考になるので是非ともご覧あれ。

 

Photoshopでスライスをする方法。

【保存版】現場で使えるPhotoshopの高速スライステクニック5選

 

【保存版】現場で使えるPhotoshopの高速スライステクニック5選

スライスとは、1つの画像から素材を複数に分割する、Webサイトを作る上で欠かせない技術です。
このサイトでは、スライスの方法を1から非常に詳しく解説してくれています。

 

おわりに

いかがでしたでしょうか!
今回、紹介したWebデザインのためのphotoshopチュートリアルは初心者~中級者の方向けに執筆したので、
比較的、理解しやすいものが多かったのではないかと思います。
Photoshopの方は、まずはadobeのPhotoshopチュートリアルで学んでみるのをオススメします。

今回の記事が一人でも多くののWEBデザイナーのお役に立てたら嬉しいです。

 

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

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

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


NESTonlineBlog編集部

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

Next ArticleWebサイトを高速化するためのテクニック20選