ウェブアート・デザイナーで仕切り線を作る
ウェブアート・デザイナーで仕切り線を作る
Tag: 仕切り線
ウェブアート・デザイナーの第6弾であります。センスの良いかっこいいサイトでは、フッターやサイドメニューなどで見かける仕切り線。上の画像では縦に凹んだ感じで影がある2本の線がそうです。かっこいいサイトではないが、このサイトでもどこかに一つ仕切り線があります。
下準備がありますのでこちらを参照して下さい。
ウェブアート・デザイナーで仕切り線を作ってみよう
1.操作ツールバーの「四角形（塗り潰しのみ）」をクリックし、斜めにドラッグします。
2.オブジェクトをダブルクリックすると「図形の編集」ウィンドウが開きますので、「塗り潰しの色」タブからグラデーションをクリックし、上から濃い色→薄い色へのグラデーションを選択。「図形の編集」ウィンドウを閉じます。
3.操作ツールバーの「スポイト（画面上の色を取得）」をクリックし、上部の色を採取します。
4.操作ツールバーの「直線」をクリックし、直線を描きます。長さは、先ほどのグラデーション画像の縦より短くしてください。
5.描いた「青い線」は細く選択しずらいので、右にあるオブジェクトスタックを利用します。クリックで選択、ダブルクリックで「図形の編集」ウィンドウが開きます。ここでは、ダブルクリックしてください。
6.「図形の編集」ウィンドウの「情報」タブから「縦横比保持」のチェックははずし、「幅」を1（1px）にして下さい。「図形の編集」ウィンドウを閉じます。
7.グラデーション画像の下部の色を採取し、手順3～6でもう一つの「線」を描きます。これで「線」が二つになりました。
8.操作ツールバーの「オブジェクト選択」をクリックし、赤矢印のように二本の線をまたぐようにドラッグする。二本の線が選択されます。
クリックで拡大
9.選択されたオブジェクトの上で右クリック。「整列」から「中央揃え」を選択します。
「拡大/縮小」アイコンをクリックし4倍を選択します。
10.＊オブジェクトは4倍に拡大しております！
「中央揃え」で重なり合った二本の線。その状態でダブルクリックし「図形の編集」ウィンドウが開きますので「情報」タブのX座標の ▼ を1回クリックします。すると二本の線が、隙間無く綺麗に並びます。
グラデーション画像の下部から採取した「水色の線」が1px左に移動したことになります。説明下手でごめんなさい(；´Д｀)
11.＊オブジェクトは4倍に拡大しております！
「二つの線」が選択された状態でオブジェクトの上で右クリックします。「グループ」から「グループ化」を選択。
12.グラデーション画像と線を重ね合わせて、位置調整してグループ化します！そして保存。
13.完成！背景が単色の場合は、背景色を元に配色ツールkulerなどで少し暗めの色と明るめの色を採取し線を作るとかっこいい！！
あとがき
ウェブアート・デザイナーじゃなくても、他の画像編集ソフトでも作れますね！
フォトショップやイラストレーターなど使いこなせるようになりたい・・・。
関連記事
- ウェブアート・デザイナーで仕切り線を作る
最新記事
- 高品質過ぎる写真素材を無料配布しています！フォトマルシェ
- なんてことだ、フリー素材アイドル誕生！！
- GIFアニメをいろいろと加工しちゃう Ezgif.com
- YouTubeからGIFアニメを生成する GIF YouTube
- 和の伝統色に癒やされてみる NIPPON COLORS
- 俺だけのセーラー戦士を「セーラー戦士メーカー」で作るお
a:3194 t:2 y:2
■この記事に足りないと思ったことがあったらぜひ教えてください。
