« ?第十回 PSD編集♪(1) の巻? | メイン | ?第十二回 文章を編集しましょう♪の巻? »

?第十一回 PSD編集♪(2)の巻?

2006年07月26日
 

こんにちは。サラです♪('∇')ノ
ビビちゃんのホームページのイメージがPhotoshopで完成し
今日はマッチャン教官に教わりながら次のステップに入ります♪


サラ「マッチャン教官!お願いします♪(*'-')」

教官「はい。まずこの前作ったPhotoshopを開いてくれるかな?」

サラ「コレですね♪」
top.jpg

教官「そうそう。じゃあ編集に入っていこうか。
   Photoshopの編集については テンプレートモンスタージャパンの
   ホームページテンプレートの編集に『Photoshopの使用方法』で
   詳しく説明があるからそこにも目を通してね。」


サラ「はい('∇')勉強します☆」

教官「じゃあ 実際にビビちゃんのホームページで編集方法を説明するね」

<Photoshopでビビちゃんホームページを編集>

Photoshopでの編集はホームページ上の画像を編集していきます。
元々テンプレートにあった画像を削除してビビちゃんの画像を
入れていったのですが その部分を保存していく作業に入ります。

1.まずツールをスライスツールにします。

2.次に保存する画像を指定します。
「プロフィール」と白文字を入れた画像を保存しようと思います。
 スライスが指定できるとオレンジ色っぽい線で囲まれます。

3.指定されたのを確認して、メニューバーの『Web用に保存』へ進みます。
suraisu1.jpg


4.Web用に保存の画面が出てくるので右上の『保存』をクリックしましょう
 すると保存のウィンドウが開かれるので

 保存場所は『site_flash』のままで
 ファイルの種類を『画像のみ(*.gif)』
 スライスを『選択したスライス』    に変更し『保存』ボタンを押します。
suraisu2.jpg


5.「ファイルの置き換え」というウィンドウが出てきますので
 『置換』をクリックします。これで完了です。
suraisu3.jpg


 無事にプロフィールと書いたgif画像が保存されました。
 後は同じようにして他の変更した画像を保存していけばokです。

サラ「マッチャン教官!できました?♪
   ビビちゃんの写真等、変更した所の画像を全部保存しました♪」

教官「できたみたいだね。じゃあちゃんと変更できたか確認してみようか。」


<確認してみましょう>

1.テンプレートのフォルダの中の『site_flash』というフォルダを開けます
">suraisu4.jpg

2.その中の変更を保存した 該当のhtml(ココではindex.html)で右クリックし
 『Dreamweaver MX2004で編集』をクリック。
suraisu5.jpg

3.Dreamweaverで変更が確認できます。
suraisu6.jpg


教官「ちゃんと変更できたね。画像が編集できたから次は文章の編集だね」

サラ「はい!!!またご指導お願いします♪」


初めての編集だったのでドキドキでしたが
マッチャン教官からのアドバイスとホームページにある編集の方法を読んで
しっかりと編集ができました♪ 今日はサラのレベルアップな日でした♪

次回は文章の編集♪ がんばります!('∇')ゝ


?第十二回 文章を編集しましょう♪の巻?は、8月2日の予定です。



スポンサードリンク