bgpict2.png 
わかばマークのMacの備忘録
初心者による Mac OSX の便利な使い方や、ソフトウェアの紹介など、Macのこといろいろ。

2019 / 11

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 

http://wakabamac.blog95.fc2.com/blog-entry-638.html

綺麗なラインアートが簡単に描けるサイト「flame | peter blaskovic | escape motions」
Twitterのタイムラインで知った、サイトのご紹介です。

flame | peter blaskovic | escape motions
100314fle1.jpg

ここでは、綺麗な軌跡の抽象的な絵が簡単に描けます。

マウスの動きに合わせて、ブラシのポインタの部分がぐるぐる慣性でバネのように伸びたり縮んだりします。なので適当にマウスを動かしていれば、Tigerまでの Mac のデスクトップ画像っぽい絵が簡単に作れます。


簡単にできて、この「慣性ぐるぐる感」がけっこう楽しい。


  • space --- 画面をクリアー
  • Z --- Undo(or Redo)

のショートカットキーが使えます。
Undo は直前の1回しか効かないので、慎重にやらないといけないです。



↓マウスをずっと円形に回してれば、こんな感じになります。
100314fle2.jpg



絵ができたら、右下の「SAVE」ボタンで保存できます。
(保存後には、それに付け足して描くことができない?ようなので、保存も慎重にやります)
100314fle3.gif

※保存するには、Webブラウザの設定で「ポップアップウインドウを開かない」をOFFに設定しておかないと、うまく保存できないようです。
また、OS10.5、10.4 ではちゃんと保存できないかも?

保存すれば、1680×1050px サイズのJPG画像にできるので、デスクトップの画像なんかに使えそうです。




環境にもよるけど、保存するときに少し時間が掛かります。
しばらくすると、新規タブ(ページ)で保存したJPG画像(1680×1050px)を表示します。このときURLはしばらくすると消えてしまうようなので、表示された画像をドラッグ&ドロップして保存するなど、何らかの形でダウンロードしておきます。

100314fle5.jpg



絵が下手でも適当にやってれば、なんとなく それっぽく見えてくる(?)から不思議。
100314fle4.jpg

edit

サイトのご紹介 | CM:2 | TB:0

tag : Drawing  デスクトップピクチャ 

+

http://wakabamac.blog95.fc2.com/blog-entry-736.html

Pixelmator
icn_Pixelmator.jpg
Pixelmator : 高機能な画像編集ソフト
OS10.5.7以上(UB)
シェアウェア $59 ※、日本語対応


高機能な画像編集ソフト「Pixelmator」の紹介です。
100224pxm1.jpg

まず、よく使う(使いそうな) Pixelmator の操作をザッと採り上げると・・・
  • option+スクロールホイール --- 拡大縮小表示
    command+, command- でも同様)
  • space+ドラッグ --- 表示範囲の移動
  • option+command+0 --- ピクセル等倍表示

  • command+Z --- Undo
  • shift+command+Z --- Redo

  • tab --- メイン以外のウインドウの表示・非表示

  • command+D --- 選択解除
  • option+command+L --- 選択範囲の読み込み
    (そのレイヤの透明でない部分を選択する)
    各レイヤのプレビュー部分を command+クリックでも同様

  • command+F --- 自由変形

  • command+K --- カーブ...
    (画像の明るさ具合を調整するときに使う)

  • M --- 選択ツール(続けて押すと □→○ 選択タイプ切替)
  • V --- 移動ツール
    他のツールにもショートカットキーが割り当てられていますが、とりあえずこの2つだけでも覚えておくと作業がスムーズに進みます。

    各ツールにしばらくマウスポインタを置いておくと、ツールチップでそのショートカットキーが表示されます。
    100224pxm3.jpg

  • optionキー を押している間、一時的にスポイトツールとなり色を拾える
    (ブラシ・鉛筆ツールなどを選択しているとき)

  • commandキー を押している間、一時的に移動ツールとなる
    (選択・投げ縄・マジックワンドツールなどを選択しているとき)

  • 各種コンテキストメニュー(右クリック or control+クリック)
    選択しているツールによってコンテキストメニューの内容が違い、結構便利に使えます。
    100224pxm2.jpg

    キャンバス以外の部分でコンテキストメニューを開くと、キャンバス外の色を選択できたり、他にも、定規の上でコンテキストメニューを開くと「ガイド」の表示・非表示、ロックなどの操作ができます。
    100224pxm4.jpg

日本語の『Pixelmator ヘルプ』も充実しているので、他の使い方はこのヘルプを参考に。

各種ショートカットキー一覧『ワークフローのスピードを上げる
(↑Pixelmator 持ってる・使ってるなら、ぜひ押さえておいた方がいい)



実用例『Pixelmator | Learn
(↑ここのやり方を見てるだけでも、表現の方法とか参考になるかと思います)




Pixelmator の機能説明を兼ねて『アクアボタンの作り方 (orange-A-go-go!)』を参考にドラゴンボールを描いてみたいと思います。

各種機能を説明するために、遠回りな説明になっています。
同じ表現をするのにもいろいろ方法があるので、このやり方がベストという訳ではないので、各自で工夫してみて下さい。


①新規作成
command+N で新規作成します。
100224pxm5.jpg
アイコンの元となる画像にしたいので、大きさは 512×512px に設定します。解像度はデフォルトの72で十分だと思います。
この辺りは自分の使い方によって、大きさを設定した方がいいです。



②ガイドを設定
定規を表示して( command+R )、その定規からドラッグ&ドロップして、キャンバスの中央を交差するガイドを設定します。
100224pxm6.jpg
ドラッグ中に位置座標が表示されるので、それを参考にガイドをセンターに持ってくる。
あとはガイドをロックしておきます。



③正円の選択範囲を作る
新規レイヤを作成して(最初に作られているレイヤは「べた塗り」されている状態なので)、選択ツールで正円の選択範囲を作ります。
100224pxm7.jpg

ガイド交差点から option+shift+ドラッグします。
optionキー も合わせることによって、中心が基準になります)




④選択範囲を塗りつぶす
バケツツールでやってもいいし、option+delete のホットキー一発で描画色で選択範囲を塗りつぶします。
100224pxm8.jpg

塗りつぶしの色は、ボール外側のグラデーションが濃くなってくる色にします。
好みもあると思うけど茶色にしてみました。

    (豆知識)
  • option+delete --- 描画色で選択範囲を塗りつぶし
  • command+delete --- 背景色で選択範囲を塗りつぶし
    (↑上記2つとも shiftキー を合わせると透明部分を保護)

  • shift+delete --- 塗りつぶし(ダイアログで色を確認する)




⑤選択範囲をぼかして塗りつぶし
次にボールのグラデーションの内側の塗りつぶし範囲を選択します。
③の選択範囲を引き続き利用して
編集 メニュー > 選択範囲をカスタマイズ...option+command+R
を実行して、選択範囲を小さくして且つ、境界をぼかします。
100224pxm9.jpg

選択範囲以外のところは、透明の赤で表示されます。
(この場合では、茶色と赤なのでかなりわかりづらい)

これで、新規レイヤを作成して、そこでグラデーションの内側の黄色で塗りつぶします。
100224pxm10.jpg
(↑適当にやったおかげで、茶色が強すぎる感じになってしまった)



⑥拡大とマスク
上記⑤の黄色の部分の具合がよくないので、ちょっと修正します。
この黄色の部分のレイヤをアクティブにして、自由変形( command+F )で拡大します。
100224pxm11.jpg

option+shiftキー を押さえながら拡大して行きます。


このように調整したけど、黄色の部分がはみ出てしまいます。
そのために、このはみ出した部分をマスクして隠します

