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

2023 / 06

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-1090.html

PixAM
icn_PixAM.jpg
PixAM : スクリーンショットを撮影してアップロードして共有する
OS10.6.6以上(Intel)
フリーウェア


スクリーンショットを撮影して、注釈を付けたりして、簡単アップロード、すぐさま誰かと共有できる「PixAM」の紹介です。
110310pam1.jpg

GyazoSkitch のようなアプリケーションです。


起動するとメニューバーの右側にアイコンが表示されるので、このメニューから、もしくはショートカットキーでスクリーンショットを撮影します。
110310pam2.jpg
画面全体( control+command+3 )、矩形選択( control+command+4 )、クリックしたウインドウ( control+command+5 ) を撮影できます。


スクリーンショットを撮影したら、PixAM のウインドウが開いて注釈を加えたり、ぼかしたりできるようになっています。
下のツールアイコンをクリックして、注釈を加えたりします。
110310pam3.jpg

クロッピングや、画像のリサイズなんかはできません。


右のアップロードボタンをクリックすれば、すぐさま Pix.AM に画像がアップロードされて、画像をWebブラウザで開きます。

後はアドレスをコピペするなりして、Twitter とか メールに貼付けたりして、画像を共有するときに便利に使えます。

試しにアップロードした画像のアドレスをイメージタグで指定して、自分のブログに表示してみたところ。
(画像置き場にしてもいいのかなあ?)
CdO5.png





この記事では PixAM 1.2.3 を使用しています。

(ダウンロードリンク)
Site top page : Smart Apps - Applications for your Mac, iPhone, iPad
Project page : PixAM | Smart Apps
Download page : PixAM
(↑ Mac App Store のページです)

スポンサーサイト



edit

Graphic | CM:1 | TB:0

tag : ファイル共有  画像編集  Drawing  ScreenCapture  Upload  WebService 

+

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

Sketch
icn_Sketch.jpg
Sketch : ベクターイメージのドローイングソフト
OS10.6以上(UB)
シェアウェア €42(今現在は期間限定で€32に割引中)


ベクターイメージのドローイングソフト「Sketch」の紹介です。

100919sk1.jpg

同じ作者さんが作った「Drawit」も似たようなベクターイメージを描くためのアプリケーションです。

「DrawIt」はコアイメージフィルタでビットマップ画像を加工できるなどの機能がありますが、それに対して「Sketch」はベクターオンリーの機能で、前者のアプリより「描く」機能が多いです。


「DrawIt」と同様、この手のアプリケーションの「レイヤ」の概念が独特で、1つのオブジェクト・グループが「レイヤ」となります。
100919sk2.gif

長所は複数のオブジェクトが重なり合っているときなど、サイドのカラムから確実に選択できます。▼のところのリストで表示形式を選択できます。サムネイル表示してると使いやすい。
それと前後関係がわかりやすいです。


それと「ページ」というものが有り、これは1つのファイルに複数のドキュメントを保存するようなものです。ホームページの各ページのデザイン案などを「ページ」に分けておくなどすると便利かと思います。

また同じものを複数配置する、複数のページに同じ絵を配置するときなどは、その描いたオブジェクトやグループを「Symbol」として登録しておくと便利です。
「Symbol」を編集すると、「ページ」に配置した複数のシンボルが一気に編集できます。

例えば、作者さんのサンプル画像で「Man Symbol」をちょっと編集してみると・・・
100919sk3.gif

「Main Page」に配置されているシンボルもそれに変わります。
100919sk4.gif




操作はツールバーのアイコンやショートカットキーを使っていきます。
特にツールバーは自分の使いやすいようにカスタマイズした方がいいでしょう。いろいろなツール用のアイコンが用意されています。
100919sk5.gif


基本的には「Shape」ツールで何かの形を配置して、拡大縮小したり、ダブルクリックしてアンカーポイントを編集するとかします。
すぐに形が配置しないように環境設定で選択できるようになってます。
100919sk6.gif


レイヤを選択して I(アイ) キーを押すとインスペクタが表示されるので、ここで線の太さ・形状や面の色・グラデーション、影の有無などを設定できます。
100919sk8.jpg

