デザインの学校 ウェブデザイン応用編 第2回

こんにちは、くろねこです
今回もスタイルシートを使ったり、バナーを作ったりと、
あっというまの5時間でした~。
■メインビジュアルの制作
写真を矩形をなじませる、レイヤーマスクを教わりましたね。これもよく使います
画像編集の際にはとても重要になってきますので、確実に使い方を覚えましょう!
そして、社名や店名などの文字を入力する場合に気をつけたいのが。
普通に入力したままではなく、トラッキングカーニングを使って、
きちんと文字同士の字間を揃えましょう。
これをやるかやらないかで、デザインの上手さが決まる!?なんてことも・・・。

↓↓こちらを制作しました。↓↓


■スタイルシートの使い方
文字に色を付けたり、背景色を付けたり・・・。簡単にデザインを施せるスタイルシート。
その有効的な使い方をいくつか教わりました!
タイトル文字をスタイルシートでかっこよく見せるために。
<div>タグで囲んだタイトル文字、<div class="txt-title-3">タイトルタイトルタイトル</div>
というソースコードに、下記のようなスタイルシートを適用させます。
}
.txt-title-3 {
font-size: 14pt;
font-weight: bold;
color: #333333;
letter-spacing: 2px;
padding-left: 15px;
border-left-width: 7px;
border-left-style: solid;
border-left-color: #333333;
padding-top: 5px;
padding-bottom: 5px;
background-image: url(lesson-4-bg.gif);
}

スタイルシートで文字色や背景画像をつけたり、アイキャッチの部分を
ボーダーで設定したり。
すると、こんなにデザインされて見えるんです~。素晴らしい

で、この時、Fire worksで作った背景画像を書き出す際のポイントが。
対角線などの模様がついた画像の書き出しは、模様が上手くつながるように考え、
最小単位で書き出しましょう。
今回は5pxのサイズで書き出しに成功しましたね。
スタイルシートを上手に使えるようになれば、デザインの幅が広がること確実。
いろいろ使って早く慣れていきたいですね。
■バナー制作
先生の作業手順を見たあとで、各自バナーを作ってみました。
バナーひとつ作るのにも、細かい技が盛り込まれていましたね。

↓↓このシンプルなバナーに、手を加えていきました。↓↓


1.文字に対してドロップシャドウを付けます。
 この時、ドロップシャドウのぼけあしに注意しましょう。
2.矩形を作り、ベベルを使ってバナーの立体感を出します。
3.ペンツールとラインツールを使って、矢印を作ります。
 矢印にはグローを付け、幅1、柔らかさ0に設定します。
 こうすることで矢印の周りが縁取られたように見えるんですよ~。
4.最後は背景画像をぼけた写真へと加工します。
 まず、画像をコピーします。コピーした画像に対し、フィルタのぼかしから
 ガウスを2pxかけます。
 そして、授業の最初にも出てきたレイヤーマスク。
 これで、画像の手前のマウスのところを消すと・・・
 後ろのキーボードだけがぼけている画像になりました!

↓↓これが完成です↓↓


いろいろな技を組み合わせて使うことで、すてきなバナーが完成しましたね。
またレイヤーマスクの奥深さを感じ、勉強になりました~!
ちょっとハイペースで授業が進みましたが、皆さん、上手に出来ましたか?

 

WEB(ホームページ)デザイン中級者向き 山梨県デザインスクール ウェブデザインスタジオ山梨

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

*

PAGE TOP