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

皆さんこんにちは。第4回目になりました。

まず先週の宿題だったデザイン提案用の「メインビジュアル」の披露・評価から入りました。

今回は、実際にお客様(クライアントの甲府市様)が見てくださったみたいで、様々なアイディアの作品に喜ばれていたそうです。(デザイン案はホームページリニューアル時に発表しますね)
そういったいただけるとこちらも嬉しくなってしまいますね。

メインビジュアルはサイトの看板なので、作成するのに非常に苦戦しました。
自分は良いと感じても、周りの反応がイマイチだったり、その逆もあったり・・・。

メインビジュアルを考える際に様々なコツを教えて下さいました

  • タイトルとキャッチコピーの文字の色は同系色を使う
  • 文字に付けるグローやドロップシャドウはさりげなく
  • キャッチコピーとロゴタイプのフォントは別に
  • ロゴタイプは小さく、キャッチコピーは大きく
  • 実際に大きさを気にしてロゴ等を作成する(縮小しても見やすいように)
  • 画像を入れる際には切っては駄目な場所がある(例えば人を入れる場合、顔からデコルテまでは入れる。)
  • 背景と文字の関連性(あまりかけ離れているのはナンセンス)
  • 写真を多くしようするのは客受けが良い
  • などなど・・・

    さて、マウントピア黒平のサイトは、WordPress(ワードプレス)で制作する、ブログ形式のホームページ。ブログベースなので、日記感覚で記事を投稿できるというすぐれもの

    さらに、HTMLを入力すればアレンジも出来、オリジナル度の高い立派なホームページにもなるんです。今からメインビジュアルや、サブページを作成するわけですが・・・楽しみもあり、不安もありです

    話は授業に戻りまして、今回の授業もFireworksを使用。
    先生が用意した画像を真似して作成するといったものでした。

ケーキ1

    一つ目の作品はこれです。
    一概に「真似」といっても難しく、どうやってあのグローをしているんだろう?や、
    あのフォントは何だろうか・・・?などと目だけでの判断はとても難しかったです。

    この画像のテキストの下の部分ですが、グローがかかっているのがお分かりですか?
    一見灰色かと思いきや若干赤みのかかったグローとなっています。
     グローには三種類あり、「無彩色」、「暖色のグレー」「寒色のグレー」とあります。
    食べ物を扱う場合は「暖色のグレー」が適しているでそうです。

    また、画像の「切り取り」機能も今回使いました。

ケーキ2

    その際に使用したお手本画像がこれです。

    まずケーキの全体画像が用意され、それを各自で切り取るといった作業に入りました。
    先生オススメの切り取りは、まずFireworksのペンツールを使い、切り取りたい画像の
    やや内側でパスをとります。(その際に、パスの色はその画像にない色を使うのがコツだそうです)

    その後、パスは白しか反応しないので、パスの中を白に塗り、パスのレイヤーと、切り取った画像のレイヤーをクリックし、「修正→マスク→マスクとしてグループ化」で切り取り完了。
    なお、ゆったりめの方がなめらかに切り取れるそうです。それをコピーして後ろに貼り付けていきます。

    ここでポイントがひとつあり、後ろのケーキが若干ぼけていますよね?これはぼかし(ガウス)を使用することによりこういったぼや~っとした画像に加工できるのです。

    さて、今回名言が誕生しましたそれは

    Fireworksはパスを制すれば Fireworks を制する!です
    漫画で言えばこれは見開き2ページで言われるようなセリフですね

    アプリケーションごとに制するものが違うそうですが、それらを制すれば仕事が速くなるそうです。
    プロっぽいアイコンの作成方法も教わりました。(応用編では普通に作っちゃダメみたい)

作成手順として、まず星のオブジェクトを作成し、頂点を24にします。その後、青でグラデーションをかけ、このイガイガは完成。
その後、丸い放射線状のグラデーションのかかった白いオブジェクトを作成し、5~15%の透明にして重ねます。これでハイライト効果を演出!

さらに、イガイガの形に合わせてマスクすると、上記のようにちょっと格好良いアイコンが出来ます。
そして PNG-32 形式のファイルに保存

1 「書き出しのプレビュー
2 形式を「 PNG 」に変更。
3 透明化の設定を「透明」に変更
4 書き出し。

ちなみにPNGは、PNG-8、PNG-24、PNG-323種類あります。
PNG-24とPNG-32はフルカラーに対応しており、なおかつ32ですとアルファチャンネル使用可能で、透明度を指定した透過画像を作成することができます。
(ちなみにアルファチャンネルとはコンピューターが扱うデジタル画像データにおいて、各点に設定された透過度情報を保存するデータ領域です。ブラウザによっては未対応のものあるので使用する時は要確認)

PNG で保存することにより、手元にある写真などへコピー&ペーストしてもシャドウが綺麗に反映され、オリジナルデータと同じように使いまわせます

ちなみに透過 GIF (背景が透明なGIF)でも透明になるのですが、上記のような複雑な形の場合、
どうしても背景の色が写ってしまい、完璧ではなくなってしまいます。
もし透過 GIF で書き出したい場合は・・

このように数十年前にあるような、角がはっきりしているシンプルな形のアイコンしか出来なくなってしまいます

さて、今回の宿題は
アクセスマップ・施設案内図・登山コースガイドを作成するというものでして、これは以前授業で出てきた「ロジック」が鍵を握ります。
デザインはアプリの操作やデザインの良し悪しの問題ではなく、情報デザインやユニバーサルデザインの観点や配慮が求められます。
自分や関係者だけが分かるガイドマップを作っても意味がないですよね・・
土地感のない首都圏などの観光客にとっても分かりやすいガイドマップ作りという「考える力」を鍛える課題です。

以上を踏まえ、皆で分担し作成しようと思うのですが、今までマップを作成したいことがないのでこれは頭を使いそうです・・・

    コメント

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

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

    *

    PAGE TOP