インスペクタを常時表示するときは、このウインドウをドラッグ&ドロップして場所を移動すると、選択を外しても常時表示されるようになります。

選択したレイヤが絵の上でどれかわからない状態になってるときは、Sキー で表示/非表示きりかえできます。
これは常に表示させておいた方がいいと思います。


よく使う操作として、上記のものを含めて箇条書きにすると・・・
  • command+ ズームイン
  • command+ スームアウト
  • command+0(ゼロ) 等倍表示
  • command+1 選択しているものをズーム

  • command+2 選択しているものをウインドウの中心に
  • space+ドラッグ 表示範囲の移動

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

  • S 「選択」を表示/非表示
    (※1度表示させたら、ずっと表示させっ放しの方がいい)

  • I(アイ) インスペクタの表示/非表示
    (インスペクタウインドウをドラッグ&ドロップして移動してやると常時表示されるようになる)

  • L レイヤガイドの表示/非表示
    ("ON" だとオブジェクトの移動のときなどに、他のレイヤのオブジェクトとの位置関係で頂点や辺が揃うようにスナップされる)

  • 選択して return アンカーポイント編集モードをトグル
    (ダブルクリックでアンカーポイント編集モードへ、esc で戻る)

  • command+D レイヤ・グループの複製する
  • delete 選択しているものを消去

  • shift+command+H レイヤ・グループを隠す/元に戻す
  • shift+command+L レイヤ・グループをロック/アンロック

  • option+マウスオーバー 選択してるレイヤとポインタ上のレイヤの距離を表示する
  • option+リサイズ 形の中心を基準にリサイズする






実際に何かを描いていくと手っ取り早く使い方を覚えられるので、下のような旧iTuesnsアイコン風の音符を描いてみます。
100919sk7.jpg


現在のiTunesアイコンの音符を基準にしたいので、その512pxの画像を取り出して、Sketch のウインドウにドラッグ&ドロップしてそれをトレースしていきます。
100919sk9.jpg
(トレースするときは、仮の色で半透明にして作業すると「ズレ」を修正しやすい)


トレースできたらそれぞれのレイヤをグループ化して、「Dynamic Shape」に✓し、「Union」を選択する。
100919sk10.gif
こうすることによって、グループを1つのオブジェクトのように扱えます。
グループ化を解除したらまたバラバラにできるので、普通の「Union」よりも融通が効く。


このグループを複製し、その1つをグループ化解除してそれぞれのレイヤにグラデーションを付けていきます。(複製するのは形を誤って崩してしまったときの予備を作っておく意味もあるので)

まず「お玉」部分から。
インスペクタを開いて「Fill」>「Radial Gradient」を実行。
グラデーションのガイドが表示されるので、中心・円周・楕円の具合を調整して、だいたい元の「お玉」の部分の形に合わせます。
100919sk11.jpg
半径にあたる部分のライン上をダブルクリックすると、その部分の色を設定できます。
(グラデーションの自由度はかなり高いと思う)


次に内側に半透明の楕円を描きます。楕円の形をアンカーポイントを弄ってちょっと崩した形にします。
100919sk12.jpg
インスペクタで白の透明で内側の影を付けます。
(Inner Shadow だと輪郭が強調されすぎなんだけど、見なかったことにしよう・・・)



もう一つ楕円を描いて、青白ぽいっ色から透明になるようにグラデーションを付けます。
100919sk13.jpg


これができたら「お玉」の部分をグループ化。複製してもう片方に合わせて傾きや形などを微調整します。



次に♫の上部に色を付けていきます。
縦方向にグラデーションを付けます。(お玉の部分との境はできるだけ近い色になるように調整します・・・と書いてるけど、ほとんど隠れてしまうのであまり意味はないので忘れて下さい。画像の方に書いた文を修正してないだけです。)
100919sk14.jpg


この上の部分を複製して、今度は横方向にグラデーションをかけます。真ん中の部分は透明にし、下のレイヤが見えるようにする。
100919sk15.jpg
(なんだか苦し紛れな表現方法だけど、バージョンアップでそのうちブレンドモードが使えるようになるらしいので、もっと楽になるかと思います。)



