スケッチデザインにデータを追加する方法

Sep 13, 2025

操作方法

スクリーンデザインは過去数年間で長い道のりをしています。うーん、私たちは数年前に「スクリーンデザイン」と言っていませんでした。グラフィックデザイナーやイラストレータのスコアがスクリーンデザインに取り組むために進化するので、ツールセットもあれば。私たちはもはや静的な、特異な芸術の断片を作成していません - 私たちはさまざまな環境にわたって働く必要がある生活を計画しています。

この新しい一連の要求は、柔軟で集中した新しいツールの爆発を由来しています。私のお気に入りのお気に入りは、ボヘミアンコーディングのチームからの昇進星です。

スケッチは私が今まで夢見ていたよりも早く働くことができます、私は私が最善を尽くしていることをしてください。準備ができているときに高忠実度に行くのに十分なほど強いのは十分な光です。スケッチの最大の強みの1つは、その成長しているコミュニティです。これは、スケッチを望むどんな方向にも拡張するプラグインの巨大な選択を作成しました。

クラフト 、Invision Labsから、将来のデザインワークフローに電力を供給することを目指しています。それはすべてのツールのセットを提供しています、すべてが時間を節約し、設計中にリアリズムを追加するように構築されています。時間は無数の保存されたステップ（さようならコピーと貼り付け！）から来て、リアリズムは実際のデータとコンテンツへのクイックアクセス（さようならLorem Ipsum！）から来ます。

このレッスンでは、連絡先のリストのための完全で現実的なスクリーンデザインを作成するために、Craft：Photos、Type、Duplicateから3つのキーツールを使用することを確認します。

01.あなたのアートボードを設定します

Sketchで新しい文書を作成し、内部で動作するアートボードを設定することから始めましょう。新鮮な文書では、ヒットします 挿入＆gt;アートボード または簡単に A. Artboardツールを有効にするためのキー。

右側のペインでは、事前に定義されたアートボードのサイズでメニューが表示されます（一般的なデバイスとシナリオと一致するように作成された）。キャンバスの中央には、iPhone 6とアートボードが作成されます。

02.ヘッダーを描く

このレッスンの連絡先のリストを特に作成していますが、錯覚を完了するためにいくつかの追加のインターフェースビットが必要です。長方形ツールを使って 挿入＆gt;矩形 または r ）、アートボードの上部を横切ってヘッダーを引き出します。 Artboardの左右の角にある「メニュー」や「検索」の操作など、「連絡先」を挿入します。

03.フッターを構築します

Add a tabbed footer, with a floating action button for adding a new contact — 新しい連絡先を追加するためのフローティングアクションボタンでタブ付きフッターを追加します。

データに取得する前に、新しい連絡先を追加するためのFAB（フローティングアクションボタン）を使用して、クイックタブ付きフッターを構築しましょう。長方形のツールを使って、白い長方形を引き出してアートボードの下部に置きます。楕円形のツールを使う（ 挿入＆gt;楕円 または o ）、Fabの円を描きます。

04.アイコンを挿入します

次に、クリック先のアイコンを挿入して、ファブ内の「プラス」、左側のタブの「ユーザー」アイコン、右側の「履歴」アイコンを表示します。また、インジケータを追加します - 簡単な黒い線 - コンタクト 表示が選択されています。 Artboard Background Color（Black）を設定するのに最適な時期にも、アートボードを選択してから検査員の色を選びます。

05.連絡先アイテムを作成します

当社のステージセットでは、単一の連絡先を作成する時が来ました。これは、データで埋められ、重複し、グリッドに配置されて連絡先の全リストを完成させる項目です。単純な円から始めましょう。アバターのプレースホルダーとして機能しましょう（各ユーザーを表す写真）。

06.テキストレイヤーを作成します

Add text layers where the names and addresses of your contacts will sit — 連絡先の名前とアドレスが座るテキストレイヤーを追加する

楕円形の隣に、テキスト層のペアの挿入も挿入しましょう。 withう 挿入＆gt;テキスト または簡単に t キー、テキストツールを使用して「ここに名前」を読み取るレイヤーを挿入し、もう1つの下に「ここに電子メール」を読み取ります。これらはクラフトのタイプパネルからのデータで埋められる層になります。

07.名前を選択してください

Using the Type panel, populate the design with some random names — タイプパネルを使用して、デザインにいくつかのランダムな名前を入力します。

ソーセージを作る時間！実際の名前と実際のメールアドレスを挿入することから始めます。まず、「ここに名前」を読み取って「インスペクタの横にあるクラフトバーにある」を開きます。から選択するデータのメニューが表示されます。「名前」を選んでから、男性、女性、またはその両方から選択してください。テキストレイヤーは自動的に実際の名前で埋められます。

08.メールテキストレイヤーを入力してください

名前をやったのと同じ方法で電子メールテキストレイヤーを埋めるつもりです。 [ここでEメール]レイヤーを選択し、[タイプ]パネルを開き、[Eメールアドレス]を選択して現実的なEメールアドレスをすばやく挿入します。

09.ランダムな顔

Select a source from which headshots can be pulled — ヘッドショットをプールできるソースを選択します

次に、私たちは写真パネルと一緒にする本物の写真アバターでその灰色の丸を埋めたいと思います。サークルレイヤーを選択して開始してから、クラフトウィンドウから「写真」を開きます。ここでは、ローカルフォルダ、Dropbox、またはWebから大規模にソースを付けるなど、いくつかのオプションがあります。

