2009年12月26日土曜日

スケッチ 解説(7) ぼかしツール

今回は、”スケッチ”アプリケーションの4つのツールの最後、”ぼかしツール”を使います。
このツールを使うと、指でなぞった部分を、周囲の色となじませることが出来ます。このツールにも太さと濃さの設定が出来ますので、効果のかかり具合を好きなように調節することができます。以下が設定画面です。


落ち葉の背景に、黒くてすべすべした石を何個か描いてみたいと思います。すべすべした表面は、これまでに使ったツールでは表現しずらいものです。
まず左の絵を描きました。丸ペンで、4色だけを使って粗いグラデーションで石を描きます。
次にぼかしツールを使って石の表面の色をなじませ、滑らかにしました。ぼかしツールで石を表面を数回撫でると、右の写真のようになりました。



次は、もっと広い範囲をぼかして、ピンぼけのような効果を出してみます。
左の絵を加工して、中心の落ち葉だけがくっきり見えるように、背景をぼかしてみます。ぼかしツールの濃さを強めに設定して、背景部分を数回なぞると、右の写真のようになりました。


”スケッチ”のぼかしツールでは、フィルタによる加工と異なり、ぼかしをかける場所や強さを好きなように制御出来ますので、写真の加工などでも面白い効果を得られると思います。

スケッチ 解説(6) 筆を使う

今回は、4つある描画ツールの3番目、筆を使ってみます。
筆には、太さと濃さに加えて”粗さ”という設定値があります。これは筆の毛の固さを表現しています。右側の写真がサンプルです。緑の線は、太さを変化させたものです。赤は濃さを変化させたもの、青は粗さを変化させたものです。3つの設定の組み合わせですので、かなり自由度の高い表現が出来ると思います。


このシロクマの絵では、毛の流れを表現するために筆を使っています。


落ち葉の絵の背景を筆で塗ってみました。

2009年12月24日木曜日

スケッチ 解説(5) 色をつける

前回までに描いた落ち葉に色をつけてみます。
色を作成する方法は、HSB/RGB/混色の3種類あります。その他に、スポイト機能を使うことができます。

(1)HSB
色調、彩度、明度の3つを調節して色を作成します。
-色調を選択します。
-彩度は、右にいくほど色が鮮やかになります。一番左にすると、灰色になります。
-明度は、右にいくほど明るくなります。一番左にすると黒になります。
作成した色は画面の一番上の部分に表示されます。ここでは落ち葉の黄色を作りました。



作成した色は、ドラッグしてパレットに保存することができます。
一番上のパレット(現在の色)から、8つ並んだパレットにドラッグすると、色を保存できます。パレットからパレットへのコピーすることもできます。


作成した色で落ち葉を塗ります。
ここでは、丸ペンの、太さ20ピクセル、濃さ10%くらいで何度か塗り重ねています。




(2)RGB
落ち葉の先端の方は、赤っぽくしてみます。今度は、RGBで色をつくります。
赤、緑、青の組み合わせで色を作成します。HSBよりもこちらの方が色を作りやすい方はこちらをご使用ください。
HSBと同じように、作成した色をパレットに保存できます。


作成した色で、落ち葉の先端を塗りました。
先ほどと同じように、ツールの設定は、丸ペンの、太さ20ピクセル、濃さ10%です。


(3)混色
落ち葉の根元は黄色、先端は赤色にしました。その間は、色を徐々に変化させて、グラデーションにしたいと思います。このような場合には、”混色”が役に立ちます。
”混色”を選択すると、下のような画面になります。左のパレットに黄色をドラッグ、次に右のパレットに赤色をドラッグします。
下のバーが左右の色の中間色を表示しますので、スライドバーを動かして、色を選ぶことが出来ます。


間の色を塗りました。スライドバーを動かして少しずつ黄色から赤色に色を変化させながら塗ります。”混色”を使うと、HSBやRGBで作成するよりも簡単にグラデーションを表現することができます。