まず、④の茶色の正円を描いたレイヤを選択して、選択範囲の読み込みoption+command+L )を実行。
正円で塗りつぶした範囲を選択します。

これで先ほどの黄色の円のレイヤに戻って、コンテキストメニューから「レイヤーマスクを追加」を実行します。
100224pxm12.gif

マスクを実行するとレイヤウインドウで下のように表示されます。
100224pxm13.gif

これで、茶色の正円からはみ出した部分はマスクされ見えなくなりました。
100224pxm27.jpg




⑦レイヤのブレンドモードを使う
上記⑥でやっとボールっぽく見えるようになってきたけど、もう少しグラデーションの具合を調整してみます。
新規レイヤを作成し、正円の選択範囲で、「グラデーションツール」を使って 白→黒 の円形グラデーションで塗りつぶします。
100224pxm14.jpg

グラデーションウインドウの各パターンをダブルクリックすると、そのグラデーションを編集できます。
100224pxm15.jpg



次にこのレイヤの ブレンドモード を「オーバーレイ」にして、様子を見ながら必要に応じて「不透明度」の調整も行います。
100224pxm16.gif

これで「ボール」もこんな感じ。
100224pxm17.jpg

(ちゃんと「球」を立体的に表現するなら、暗い部分にも少し照り返しがあるとか、そういったことを複雑なことをやらないといけないと思いますが、ここではアイコンに使う程度であまり大きく見ることが少ないし、これで良しとします)



⑧テキストで★を描く
テキストツールを使って★を描きます。
日本語入力で「ほし」→変換→「★」とすれば、簡単に★を描けると思います。

そして移動ツールを選択して、optionキー を押しながらドラッグ&ドロップして複製して行きます。
100224pxm18.jpg

いくつものレイヤができて、1個ずつ動かしたりするのが面倒なときは、レイヤウインドウにて該当の複数のレイヤを選択して、∞ をクリックしてリンクさせると、同時に移動などするようになります。
100224pxm19.jpg

また、テキストレイヤをラスタライズ(テキストデータ→ビットマップデータに変換すること) したり、いくつかのレイヤを統合したりするのもいいでしょう。




⑨光の反射の表現を描き込む
新規レイヤを作成して、選択ツールで楕円の選択範囲を、「ボール」の上部に作ります。
そこを 白→黒 の線形グラデーションで塗りつぶします。
100224pxm20.jpg

そしてこのレイヤのブレンドモードを「スクリーン」、不透明度を様子を見ながら適当な値に設定します。
100224pxm21.gif

これだけで、ずいぶんと「アクア」っぽい表現に見えてくるようになりました。
100224pxm22.jpg



また新規レイヤを作成して、同じ選択範囲を「ボール」の下部へ移動します。
そして「選択範囲のカスタマイズ」から選択範囲の境界をぼかし、その部分を 黒→白 の線形グラデーションで塗りつぶします。
100224pxm23.jpg

このレイヤのブレンドモードを「ハードライト」、不透明度を調整します。
100224pxm24.jpg

さらにこのレイヤを複製します。
レイヤメニューやコンテキストメニューから複製できる)
そしてブレンドモードを「オーバーレイ」、不透明度を調整します。
100224pxm25.jpg

これでほぼ出来上がり。
100224pxm26.jpg



⑩影を付ける
最後に影を付けます。(上記説明で使った機能でやるので画像は省略)

ます④の茶色の正円のレイヤをアクティブにして、そこで option+command+L で選択範囲を作ります。

新規レイヤを作成して、その選択範囲をカスタマイズして、少し大きく、境界をぼかします。

黒で塗りつぶして、レイヤの不透明度70%ぐらい、ブレンドモードを「乗算」(←ほとんど意味ないけど)に設定します。

選択範囲を解除( command+D )してから移動ツールを選択、カーソルキーで影を「ボール」より微妙に下の方へ移動して、完成。

