UIデザインの腕が上がるPhotoshopのチュートリアルのまとめ

UIデザイン用の最適なPhotoshopの環境設定方法から、ブラーやサークルを使ったエレメント、フラットや縦長やレトロスタイルのレイアウト、ページのアクセントになるエレメントの作り方、ディテールの作り込み方など、ユーザインターフェイスをPhotoshopで作成する際に勉強になるチュートリアルを紹介します。

How To Set Up Photoshop For UI Design

まずは、ユーザインターフェイスをデザインする時に最も良い結果がでる最適なPhotoshopの環境設定から。当ブログでの翻訳版もあります。

• Photoshopでの作業がはかどる！ウェブデザイン（特にスマフォ）用の効果的な環境設定のまとめ

How to Create a Dynamic iOS 7 Style Background Blur in Photoshop

背景の写真がぼやけて見えるブラーエフェクトのエレメントを作成します。エレメントのサイズ変更や背景変更も簡単にできるよう工夫がされています。

Playing with type and images in Photoshop

写真画像の上にテキストやロゴを美しく重ねるチュートリアル。プロセスを理解すると、いろいろと応用もできますね。

Designing a Web App UI Kit‏ in Adobe Photoshop

タイポグラフィ、ボタン、フォーム、画像、カラースキームなど、UIキットを作成するチュートリアル。エレメントの一覧があるとデザインのぶれがなくなります。

Designing an Elegant Blog Layout in Photoshop

美しいシンプルなデザインのブログをレイアウトするチュートリアル。

Flat Web Design Tutorial

フラットなスタイルのWebページをデザインするチュートリアル、18分ほどの動画です。

Learn How to Design a Website From Scratch in Photoshop

サークル状のエレメントやブラーエフェクトなどを取り入れたフラットスタイルのレイアウトをフルスクラッチで作成します。

Flat Web Design Tutorial – Portfolio Landing Page

フラットなスタイルでデザインされたポートフォリオのランディングページを作成するチュートリアル。50分ほどの動画です。

Create a One-Page Retro Web Design Layout in Photoshop

レトロ風にデザインされた縦長1ページを作成するチュートリアル。

Design an Eye-Catching Voucher in Photoshop

リボン、ブラー、サークルなどを使ったアイキャッチ用のエレメントを作成するチュートリアル。

How to Create a Set of Annotations in Adobe Photoshop

注釈に使うさまざまなアイテムを作成するチュートリアル。

Create a Custom iOS 7 Style Blur Background in Photoshop

iOSで使われているブラーな背景画像を作成するチュートリアル。単にぼかすだけでは、ここまで美しく仕上げることはできません。

Crafting Subtle & Realistic User Interfaces

光沢やつや、シャドウ、ノイズなど、ユーザインターフェイスを作成する時にこだわりたい繊細なエフェクトの使い方。当ブログでの翻訳版もどうぞ。

• 細部にこだわったUIエレメントをPhotoshopで作成するポイント

Making Rounded Rectangles Look Great

ボタン、パネル、アイコンなどに使われる角丸を美しく見せるためのチュートリアル。

Create an Animated Interface GIF in Adobe Photoshop

インターフェイスの動きを見せるGIFアニメーションを作成するチュートリアル。最近よく見かけますね。