ペンタブレットエラーの原因（MacOSX_10.8編）

MacOSX（10.8）通称マウンテンライオン（MT_Lion）を飼い始めてはや2週間。

秋葉原ですぐにメモリーを購入し16GBで満腹にしてあげた。
アプリケーションの立ち上がりの速さは超うれしい。

しかし今まで一緒にチームを組んでいた周辺機器たちと仲良くなれるかが心配だ。
さっそくwacom製のBanbooペンタブレットと一緒にしてあげたらトラブルが起きた。
雪豹まですごく快適だったタブレットが変なアクションを起こすのだ。
ペンを近づけてタッチすると、黄色地のノート画面風になり勝手に黒インクで描き始めるのだ。



ぐーぐる先生に聞いてみたが、似たようなエラーを教えてくれない。
wacomサイトの「ご購入後によくある質問」で似たような症状例を見つけたが…
http://tablet.wacom.co.jp/support/faq/after/det.php?id=1163&prod_c=2&kwd_txt=

Q1163の改善策
http://tablet.wacom.co.jp/support/faq/after/det.php?id=1221
を試すが、効果なし。

ところが偶然、テキストエディタを開いていると
ペンの動きに同調して、勝手にアルファベットを入力してしまう。




新たなエラーかぁっ？
と、思った瞬間。
そういえばライオンシリーズから、タブレット支援で文字認識機能がどうちゃらとか、
定期購読のMacFanで読んだような…。

システム環境設定にある「Ink」。



これが原因でした。
ここを「off」にしたら、アメリカのオフィスで使うような
黄色いノート地は出なくなりました。



あと一歩で、wacomさんの問合せフォームの「送信」を
ポチッとな、するところでした。

MTライオンくんのせいにするところでした。
やっぱり君は優秀なMacOSだったんだね。
いつの時代も、やっぱりMacが「いいね！」

I'll be in touch.

iOSアイコンをホーム画面に登録しよう！

前回作成した「iOS風アイコン」を実際にiPhoneなどの画面に登録！
使用アプリケーションはPhotoshopのみ。
前回作成したファイルで簡単に登録設定ができます。



前回作成のPhotoshopレイヤーファイルを用意します。
デザイン制作した「角丸」の枠を不可視にします。
新たに「STUDIO HERMIT」とお好きな書体で記述します。
あまり細い文字でないほうがよいでしょう。



次に画像をアイコン用のサイズに調整します。
画像解像度、サイズは114pix正方形に調整します。
できたら「WEB用に保存…」で保存します。
現在のiOSデバイスは表示解像度がよいので、
JPEGやGIFではなく「PNG」ファイル形式で保存します。



自分のWEBサイトのトップページのソースを開きます。
＜TITLE＞の直前にアイコンを呼び出すタグを記述します。
記述するタグは、
＜link rel="apple-touch-icon-precomposed" href="アイコン画像ファイルを置いたルートパス" /＞

「アイコン画像ファイルを置いたルートパス」の記述参考例。
トップ階層／以下に「img」フォルダを作り、その中に「icon.png」というファイルを置いた場合、
＜link rel="apple-touch-icon-precomposed" href="img/icon.png" /＞
となります。



iPhoneなどで、自分のWEBサイトを開きます。



トップページを開いたらブックマーク記録ボタンをタップします。
「ホーム画面に追加」をタップします。
この時にアイコン下のアイコン名を短いコピーに調整します。
ホーム画面の各アイコンに表示できる文字数に限りがあるからです。



ホーム画面のお好きな位置に設定して、完成っ！
アイコンの「角丸」加工はiOSデバイスが自動で作成します。

Apple製品のカスタマイズ性は、今なお健在ですね！

I'll be in touch.

iOS風アイコン簡単作成！

今回はPhotoshopで「iOS風アイコン」を簡単作成に挑戦！
使用アプリケーションはPhotoshopCS2の画面にて説明します。
最初に新規ファイル作成にて、
サイズ600×600pix、72dpi、RGBカラーを準備しましょう。


ツールメニューのパスオブジェクトから、「角丸長方形ツール」を選択。
丸みの設定は60pxで正方形を作成します。
（Shiftキーを押しながらドラッグします）


パスウィンドウを開きます。
角丸正方形のパスで選択範囲を作成します。



レイヤーウィンドウに戻ります。
ツールメニューの塗りつぶしツール（バケツアイコン）で
カラーを白にして選択範囲を塗りつぶします。
（レイヤー名は「back」としました）



