WEBデザイン応用編 写真のコラージュとメインビジュアル

12月12日の授業はWEBデザイン応用編の第2回目。前回に続き「ファイヤーワークス(Fireworks)」を使用して、写真素材を使った各種ビジュアルイメージ制作のうえで欠かせない技術を学んでいきます。まずは写真を使ってホームページ上のメニューボタンを制作。写真にグラデーションをかけてメニュー文字を配置していくのですが、ボタンひとつとってもユーザー操作や全体のイメージに配慮した細かいテクニックがあるんですね。正しく制作できることはもちろん、限られた時間内で素早く処理することもプロフェッショナルの現場では欠かせない要素になっていきます。

 

今回はコラージュ写真の制作についてもより深く勉強していきました。レイヤーを重ねて背景がより自然に見えるようさまざまなテクニックを駆使。3枚の画像がまるで一度に撮影したで写真であるかのような処理を施します。完成品はこちら

 


この写真のコラージュは、以下の3枚の異なる写真から合成・加工を重ねて完成しています。とても難易度の高い技術に四苦八苦しましたが、これはほんの序の口(基礎)とか

 

 左の犬は空色が鮮やかで雲ひとつない

 

 右の犬は空色が鮮やかさに欠け雲がある

 


この海上に浮かぶ雲をコピー&ペーストし、犬の背景へ移植します

 

続いてはいよいよホームページ制作へ。
今回のWEB応用編で与えられた課題はM八ヶ岳様の現行ホームページをリニューアルすること。
まずはホームページの“玄関”となるメインビジュアルのイメージを制作するための準備が行われました。
ホームページ制作の第一歩はクライアントの事業内容などを把握して、制作のガイドラインを正しく決定>していくこと。地域の方々で運営する放送局のコンセプトを的確にホームページへ具体化していくため、今回は生徒一人ひとりがメインビジュアルのラフスケッチから考えていきました。草原のなかで動物が佇むイメージ、放送局の人々に吹き出しで言葉を重ねるアイディア、八ヶ岳の稜線や森の風景をコラージュさせたもの…。

 

地域独自の放送局に関わるいくつかのキーワードを自分なりに解釈して、同業他社のサイトなども参考にしながら皆で発表し合ったメインビジュアルは、それぞれがアイディアに溢れたユニークなものばかりでした。今回の授業で提案されたメインビジュアルを元に、次回はトップページ制作に入ります。

 

WEBデザイン中級者向き 山梨デザインスクール ウェブデザインスタジオ山梨

WEB応用編 雲峰寺様サイト制作

今回はWEB応用編最終日の雲峰寺様サイト制作の報告です。前回決定したデザイン案を元にコーディングを行い、HTMLというインターネット上でページが見れるような形にします。
どんなメニュー(コンテンツ)にしたらいいか?どんな情報を入れるとユーザーにとって見やすいサイトになるか?など先生と受講生で話し合い、挙げられた意見はサイト制作に取り入れました。
メニューが決まったら各自担当ページを決め、原稿作成からコーディングまでを行います。
そして完成したページがこちら
  
見た目がきちんとできていることはもちろん、余計なタグがないかなどをチェックするソースコードの整形も行いました。
さらに今回の授業では、SEO対策に重要な関わりを持つキーワードディスクリプションh1タグの文言も自分たちで考えました。
ユーザーはどんな言葉で検索をしてくるのか、サイトや実際のお寺の「売り」は何なのかを考慮し、最適な表現を上記のタグに反映します。
フルCSSはおろかHTMLも携わったことがないという受講生もいましたが、皆きちんと最後まで完成させることができました
完成したサイトはこちらから見ることができます↓

 

臨済宗妙心寺派 裂石山雲峰寺 オフィシャルサイト
授業の後は教室の近くにある居酒屋ごちそう家 甲府駅前店さんで打ち上げをしました100種以上ものドリンクメニューが安価で飲み放題というステキなお店です
WEBデザインコース・DTPデザインコース合同の打ち上げで、初対面の人たちもいましたが、お酒が入っていることも影響し(?)すぐに打ち解けて盛り上がっていたようです
最後は皆で記念撮影

だいぶできあがってる人がいますね!
WEB応用編受講生の皆さん、DTP応用編・実戦編受講生の皆さん、そして先生も、お疲れ様でした。

 