DragonBall(5星球)
(こうしてでっかくして見ると、なんかイマイチ・・・)





Pixelmator を少し使ってみて、ホットキーやマウスと関連した各種の操作は使いやすく、とてもよく作られていると思います。GUIは黒っぽくて見た目はかっこいいけど、個人的には見づらくてあまり好きではないです。

ツールで言えば「パス」ツールがないので、画像の「切り貼り」とかに使用するには、ちょっと荷が重いです。(ペンタブレットとか持ってるならマスク機能とか使ってなんとかなるだろうけど、普通のマウスではつらい)


今なら Smith Micro Consumer Software にて $39.99 で割引販売しているようです。(2010/03/18 まで)
Pixelmator Special Offer
(↑『Mac Promo: Pixelmator 1.5 - 33% OFF - Mac Promote - Mac & iPhone Software Promos』で知ったんだけど、Smith Micro ってところは、僕自身よく知らないので、購入する場合は自己責任にてやって下さい。)


※ちょっと高いけど act2 でも販売しています。
ダウンロード版 \6,980、パッケージ版 \8,980
ピクセルメーター






この記事では Pixelmator 1.5.1 を使用しています。

(ダウンロードリンク)
Site top page : Pixelmator
Download page : 上に同じ

edit

Graphic | CM:0 | TB:0

tag : 画像編集  Drawing 

+

http://wakabamac.blog95.fc2.com/blog-entry-901.html

Drip
icn_Drip.jpg
Drip : 描いた行程を動画に出力できるドローイングソフト
OS10.4以上?(UB)
フリーウェア


レイヤが使えて、描いた行程を動画に出力できる機能を持つドローイングソフト「Drip」の紹介です。
090423drp3.jpg



起動するときに、キャンバスサイズ、背景の色などを設定して新規書類を作ります。
090423drp2.gif


Tools」パネルで「B」でブラシ、「E」で消しゴムかを選択して、キャンバスに描き込んで行きます。スライダでブラシの太さ、ぼかし具合を調整します。
一番上の色の部分をクリックしてカラーパネルを開いて、色を選択できます。
090423drp4.gif

レイヤが使えるので、パーツごとにレイヤを使うといいでしょう。
そのレイヤの表示モードも選択できます。
」「」でレイヤの追加・削除、右側のアイコンはレイヤを統合します。



Advanced」を展開すると、「ブラシ」「消しゴム」について、1つ1つの描く(消す)ものに対して、詳細な設定をすることができます。
090423drp5.jpg

Spacing」は点線のような効果
Resaturation」はインク補充量?背後の色と混ぜあ合わせたような効果
Opacity」は透明度

Pressure Effect」はたぶんペンタブレットの筆圧によるものだと思います。
(持ってないから分からないけど・・・。)

Blend Mode」は、描画モード

なかなかの機能が揃っています。


command+Z Undo
shift+command+Z Redo
も使えて、やり直しがききます。



Tools」メニューから、描いた行程を動画で見ることができます。
090423drp6.gif

Play Back」を実行すると、その動画を見れます。
(1分ぐらいに要約されます)

Export Movie」で QuickTime形式(.mov)の動画ファイルとして出力します。

試しに迷画伯による落書きをYouTubeにアップしてみました。

消しゴムで消したところが、なぜだか黒い点みたいに処理されたけど、細かいことは気にしてはいけない。




command+S で保存すると、拡張子「.drip」のファイルとして保存されます。

Fileメニュー > Export Imagecommand+E
で「JPG」「PNG」に書き出せます。
090423drp7.jpg



「Drip」は、まだちょっと不安定なところもあるけど、多機能かつシンプルで使い易いドローイングソフトだと思います。






この記事では Drip 0.1 (13) を使用しています。

(ダウンロードリンク)
Site top page : drop-osx - Google Code
Download page : Downloads - drop-osx - Google Code

