ホームページビルダー/ウェブアートデザイナー編
ウェブアートデザイナーの基本
- ウェブアートデザイナーの画面
- オブジェクトスタックを理解しよう
- 正方形や正確な円を描く
- グリッドを利用する
- グリッド線を変更する
- 小さくて見えにくい場合
- 重なり方を一番後ろに変更する
- 作成した画像をホームページで利用するときの保存
- いくつかの画像をまとめて一つの画像にする
- 作成の続きを後でやろうと思うときは、キャンバストの保存
- ページに画像を挿入したが背景色と馴染まない、画像周りのギザギザが気になる
- 画像を切り抜く
ウェブアートデザイナーの画面
オブジェクトスタックを理解しよう
キャンバスに画像を描くとオブジェクトスタックに表示されます。
上の図では、丸の画像が二つあります。これらは、それぞれ独立して編集することが可能です。
キャンバス上で、四角い枠に囲まれた画像は、オブジェクトスタックでは太い枠線で囲まれています。
これは、「今、この画像を編集できるよ」ということです。
また、重なり方に注意して見てみてください。
キャンバスの画像を見ると色の濃い丸が下にあります。オブジェクトスタックでも色の濃い丸が下にあります。
もし、色の濃い丸の重なりを上にしたい場合は、オブジェクトスタックの画像をドラッグし、上方に動かすと重なりを変更することが出来ます。
正方形や正確な円を描く
シフトを押しながら図形を描きます。
グリッドを利用する
表示→グリッドの表示
10ピクセル毎に線が表示されます。
正確に切抜きを行いたい場合は、表示→グリッドに合わせる を選択しておくと便利です。
グリッド線を変更する
ファイル→環境設定→「表示」タブ→グリッド
小さくて見えにくい場合
メニューバーより 表示→拡大表示→何倍か選択
元に戻すときは 表示→原寸表示
重なり方を一番後ろに変更する
オブジェクトスタック→作成画像を選択→右クリック→配置(重なり)→最背面に配置
作成した画像をホームページで利用するときの保存
保存する画像を右クリック→Web用保存ウィザード ウィザードが開始されます。
保存形式は、GIF JPEG PNG の中から選択できます。
ホームページで利用する画像は、上の3つの形式のいずれかにしましょう。
GIFやJPEG形式が一般的です。
※Web用保存すると一つの画像ファイルとなるため、文字位置の変更や色の変更等の編集はできなくなります。
もし、作成を途中でやめ、続きを後でしようと思うときはキャンバスの保存をしてください。
いくつかの画像をまとめて一つの画像にする
シフトを押しながら、まとめたい画像をクリックしていきます。(このとき、オブジェクトスタックでは選択対象の画像が太い線で囲まれています。)
画像を全部選択できたら、右クリック→グループ化
作成の続きを後でやろうと思うときは、キャンバスの保存
画像作成の続きを後でしようと思うときはこちらの保存をしてください。
ファイル→名前を付けてキャンバスを保存
ページに画像を挿入したが背景色と馴染まない、画像周りのギザギザが気になる
Web用保存ウィザードで画像を保存する際に「背景色」の部分を選択します。
詳しくはこちらをクリックしてください。
画像を切り抜く
- 「操作ツールバー」より操作を行います。
「操作ツールバー」が表示されていない場合は、メニューバーから[表示]→[操作ツールバー]の操作を行い、「操作ツールバー」を表示します。
- 操作ツールバーにあるハサミマークが切り抜きの範囲を決定するボタンです。
ハサミマークの横にある▼ボタンをクリックすると、四角や丸など、切り抜く形を変更することができます。
切り抜く形は四つの中から選べます。
一番上のマークは、四角に切り抜きます。
二番目のマークは、円形に切り抜きます。
三番目のマークは多角形に切り抜きます。
四番目のマークは自由な形に切り抜きます。
- 切り抜きたい形のついたハサミマークをクリックして、キャンバス上で切り抜く範囲をドラッグし指定します。
- 切り抜く範囲が決まったら、「操作ツールバー」の下の方にある[切り抜き]ボタンをクリックします。

←このボタンを選択した状態で切抜きすると、背景にあるキャンバスを含まずに切り抜きます。
←このボタンを選択した状態で切り抜きをすると、背景にあるキャンバスを一緒に切り抜きます。
[輪郭]の●マークの横にある三角ボタンをクリックすると、切り抜く際に「輪郭をぼかして切り抜く」というように指定することができます。ぼかす程度は、下に表示される輪郭のバーをスライドして決定します。