選択範囲をアクティブ状態のまま、新規レイヤー「waku」を作成します。
そのレイヤーにアイコンの枠のラインを作成します。
「編集」メニューより「境界線を描く…」をクリック。



境界線の指定は幅を20pix、カラーは適当に青にしました。
（カラーは後で変更しますので、わかりやすい色にしておく）
位置のチェックボックスは「内側」とします。



「waku」レイヤーにラインが描けたら、
「レイヤー」→「レイヤースタイル」→
「グラデーションオーバーレイ…」をクリックします。



メタリック調のグラデーション設定をします。
上から光が照射されることをイメージします。



さらに「ベベルとエンボス」設定で枠に立体感を施します。
「ベベル外側」として、画像のように設定します。



お気に入りのアイコンデザインとなる素材を用意して、
新しいレイヤー「spade」を作ります。



「back」レイヤーの白い背景に着色します。
単色でもよいのですが、ここではグラデーションにします。
「レイヤー」→「レイヤースタイル」→
「グラデーションオーバーレイ…」をクリックします。
後で光の反射が加わるので、上を濃い色にします。



iOS風の特徴である、立体感のある光の反射を作成します。
「hansha」という新規レイヤーを作成しておきます。
次にパスウィンドウで新規パスを作成します。
画像のように、ペンツールでパスを作成します。



角丸正方形を作成した同じ手順で
「hansha」レイヤーに白を塗りつぶします。
レイヤーの上下関係に注意します。
外枠ライン、光の反射、デザインオブジェクト、背景の順です。



「hansha」レイヤーの「レイヤーマスクを追加」をクリックします。
ツールメニューのグラデーションを選択、
白黒のグラデーションにします。
下から上にグラデーション設定で反射の光を半透明にします。
気に入るまで何度か設定してみてください。



最後に仕上げとして、枠部分にさらに立体感とメタリック感を加えます。
「waku」レイヤーの「レイヤースタイル」に「光彩（内側）」を加えます。



iPhoneにはめ込み合成してみます。
枠無しのアイコンでもよいでしょう。



完成がこれっ！
ホームページやブログのアイコンバナーにしても楽しいですね。

やはりPhotoshopは魔法のツール！

I'll be in touch.

フォトショップCS2で仮面ライダーを作成！（2）

えのころ草（ねこじゃらし）を美味しそうに食べていた…。

【！】ワンポイントアドバイス
くち元の演出と仕上げは凝りすぎて作りすぎると、元のバッタのイメージがなくなり
印象が変わってしまうので、ほどほどに。
目の複眼は、素材の複眼の数がキーポイント。
手本よりも大きめの複眼にすると、複眼の魅力が減るし、
小さくして複眼を増やしすぎると、複眼かどうかわからなくなってしまう。
ここは試行錯誤して、デフォルメ状態を確認しながらおこなうこと。

I'll be in touch.


仮面ライダーを作成！（1）へ戻ってみる

フォトショップCS2で仮面ライダーを作成！（1）

夏休みの宿題。
想い出は虫かごとドリル。
今でも虫かごを見ると、男の子は心がときめくもの。
今回は家にあった虫かごの中の、バッタを素材にしてみました。
仮面ライダーは、バッタがモデルだったとか。
そこで、このトノサマバッタ。
フォトショップでどこまで仮面ライダーに近づけることができるか、
「変身」
させてみたいと思います！
今回の先生は、PhotoshopCS2 Mac版です。
（いつもMac版ですが、Winでも通用しますので…）

完成画像はコチラ！




（1）元画像と素材を準備
元画像は、CanonEOS_Kiss-N+60mmMacroで撮影したバッタの画像。
加工するのは主に目と口とする。
そのためオリジナル背景画像を複製して、パーツレイヤーを先に準備しておく。


素材はネットで調達した、画像1枚。


（2）複眼、単眼、くち回りの選択
ペンツールでパスを切り、それぞれのパーツを選択しておく。
パスウィンドウのオプションメニュー（左上の三角アイコンをクリック）で、
選択範囲を作成する。


選択範囲を反転などで、パーツを抽出しておいて、それぞれのレイヤーにしておく。


（3）ライダー風に色を加工
元画像レイヤーを仮面ライダーの世界観を勝手にイメージして、好みのカラーに演出。
ここでは
イメージ→色調補正→色彩・彩度
で、青と紫系に演出。


