UIデザイン用の最適なPhotoshopの環境設定方法から、ブラーやサークルを使ったエレメント、フラットや縦長やレトロスタイルのレイアウト、ページのアクセントになるエレメントの作り方、ディテールの作り込み方など、ユーザインターフェイスをPhotoshopで作成する際に勉強になるチュートリアルを紹介します。
UIデザインの腕が上がるPhotoshopのチュートリアルのまとめ
UIデザイン用の最適なPhotoshopの環境設定方法から、ブラーやサークルを使ったエレメント、フラットや縦長やレトロスタイルのレイアウト、ページのアクセントになるエレメントの作り方、ディテールの作り込み方など、ユーザインターフェイスをPhotoshopで作成する際に勉強になるチュートリアルを紹介します。
ウェブサイトのヴィジュアルを定義するスタイルガイド用のテンプレート素材 -UI Style Guide Template
UIスタイルガイドとはウェブサイトのヴィジュアルを定義するもので、コンテンツから切り離すことによりウェブサイトのスタイルを的確に確認するのに役立ちます。 UIスタイルガイドを作成する際にベースとなるテンプレート素材を紹介します。 UI Style Guide Template UIのスタイルを一括で管理することでデザインの作業時だけでなく、コーディングや検証の時にも重要なガイドになるでしょう。また、クライアントがヴィジュアルの変更を求めてきた際も、部分的にみるのではなく、全体を通して整合性をもった対応を行うことができます。 テンプレート素材にはカラースキームや背景をはじめ、さまざまなUIエレメントのスタイルが定義されています。
Icon Deposit CSS3 UI Kit (PSD+CSS) - Icon Deposit
- Preview the Live Code Here Here is the long awaited Icon Deposit CSS3 UI Kit. This includes everything from GUI switches and buttons, to radio buttons and checkboxes. I also included the Photoshop PSD file for those who want to edit the design or make the images bigger. Keep in mind that this preview image is only for google chrome, so if you would like to see it in other browsers, you will need
デザインが苦手な人、すぐに使いたい人にぴったりなウェブページ・ワイヤフレーム用のPSD素材 -Layout Lab
デザインが苦手な人、すぐに使いたい人にぴったりなウェブページ・ワイヤフレーム用のPSD素材 -Layout Lab
細部にこだわったUIエレメントをPhotoshopで作成するポイント
ウェブデザインをワンランクアップさせる、リアリスティックなユーザインターフェイスエレメントをPhotoshopで作成するポイントを紹介します。 Crafting Subtle & Realistic User Interfaces [ad#ad-2] 少し古い記事ですが、現在でも役立つ情報なのでご紹介。 下記は各ポイントを意訳したものです。 オブジェクトを想像する 光沢 vs つや消し 制作に役立つTips リアリティは繊細に オブジェクトを想像する リアリスティックなUIエレメントを設計する時には、そのオブジェクトが実世界でどのように見えるか想像する必要があります。それを実現する一番簡単な方法は、そのオブジェクトをモニターの横からどのように見えるか想像することです。 これは最近のウェブデザインでもよく見かける微妙な凸型のパネルで、その外周には小さいエッジを持っています。光源は上部にあり、
かなりクールなPhotoshop用フリーUIキット-PSDファイル50個:phpspot開発日誌
50 Free PSD UI Kits and Templates for Web Designers かなりクールなPhotoshop用フリーUIキット-PSDファイル50個。 ボタンやフォーム要素やメニュー、パンくずリストといったあらゆるURLパーツが揃ったPSDファイルのまとめエントリです。 ページのモック作成や本番のデザインにも使えそうです。そもそものクオリティが高いものばかりが選ばれており、更にPhotoshopのレイヤーに分かれていることで再配置も容易なので有益なものとなっています。 素晴らしいまとめです。 関連エントリ WEBデザインのモック作成時に役立つ手書き用PDFテンプレート集 ブラウザ上でサイトのモックアップを光速で作成できるサービス「Lumzy」 WEBレイアウト作成用のモック作成ツールキット iPhoneアプリのモックアップが簡単に作れるサイト「iPhone Mo
ボタンやインフォボックスなどを集めたＵＩパーツのPSD:phpspot開発日誌
Freebie: Massive Web UI & Button Set | MediaLoot ボタンやインフォボックスなどを集めたＵＩパーツのPSD。 次のようなデザインのＵＩパーツキットがダウンロード可能です。 サイトにあてはめてより分かりやすいデザインにするために活用できそう PSD形式なので色は自由に変えられます 関連エントリ クオリティの高いUIパーツのPSDファイルを日替わりで「365psd」 ボタンやフォーム要素、シールなどWeb2.0っぽいUIパーツ集 Extバリの超クールなUIを提供するJavaScriptライブラリ「Jx Library」
無料でダウンロードできるUIデザインのPSDファイル集 – creamu
綺麗なグラデーションや立体感のあるメニューやボタンを作りたい。 そんなときに参考になるのが、「Free PSD Web UI Element」。無料でダウンロードできるUIデザインのPSDファイル集です。 なかなかいい感じのものが揃っています。 Modern Web UI Set かっこいいメニューやボタン、フォームなど。商用でも利用可 Massive Web UI & Button Set カラフルなアイコンやパンくずなどのPSDファイル Free PSD : Checkbox Replacement iPhoneのオンオフボタンのような、チェックボックスのデザイン Webdesigner Toolkit 優しいトーンで角丸デザインのUIパーツ Scalable calendar シンプルなカレンダーのPSDファイル UIの要素をさくっと作りたいときに、参考にしてみてはいかがでしょうか。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
商用利用も無料、美しいページレイアウトと細部まで作り込まれたUIエレメントが揃ったウェブデザイン用のPSD素材 -Blaz.
UI要素の作りこみに参考になりそうな高品質なフリーのPSD素材