web制作 | 夜間飛行 備忘録

web制作講座で教わったあれこれを書き留めていきます

13日目

本日は…

午前中はCSSで2カラムレイアウトの練習

CSSでページを作る…

 ・ページを作る前に手書きで、どこがどうというのを作る

  :#header h1などかきこんでいく

 ・ヘッダーよりコンテンツをあげようと頑張る必要はない。そこにnavがあることはよくあること

 ・デザインをする上で、2カラムの横ラインは揃っていると見栄えがイイ

 ・ヒトの心理として、円形が途中で始まると、その先を想像するので良い(ゲシュタルトの法則)

 ・どうしてもcontentsの中に、h1などが入ってしまう時は、ネフがティブマージンで上に表示させる

 ※文字情報と面の情報と分けて考えながらレイアウト

 ※※フロートがあれば先に作る(上からつくっていくわけではない)

 ※※アウトラインが出来てから中身について作っていく

 

午後はPsでレイヤーマスクの練習問題

■解像度の話

 ・解像度とは1inchの一辺の中にどのくらいの□が並んでいるか、ということ

  ※画素数はドットの総数

 ・macの画面表示は、100%のとき72個ppi)で、これは紙でみるのとほぼ同じ

 ・winの場合は96個になる

 ※ppiとはpixel per inchつまり1インチの中にどれだけのピクセルがいるか

 ・webでは軽い方がいい。ので、大きな画像をサイズ変更するとき、解像度を飼えないのなら、画像の再サンプルに☑を入れること。こうすることで、同じ画素数で、小さな画像にしたものが手に入る。無駄にきれいな大きなデータを削ぎ落とす

 ※※ハイキュービック等、ロゴと写真で形式を選ぶことが出来る

 ・DTPではこれはやってはいけない

 

・JPGとは非可逆圧縮。どんどんデータを削っていく

GIFエイリアス画像

 →これにお金を払いたくないがために生まれたのがPNG

PNGはフルカラーであり、ベクターであり、ビットマップでもある

 →エッジをしっかり出すことができるのでロゴに向いている。通常8bit(写真を扱うときくらいは27bit

 

スマートオブジェクト

 ・分身を作り出す(元のデータではなく、分身を動かしている。元のデータが情報を持っているので、分身は軽い上、小さくしても大きくしても画質が荒くならない)

 ・本体のデータが見たいときは コンテンツを編集

 ・元のbmpに戻すには、ラスタライズからスマートオブジェクト

 ※すべてレイヤータブで。

■into ペースト=特殊ペースト

 ・選択範囲内にペーストすることがでい、後ろで動かすことも可能

 ・色域指定…二階調のような状態を出すことで、自由選択ツールでは出来ないような選択域を作り出せる

 ・多角形選択ツール…ぼかしをかけたりできるが、一部くっきりさせたいときはもう一度多角形選択ツールで切り取ること(backspace)で選択範囲を変えられる

 

 

来週テストの予定(月曜日)

①HTMLとCSSの今週までにやったこと

②打ち込み…navつきの2カラムレイアウト