PhotoshopCCでfaviconを作り、htmlに書き込み表示させる
Photoshop CCを開き、
新規⇒幅32px、高さ32px1、解像度72px/in でキャンバスを設定。
次に、
編集⇒環境設定⇒ガイド・グリッド・スライスとだどって、
グリッドのカラーを、「ライトグレー」、スタイルを「実線」、グリッド線を 1px、分割数を32にして、 OKする。
表示⇒画面サイズに合わせるで、キャンバスを大きく表示して、
鉛筆ツールにして、直径を１px、ピクセル数を変更する小窓の下▼をクリックして、歯車のアイコンをクリックする。
⇒下の方に「四角形のブラシ」というのがあるので、クリックして「追加を選択する」。
また、鉛筆のサイズを変更する窓の右側の下▼をクリックして、四角で１pxのブラシに変更する。
スポイトで鉛筆の色を選択し、鉛筆でキャンバス上を描いて行くと、アイコンの絵が出来上がる。
出来上がったら、一旦作業を終了してファイルは、通常のファイル形式で保存しておく。
fabiconとしてファイルを「.ico」で保存する必要があるが、オリジナルのPhotoshopでは、「.ico」で保存することはできないので、次のURLからプラグインをダウンロードする。
ダウンロード先
http://www.telegraphics.com.au/sw/icoformat.ja.html
僕のPCはWindows64bit版なのでそれに適したものを選んで、ダウンロードした。
(ICOFormat-1.93b1-win64.zip)
このzipファイルを解凍して、中にある「ICOFormat64.8bi」（64bit版の場合のファイル）を Photoshop CCの次の場所に格納する。
《格納場所》
C:\Program Files\Adobe\Adobe Photoshop CC 2014\Required\Plug-Ins\File Formats
もし、Photoshop CCが起動している場合には、一旦終了してから、Photoshopを再度起動させる。そうしないと、フォルダに入れた「ICOFormat64.8bi」が反映されない。
《Iconの保存とｈｔｍｌへの記載》
①Phooshop CCを起動し、ファイル⇒「最近使用したファイルを開く」の中から、先ほど保存したファイルを選択する。
②ファイル⇒別名で保存⇒ファイルの種類の右側の▽をクリックして、ICO（Windows Icon）を選択する。
③適当なファイル名を付けて、ｈｔｍｌ Webファイルの中で画像を扱うデータの中に保存する。
④ｈｔｍｌファイルの書き方は、<head>～</head>の中に書く。
僕のフォルダ構成は、下記のようになっているので・・・
index.html
├img （画像データのフォルダ）
├favicon-new.ico
必ず、<head>～</head>の中に、
<link rel="icon" type="image/vnd.microsoft.icon" href="./img/favicon-new.ico">
と記載すると、faviconが表示される。
このｈｔｍｌへの書き込み時、変更する部分は、hrefの””この中の画像が格納されている場所と名前だけで、その他の部分は書き換えてはいけない。
« HTML5 で ほんわか切替 キャプション付きスライドショウ | Main | Windows8.1 64bit に Ruby on Rails を Install »
「PC and PC troubles」カテゴリの記事
- NodeMCU1.0 or ESP32 Dev Module を使って 8x8 dotmatrix LEDでデジタル時計をつくる(2020.05.21)
- ガラ携Docomo のメールを PCで読む(2019.09.28)
- Linux Mint 19.1 に Virus 対応ソフト ClamAV を Install(2019.05.09)
The comments to this entry are closed.
« HTML5 で ほんわか切替 キャプション付きスライドショウ | Main | Windows8.1 64bit に Ruby on Rails を Install »
Comments