フォトショップユーザを対象にしたコミュニティ Photoshop world

＜コピー&ペーストでDreamweaverに画像を配置する！＞

次に、デザイン上の一部を画像として書き出してhtmlに配置する方法をご紹介します。かなり簡単な方法でびっくりするのですが、CS3ではコピー＆ペーストで画像を配置する事ができるようになりました！

1.　解説用にサンプルPSDを用意してみました。PSDには、Photoshop Worldのロゴ、意味はありませんが金太郎、その右には文章が書かれています。先ほどの配置手法ははロゴの部分が独立したPSDとして制作されていた場合に有効ですが、このように1ページのデザインとして完成されたPSDを制作する方が自然な流れだと言えます。

2.　まずは書き出したい部分をクリップボードにコピーします。「選択範囲」ツールでコピーしたい範囲を選択し、メニューの「編集」→「結合部分をコピー」を選択します。「結合部分をコピー」ですと、選択範囲の中が複数レイヤーにまたがっていても結合してクリップボードにコピーされますので便利です。後述しますが、画像を編集する際の事を考慮すると、書き出す画像に合わせて「ガイド」を引き、いつも同じ選択範囲がとれるようにしておくのが賢明です。

3.　次にDreamweaverでペーストしたい位置にカーソルを合わせてメニューの「編集」→「ペースト」を選択します。すると先ほどご紹介した手順と同じく「イメージプレビュー」ダイアログが表示されます。ここで画像の書き出しファイル形式と圧縮率などの設定を行いOKを選択します。