iPod touchをゴニョゴニョして楽しんでいるのですが、スクリーンショットも撮れるようになって俄然モチベーションが上がってきました!!(何の？)。

スクリーンショットの画面だけをそのまま掲載するよりも、iPod touchの中に表示されてる感じがあった方がいいですよね。いろいろ検索してもそういう画像が見つからなかったので、ちょっと描いてみました。これはロック解除のスクリーンショットの裏に描いたiPod touchのイラストを配置した画像です。

やっぱり原寸のピクセルで表示すると素敵ですね〜。ちょっと大きいですけど。

一人で使ってても仕方がないので、Photoshopファイル(レイヤー付き)、ドロップシャドー無しの透過PNG、ドロップシャドー有りの透過PNGをそれぞれ用意しました。ダウンロードして試してみてください。もしあなたのブログで使用した際はコメントで教えてくれるとうれしいです。

iPod touch illustration

ipod_touch_illust.zip (325KB)

追記

Photoshopの画像解像度で画像の再サンプルのチェックを外し、解像度を「160pixel/inch」にすると、実物と同じ大きさで印刷できますよ。

foobarの二人とも、すぐに手に入れたiPod touchですが、やはりiPhoneと比べるとできる事が減っているのでちょっと物足りないですね。それでも十分楽しいんですが(笑)。

メールやGoogle Mapが使えないのはあきらめるとして、せっかく日本語入力が使えるのにNotes(メモ帳)がないのはなんだかなーと思っていたのですが、「連絡先」を使うと疑似的にメモを取ることができます。ウェブサービスを使えば可能だけど、そもそも無線LANが使えるところ少ないからどこでもってわけにはいかないですからね。

Macで準備

メモする前にひとつ準備を。
まずMac側で「アドレスブック」を起動して、「_MEMO」という新規グループを作ります(アンダーバーが入っているのは、リストの一番上に表示させるため)。
後はiTunesでアドレスデータを同期して終わり。

iPod touchで

iPod touchで「連絡先」をクリック、グループから先ほど作った「_MEMO」を選びます。右上に表示される「+」ボタンを押すと、新規連絡先を追加できるのですが、連絡先の代わりにメモを書いていきます。たとえば姓にMEMO、名にタイトルを入力。新規電話を追加などを無視し、「フィールドを追加」から一番下の「メモ」を選んで、そこに文章を書き込んでいきます。「日付」も使うといいかも。

そのままメールでどこかに送ったりできないのが難点ですが、iTunesで同期し直せば、「アドレスブック」からコピーできます。一時的な裏技になるかもしれませんが、iPod touchを手に入れた方は一度お試しを。日本語入力の練習(?)にもってこいです。

ハンドルを掴んだ状態でSpaceバーを押すと、ハンドルの元になるアンカーポイントを移動させることができます。
トレース作業のときに役に立ちます。ただ、IllustratorCS2だと、グリグリ動かしすぎるとオブジェクトが変な形になってしまいます。

デザイナーさんの中には、Excelを毛嫌いする方も多いかもしれません….
という前提で、Excelには作図や表計算以外にも「オートフィル」という便利な機能があります。

オートフィル機能を使えば、連なったテキストを簡単に用意することができます。

例えば、数字を1から100まで用意したい場合、最初のセルに「1」を、次のセルに「2」も入力しておきます。入力した2つのセルを選択します。選択した2つのセルの右下部分にカーソルを持っていくとカーソルが「＋」に変ります。そのまま100セル目までズリィ〜っとドラッグすると、ドラッグしたところまでの数値を自動的に補完してくれます。

セルの書式設定を「文字列」に設定しておけば、「001」みたいな頭にゼロのつく数字も扱えるようになります。
数字以外にも、月名や曜日なんかも自動で入力してくれるので、カレンダーを作るときに便利だったりします。

ボクの場合、ウェブサイトに画像を大量に貼り付けるとき、このオートフィル機能を使うことが多いです。

