Sampleとしてショッピングカート(shopping cart)をつくります。
デザインソフトを起動する為Playボタンを押下します。（デザインソフトの起動についての詳細は[Start]より。）
Playボタン↓
続けて「New」→「Set」ボタンを押下し、描画画面を表示させます。
ショッピングカートのアイコンは、様々なデザインが見受けられますが、ここでは最もシンプルで簡単につくれるデザインにします。
このデザインは、直線と円の単純な図形をパーツとして組み合わせる事により、ショッピングカートをつくります。
それでは直線から描画していきます。
図1の直線を選択します。(描画について詳しくはマニュアル→ [Draw])
今回、直線の描画では、直線の「線の色」は黒色にして、「塗り」は無しにして行います。
図2のように[Paint]パネルを開いて、「ON」ボタンを押下して「OFF」の表示に変えます。
（「OFF」にする事で塗りつぶしを無しに出来ます。尚、色についての詳細はマニュアル[Color]）
直線の描画はクリックで実行しますので、図3の描画方法の「Click」ボタンを押下します。
描画方法を選択すると青色の鉛筆マークが表示されます。これが描画可能の状態であるマークになります。
直線は、図4にあるボタンを押下して茶色にする事で、「水平・垂直」に描画する事が出来るようになります。
（ボタンは押下する毎に[ON]・[OFF]が切り替わり、[ON]の場合は茶色に変化しています。[OFF]に戻すと水平・垂直では無い、通常の直線の
描画状態に戻ります。 尚、「水平・垂直」に関してはマニュアル「Draw」、直線の描画についての詳細はマニュアル「Straight」）
実際にクリックして描画を開始します。
描画は、クリックされた点と点を連結していく形で行われます。
最初の線は、図5のように2クリックで水平線として描きます。
次の線は、斜線なので「水平・垂直」機能を[OFF]にしてからクリックします。
直線は、最初の線以外は1クリック毎に連結されていきます（図6）。
3番目の線は再び水平線にするので、「水平・垂直」ボタンを[ON]にして図7のように描画します。
4番目の線は斜線です。「水平・垂直」ボタンを[OFF]にして図8のように描画します。
最後の線は、ショッピングカートの取っ手にあたる所です。これは、水平にひきます（図9）。
「End」ボタンを押下して、直線の描画状態を終了させます。(図10)。
今描画した線を少し太くします。
図11の「Line」ボタンを押下してLineパネルを開きます。
図12の[Thickness]欄に3と入力し「Thickness」ボタンを押下します。
（尚、線の太さについての詳細はマニュアル[Line]）。
描画した図形は、「編集」する事で形を修正することが出来ます。
1回の描画処理のみでは、思いどうりに形が定まらない事がありますので、編集作業を通じて自分のイメージに近づけていきます。
図13の「Segment」ボタンを押下する事で、編集点（赤丸）が表示されます(図13)。
この編集点を移動させる事で、図形が変形されていきます。（尚、編集についての詳細はマニュアル[Edit]）
但し今回のように、水平や垂直に描画されている部分を編集する場合は、2つ以上の編集点を同時に選択して修正します。
編集点の同時選択を実行するには「Multi」ボタンを押下してマルチプレートを開きます(図14)。
マルチプレートを展開したら、図15の「Multi」ボタンを押下して選択表示を[Single]から[Multi]に変えます(図15)。
（[Multi]の表示の場合は、複数選択が可能で[Single]の場合は、単数選択のみになります。）
図16の「Surround」ボタンを押下して、修正したい編集点を選択します。
選択されると図16のように、赤丸の中が青色に塗りつぶされます。（図16では編集点が2箇所選択されています。この状態であれば、
修正しても水平が保たれます。）
選択したら方向キーを利用して移動させていく事で、1pixel単位の修正が実行できます(図17)。
図18のように1ヶ所を修正の対象としたい場合は、「Multi」ボタンを押下して選択表示を[Single]にしてから修正します。
「End」ボタンで編集状態を終了します。
次に、ショッピングカートの車輪にあたる部分に該当する「円の図形」を描画します。
図20の「Circle」ボタンを押下し、描画方法は「Drag」を選択します。
図21のように描画したら「End」ボタンで描画状態を終了させます。
車輪の部分が少々大きく感じられますので、サイズを縮小します。
図22のように車輪が選択されている事を確認します。（図形を描画した直後の場合は、その図形が選択されれいる状態になっています。
尚サイズ変更についての詳細はマニュアル[Status]）
図23の「H」欄に20と入力し、「Set」ボタンを押下します。
車輪をもう少し上のほうに移動しますので、車輪をクリックなどで選択します。
選択できたら方向キーで移動します(図25)。
「End」ボタンで一旦位置を確定します(図26)。
これで一つ目の車輪ができました。
2つ目の車輪は、一つ目の車輪をコピーする事で作成したいと思います。
図27の「Copy」ボタンを押下してコピーパネルを開きます。
（コピーについての詳細はマニュアル[Copy]）
図28の「Surround」ボタンを押下して、コピー対象となる図形を囲んで選択します。
右側の少し離れた位置にコピーします。
【Direction】欄にある、[X Space]のテキストボックスに80と入力します。
この様にすることで、コピーする場所を、一つ目の車輪より右側へ80pixelの位置に指定できます。
図30の「Copy」ボタンを押下して、コピーを実行します。
これで２つ目の車輪も作成されました。
この２つ目の車輪を、もう少し右側に離します。方向キーの[ → ]により、上下の位置を変えずに、横の位置のみ右側に移動出来ます。(図31,図32)
今度は、ショッピングカート(shopping cart)の矢印にあたる部分を作成したいと思います。
この矢印は、垂線と三角形を組み合わせる事でつくります。
最初に垂線を描画しますので、「直線」ボタンを押下して「水平・垂直」も[ON]に切りかえます(図33)。
描画できる準備が整ったら、図34のように垂線を作成します。
垂線の線の太さですが、ショッピングカート本体より少々細くします。
図36のように[Thickness]欄に、「2」の設定をします。
続けて、矢印の先端部分である三角形（正三角形）を描画します。
図37の「EquilateralTriangle」と「Drag」を選択し、図38のように描きます。
描画された三角形は、垂線に対して、横の位置が少しづれているので「中央揃え」にします。
図39の「Arrange」ボタンを押下して整列パネルを展開します。（尚、整列については詳細[Arrange]）
図40の「Surround」ボタンを押下して、整列させる対象である垂線と三角形の図形を選択します。
次に、整列の基準となる図形を選択します。
「Key」ボタンを押下してから、三角形を選択します(図41)。
図42の[BasicPoint]が「Center」になっている事を確認して、「X」ボタンを押下して整列を実行します。
（[BasicPoint]は 整列の基準点を示します。今回は、「Center」で実行するので、三角形の中心点に対して整列が実行されます。基準点について詳しくはマニュアル[Transform]
この矢印の図形を移動して、ショッピングカート(shopping cart)の所まで移動します。
垂線と三角形は、同時に同量を移動させたいので、グループ化を行います。
図43の「group」ボタンを押下してグループパネルを展開します（グループ化について詳細はマニュアル[Group]）。
図44の「Surround」ボタンを押下して、グループ化の対象となる図形を囲んで選択します。
「Group ON」ボタンを押して、グループ化を実行します(図45)。
これでグループ化されたので、矢印として移動出来ます(図46)。
ショッピングカート(shopping cart)と比較すると、矢印が大きく見えますのでサイズを縮小します(図47)。
これで、ショッピングカート(shopping cart)の形が出来上がりました。
仕上げは、全体をグループ化し(図48)、それに対してサイズの縮小を行います(図49)。
完成したショッピングカート(shopping cart)を、pngに書き出して保存します。（保存について詳細はマニュアル[Save]）
「Save」ボタンを押下してセーブパネルを展開します(図50)。
ショッピングカート(shopping cart)のみ書き出すので、図51の「All」ボタンを押下して、保存単位の表示を「Unit」に変更します。
「Surround」ボタンを押下して、保存するショッピングカート(shopping cart)を囲んで選択します（図52）。
余白を少しつくりますので、[Margin]欄に1と入力します（図53）。
最後に「Save」ボタンを押下して保存を実行します（図54）。
