Sampleとしてログインボタンをつくります。

デザインソフトを起動する為Playボタンを押下します。（デザインソフトの起動についての詳細は[Start]より。）
　
　Playボタン↓

　

続けて「New」→「Set」ボタンを押下し、描画画面を表示させます。

　先ず、ログインボタンのボタン本体にあたる部分をつくりますので角丸長方形を描画します。
図1の角丸長方形を選択します。(描画方法について詳しくはマニュアル→ [Draw])

今回はテキストボックスにより描画しますので、「Text」ボタンを選択します。（図2）
描画方法を選択すると青色の鉛筆マークが表示されます。これが描画可能の状態であるマークになります。

図3にある[Height]欄に0を入力します。（他の項目はデフォルトの状態[X-300][Y-300][Width-100][Round-W-20][Round-H-20]で描画します。
尚、角丸長方形についての詳細はマニュアル「Tetragon」）

図4にある黒色の鉛筆のマークを押下すると、実際にテキストボックスで指定された値で角丸長方形が描画されます。

「End」ボタンを選択して描画状態を終了させます（図5）。

　次にログインボタンの色を銀色のグラデーションにします。
図6のボタンを押下し「塗り」のカラーパネルを開きます。図7のように「銀色」を選択し、ログインボタンの塗りの色を一旦銀色にします。
（色についての詳細はマニュアル[Color]）

ログインボタンの塗りにグラデーション(Gradation)を設定します。
設定は「RGB」パレットか「HSB」パレットで行います。現状は「Basic16」パレットであるので、図8の「RGB」を選択して「RGB」パレットを展開します。

RGBパレットが開けたら図9の「Gradation」ボタンを選択して、グラデーションについての設定項目がある「グラデーション」パレットを開きます。

「Gradation」ボタンの下にある「OFF」ボタンを押下すると「ON」に設定が変わり、ログインボタンの塗りにグラデーションがつけられます(図10)。

今度は、グラデーションがかかっている方向を横から縦に変えます。
図11の[Angle]欄に4.5と入力し図11の「Enter」ボタンを押下します。こうする事で、グラデーションが上からかけられます(図12)。

さらにグラデーション全体を薄くする為に、「Alpha」値を通常の1から0.5程度に下げます。
図13の[Alpha]欄に0.5と入力し、先程と同様の「Enter」ボタンを押下します。

ログインボタンの線の色も銀色に変更し、又「Alpha」値を0.2程度にして薄くします。
図15の「Paint」ボタンを押下すると「Line」に設定が変化し、線の色について設定できるようになります。

グラデーションが「OFF」になっていいる事を確認し、「Alpha」値を0.2に設定し「Enter」ボタンを押下します(図16)。

「Basic16」パレットに再び戻して銀色を選択し、ログインボタンの線の色を銀色にします(図17)。

「×」ボタンでカラーパレッドを閉じます(図18)。

　次に、ログインボタンの「Login」の文字部分をつくります。
図19の「Text」ボタンを選択します（テキストについての詳細はマニュアル[Text]）。
「Login」の文字で一つの図形にする為、図20のボタンを2回押下し「Continuous」の表示にします。

「Login」と入力し、そのまま文字を、図21のようにホワイトボード（白い所）までドラッグして移動します。

これで「Login」の文字がベクター図形に変換されました。
このLoginの図形の色ですが、ボタン本体より同系統で、少し濃い灰色を塗りの色にし、線の色は無しにしたいと思います。
Loginの図形を選択してカラーパレットを開きます。

ボタン本体の大きさとバランスを合わせるため、Loginの図形を縮小します。
図24の「H」欄に25と入力し、「Set」ボタンを押下します。（尚サイズ変更についての詳細はマニュアル[Status] ）

適度なサイズに縮小したら、文字部分をログインボタン本体の上に重ねます。
文字部分を選択してドラッグや方向キーでも移動できますが、ここではより正確にする為に、「整列」の操作を行います。
図25の「Arrange」ボタンを押下します。（詳しくはマニュアル[Arrange]）

整列させる対象となる図形は、ログインボタン本体とテキスト文字なので図26の「Surround」ボタンを押下し、この2つの図形をドラッグして囲むことで選択します。

次に整列させる場所を選択します。ここではログインボタン本体の場所に整列させるようにする為、
図27の「Key」ボタンを押下した後にログインボタン本体を選択します。こうする事でログインボタン本体に対して整列が実行されます。

図28の[BasicPoint]が「Center」になっている事を確認して、「XY」ボタンを押下して整列を実行します。
（整列の基準点である[BasicPoint]が「Center」になっていると図形の中心点に対して整列が実行されます。基準点について詳しくはマニュアル[Transform]）

整列出来たら、ログインボタン本体とテキスト文字の図形を、一つにまとめて取扱う為グループ化を実行します。
図29の「group」ボタンを押下します（グループ化について詳細はマニュアル[Group]）。

図30の「Surround」ボタンを押下して2つの図形を囲みます。これによりグループ化の対象図形が選択されます。

「Group ON」ボタンを押してグループ化を実行します(図31)。

ログインボタン本体が少し大きいので、もう一回り程度縮小します。
図形は、既にグループ化されているのでまとめて縮小されます。図32ようにログインボタンを選択します（まとめて選択された状態になります）。

[H]の欄に25と入力して、「Set」ボタンを押下すると図形のサイズが変更されます(図33)。

　これで図形は完成しましたので、pngに書き出して保存します。（保存について詳細はマニュアル[Save]）
「Save」ボタンを押下してセーブパネルを展開します(図34)。

ログインボタンのみ書き出すので、図35の「All」ボタンを押下して保存単位の表示を「Unit」に変更します。

「Surround」ボタンを押下して、保存対象のログインボタン囲んで選択します（図36）。

余白を少しつくりますので、[Margin]欄に2と入力します（図37）。

最後に「Save」ボタンを押下して保存を実行します（図38）。