(4)スポイト
スケッチのある場所の色と同じ色が欲しいと思った場合には、スポイトツールを使うことができます。色設定画面の、”スポイト”ボタンをタップします。



画面の、色を採りたい場所に指を置きます。
画面上部の半透明ウィンドウに、指の置かれた位置の色が表示されます。
指をスライドさせ、欲しい色が見つかったら、指を離します。

自動ズーム
スポイト処理中に指を少し静止すると、その点を中心に2倍ズームされます。段階的に16倍まで拡大されます。細かい部分の色を採るときに役に立つと思います。

長押しジェスチャ
画面長押しでスポイトツールを起動することができます。

スケッチ 解説(4) 細かく描きこむ


4回目の解説です。今回は、前回の続きをさらに細かく描き込みます。
詳細に描くために必要な、フルスクリーン化、ズーム、アンドゥについて説明します。


(1)フルスクリーン化:シングルタップ


画面の上下のツールバーが邪魔になる場合は、画面をシングルタップすると、1回目で上のナビゲーションバーが消えます。2回目で下のツールバーも消えてフルスクリーンになります。もう一度タップすると、上下とも表示されて最初の状態に戻ります。


(2)ズーム
ズームイン/アウト:2本指でピンチイン/アウト
ズームイン:ダブルタップ
スクロール:2本指でスライド
ズームを最初の状態に戻す:2本指でタップ

細かい部分を描くためには、その部分を拡大表示する必要があります。2本指のピンチインで拡大します。
拡大したい場所をダブルタップする方法も使えます。ダブルタップした場所を中心に、倍率2倍に拡大されます。ズームは最大16倍までです。
スクロールは、2本指をスライドさせてします。
最初の状態(スケッチの全体が表示された状態)に戻るには、ピンチアウトをしてもいいですが、2本指のタップで一気に戻ることができます。


(3)取り消し(アンドゥ)
描いた線が気に入らなかったら、10回まで遡って取り消し(アンドゥ)をすることが出来ます。ツールバーの左向きの矢印ボタンをタップします。
戻しすぎたら、右矢印ボタンでやり直し(リドゥ)をすることができます。


(4)4本指ジェスチャ
取り消す/やり直す:4本指で左右
ツール設定起動:4本指で上
色設定起動:4本指で下

少しコツが要りますが、4本指の上下左右にスワイプすることで各種の機能を呼び出すことができます。
フルスクリーンで描画中にいちいちツールバーを出さなくて済むようにジェスチャを用意しました。
4本の指を画面に置いて、左の画面にような半透明のウィンドウが表示されたことを確認してから、指が画面から離れないように気をつけてスライドすると、やりやすいと思います。

スケッチ 解説(3) 既存のスケッチの続きを描く


スケッチの解説3回目です。今回は、アルバムから既存のスケッチを選択して、続きを描いてみます。アルバムで、続きを描きたい絵をタップします。


選んだスケッチが拡大表示されます。
この画面では、左右にフリック、もしくはツールバーの矢印ボタンで、前後のスケッチに移動することも出来ます。
編集を開始する前に、念のため、複製をとっておくことをお勧めします。
複製するためには、ツールバーのアクションボタンをタップし、アクションリストの”複製”をタップします。


複製が完了しました。編集ボタンをタップして、絵を描きます。



絵を描き終わったら、左上の”アルバム”ボタンをタップしてアルバムに戻ります。



アルバムに戻ってきました。編集前の絵はそのまま残っています。複製して加筆されたスケッチが増えています。
描いたものが気に入らなかったときに前の状態に戻れるように、このように複製を残しておくことをお勧めします。

2009年12月23日水曜日

スケッチ 解説(2) 線の太さと濃さ


線の太さや濃さを変えたい場合、ツールバーの左から2番目のボタンをタップします。