edit

Graphic | CM:0 | TB:0

tag : Drawing 

+

http://wakabamac.blog95.fc2.com/blog-entry-890.html

Acorn
icn_Acorn.jpg
Acorn : 多機能ドローイング・画像編集ソフト
OS10.4.9以上(UB)
シェアウェア $49.95


MacHeist3 Bundleで購入した、レイヤも使える多機能ドローイング・画像編集ソフト「Acorn」の紹介です。
090331ac1.jpg


最初によく使う操作方法を説明しておくと、
  • option+スクロールホイール 拡大縮小表示
  • command+(プラスキー) 拡大表示
  • command+(マイナスキー) 縮小表示

  • command+1 画像の等倍(100%)表示
  • command+0 画像をウインドウサイズに合わせて拡大縮小表示

  • Space+ドラッグ ウインドウでの表示範囲の移動
  • スクロールホイール 表示範囲の上下移動
  • shift+スクロールホイール 表示範囲の左右移動

  • command+Z Undo
  • shift+command+Z Redo

  • option+クリック "スポイト"ツールで画像中の色をピックアップ
    ※ Draw, Flood Fill(塗りつぶし), Gradient(グラデーション) ツールのとき

  • F フルスクリーンのON/OFF切り替え

よく使うのはこんなところです。



JPGやPNG画像を「Acorn」で開いて編集し、保存するときは別名保存(shift+command+S)した方がいいでしょう。

保存できる形式は下記のようになります。
Acorn Image」「PNG」「TIFF」「GIF」「JPEG」「JPEG 2000」「BMP
レイヤなどを残して後で編集できるようにするには「Acorn Image」(拡張子「.acorn」)で保存します。



各ツールの選択・設定とレイヤの管理は「Tools」ウインドウで行います。
090331ac3.jpg

ちょっと変わったUIで、この「Tools」のリストから、各ツールを選択して行きます。「View」メニューからも同じように操作でき、ここに各ホットキーが表示されるので、慣れてホットキーを使うようになれば使い易くなるでしょう。
090331ac2.gif



Acorn を使ってどんなことができるのか、冒頭のような画像を作ってみたいと思います。

まず、これ↓が元の画像です。
090331ac4.jpg


▶ Layer

Acorn でこの画像を開いて、この画像のあるレイヤを複製します。
090331ac7.gif

右クリックしてコンテキストメニューの「Duplicate selected layer」を実行するとレイヤを複製できます。

「レイヤ」がよくわからない人は、「透明のシート」みたいに考えると分かり易いでしょう。

Layer blend」は、そのレイヤの表示方法。
「Overlay」「Screen」とかで、光の陰影とかを表現するときなどに使います。

Opacity」は、そのレイヤの透明度を調整します。

他の操作は「Layer」メニューからいろいろ操作できます。




▶ Filter

その複製したレイヤに「フィルタ」効果をかけます。
FilterDistortion EffectCircle Splash Distortion...
を実行します。
090331ac8.gif

すると、フィルタ用のウインドウが開いて、各フィルタの詳細な設定ができます。「◀」ボタンでプレビュー表示のON/OFF切り替えが可能です。
090331ac9.jpg

プレビュー画像の方で効果の中心点などをドラッグしたりして設定できます。
また、メインのウインドウでもプレビューされ、こちらの方は他のレイヤも合わせた全体の見え方の表示になります。

複数のフィルタをかけたいときは、「」ボタンで効果を追加できます。(各効果の右上の「×」でその効果を削除できる)

このときのダイアログが秀逸で、選択した効果のプレビューをアニメーション付きで表示するので、どのような効果なのかが一目瞭然です。
090331ac10.jpg

このダイアログでフィルタ効果を選択する方が分かり易いので、とりあえず適当にフィルタ効果を選択してから、このダイアログで選択するといった使い方の方がいいと思います。




▶ Select

