カテゴリ:イラストレーター > スクリプト

このエントリーをはてなブックマークに追加 Share on Tumblr Clip to Evernote 編集





◆ スクリプト300本超が使い放題!マガジンをおすすめします。
有料スクリプトはnoteからご購入ください(要ログイン)。
GOROLIB DESIGNスクリプト一覧と一括ダウンロード


◆ はじめての方はこちらから
新しいスクリプトはわかったわ。じゃあどうしたらいいの?という方へ


◆ 仕事がなくなっちゃう(笑)スクリプトはオーダーメイドが最強です
いつもいつも苦労しているアノ作業。一瞬で終わると人生観かわります(ホントです^ ^)


◆ 自分の強みをサクッと活かして商売にしちゃう教科書
会社を辞めたい!でも独立は不安…そんなあなたは必読デス




■ 実はpngもsvgもテキストも座標もぜーんぶ揃ってるんですよねぇ(笑)

 おつかれさまです。@gorolibです。

 唐突ですが長い間疑問に思っていることがあります。それはIllustratorでのデザインカンプ制作についてです。

 単位はピクセル、ピクセルパーフェクトで、オブジェクトサイズは端数が出ないように、線がにじまないように(オープンパスなら2px、クローズドパスなら1pxで内側)等々、DTPとは全く異なる気を使います。

 しかしなぜそこまで緻密に仕上げておいて、コーディングに移る際に素材をスライスせにゃならんのか!

 うちの奥さんはデザインにもシステムにも何も関係ない人ですが、そういう人がIllustratorのデザインカンプ画面を見ると

 「え?これでもう出来上がりじゃないの?」

 という疑問を持つそうです。うん…確かにそう思うでしょうね^^;


■そのままポーンとhtmlが生成されたっていいじゃない

 専門外の人の意見が的を得ていることはよくあります。冷静に考えたら全くそのとおりで、Illustratorのデザインカンプからpngもsvgもテキストも座標も全部取得できるのですから。

 それでちょっとフライング気味に作ったのがこちらです。


 このスクリプトはアートボードを1枚のpngとして出力して、ブラウザで校正できるだけの簡易版ですが、この原理で素材出力して配置すれば本格的なHTML&CSSの自動生成ができるのではないか?という推測です。


■リンクやレスポンシブデザインはどうするの?

 こういうツールで悩ましいのは元々のデザインカンプには不要な要素、例えばリンクやレスポンシブデザインに必要なブレークポイントはどうするのかという問題です。線引きは微妙ですが、このスクリプトありきでWebデザインを始めてしまうと、Illustrator操作時に意識がそこに持って行かれるおそれがあります。

 例えばサブレイヤー名をURLにしておくと<a ref…>タグになるなどの機能を持たせておくと、デザイン中に余計な意識が必要になってしまいます。

 ですので余計な機能は付けないつもりです。その代わり、コーダーさんがちょい足しすればいいだけの本格的な構成にするつもりです。「そのためだけに」Illustratorのデータを付け足さない、揃っている情報だけでベースをつくるというコンセプトを予定しています。

 自動コード化にあたってHTML&CSSをゼロから勉強中です。実は目からウロコなことがたくさんあってお恥ずかしいかぎりです///


 というわけでこの本格版は制作中です。気長にお待ちくださいませm(_ _)m

 お役に立てれば幸いです!ではでは出羽の海。
お役に立ちましたらツイートお願いします!




このサイトで配布しているイラストレーターのアクションやスクリプトファイルを無断で転載・配布・販売することを固く禁じます。ご紹介いただける際は必ずURLリンクにてお願いいたします。 このサイトで配布しているイラストレーターのアクションやスクリプトファイルの使用で、ファイルの破損やアプリケーションに不具合が発生した場合でも、責任は負いかねますのでご承知おきくださいませ。自己責任での使用をお願いいたします。

© 2017 GOROLIB DESIGN
Released under the MIT license.





このエントリーをはてなブックマークに追加 Share on Tumblr Clip to Evernote 編集





◆ スクリプト300本超が使い放題!マガジンをおすすめします。
有料スクリプトはnoteからご購入ください(要ログイン)。
GOROLIB DESIGNスクリプト一覧と一括ダウンロード


◆ はじめての方はこちらから
新しいスクリプトはわかったわ。じゃあどうしたらいいの?という方へ


◆ 仕事がなくなっちゃう(笑)スクリプトはオーダーメイドが最強です
いつもいつも苦労しているアノ作業。一瞬で終わると人生観かわります(ホントです^ ^)


◆ 自分の強みをサクッと活かして商売にしちゃう教科書
会社を辞めたい!でも独立は不安…そんなあなたは必読デス



※このスクリプトは、スクリプト使い放題マガジン2(月額)に含まれています。


■縦長アートボードをA4サイズ(複数枚)に印刷したいんです!


 おつかれさまです。@gorolibです。

 今回はWebデザインなどで縦長なアートボードを自動的に1:√2の比率で複数枚PNG出力するものです。なんで1:√2なのかといえば、A4でもB5でもコピー用紙のサイズって1:√2なんですよね。つまり印刷しやすくするスクリプトなのです。


 使い方はカンタン、印刷したいアートボードをアクティブにして、このスクリプトを起動するだけです。アートボード幅を1、高さを√2として分割してPNG出力します。


