アプリケーションに同様のインターフェースを作成したいので、Picasaがどのように構築されたかについての情報を探しています。
情報には、プログラミング言語、UIデザインなどが含まれます。
アプリケーションに同様のインターフェースを作成したいので、Picasaがどのように構築されたかについての情報を探しています。
情報には、プログラミング言語、UIデザインなどが含まれます。
美しい Picasa UI はダイナミック PSD ファイルで構成されています:
Picasa の「runtime」フォルダを調べていたら、大量の Photoshop .PSD ファイルが見つかりました。案の定、UI の大部分は Photoshop で構築されています。レイヤーは、ボタン、スタンドイン、およびカーソルを整理するために使用されます。ロールオーバーは、JavaScript/DHTML と同様の画像置換で実現されます。たとえば、タイムライン ビューは、選択したグループのサムネイルと独自のレイヤー セットで定義されたカスタム カーソルを保持するためのタグ付きレイヤーを含む 640x480 の画像です。
Picasa の基盤となるグラフィック エンジンは、.PSD ファイルからインポートされたタグ付き要素を簡単にターゲットにするための DOM を備えた単純化された「Photoshop ランタイム」である可能性が最も高いです。これは、迅速な UI プロトタイピングと、異なるプラットフォーム間での一貫したルック アンド フィールを提供するため、スマートなアーキテクチャです。デザイナーは Photoshop で変更を加え、Picasa を再起動して結果を確認できます。さらに良いことに、エンド ユーザーは、新しいツールを習得する必要なく、アプリケーションをスキニングできます。
「runtime」フォルダーには、UI 要素を対応する .PSD 要素にバインドし、レイアウトの配置と可視性を定義するいくつかの単純なスクリプトも含まれています。