Illustratorのグラデーション方向を変える場合、「角度」を180°にすれば逆方向にすることができます。ですが、いちいち数値をキーボードで入力するのが面倒なときがあります。
そんなとき、マウスとOptionキーを使って簡単に反転することができます。

反転させたい鉛筆マークをつかみます。つかんだままOptionキーを押しながら、もう一つの鉛筆マークの上までドラッグすると、グラデーションが反対になります。（細かく言うと、色が入れ替わるっていう感覚だと思います。）

複数色のグラデーションの場合は、ドラッグ開始の鉛筆マーク色 → 重なり合わせた鉛筆マーク色 を入れ替えることができます。

傾いてしまっている写真を水平にしたいとき、Photoshopのものさしツールを使うと簡単に修正することができます。

まず、基準となりそうな水平な部分を探し、「ものさしツール」でドラッグします。

その状態で、「イメージ」→「カンバスの回転」→「角度入力…」を選択すると、水平にするための角度が自動的に入力されています。

んで、OK。

Illustratorのカラーパレットには、マウスを併用する便利ショートカットがあります。カラーパレットの左上にあるプルダウンからいちいち選択しなくて済むので重宝します。

アクティブになっているカラーを補色に変換

• スペクトル部分を
• Command + Click

「塗り」または「線」のアクティブになっている方のカラーを「補色」に変換してくれます。

非アクティブになっているカラーをスペクトルから選択

• スペクトル部分を
• Option + Click

「塗り」または「線」の非アクティブになっている方のカラーをスペクトルから選択してくれます。

非アクティブになっているカラーを補色に変換

• スペクトル部分を
• Command + Option + Click

「塗り」または「線」の非アクティブになっている方のカラーを「補色」に変換してくれます。

カラーパレットの表示モードを変更

• スペクトル部分を
• Shift + Click

カラーパレットの表示モードを、「RGBモード」→「HSBモード」→「CMYKモード」→「Web セーフ RGBモード」→「グレースケールモード」→「RGBモード」….　という順番でループしながら変更してくれます。

明度と彩度の比率を保ちながら変更

• スライダーを
• Shift + Drag

カラーパレットの表示モードが「HSBモード」と「グレースケールモード」以外のとき、明度と彩度の比率を保ったまま色を変更することができます。（この説明で合っているのか自信なし。）

個人的に「カラーパレットの表示モードを変更」を頻繁に使用しています。Illustrator 10の頃は「Web セーフ RGBモード」→「グレースケールモード」→「RGBモード」と変更した際、「グレースケール」のときに彩度を失ってしまったのですが、Illustrator CSあたりから、一度「グレースケール」を通過しても彩度を維持してくれるようになりました。

スクロールホイールを使って、PhotoshopとIllustratorのカンバス/ドキュメントを横スクロールさせる方法です。
チルト機能が搭載されたマウスであれば、左右にスクロールさせることができますが、チルト機能が無い！という方には重宝する機能です。

• 左にスクロール

  Command + Scroll Up

• 右にスクロール

  Command + Scroll Down

こんだけです….
左手の親指が常にCommandキーの上に置いてあるような方でしたら、すぐに慣れると思います。
ボクはチルト機能つきマウスを使っていますが、横スクロールの場合は上記の機能を使い、左右チルトには別のショートカットを割り当ててあります。

ついでにShiftキーを使うと、ページ（または表示）単位で一気にスクロールさせることもできます。

• ページ/表示単位で上にスクロール

  Shift + Scroll Up

• ページ/表示単位で下にスクロール

  Shift + Scroll Down

• ページ/表示単位で左にスクロール

  Command + Shift + Scroll Up

• ページ/表示単位で右にスクロール

  Command + Shift + Scroll Down

ちなみに、Photoshopの環境設定で「スクロールホイールでズーム」にチェックを入れている場合、この機能は使えません。あたりまえか。

追記：

またまた書き忘れました….

