基金訓練(Webデザイン・プログラミング科)の48日目に行ってまいりました。
本日は、Adobe Illustrator CS4の実習です。
本日の内容は下記のとおりです。
Flash作成の準備
１．地図の作成
GoogleMapの等の地図をトレースしてイラスト地図を作成する。
元図の読み込み
背景の作成
- 新規レイヤーを作成する。
- 長方形ツールなどを使って背景を薄い灰色などにする。
道路の作成
- 道路の中心線をペンツールを使って書く。(塗りなし、線黒色)
(複数のパスで書いてOK)
- すべての線の太さを、道路の幅まで太くする。
- すべての線を選択して、
オブジェクトメニュー→パス→パスのアウトライン
で、外形のパスを作る。
- パスファインダパネルで合体をクリックする。
※最初の中心線のパスは、コピーして残しておくと、後で修正が楽。
線路の作成
- 新規レイヤーを作成する。
- 線路の中心線をペンツールを使って書く。(塗りなし、線黒色)
- 線の太さを、線路の幅まで太くする。(例．12pt)
- 線を選択して、Ctrl+C→Ctrl+F で、前面コピーする。
- 前面コピーした線の太さを細く(例．10px)し、線色を白にする。
- 白くした線を、線パネルを使って破線にする。
※最初の中心線のパスは、コピーして残しておくと、後で修正が楽。
ランドマークの作成
- 新規レイヤーを作成する。
- 長方形ツールなどを使って、駅や、目印になる施設を書く。
トリミングする。
- 長方形ツールで、マスク用の長方形を書く。
(最前面に新規レイヤーを作成して、そこに書く。)
- 元図以外のすべてのパーツを選択し、
オブジェクトメニュー→オブジェクト→クリッピングマスク
を、クリックする。
※クリッピングマスクをすると選択したパーツはすべて、もとのレイヤーから消えてしまうので、マスクしたいパーツをすべてコピーしてから、コピーしたパーツでクリッピングマスクを実行したほうがよい。
flash用に、画像を変換する。
- 新規レイヤーを作成する。
- スライスツールを使って、必要なパーツを長方形で囲む。
- ファイルメニュー→Webおよびデバイス用に保存で、画像を保存する。(PNG-24)
※保存ウインドウの設定→その他 で、「画像をフォルダに保存する」のチェックをはずしておかないと、新しいフォルダを作ってそこに保存されてしまう。
基金訓練(Webデザイン・プログラミング科)の47日目に行ってまいりました。
本日は、HTML&CSSプログラミングの実習です。
本日の内容は下記のとおりです。
１．CSSのスタイル属性(プロパティ)
枠(ボーダー)に関するスタイル属性
枠(ボーダー)の太さ
- プロパティ
- border-width
border-top-width
border-right-width
border-bottom-width
border-left-width
- 値
-
- 太さ(単位付数値)
- thin 細い線
- thick 太い線
- medium 標準
※枠の表示には、これにあわせてborder-styleの指定が必要。
枠(ボーダー)の形状
- プロパティ
- border-style
border-top-style
border-right-style
border-bottom-style
border-left-style
- 値
-
- none 枠線なし
- hidden 枠線なし
- dotted 丸い点線
- dashed 破線
- solid 実線
- double 二重線
- groove 立体枠(窪み)
- ridge 立体枠(隆起)
- inset 立体枠(内側全体が窪み)
- outset 立体枠(内側全体が隆起)
※枠の表示には、これにあわせてborder-widthでnone以外の指定が必要。
枠(ボーダー)の色
- プロパティ
- border-color
border-top-color
border-right-color
border-bottom-color
border-left-color
- 値
-
※指定がない場合、colorの値で表示される。
枠(ボーダー)の一括指定
- プロパティ
- border
border-top
border-right
border-bottom
border-left
- 値
-
- border-width,border-style,border-colorの値を半角スペースで区切って続けて指定
２．画像について
画像サイズの記述(width、height)
- ユーザビリティを考える上で、回線速度の遅い環境でテキストを先に読み込めるようにする為に必要。
画像解像度
- Photoshopなどを使用して、72dpiにする。
今日のポイント
- トップページは縦方向もモニターの範囲に収まるのが望ましい。
基金訓練(Webデザイン・プログラミング科)の46日目に行ってまいりました。
本日は、HTML&CSSプログラミングの実習です。
本日の内容は下記のとおりです。
１．CSSのスタイル属性(プロパティ)
テキスト、フォントに関するスタイル属性
文字の大きさ
- プロパティ
- font-size
- 値
-
- 長さ(単位付数値)(絶対及び相対指定)
- xx-small 超極小(絶対指定)
- x-small 極小(絶対指定)
- small 小(絶対指定)
- medium 標準(絶対指定)
- large 大(絶対指定)
- x-large 特大(絶対指定)
- xx-large 超特大(絶対指定)
- smaller より小さく(相対指定)
- larger より大きく(相対指定)
- % 親要素に対するパーセンテージ(相対指定)
文字の書体
- プロパティ
- font-family
- 値(複数指定可能で「,」で区切って指定)
-
- 系列別(serif、sans-serif等)
- フォント名(“ＭＳ Ｐ ゴシック”、Osaka等)
※スペースを含むフォント名の場合は、「”」で囲む。
※日本語のフォント名の文字は全角で、スペースは半角にする。
文字の太さ
- プロパティ
- font-weight
- 値
-
- normal 標準
- bold 太字表示
- bolder より太く表示
- lighter より細く表示
- 100～900 100刻みで指定
文字のイタリック体、斜体表示
- プロパティ
- font-style
- 値
-
- normal 標準
- italic イタリック体で表示
- oblique 斜字で表示
※イタリック体は、筆書形の右に傾いた書体で、元の書体とはデザインが違ったもの。
※斜体は、字形をそのまま斜めに傾けたもの。
行送り
- プロパティ
- line-height
- 値
-
- 長さ(単位付数値)
- 実数値(単位なし数値) フォントサイズに対する倍数
- normal 標準(フォントサイズに基づいてブラウザが設定した規定値)
- % フォントサイズに対するパーセンテージ
文字の色
- プロパティ
- color
- 値
-
※ブロック要素に指定可能。
段落の行揃え
- プロパティ
- text-align
- 値
-
- left テキストを左揃えにする
- right テキストを右揃えにする
- center テキストをセンター揃えにする
- justify 行内で均等配置にする
文字の装飾
- プロパティ
- text-decoration
- 値
-
- none 標準
- underline 下線をつける
- overline 上線をつける
- line-through 取り消し線をつける
- blink 点滅させる
※blinkは、Firefox、operaのみ有効。
※2つ以上の値を半角スペースで続ければ、同時に指定できる。
今日のポイント
- line-heightを指定した時、フォントの上下に均等に隙間が開くので、例えば、
font-size:10px;line-height:14pxの時、上下に各2pxの隙間があく。
sei2が、気になる家電、WEBデザイン、WEBプログラミング、基金訓練や日常の出来事を書いたブログです。
