PhotoshopやIllustratorで作業をしていて、いつも悩まされるのがフォントの選択。パレットやメニューからでは、どんなデザインなのかいまひとつわかりづらいのだ。とりあえず選んで表示させてみて、いやイメージが違うといったことの繰り返し。結局、お決まりのフォントしか選べずにいる。
フォントのデザインがわかりやすい一覧みたいなものはないかとつねづね思っていたら、こんないいサイトがあった。これは自分のマシンにインストールされているフォントを一覧表示してくれ、しかも入力したテキストをその場でプレビュー表示してくれもする。そう、こういうのが欲しかったのだ。いままで知らなかったのが悔やまれるくらいこいつはいい。
参考：
http://illure-to-photosho.seesaa.net/article/138323623.html
複数の背景画像を1つにまとめ、必要な領域の表示させる手法。画像の表示速度が高速化する。
Sprite画像の作成にはGeneratorを利用すると簡単。
参考：
http://onlinepckan.digiweb.jp/webtechnique/csstechnique.html
http://ozpa-h4.com/2013/01/17/css-sprite-machine/
自分は画像作成にもっぱらIllustratorを使っていて、Photoshopはあまり使わないもんだから操作方法をすぐに忘れる。
Illustratorの感覚でやろうとすると「なんでできないんだ」ってことが多いので、ここにメモを残しておく。
Illustratorでデザインをしていて悩ましいのが、文字のくっきり具合。小さいバナーなどは、文字がにじんでどうしても見難くなってしまう。
そんなとき、フォントなどにも左右されるが、「効果」→「ラスタライズ」をかけると文字がドットで表現され、見やすくなる場合がある。
設定したラスタライズは、アピアランスパネルから削除することができる。
パターンに透過処理を施すため、塗りなし、線なしの枠となる四角形を背面に配置。←ここがポイント
その上にパターン用の画像を作成する。
両方を選択し、「編集」→「パターン設定」で登録する。
登録したパターンに手を加えるときは、スウォッチパネルから画面上にドラッグする。グループ化されているので、グループ解除してから色などを変えて、再度登録。
参考：
http://comd.jp/blog/?p=1000
ちなみに、Photoshopのスウォッチにはパターンを登録できない。
パターンはプリセットマネージャーに登録されており、登録方法もIllustratorとちょっと違う。
Photoshopでスウォッチに色を登録するには、まず追加したい色を描画色に設定し、次いでスウォッチパネルの空いているところをクリックする。
スウォッチへのカラーの登録はドキュメント単位で行われるので、他のIllustratorドキュメントには反映されない。
スウォッチを自作して目的別にライブラリを作ったり、他のドキュメントでも使いたい場合は、スウォッチライブラリとして保存する必要がある。
スウォッチパネルの左下にあるスウォッチライブラリメニューから、
「スウォッチを保存」→スウォッチフォルダにaiファイルとして保存する。
呼び出すときは、同メニューの「ユーザー定義」。
つねに新規ドキュメントにデフォルトの状態で読み込ませたい場合は、以下の場所にあるファイルを開いて、そこにスウォッチを登録、上書き保存する。
C:\Documents and Settings\******\Application Data\Adobe\Adobe Illustrator CS5.1 Settings\ja_JP\New Document Profiles
プリント.ai
スウォッチのフリー素材ダウンロード：
使いやすいIllustratorのカラースウォッチ
ナビゲーションボタンやバナーなどでよく見かける白い斜めのストライプの入ったデザイン。自分はもっぱらIllustratorを使っているのだが、これをIllustratorでやろうとすると簡単そうで意外とうまくいかない。どういうことかというと、Illustratorでは画像をWeb用に保存するとき、ラスタライズがかかり、アンチエイリアスが適用されて線がにじんだ感じになってしまう。平行線や垂直線ならいいのだが、斜め45度線を引くとどうにもきれいに仕上がらない。
「環境設定」の「一般」の「アートワークのアンチエイリアス」のチェックを外したり、「Web用に保存」の「画像サイズ」タブの「変更後のファイルサイズ」をデフォルトの「アートに最適」から「なし」にしたりと、いろいろ試してみるが、どうしても線の太さが均一になってくれないのだ。
で、あれこれ悩んだ末に、以下の記事を見つけた。なんだ、Photoshopでやればいいんじゃない。下地となる部分だけをPhotoshopで作ってIllustratorに持ってきてもよさそうだし。なあーんだ、皆さんこうやってるのねー。
http://bushi18.weblike.jp/webdelivery2009/shasen.html
メモ：
・レイヤーパレットからレイヤースタイルを追加→パターンオーバーレイ
・編集→塗りつぶしからパターンを選んでもよい
・不透明度を50くらいに落とすと色がなじむ
・パターンの名前を変えたり削除するときは
編集→プリセットマネージャー→パターン
参考：
http://help.adobe.com/ja_JP/Illustrator/14.0/WS714a382cdf7d304e7e07d0100196cbc5f-63d6a.html
補足：font-familyの指定で、半角スペース（空白）を含むフォント名は、「"」または「'」で囲む。←なんだ、そういう法則性だったのか...知らなかった（恥ずかし）！
長方形を角丸にするとき上記のどちらの方法もアピアランスがかかってしまい、パスファインダを使って分割しようとすると下図の上のようになってしまう。
最初から角丸長方形ツールでを描いた場合は、アピアランスに余計な情報は入らないので下のように分割できる（下図の下）。
この違いがわからず一日悩んでしまった。じゃあ、アピアランスを使わずにあとから長方形を角丸に変えるにはどうしたらいいんだろう？調べたら、次のような方法があることがわかった。
「選択ツール」で長方形を選択→「角丸長方形ツール」をクリック→Altを押したまま「すでに描かれている長方形」の中心をクリック→ダイアログから幅、高さ、半径を指定してOK。
ヘッダ部に
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.lightpop.js"></script>
この順に書かないとlightpopがエラーになる。
しかしこの順だと、HTML4.01標準モードではbodyに指定したbackgroundの画像がIE6において表示されなくなる。互換モードであればなぜか表示されるのだが...。
製作中のページになぜかIE6では背景画像が表示されていないことに気づき、その原因であるこのことが判明するまで数日。でも解決策がわからない...（泣）。
と思ったら、順番はこれでもbackground画像は表示されることが判明。問題はこの次にもう一行script typeを記述すると上記の症状になる。もうなんだかわからん。