次に Selectツールの「Freehand」を使って、ねこの回りを適当に選択します。
090331ac11.gif

090331ac12.jpg

これで Selectメニュー > Feather... で選択範囲の境界を15~20pxぐらい(元画像の大きさにもよる)ぼかします。
090331ac19.jpg

レイヤで、フィルタをかけたレイヤにがアクティブなのかを確認して deleteキー で選択範囲を削除します。

それでこのレイヤの透明度を少し変えたりして、フィルタ効果を施したレイヤとオリジナル画像のレイヤが自然に表示されるように、調整します。




▶ Draw

また新たにレイヤを新規作成して、そこに吹き出しを描きます。
ここでは「Pencil」を使います。「ペン先」の直径と透明度を設定できます。
090331ac13.gif

shiftキー を押さえながら頂点をクリックして行くと、直線が描けます。
090331ac14.jpg


ここでは使っていないけど Acorn は「Brush」ツールが充実しています。
「ペン先」の形状もいろいろ選択できます。
090331ac15.gif

Windowメニュー > Brush Designer
もしくは Toolsウインドウ の「Make a New Brush...」から編集することもできます。
090331ac16.gif




▶ Flood Fill

吹き出しの枠が描けたら、内側を「Flood Fill」で塗りつぶします。
090331ac17.gif

ここで色を選択して、塗りつぶしたい箇所にポインタ(ペンキ缶になる)を持って行って、クリックして塗りつぶします。
090331ac18.jpg




▶ Shape

Shape」ツールで少しばかり、四角、円、直線のベクタ形式の図形を描くことができます。
090331ac20.gif
Fill」は描画色で図形内部を塗りつぶし
Stroke」は背景色で枠線を描く
Corner radius」は四角の角を丸める

ここでは「Oval」(円)を使って吹き出しを描きます。
090331ac21.jpg

マウスでドラッグして描いてもいいし、ウインドウのどこかをクリックして数値入力で図形を配置することもできます。

「Shape」ツールで図形を描くときには、新たに「Shape Layer」というレイヤが作られます(設定による)。

ベクタ形式の図形なので、「Select」ツールで選択して移動・変形したり、線の太さを変更したり、色を変更したりすることがきます。
090331ac23.jpg


また「Tools」ウインドウで「s」ボタンをクリックすると、ドロップシャドウ(影)の設定もできるようになっています。
090331ac22.gif




▶ Text

Text」ツールでテキストを入力します。
090331ac24.gif

ここでフォントや大きさなどを設定します。もちろんフォントパレット( command+T )でも設定可能です。

フォントも「s」ボタンでドロップシャドウを付け加えることができます。

希望する場所でクリックして、キーボードで文字を入力します。
090331ac25.jpg



さあ、これで出来上がりです。
090331ac27.jpg





▶ Web Export

描き終わったら保存します。
Acorn には描いたものをホームページなどにアップする場合に便利な、
Web Export...」( option+shift+command+S )という機能があります。

これはWeb上でよく使われる PNG, JPEG, JPEG2000, GIF の形式で、メタデータを少なくしてファイルを書き出し保存します。

090331ac26.jpg

このウインドウでプレビュー表示(オリジナルも表示可能)され、左下に保存後のファイルサイズが表示されるので、どのフォーマットがいいのか、どれくらいの質にするか、が分かり易く保存できます。

JPEG の「Progressive」は画像を表示するときに、全体を粗く表示してから次第に細かく綺麗に表示して行くようにします。
軽い画像では使う必要はないと思うけど、容量が大きいものなどで使うと、ホームページで表示するときに最初にどんな画像かを確認できたりします。

PNG, GIF ではインターレースで保存できません。





Acorn には他にも shift+command+6 のホットキーでスクリーンショットを撮影し、そのまま Acorn で編集できる機能があったり、
090331ac28.jpg
(Acorn が最前面アプリでなくとも、起動していればホットキーは有効)

