web-dev-qa-db-ja.com

PhotoshopでのWebサイトのモックアップ、動的テキストを使用して再利用可能なコンポーネントを作成する方法

PhotoshopでWebサイトのモックアップを作成しています。フォームボタンなどの多くのコンポーネントを繰り返します。ボタンのラベルをボタンのアクションに合わせて置換/変更できる、デフォルトテキスト「BUTTON」のボタンなどのUIコンポーネントのライブラリを作成したいと思います。

デフォルトのテキストでボタンスマートオブジェクトを作成しようとしましたが、テキストを変更するたびにリンクされたオブジェクトを配置すると、すべてのボタンに同じラベルが付けられます。

私の目標は、モックアップの3つのボタンのそれぞれに異なるラベルを付ける機能を維持しながら、スマートオブジェクトを使用して、アートボードのすべてのボタンの外観(たとえば、緑色のボタンを青色に変更)をすばやく変更することです。

この柔軟性は可能ですか?そうでない場合、良い解決策は何ですか?

1
Kimchi4Me

私は長い間Photoshopを使用してWebサイトのモックアップを作成していましたが、その機能を真剣に見逃していました。

その後、Sketchがまさにあなたが言及する機能、つまり編集可能なスマートオブジェクトを提供することを発見しました。テキストラベルを使用して標準フォームフィールドの形状をデザインし、それをシンボルとしてSketchに保存するとします。次に、テキストラベルのすべてのインスタンスのテキストを手動で設定できます。これは画像の背景でも機能するようです。

これがスケッチでどのように機能するかのスクリーンショットです:

Sketch uses so-called Overrides on symbols:

したがって、これはPhotoshopでこれを行う方法の直接的なヒントではありませんが、この柔軟性を実現するための適切な解決策を求めている場合は、スケッチを試してみてください。

1