Web Tips：画像/パーツ制作

FireworksでCSSスプライトを作成しページに実装する方法

CSSスプライトは複数の画像を１枚にまとめ、HTTPリクエスト数やファイルサイズを削減する手法です。Webサイトのパフォーマンス向上に役立つCSSスプライトを Adobe Fireworks で作成し、ページに実装する方法を解説します。

Webページにダミー画像を表示する「place IMG」の使い方

Web制作途中では、ページに表示する写真や画像がまだ決まっていない場合もあります。そのようなときはダミー画像を用意し仮で表示しますが、「place IMG」はURLを指定するだけでダミー画像を表示するサービスを提供している便利なサイトです。

自作のアイコンフォントを「IcoMoon App」で作成する

アイコンフォント作成サイト「IcoMoon App」では、自分で作成したカスタムアイコンをフォントファイルにすることができます。自作アイコンをフォントファイルにしてWebページに表示するまでの具体的な手順について解説します。

アイコンフォントの具体的な使い方 - IcoMoon App

アイコンフォントを利用する上で便利なサイト「IcoMoon App」でフォントファイルを作成し、ダウンロードしたフォントファイルからWebページにアイコンを表示するまでの具体的な手順について解説します。

アイコンフォントの具体的な使い方 - Fontello

アイコンフォントを利用する上で便利なサイト「Fontello - icon font generator」でフォントファイルを作成し、ダウンロードしたフォントファイルからWebページにアイコンを表示するまでの具体的な手順について解説します。

アイコンフォントの具体的な使い方 - Font Awesome

アイコンフォントを利用する上で便利なサイト「Font Awesome」から、フォントファイルをダウンロードしてWebページに表示するまでの具体的な手順について解説します。

アイコンフォントの具体的な使い方 - Genericons

アイコンフォントを利用する上で便利なサイト「Genericons」から、フォントファイルをダウンロードしてWebページに表示するまでの具体的な手順について解説します。

アイコンフォントの具体的な使い方 - ZURB University

アイコンフォントを利用する上で便利なサイト「ZURB University」から、フォントファイルをダウンロードしてWebページに表示するまでの具体的な手順について解説します。

アイコンフォントの基本的な使い方

アイコンを含んだWebフォント(アイコンフォント)を利用すると、画像を使わずにアイコンをWebページに表示することができます。フォントファイルをGPLやMITライセンスで提供しているサイトもたくさんあり、現在では簡単に利用できるようになっています。

Fireworks CS6でCSS3グラデーションボタンを作成する

Fireworks CS6では、作成したボタンのCSS3コードを自動で出力することができます。この機能により、グラデーションボタンも画像を使わず、CSSとテキストだけで簡単に表示することができます。

Adobe Illustratorでのスライス作成方法

Adobe IllustratorをWebデザインに使用するのを敬遠する人も多いみたいです。
特にスライスはピクセルがずれて作成されることもあり嫌がる人もいます。
しかしWeb用の設定にすればIllustratorでも問題なくスライスを作成することができます。

Adobe Photoshopでのスライス作成方法

Adobe PhotoshopをWeb制作における画像の編集・加工に使用している人も多いと思います。Photoshopにおけるスライスの作成方法を解説します。

Adobe Fireworksでのスライス作成方法

Webページに画像を組み込むには、画像編集ソフトで制作したデザインからそれぞれの画像をパーツとして切り出さなければなりません。その切り出すエリアのことを「スライス」と呼びますが、Adobe Fireworksにおけるスライスの基本的な作成方法を解説します。

PNGファイルのサイズを圧縮し最適化するツール

ホームページに使う主な画像ファイル形式は、JPG、GIF、PNGです。いずれも圧縮してファイルサイズを小さくしていますが、画像処理ソフトで普通に保存しただけでは不十分な場合があります。PNGファイルのサイズを小さくし最適化を施すツールを紹介します。

eBookやDVDなどの3Dカバーを作成する方法

eBook、DVD、ソフトウェアなどの商品紹介ページでは、商品イメージとして3Dカバーを表示すると魅力的に見えます。そのような3Dカバーはツールを使うと簡単に作成できますので、その方法をいくつか紹介します。