PR

画像書き出し設定のススメ

2008年12月11日(木)
たにぐち まこと

HTML書き出し機能の実用度とDreamweaver

 実は、PhotoshopやFireworksなどのツールには「HTML」自身を作成する機能が備わっています。保存時のダイアログボックスで、「フォーマット」に「HTMLと画像」という設定項目がありました。これを選んで保存すると、画像パーツと共にHTMLが自動生成されて、そのままWebブラウザで表示させることができるようになります。

 画像のalt属性やリンクの設定なども、それぞれプロパティパネルなどで行うことができ、Webページとして機能するようなHTMLを生成することも可能です。

 ただ、残念ながら少なくともCS3の段階では、まだまだ生成されるHTMLの精度は低く、Web標準準拠、HTML+CSSコーディングとは言えないものになってしまいます。非常にレイアウトが簡単なページなどを、いったんこの機能で作り出しておいて、細かな部分をエディタ等で調整して使うといったことであればできるかも知れませんが、きちんとしたWebページを作る時には、やはり初めから手作業でHTMLを制作するのが良いでしょう。

 そんな時に、最もよく使われるツールと言えば、Adobe Dreamweaver(以下、Dreamweaver)です。実は、Dreamweaverには画像形式に関する便利な機能がいくつかあります。

Dreamweaver+Photoshop/Fireworks

 例えば、PhotoshopやFireworks上で画像を作成している時、ある一部分を選択してメニューの「編集 → コピー」、または、Photoshopでレイヤーが入り組んでいる場合は「編集 → 結合部分をコピー」を選びます。この状態で、Dreamweaverのデザインビューで、メニューの「編集 → 貼り付け」を選択してみましょう。

 すると「イメージプレビュー」という画面が表示され、ここで画像形式などを設定することができます。実は、Dreamweaverは貼り付けられる要素が、PhotoshopやFireworksの画像形式だった場合は、自動的に変換ツールを起動して、JPEGやGIFに変換してくれるのです。

 そのまま保存をすれば、画像を保存してDreamweaverに貼り付きます。ちょっとした画像パーツを生成したい時などに、スライスを作ったりするのに比べて非常に素早く作業することができます。

 また、Webページでレイアウトの変更などに伴って画像の大きさを少し小さくしたり、大きくしたりしたいことがよくあります。ここで、HTMLのwidth属性(幅)やheight属性(高さ)で調整することもできますが、HTMLの大きさの指定はあくまでも「見た目」の変更だけで、画像自体の大きさは変わっていません。

 そのため、Webブラウザの性能によっては画質が著しく落ちてしまったり、無駄なデータの送受信が発生してしまいます。やはり、画像ツールであらためてサイズを変更して表示したいところです。

 こんな時もDreamweaverを利用していると非常に便利に作業することができます。まず、デザインビューを使って画像の大きさを変更します。この状態では、先の通り属性を使って大きさを変えているに過ぎません。ここで、プロパティパネルの「リサンプリング」ボタンをクリックしましょう。すると、画像の質がグッと上がることが分かります。

 そのほか、切り抜きや明るさの調整などの簡単な編集も行うことができます。もう少し細かい調整が必要な場合は、「編集」ボタンをクリックするとFireworksが起動して編集することもできます。このように、画像ツールと連携して編集することができます。

 なかなか面倒な画像形式の変換作業ですが、ツールをうまく活用して手間をかけずにより質の高い画像を作れるようにしましょう。

 次回は、今注目を集めるPNG形式について紹介します。

株式会社エイチツーオー・スペース
東京代々木でWeb制作業を営む、デザインユニット。「ちゃんとWeb」というコーポレートテーマで、なんとなくキレイ、なんとなく動いているサイトではない「ちゃんとした」サイト作りを心がける。現在は、「ちゃんとWeb.net」や「aquanotes Shop.」などのサイト運営を通じて、Webの運営担当者に啓蒙中。http://h2o-space.jp

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています