TOP

            デザイる2|Webサイト製作初心者に向けて情報発信していきます。

ウェブアート・デザイナーで仕切り線を作る

ウェブアート・デザイナーで仕切り線を作る

ウェブアート・デザイナーで仕切り線を作る

ウェブアート・デザイナーの第6弾であります。センスの良いかっこいいサイトでは、フッターやサイドメニューなどで見かける仕切り線。上の画像では縦に凹んだ感じで影がある2本の線がそうです。かっこいいサイトではないが、このサイトでもどこかに一つ仕切り線があります。

下準備がありますのでこちらを参照して下さい。


ウェブアート・デザイナーで仕切り線を作ってみよう

1.操作ツールバーの「四角形(塗り潰しのみ)」をクリックし、斜めにドラッグします

1.操作ツールバーの「四角形(塗り潰しのみ)」をクリックし、斜めにドラッグします。


2.オブジェクトをダブルクリックすると「図形の編集」ウィンドウが開きますので、「塗り潰しの色」タブからグラデーションをクリックし、上から濃い色→薄い色へのグラデーションを選択。「図形の編集」ウィンドウを閉じます。

2.オブジェクトをダブルクリックすると「図形の編集」ウィンドウが開きますので、「塗り潰しの色」タブからグラデーションをクリックし、上から濃い色→薄い色へのグラデーションを選択。「図形の編集」ウィンドウを閉じます。


3.操作ツールバーの「スポイト(画面上の色を取得)」をクリックし、上部の色を採取します。

3.操作ツールバーの「スポイト(画面上の色を取得)」をクリックし、上部の色を採取します。


4.操作ツールバーの「直線」をクリックし、直線を描きます。長さは、先ほどのグラデーション画像の縦より短くしてください。

4.操作ツールバーの「直線」をクリックし、直線を描きます。長さは、先ほどのグラデーション画像の縦より短くしてください。


5.描いた「青い線」は選択しずらいので、右にあるオブジェクトスタックを利用します。クリックで選択、ダブルクリックで「図形の編集」ウィンドウが開きます。ここでは、ダブルクリックしてください。

5.描いた「青い線」は細く選択しずらいので、右にあるオブジェクトスタックを利用します。クリックで選択、ダブルクリックで「図形の編集」ウィンドウが開きます。ここでは、ダブルクリックしてください。


6.「図形の編集」ウィンドウの「情報」タブから「縦横比保持」のチェックははずし、「幅」を1(1px)にします。

6.「図形の編集」ウィンドウの「情報」タブから「縦横比保持」のチェックははずし、「幅」を1(1px)にして下さい。「図形の編集」ウィンドウを閉じます。


7.グラデーション画像の下部の色を採取し、手順3~6でもう一つの「線」を描きます。これで「線」が二つになりました。

7.グラデーション画像の下部の色を採取し、手順3~6でもう一つの「線」を描きます。これで「線」が二つになりました。


8.操作ツールバーの「オブジェクト選択」をクリックし、赤矢印のように二本の線をまたぐようにドラッグする。

8.操作ツールバーの「オブジェクト選択」をクリックし、赤矢印のように二本の線をまたぐようにドラッグする。二本の線が選択されます。


クリックで拡大
9.選択されたオブジェクトの上で右クリック。「整列」から「中央揃え」を選択します。

9.選択されたオブジェクトの上で右クリック。「整列」から「中央揃え」を選択します。


「拡大/縮小」アイコンをクリックし4倍を選択します

「拡大/縮小」アイコンをクリックし4倍を選択します。


「中央揃え」で重なり合った二本の線。その状態でダブルクリックし「図形の編集」ウィンドウが開きますので「情報」タブのX座標の ▼ を1回クリックします。すると二本の線が、隙間無く綺麗に並びます。

10.*オブジェクトは4倍に拡大しております!
「中央揃え」で重なり合った二本の線。その状態でダブルクリックし「図形の編集」ウィンドウが開きますので「情報」タブのX座標の ▼ を1回クリックします。すると二本の線が、隙間無く綺麗に並びます。

グラデーション画像の下部から採取した「水色の線」が1px左に移動したことになります。説明下手でごめんなさい(;´Д`)


「二つの線」が選択された状態でオブジェクトの上で右クリックします。「グループ」から「グループ化」を選択。

11.*オブジェクトは4倍に拡大しております!
「二つの線」が選択された状態でオブジェクトの上で右クリックします。「グループ」から「グループ化」を選択。


12.グラデーション画像と線を重ね合わせて、位置調整してグループ化します!

12.グラデーション画像と線を重ね合わせて、位置調整してグループ化します!そして保存。


13.完成!

13.完成!背景が単色の場合は、背景色を元に配色ツールkulerなどで少し暗めの色と明るめの色を採取し線を作るとかっこいい!!


あとがき

ウェブアート・デザイナーじゃなくても、他の画像編集ソフトでも作れますね!
フォトショップやイラストレーターなど使いこなせるようになりたい・・・。

関連記事

  • ウェブアート・デザイナーで仕切り線を作る


最新記事

a:3168 t:5 y:3







■この記事に足りないと思ったことがあったらぜひ教えてください。

powered by HAIK 7.3.0
based on PukiWiki 1.4.7 License is GPL. HAIK

最新の更新 RSS  Valid XHTML 1.0 Transitional