WEBデザイン中級者向き 山梨デザインスクール ウェブデザインスタジオ山梨

WEB応用編 雲峰寺様サイトデザイン案制作

今回はWEB応用編の授業で制作した、雲峰寺様のサイトデザイン案をご紹介します。甲州市塩山にある雲峰寺様は、開山より約1260年の歴史を持つ、由緒あるお寺。重要文化財にも指定されている歴史的建築物や、武田家由来の宝物など、語りどころはたくさん。

 

その雲峰寺様のサイトを制作するにあたり、まずはDTPデザイン応用編の受講生たちが、スチール&ビデオ入門の授業として写真撮影に伺いました。

 

WEB応用編の受講生が行うサイト制作では、その時撮影した写真を使用しています。(DTP応用編受講生のみなさん、ありがとうございましたWEB応用編受講生が制作したサイトデザイン案がこちら。

 

A B

 

C D

 

E

 

どれもレベルが高く、良いデザインですね!女性的なデザイン、男性的なデザイン、いかにもお寺!という雰囲気のものから個性的なものまで、幅広いデザイン案が出揃いました。この中で住職様に気に入っていただいたのは、E案。

 

「門をくぐってこれから魔界に入って行くぞ~って感じの雰囲気がいいね」と冗談ぽく(?)おっしゃっていましたが、このお寺の見所である198段もあるという石段の写真を効果的に使っていたのが決め手だそう。写真の選び方、使い方も大切なポイントになるのですね。今後はこのデザイン案を元にデザインのブラッシュアップを行い、そしてコーディングを行っていきます。WEB応用編受講生のみなさん、がんばりましょう!

 

WEBデザイン中級者向き 山梨デザインスクール ウェブデザインスタジオ山梨

デザインの学校 ウェブデザイン応用編 第2クール 「イラストレーターでTシャツをデザインする」

今回の授業はイラストレーター普通のTシャツから動きのあるTシャツにデザインします
今回の流れは前々回のバナーをつくるときとほとんど同じです
STEP.0 イラストレーターを起動し、画像を開き画像をコピーします
(みなさんもう大丈夫ですね)

STEP.1 オブジェクトからエンベローブ>ワープで作成
STEP.2 上昇>カーブ 5%/水平 20%

STEP.3 ツールボックスからシアーダブルクリックして、水平10° プレビューチェックを入れる銃

STEP.4 ツールボックスシアーの左隣の回転10°
STEP.5 オブジェクトからエンベローブ>拡張
STEP.6 フィルタ>パスの自由変形ここでTシャツの裾を左右に若干広げますnext
STEP.7 Tシャツの袖や肩も微調整します
ダイレクト選択ツールでパースと形状を補正します
バナーの時のように奥をつめた感じにして、手前を広くします。
その時にTシャツのロゴも少し奥の方へ動かします

STEP.8 塗りと線をグラデーションで仕上げ、 効果からスタイライズ>ドロップシャドウ
    描画モード/乗算
    不透明度/30%
    X軸オフセット/4mm
    Y軸オフセット/4mm
    ぼかし/1.76mm
    濃さ/50%

完成です
始めのTシャツでもイイ感じでしたが、さらにデザイン性のあるオシャレなTシャツになりましたね

デザインの学校 ウェブデザイン応用編 第2クール 「イラストレーターでピッチ看板をつくる」

今回の授業は引き続きイラストレーターピッチ看板をつくります
前回も登場したこの長方形のバナーを、ちょっと斜めって影のある看板にしていきます

STEP.0 イラストレーターを起動し、画像を開き画像をコピーします。
(みなさん前回は大丈夫でしたか?)
STEP.1 フィルタからパスの自由変形を選び、ちょっと傾けます
STEP.2 任意の台形を描く
STEP.3 描いた台形を編集から>コピー>前面ペースト
STEP.4 コピーしたものを影にし、グラデーションで影っぽく色合いを調整するきのこグリーン
STEP.5 オブジェクトから>アレンジ>再背面
影の傾き具合をチェックしてOKだったら完成です
ちょっとした工夫でこんなに立派なピッチ看板ができますよ

デザインの学校 ウェブデザイン応用編 第2クール 「イラストレーターでカーブのあるバナーをつくる」

今回の授業はイラストレーターを使ってちょっとした加工をしてみます
まずこちらの長方形のバナーをカーブのついたバナーに加工します

STEP.0 イラストレーターを起動し、画像を開き画像をコピーします
(やらかしてしまったら事件ですからね)
STEP.1 オブジェクトからエンベローブ>ワープで作成
STEP.2 旗>カーブ 5%/水平 20%
STEP.3 ツールボックスからシアーダブルクリックして、
    水平10° プレビューチェックを入れる銃
STEP.4 ツールボックスシアーの左隣の回転10°
STEP.5 オブジェクトからエンベローブ>拡張
STEP.6 フィルタ>パスの自由変形でさらに奥の方にカーブをつけます赤い旗
STEP.7 左辺右(内側)へ若干移動
    奥がつまった感じになると遠近法で手前の旗の動きが
    大きく見えます
STEP.8 効果からスタイライズ>ドロップシャドウ
    描画モード/乗算
    不透明度/30%
    X軸オフセット/4mm
    Y軸オフセット/4mm
    ぼかし/1.76mm
    濃さ/50%

完成です
イイ感じにカーブとシャドウがついているので、躍動感を感じるデザインになりましたね

デザインの学校 ウェブデザイン応用編 第2クール 「メイクの授業」

今回はホームページからちょっと離れ「写真の女性モデルにメイクをする」という授業です
写真の女性にメイクするって、どういうこと??と思うみなさん
では一緒メイクを楽しんで見ましょう
まず登場したのは素材集から登場したモデルさん
【 制作手順 】黄色かぶりした西日の強い女性モデルの写真を採用。

このままではメイクができませんので、自然な状態にします。
・・・ということで、写真の中からモデルさんを切り取ります。
するとメイク前のモデルさん完成です
【 制作手順 】美白が伝わるよう肌色を整え、鼻にあるホクロをスタンプツールで取り除く。背景をマスキングし取り除きホワイトバックにする。

そして早速メイク開始です。
メイク道具は「ラメ素材」

【 制作手順 】「レイヤースタイルダイアログ」から以下の手順でラメ素材(テクスチャーの生地)を制作します。これがキラキラメイクの元となる。
1 スカイブルーの「描画色」で任意のサイズでキャンパスを塗りつぶす。
2 新規レイヤー作成。
3 「フィルタ→描画→雲模様1」適用。
4 レイヤーの「不透明度」を、「70%」に変更。
5 「表示レイヤーを結合」して、好みの明るさを調整。


こちらをモデルさんの目元にのせていきたいと思います。
そして完成後のモデルさん。
どうでしょう、ステキな涼しげな目元になっていますよね

そしてモデルさんに前後にロゴやバナーを入れれば完成
これだけで化粧品のパンフレットに使えそうですね
さらにナチュラルメイクがお好きな方用に、メイク前のモデルさんにもロゴなどを入れてみましょう

たったこれだけでステキな写真が出来上がりです

デザインの学校 ウェブデザイン応用編 第2クール

2008年8月2日に始まりました「ウェブデザイン応用編 第2クール」も早いもので残すところ、あと2回となりました
このクラスでは、ひとつのテーマを決めて、生徒ひとり一人がウェブサイトのデザインの企画から制作まで行います
その制作に必要なスキルを授業中に学び、制作の際に実際に使っていき、ひとつのウェブサイトをつくりあげるというものです
今回のテーマは「ネイルサロン」
生徒は女性3人と男性1人の計4人。
お盆休みを挟みながら、各々制作にあたりました
そして出来上がったものが、まず Aデザイン

こちらはパソコンを使ったお仕事をされている女性がつくったデザインです
彼女はとても落ち着いていて、品のあるステキな女性で、その彼女らしさが出た、シンプルにも品のある女性らしいデザインに仕上がっていますね
次に B-1デザイン B-2デザイン。


この2つのデザインは制作のお仕事をされている男性が創ったものです。しかもデザイン提案は1つでよかったのに、2つもつくってきたというプロ志向の強い方です
デザインも女性らしい雰囲気のある赤ベースのものと、それとは正反対の宝石店やアパレル関係のサイトを思わせる黒ベースもの。
どちらも「プロがつくったの」と思わせるような素晴らしいデザインですね
そして Cデザイン

こちらは現役高校生の女性がつくったものです。
彼女も2つデザインもつくってきた将来有望な生徒さんです
2つの中でもこちらの独創的なデザインには、先生はじめみんなが感動したデザイン。素晴らしい才能とセンスを持った女性ですね
そして最後は私の Dデザイン

ウェブ初心者の私には精一杯のデザインでした。
スキルは無いものの、ネイルサロンのメニューや雰囲気、さらにどんなお客さんがターゲットなのか考えてつくったものです
生徒のみなさんは「このネイルサロンのイメージにピッタリ」とおっしゃってくれましたが、結果は・・・
その結果はネイルサロンさんが決めます
この中からどれになるのか、みんな期待と不安でいっぱいのなか、
選ばれたのは男性がつくった B-1デザインでした
この結果に「みんなやっぱり」と思いつつもちょっと残念
しかもネイルサロンという、割と女性的な会社のデザインで、男性のデザインが選ばれたというのは、女性顔負けですね
でもデザインの世界は男性、女性は本当に関係ないんですね
ちなみに選ばれなかった他のデザインもサイト内で採用されることになりました
あと少しですが、みんなで完成に向けて頑張ります

 

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

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

今回の授業の最後は、Photoshop で女性モデルのレタッチ(画像補正)を習いました。
レタッチ(画像補正)の作業工程は下記の2点。
■全体の画像の補正
■モデルのメイクアップ
この写真は私がレタッチしました。スタンプは慣れていますが、メイクアップは難しい~
nextnextnext
は先生のお手本です。やはりスペシャルな仕上がりですね
眉の形も整えているし、リップグロスに強めのアイライン本当のメイクをしたみたい

先生のお手本
■全体の画像の補正
まずは左のポジからスキャンした状態の悪い写真から、
スタンプツールを使って一緒にスキャニングされてしまった埃などを
近くの色を拾いながら消していきます。
影などで階調があるところにゴミがある場合は、
細いブラシやボケあしの長いブラシで根気よく消していきます。
ゴミ取りが終わったら、トーンカーブ
コントラストと明るさを出します。
モデルを見ながら、色相・彩度から彩度をあげて顔色をよくします。
色が転んでいるようなら、色相も調節します。
■モデルのメイクアップ
レイヤーが多いのでフォルダ分けしながら作業します。
・リップフォルダ
唇は、まずビビットな赤をボケあしのあるブラシでベタ塗りします。
レイヤーの乗算不透明度50%を設定すれば完成です。
・アイラインフォルダ
少し太めのブラシでアイラインを引きます。
目じりの方は長めに引いて、ボケあしの長い消しゴムで調整します。
そしてレイヤーの乗算不透明度40%で完成です。
・アイブロウフォルダ
眉毛もアイラインと同じように大きめに書いて、後で消しゴムで調節します。
色はモデルが茶髪なので、黒ではなく髪の毛からスポイトで色を拾ってきます。
最後にレイヤーの乗算不透明度40%で完成です。
・アイキャッチフォルダ
まずはモデルにカラコンを入れます。
モデルの瞳に赤系の色を乗せ、レイヤーの乗算不透明度50%で完成です。
次に目に光を入れます。
大小の細いブラシで瞳の中にハイライトを2つ入れ、
不透明度50%で完成です。
この方法で、リップにもハイライトを入れることができますね。
・ロゴフォルダ
最後にモデルの後ろにロゴを入れました。
これは、モデルの上にロゴを乗せ重なった部分を消しゴムで消します。
境界線はボケあしの長いブラシで自然に仕上げました。
上記のやり方を利用すれば、こんなに華やかに仕上がっちゃいます
nextnextnext
灰色のカラコンを入れたようにしています。
アイシャドーも入って、外人風のバッチリメイクの出来上がりです
nextnextnext
上記のメイクはもちろんした後で、更に背景をぼかして人物をより目立たせています
状態の悪い写真や、メイクが足りないモデルの写真も、
工夫を凝らせばこんなにキレイに仕上がるんですね。

 

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

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

さて、2008年のウェブデザイン応用編の1クールの始まりです。
今回は第2回目のおさらいです
■バナーのブラッシュアップ

前回作成したバナーをよりかっこよく見せるために、
写真にプロカメラで撮ったようなぼかしを加えます
1.まず、写真のレイヤーを複製し、写真レイヤーを2重にします。
2.上層の写真レイヤーにフィルタのぼかしからガウスを2pxかけます。
3.ぼかしをかけた写真レイヤーにレイヤーマスクを追加し、
 レイヤーマスクに対しグラデーションをかけます。
 グラデーションの設定は黒白で円形にすると、
 写真のキーボードからマウスにかけてぼかした写真が徐々に消えて、
 下層の元の写真が見えてくるため、
 手前にピントを合わせて撮影したような写真になりました


■メインビジュアルとメニューの制作
サイトのトップに表示するメインビジュアルとメニューを作成します

1.Fireworksキャンパスは700×220pixelに設定し、写真を配置。
 グラデーションを使って写真をなじませ、ロゴと文字を配置します。
 この時、カーニングとトラッキングで文字のバランスを整えるのを忘れずに
2.メニューバーの部分に700×40pixelのグレーの半透明の長方形を置き、三角形で矢印をつくり文字を置く。
3.スライスでビジュアル部分とメニューバー部分を上下別々に切り離してjpegで書き出す
 メニューバー部分の矢印と文字は後からのせるので、書き出すときは非表示にしておく。
4.最後に矢印の部分を15×15pixelでスライスし、背景を透明にしてgifで書き出す
5.Dreamweaverに移って、テーブルを使ってビジュアル部分とメニューバー部分をつなぎ合わせる。
 この時、メニューバー部分はあとで文字を入力するので、
 背景に画像を表示し、高さを40に設定する。
 メニューバー部分に文字を打ち込んだら、それぞれの頭に矢印を配置する。

   ホーム ご購入 ニュース ご利用  サポート

6.メニューバー部分に打ち込んだ文字は、CSSフォルダのクラスからフォントのスタイルを決め、適用する。
7.メニューに適当なリンクをはり、修正の中のページプロパティからリンク色を設定すると完成です
復習で写真を変えて、色違いも作りました

なかなか、ハイペースで進んでいる授業で大変ですが、
次回提出の課題もがんばりましょう
課題:700×220pixelのRES RARAメインビジュアル(メニュー無し)

 

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

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

こんにちは。くろねこです。
す、すいません、すっかり更新が遅くなってしまいました・・・
前回に引き続き、今回もサカモト先生による授業となりました。
今回教えていただいたのは、ムービーです。
まずムービーを作るにあたって必要なのが、flv形式のファイル
現在あるビデオ形式のファイルの中で、一番圧縮率が良く画質もきれい。
ブラウザに自動的にインストールされていることが多く、普及しているそう。
しかし、このflv形式のファイル単体ではビデオの再生は不可。
なので、Flash Professionalを使い、flv形式のファイルを取り込んで、
再生する仕組みを作っていく必要があります。
■配信方法について
ビデオを再生させる方法は、下記の3種類。
(1)プログレッシブ
(2)埋め込み
(3)ストリーミング

プログレッシブの場合、読み込んだ分から再生を始めるので、ユーザーを待たせず
視聴してもらうことができます。
それに対し、埋め込みは100%読み込みが完了しないと再生が始まりません。
長時間再生するものには向かず、またデータも重くなります。
ストリーミングの場合は、専用のサーバー(有料)が必要になりますが、
原則的にユーザー側にビデオのファイルが残らず、著作権の保護が出来る
という利点があります。

■映像を取り込む方法(1)

で、実際の作業手順はというと。
まず、ファイルの読み込みからステージに読み込みを選択し、下記のように進みます。



これで、埋め込みで、ステージ内に映像を取り込むことができました!
プログレッシプで取り込みたい時は、2枚目の写真(展開)の時に、
プログレッシプの項目にチェックを付ければOK。
パブリックブレビュー(ctrl+Enter)で確認してみましょう↓↓

埋め込みで映像を取り込むと、タイムラインに時間が表示されます。
ここで、先週の授業の復習も兼ねて、タイムラインを使って2本のビデオを
つなげる
作業を行いました。
1本目のビデオが徐々に消えていき、2本目のビデオが始まる様に作ります。
が・・・。先週あれだけ教えていただいたのに、結構忘れてしまっていて、、
ポイントは、レイヤーを分けて作業することです!





苦労しつつも何とか完成。先生、すいませんでした
■エンコードとデコードについて
◎エンコード
ビデオカメラなどで撮影した映像を、インターネットで配信するために最適な形式の
ファイルに変換すること。
◎デコード
エンコードしたファイルを再生すること(元の形に復号させること)
用は、エンコードが圧縮で、デコードが解凍のような作業という風に、
意味を覚えておきましょう。

■flv形式のファイルの作り方

で、そもそもこのflv形式のファイルは、フラッシュ独自の形式なんだそう。
なので、この形式のファイルをまずは作る必要がありますよね?
そんな時には、ビデオエンコーダというソフトを使います。
今回はFlash 8 VideoEncoderを使いました。
これは、画面上に変換したい別形式のファイルを貼り付けて、キューの開始を
クリックするだけ。これだけで、簡単にflv形式のファイルに変換してくれます!

■映像を取り込む方法(2)

そして、先程とは別の取り込み方法も教えていただきました。
ウインドウから、コンポーネントを呼び出し使っていきます。
必要に応じて選び、コンポーネントインスペクタに、再生したい
ビデオのURLを入力しましょう。
◎FLVPlayback・・・Flash 8でのみ使用可能
◎MediaDisplay・・・プレーヤーなし
◎MediaPlayback・・・プレーヤー付き
また、プレーヤーのデザインを後々変更したい時は、パラメータの
スキンから選び直すこともできます。
スキンで選んだプレーヤーも、1つのswfファイルとして自動的に保存されているので、
ブラウザで再生する時には一緒にアップロードすることを忘れないようにとのアドバイス
もいただきました

その他、プレーヤーの再生や停止など、自分好みのデザインでボタンを制作する
ことも出来るようです。
まだまだ奥の深いフラッシュの授業。
2週続けて勉強したけど、理解できる日は来るのかな
とりあえず・・・お疲れさまでした

 

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

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

先週はお休みしてしまいましたので、授業内容をレポート出来ずすいません・・・
今日は特別講師を招いてのフラッシュの授業となりました!
講師は、デジタルハリウッドで活躍中のサカモト先生。
Flash Professionalというソフトを使い進めていきました。
フラッシュは、本来アニメーションを作るためのツールだそう。
で、他のデザイン系ソフトとの大きな違いは、タイムラインがあること。
このタイムラインを使って、時間の流れを管理して動きのある画像を作っていきます。
■オブジェクト作成時の注意点
円や矩形など、複数の図形を重ねてレイアウトする時は、個別にグループ化するか
レイヤーで層を分けておきましょう。
うっかりこれを忘れると、背面に描いた図形は後から重ねた図形に
上書きされてしまいます。
■アニメーションの基本
アニメーション制作の基本は、モーショントゥイーンを使うこと。
これが使えないとフラッシュは使えない!という最も重要な部分です。
以下の3手順は確実に覚え、繰り返し使って操作に慣れましょう
1.シンボルに変換
まず、オブジェクトを選択した状態で、修正からシンボルに変換を選択。
この時、ムービークリップにチェックを付けましょう。
2.キーフレーム挿入
時間を決め(1秒=30フレーム)、タイムラインのフレームにキーフレーム挿入。
3.モーショントゥイーンを作成
モーショントゥイーンを作成し、オブジェクトの最初の位置と
最後の位置を選びます。
◎フレームレート
1秒間に進むコマ数。値が大きくなる程、動きが速くなります。
通常、TVは約30フレーム、映画は24フレームで製作されているようです。
■アニメーションの制作
先程の3手順を踏まえ、左から右へ図形が移動するアニメーションをはじめ、
いろいろなバリエーションのアニメーションを作ってみました。
(1)モーフィング(だんだん色が変わる)
オブジェクトを選択した状態で、プロパティーのカラーから着色を選ぶ。
オブジェクトの色が徐々に変わっていきます。

(2)画像のフェードイン
オブジェクトを選択した状態で、プロパティーのカラーからアルファを選ぶ。
オブジェクトが徐々に消えていく、又は浮かび上がってくる演出ができます。

(3)マスクで演出する技(フェードイン/フェードアウト)
◎画像の読み込み
ファイルの読み込みから、画像を読み込み配置します。
この時、ステージに配置する画像の位置は、X軸方向・Y軸方向とも
小数点を含まない数値に設定しましょう。
1.シーン1の写真、シーン2の写真、マスキングする円をそれぞれ別のレイヤーで配置する。
2.マスキングする円をアニメーションにする。
  拡大・縮小ツールを使い、小さな円がだんだん大きくなるアニメーションを作ります。
3.マスクをかける
  レイヤーの右クリックから、シーン2の写真に対して、円でマスクをかける。

すると、こんな感じに出来上がります。↓↓



シーン1の写真が最初見えているところに、徐々にシーン2の写真が登場し、
最後は全てシーン2の写真に切り替わるというもの。
お解りいただけたでしょうか??
他にもまだまだ書ききれないくらい、本当に盛りだくさんの内容を教えていただきました。
全部吸収できたカナ・・・
サカモト先生、来週もよろしくお願いします
それと、朗月堂のサイトリニューアルを応用編の授業内で行うことが決定し、
次の授業までにトップページのデザイン案を提出する課題が出ています。
・・・がんばって仕上げましょう

 

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

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

すっかり、レポートが遅くなってしまいましたが・・・
今回の授業では、画像の加工や補正を教わりました。
サイトを作る際、使用する画像は必ずレタッチしてから作業を進めましょうね。
また、レタッチ前には元画像を別データにして取っておくこともお忘れなく。
まずは、基本的な画像補正をFireworksにて行いました。
■画像補正
色相・彩度、トーンカーブを使って、画像の色合いを調整します。
この時、明度で明るさの調整をしないように注意しましょう。
画像を小さくサムネイルとして掲載する場合などは、コントラストをはっきりさせ、
メリハリをつけると写真がきれいに見えますよ。
■WEB用に書き出す
レタッチが済んだ画像を、WEB用に保存しました。
イメージプレビューから書き出すと、画像サイズの拡大・縮小やトリミングも
自由自在に出来て、便利ですね
そして、通常の画像編集から高度な加工技術にも挑戦。
Photoshopを使い、様々な工程を経て女性のメイクアップを行いました。
こんなに変わるんです

■メイクアップ
1.モデルの画像補正
トーンカーブを使い、画像全体を適切な色合いに調整します。
この時モデルさんの顔色が暗かったので、顔だけ明かるくすることに。
先程調整した画像をコピーし、さらにトーンカーブで色合いを明るくします。
レイヤーマスクを追加し、一旦全てのレイヤーを隠してから
顔の部分だけを白で塗りつぶします。
これで、顔色がワントーン明るくなりました。
2.メイクアップ
・リップ
ブラシツールを使い、リップラインを描いたらリップ全体を塗りつぶします。
好みの色を選んだら、塗りつぶしから透明部分の保護にチェックを付け、
描画色で塗りつぶします。
レイヤーを乗算にして、不透明度を30%くらいにすると、唇になじんで見えます。

・アイライン
ブラシツールを使い、目の際に黒くラインを引いていきます。
思い切って一気に引くと上手くいくらしいのですが、どうもワタシは
マウスで曲線を描くのが苦手で・・・
はみ出した部分などは、ぼけあしの大きい消しゴムツールで消しましょう。
フィルタから、ぼかし(ガウス)を選び、3PXほどかけます。
不透明度は80%くらいにします。
・アイブロウ
同様に、ブラシツールを使いアイラインをブラウンで描いていきます。
レイヤーは乗算、不透明度は30%程で、眉色もなじませます。

3.アイキャッチ
瞳をはっきりさせるため、ブラシツールで黒目の部分をブラウンで塗ります。
また、目力アップのために、小さな白いブラシで光源を2箇所入れてあげました。
この時不透明度を10%程に下げると、キラキラし過ぎずより自然な印象の瞳になります。
ここまでできたら完成です。

こちらも制作例のひとつ。美人度が3割増しですね
Photoshopをマスターして、(あとマウスの上手な動かし方に慣れて)
上手にレタッチ出来るようになりたいと感じた1日でした~

 

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

デザインの学校 ウェブデザイン応用編 第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回

こんにちは。
2007年3回目のWEBデザイン応用編がはじまりました!
これから毎時間の授業内容をレポートさせていただきます、くろねこです。
よろしくお付き合いくださいませ~
さて、初日の授業は・・・。
まずWEB関連用語のおさらいも兼ねて、先生による講義がはじまりました。
HTM文書を記述する際の約束事を再確認。HTML文書の一番最初には、
ページで使用しているHTMLのバージョンを定義する必要があるので、
文書型宣言を記述することがお約束ですよね。
よく耳にする「HP」と「WEBサイト」の違いも改めて確認し、なるほどぉ~と実感。
本来ならHPとはWEBページの中で最初に表示されるトップページのことを示すそう。
で、WEBサイトとはトップページとその他のWEBページで構成された、一連のサイトのこと。
でも一般的にはHP=WEBサイトと、同義語で使われていますよね~。
また、「ファイルサイズ」「イメージサイズ」も間違いやすいので要チェックです。
ファイルサイズとは、ファイルの容量を示し、イメージサイズとは画像を印刷した
時のサイズ(画像解像度)のこと。
作業効率を高めるためにかかせないショートカットの操作も教えてもらいました。
ウインドウズ+E・・・マイコンピュータの立上げ
ESC・・・作業をキャンセル
F2・・・編集
Ctrl+X・・・カット
Ctrl+C・・・コピー
Ctrl+V・・・貼り付け
Ctrl+Z・・・操作を取り消す
Ctrl+S・・・上書き保存
Ctrl+A・・・全選択

どれも1度覚えてしまえばかなり便利です。
忘れることのないようにしましょう~!
そして、ここからDreamWeaverFireworks使っての作業となりました。
table挿入時の基本は、1行1列の幅100%。
幅100%で作っておけばtableの中に文を打ったり画像を貼り付けたりという作業も
しやすいですし、行や列の追加は後々DreamWeaverで簡単に出来ますもんね。
■tableの罫線の付け方について
一般的には、tableのボーダーの設定に値を入力し、線を付けてしまいがち。
ですが、tableの背景色を黒、tdの背景色を白にして、cellspacing(セル間隔)に1を
入力してあげることで、ボーダーで“1”を設定するよりも細い黒い罫線が引かれた
ように見えるんです。
ちょっと裏技?的な使い方かもしれませんが、より自然なデザインに仕上がるので
使っていきたいですね。
■背景画像の設定について
Fireworksで作った背景用の画像を書き出す際のポイントをいろいろ教わりました。
グラデーションを付けた画像を背景画像に設定する場合の注意点は・・・。
背景画像はX軸方向・Y軸方向に自動的に繰り返して表示される性質をもつため
tableの高さと、書き出す画像の高さを同じ値にしましょう。
そうしないとグラデーションの微妙な色合いが表現されず、不自然になってしまいます。
■バナーの制作
1)Fireworks
矩形を作り、矩形の左上から右下にむかってグラデーションをかけました。
この時グラデーションを画像全体にかけるのではなく、画像の2/3くらいに対して
かけると、よりさりげないデザインになりますね~。
また、フィルタから文字に対してドロップシャドウとグローをつけました。
これらもよく使いますので、フィルタの効果をいろいろ試してみましょう。
使いこなせるようになれば、グッとデザインの質がアップしますよ~
そして、バナーらしさを出すため、ロールオーバーの画像も作りました。
先ほど作った画像の一番上に、白い矩形をのせて、白い矩形の透明度を下げます。
これで、簡単に少し明るくなった画像が出来ます。
画像が出来たところで、それぞれの画像を書き出します。
2)DreamWeaver
最初に作った画像を選んだ状態で、ビヘイビアの追加から、スワップイメージを選択し、
後に作ったロールオーバー用の画像を選べば出来上がりです。
画像にリンクを張る場合も注意点が1つ。
別サイトへのリンクを張る場合は、ターゲットを_blankに設定してあげると、
別ウインドウで開きます。
また、仮にリンクを張りたい場合には、リンクにを入れておきましょう。
と、初日はこんな感じで終了~。お疲れ様でした!
来週からはスタイルシートにも触っていくので、これからがんばっていきましょうね。

 

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

  • デザインでお困りの企業様
  • 人材や教育でお困りの企業様