web-dev-qa-db-ja.com

優れた再利用可能なUI要素(アイコン/ボタンなど)を作成するための最適なリソースは?

「UIを作成する」のは初めてですが、しばらくの間、ユーザーエクスペリエンス/インタラクションデザインを行ってきました。自分のグラフィックスをデザインできないことは、他のデザイナーに依存してこれらの要素を作成しているため、私の仕事にとって深刻なハンディキャップとなっています。

UIレイアウト、パターン、アイコンなどを自分でスケッチし、イラスト(紙)に精通しています。

次のようなデジタルで再利用可能なUI要素/コンポーネントを作成できるようにしたい

  • アイコン、
  • ボタン、
  • テクスチャおよびその他の必須/関連グラフィック。

それを行う方法について私に助言してください?そして、そのようなタスクに適したツールについて言及してください。例:Photoshop /花火など.

そして、これを達成するのに役立つ推奨リソースとガイドを実行してください。

7
Ameen

ボタン

ほとんどのUI要素はPhotoshopで作成しています。レイヤースタイルを利用して、微妙なグラデーション、一貫したハイライトとシャドウを作成します。その後、Photoshop内にレイヤースタイルを保存し、将来的にそれらを任意の形状に適用して、ボタンやその他のUI要素を数秒で作成することができます。 CSS3を使用すると、モックアップしたUI要素をスタイルシートに直接再作成することもできます。画像をスライスする必要がなくなり、数行のコードを変更するだけでサイトのUI要素をグローバルに再設計できるようになったため、これは強力です。

Photoshopでのボタンの作成に関するすばらしい記事: http://galp.in/blog/2011/08/02/the-ui-guide-part-1-buttons/

Css3でボタンを作成する方法に関する記事のコレクション: http://speckyboy.com/2010/02/15/20-css3-tutorials-and-techiques-for-creating-buttons/

パターンとテクスチャ

Photoshopでもパターンを作成しています。 EDIT> DEFINE PATTERNに移動すると、デザインやグラフィック要素をPSのパターンに変換できます。上記のレイヤースタイルと同様に、ボタンをクリックするだけで、パターンを保存してUI要素で再利用できます。レイヤースタイルには、PATTERN OVERLAYのオプションがあり、PSに付属のパターンと、ダウンロードまたは自分で作成したパターンから選択できます。パターンを使用するための鍵は、やりすぎないことです。それらを微妙に使用し、それらの低不透明度レイヤーを構築します。

パターンに関するすばらしい記事: http://galp.in/blog/2011/10/04/the-ui-guide-part-2-bg-forms-texture/

パターンを繰り返すための素晴らしいリソース: http://subtlepatterns.com/

アイコン

アイコンは独自の世界にあります。作成に時間がかかり、難しい、素晴らしいアイコンは通常、才能のあるイラストレーターによって作成されます。それらがかなり最小限で単純なものでない限り、私はそこにある豊富な無料のリソースから私のアイコンを取得します。ただし、他の人が述べたように、独自のアイコンを作成する場合は、ベクターを品質を損なうことなくサイズ変更できるため、Illustratorで作成するのがおそらく最も適しています。ただし、Photoshopで作成してもスケーラブルです。パターンの定義と同様に、形状またはアイコンを作成したら、[編集]> [カスタムシェイプの定義]に移動します。これで、形状がライブラリに保存され、カスタム形状ツールでアクセスできるようになります。 (これは、長方形ツールのオプションです)。カスタムの形状やアイコンをキャンバスにすばやくドラッグして、形状、サイズ、色を数秒で簡単に変更できるようになりました。

いくつかの無料アイコンのまとめ: http://www.smashingmagazine.com/2010/11/09/50-free-high-quality-icons-sets/

簡単な1回限りのアイコンに最適なサイトです。キーワードを検索すると、検索に一致する複数のアイコンが表示されます。 http://www.iconfinder.com/

私はこれらの3つの主題の表面を引っかいただけですが、これらはあなたを正しい方向に向かわせるはずです。上記の方法を使用すると、Photoshop内から再利用可能なリソースの独自のライブラリの作成を開始できます。これにより、プロトタイピングステージが本当にスピードアップします。

5
Jonathan Smith

フォトショップとイラストレーターの混合をお勧めします。

Illustratorはベクターベースであるため、スケーリングが必要なオブジェクトに最適です。

Photoshopは仕事をすることができ、私が一般的に使用するツールです(私がWebデザイナーだったときに使用した唯一のグラフィカルプログラムでもありました)。私はしばしば最終的なグラフィックを作成しませんが。

2
Sheff

私は数年前からUI/UXをやっていて、すべてのモックアップ/コンプをFireworksでやっています。 Fireworksの最大の利点は、9スライスのスケーリングシンボル(ベクトルのままです)を作成できることです。これにより、簡単に再利用およびサイズ変更できます(品質を損なうことなく)。私の知る限り、これはPhotoshopやIllustratorでは不可能です。

1
bart

間違いなくAdobe Photoshop/Illustrator!
私が知っている最良のハウツーリソースは、一番下にあります。

私はプレミアムコンテンツも使用しています。

1
ueberkim