受講生のバナーを直してみました（2）

↓

講師の真喜志です。

ミュゼプラチナムという、エステのバナーです。
どうしても黄色とブルーの組み合わせにこだわりたかったようなので、
その意向を酌んで修正してみました。

「￥980」のゴールドがキモです。

初めてのバナー制作

初めてのバナー制作


　最初に作ったバナーは素材が多かったのでなるべくたくさんの素材を使って作ろうとラフ案を書きましたが実際に仕上がったバナーは素材が多すぎて全然まとまりのない物になってしまいました、ので今度は二枚の写真に絞り作成しました上の写真がその時のですが左のクルマのナンバーが気になり違う写真に入れ替えたのが下バナーです。



　構想を崩さないよう作り直して大分自分なり近づけた内容になりました、それで気づいた事ですが、
バナーはシンプルさの中にいかに目に付く画面構成にする事だなと理解しました、まだまだ初心者ですが感性を磨いて行きます、この後の制作した物も公開していきますので宜しくお願いいたします。

受講生のバナーを直してみました（1）

↓

講師の真喜志です。

デンソーのバナーです。
レイアウトや発想はいいと思うのですが、いかんせん写真のクオリティと文字のバランス、見せ方が気になりました。

いかがでしょうか？

授業中に制作したバナー集

授業の一環として、C-TEAMと云うサイトで募集された案件のテーマに沿ってバナーを制作しました。今回はかなり実践的でしたが、今までの授業で習った技の集大成としてはなかなかの出来では無いでしょうか。
上から順に、古い物です。

















バナーを製作するに至って、Fireworksの便利さを実感致しました。また、バナーデザインは「インパクト」「レイアウト」「テーマ」「ストーリー性」「説得力」のどれもが大事と云う事がわかりました。

バナー作成で作ったもの

今週はバナーを作るという授業の一週間でした
作ったバナーをアップします

■「オンラインショップeyeco」のバナー



もっとコテコテの可愛さを出せばよかった
今見ると反省点が次々に出てきます。

■ミュゼ脱毛PRバナー





頭で思い描いているものがうまく表現できず悩みまくったバナー
下のバナーをc-teamに応募しました

■楽天スーパーカードローンのPRバナー





素材が少なく、(ロゴとカードのみ)テキストのバランスに苦労
上のバナーをc-teamに応募しました

■一週間を通して

細かいテクニックや見せ方、基本的なデザイン方法など実践しながら学べたので、密度の濃い一週間になりました。
頭で考えすぎて上手く手が動かなかったり。
普段あまり使わない頭を回転させたバナー作りでした。
細かい部分にも手を抜かず、且つクオリティの高いものを作れるようになるまでまだまだ時間がかかりそうです。

詩的な作品集です！

バナー広告などの外枠の枠線について

バナー広告を作成するとき、作成した画像の状態によっては
外枠に対し枠線（1ピクセル以上）をつける必要があります。

枠線をきちんと引いたつもりでも、書き出してみると枠線が画像の外側にあって、
書き出されたバナーに枠線がついてない状態で書き出されていることがあります。

そのようなことのない様、以下のように設定して枠線がきちんと表示されるよう対処します。



カンバスサイズに合わせて外枠に枠線を引いても線が表示されない。



ストロークの種類からストロークオプションを選択する。



ストロークオプション設定で、ストロークの種類を基本のエッジが硬い線（角）を選択、
相対パスストロークの位置から内側のストロークを選択、
さらに、塗りをストロークに重ねるにチェックを入れる。



設定から戻ると、カンバスサイズに合わせて枠線がきちんと表示されている。

なお、ストロークの種類を基本のエッジが硬い線（角）を選択することでシャキッとした線を引くことができますが、
オブジェクトにあわせたストロークをコマめに設定し、作品のクォリティーを高めたいものです。

自動シェイプの利用法

簡単に図形を作成する方法

Fireworksには、自動シェイプと云う便利なツールがあります。自分で作らずとも、最初からプリセットとして入っているシェイプで、スタイル同様に様々な種類があります。




今回は、試しに3Dボックスを使用してみましょう。

1.まず、自動シェイプのパネルの3Dボックスをクリックし、そのままカンバスへドラッグします。




2.すると、カンバスに立方体が現れます。しかしこのままではまだのっぺりとしていて今ひとつ立体感がありません。




3.そこでボックスを選択すると、中心にハンドルが現れます。




4.これを色んな方向にクリック＆ドラッグすると、3Dボックスが回り、立体感を出す事が出来ます。




5.塗りの色をお好きに変えて完成です。今回はプリセットの白黒のグラデーションを設定してみました。



普通のオブジェクトと同様に設定したのですが、面に合わせてグラデーションが自動で切り替わっていますので、手軽に立体的なボックスを作りたい場合はとても便利です。

画像・ファイル名の名前のつけ方

今日の授業ではスライスを切るという内容を学びました。
その時に気になったのがスライス名(=切り出した画像名)の名前の付け方。
ボタンとしてシンボル化したもののスライス名を
btn01,btn02,....
という風に名前をつけていったのですが、この名前のつけ方によって作業効率も変わってくるとのこと。

ということで、画像やファイルの名前のつけ方をまとめてみます

ヘッダー部分

logo
maintitle
title_main
head

ナビゲーションバーなど

btn
btn_○○　(○○部分にoverなどを入れたりする)
nav_bar

見出し

bg_h1
bg_h2
bg_03
title_〇〇(category,profile等)

コンテンツ内

pic_〇〇
photo_○○

リスト

bg_li
title_li

後ほど追記予定

参考:WEBサイトで使用するファイル名の付け方について相談です

Webデザイン用語一覧

講座で出てくる理解しているようでしていない専門用語を、
改めて調べてみました。
自分の中で理解できたものを、なるべくわかりやすいよう図解をつけています。

自分で調べて解釈した結果なので、間違えているところがあればご指摘ください。
これから先も、少しずつアップしていきます。



■テンプレート（ひな形）

文書やデザイン等をある程度整形されているひな形（素材）のこと。
テンプレートがあれば、書類の作成やWebサイトなどを容易に制作することができる。




















■グリッドデザイン

グリッドデザインとは、文字や画像、カラムなどの要素を格子上にレイアウトする手法のこと。グラフィックは直感的なアプローチであるのに対し、グリッドはきわめて論理的に情報を整理する。




















■トリミング

トリミングとは画像の加工方法の1つで、画像の一部だけを切り出す処理のこと。











■リサイズ

リサイズは、画像全体を拡大したり縮小したりすること。





















■ベベル

ベベルとは、もともと斜角という意味で「面取り」のこと。










































































































































■エンボス

エンボスとは、文字や図形、文様が浮きだしたように見せる効果のこと。




















■ オブジェクト

ドキュメントウィンドウ内のテキストや画像、図形などの操作の対象をオブジェクトと呼ぶ。









■ 階調

階調とは、色の濃淡を表すグラデーション、つまり色の段階のこと。例えば白と黒の場合、その中間には灰色があるが、さらに灰色 には濃いもの、薄いものがある。この段階を多く取れば、白と黒の2色でも、滑らかな色の変化を持った表現力豊かな画像を構成することができが、グレイス ケールはまさにこの白と黒の階調である。

階調の段階の中で最も明るい階調部分を「ハイライト」、中間の階調部分を「中間調」、最も暗い階調部分を「シャ ドウ」と呼ぶ。



■ アンチエイリアス

オブジェクトの輪郭などをなめらかにする処理のこと。