テキストのアウトライン化もデキる!FireworksからSketchに乗り換えてから覚えた小ネタ

公開日:2013年5月23日 

テキストのアウトライン化もデキる!FireworksからSketchに乗り換えてから覚えた小ネタ

Fireworksで使ってたあの機能、Sketchではどうやるんだ?と思い調べた結果です。写真(ビットマップ画像)の切り取り、イラストレータ、フォトショップデータをSketchで編集、マスクのかけ方、画像書き出しの自動範囲指定、テキストのアウトライン化について書きました。


追記:2014.4.17
sketchの新バージョン「sketch3」がリリースされました。本記事はsketch2についてです。

App Storeからダウンロードsketch3

グラフィック制作のアプリをFireworksからSketchに乗り換えて1週間。
「Fireworksで使ってたあの機能、Sketchではどうやるんだ?」って思って調べた結果です。
英語のマニュアルをスラスラ読めたらわかることかも知れませんし、正しいやり方じゃないかもしれませんが、備忘録として書いときます。

写真(ビットマップ画像)の切り取り

Fireworksでは選択ツールで選択して切り取ったりできました。
Sketchでは選択ツールが無い(?)けど、写真をダブルクリックして切り取りモードになります。

sketch01

このように「Click & drag to〜」が表示されたら切り取りモード

sketch02

点線で対象を囲みます。

sketch03

デリートしたりコピーしたりできます。

IllustratorやPhotoshopのデータ(ai,epsなど)のパスデータをSketchで編集する

有料でも無料でもベクター素材などはepsファイルが多いです。
epsファイルは、sketchで読み込んでも、解像度に依存しないキレイな画像が扱えますが編集はできません。
なので、一度IllustratorやPhotoshopでSVG形式で保存すれば、Sketchで編集可能なデータになります。

sketch04
sketch05

画像キャプチャ撮るほどの事でも無かったな。SVGで保存する時、画像を埋め込まないとsketchで開いた時に表示されません。(リンク機能は無いみたい)

写真(ビットマップ画像)にマスクをかける

sketch06

Fireworksで多様していたマスク。写真のマスクは簡単です。上図のようにマスクしたい形をShapeで作って、写真の上に配置します。で、写真とShapeを両方選択して「Edit」→「Mask With Selected Shape」

sketch07

マスクしたい形を作るShapeは、Fireworksのように「白 線無し」でなくとも問題無いです。

Shape(パスデータ)にマスクをかける

追記:2013.7.10
キャンパスの一部でマスクしようとこのやり方でやったら、キャンパス全体で効いてしまった。という事でこのやり方はキャンパスで1個の何かを作るとき専用です。

Fireworksでのマスク処理は、上記のやり方でオールOKだったが、Sketchでは違って迷った。まだマスターしたというほどではない。

sketch10

例えば星を赤と青に塗ったような図を作る場合、上図のように「色用のShape」と「形用のshape」を用意する。

sketch11

次に「形用のshape」を「色用のshape」の下に配置する。(なぜ下なのかは不明。そういうものなんだろう。イラレやフォトショではどうなんだろ?)

そして「形用のshape」を選択して、「Edit」→「Use as Mask」。
最後に「形用のshape」と「色用のshape」をグループ化する。

sketch12

オブジェクトを自動でエクスポート(画像書き出し)範囲指定する

sketch13

Fireworksでもできた「書き出し範囲一括指定」もちろんグラデーションの端までちゃんとスライスされます。
選択して「File」→「Add Slices For Selection 」
複数オブジェクトで1つの画像にしたいならグループ化してからでないと、細々したパーツがすべて書き出し範囲が設定されてしまう。

テキストのアウトライン化

追記:2014.2.15
facebookコメントで教えていただいたのですが、Fireworksでもアウトライン化できました。誤った情報載せてしまい申し訳ございません。

これはFireworksには無かった機能。
イラストレータでお馴染みのテキストのアウトライン化
イラレってこれがあるから、印刷業界のデファクトスタンダードなんじゃないかと思ってました。
4300円のソフトウェアでもできるなんてステキです。

sketch08

Edit(Macのタスクバーじゃなくて、グリーンのEditアイコン)を選択するとパスを編集できる。

sketch09

イラストレータやフォトショップのパスデータをSVG経由で扱えるのは嬉しいですね。
しかし、いまだにFireworksデータ(レイヤー付きPNG)の移行方法は見つかりません。Fireworksでai形式で保存してもグチャグチャになります。aiにキレイに変換できればそこからSVGにするんだけどなぁ…

今後も日々の業務をしながら小技・小ネタが増えましたら第二弾を書きます。

本記事はリソースの都合で読み返して推敲とかしてません。乱文駄文失礼!

App Storeからダウンロードsketch3


コメントを残す