次にテカリ部分の Vectorツール で描きます(下のピンク部分)。はみ出すように描いて、あとではみ出した部分を統合して重なり合った部分を残すようにします。
100919sk16.jpg
予め下のレイヤを複製しておきます。BooleanIntersect を実行すると2つのレイヤの重なり合った部分が残り1つのレイヤになります。(元のレイヤは無くなるので複製を作ってから)

上記の方で書いたグループの「Dynamic Shape」を使った方法でもOKです。



この部分にもグラデーションをかけます。
100919sk17.jpg


その次に、また上部の部分の複製を作ります。(レイヤの順番に注意。「テカリ」部分のすぐ下のレイヤにします。)一番上部の「横棒」部分のみに色を付けて下の方は透明になるようにグラデーションを付けます。
100919sk18.jpg
レイヤの重なり具合で、ちょうどエンボスの段差がついたような感じにします。
(言ってることが通じるか自信がないけど、意味わかるかな?)

さらに、このレイヤのおかげで下のレイヤの縦の影の部分が見えなくなってしまうので、横方向に縮小します。
100919sk19.jpg




次に右側の縦棒部分の「テカリ」を表現します。
新規のレイヤで四角を描いてグラデーションを付けます。
100919sk20.jpg




次に横棒部分の上下に細い「テカリ」のラインをつけます。
Vectorツール で新規に描き、グラデーションで色を調整します。
100919sk21.jpg
Sketch に「ぼかし」機能のようなものがないので、「Shadow」で代用します。
オフセット(X,Y)は0にして、Blur でぼかし具合を設定します。色は水色で。

ちょっと苦しまぎれの方法だけど、それなりに「ぼかし」たように見える。





最後に一番最初に予備でとっておいたグループのレイヤをまた使って、♫全体に「影」を付けます。
このレイヤを最下層にして、青色にします。影を適当に付けて出来上がりです。
100919sk22.jpg



できたものはこんな感じ。※あまり拡大して見てはいけない。
100919sk23.jpg
同じ表現でも、人によっていろいろなやり方があるので、上記で書いた方法が一番いいとは限りません。