（4）ライダーの口を演出
ライダーの口は、バッタの特徴がよく出ているところ。
不思議な造形だが、これもイメージを演出。
トーンカーブを図のようにすると、不思議な質感になる。
さらにレベル補正で微調整。



（5）ライダーの目を演出1
ライダーの目のレイヤーへ移動し、レベル補正で各色のチャンネルごとに調整する。
赤く光る仮面ライダーのイメージを描いていく。


（6）ライダーの目を演出2
赤い目を光らせるため、
レイヤー→レイヤースタイル→光彩（外側）
で、赤色を選択して、光り加減を設定。


仮面ライダーを作成！（2）へ続く

Photoshopでうろこの女性を作ってみよう！（3）

「フォトショップフィルタを駆使！」
セクシーなヘビ女を作ってみよう！

【イラストにうろこを合成】
今回は女性の腕を鱗状（うろこ状）にするイメージを作成してみます。


14　うろこのパターンを定義する
うろこの素材を開き、全選択します。
「編集」→「パターンを定義…」。
パターン名を自由に付けます。
ここでは「uroko003.psd」としています。



15　うろこパターンのチャンネルを作成
手順「7」の状態に戻ります。
チャンネル3を複製して、「チャンネル007」を作成します。
選択状態はアクティブのまま。
「編集」→「塗りつぶし…」→
使用：「パターン」
カスタムパターン：「uroko003.psd」を選択。
「OK」をクリック。
チャンネル007の選択範囲に、うろこパターンがタイル状に塗り込まれます。



16　レイヤーでうろこを仕上げる1
レイヤーに戻ります。
選択状態はアクティブのまま。
腕部分だけのレイヤーを複製して「arm002」を作ります。
腕の色を、うろこのベース色となるカラーに塗ります。
ここでは薄い紫系にしてみます。



17　レイヤーでうろこを仕上げる2
さらに「arm002」を複製して「arm003」を作成します。
選択状態はアクティブのまま。
「フィルタ」→「描画」→「照明効果…」
で立体感を出します。
光源タイプ：単一指向性
テクスチャチャンネル：003
を選びます。
光の具合などは、図を参考に、いろいろと試してみてください。






18　レイヤーでうろこを仕上げる3
レイヤー「arm003」を複製していろいろな
フィルタ効果による演出を試してみます。
「arm005」は
「編集」→「塗りつぶし…」→「パターン」：「uroko003.psd」。
二次元のイラストなら、これでもよいでしょう。





「arm005_1」は
「フィルタ」→「描画」→「照明効果…」→
テクスチャチャンネル：007
で、立体感のあるうろこにしました。





さらに
「arm005_1」を複製し、
「arm005_2」レイヤーを作ります。
「フィルタ」→「アーティスティック」→「ラップ…」


で、うろこに透明感を出しました。



19　合成した状態
他のレイヤーをアクティブにして、合成された状態を確認します。



20　合成画像をレイヤーマスクで馴染ませて仕上げる
「arm005_2」を複製して、「arm005_3」を作成。
「arm005_3」をアクティブ状態。
選択状態はアクティブのまま。
（選択範囲→選択範囲を読み込む…→007）
レイヤーウィンドウの下にある「レイヤーマスクボタン」をクリック。
「arm005_3」レイヤーにレイヤーマスクのアイコンが追加される。
カラーパレットを黒にする。
グラデーションツールで、左下から右上へグラデーションを施す。
いろいろと試して、腕の付け根が馴染むように調整する。



21　とりあえず完成！
完成画像は、とりあえず腕の部分のみ。
レイヤー1で、ブラシツールで光沢感を追加。
女性のボディは手順20と同じくレイヤーマスクで下部を馴染ませた。
背景にジャングルの画像を置いてみた。

今後、この素材イラストを使って、どんなイラストに仕上がるのか？
とりあえず、今回は
「うろこ」の作成と、合成のテクニックをご紹介ということで…。



う～ん、やっぱりPhotoshopって、楽しいっ！

I'll be in touch.


Photoshopでうろこの女性を作ってみよう！（2）へ戻る…

Photoshopでうろこの女性を作ってみよう！（1）へ戻る…

Photoshopでうろこの女性を作ってみよう！（2）

「フォトショップフィルタを駆使！」
セクシーなヘビ女を作ってみよう！

【イラストの準備】
今回は女性の腕を鱗状（うろこ状）にするイメージを作成してみます。

7　雑誌などから、女性のポーズをスケッチします。
最初は体の線がよく見える被写体をスケッチして、裸体にします。
snakewoman_bk1.jpg


