HIDAZINE

Photoshopなどの画像編集ソフトでつくる

フリーの画像編集ソフト GIMP

http://www.gimp.org/downloads/

web2.0アクアスタイルのボタン画像作成ソフト AquaMaker

http://www.tkb-soft.hmcbest.com/program/win/index.htm

ジェネレーターを活用

ブラウザで単純操作するだけで安定したデザインの画像が手に入る

• http://box.aflat.com/buttonmaker/
• http://www.bannerfans.com/banner_maker.php
• http://www.mycoolbutton.com/
• http://www.web20badges.com/

素材配布サイトから借りる

• http://www.qojop.net/

※素材を拝借する際は利用規約を読み、作者の許可、商用利用の可否などを確認しましょう。

また、素材はダウンロードして自分のサーバに置いてから使うこと。配布元の画像に直オブジェクト埋め込みするのはマナー違反です。

撮った写真を縮小

WEB上で使える画像形式

GIF

透過可。

アイコンやボタン、ドット絵など小さいサイズの画像・色の少ない画像に向いている。

また、動画GIFというカタチでアニメーション効果のある画像もつくることができる。

この例では球の白縁の外側を透過にしている。

JPEG

透過不可。

壁紙や写真など大きいサイズの画像に向いている。

PNG-8

透過可

圧縮率が高い。256色以内の画像に関して、全画像形式で一番ファイルサイズが軽量。

※インターレースpngにするとファイルサイズがあがるので注意。

※携帯ブラウザなどの古い環境では表示・透過されない。

PNG-24

透過可、半透過可（IE6.0以下は透過表示できない）。

※このページではjquery.pngfix.jsを利用してIE6以下でも半透過を実現している。

この例ではx軸方向を不透過から透過に。y軸方向を白から黒にしている。

ドット絵

ドット絵作成専用ツール EDGE

画像変換

軽量PNGに一括変換

AzConvPNG

http://hp.vector.co.jp/authors/VA033749/

WEB上で画像を扱うにはファイルサイズを小さくすることが重要。

表示速度が速くなる、転送量の節約につながる。

AzConvPNGは一括して画像をPNG-8形式に変換してくれるソフト。

圧縮率の比較までしてくれる。

透過画像の作り方

お気に入りアイコンの作り方

WEBブラウザでURLの左やタブの横に表示される32x32サイズのアイコンを作成してする方法です。

投稿した画像をfaviconに変換してくれるWEBサービス

アイコンウィザード

画像ファイルをico形式に変換する

htmlにfavicon.icoを埋め込む方法

HTMLのヘッダに以下のような記述を付け加えて下さい。

<link rel="shortcut icon" href="favicon.ico" />

ショートカットの画像をオリジナルアイコンに変更する方法

1. ショートカットの上で右クリック。[プロパティ]選択。
2. [アイコンの変更]ボタンをクリック。
3. [参照]から作成した.icoファイルを指定する。

複数の画像ファイルをまとめて変換

PhotoShifter

• bmp→jpg
• gif→png
• サムネイル作成
• など様々な画像変換に対応。
• 複数ファイルをまとめて変換できるので便利。
• ※ ***→png-8のような軽量化ツールではない。
• コマンドラインから操作できる

複数の画像ファイルをまとめて縮小

縮小専用。

画像編集

1. Photoshopなどの画像編集ソフトでつくる
2. フリーの画像編集ソフト GIMP
3. web2.0アクアスタイルのボタン画像作成ソフト AquaMaker
4. ジェネレーターを活用
5. 素材配布サイトから借りる
6. 撮った写真を縮小
7. WEB上で使える画像形式
8. GIF
9. JPEG
10. PNG-8
11. PNG-24
12. SVG
13. ドット絵
14. ドット絵作成専用ツール EDGE
15. 画像変換
16. 軽量PNGに一括変換
17. AzConvPNG
18. 動画gifの作り方
19. PhotoshopCSのImageReadyを使用
20. if画像を結合してつくるフリーソフト
21. 透過画像の作り方
22. お気に入りアイコンの作り方
23. アイコンウィザード
24. htmlにfavicon.icoを埋め込む方法
25. ショートカットの画像をオリジナルアイコンに変更する方法
26. 複数の画像ファイルをまとめて変換
27. 複数の画像ファイルをまとめて縮小
28. ▼ サイトマップ