ツール設定画面に切り替わります。
一番上の段に4種類のツールが並んでいます。左から、丸ペン、丸ペン(ベタ塗り)、筆、ぼかし です。この中から一つ選択します。
通常一番よく使うのは、一番左の丸ペンです。
全てのツールは、太さと濃さをスライダーで無段階に調整することができます。
スライダーで値を変更すると、画面中央部のサンプルに、どんな線になるかがリアルタイムに表示されます。


丸ペンで、太さと濃さをそれぞれ変えたときのサンプルです。
左の列は、太さを一番太い50ピクセルから1ピクセルまで変えています。
右の列は濃さを、100%から0%まで変えて線を引いています。



太さと濃さの変更方法にはもう一つの方法があります。3本指を使ったジェスチャです。
画面に3本の指を置くと左の画面のような半透明のウィンドウが出てきます。
この状態で指を上下にスライドすると、線の濃さが変わります。
左右にスライドすると、線の太さが変わります。
この方法だと、いちいちツール設定画面に切り替えること無く太さと濃さを変更することができます。




丸ペン(ベタ塗り)のサンプルです。
このツールは普段あまり使うことは無いと思いますが、消しゴムとして使うことが多いです。
”スケッチ”には消しゴム機能がありません。このペンで、背景の色(白)で塗りつぶすことになります。


色設定画面を開いて、パレットの白を選択してください。
塗りつぶして消すことができます。

スケッチ 解説(1) 新しいスケッチの作成

これから何回かに分けて、”スケッチ”の機能と操作について解説をします。
初回は、新しいスケッチの作成と保存の流れについてです。
”スケッチ”を起動すると、左のようなアルバム画面になります。ここには、iPhoneの"写真"アプリのカメラロールのように、これまでに作成した全てのスケッチが表示されます。
新しいスケッチを作成するためには、画面右上の+ボタンをタップしてください。


このような画面に進みます。この画面はスケッチを描くための画面です。
下のツールバーのボタンは、スケッチを描くための各種の設定をするためのボタンです。
左から、色設定、ツール設定、取り消し(アンドゥ)、やり直し(リドゥ)、その他 です。
ここでは何も変更しないで、そのまま描いてみます。


指で絵を描きます。
描き終わったらアルバムに戻ります。左上の”アルバム”をタップしてください。
保存は自動的にされますので意識する必要はありません。


アルバムに戻りました。
新しく作成したスケッチがアルバムに追加されました。





2009年12月21日月曜日

iPhone:”スケッチ” Version1.0 がリリースされました


本日、iTunes Storeにて新しいアプリケーション"スケッチ"がリリースされました。

iPhone/iPod Touchで絵を描くためのアプリケーションです。自然な質感の絵を自然な操作感で、気軽に描けることを目標として開発しました。


iTune Storeへ

iPhone:”スケッチ” 12/21リリース予定です


支出管理開発の合間に作っていた、絵を描くためのアプリケーション”スケッチ”を12/15に提出しました。

クリスマス休暇もありますので今年リリースされることはないと思っていたのですが、思いのほか早く、明日12/21リリースされることになりました。

自然な質感の絵を、自然な操作感で描けるというのがコンセプトです。

例えば左のようなスケッチ風の絵を描くことができます。













色を扱う機能が充実しており、筆を模したツールを備えていますので、より本格的な絵を描くことも出来ます。


左は友人がこのアプリで描いてくれたものです。


色は、HSB、RGB、2色の混色の3通りの方法で作成でき、8つまでパレットに保存することができます。
スポイト機能も持っています。








カメラロールからのインポート、エクスポート機能を持っていますので写真加工をすることができます。

写真の加工では、スポイト、ぼかしツールが特に役に立つと思います。

左は、晴天の写真に、このアプリで雲を描きたしたものです。(これも友人が描いてくれました)
















描いた絵のファイル管理は、デフォルトの”写真”アプリケーションのインタフェースを参考にしていますので違和感無く使用して頂けると思います。























”支出管理”に絵を添付して遊んでいて、このアプリの作成を思い立ちました。

