>前回の続き
前回はカンバスのサイズを設定して背景をグラデーションで塗る所まで実行しました。
次にタイトル文字をテキストツールを使って設定します。
![$tmk56のAndroidアプリ開発-トップ画面作成2](https://stat.ameba.jp/user_images/20120906/20/smartapp/3c/c5/j/t02200176_0800064012175089988.jpg?caw=800)
左メニューからテキストツールを選択し、フォント指定と文字サイズを変更しました。
また文字間隔が空いていると間延びした感じになっていたので、カーニングの設定を変更して、
文字間隔を詰めています。テキストツールに関してはExcelやWordと同じような感覚で使えます。
次は数独をイメージした3×3のマス目を入れてみました。
長方形ツールを使って1マスずつ並べて下図のような感じになりました。
![$tmk56のAndroidアプリ開発-トップ画面作成3](https://stat.ameba.jp/user_images/20120906/21/smartapp/d7/40/j/t02200176_0800064012175098687.jpg?caw=800)
さらに、テキストツールを使ってマス目の中に数字と?マークをデザインします。
やり方は先ほどのタイトルの描画と同じ要領です。
![$tmk56のAndroidアプリ開発-トップ画面作成4](https://stat.ameba.jp/user_images/20120906/21/smartapp/62/80/j/t02200176_0800064012175108016.jpg?caw=800)
少し物足りないので、さらに右下に3×3のマス目を入れてみます。
今度は一回り小さいマス目にして、角度を15度傾けることでデザインに変化をつけています。
![$tmk56のAndroidアプリ開発-トップ画面作成5](https://stat.ameba.jp/user_images/20120906/21/smartapp/7a/8c/j/t02200176_0800064012175117339.jpg?caw=800)
なお図形の角度を回転させるには、図形を右クリックして変形⇒数値入力変形⇒回転を選択して
自分のつけたい角度を入力します。
![$tmk56のAndroidアプリ開発-トップ画面作成5_1](https://stat.ameba.jp/user_images/20120906/21/smartapp/5f/a8/j/t02200273_0670083012175137385.jpg?caw=800)
![$tmk56のAndroidアプリ開発-トップ画面作成5_2](https://stat.ameba.jp/user_images/20120906/21/smartapp/a9/5f/j/t02200232_0590062312175137386.jpg?caw=800)
最後に仕上げとして、1~9までの数値をランダムに配置して、数独には欠かせない
タイマー表示についてもデザインとして組み込みます。
いろいろデザインを考慮しつつ、最終的に出来上がったのが下のイメージ画像になります。
![$tmk56のAndroidアプリ開発-トップ画面作成6](https://stat.ameba.jp/user_images/20120906/21/smartapp/41/65/j/t02200176_0800064012175129859.jpg?caw=800)
実際に起動した時にどういう感じで見えるのかを確かめるために、画像を読み込むように
ソースを改修して、シミュレータ上で起動してみました。
![$tmk56のAndroidアプリ開発-トップ画面作成7](https://stat.ameba.jp/user_images/20120906/21/smartapp/19/2f/j/t02200202_0800073612175155111.jpg?caw=800)
最初は色々と悩みながら試行錯誤を繰り返しましたが、出来上がりは中々の見栄えになった
のではないかと思います。
ここまで来たらボタンのデザインも変更したいですが。^^;
画像の追加、ボタン配置の手順についてはまた次回に書こうと思います。
Fireworks CS6 スーパーリファレンス for Windows&Macintosh/ソーテック社
![](https://img-proxy.blog-video.jp/images?url=http%3A%2F%2Fecx.images-amazon.com%2Fimages%2FI%2F513d1XyjZqL._SL160_.jpg)
¥2,604
Amazon.co.jp
Adobe Fireworks CS6 Windows版/アドビシステムズ
![](https://img-proxy.blog-video.jp/images?url=http%3A%2F%2Fecx.images-amazon.com%2Fimages%2FI%2F61vH1HcfY4L._SL160_.jpg)
¥39,900
Amazon.co.jp