on:2014年10月15日sponsorsUIデザイン用の最適なPhotoshopの環境設定方法から、ブラーやサークルを使ったエレメント、フラットや縦長やレトロスタイルのレイアウト、ページのアクセントになるエレメントの作り方、ディテールの作り込み方など、ユーザインターフェイスをPhotoshopで作成する際に勉強になるチュートリアルを紹介します。Designまずは、ユーザインターフェイスをデザインする時に最も良い結果がでる最適なPhotoshopの環境設定から。当ブログでの翻訳版もあります。Photoshop背景の写真がぼやけて見えるブラーエフェクトのエレメントを作成します。エレメントのサイズ変更や背景変更も簡単にできるよう工夫がされています。Photoshop写真画像の上にテキストやロゴを美しく重ねるチュートリアル。プロセスを理解すると、いろいろと応用もできますね。Photoshopタイポグラフィ、ボタン、フォーム、画像、カラースキームなど、UIキットを作成するチュートリアル。エレメントの一覧があるとデザインのぶれがなくなります。Photoshop美しいシンプルなデザインのブログをレイアウトするチュートリアル。TutorialフラットなスタイルのWebページをデザインするチュートリアル、18分ほどの動画です。Photoshopサークル状のエレメントやブラーエフェクトなどを取り入れたフラットスタイルのレイアウトをフルスクラッチで作成します。Pageフラットなスタイルでデザインされたポートフォリオのランディングページを作成するチュートリアル。50分ほどの動画です。Photoshopレトロ風にデザインされた縦長1ページを作成するチュートリアル。Photoshopリボン、ブラー、サークルなどを使ったアイキャッチ用のエレメントを作成するチュートリアル。Photoshop注釈に使うさまざまなアイテムを作成するチュートリアル。PhotoshopiOSで使われているブラーな背景画像を作成するチュートリアル。ぼかすだけでは、ここまで美しく仕上げることはできません。Interfaces光沢やつや、シャドウ、ノイズなど、ユーザインターフェイスを作成する時にこだわりたい繊細なエフェクトの使い方。当ブログでの翻訳版もどうぞ。Greatボタン、パネル、アイコンなどに使われる角丸を美しく見せるためのチュートリアル。Photoshopインターフェイスの動きを見せるGIFアニメーションを作成するチュートリアル。最近よく見かけますね。