AdobeXDでボタンを作成する方法

ここでは、AdobeXDで塗りつぶしとテキストを含む単純なボタンを作成する手順を説明します。これらの簡単な手順に従ってください。

長方形ツールを選択し、クリックしてドラッグし、アートボード上に任意のサイズの長方形を作成します。
この例では、標準のiPhone6テンプレートが選択されています。

長方形がアクティブな状態で、[幅]テキストボックスに200と入力し、[高さ]テキストボックスに70と入力します。それぞれを入力した後、Tabキーを押して、値を確認します。

塗りつぶしを適用する

ここでは、図形に塗りつぶしの単色を追加します。

長方形がまだ選択されていることを確認してください。[プロパティ]パネルの[塗りつぶし]の左側にある白いボックスをクリックして、カラーピッカーを開きます。

色相スライダーをクリックしてドラッグし、色をスクロールします。好みの色相の色を入力したら、カラーパネルで色をクリックして長方形に適用します。

カラーピッカーの下部にある[色見本の保存]プラス記号をクリックすると、頻繁に使用する可能性のある色を保存できます。

カラーピッカーウィンドウの右側にあるスライダーを使用して、塗りつぶしに透明度を適用できます。

長方形の周りのストロークを削除するには、境界線の左側にあるチェックボックスをオフにします。

AdobeXDでボタンを作成する方法

カラーピッカーで色を適用します。Save Color Swatch +記号をクリックして、色を保存します。

角を丸める

角を正方形のままにするか、次の手順のいずれかに従って、形状の角を丸めることができます。

  • 長方形の角の内側にある角ウィジェットをクリックしてドラッグすることで、角を視覚的に丸めることができます。AdobeXDでボタンを作成する方法

    コーナーウィジェットをクリックしてドラッグし、コーナーを丸めます。

Alt(Windows)またはOption(Mac OS)キーを押しながら、1つの角の半径をドラッグして、独立した値にします。

  • プロパティパネルの[コーナーラジオ]テキストボックスに値を入力して、コーナー半径の値を入力することもできます。AdobeXDでボタンを作成する方法

    プロパティパネルに値を入力して、コーナー半径にさまざまなサイズを追加します。

ボタンにテキストを追加する

次に、ボタンにテキストを追加します。

[ツール]パネルから[入力]ツールを選択し、ボタンの内側をクリックします。テキストカーソルが表示されます。テキストボックスは後で移動できるため、テキストボックスの正確な配置について心配する必要はありません。

[送信]という単語を入力し、Ctrl + A(Windows)またはCommand + A(Mac)を押してテキストを選択します。

単語を選択した状態で、[プロパティ]パネルの[テキスト]領域のプロパティを変更して、好みのフォントとタイプサイズを選択します。[左揃え]、[中央揃え]、または[右揃え]ボタンを選択して、配置を変更することもできます。

[フォントサイズ]テキストボックスで現在のフォントサイズを選択し、上矢印または下矢印を押して、フォントサイズを拡大または縮小できます。

テキストの色を変更するには、[塗りつぶし]ボックスをクリックします。AdobeXDでボタンを作成する方法

[プロパティ]パネルの[テキスト]セクションを使用して、タイププロパティを選択します。

Leave a Comment

PDFファイルのセクションをスクリーンショットする

PDFファイルのセクションをスクリーンショットする

Adobe Acrobat CS5のスナップショットツールを使用して、テキストと画像の両方を選択し、PDFファイル内の特定の領域の画像を作成できます。結果は通常、PDFファイル内のセクションのスクリーングラブと呼ばれます。結果は画像であり、あなたのテキストはありません[…]

Photoshop CCでのピクセルの測定、カウント、分析

Photoshop CCでのピクセルの測定、カウント、分析

研究者や科学者向けに設計されたPhotoshopCCの測定機能は非常に強力です。おそらく顕微鏡や望遠鏡から、ほぼすべてを測定し、技術的な画像に含まれるものの数を数えることができます。画像内の要素の正確なサイズがわかっている場合は、ほぼすべてのものを見つけることができます[…]

Adobe CS5Illustratorの液化ツール

Adobe CS5Illustratorの液化ツール

Adobe Creative Suite 5(Adobe CS5)IllustratorのLiquifyツールを使用すると、単純な歪みから複雑な歪みを作成することで、オブジェクトを曲げたり、波打ったり、ねばねばしたり、とがったりさせることができます。Liquifyツールは、オブジェクトに対してあらゆる種類の創造的または奇抜な(見方によって)歪みを実現できます。君は […]

AdobeXDでテキストのプロパティを調整する方法

AdobeXDでテキストのプロパティを調整する方法

Adobe XDプロジェクトにテキストがある場合は、テキストのプロパティの変更を開始できます。これらのプロパティには、フォントファミリ、フォントサイズ、フォントの太さ、配置、文字間隔(カーニングとトラッキング)、行間隔(先頭)、塗りつぶし、境界線(ストローク)、シャドウ(ドロップシャドウ)、および背景のぼかしが含まれます。それでは、これらのプロパティがどのように適用されるかを確認しましょう。読みやすさとフォントについて[…]

InDesignCCでQRコードを作成する方法

InDesignCCでQRコードを作成する方法

InDesignを使用して、QRコードグラフィックを作成および変更できます。QRコードは、単語、数字、URL、その他の形式のデータなどの情報を保存できるバーコードの形式です。ユーザーはスマートフォンなどのデバイスでカメラとソフトウェアを使用してQRコードをスキャンし、ソフトウェアはそれを利用します[…]

PhotoshopCCでアートボードを操作する

PhotoshopCCでアートボードを操作する

Adobe Illustratorと同様に、Photoshopアートボードは、1つのドキュメント内に個別のページまたは画面を作成する機能を提供します。これは、モバイルアプリケーションや小さなパンフレットの画面を作成する場合に特に役立ちます。アートボードは、レイヤーパネルを使用して作成された特別なタイプのレイヤーグループと考えることができます。これは […]

Adobe IllustratorCCでテキストを折り返す

Adobe IllustratorCCでテキストを折り返す

Adobe Illustrator CCでテキストを折り返すことは、プレゼントを折り返すこととまったく同じではありません。簡単です。この図に示すように、テキストの折り返しは、テキストをグラフィックの周りに強制的に折り返します。この機能は、どんな作品にも少し創造性を加えることができます。グラフィックは、テキストを強制的に折り返しています。まず、[…]を作成します

Illustratorで図形のサイズを変更する方法

Illustratorで図形のサイズを変更する方法

Adobe Illustrator CCでデザインする場合、正確なサイズ(たとえば、2 x 3インチ)の形状が必要になることがよくあります。シェイプを作成した後、正確な測定値にサイズ変更する最良の方法は、この図に示すように、[変換]パネルを使用することです。オブジェクトを選択してから、[ウィンドウ]→[変換]を選択します[…]

SVGに透明度を適用する方法

SVGに透明度を適用する方法

IllustratorでSVGグラフィックに透明度を適用する方法を学びます。背景が透明なSVGを出力し、透明効果を適用する方法を探ります。

AdobeXDでの画像の操作

AdobeXDでの画像の操作

画像をAdobeXDにインポートした後は、編集の制御はそれほど多くありませんが、他の形状と同じように画像のサイズを変更したり回転したりできます。コーナーウィジェットを使用して、インポートした画像のコーナーを簡単に丸めることもできます。閉じた形状を定義して画像をマスキングする[…]