ajike switch

【Sketch初心者必見!#07】Sketchは書き出しを簡単に

sketch_07_01
こんにちは!アシスタントディレクターの野村です。

前回はSketchを使用すると会議がどうなるか実際にSketchを使用した方へのインタビューや、会議時に魅力的なSketchの機能をご紹介いたしました!
(前回の記事はこちらから→【Sketch初心者必見!#06】Sketchでスマートな会議に

今回は、Sketchデータから様々なものが簡単に書き出しできる方法をお教えいたします!

一つ一つスライスしていたオブジェクトが・・・

Sketchでは簡単にスライスできるのです!
まず、キーボードのSを押すと、スライスツールにカーソルが変わります。(ショートカットキー活用です!)
そして、オブジェクトを選択すると、簡単にスライスが!
スクリーンショット 2015-11-24 16.16.07

様々なサイズに

右下の部分で、書き出すオブジェクトのサイズも変えられちゃうのです。

スクリーンショット 2015-11-24 16.16.07

デフォルトは1倍ですが、0.5倍、2倍、3倍など変更できるのはコーダーさんにとってとても便利ですね!
さらに、PNGだけじゃなくてJPEGやTIFF、PDFなど様々な形に書き出すことも可能です!

アートボードにも

スクリーンショット 2015-10-07 14.32.17
すでに一度紹介しているプラグインツール「AEIconizer」ですが、オブジェクトを様々なサイズにアートボード内に書き出すことができるのです!
単純に拡大してしまったりすると、細かいパーツで構成していたものがズレたりしてイライラします・・・
アイコンやロゴなど、サイト上の様々な場所に多用するので、とっても便利なプラグインツールですね!

アートボードをPDFに

もし、クライアントさんにアートボードを見せる場合、「スライドにしたいんだよな〜」や、「あそこだとPC使いにくいんだよね〜」なんてときにお役立ち!
Sketchでは簡単にPDFに書き出すことができるのです!
file > Export Artboards to PDFをクリックすれば、あっという間にPDFになりました。
スクリーンショット 2015-11-24 16.25.16

ただ、注意する点はSketchのスライドのレイヤー順がスライドの順番になるので、気をつけたほうが良いです・・・!
いざPDFにしたらバラバラの順番でわかりにくい資料になってしまったという可能性もあるので。

オブジェクトがCSSに・・・

CSSに書き出したい箇所を選択し、
Edit > Copy CSS Attributesをクリック。
これでアートボードにコピーされました!
スクリーンショット 2015-11-24 16.40.58

テキストエディターなどで確認してみると、確かにCSSが!
スクリーンショット 2015-11-24 16.41.22

使いこなせば、かなりの作業短縮になりますね!

いかがだったでしょうか?

これまで面倒だったスライスの作業や、CSSのコーディング作業がとっても簡単にできてしまいました!
忙しいコーダーさんデザイナーさんにとってSketchは救世主ですね・・・

まだまだ未熟な点は多いツールですが、アップデートをどんどんしており、とっても期待膨らむツールです!
ますますこの機会に使いこなしておきたいですね!
また、デザイナーやコーダーだけでなく、ディレクターの方にも是非使っていただきたいツールです。

次回はいよいよ最終回!
Sketchで簡単に指示書が作成できる方法をお教えいたします。
お楽しみに!

【関連記事】
【Sketch初心者必見!#01】Sketchで変わる?WEB制作のワークフロー
【Sketch初心者必見!#02】Sketchとは?
【Sketch初心者必見!#03】UIデザインならSketch!の理由
【Sketch初心者必見!#04】テンプレート活用で素早くUIデザイン
【Sketch初心者必見!#05】シンボル化でスピーディーに作成
【Sketch初心者必見!#06】Sketchでスマートな会議に
【Sketch初心者必見!#08】Sketchで簡単指示書作成

servi

ajike switchの更新をメールでお伝えします!

8年以上ajikeが蓄積したデザイン思考とUXデザインの知見を発信し続けるブログ<ajike switch>の更新情報を無料でメールにてお知らせ致します。

×