ホームページビルダー20 ウェブアートデザイナーの使い方 略地図を作成

ホームページビルダー20教室のサイトの掲載している略図が古い(周辺のお店が変わっているなど・・・)ということで、作成しなおしました。

元々使っていた略図は、横浜パソコン教室開校の際に業者から納品されたものでした。

今回は、ウェブアートデザイナーを使っての作図です。

ウェブアートデザイナー

元の略図を読みこんで、その上に新しいものを書きこんでいきます。

ホームページビルダー教室略図 

もうすぐ完成です。

完成したものは、ホームページビルダー.net でご覧になれます。

ウェブアートデザイナーはむかしからある道具ですが、ホームページビルダー20SPでも使われている老舗です。

バナー画像作成 ウェブアートデザイナーの使い方@ホームページビルダー教室

ホームページビルダー.netのバナーはウェブアートデザイナーで作成しています。キャンバス(mif形式)で保存しておけば、再利用が可能です。

ホームページ作成無料相談 hpb19seminar ウェブアートデザイナー  

最新のホームページビルダー19 SPでも、ウェブアートデザイナーは健在です。 ホームページビルダー,netのようなワードプレス・サイトにバナー画像を設置するには、画像ウィジットを利用しています。

ウェブアートデザイナー使い方注意点@ホームページビルダーSPテンプレート

(ホームページビルダー教室で、ホームページビルダーSPを生徒さんが実際に使用中に気が付いたことです・・・) ウェブアートデザイナーに、デジカメ写真を挿入すると、画面よいかなりの大きさ(解像度)となります。解像度を下げるため、ダブルクリックして、情報タブで、サイズ(幅・高さ)を調整することができます。サイズの数値を入力するさいに、上下矢印をクリックする(しなわちピクセル数を1ずつ変更)たびに、画像サイズの変換処理が始まります。 例えば、サイズを小さくしようと、下向きの矢印を、数回クリックすると、クリックする度に縮小計算がはじまり、とても時間がかかります。 ウェブアートデザイナー ウェブアートデザイナーウェブアートデザイナーウェブアートデザイナー 目当てのサイズ(数値)を直接キーボードから入力するといいと思います。  

ロゴ画像の幅 ホームページビルダー19 SPの使い方

ホームページビルダー19 SP ロゴ画像の幅は変更できるのか調査中です。

ウェブアートデザイナーでキャンバスの幅を広げてみます。

ウェブアートデザイナー

ホームページビルダーへ戻ります。

ホームページビルダー19 SP

 

ロゴの幅は広がりません。サイト情報パーツのプロパティでは、この部分の幅を変更する方法が見つかっていません。

(ホームページビルダー19クラシック ワードプレス・テンプレートならスタイルシートの改造で対応できます。)

ホームページビルダー ウェブアートデザイナーの使い方 余白を取り除く

ホームページビルダー教室の生徒さんがファビコンの画像をウェブアートデザイナーを使って作成しました。

32×32の画像を作りたいのですが、図形をその大きさにして、背景を透明化して画像(GIF)に保存すると、サイズが一回り小さくなってしまいます。どうやら透明部分が取り去れているようです。

ウェブアートデザイナーのオプションを変更します。

ウェブアートデザイナーの使い方

ホームページビルダー ウェブアートデザイナーの使い方 デジカメ写真使用時の注意点

ホームページビルダー19 クラシックでもSPでも ウェブアートデザイナーを使く機会は多いかと思います。

ご自分でデジカメで撮影した写真をウェブアートデザイナーで使う際には、解像度(幅・高さ 単位 ピクセル)に注意しましょう。

標準的なホームページの幅は900~1000ピクセルです。

一方、最近のデジカメの写真の解像度はゆうに幅 3000 高さ 2000ピクセルを超えています。

ウェブアートデザイナーのキャンバス(作業領域)の大きさは 幅 640 高さ 480 ピクセルです。

ウェブアートデザイナーの使い方

標準のキャンバスにデジカメ写真を挿入すると

ウェブアートデザイナーの使い方

リサイズハンドルが表示されないくらいウェブアートデザイナーに対して、デジカメ写真は大きくはみでてしまいます。リサイズハンドルがないので、ドラッグでサイズ変更は、ダブルクリックして、情報パネルから行います。

ウェブアートデザイナーウェブアートデザイナー

幅を600ピクセルに変更するとウェブアートデザイナーの画面におさまります。

ウェブアートデザイナー

 

ホームページビルダー19 ウェブアートデザイナー 図形の使い方

ホームページビルダー19 SPでも標準の画像編集ツールとなっているウェブアートデザイナー

図形の使い方のヒントです。図形の種類を選ぶことができます。

  • 楕円形・円
  • 四角形
  • 各丸四角形
  • 多角形

また塗りつぶし方法を選ぶことができます。

  • 枠と塗り潰し
  • 枠のみ
  • 塗り潰しのみ

ホームページビルダー ウェブアートデザイナー

 

基本設計、GUIはバージョン6くらいから何も変わっていないようです。

ホームページビルダー クラシック ウェブアートデザイナー 図形の回転の使い方

ウェブアートデザイナーの使い方 ヒント 図形を回転してみましょう

ホームページビルダー ウェブアートデザイナー

図形(上の例では四角形)には、サイズ変更のため四隅と枠線の真ん中にハンドル(小さな四角形)が表示されます。

そのうち、右上のハンドルをドラッグすると任意の角度に図形を回転することができます。

ホームページビルダー ウェブアートデザイナー

 

 

 

ホームページビルダー(クラシック・SP) ウェブアートデザイナーの使い方 写真リサイズ注意点

写真(画像)をリサイズ(拡大・縮小)する際に元の写真の縦横比(アスペクト)は維持することをオススメします。写真の場合はとくに目立ちます。

下の例では、元の写真、縦横比を保持しての拡大、縦方向に拡大、横方向に拡大したものを並べてあります。

ウェブアートデザイナーで縦横比を保持してリサイズするには

  • 角のリサイズハンドルを使う
  • Shiftを押しながらリサイズハンドルをドラッグする

ことがポイントです。

ホームページビルダー ウェブアートデザイナーの使い方

ホームページビルダー ウェブアートデザイナーの使い方 ロゴ 縦書き

ホームページビルダーに昔から標準搭載されているウェブアートデザイナー使い方のヒントです。

文字の方向 縦書きのオン・オフ

@マークではじまるフォントは縦書き用のフォントです。

それを組み合わせみました。

ウェブアートデザイナー

上から順番に

横書き(縦書きオフ)+@フォント(縦書きフォント)

縦書きオン+@フォント

横書き+フォント(普通のフォント)

縦書きオン+普通のフォント

ご参考までに・・・