基金訓練に行ってきました。(32日目)

基金訓練(Webデザイン・プログラミング科)の32日目に行ってまいりました。
本日は、Adobe Photoshop CS4 の実習です。

本日の内容は下記のとおりです。

1.画像の遠近感に合わせて別の画像を貼り付ける。

 Vanishing Pointを使用する。

・貼り付けたい画像をコピーしておく。
・ベースになるファイルに新規レイヤーを作成。
・フィルタメニュー→Vanishing Point
・面作成ツールで、4点をクリックして面を作成する。
・貼り付けたい画像をペーストし、変形ツールで小さくしておく。
・ペーストした画像を面上に持っていく。
・変形ツールで角度、大きさを調整して、OKボタンで確定する。
・レイヤーパネルで乗算にしたり、不透明度を下げたりして元画像となじませる。

2.レイヤースタイル

 レイヤーにさまざまな効果を加える。

・レイヤーパネルで効果を加えたいレイヤーをダブルクリックすると、別ウインドウが開く。
・使いたいスタイルの文字上をクリックして効果を調整する。

3.レイヤースタイルのコピー

 今あるレイヤーのレイヤースタイルを、別レイヤーに反映する。
 
・レイヤーパネルのレイヤースタイルが設定されているレイヤーを右クリックして、「レイヤースタイルをコピー」をクリックする。・反映したいレイヤーをすべて選択し、右クリックして、「レイヤースタイルの複製」をクリックする。

4.レイヤーの結合

・レイヤーパネルで結合したいレイヤーをすべて選択する。
・Ctrl+Shift+Alt+Eを押す。
・元レイヤーを残しつつ、新しいレイヤーで結合される。

5.画像の端にボケ足マスクをつける。

・レイヤーパネルで、効果をつけたいレイヤーを選択する。
・レイヤーパネル下部にある「ベクトルマスクを追加」をクリックする。
・レイヤーパネルにできたレイヤーマスクサムネール選択する。
・長方形選択ツールで、画像の端の少し内側を選択する。
・選択範囲メニュー→選択範囲を変更→境界をぼかす→ぼかし半径の数値入力
・選択範囲メニュー→選択範囲を反転
・塗りつぶしツールで選択範囲を黒で塗りつぶす。

今日のポイント
・Ctrlキーを押しながら、要素をクリックすると、その要素が含まれるレイヤーが選択される。
・レイヤーとサムネールの選択を常に意識して作業する。
・Ctrl+Tで要素をクリックすると、バインディングボックスが表示され、変形できる。

カテゴリー: 職業訓練 | コメント / トラックバック: 0個

基金訓練に行ってきました。(31日目)

基金訓練(Webデザイン・プログラミング科)の31日目に行ってまいりました。
本日は、HTMLプログラミングの実習です。

本日の内容は下記のとおりです。

CSS(Cascading Style Sheets)について

1.CSSのバージョン

・CSS1・・・1996年
・CSS2・・・1998年
・CSS2.1・・・2006年←現在の主流
・CSS3・・・未勧告

2.W3C準拠(CSS)の必要性

・SEO対策になる。
・アクセシビリティがよい。(HPの表示動作が軽快)
・メンテナンス性(保守性)がよい。
・開発効率がよくなり、作業時間が短縮。

3.スタイル宣言をする場所

・HTMLファイル内で、適用させる要素に対して、直接指定。(ボディ<body>内)
 保守性が悪い。

・HTMLファイル内で、ヘッダ<head>部にstyle要素を使って記述。
 ページ内を一括して変更しやすい。

・外部ファイルに記述し、参照する。
 サイト内の複数ページを一括して変更しやすい。

4.スタイル指定のルール

セレクタ { プロパティ : 値 ; プロパティ : 値 ; }

・セレクタ・・・スタイル指定をする対象。(h2、ID、クラス名等)
・プロパティ・・・スタイル属性。何を指定するか示すもの。(color、width等)
・値・・・プロパティに対する値。(red、200px等)
・「;」(セミコロン)までをひとつの区切りとし、複数の宣言をセミコロンで続けて指定可能。
・値には「”」(引用符)の使用不可。

5.スタイル属性(プロパティ)

・width:
 幅を指定。(例 width:50%)

・height:
 高さを指定。(例 height:100px)

・background-color:
 背景色を指定。(例 background-color:red)

・marigin:
 周辺の余白を指定。(例 margin:5px)

・padding
 枠と内容の間の余白を指定。(例 padding:5px)

・font-size:
 文字のサイズを指定。(例 font-size:75%)

・line-height:
 行間を指定。(例 line-height:15px)

・float:
 回りこみを指定。(例 float:left)

 

TABLE・・・表組み

<table border=”x” cellspacing=”y”>
 <tr>
   <td>zzz</td>
      ・
      ・
      ・
 </tr>
</table>

・tr要素 表組みの行を定義
・td要素 表組みの列を定義
・x 表組みの外枠の太さ(ピクセル)
・y セル同士の間隔(ピクセル)
・zzz セルに表示する内容

今日のポイント

・ひとつのテーブルで<tr>~</tr>内の<td>~</td>の数を同じにしないと罫線が欠けるので、空白セルを作るときは <td>&nbsp;</td> とする。
・<margin>や<padding>は、テキストやイメージが生成する範囲を基準とする。ただし、IE6の場合、文書型宣言の1行目(<!DOCTYPE html・・・・・・>)を省くと外枠が基準となる。

カテゴリー: 職業訓練 | コメント / トラックバック: 0個

こんなんでました!

フォトショップで落書きしました。
たこのパウル

カテゴリー: 雑談 | コメント / トラックバック: 0個