Optionキーを使うと、ズームイン/ズームアウトさせることもできます。

• ズームイン

  Option + Scroll Up

• ズームアウト

  Option + Scroll Down

ただし、Photoshopでこれを使うと、拡大/縮小比率が微妙な数値（161.6%とか）になってしまうので、ちと不便です。

最後に、今回は手持ちのCS2とCS3で動作確認しましたが、これら以前のバージョンでは違うショートカットかもしれないでお気を付けてください。
もし他のバージョンをお持ちで検証していただけるステキな方がいましたら、結果をこの投稿にまとめてアップしますので、教えていただけるとうれしいです。

PhotoshopとIllustratorでガイドを引くときのちょっとした便利な方法です。
基本的な使い方は誰でも知ってると思うので省略します。

普通、垂直方向のガイドラインを引くときは左側の定規から、水平方向の場合は上側の定規からガイドを引っ張ってきます。
この使い方でも別に問題は無いのですが、サイズの大きい書類の右（または下）あたりにガイドを引くとき、いちいち左（または上）の定規からドラッグするのが億劫になるときがります。

こんなときは、Optionキーが活躍します。

• カンバス/ドキュメントの上側にある定規から垂直方向のガイドラインを引く

  上側の定規から

  Option + Drag

• カンバス/ドキュメントの左部にある定規から水平方向のガイドラインを引く

  左側の定規から

  Option + Drag

地味な機能ですが、結構重宝するんですよね。
ちなみに、Optionキーを離せば、元方向のガイドに戻ります。

ついでですが、
Shiftキーを使うと、一定間隔でスナップしてくれます。

Photoshopのカンバスの表示比率が

• 25%, 33.3% の場合、20px毎にスナップ
• 50%, 66.7% の場合、10px毎にスナップ
• 100%, 200% の場合、5px毎にスナップ
• 300%, 400% の場合、3px毎にスナップ
• 500% 以上の場合、1px毎にスナップ

Illustratorのドキュメントの表示比率が

• 25%, 33.3% の場合、36px毎にスナップ
• 50%, 66.7% の場合、12px毎にスナップ
• 100%, 150%, 200%, 300% の場合、6px毎にスナップ
• 400%, 600% の場合、2px毎にスナップ
• 800% 以上の場合、1px毎にスナップ

といった具合です。

ウェブの作業をしているとピクセル単位で編集しなければならないので、この機能もかなり活躍します。

同じCS3でも、FlashやFireworksではこの（OptionやShiftを併用する）ガイド機能は使えないようです。旧Macromedia製品のガイドの扱いがどうも好きになれないので、はやいところ統一して欲しいもんです。

こんな事を気にする人は、他にいないような気がしますが….
Illustratorのアンチエイリアス処理が微妙でして、変な描画するので困っております。

何かを描くときに区切りのイイ数値じゃないと気持ち悪くなる質（たち）でして、その面倒くさい性質がIllustratorで遺憾なく発揮されます。
例えば、X:300, Y:250, W:500, H:600 といった具合に整数で（できることなら5の倍数で）作りたくなってしまいます。

線のアンチエイリアス

幅と高さが50pt、塗りが白、線が黒、線幅1pt の正方形を描いた場合、スクリーン上では、幅2pxのグレー線で描画されます。

アウトラインデータの内側と外側それぞれに線幅の半分の数値（この場合、外側に0.5pt、内側に0.5pt）が描画されるのでしょうがないとは思います。Illustrator CSあたりに追加された「線の位置:」という機能がありまして、「アウトラインデータの内側/外側に1ptの線を描く」といったナイスな指定ができるようになりました。

ですが、「線を内側に揃える」または「線を外側に揃える」をしても、微妙にアンチエリアスがかかってしまいます。
理論的には「アウトラインデータの内側/外側に1ptの線を描く」ので、アンチエイリアスがかかることは無いハズなんですが….

