MENUCLOSE
twitter ツイッターfeedlyRSS

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

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

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

公開日:2017年07月29日
最終更新日:2017年07月29日
オンスタ運営
マークアップ
ホーム > 全記事一覧 > 制作 > エンジニア > プログラミング > Sketchを使ったイラストレーター(illustrator)から爆速でコーディングする方法

Warning: Undefined variable $_cat_enginieer_flag in /home/growgroup/online-study.jp/public_html/wp-content/themes/online-study-wp/views/object/components/related-posts-inline.php on line 37
このエントリーをはてなブックマークに追加
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を実際に体験した方の感想記事もぜひご覧ください♪

関連コンテンツ


Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
WEB用に使われる画像形式の基礎と特徴
Webデザイン
マークアップ
公開日: 2018年05月19日
最終更新日: 2018年05月19日
WEB用に使われる画像形式の基礎と特徴
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
コピペ実装!CSSだけで作れるお洒落で使いやすいボタン◉サンプルコード12選
Webデザイン
マークアップ
公開日: 2018年03月02日
最終更新日: 2018年03月02日
コピペ実装!CSSだけで作れるお洒落で使いやすいボタン◉サンプルコード12選
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
游ゴシックのテキストをIEで表示すると謎の余白ができる【問題検証と対策】
デザイン
マークアップ
公開日: 2018年03月30日
最終更新日: 2022年01月17日
游ゴシックのテキストをIEで表示すると謎の余白ができる【問題検証と対策】
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
「HTML5プロフェッショナル認定試験」合格に向けての勉強方法〜資格取得を目標にして知識を深めよう〜
プログラミング
マークアップ
公開日: 2017年10月20日
最終更新日: 2017年10月20日
「HTML5プロフェッショナル認定試験」合格に向けての勉強方法〜資格取得を目標にして知識を深めよう〜
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
JS初心者必見!JavaScriptの勉強ができるWEBサービス紹介【タイプ別】
プログラミング
マークアップ
公開日: 2017年12月28日
最終更新日: 2017年12月28日
JS初心者必見!JavaScriptの勉強ができるWEBサービス紹介【タイプ別】
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
HTMLって何?Web初心者でも理解できるように簡単に解説!
エンジニア
マークアップ
公開日: 2019年06月13日
最終更新日: 2022年01月17日
HTMLって何?Web初心者でも理解できるように簡単に解説!
  • # HTML
  • # pickup
  • # 初心者
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
【CSS】CSSレイアウト組まとめ(中編)
テクノロジー
マークアップ
公開日: 2017年10月06日
最終更新日: 2017年10月06日
【CSS】CSSレイアウト組まとめ(中編)
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
コーダーはCSS設計に夢を見る
テクノロジー
マークアップ
公開日: 2017年02月10日
最終更新日: 2022年01月17日
コーダーはCSS設計に夢を見る
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
【調査】次のweb標準!?まことしやかに囁かれ続けるWeb Componentsとは?
テクノロジー
マークアップ
公開日: 2018年01月20日
最終更新日: 2018年01月20日
【調査】次のweb標準!?まことしやかに囁かれ続けるWeb Componentsとは?
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
ホームページを「おしゃれ」に!エフェクトを導入する方法<ホームページ制作初心者向け>
Webデザイン
テクノロジー
ホームぺージ更新
マークアップ
設計
公開日: 2018年02月16日
最終更新日: 2018年02月16日
ホームページを「おしゃれ」に!エフェクトを導入する方法<ホームページ制作初心者向け>
オンスタ運営
全記事一覧

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

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

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

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