ここで私はWebサイトuifaces.comからダウンロードした画像でいっぱいのローカルフォルダを選択しています。 [写真]をクリックすると、クラフトはあなたのコレクションから取られたランダムな顔であなたのサークルを満たします。

10.連絡先のリストを作成します

単一の連絡先を埋めて、連絡先の完全なリストを作成する時が来ました。その前に、作成したばかりの層の下に小さな分割線を挿入しましょう。

11.複製

単一の接触要素をリスト全体に繰り返すには、Craftの重複パネルを使用します。グループを選択して、重複パネルを開き、オプションをチェックしてください。

2つの選択肢があります。内部選択と特定の数。最初にリストに必要な領域を選択することができます。 2つ目は、正確な数を定義することができます（「グリッドX項目を幅とyアイテムの高さ」にしたい）。

12.内部の選択を使う

スクリーンデザインに最適な内部選択オプションを使用します。これはグリッドではなく垂直リストですので、垂直オプションを確認するだけです。 [コンテンツの複製]をクリックして、いくつかのことが起こることがわかります。

まず、単一のコンタクトグループが3倍になっています。次に、重複していた毎回の違いがありますが、フィールドは再入力されるため、新しいグループは新たなデータを使用します。第三に、連絡先グループの下に作成された新しいレイヤーがあります。これは、連絡先で埋めたい領域を定義するために使用します。

13.レイヤーのサイズを変更します

Resize the Duplicate Control layer, and the contacts will multiply to fill the space — 複製制御層のサイズを変更し、連絡先は空間を埋めるために乗算します

連絡先リストを画面全体を入力するには、サイズ変更します。 複製コントロール 層。形状のボトムハンドルをつかみ、それをアートボードの底部にドラッグします。

手放すとすぐに、重複は自動的に新しいスペースを埋めるためにさらに連絡先グループを作成します。また、新しいグループごとに新たなデータを記入します。

14.間隔を固定します

今度は私たちのリストが整っています、あなたは間隔が正しくないことに気づくかもしれません。工芸品では、調整溝はかなり簡単です。複製コントロールレイヤが選択されている場合は、複製パネルをもう一度開き、ボタンがGUTTERSの調整を読み取るように注意してください。キャンバスの周囲の各新しいレイヤーをヌードする代わりに、単に垂直方向の溝オプションを20に変更してから、Guttersの調整ボタンを押します。あなたのリストは自動的に正しい間隔にスナップします。

15.クールなヘッダーを追加します

私たちのリストを完成させて、実際の人々に取り入れて、インターフェースに再びバックバックして、フルフォトヘッダーの形で、いくつかの才能を挿入しましょう。元の「header-bg」の形を選択して、Rectangleツールでドレインし、リスト内の最初の連絡先に向かってサイズ変更します。ヘッダーはおそらく最初の項目から約20pxを停止する必要があります。

16.正しい画像を見つけます

Unsplash is an impressive online photo resource — 抜け落ちらのオンライン写真リソースです

私たちの新しくサイズの形が選択されているので、写真パネルを開き、スプラッシュタブに向かって進みましょう。 Unsplashは、ロイヤリティフリー、高品質の写真でいっぱいの素晴らしいオンラインリソースです。

Craftは色とカテゴリで絞り込むことができますので、あらゆる機会に完璧な写真を見つけることはこれまで以上に簡単です。私たちの暗い色のスキームでは、スペースカテゴリが大丈夫だと思います。写真をクリックして写真と新しい写真が所定の位置に落ちます。

17.色を微調整します

工芸品は私たちのフィルターに基づいてランダムな写真を置くので、あなたが好きなものを見つけるまで、それは再びそして再び画像をシャッフルするのは簡単です。あなたが見るものが好きまで写真をクリックしてください。

私が好きな写真は少し明るいので、画像の上に暗い半透明の塗りつぶしを加えることによってノッチを下にするつもりです。スケッチを使用すると、単一の形を塗りつぶすことができますので、検査者の塗りつぶしセクションの小さな '+'アイコンをクリックするだけです。私はイメージの上に50パーセントの黒いレイヤーを追加しました。

18.完了！

There you have it – a realistic mockup full of data — そこにそれがあります - データがいっぱいの現実的なモックアップ

それがすべてのものです！コンテンツを見つけるための通常のMADダッシュは通常、検索、コピー、貼り付け、および繰り返しを検索します - もうありません。レイアウト全体を現実的なデータで埋めることは、ちょうど少数のクリックです。あなたはあなたのお気に入りのデザインプログラムを残す必要さえありません。

スケッチデザインにデータを追加する方法

01.あなたのアートボードを設定します

02.ヘッダーを描く

03.フッターを構築します

04.アイコンを挿入します

05.連絡先アイテムを作成します

06.テキストレイヤーを作成します

07.名前を選択してください

08.メールテキストレイヤーを入力してください

09.ランダムな顔

10.連絡先のリストを作成します

11.複製

12.内部の選択を使う

13.レイヤーのサイズを変更します

14.間隔を固定します

15.クールなヘッダーを追加します

16.正しい画像を見つけます

17.色を微調整します

18.完了！

操作方法 - 最も人気のある記事

マヤのためのレンダルマンでシーンを作成する

WebGL 3Dランディングページを作成する

すぐに手をスケッチする方法

CSSカスタムプロパティの概要

レスポンシブとデバイスの不具合の形式の設計方法

サイトにビジュアルキューを追加する

ユーザーの行動に影響を与える7キラー方法

アートレージでカスタムステッカーブラシを作成する

カテゴリ