Artboard Studio名刺モックアップ

• 四月 26, 2024

このチュートリアルでは、事前に設計されたテンプレートの1つを使用して、Artboard Studioで名刺モックアップを作成します。モックアップを作成する最も簡単な方法は、テンプレートから開始することです。必要なのは、モックアップにアップロードして配置するデザインだけです。

テンプレートを使用する場合でも、ニーズに合わせてモックアップをカスタマイズできます。背景も含め、すべてのデザイン要素を移動、サイズ変更、色変更などができることを忘れないでください。

1. アカウントにログインすると、[新しいプロジェクトの作成]ボタンが表示されます（スクリーンショットを参照）。このボタンをクリックして、テンプレートのリストに移動します。
   
   
2. 右上隅のアイコンをクリックして検索バーを開き、検索します 名刺 （スクリーンショットを参照）。
   
   私の例の名刺には表と裏の両方のデザインがあるため、カードの両面を表示するモックアップを使用することにしました。現時点では、そのタイプのモックアップを備えた2つのテンプレート、つまり名刺モックアップと名刺スタックを選択できます。後者を選択しました（スクリーンショットを参照）。
   
   
3. テンプレートのサムネイルをクリックして、メインキャンバスに移動します。
   
   キャンバス設定で確認できるように、キャンバスサイズと背景の色/グラデーションを変更できます。今のところデフォルトのままにします。
   
   
4. キャンバス上の名刺を右クリックして、ポップアップメニューを開きます（スクリーンショットを参照）。
   
   ご覧のとおり、イメージフィルターからカスタムシャドウまで多くのオプションがあります。最初のプロジェクトをシンプルにし、デフォルトのままにします。デザインをアップロードしてモックアップに追加するだけです。
   
   
5. [レイヤー]パネルに移動します。デザインをStanding Cardレイヤー、Laying Down Cardレイヤー、Side Color Onlyレイヤーに追加できます。
   
   
6. Standing Cardレイヤーをクリックして、このオブジェクトをカスタマイズします（スクリーンショットを参照）。
   
   
7. 左側のメニューで、[アップロード]アイコンをクリックします。次に、[アップロード]ボタンをクリックして、カードの前面と背面のデザインをアップロードします（スクリーンショットを参照）。
   
   
8. デザインのサムネイルをクリックして、キャンバスに追加します。
   
   
9. 上部にある[メインキャンバス]タブをクリックして戻ります。
   
   
10. Laying Down Cardレイヤーをクリックして、カードバックデザインを追加します。
    
    デザインが整ったので、背景色を変更しましょう。デザインの色をテストすることから始めるのが好きです。
    
    
11. キャンバス設定で「背景」をクリックして、キャンバスの背景カラーピッカーを開きます。
    
    デフォルトは緑から白へのグラデーションです。いくつかの無地の背景色をテストしてみましょう。
    
    
12. [ソリッド]ボタンをクリックして、デフォルトのグラデーションから切り替えます（スクリーンショットを参照）。
    
    
13. スポイトツールを選択して、デザインのいくつかの色をテストします。この例では、濃い赤色を選択しました。
    
    単色はいいですが、少し暗いです。グラデーションをテストしてみましょう。
    
    
14. [グラデーション]ボタンをクリックします。
    
    ボタンの下のグラデーションバーに注目してください。各終了円を選択し、いくつかのグラデーションを試してください。好みのグラデーションが見つかったら、Xをクリックしてパネルを閉じます。
    
    この例では、白一色の背景を使用することにしました。最後に、カードの側面の色を変更する必要があります。これは、Side Color Onlyレイヤーによって制御されます。
    
    14. [サイドカラーのみ]レイヤーをクリックします。
    
    デフォルトの緑の背景は明るい緑の色をカードの側面にキャストするため、デフォルトは明るい緑の色です。背景が白なので、これをライトグリーンからライトグレーに変更しましょう（スクリーンショットを参照）。
    
    それは簡単なモックアップでした！ Artboard Studioは作業内容を自動的に保存するため、プロジェクトを.pngとしてダウンロードしましょう。
    
    14. [クイックエクスポート]パネルで、エクスポートファイルタイプをPNGに設定し、[エクスポート]ボタンをクリックします（スクリーンショットを参照）。
    
    

//artboard.studio/
//www.youtube.com/watch?v=aSCe5ZLR8rg

Mockup Zone Inc.の許可により使用されるArtboard Studioのスクリーンショット

動画の説明: "ほぼPhotoshopアプリ" で速攻モックアップ作り。Artstudio Proの使い方 (四月 2024).