a3t3mbk’s blog

元”theネットワークエンジニアを目指していたがネットワークエンジニアとして一回も働けなかった人間”が全くキャリアを積めず自分がぐちゃぐちゃなった結果、鬱でドクターストップののち、プログラマーとして再起を目指すブログです。(やはりPCは好きなんだな

Udemyでの勉強! Day006 on コース001

コース001*1はこちら!

www.udemy.com

は私の私的なコメントであって動画の内容とは(本質的に)関係がございません。

動画No.101:WEB制作でよく使うツール

  • ChromeツールのMeasureIt!
  • ChromeツールのColorZilla
  • 黄金比ツール(ググればいろいろ出てくる。)
  • Webページショット web画面全体のスクショをpngで保存するソフト。オペラとかだとデフォルトでできそう。

動画No.102:環境設定(いまさら!!?)

単位ピクセルに。環境設定を探して、単位から変更。
新規ファイル作成時の設定。横1440pxの縦2000pxがいい。縦は後からコンテンツ量に合わせて切り取る。解像度は72。RGBカラーで。
整列ガイドのスマートガイド。メニューバーの表示の表示・非表示からスマートガイドのチェックをオンに。

動画No.103:シェイプでWebサイトのベースを四角形でかたどっていく。

モデルのピクセル数をそのまま(960pxの39pxとか)

動画No.104:無料のアイコン紹介。かと思ったらダウンロード素材で。

ここのメインはカラーオーバーレイとテキストボックスの使い方復習 (というか、分売の場合、4つ目の動画だから動画的に復習という意図はない?)でも見てる側からすれば復習というか重複というか…

動画No.105:ナビゲーション。

よく右上にある奴。フォトショだとテキスト並べるだけ。あとでマークアップするのだろう。

動画No.106:メイン画像。クリッピングマスクの復習。

しかし色調補正の調整とかのセンスはわからない…

動画No.107:サイドバー。やってることは同じ。

動画を見ながら一緒に作ってみる、というコンセプトなら親切でいい動画、か?幅をあわせて、上下は自動で揃える(垂直方向に中央揃え)。

動画No.108:お知らせ一覧の作成。1行ごとの色替えとかもcssのnthchildではなく手動。初心者向けだからな…

しかしこれ、作ってもらう側からすれば、お知らせを一つ追加したい、ってのにもフォトショが必要になるし、いろいろ工数でっかくなりそう。

動画No.109:フッター。

ヘッダーをレイヤーフォルダごとコピーして作る。

動画No.110:フッターの右上にちょこんと出ている「ページトップへ」の画像。

ここで作ったものをわざわざ切り抜いてマークアップするらしい。

動画No.111:スライスで1pxも余白が出来無いように画像を切り抜いて初級編終わり。

初級編終わり。中級編に。

動画No.112:初級編の素材は全く使わず、ファイル作成からやり直し。

動画No.113:初級編よりヘッダーとかメイン画像が細かい。というか四角形のシェイプが小さくなっているだけ…

動画No.114:113の続き。ここまでは初級編と同じ。

動画No.115:フリーテクスチャのパターン画像(紙っぽい)を背景画像にする。不透明度30%くらいにして、背景レイヤーに黄色みを足すことで自然になる。

黄色を足すのはなんで?紙の黄ばみ?

動画No.116:アイコンをつけヘッダーテキストを追加。これも初級編と同じ。

動画No.117:116の続き。

初級編は10分とか15分とかの動画だったが、中級編から4~5分でカットされている。なぜかはわからん?

動画No.118、119:ヘッダーの続き。初級編と同じ。

120:ナビゲーションにカレントページの表示を足す、といってもマークアップするわけではなく、フォトショ上で色を変えて画像を追加するらしい。

動画No.121:吹き出しのような、下向きの三角形を表示させる。CSSで吹き出しを作る方法のフォトショ版。ここまででヘッダー完成。初級編との差はシェイプやテキストの細かさだけ。

動画No.122:メイン画像。境界線とドロップシャドウの追加。動画50前後の内容の復習的な内容。

動画No.123:新着記事一覧。初級編のお知らせ作成とおなじ。

動画No.124:123の続き。内容は初級編と同じ。鉛筆ツールで点線の区切りを作る。1本1本作って手動で位置を調整。

動画No.125:バナー作成。これも同じ。

うーん、まあ周回を強制的にやらされるという意味で身につくかもしれんが…

*1:自分で勝手に番号つけています