8　裸体の女性を仕上げます。



9　ペン入れをして、きれいな線画に仕上げます。



10　肌部分だけ色塗りをします。



11　腕の部分だけのレイヤーを作成します。
（表示が見えやすいように背景カラーレイヤーを置きました）
腕の部分のチャンネルを操作するので、選択範囲として保存します。
選択状態はアクティブのまま。



12　腕の部分のチャンネルを作成します。
「選択範囲」→「選択範囲を保存…」→チャンネル001を作成
選択状態はアクティブのまま。



13　チャンネルを複製してフィルタでぼかす。
うろこを塗る時に、平面ではなく、立体感を出すためにぼかしフィルタを使います。
チャンネル001を複製します。
画像では「チャンネル003」にしてあります。（名前は自由）
選択状態はアクティブのまま。
「フィルタ」→「ぼかし」（ガウス）40pixに設定。



Photoshopでうろこの女性を作ってみよう！（1）へ戻る…

Photoshopでうろこの女性を作ってみよう！（3）へ続く…

Photoshopでうろこの女性を作ってみよう！（1）

「フォトショップフィルタを駆使！」
セクシーなヘビ女を作ってみよう！

【目標】
うろこを作って、合成画像に馴染ませて、こんな画像を作ってみる！



【準備】
素材となる「うろこ」を準備。
まずはイラストレーターでパターンとなるうろこの元を作ります。
イラストレーターで新規ファイルを開きます。
A4、縦、RGBです。
最初に上部メニュー
「効果」→「ドキュメントのラスタライズ効果…」→RGB、高解像度300
としておきます。



うろこ素材を作成します。


1　正円オブジェクト（40×40m/m）を作成。
グラデーションで黒から白に、画像のようにします。

2　「効果」→「スタイライズ」→「光彩（内側）」


「効果」→「スタイライズ」→「ドロップシャドウ」



3　図の様にグループ化けして、並べます。
このとき、きちんと正確に並べます。
「オブジェクト」→「変形」→「移動」→「コピー」とします。
画像のように数値は水平移動距離「40m/m」にします。


そのままの状態で「Command」+「Dキー」で
（オブジェクト→変形→変形の繰り返し）
4～5つの複製を作ります。
それをグループ化（「Command」+「Gキー」）します。

4　グループを手順の3と同様に
移動、コピーをします。
今度は、水平移動20、垂直移動-20
続いて、水平移動-20、垂直移動-20
を交互に繰り返して、図のようにします。

最後に、「ファイル」→「書き出し」
フォーマットをPhotoshop（psd）にします。
（ここでは圧縮されないようにPSD保存にします）


【うろこ素材作り】
今回のサンプルは解像度を300にして、作成しています。

5　Photoshopを立ち上げてイラストレーターで書き出した画像ファイルを開きます。
（Photoshop　CS2画面にて説明）
グループ化したオブジェクトの集合体を切り抜き（トリミング）します。
解像度を300pixel/inchで、横230pix、縦160pixのファイルにしました。



6　正確な「うろこのパターン」の元を切り抜きます。
タイル状にしたときに、うろことして、つぎはぎがなくきれいにつながるように注意して作ります。
ガイドラインを駆使して、画像を拡大して作成します。
（正確なパターンを作るために最初はイラストレーターで作成）



Photoshopでうろこの女性を作ってみよう！（2）へ続く…

PhotoshopでキューティーハニーGIFアニメを作ろう！（3）

「キューティーハニーの変身！　ハニーフラッシュ！」
…のGIFアニメ作りにチャレンジ！

（10）各アニメのコマの時間調整1
ここまで仕上がったので、次にアニメの効果を出すために、
各コマの時間を設定していく。
最初のアイコンに戻って、0.1秒と記述されている右横の
小さな三角アイコンをクリックする。
時間を選択するメニューが現れる。
ここでは「その他…」をクリック。


（11）各アニメのコマの時間調整2
計画ではアニメーションは無限ループ。
つまりアニメが永遠に繰り返されるように設定。
時間表示の下に「無限」と表示されている。
1回だけのアニメ表示などにしたい場合は、
「無限」の横の小さな三角アイコンをクリックして
ループ回数を設定することができる。
今回のアニメでは無限ループなので、メリハリをつけるため、
最初のコマを2秒。
途中は演出によって、0.2秒から2秒を使い分ける。