('10/10/01追記)
上記で描いた「♫」を作者さんのサイトで作品例として採用してもらいました。
興味ある人はダウンロードしてみて下さい。
Sketch | Examples
Sketchの編集可能なサンプルファイルとしてダウンロードできます。
(追記おわり)





Sketch」をいろいろ弄ってみて、ここでは触れていないけど、ストロークに太さを与えたり、回転しながら連続複製する機能があったり、いろいろおもしろそうな機能がたくさんあります。
version1.0.0 のころはバギーな点が多かったけど、バージョンアップを重ねるごとに安定してきています。
そのうちブレンドモードも付けるって作者さんがTwitterでつぶやいていたので、上記の苦し紛れの表現方法もずいぶんと楽になると思います。

あと「Sketch」はベクター機能に特化しているアプリケーションなので、コアイメージフィルターなどビットマップ編集機能はありません。最近のベクターアプリには大抵付いてたりするので、その辺りを期待しない方がいいでしょう。
購入を考えてる人は1ヶ月の試用期間があるので試してみるのがいいでしょう。







この記事では Sketch 1.0.4 を使用しています。

(ダウンロードリンク)
Site top page : Home | Bohemian Coding
Download page : Sketch | Vector drawing for OS X



(関連記事)
DrawIt Lite --- 同じ作者さんのベクターアプリ
(フリー版の「DrawIt Lite」は公開停止 → シェアウェアの「DrawIt」になっています)

edit

Graphic | CM:3 | TB:0

tag : VectorImage  Drawing 

+

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

ArtRage 2
icn_ArtRage2.jpg
ArtRage 2 : 油彩・鉛筆など様々な描き方ができて使いやすいお絵描きツール
OS10.3.9以上(UB)
シェアウェア \3,040 (機能制限版はフリー)


油彩・鉛筆・マーカー・クレヨン・チョークなど様々な描き方ができて、使いやすいお絵描きツール「ArtRage 2」の紹介です。

100827ar1.jpg

実際に紙の上に描くような感覚で使え、ユーザインターフェイスも使いやすく、お絵描きが好きならフリー版でもけっこういけてるアプリケーションだと思います。
(僕は持っていないけど)ペンタブレットがあればもっと楽しいと思う。


既に上位版の「ArtRage 3」が公開されているんだけど、機能制限付きのフリー版の ArtRage 2 で試しています。
フリー版ではレイヤー、ステンシル機能、各種ツールが使えなかったり、いろいろ制限されています。
お絵かきツール | ArtRage 2.5 機能比較表 | イーフロンティア


下の紹介動画は「ArtRage 3」のものです。




ArtRage 2 では「油彩の筆」「鉛筆」「チョーク」「マーカー」「クレヨン」風に描くことができます。
100827ar2.jpg


左下で油彩や鉛筆などツールを選択して、その太さや筆圧などの詳細を設定しながら描いていきます。
例えば「筆」ツールで説明すると・・・
100827ar3.jpg
実際に筆で描いているみたいに、一筆描きをしていると絵の具の補充量によって、徐々にかすれていくようになっています。



右下が色パレットになっています。
100827ar4.jpg
色を重ねていくと、まだ絵の具が乾いていないかのごとく、下の色と混ざり合うようになります。
(「すぐに乾燥」させる機能はフリー版では使用不可。)


「自動洗浄」をOFFの場合、直前に描いたものの絵の具が残っており、次の色を塗るときに残ります。
100827ar5.jpg

OFFのときは右下に「洗浄用のコップ」が表示されているので、ここを何回かクリックすると筆を「洗って」いきます。
100827ar6.jpg



option+space+ドラッグ(もしくは中央下のツールで) でキャンバスをウインドウ内で回転して表示できます。
100827ar7.jpg
キャンバスを回転して、筆のタッチの方向をやりやすい方向から描けるようになっています。




よく使う操作のショートカットキーを挙げると・・・
  • space+ドラッグ キャンバスをドラッグ
  • shift+space+ドラッグ(左右)でズームイン・ズームアウト
    マウスのスクロールホイールでも同様
  • option+space+ドラッグ でキャンバスの回転
  • Dキー(半角英数で)キャンバスを初期状態に戻す

  • 右クリック or enterキー でインターフェイスの表示/非表示

  • option+クリック でポインタの位置の色を拾う

  • command+Z Undo
  • shift+command+Z(or command+Y ) Redo

  • Tキー(半角英数で)トレース画像の表示/非表示

  • でツールの太さ調整
  • で筆圧調整
    (それぞれ shiftキー を合わせると10%ずつ調整できる)





ArtRage 2 の「トレース機能」がよく、絵がうまくなくてもそれなりに画像なんかを模写スケッチできます。

例えば、下のような猫画像をトレースしてみます。
(↓トレースする元画像)
100827ar8.jpg


まず command+N で新規作品を作成します。
このときにトレース用の画像を読み込みます。
(後から ツールメニューから画像を読み込んでもOK)
100827ar9.gif
ついでにこのときに、キャンバスの大きさ、紙質、なんかも設定できます。


トレース画像を読み込むと、うっすらと背景に元の画像が表示されます。
100827ar10.jpg

そして ツール メニュー > トレースオプション
トレース画像から色を拾う」に ✓ します。
これで、絵の具の色が自動で最適なものが選択されるので、絵が下手でも簡単に描けるようになります。


「筆」ツールで背景から塗り潰していきます。
同じ色がつづく箇所はベタ塗りして、異なる色の境界や複雑な箇所は、筆で「点描」するような感じでコツコツとクリックしていきます。(最初は太めのサイズで全体を塗り潰してから、後で細かな部分を描きます)
100827ar12.jpg

Tキー でトレース画像の表示/非表示を切り替えられるので、確認しながら作業を進めます。


細かな部分は筆の太さを細く設定して描きます。難しいところは「点描」のようにクリック連打して、あとからその部分を筆でなぞるといった感じで。
100827ar13.jpg


最後に「鉛筆」ツールでひげを描いて完成です。
100827ar14.jpg


command+E で画像ファイルを書き出します。書き出せるフォーマットは下記の通りです。
100827ar15.gif

(本体は拡張子「.ptg」のファイルで保存しておきます)



それでできたものがこれ↓。
猫画像をトレースしたもの

大きく見たら粗いけど、サムネイルサイズぐらいだといい感じに見えます。
絵心無しでも簡単に描ける!






この記事では ArtRage 2.5 Starter Edition を使用しています。

(ダウンロードリンク)
Site top page : イーフロンティア
Project page : お絵かきツール | ArtRage 2 | イーフロンティア
Download page : お絵かきツール | ArtRage 2 ダウンロード | イーフロンティア



ArtRage 3(OS10.4以上)のページ
お絵かきツール | ArtRage 3 | イーフロンティア

edit

Graphic | CM:0 | TB:0

tag : Drawing 

+

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

Skitch
icn_Skitch.jpg
Skitch : スクリーンショット撮影、それに注釈書き込み編集、アップロードして共有
OS10.4.6以上(UB)
シェアウェア(ベータ版の間はフリーウェアとして使える)


スクリーンショットを撮影して、それに文字や矢印などで注釈書き込み、その画像を提供されたWebサーバーなどにアップロードして共有できるオールインワンなアプリケーション「Skitch」の紹介です。



  • スクリーンショットを撮影したり、iSightで撮影したり、既存の画像を Skitch で開く
       ↓
  • Skitch の各種ツールで画像に文字を書き込んだり、注釈を付けたり、編集する
       ↓
  • skitch.com や Flickr など画像をアップロードして共有する

    もしくは

    アップロードせずに、メールに添付して送信するなど

こんな流れで Skitch を使います。
もちろんスクリーンショットを撮影するだけ、画像に注釈を入れるだけ。画像をリサイズ・形式を変換して書き出すだけとか、一部の機能だけ使うこともできます。





【 Skitch - サインアップ 】


Skitch を利用するには、まず最初にサインアップしてユーザ登録します。
Skitch.com + Skitch = fast and fun screen capture and image sharing.
090909sk1.gif

このページで必要事項を入力してユーザ登録します。

Screenname」が提供される画像置き場のURLとなります。
https://skitch.com/Screenname/

ずいぶん以前に登録したので、今はどうだかわからないけど、ユーザ登録してだいたい1週間ぐらいすると、Skitch.com のアカウントが作られてメールで案内が届いた?と思います。

これで Skitch で編集した画像を Skitch.com にアップロードできるようになります。
(環境設定で設定すれば)






【 Skitch - 概要 】


Skitch を起動すると、メニューバーにアイコンが表示されます。
このアイコンの♥の部分をクリックすると、メインのウインドウが表示されます。
090909sk10.jpg
このウインドウが表示されているときに、もう一度メニューバーの♥をクリックすると、収納されます。もしくはウインドウのフレームの部分をダブルクリックすると収納されます(設定による)。


の部分をクリックすると、メニュー表示されます。
090909sk7.gif


環境設定( command+, )の「General」で、Dockアイコン、メニューバーのアイコンの表示・非表示を設定できます。
090909sk9.gif

Dockにアイコンを表示させている場合は、普通のアプリケーションと同じように、メニューバーのメニューを使用できます。Dockアイコンを表示させていない場合はウインドウ左上のアイコンをクリックすると、同じメニューを使用できます。
090909sk11.gif









【 Skitch - スクリーンショットを撮影 】


shift+command+5 のホットキー、もしくはウインドウ右上の「Snap」ボタンで、マウスポインタがクロスヘアラインになって撮影できるようになります。
090909sk2.jpg

このままドラッグして矩形選択すると、その選択部分のスクリーンショットを撮影します。
ウインドウ上をシングルクリックすると、そのウインドウを撮影します。

デスクトップをクリックすると、スクリーン全体を撮影。
shift+command+6 もスクリーン全体を撮影します。)


