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

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

サイトのキャプチャ

How To Set Up Photoshop For UI Design

まずは、ユーザインターフェイスをデザインする時に最も良い結果がでる最適な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

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

サイトのキャプチャ

Making Rounded Rectangles Look Great

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

サイトのキャプチャ

Create an Animated Interface GIF in Adobe Photoshop

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

top of page

©2017 coliss