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」カテゴリの記事
- Processing 3.3.4 のインストール(2017.06.11)
- 肩を温める USB電源(5V)を使った自作ヒーター(2017.05.27)
- Deek-RobotのData logging shield V1.0を使ってArduino Spyカメラ(2017.04.28)
- VC0706 で撮影し SDカード に記録する Arduino camera(2017.04.09)
- PIRで検知しVC0706で撮影、Ethernet ShieldのmicroSDに記録(2017.04.22)
TrackBack
TrackBack URL for this entry:
http://app.cocolog-nifty.com/t/trackback/540128/61230451
Listed below are links to weblogs that reference PhotoshopCCでfaviconを作り、htmlに書き込み表示させる:
« HTML5 で ほんわか切替 キャプション付きスライドショウ | Main | Windows8.1 64bit に Ruby on Rails を Install »
Comments