Photoshopは写真の補正をしたり、グラフィックを作ったりとあらゆる作業に活用できる非常に万能なソフトです。
PhotoshopはWebデザインにおいても欠かせないツールですが、意外にも使ったことがないという方、試してみたけれど使い方が分からない方も多くいらっしゃいます。
今回は、WebデザインでPhotoshopを使いはじめようとしている方に読んでいただきたい記事をまとめてご紹介します。
作業の手順から効率化までしっかりと理解することができますので、参考にしてみてください。
PhotoshopでのWebデザイン作業で読んでおきたい記事まとめ
1.PhotoshopでWebデザインをはじめよう！第1回 デザイン前に覚えておきたい環境設定とレイヤー機能｜Adobe creative station
https://blogs.adobe.com/creativestation/web-start-photoshop-web-design-01-preference-and-layer
Adobeが運営する、Adobe creative stationの記事です。
初心者向けにWebページデザインの際に覚えておくべきことを解説しています。
PhotoshopでWebデザインを行う時の基本設定である「pixel」の単位設定、作業で使うツールの利用方法が学べます。
レイヤーの構造についても詳しい説明をしていますので、Photoshopにまだ慣れていないという方は見ておきたい内容です。
2.WebデザイナーとPhotoshop【前編】 君はいかにしてPhotoshopをWebデザインツールとして用いるか？｜Web屋のーりー
http://nori44.jp/beginners/photoshop-for-webdesigner/
Webディレクション業を営む、のーりーさんによるブログ「Web屋のーりー」の記事です。
PSD形式のサンプルを用いて、どのようにWebデザインを進めるかを紹介しています。
手順ごとにスクリーンショットをつけていますので、理解しやすくなっています。
サンプルのダウンロードも可能ですので、デザイン方法の基本が分かったあとに練習目的で利用するのもオススメです。
3.WebデザイナーとPhotoshop【後編】 基礎の「き」を修めよう！｜Web屋のーりー
http://nori44.jp/beginners/photoshop-for-webdesigner-b/
先に紹介した記事の後編です。
こちらでは、Webデザインで知っておくべきレイアウトの話から、写真素材の準備やサムネイル作成、その他パーツの作り方までを紹介しています。
ある程度Webデザインの型ができ上がり、後は画像を配置するという段階で特に参考になる記事となっています。
4.PhotoshopでWebデザインを作る手順まとめ｜RAINGARDEN
http://xraingardenx.com/beginner-ps-design-flow/
プログラミングからサーバ構築まで、Web制作に関する情報を配信するブログ「RAINGARDEN」の記事です。
競合の調べ方や参考サイト、ワイヤーフレームについてといった、Webデザインの初歩から詳しく解説しています。
実際の作業手順もスクリーンショットを交えながら説明しています。
ファイルの横幅サイズ、どこからデザインすべきかなど、結構気になることが多い情報もあり、初心者だけでなく既に作成経験を持つ方にもオススメの内容です。
5.PhotoshopでWebサイトのデザインをしよう｜Webクリエイターボックス
http://www.webcreatorbox.com/tech/photoshop-web-design/
Web関連の情報を幅広く届けている「Webクリエイターボックス」の記事です。
Photoshopで実際幅のWebデザインを作る、基本ツールで装飾を作るための知識を解説しています。
ロゴ、グローバルナビゲーション、メイン画像まで詳しくデザイン作業の手順が分かります。
解説用のデザインも可愛くお洒落です。
6.Photoshopでスライスし、パーツ画像を作成するコツと方法｜Webクリエイターボックス
http://www.webcreatorbox.com/tech/photoshop-slice/](http://www.webcreatorbox.com/tech/photoshop-slice/)
PhotoshopでWebデザインを作成する際に必要な、スライス作業を実践で学べる記事です。
どのようにスライス作業を進めればいいのかが詳しく分かります。
先に紹介した「PhotoshopでWebサイトのデザインをしよう」と合わせて読むとこで、より理解を深めることができます。
CSSを使った、画像を使用しないデザイン方法についても知ることが可能です。
7.あまり知られていないけど超便利！Webデザイナー向けPhotoshopのショートカットのまとめ｜coliss
http://coliss.com/articles/build-websites/operation/design/photoshop-shortcuts-for-web-designers-by-jake.html
サイト構築関連のテーマを中心に扱う「coliss」の記事です。
数あるPhotoshopのショートカットの中でも、特に便利なものを紹介しています。
どれもWebデザイン作業でよく行う作業ばかりですので、覚えておくと重宝します。
意外に知らない方も多いので、効率アップのためにも目を通しておくことをオススメします。
8.Photoshopで何ができるの？初心者のための使い方と初期設定まとめ｜code部
http://blog.codecamp.jp/photoshop_intro/
プログラミング初心者に向けて情報配信を行うメディア「code部」の記事です。
Photoshopで何ができるのか、という軸で様々な活用方法、初期設定・環境設定について紹介しています。
Photoshopを使い始めたばかりの方や、どんな使い方ができるのかいまいち分からないという方に特に読んでいただきたい内容となっています。
9.Webサイトの作り方のまとめ！デザイン制作からコーディング手前まで。｜lopan.jp
http://lopan.jp/how-to-make-website/
Webデザイン制作からコーディング前までのステップを、分かりやすく丁寧に解説した記事です。
制作前にすることをはじめ、画面の作り方、画像データ保存時のポイントといった、PhotoshopでWebデザインをする際のテクニックが満載です。
ステップごとに画像がついているので分かりやすく、可愛らしいデザインも魅力的です。
10.Webデザイン時におけるPhotoshopレイヤー整理の俺流ルール｜creativememomemo
http://creativememomemo.com/photoshoplayerarrange/
Webデザインの小技、クリエイティブ情報をまとめている「creativememomemo」の記事です。
Photoshopのレイヤー整理について、筆者なりのルールをまとめています。
整理するためのルールのポイントはたった2つで、誰でも取り組みやすい内容です。
整理整頓ができればスムーズにWebデザインが行えますので、覚えて実践することをオススメします。
11.Webデザインを効率化するPhotoshopの機能まとめ｜LIGブログ
http://liginc.co.jp/web/design/photoshop/88454
Web制作会社、株式会社LIGが運営する「LIGブログ」の記事です。
PhotoshopでのWebデザイン作業の効率を飛躍的にアップする方法をまとめています。
効率化のために習得したいことから、初期設定、便利なプラグインまで取り上げていますので、あらゆる方の参考になります。
使い始めた段階ではなかなか手が回りませんが、ツールに慣れてきたら効率化を考えてみるのも大事です。
12.WebデザインのPhotoshop納品で間違ったことはしていませんか？｜all web blog
http://all-web-blog.blogspot.jp/2014/08/webphotoshop.html
Web制作のアイデア情報を配信する「all web blog」の記事です。
初心者だとピンときづらい、Photoshop納品で間違えるポイントを紹介しています。
適切なファイル名をつける、レイヤーに名前を付けるといった当たり前のようで意外にできていない方も多いのではないでしょうか。
Webデザインをこれから始める方も必ず気をつけておくべき内容となっています。
13.これからPhotoshopでWebデザインをしたい初心者さんのためのツールパネルとかいろいろ｜Webdesignresipes
http://webdesignrecipes.com/photoshop-tool-panel-for-web-design-beginner/
Webデザイン、Web制作に関する情報をまとめる個人ブログ「Webdesignresipes」の記事です。
Photoshopを始めたばかりの初心者に向けて、ツールパネルを中心に詳しく紹介しています。
概要から各ツールの詳細、使い方までまとめていますので、一通り読めばツールパネルに備わった機能がどのようなものか理解することができます。
14.Webデザインの1pxを作るためのPhotoshopのレイヤースタイルいろいろ｜Webdesignresipes
http://webdesignrecipes.com/photoshop-layer-style-and-1px-webdesign/
デザインのクオリティをワンランク上げてくれる、1pxの作り方を紹介した記事です。
レイヤースタイルを使った基本操作で、誰でも簡単に取り入れることができます。
これだけでWebデザインの見た目がぐっとよくなりますので、ぜひ活用してみてください。
15.【これから Web制作をする人向け】Photoshopを使う前にしてほしい設定｜NEST onlineblog
http://blog.nest-online.jp/2044
デザイナー向けの情報を中心に提供している「NESTonlineBlog」の記事です。
Web制作をPhotoshopで始める方に向けて、押さえておきたい設定方法を紹介しています。
設定は全10項目で、単位の設定といった初歩的なものから、Retinaディスプレイ、ガイドとグリッドの設定まで紹介しています。
意外に設定していない方も多いので、参考にしたい内容です。
16.PhotoshopでWEBサイトのラフデザインを作る｜初心者のためのWEBデザイン教室
http://webdesignclass.blog.fc2.com/blog-entry-7.html
ホームページを自分で作りたい人に向け、Webデザインの流れやソフトの使い方を紹介する「初心者のためのWEBデザイン教室」の記事です。
コーディング時の手間を省くためのラフデザインの作り方を紹介しています。
ラフデザインが大事な理由から、実際の作業についても分かりやすく解説していますので、なんとなくラフを作っていたという方に読んでいただきたい内容となっています。
17.少しの手間で大きく変わる、細部にこだわったWebデザインを｜Webクリエイターボックス
http://www.webcreatorbox.com/tech/subtle-design-details/
グラデーション、1pxラインといったWebデザインの細部に取り入れたいテクニックを紹介した記事です。
ほんの少しの手間で大きく印象を変えることができますので、デザインがしっくりこない時には試してみることをオススメします。
まとめ
以上、Webデザインの際にPhotoshopを使いはじめようとしている方に読んでいただきたい記事をまとめてご紹介しました。
Webデザインは、同じAdobe社のIllustratorをはじめとするPhotoshop以外のツールでも作ることができます。
しかし、写真加工に不向きなために結局Photoshopを使う羽目になったりするケースも多く、一つのソフトで簡潔させるならPhotoshopがベターと言えます。
今までWebデザイン作業にPhotoshop以外のツールを使っていたという方は、ぜひこれからの作業で活用してみてください。
このニュースを読んだあなたにおすすめ
Photoshop初心者必見！Photoshopを使いこなすために知っておくべき情報まとめ
全て無料！デザインの魅力をさらに引き立てる高品質PSDファイル60選
【10月編】無料のPSDファイル50選