■実はmacOSのプレビューって印刷がはやいんです

 縦長アートボードで複数枚印刷するってことは「ページ物」としてPDF出力も考えたのですが、ちょいとむずかしい^ ^

 加えて(言い訳じゃないんですけど^ ^)macOSでプレビューアプリからの印刷ってものすごく早いんですね。PNGのデフォルトアプリはプレビューです。なのでPDF出力で悩んでいるよりは、PNG出力でサクッと仕上げた次第です。
m(_ _)m


■今回のスクリプト情報
【スクリプト概要】
縦長のアートボードを1:√2の比率で複数枚PNG出力して(A4サイズなどに)印刷しやすくします

【スクリプトファイル名】
G396_AdjustPrint.jsx

【使い方】
(1)PNG出力したいアートボードをアクティブにします
(2)このスクリプトを起動します
(3)縦長のアートボードの上から順にアートボード幅を1として高さ√2の比率で分割してpng出力します

お役に立てれば幸いです!ではでは出羽の海。


■ダウンロードはこちらから
お役に立ちましたらツイートお願いします!




このサイトで配布しているイラストレーターのアクションやスクリプトファイルを無断で転載・配布・販売することを固く禁じます。ご紹介いただける際は必ずURLリンクにてお願いいたします。 このサイトで配布しているイラストレーターのアクションやスクリプトファイルの使用で、ファイルの破損やアプリケーションに不具合が発生した場合でも、責任は負いかねますのでご承知おきくださいませ。自己責任での使用をお願いいたします。

© 2017 GOROLIB DESIGN
Released under the MIT license.





このエントリーをはてなブックマークに追加 Share on Tumblr Clip to Evernote 編集





◆ スクリプト300本超が使い放題!マガジンをおすすめします。
有料スクリプトはnoteからご購入ください(要ログイン)。
GOROLIB DESIGNスクリプト一覧と一括ダウンロード


◆ はじめての方はこちらから
新しいスクリプトはわかったわ。じゃあどうしたらいいの?という方へ


◆ 仕事がなくなっちゃう(笑)スクリプトはオーダーメイドが最強です
いつもいつも苦労しているアノ作業。一瞬で終わると人生観かわります(ホントです^ ^)


◆ 自分の強みをサクッと活かして商売にしちゃう教科書
会社を辞めたい!でも独立は不安…そんなあなたは必読デス



51
(クリックで拡大します)


※このスクリプトは、スクリプト使い放題マガジン2(月額)に含まれています。


■Webだって印刷したいときはあります!

 おつかれさまです。@gorolibです。

 唐突ですが縦長のWebデザインカンプ画像の印刷って皆様どうされていますでしょうか?
10
 Webデザインだって印刷したいときはありますよね?印刷されたカンプが手元にあると、寸法をメモしたり、レイアウトを俯瞰できたりしてとても便利なのです。

 ところがWebデザイン特有の縦長レイアウトの印刷、これが意外と難儀するのです。用紙タテ向きでずるずるーっと何枚かに分割されそうなものですが、そうはいきません。タイル分割でもうまくいかない。

 そこで、アートボードを1枚だけ用意しておけば、画像の横幅をアートボード幅に合わせて配置し、縦は勝手に増やして印刷しやすくするスクリプトを作成しましたので、ご利用くださいませ。
(クリックで拡大します)
04


■PDF出力してみんなで共有

 例えばデザインカンプの打ち合わせなど、ちょこっと書き込みたいときにも使えます。IllustratorからPDF出力して事前に共有しておけば、Illustrator環境のないクライアント様でも印刷が可能です。どうぞご利用ください。
33
■今回のスクリプト情報
(クリックで動きます)
タイトルなし


【スクリプトファイル名】
G397_DivideImage.jsx

【使い方】
(1)印刷サイズのアートボードを用意してアクティブにします
(2)このスクリプトを起動します
(3)分割したい画像を選択します
(4)画像を複数のアートボードに分割していきます

【仕様】
(1)内部では配置コマンドを実行しています
(2)アートボードのサイズは問いません
(3)アクティブアートボードの真下に必要な枚数のアートボードを生成します
(4)生成されるアートボードの間隔はゼロです
(5)画像はアートボードの枚数分リンクされます
(6)リンク画像は連続して見えるようにアートボードの高さだけずらして配置します
(7)それぞれのアートボードサイズでクリッピングマスクをかけています

お役に立てれば幸いです!ではでは出羽の海。


■ダウンロードはこちらから

https://note.mu/gorolib/n/na59ef65306fa
お役に立ちましたらツイートお願いします!




このサイトで配布しているイラストレーターのアクションやスクリプトファイルを無断で転載・配布・販売することを固く禁じます。ご紹介いただける際は必ずURLリンクにてお願いいたします。 このサイトで配布しているイラストレーターのアクションやスクリプトファイルの使用で、ファイルの破損やアプリケーションに不具合が発生した場合でも、責任は負いかねますのでご承知おきくださいませ。自己責任での使用をお願いいたします。

© 2017 GOROLIB DESIGN
Released under the MIT license.





↑このページのトップヘ