本文へスキップ

グラデーションのバナーを作る方法/ウェブアートデザイナー編集/ホームページビルダー21・22フルcssテンプレート編集

グラデーションのバナーを作る方法/ウェブアートデザイナー編集/ホームページビルダー21・22フルcssテンプレート編集

グラデーションのバナーを作る方法/ウェブアートデザイナー編集/ホームページビルダー21・22フルcssテンプレート編集

グラデーションのバナーを作る方法/ウェブアートデザイナー編集

  • ▼グラデーションのバナーを作る方法
     グラデーションのバナーを作る方法をマスターできればホームページ作成上こんなに良いことはないでしょう。
       タイトルからナビゲーションボタンの作成までホームページに彩を加えることが可能となります。





    ■私が使っているのは「ホームページビルダー22ビジネスプレミアム」です。
    ■ホームページビルダー22を起動します。
    ①サイトを開く前の最初の画面(エディターズ表示)で
    メニューからューから
    「ツール(T)」→「ウェブアートデザイナーの起動(D)」を選択します。

    グラデーションのバナーを作る方法/ウェブアートデザイナー編集



    ②「ツール(T)」→「ウェブアートデザイナーの起動(D)」を選択しました。

    グラデーションのバナーを作る方法/ウェブアートデザイナー編集



    ③ウェブアートデザイナーの最初の画面が表示されました。
     ▼作成するバナーサイズを調べメモに書き留めて置いてください。
      私は、「幅(W)サイズ238ピクセル×高さ(H)サイズ116ピクセル」のバナーを作ります。
    グラデーションのバナーを作る方法/ウェブアートデザイナー編集


    ④「編集(E)」→「キャンパスの設定(S)」と進みます。
     
    グラデーションのバナーを作る方法/ウェブアートデザイナー編集



    ⑤表示された「ダイアログボックス」に予定していた
     「幅(W)サイズ238ピクセル×高さ(H)サイズ116ピクセル」を書き込みました。
     「適用(A)]→「OK]を選択
    グラデーションのバナーを作る方法/ウェブアートデザイナー編集




    ⑥表示された編集画面に設定したサイズの「幅(W)サイズ238ピクセル×高さ(H)サイズ116ピクセル」キャンバスができました。
     
    グラデーションのバナーを作る方法/ウェブアートデザイナー編集




    ⑦更に、メニューから
     「オブジェクトの(O)]→「図形の製作(U)」→「四角形(R)」→「四角形(枠のみ)(O)」を選択
    グラデーションのバナーを作る方法/ウェブアートデザイナー編集



    ⑧「①のマーク」が出現します。
     「①)」から→「②の方向へ」マウスをドラッグします。
    グラデーションのバナーを作る方法/ウェブアートデザイナー編集



    ⑨下の画像のように枠線が表示されます。
     ▼枠線がオブジェクト作成の基台となります。
      基台を作らないと色も塗ることができません。
     ▼尚、オブジェクトは設定した範囲のサイズ(白枠238×116)のものができます。
     ▼ここで色を塗ると普通の色が着いたバナーができます。
    グラデーションのバナーを作る方法/ウェブアートデザイナー編集



    ⑩メニューから「ツール」→「グラデーション作成(G)」と進みます。
     
    グラデーションのバナーを作る方法/ウェブアートデザイナー編集



    ⑪メニューから「ツール」→「グラデーション作成(G)」と進みます。
     下の画像(ダイアルグボックス)が表示されます。
    ▼私のこの場合はピンクに色が着いています。説明を書く前に一回テストをしているからです。
    グラデーションのバナーを作る方法/ウェブアートデザイナー編集



    ⑫「ダイアログボックス」の設定説明をします。

     ・上部の左の①「色の設定」をクリックして色の薄い色を選択すると①の部分の色の設定となります。
     ・上部右の②の「色の設定」を枠をクリックして濃い色を選択すると下図②部の色の設定となります。
     ・左下の③「角度A」の矢印を動かすとグラデーションのかかる向き(方向)が矢印の向きになります。
     
    ▼私の場合はピンクに色が着いています。説明を書く前に一回テストをしているからです。
    グラデーションのバナーを作る方法/ウェブアートデザイナー編集



    ⑬下の「保存(S)」で設定を保存します。
     「ファイル名(N)」は、私は、「グラデーション」としました。
     「ファイルの種類(T)」は、「ウェブアートファイル(*.mif)」とします。
     「保存(S)」とします。
     【重要】設定画像上部の「保存する場所(I)」を書き留めておいてください。
    グラデーションのバナーを作る方法/ウェブアートデザイナー編集

     【重要】設定画像上部の「ファイルの位置」を書き留めておいてください。
       ・下の画像は使用中のパソコンの「ドキュメント」に保存となっています。
    グラデーションのバナーを作る方法/ウェブアートデザイナー編集



    ⑭ウェブアートデザインのノアイコン(グラデーション)を「保存場所(⑬参考)」からWクリックします。

    グラデーションのバナーを作る方法/ウェブアートデザイナー編集



    ⑮「ごめんなさい!」先に設定したサイズがが表示されていません。

    グラデーションのバナーを作る方法/ウェブアートデザイナー編集



    ⑯すみません。もう一度、メニューから「編集(E)」→「キャンパスの設定(S)」とします。
    サイズの「幅(W)サイズ238ピクセル×高さ(H)サイズ116ピクセル」と記入します。
    グラデーションのバナーを作る方法/ウェブアートデザイナー編集



    ⑰グラデーションができています。バナーとして使えそうです。

    グラデーションのバナーを作る方法/ウェブアートデザイナー編集



    ⑱バナーとして使えるように画像で残します。
     メニューから「ファイル(F)」→「名前を付けてキャンバスを保存(V)」とします。
    グラデーションのバナーを作る方法/ウェブアートデザイナー編集



    ⑲バナーとして使えるように画像で保存し残します。
     メニューから「ファイル(F)」→「名前を付けてキャンバスを保存(V)」とします。
     「保存」したらここで終了です。
    ・テンプレートがバナーを「PNG」を指定している場合は保存時に「PNG」を設定してください。
    グラデーションのバナーを作る方法/ウェブアートデザイナー編集



    ⑳メニューから「オブジェクトの(O)]→「図形の製作(U)」→「四角形(R)」→「四角形(塗り潰しのみ)(F)」を選択し(次の㉑へ進んでください。)
    グラデーションのバナーを作る方法/ウェブアートデザイナー編集



    ㉑「①の色選択」で色を設定し→「②の塗潰しのアイコン」でバナーをクリックすると色が群れます。
    グラデーションのバナーを作る方法/ウェブアートデザイナー編集



    ㉒青色のグラデーションの設定をしてみました。
    グラデーションのバナーを作る方法/ウェブアートデザイナー編集



    ▼大きなバナーを作りたいときは⑯でサイズを大きい数字を書き込むと大きなサイズのバナーが作れます
    ▼「A」を選択すると文字を書き入れることができます。
    グラデーションのバナーを作る方法/ウェブアートデザイナー編集













  • ▼質問やお問い合わせは、LINEでお願い致します。(無料)
    ▼LINE登録は、QRコードをタップして下さい。
    フリーダム/QRコード
    フリーダム/QRコード

ナビゲーション

バナースペース