また、iSight で撮影してそのまま編集できたり
Imageメニュー > New Image from iSight...(or New Layer from iSight...

ここでは紹介しきれない機能がたくさん有ります。
このエントリでは、画像編集の機能を説明していますが、僕の使ってみた感想では Acorn は画像編集の機能はちょっと弱く、ドローイング機能が強いと思います。

画像編集機能では、去年の MacHeist Bundle で購入した「Pixelmator」の方がいろいろ使えると思います。
(でもPixelmatorのUIは見づらくて使いづらい・・・結局 Gimp を使っちゃうんだよなあ・・・)

Acorn は筆圧にも対応しているようなので、ペンタブレットがあれば、かなりいい感じで使えると思います。それに画像の簡単な編集であれば「Web Export」機能があるので、ホームページにアップする画像を作るのにいいと思います。






この記事では Acorn 1.5.2 (2789) を使用しています。

(ダウンロードリンク)
Site top page : Flying Meat Software
Download page : Acorn, the image editor for humans.

edit

Graphic | CM:4 | TB:0

tag : Drawing  画像編集  ScreenCapture  iSight  VectorImage 

+

http://wakabamac.blog95.fc2.com/blog-entry-755.html

DrawIt Lite
icn_DrawIt_Lite
DrawIt Lite : ベクタイメージを描けるドローイングツール
OS10.4、10.5以上(UB) 各対応
フリーウェア(上位バージョンの DrawIt Pro は €29 or $40)

(追記)
フリーで使える「DrawIt Lite」は公開停止になりました。
今現在はシェアウェアの「DrawIt」(€29)のみの公開になっています。
(追記おわり)



Adobe Illustrator のように、ベジェ曲線などを使ってベクターイメージが描けるドローイングソフト「DrawIt Lite」の紹介です。
(「DrawIt Lite」はフリーで機能制限有り、「DrawIt Pro」は制限なし)

081220dil1


基本的な操作は
command+Z Undo
shift+command+Z Redo
delete 選択している図形・グループ・アンカーポイントなどの削除
command+ 表示の拡大
command+ 表示の縮小
option+マウスホイール回転 でも表示の拡大・縮小(ちょっと変な動きをする)
Space+マウスドラッグ で表示範囲の移動
・マウスホイールの回転 で表示範囲の縦移動、shiftキー を押しながらやると横移動
・図形選択後に でその図形・アンカーポイントなどの微移動
・ホットキーで前後関係の移動もできるけど、レイヤをドラッグ&ドロップして順番を変える方が確実。




DrawIt Lite にはレイヤ機能があるのですが、一般的なドローイングソフトのレイヤとちょっと概念が違います。
081220dil2
ここのレイヤは図形1つにつき、1つのレイヤが作られます。円を1つ描けば「oval」レイヤといった具合で作られて行きます。

複雑な図形は大量のレイヤになってしまうので、複数の図形を選択してグループ化しておきます。

項目をダブルクリックすれば、レイヤもグループも名前変更できるので、分かり易い名前にしておきます。

「カギ」のマークをクリックすれば図形・グループをロック(or アンロック)し、「目」のマークで表示/非表示を切り替えます。

あるグループ内の図形を別のグループへ移動すると、その図形の位置がずれてしまうことがあります。グループ内では相対的な座標が使われているらしく?、この仕様はちょっと使いづらいです。




081220dil3ツールバーの「」から画像を読み込んだり、各図形ツール、パスの描画、テキスト入力を操作します。

ただ、デフォルトのツールバーではかなり使いづらいので、ツールバーのカスタマイズで各ツールを表示させておいた方がいいです。
(Pro版だとツールが多くて使い易そう)

この「Shape」の各ツールを選択すると、いきなりその図形を配置します(ちょっと操作が独特)。
図形を選択して移動、拡大・縮小したりして、描きます。





左下の「ATTRIBUTES」にその図形の数値データが表示されるので、この数値を入力して大きさ変更などしたりできます。
081220dil4

Size」の「Proportionally」にチェックしていると、拡大・縮小するときに比を崩さずに実行できます。
shift+ドラッグ でも同じ)