shiftキー を押さえながらクリックして撮影すると、タイマー撮影できます。
090909sk3.gif
↑タイマー撮影するときはカウントダウンされます。



shift+command+7 でフレーム撮影モードになります。
090909sk4.gif

Skitch のウインドウを「フレーム」に見立てて、ウインドウ四隅をドラッグして大きさを調整し、フレーム内部の部分を撮影します。



Cam」ボタンでiSightなどのカメラで撮影することもできます。
090909sk5.jpg




撮影が完了すると、そのまま Skitch での編集作業に移ります。



環境設定( command+, )の「Snapping」タブでホットキーや、ウインドウ撮影時に「影」を付けるかどうか、背景の色などを設定できます。
090909sk30.gif






【 Skitch - 画像を編集 】


Skitch で画像を開く

Skitch 自身でスクリーンショットを撮影した場合は、すぐに Skitch のウインドウ上で編集できます。また、他の画像を Skitch のアイコンにドラッグ&ドロップして開くなどして編集できます。

iPhoto の画像を簡単に読み込むこともできます。
ウインドウ左上の「Photos」ボタンをクリックします。
090909sk12.gif

くるっとウインドウが回転して裏面でiPhotoのライブラリにある画像を表示・選択することがきます。
090909sk13.jpg

画像を Skitch で開いたら、編集していきます。
ちなみで Skitch では同時に複数のウインドウを開けないので、1つずつ編集していきます。




