ウェブアートデザイナーを利用して画像の切り抜きをする

ダウンロードした画像ファイルの中からmain.gifを読み込んでください。

設計図

上図のように切り抜いていきます。

• 黄色部分はタイトルバーになります。
• ピンク色部分はリンク等するところになります。
• 青色部分は、(出来上がりページの)左横部分がリボンのように見せるためのパーツを切り抜きます。
• 全体の幅が、きっちりと６３０ピクセルになるように計算して切り抜きます。
• 右横にある「１」「２」「３」の数字は、３つのテーブルを利用するということです。

環境設定

正確に切抜きを行うため、グリットを利用します。
今回は5ピクセル毎のグリッドを用意します。
ファイル→環境設定　で環境設定画面が表示されます。

右図のように環境設定を行ってください。
「グリッド項目」　幅、高さ５ピクセル
「グリッドを表示する」チェック
「グリッドに合わせる」チェック

早速切り抜いてみましょう

設計図の黄色の部分を切り抜きます。
サイズは６３０×５５ピクセル、ファイル名は「a,gif」と名前を付けて保存してください。

• はさみマークのボタンが切り抜きボタンです。「四角形で切り抜き」に設定します。
• はさみマークのボタンをクリックすると、「輪郭」等が選択できるボタンが現れます。「輪郭」はゼロに設定し、その上にあるボタンは、「キャンバスを含む」を選択します。(左図を参考にして下さい)
• 左図はa.gifを切り抜いている途中の画面です。右下に切り抜こうとしている画像サイズが表示されるので、確認し「切り抜きボタン」をクリックしてください。

他の画像も切り抜いていきましょう。

設計図を参考に、その他の画像を切り抜いていきましょう。
全部で９個のファイルになります。
画像サイズ、ファイル名を間違えないように気をつけて下さい。

▲次は、切り抜いたパーツの役割と他色画像の作成