紙と鉛筆で描くスケッチのような感覚で描けるアプリケーションが目標でした。

鉛筆スケッチがなぜ手軽かというと、絵を描いている途中で道具を持ち替える必要が無いことが理由だと思います。鉛筆スケッチでは、線を重ねて濃淡を表現しますので絵の具のようにいちいちパレットで色を作成する手間がありません。

鉛筆スケッチの気軽さをアプリで再現するためには、下地とのブレンド処理が重要です。線を重ねて濃淡を表現できるようにするためです。また、それを高速に処理する必要があります。指の動きに対して描画が遅れると、自然な感覚で描けません。

ということで、”自然な質感の絵を、自然な操作感で描けること”を実現するために”高速なブレンド処理”というテーマに取り組んだ結果がこのアプリケーションです。

2009年12月18日金曜日

iPhone:支出管理 Version1.2開発を始めました

支出管理のVersion1.2を開発開始しました。
レビューやサポートサイトからのメール等で頂いた要望に可能な限りお応えしたいと考えています。現在の予定です。

・パスコードロック
(沢山の要望を頂きました)
・項目複製の際、リスト画面に戻るのではなく、複製した項目の編集を出来るようにする
・データのバックアップ&リストア
その他検討中

金額入力のスライダーについて要望を頂いておりますが、全てのケースをスライダーで対応することは出来ず、スライダーと電卓の使い分けをして頂く必要があります。
使い分けの考え方は以下のようになります。

”支出管理”の金額の入力には二通りの方法があり、それぞれ長所と短所を持っています。

A.スライダー
○画面を切り替えずに素早く入力が出来る
×100円刻み
×最大値が制限されている

B.電卓
○1円単位で入力できる
○最大値の制限がない
○計算が出来る
×画面を切り替える必要がある。操作回数が多くなる

スライダーの性質上、操作性を保つために上記のような制限が必要となります。
基本はスライダーを使用し、1円単位で入力したい場合や、大きい金額を入力する場合には電卓を使用する。というような使い分けをすることを想定しています。

2009年12月12日土曜日

iPhone:支出管理 Version1.1 がリリースされました

本日、”支出管理”のVersion1.1へのアップデートがご利用可能になりました。
iPhone3Gでグラフの表示が乱れる問題が修正されています。ご迷惑をおかけしました。
ここでは、Version1.1の新機能をご紹介します。


①記入モードの一覧画面に、支出合計と
予算残高の表示を追加しました。

画面の下部に新しく表示を追加しました。
グラフは、赤が予算のうち消費し
た分、青が予算の残りを表しています。

支出の記入をすると即、グラフに反映されます。
画面を切り替えずに現在の予算の消費状況を知ることが出来ます。

この機能はAppStoreのレビューで提案して頂いたものです。有り難うございました。









②支出項目名を履歴から選択する機能を追加しました。

支出の編集画面で項目名の左に新しいアイコンがあります。これをタップすると・・


















支出項目名の候補リストが表示されます。

リストには、過去に入力された支出項目名が頻度の高い順に表示されます。

リストから一つを選択してタップすると、もとの編集画面に戻ります。
















③支出項目の順序変更のための”末尾へ移動”機能を追加しました。

記入を忘れて後から記入した場合、実際にお金を使った順序とリストの表示順がずれてしまいます。

これが気になる場合、リストの順番を修正するために”末尾へ移動”をご使用ください。

実行すると、この支出項目はその日の一番最後に移動します。












④支出項目編集画面から連続して項目作成する場合、日付を引き継ぐように変更しました。

リストからでは無くて、左の画面から+ボタンを押して新規支出項目を作成した場合、それまで編集していた項目と同じ日付で作成されます。

これによって、同じ日付の項目をまとめて入力する場合にはいちいち日付を設定する必要がなくなりました。












⑤支出項目名およびメモにシングルクォーテーションが含まれる場合に項目が保存されない問題を修正しました。