画像のリサイズ・クロッピング

画像のリサイズはウインドウ四隅の部分をドラッグして調整します。
内側の枠線の部分をドラッグしてクロッピングできます。これで画像のいらない部分を隠して必要な部分だけをウインドウに表示させます。
090909sk17.jpg

左下に画像のサイズ、縮小率、指定している形式で書き出した場合のファイルの容量が表示されているので、これを参考にリサイズなどするといいでしょう。

ウインドウ四隅の箇所を shift+クリック すると、縮小率「100%」の等倍になります。




各ツールについて

090909sk14.jpg

  • 【選択・移動ツール】
    書き込んだ文字や図形など選択したり、移動する
    shiftキー で複数選択、optionキー 押しながらドラッグ&ドロップすると複製
    選択した図形はカーソルキーでも移動させることができます

  • 【鉛筆ツール】
    フリーハンドの線を描く
    shiftキー を押しながらだとスムージングが軽減される
    optionキー でスポイトで色をピックアップ

  • 【ラインツール】
    直線を描く
    shiftキー で45°スナップ、optionキー 押しながらで連続で折れ線を描ける

  • 【円ツール】
    円・楕円を描く
    shiftキー で正円、optionキー 押しながらで円の中央を基準に

  • 【四角ツール】
    四角形を描く
    shiftキー で正方形、optionキー 押しながらで四角形の中央を基準に

  • 【バケツツール】
    囲まれた部分を塗り潰す
    optionキー でスポイトで色をピックアップ
    shiftキー で囲んだ線と塗り潰し部分をグルーピングしない
    (普通は囲んだ「線」と塗り潰した「塗り」の部分はグループ化されている)

  • 【消しゴムツール】
    描いた図形を消す(文字は消えない)
    shiftキー を押しながらだとスムージングが軽減される

  • 【文字ツール】
    文字を挿入する
    他のツールを選択中であってもタイプし始めると文字ツールになる

  • 【矢印ツール】
    矢印を挿入する
    optionキー を押しながらだと矢印が逆向きになる

  • 【Size】
    線や文字の大きさを調整する
    shiftキー 押しながらドラッグすると微妙に調整可能




090909sk15.jpg


あと各ツールで共通の操作方法として次のようなものがあります。
  • escキー を押すと【選択・移動ツール】に切り替わる
  • 何か文字をタイプすると【文字ツール】に切り替わる

  • commandキー を押している間は【選択・移動ツール】になる
  • controlキー を押している間は【消しゴムツール】になる
  • tabキー で【鉛筆ツール】とそれ以前に選択していたツールをトグルする
    (「tab」キーを押すと一度【鉛筆ツール】になり、もう一度押すと以前選択していたツールに戻る)

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