Rotate」の「Free」をクリックすると図形をドラッグして自由な角度に回転できます。

Blending」は描画モード。図形を重ねて描くとき、例えば「光沢」などを表現したいときに「Overlay」モードにしたりします。



ツールバーの「Vector」で自由な形の図形が描けます。
081220dil5
図形が「開いた形状」「閉じた形状」かは、右上の「Close Path」にチェックして決めます。

描画と編集が同時に行われ、描画中にも既に描いたアンカーポイントの修正ができます。しかし、クリックして新しくポイントを作ろうとしたときに隣のポイントが選択されてしまうことがよくあり、ちょっと使いづらい。

returnキー で形状を決定し、パス描画・編集を完了します。

図形をダブルクリックか、選択してreturnで、再びパスの描画・編集モードになります。
もちろん、「Shape」ツールで配置した図形も、これでパスの編集ができます。



右ペインで選択している図形の色(面の色・輪郭線の色)などを設定します。
デフォルトでは「Color Fill(面の色)」「Inner Shadow(内側の影)」「Stroke(線の太さ・形状・色)」が表示されます。
081220dil6

ここの各要素の「目」のマークで、その要素の表示/非表示を切り替え、「×」ボタンでその要素を削除します。

例えば「Stroke」の「×」をクリックすると、その図形の輪郭線は無くなります。


下の「FAVORITES」のところの各要素をダブルクリックして、追加することができます。例えばグラデーションを付けたいときは「Linear Gradient」をダブルクリックします。
081220dil8

要素は順番があって、一番下のものが図形の前後関係で一番前に来ます。

だから、グラデーションに「Inner Shadow」を付けたいならば、「Linear Gradient」をドラッグして位置を変えます。



下の「」ボタンで、「FAVORITES」にない要素も加えることができます。
081220dil9
「Blur」は図形をぼかします。




バグなのか、仕様なのか分からないけど、図形の「Stroke(輪郭線)」のみを表示したい場合、「Color Fill」の要素を削除(or 非表示)してもそうなりません。

なので、「Color Fill」の色をカラーパネルで「透明」に設定して、輪郭線のみを表示するようにします。
081220dil7





ツールバーの「Expose」ボタンをクリックすると、グループや図形(レイヤ)一覧を表示します。
081220dil10

これで、どれかをクリックするとそのグループ(or レイヤ)を選択できます。

グループ内の図形を1つ選択してから「Expose」を実行すると、そのグループ内の図形をExpose表示します。




ツールバーの「Position」ボタンをクリックすると、座標ガイドが表示されます。カーソルキーなどで位置を微調整するときに、これを表示させておくと便利です。
081220dil11




command+S でファイルを保存します。
081220dil12
拡張子「.drawit」のファイルとして保存されます。
このファイルは、アイコンプレビューとQuickLookも有効です。


Fileメニュー > Export...shift+command+E
で他の画像ファイルとして書き出せます。
081220dil13
「JPEG」「PNG」「TIFF」「GIF」のフォーマットにでき、出力先をクリップボードやiPhotoにできるオプションも使えます。




ちょっと独特の操作感がある DrawIt Lite ですが、慣れればそんなに気にすることもなく使えると思うし、フリー版でここまでできるのはすごいと思います。
Pro版にすれば、パス図形の合成・除外や、テキストのラスタライズなど、Lite では制限されている機能が使えるようです。






この記事では DrawIt Lite 1.3.3 を使用しています。

(ダウンロードリンク)
Site top page : DrawIt » Home
Download page : DrawIt » drawit

edit

Graphic | CM:0 | TB:1

tag : Drawing  VectorImage 

+