« HTML5 で ほんわか切替 キャプション付きスライドショウ | Main | Windows8.1 64bit に Ruby on Rails を Install »

03/04/2015

PhotoshopCCでfaviconを作り、htmlに書き込み表示させる

Photoshop CCを開き、
新規⇒幅32px、高さ32px1、解像度72px/in でキャンバスを設定。

次に、
編集⇒環境設定⇒ガイド・グリッド・スライスとだどって、
グリッドのカラーを、「ライトグレー」、スタイルを「実線」、グリッド線を 1px、分割数を32にして、 OKする。

表示⇒画面サイズに合わせるで、キャンバスを大きく表示して、
鉛筆ツールにして、直径を1px、ピクセル数を変更する小窓の下▼をクリックして、歯車のアイコンをクリックする。
⇒下の方に「四角形のブラシ」というのがあるので、クリックして「追加を選択する」。
また、鉛筆のサイズを変更する窓の右側の下▼をクリックして、四角で1pxのブラシに変更する。

スポイトで鉛筆の色を選択し、鉛筆でキャンバス上を描いて行くと、アイコンの絵が出来上がる。

出来上がったら、一旦作業を終了してファイルは、通常のファイル形式で保存しておく。

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の保存とhtmlへの記載》
①Phooshop CCを起動し、ファイル⇒「最近使用したファイルを開く」の中から、先ほど保存したファイルを選択する。
②ファイル⇒別名で保存⇒ファイルの種類の右側の▽をクリックして、ICO(Windows Icon)を選択する。
③適当なファイル名を付けて、html Webファイルの中で画像を扱うデータの中に保存する。
④htmlファイルの書き方は、<head>~</head>の中に書く。

 僕のフォルダ構成は、下記のようになっているので・・・
  index.html
  ├img (画像データのフォルダ)
         ├favicon-new.ico

必ず、<head>~</head>の中に、
  <link rel="icon" type="image/vnd.microsoft.icon" href="./img/favicon-new.ico">

と記載すると、faviconが表示される。
このhtmlへの書き込み時、変更する部分は、hrefの””この中の画像が格納されている場所と名前だけで、その他の部分は書き換えてはいけない。

« HTML5 で ほんわか切替 キャプション付きスライドショウ | Main | Windows8.1 64bit に Ruby on Rails を Install »

PC and PC troubles」カテゴリの記事

Comments

Post a comment

Comments are moderated, and will not appear on this weblog until the author has approved them.

(Not displayed with comment.)

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 »

June 2017
Sun Mon Tue Wed Thu Fri Sat
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30  

Recent Trackbacks

無料ブログはココログ