MENUCLOSE
twitter ツイッターfeedlyRSS

オンスタでは、オンラインで学習するために役立つコンテンツを掲載しています。そのほか、UdemyをはじめとしたEラーニングサービスの紹介も行っています。

オンスタ | オンラインで学習するための近道になるサイト
Sketchを使ったイラストレーター(illustrator)から爆速でコーディングする方法

Sketchを使ったイラストレーター(illustrator)から爆速でコーディングする方法

公開日:2017年07月29日
最終更新日:2017年07月29日
オンスタ運営
マークアップ
ホーム > 全記事一覧 > 制作 > エンジニア > プログラミング > Sketchを使ったイラストレーター(illustrator)から爆速でコーディングする方法
このエントリーをはてなブックマークに追加
Sketchを使ったイラストレーター(illustrator)から爆速でコーディングする方法
【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

こんにちは!GrowGroupでエンジニアをしている石原です。

いや〜最近めっきり暑いですね!外を歩いている時に風が吹くと非常に気持ち良い季節です。
荒れ狂う波にもまれ〜私は〜風に〜なり〜たい〜♪
そうです。ものすごいスピードでコーディングして風になりたい。

ということで、Adobe Illustrator から速く、風のようにスライスができる方法をシェアしたいと思いま す!

 先に結論

・Sketch を利用する (Windowsの人はすみません)
・Adobe Illustrator のラスタライズ機能をキーボードショートカットに登録する
・PSDや、イラレ上の埋め込み画像、リンク画像もSketchに貼り付けれる
・Sketch に貼り付けてひたすら管理
・Sketch ではビットマップレイヤーをダブルクリックすると

 

面倒だったイラレからのスライス ~ 2年前

現在、GrowGroupではデザインは ほとんどイラストレーターで制作しています。
2年前はまだ書き出し機能等もなく、非常に、非常に苦労した覚えがあります。

アートボードを使った方法とか、Layer Exporter というエクステンションを使ったスライス方法ですとか、
はたまた初心に戻ってスライスツールを使ってみるとか。

まさに試行錯誤の連続。

便利なSketchでの書き出し

Photoshopでさえ、レイヤーから簡単に書き出しできるのに。。。。
Sketchではさらに便利に高速に書き出しできるのに。。。

なんで!!!!!イラレは!!!!!!!!!できないんだ!!!!!!!よ!!!!!!!

と思っていた時期です。

ある時、僕は間違ってSketchにPSDファイルをドラッグドロップしてしまいました。

「エラーかなにか表示されるかなぁ〜」と思っていましたが、

そこには、、、、なぜがPSDがビットマップ画像として表示されているではありませんか。。。。。。

???!!

そうです。

Sketch は psd、aiでも、ドラッグ、もしくはコピペすれば、ビットマップとして取り込むことが可能だったのです。

(恐らくpsd、ai ファイルの内部で持っているサムネイル画像だとは思いますが)

特に品質的にも問題ないと判断し、イラストレーター内で利用しているpsdの写真データなどはSketch にそのまま貼り付けるようになりました。

(ちなみに、イラレ上からもコピペ可能です)

via GIPHY

鍵を握るのは「ラスタライズ」

もうこの時点で イラストレーターでのスライスはやめて、Sketch でスライスしようと考えていたのですが、

イラストレーター上で作っているレイヤーについては、コピペに成功する時もあれば失敗するときもあります。

こちらはSVG、またはPDFの互換上仕方がないのかなとも思いますが、諦め切れない。。。。

 

そんな時、イラレでも『ラスタライズ』できるということを知りました。

つまりは、アートボード上でビットマップ化できる

キーボードショートカットにラスタライズを登録し、書き出したいレイヤーを選択し、

おもむろにラスタライズ。

解像度を144ppiに設定するとRetinaにも対応できます。

イラレから Sketch に局所的にデータをコピーしたい時には、『ラスタライズ』してからSketch へコピペし、書き出すということが可能となりました。

via GIPHY

もう、あとは書き出したいレイヤーを選択してはラスタライズし、Sketchへコピペ。

それだけです!

イラストレータの書き出し機能は、クリッピングマスクがかかっていると余白がでてしまうので、
正直二度手間なんですよね。

