By sei2
2010
08月
06日
更新日 : 2018年3月1日

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


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

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

Flash作成の準備

１．地図の作成

　GoogleMapの等の地図をトレースしてイラスト地図を作成する。

元図の読み込み

  • 元になる画像ファイルをイラストレーターで開く。

背景の作成

  • 新規レイヤーを作成する。
  • 長方形ツールなどを使って背景を薄い灰色などにする。

道路の作成

  • 道路の中心線をペンツールを使って書く。(塗りなし、線黒色)
    　(複数のパスで書いてOK)
  • すべての線の太さを、道路の幅まで太くする。
  • すべての線を選択して、
    　オブジェクトメニュー→パス→パスのアウトライン
    　で、外形のパスを作る。
  • パスファインダパネルで合体をクリックする。

※最初の中心線のパスは、コピーして残しておくと、後で修正が楽。

線路の作成

  • 新規レイヤーを作成する。
  • 線路の中心線をペンツールを使って書く。(塗りなし、線黒色)
  • 線の太さを、線路の幅まで太くする。(例．12pt)
  • 線を選択して、Ctrl+C→Ctrl+F で、前面コピーする。
  • 前面コピーした線の太さを細く(例．10px)し、線色を白にする。
  • 白くした線を、線パネルを使って破線にする。

※最初の中心線のパスは、コピーして残しておくと、後で修正が楽。

ランドマークの作成

  • 新規レイヤーを作成する。
  • 長方形ツールなどを使って、駅や、目印になる施設を書く。

トリミングする。

  • 長方形ツールで、マスク用の長方形を書く。
    　(最前面に新規レイヤーを作成して、そこに書く。)
  • 元図以外のすべてのパーツを選択し、
    　オブジェクトメニュー→オブジェクト→クリッピングマスク
    　を、クリックする。

※クリッピングマスクをすると選択したパーツはすべて、もとのレイヤーから消えてしまうので、マスクしたいパーツをすべてコピーしてから、コピーしたパーツでクリッピングマスクを実行したほうがよい。

flash用に、画像を変換する。

  • 新規レイヤーを作成する。
  • スライスツールを使って、必要なパーツを長方形で囲む。
  • ファイルメニュー→Webおよびデバイス用に保存で、画像を保存する。(PNG-24)

※保存ウインドウの設定→その他 で、「画像をフォルダに保存する」のチェックをはずしておかないと、新しいフォルダを作ってそこに保存されてしまう。


今日のポイント

Webデザインで参考になるサイト




カテゴリー: 職業訓練 | タグ: , | コメント / トラックバック: 0個
By sei2
2010
08月
05日
更新日 : 2012年9月17日

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


基金訓練(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にする。


今日のポイント

  • トップページは縦方向もモニターの範囲に収まるのが望ましい。


カテゴリー: 職業訓練 | コメント / トラックバック: 0個
By sei2
2010
08月
04日
更新日 : 2012年9月17日

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


基金訓練(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の隙間があく。


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