そこで、アンチエイリアスをかけずに、キレイでクッキリした線を描く方法をまとめてみました。ああマイノリティ。
ちなみに、今回の「線のアンチエイリアス」は線幅が奇数値（1pt, 3pt, 5pt…..）の場合のみ発生します。

X軸とY軸を0.5ptずらす

環境設定で「キー入力」の数値を0.5ptにしておけば、矢印キーを上or下、右or左と1回づつ押すだけで簡単にクッキリ線になります。
ただ、オブジェクトの幅と高さの数値が50ptに指定してあるのに、スクリーン上では51px × 51pxの正方形になってしまい気持ち悪いです。

基準点を中央に設定し、オブジェクトの幅と高さををそれぞれ1ptづつ縮める

スクリーン上では50px × 50pxの正方形になりますが、数値が49ptになってしまい気持ち悪いです。
いちいち変形パレットで数値を入力しなきゃいけないので面倒です。

アピアランスの塗りと線を入れ替えて、線幅を倍にする

線の上に塗りを持ってくることによって隠れた線部分を、線幅で補います。
比較的楽にできる方法ですが、スクリーン上では52px × 52pxの正方形になってしまい気持ち悪いです。

線を使わずに、塗りを2つ重ねる

新規塗りを用意し、下の塗りを黒、上の塗り白にし更に「効果」→「パス」→「パスのオフセット…」でオフセットする数値を「-1」と指定します。この「-1」が線幅にあたる数値です。
これだと、スクリーン上でも数値的にも50px × 50pxの正方形になるのでスッキリしますし、線幅を変えたいときは、オフセットさせる数値をアピアランスパレットから変更すればイイだけなので簡単です。
頻繁に使う数値がある場合、グラフィックスタイルパレットに登録しておけば楽に適応させることができます。

角丸のアンチエイリアス

角丸オブジェクトを描くときに、フィルタや効果で「角を丸くする」を使用することが多々あるのですが、これらのアンチエイリアスの処理も変です。

試しに角丸1pt〜21ptまでの黒ボックスを用意してみましたが、

角丸が3pt, 7pt ,13pt, 14ptのとき、ボックスの下にうっすらアンチエイリアスがかかってしまいます。また、3pt, 7pt ,12pt, 13pt, 14pt, 21ptのときは右上に、6ptのときは左下に薄いドットが描画されてしまいます。

これといった対処法は今のところ見つかっていないです….

テキストのアンチエイリアス

テキストのアンチエイリアスも汚すぎます。
そこで、どの表示が一番キレイなのか（といっても個人的な好みですが）いくつかスクリーンショットを撮ってみました

テキストそのまま

テキストを入力したままの状態だと、文字のベースラインがガタガタにズレて見えてしまったり、込み入った文字がツブれてしまいます。フォントサイズが小さければ小さいほど目立ちます。

アウトライン化

若干太りますが、ベースラインは比較的キレイに揃ってる感じがします。アウトライン化した時点で、「テキスト」ではなくなってしまい、編集ができなくなってしまうので意味ないですね。

Photoshopにコピペ

若干痩せます。これもベースラインはまともな感じがしますが…. 画像じゃん。

ラスタライズ / 文字に最適

テキストそのままのときと同じようです。意味なし。

ラスタライズ / アートに最適

Photoshopにコピペと似たような感じになりました。文字が痩せるのはフォントをウェイトで対処すればいいし、ショートカットを割り当てておけば比較的簡単に使えます。

効果 / パスのアウトライン

単なるアウトライン化と同じようです。これもショートカットを割り当てておけば簡単そう。

ということで、最近は 効果 / パスのアウトライン で落ち着いています。

全体的に、Illustrator10以降のアンチエイリアス処理が汚いように思えます。Illustrator9時代が一番キレイでした。
新機能をゴリゴリ搭載するのも構いませんが、こういった小さいところも（個人的に全然小さくないんですが）改善していただけるとありがたいです。Adobeさま。