もうスライスに時間を取られない

Sketch を利用して作業を行うことで、圧倒的にスライスにかかる時間は短縮されました。
3倍ぐらい速くなるのでは!と思っています。

もうこの方法になってから大分時間は経ちますが、未だにこれを超える効率の良い方法は考えつきません!

 

イラストレーターからコーディングすることに困っている方は是非参考にしていただければと思います!

以上、現場からでした〜

 

 


【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

Udemyを実際に体験した方の感想記事もぜひご覧ください♪

関連コンテンツ

オンライン学習サイト比較!Webデザイン・プログラミングを学ぶならココ!(2019年版)
Webデザイン
オンライン学習
プログラミング
マークアップ
公開日: 2019年06月20日
最終更新日: 2022年01月17日
オンライン学習サイト比較!Webデザイン・プログラミングを学ぶならココ!(2019年版)
  • # cocoda!
  • # pickup
  • # Schoo
  • # TECHACADEMY
  • # Udemy
  • # オンライン学習
オンスタ運営
[JavaScript_中級者への道] JavaScript開発環境について – npm について
マークアップ
公開日: 2020年03月19日
最終更新日: 2022年01月17日
[JavaScript_中級者への道] JavaScript開発環境について – npm について
  • # Bower
  • # Grunt
  • # node.js
  • # npm
  • # タスクランナー
  • # 歴史
  • # 開発環境
オンスタ運営
WEB用に使われる画像形式の基礎と特徴
Webデザイン
マークアップ
公開日: 2019年04月19日
最終更新日: 2022年01月17日
WEB用に使われる画像形式の基礎と特徴
オンスタ運営
新年早々スマホコーディングの「html/css」についてもう一度おさらいしてみる。
マークアップ
公開日: 2017年01月18日
最終更新日: 2017年01月18日
新年早々スマホコーディングの「html/css」についてもう一度おさらいしてみる。
オンスタ運営
コーダーはCSS設計に夢を見る
テクノロジー
マークアップ
公開日: 2017年02月10日
最終更新日: 2022年01月17日
コーダーはCSS設計に夢を見る
オンスタ運営
游ゴシックのテキストをIEで表示すると謎の余白ができる【問題検証と対策】
デザイン
マークアップ
公開日: 2019年03月30日
最終更新日: 2022年01月17日
游ゴシックのテキストをIEで表示すると謎の余白ができる【問題検証と対策】
オンスタ運営
WEB用に使われる画像形式の基礎と特徴
Webデザイン
マークアップ
公開日: 2018年05月19日
最終更新日: 2018年05月19日
WEB用に使われる画像形式の基礎と特徴
オンスタ運営
一歩踏み込んだマークダウン(Markdown)の紹介とマークダウン記法を学ぶ
マークアップ
公開日: 2019年10月08日
最終更新日: 2022年01月17日
一歩踏み込んだマークダウン(Markdown)の紹介とマークダウン記法を学ぶ
  • # markdown
  • # マークダウン
  • # 効率化
オンスタ運営
「HTML5プロフェッショナル認定試験」合格に向けての勉強方法〜資格取得を目標にして知識を深めよう〜
プログラミング
マークアップ
公開日: 2017年10月20日
最終更新日: 2017年10月20日
「HTML5プロフェッショナル認定試験」合格に向けての勉強方法〜資格取得を目標にして知識を深めよう〜
オンスタ運営
JS初心者必見!JavaScriptの勉強ができるWEBサービス紹介【タイプ別】
プログラミング
マークアップ
公開日: 2017年12月28日
最終更新日: 2017年12月28日
JS初心者必見!JavaScriptの勉強ができるWEBサービス紹介【タイプ別】
オンスタ運営
全記事一覧

web制作者にオススメのオンライン学習サイト「Udemy」

世界最大級のコースがラインナップ!電子書籍サイト「Udemy」

世界最大級のコースがラインナップ!オンライン学習サイト「Udemy」

「Udemy」ではいつでもどんなトピックでも、専門家が教える何千ものコースを用意されており、無料で学べるコースも多数あります。もうちょっと勉強したいな。スキルアップしたいな。と思ったら是非チェックしてみてください。