レッスンお疲れさまでした。

本日は、画像の加工とhtml/cssの修正を行いました。

画像の加工に関して

「fx」のアイコン、レイヤースタイルでつけたドロップシャドウは、ダブルタップすることで何度でも修正することができます。

不透明度を100%にすると影を濃くすることができます。

100%にしてもまだ薄いと感じるときは、レイヤースタイルでつけたレイヤー自体をコピーして複数重ねることで濃くすることができます。

できた画像は、まずは普通に保存します。

普通に保存した画像はPhotoshop形式で保存されるので、レイヤースタイルなども含め、レイヤーの情報を保持した状態で保存されます。

レイヤーの情報が保持されていれば、レイヤースタイルでつけたドロップシャドウを濃くしたい、薄くしたいなど修正が必要なときも簡単に修正できます。

webサイトの画像としてアップロードする場合、Photoshop形式の画像はwebで表示できませんので、jpg形式で書き出します。

Photoshopではweb用に保存で、画像形式を変えて保存します。

おおまかに

・写真は、jpg形式

・ロゴマークやイラスト系は、gif形式

・透明度を扱いたいときは、png形式

と覚えておきましょう。

html/cssの修正に関して

webサーバーにアップロードするファイルと、アップロードしないファイルは区別しておきます。

・wwwフォルダにはアップロードするファイル

・originalフォルダにはアップロードしないファイル

とします。

・htmlは、文章の論理構造を表します

・cssは、見た目のデザインを表します

bootstrapというフレームワークを使うと、パソコンで見てもスマホで見ても綺麗に見えるデザイン(レスポンシブデザイン)ができます。

不必要な余白などが入ってしまった場合、ブラウザで表示して、2本指タップして「要素の検証」で様々な情報を調べることができます。

どこに、どんな要素が入っているのかを確認しながら修正していきます。

画像を配置するには、htmlで配置する方法とcssで配置する方法があります。

・htmlで配置する場合、imgタグをを使います。

・cssで配置する場合、background-imageを使います。

文章構造として必要なものはhtmlで、見た目のデザインとして配置したいときはcssで配置します。

htmlで配置した画像は、bootstrapの機能により「img-responsive」というclass名を付けると、レスポンシブ対応になります。