Skitch は画像に対して文字注釈を入れることが、特に秀逸にできています。
【文字ツール】は、何かのキーをタイプしていくと自動的にそれに切り替わるようになっていて、すぐに文字入力できるようになっています。
書いた文字の左端の部分をドラッグ&ドロップして移動します。
090909sk16.jpg

フォントパネル( command+T )を開き、左下の「Outline」「Shadow」の ✓ で文字のスタイルを変更できます。




画像を書き出す

Skitch のウインドウの下にある「drag me」の部分を他のアプリケーションのウインドウにドラッグ&ドロップして、画像をそのアプリに渡すことができます。
090909sk19.jpg

Finderウインドウやデスクトップにドラッグ&ドロップすると、指定した形式の画像ファイルとして書き出し、保存できます。

またMail.appにドラッグ&ドロップすれば、添付の画像とするなど。


書き出すファイルの形式はリストから選択しておきます。
090909sk20.gif


また画像を書き出す際の動作が、とても親切な作りになっています。
090909sk18.jpg
ドラッグし始めると Skitch のウインドウが小さくなって、他のウインドウが見やすくなり、また、ファイル形式、ファイル容量もポインタの部分にプレビューされる親切設計。




画像を保存する・履歴を管理する

Save→」ボタン、もしくは command+S でファイルを保存します。

Skitch では「上書き保存」はされません。過去の履歴を残す仕様になっており、同じ画像を編集中に何回か保存したりすると、その都度新しいファイルが作成されていきます。

/Users/登録アカウント名/Pictures/Skitch/

のフォルダ内に「○○○.skitch」という拡張子のファイルで保存されます。




ウインドウ右上の「History」ボタンをクリックします。
090909sk21.jpg

Skitch のウインドウが裏返って過去の履歴を管理することができます。
090909sk22.jpg

保存したもの、ドラッグ&ドロップして書き出したもの、Webサーバーにアップロードしたもの、すべて管理できます。

これらの中からどれかを選択して、再度 Skitch で編集したり、その画像を削除したりすることができます。




画像をWebサーバへアップロード

Skitch から提供されるサーバ「skitch.com」へクリック1つで画像をアップロードすることができます。
環境設定(command+, )の「Webpost」タブを開きます。
090909sk23.gif

ここで「skitch.com」のアカウントを選択して、サインアップで登録したメールアドレス、パスワードを入力して設定します。


これらの設定を行ってから、Skitch で編集した画像を、ウインドウ右下の「webpost」ボタンでアップロードします。
090909sk24.jpg

アップロードが完了すると「Share!」ボタンに代わります。
090909sk25.jpg

これをクリックすると、Webブラウザでアップロードした画像のページを開きます。
090909sk26.jpg


ここの右側で、このページのURLなどをクリップボードにコピーできるようになっています。
090909sk27.gif

試しに「Embed」をコピーしてみると、このページへのリンク付きの画像サムネイルを自分のブログに貼付けることができます。
(↓試しに skitch.com にアップロードした画像)
kuma
Uploaded with plasq's Skitch!


Fullsize」だと、リンク無しの実際の大きさのイメージタグをコピーし、ブログなどに貼付けることができます。

画像置き場として使えて便利です。

また Twitter へ投稿する場合、「Send to Twitter」のテキストフィールドに「つぶやき」を入力して、投稿できます。だけど、文字表示が小さくてちょっと使いづらい。




Skitch では「skitch.com」でなくとも、「Mobile Me」や、特定のFTP/SFTPサーバ、Flickr などへもアップロードできます。

環境設定の「Webpost」タブを開いて、左下の「」ボタンから、それらを追加・設定を行います。
090909sk28.gif


複数のサーバを設定している場合、画像をアップロードする際に、「webpost」ボタンの隣のリストからアップロードするサーバを選択することができます。
090909sk29.jpg


(↓試しに Flickr にアップロードしてみた画像)
skitchのテスト
Skitch のレビュー記事を書くのにあまりにも長い時間が掛かってしまって、飽き飽きして苦悩している自分の自画像。
関係ないけど【鉛筆ツール】はブレを補正してくれるので、マウスでも思ったよりも滑らかに描ける・・・。




