UIデザインの腕が上がるPhotoshopのチュートリアルのまとめ
Post on:2014年10月15日
sponsors
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
美しいシンプルなデザインのブログをレイアウトするチュートリアル。
フラットなスタイルの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アニメーションを作成するチュートリアル。最近よく見かけますね。
sponsors
