基金訓練webデザイン講座30日目

基金訓練WEBデザイン授業内容

授業も早いもんで今日で30日目。授業の日数は数えてみたら61日間。
早くも半分が過ぎようとしています。後半もあっという間に過ぎてしまうんだろうから、限られた時間を大切に、目的をもって集中して授業に臨もう。

Photoshopでカンプ（comprehensive layout）作成

久し振りのカンプ作成でまごまごしてしまった。これではいかん。授業中にも紹介されてたデジハリの本が気になる。→早速Gano君が紹介していたので、ポチッっと買っちゃいました。

カンプ案は3案出す。
  • 自分のオリジナル
  • クライアント
  • 流行

アイデアや見た目を変えた3案ではなく、視点を変えて。

色
  • ベースカラー（基調色）
  • アクセントカラー（強調色）
  • アソートカラー（なじむ色）

アソートカラーはベースカラーの濃度や彩度を変えて作る。

文字
  • 文字の大きさ（読ませたい→14px、約款とか→12px、読めない→10px）
  • メニューの文字は白文字を使うとプロっぽく見えない。

（→薄いグラデーションに濃い文字を乗せるのがベスト。）

  • 写真と文字の間は1.5文字は空ける。（→2文字は空き過ぎ）
ガイドを数値で指定
  • 表示→新規ガイド（水平方向、垂直方向で指定）
  • 見にくい場合はガイドの色を変更[Ctrl]＋[R]
  • ガイドをロック

この機能、初めて知りました。便利です！

レイヤーをグループ管理
  • CSSのdiv名でフォルダ名をつける（header、content、sidebar、footer..）
タイトルの帯の作り方
  • シェイプツールで四角をつくる。
  • レイヤー効果「fx」→「グラデーションオーバレイ」を選ぶ
  • 境界線もチェック→（色を選ぶ、1ピクセル、内側）
  • グラデーションエディターで画面の色を見ながら調整。

ここが授業中どうもうまくいかなかった。シェイプとグラデがちょっと苦手。。



(講師ブログ参照)

ロゴの配置
  • ロゴ（.aiファイル）は「ファイル」→「配置」でPhotoshopにもってくるとロゴの左端が切れるのでNG!
  • コピー＆ペーストで持ってくる。

下記がカンプ完成品。
http://kikinkunrenweb.yu-yake.com/jugyou/20110711/comp_image.jpg

Photoshopでパノラマ写真

  • ファイル→自動処理→フォトマージ
  • 横長の写真（光が同じもの）、方向を少しずつ変えて何枚か撮る。

JavaScriptライブラリ

rollover.jsを利用したナビゲーション
  • http://www.dnolan.com/code/js/rollover/
  • マウスオーバー時点での画像名（_oを付ける）：「xxx_o.jpg」
  • 画像にclass名をつける→class="imgover"
  • rollover.jsのソースをコピペしてjsフォルダに入れる。
  • index.htmlの内にrollover.jsへのリンクを記述（）←（※HTML5で記述しているのでtype属性を省略しています。）

完成品はコレ>>

yuga.js
smartRollover.js

→ファイル名の最後に「_on」「_off」とつける。

jQuery Lightbox

http://leandrovieira.com/projects/jquery/lightbox/