Skitch はシェアウェアでベータ版の間はフリーで使えるアプリケーションなのですが、もうずっと長い間ベータ版のままです。
「ベータ」と言っても、安定しているし、すばらしく使いやすいアプリケーションです。





この記事では Skitch 1.0b8.6 (v2520) を使用しています。

(ダウンロードリンク)
Site top page : Skitch.com + Skitch = fast and fun screen capture and image sharing.
Download page : 上に同じ


edit

Graphic | CM:4 | TB:0

tag : 画像編集  Drawing  ScreenCapture  Upload  WebService  ファイル共有 

+

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

スケッチ風ドロー
icn_SketchyDraw.jpg
スケッチ風ドロー : 簡単なベクター図形が描くのに適したドローイングツール
OS10.6(Intel)、OS10.5(UB)
フリーウェア


簡単なベクター図形を描いたり、写真に注釈を付けたりするのに適した「スケッチ風ドロー」の紹介です。

100510sd2.gif

ツールパネル」( option+command+T )の各ツールを選択して、図形などを描いていきます。
100510sd1.gif
(※画像はヘルプより拝借)
少し補足しておくと・・・
テキスト」入力するときは、まず入力する範囲を四角を描くようにドラッグ&ドロップで指定してから入力します。

ベジェ曲線多角形などのオブジェクトを編集するときは、ダブルクリックして各アンカーポイントを操作します。




描いたオブジェクトの詳細を「インスペクタ」ウインドウ( option+command+I )で設定できます。


位置と寸法
100510sd3.gif
オブジェクトの位置や回転などを操作できます。
「スケッチ風ドロー」では、よくある shift+ドラッグ で比を保ったまま拡大縮小するといった操作ができないので、ここで微調整したりします。

オブジェクトが線形のものであれば、矢印付きの線にできます。



('10/05/16追記)
option+ドラッグ すると、図形の比を保ったまま拡大縮小できます。
コメントで教えて頂きました。
(追記おわり)



線と塗り潰し
100510sd4.gif
オブジェクトの「線」と「面」の部分の色など設定します。グラデーションなどもでっていできます。
カラーパネルでのカラーピッカーの種類によっては、カラーパネルがうまく動作しないものもあります。



破線と影
100510sd5.gif
オブジェクトの「線」の部分を破線に設定できます。また影も付加できます。



他によく使う操作として
  • Undo command+Z, Redo shift+command+Z
  • (オブジェクトを)前面に出す shift+command+F
  • (オブジェクトを)背後へ送る shift+command+B
  • グループ化command+G
  • ロック command+L
こういったものがあります。

また フォーマット メニュー > 整列とサイズ変更 から
複数オブジェクトの整列や揃えなどの機能を使えます。
100510sd6.gif



ファイルを保存すると拡張子「.skt3」のファイルで保存されます。
100510sd7.gif
このファイルは、Finderで QuickLook や アイコンプレビュー もできます。



また書き出せるフォーマットは以下のようになっています。
PDF, TIFF, EPS, SVG となっています。
100510sd8.gif




「スケッチ風ドロー」では画像ファイルをウインドウにドラッグ&ドロップして画像を読み込み、それに注釈を書き込んだりできます。
100510sd9.jpg

この状態でTIFF形式に書き出すと、書き込まれた部分だけの大きさになって、余白部分は透明な画像になります。
100510sd10.jpg
(プレビュー.app で開いてみたところ)

こんな感じの画像になるので、ホームページなんかで使う画像にキャプションを入れたりするときに使えるかと思います。



「スケッチ風ドロー」の機能から言って、本格的な絵を描いたりするにはちょっと難がありますが、簡単なスケッチや文章書き、画像に注釈を入れる、などの使い方に適していると思います。
それに、PDFに書き出せるので、ちょっとしたパワーポイント的な使い方にも向いているかと思います。






この記事では スケッチ風ドロー 10.6.4 を使用しています。

(ダウンロードリンク)
Site top page : 佐藤昭アプリケーション工房
Download page : スケッチ風ドロー

edit

Graphic | CM:3 | TB:0

tag : VectorImage  Drawing  画像編集  SVG  文書作成 

+