（12）アニメーションGIFとして保存1
再生ボタンをクリックして、雰囲気を確認する。
ここでのアニメの速度は当てにならないので、
GIFアニメに保存して、ブラウザーでアニメを確認する。
アニメーションGIFへの保存は、
「ファイル」→「Web用に保存…」をクリックする。


（13）アニメーションGIFとして保存2
保存用の別ウィンドウが立ち上がる。
プリセットの項目にあるファイルの種類のプルダウンメンヒューをクリック。
ここで「GIF」を選択。
カラーは最大の256色。
→「保存」をクリック。
このような大きなGIFアニメだと、
CPUの性能によって多少時間がかかる。


（14）完成後の確認
GIFファイルを保存したら、
インターネットエクスプローラー、サファリ、ファイヤーフォックス
などのブラウザーで
「ファイル」→「開く」または、
直接ファイルをブラウザーウィンドウにドラッグする。
ここでアニメの速度や、演出効果をチェック。
ギクシャクするようだったら、Photoshopで
再度、各アニメアイコンのコマの速度（時間）数値を変更して
気に入るまで保存、確認作業を繰り返す。





（15）完成品
完成品は、テキスト文字を入れたり、
レイヤーの順番を変えて一部背景の光を手前に持ってきたり、
光のリングがスムースに光るように調整した。





PhotoshopでキューティーハニーGIFアニメを作ろう！（2）へ戻る…

PhotoshopでキューティーハニーGIFアニメを作ろう！（1）へ戻る…


他にも、写真を使ったGIFアニメ作りの方法をご紹介しております。
「ウルトラマンアグルのカラータイマーが点滅したっ！」…のGIFアニメを作ってみよう！
併せてご覧下さい。

I'll be in touch.

PhotoshopでキューティーハニーGIFアニメを作ろう！（2）

「キューティーハニーの変身！　ハニーフラッシュ！」
…のGIFアニメ作りにチャレンジ！

（4）アニメーションアイコンの複製を繰り返し1
アイコン5をクリックしてアクティブ状態にして複製を作成。
アイコン6ができる。
アイコン6をクリックしてアクティブ状態にしする。
レイヤーの「背景2フェード用」をクリックして、可視状態
（レイヤー左の目玉アイコンをチェック）とする。


（5）アニメーションアイコンの複製を繰り返し2
同様の手順でアイコン7を作成。
レイヤーでは、
「ハニーフラッシュ1」は不透明度50％
「ハニーフラッシュ2」を不透明度90％で可視状態に、
「背景2フェード用」の画像を上へ移動させた。



（6）アニメーションアイコンの複製を繰り返し3
同様の手順でアイコン8を作成。
レイヤーでは、
「ハニーフラッシュ1」は不可視に。
「ハニーフラッシュ2」は可視状態のままで不透明度を50％に下げ、
「ハニーフラッシュ3」を可視状態、透明度80％、
「背景2フェード用」の画像を上へ移動させた。


（7）アニメーションアイコンの複製を繰り返し4
同様の手順でアイコン9を作成。
レイヤーでは、
「ハニーフラッシュ2」は可視状態のままで不透明度を20％に下げ、
「ハニーフラッシュ3」も同様に不透明度を50％くらいに下げ、
「ハニーフラッシュ4」を可視状態、透明度60％、
「背景2フェード用」の画像を上へ移動させた。


（7）アニメーションアイコンの複製を繰り返し5
同様の手順でアイコン10を作成。
レイヤーでは、
「ハニーフラッシュ2」は不可視状態に。
「ハニーフラッシュ3」は可視状態のままで不透明度を10％に下げ、
「ハニーフラッシュ4」も同様に不透明度を30％くらいに下げ、
「ハニーフラッシュ5」を可視状態、透明度60％に。


（8）アニメーションアイコンの複製を繰り返し6
同様の手順でアイコン11を作成。
同様にハニーのアニメ状態を演出していく。
ここでは新たに、
背景で円形に広がる光を追加する「背景3回転用」を可視状態に。
同様の手順でアイコン14まで作成を作成。








（9）アニメーションアイコンの複製を繰り返し7
同様の手順でアイコン15を作成。
ここでは「フラッシュ0」レイヤーを可視状態にする。
ネックストラップのハートから光をリング上に光らせる効果を演出。
同様の手順でアイコン17まで作成を作成。







PhotoshopでキューティーハニーGIFアニメを作ろう！（3）へ続く…

PhotoshopでキューティーハニーGIFアニメを作ろう！（1）へ戻る…