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

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




◆ DTPの方へ!はじめてのWebデザイン&サイト構築セミナー
細かいことはいいからAdobe MuseでサクッとWebサイトを作ろう!というセミナーです

◆ スクリプトを使っていきなりIllustratorの上級者になろうセミナー
いきなり上級者になってイイんです!スクリプトの使い方イチから教えます

◆ 自分の強みをサクッと活かして商売にしちゃう教科書
会社を辞めたい!でも独立は不安…そんなあなたに(会員登録せずに購入できます)

◆ 自分でスクリプトを作ってみたい!そんなあなたはこちらから
ひとりで書ける!ちょい足しスクリプトマガジンZ

◆ スクリプト制作承ります!まずはお気軽にご相談ください m(_ _)m
イラストレーター用スクリプトの受注生産やってます




■環境設定ファイルの削除は万能でした

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

 Keyboard Maestro 起動中に、Illustratorでコピーを実行すると「必ず」レインボーマークになり、その後、Keyboard Maestro Engineも(macOSのコントロールバーにマウスオーバーすると)レインボーマークになるという事象が発生しました。

 もうね、わっけがわからないw

 当方、Keyboard Maestroの強依存でありまして、もはや中毒といってもいいでしょう。Illustratorの利用割合も大きく、これは由々しき事態でありました。

 ググったところ、以下の記事に目を付け、

参考:Illustrator CC CC2014で、コピペで高確率でフリーズする現象について | Adobe Community

 “クリップボードに関連するユーティリティはすべて疑ってみて”

とありましたので、Keyboard Maestroも、Illustratorも再インストール(環境設定ファイルも削除)を試みました。

 結論としては、Illustratorの環境設定ファイルだったようです。もし、同様の事象があれば、Illustratorの環境設定ファイルの削除(存在しない場合は、自動的に生成されるので)だけで良いと思います。

 その際は、アクション、並びにキーボードショートカットファイルを保存しておいてください。各種の便利ツールがクリアされるのは、かなり痛いので…(^_^;)

 お役に立てれば幸いです!


(補足20180925)
@t_fukui さんより、Keyboard Maestroの環境設定について、ご助言をツイートいただきました。ありがとうございます!

Keyboard Maestro>Preferences>Excluded>

The following applications are excluded from the Clipboard
History unless you explicitly read the clipboard.

の項目に、Adobe系のアプリケーションを登録されているとのことです。早速運用してみます!ありがとうございます。

スクリーンショット 2018-09-25 9.52.55


お役に立ちましたらツイートお願いします!




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

© 2017 GOROLIB DESIGN
Released under the MIT license.





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




◆ DTPの方へ!はじめてのWebデザイン&サイト構築セミナー
細かいことはいいからAdobe MuseでサクッとWebサイトを作ろう!というセミナーです

◆ スクリプトを使っていきなりIllustratorの上級者になろうセミナー
いきなり上級者になってイイんです!スクリプトの使い方イチから教えます

◆ 自分の強みをサクッと活かして商売にしちゃう教科書
会社を辞めたい!でも独立は不安…そんなあなたに(会員登録せずに購入できます)

◆ 自分でスクリプトを作ってみたい!そんなあなたはこちらから
ひとりで書ける!ちょい足しスクリプトマガジンZ

◆ スクリプト制作承ります!まずはお気軽にご相談ください m(_ _)m
イラストレーター用スクリプトの受注生産やってます




20180916_103252_1


キャンペーン中!2018年9月30日まで、6,980円です(通常価格 7,980円)


※このスクリプトはどのマガジンにも含まれない単品販売商品となります。

20180917_115603_1

20180917_115603_3

■全自動スクリプトのレスポンシブ対応です!

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

 先日発表しました、いきなりHTML(イラストレーターから本格HTML&CSSを全自動で生成するスクリプト)については、大変好評でして、

参考:イラストレーターから本格HTML&CSSを全自動で生成するスクリプト(macOS専用)

調子に乗って「レスポンシブ版もほしい!」というリクエストに応えました!どうぞご利用ください!

 コンセプトは、いきなりHTMLと同じです。Illustratorからこのスクリプトを起動するだけで、スライスもコーディングも全自動で、html一式(index.html、css、画像イメージ)が生成されます。また、Windowsの開発環境がないものですから、こちらも当面macOS専用とさせてください。


■仕上がりはどんな感じなの?

 仕上がりについては、こちらのページでご確認ください。このスクリプトで生成されたものです(手を加えていません)。ブラウザの幅を変えてご確認ください。


スクリーンショット 2018-09-15 16.14.56


 自動生成されたhtml一式(index.html、css、画像イメージ)、および使用したaiデータはダウンロードできます。htmlとcssのコードもすべて公開しています。
(ダウンロードはこちらから)
https://www.dropbox.com/s/c4xeofqlzbj2riv/20180915_194918.zip?dl=1


(追記20180923)
IllustratorのバージョンがCS6の方はこちらから

■どうやって作ればいいの?

 まずは、Illustratorでプロトタイプを設計してください。そのaiデータを開いた状態で、このスクリプトを起動し、保存先を指定すると、レスポンシブデザインのhtml一式(index.html、cssおよびイメージ)が全自動で生成されます。

スクリーンショット 2018-09-16 10.43.13

スクリーンショット 2018-09-16 10.44.07

スクリーンショット 2018-09-16 10.44.18


 指定した場所に、Illustratorのファイル名でフォルダが作成されますので、バラバラにならずに安心です。

スクリーンショット 2018-09-16 10.48.19


 アートボードの幅が「max-width」となります。基本的には「左および上」とのスキマを参照しながら、コードを生成していきますので、ベースは「margin-left」と「margin-top」による構成です。

スクリーンショット 2018-09-16 10.48.55


 水平中央のオブジェクト(オブジェクトの水平中央=アートボードの水平中央)は、常に中央揃えの扱いとしています。

 また、オブジェクト幅=アートボード幅のものは、「object-fit: cover;」というスタイルで扱っています(高さ固定を併用)。サンプルでは、水色の画像と、フッターの屋号ですね。ブラウザの幅を縮めてご覧ください。

 これは、ブラウザの幅が「max-width」より小さくなると、中心の位置や高さはそのままに、画像の両端を切り落としながら縮んで行くものです。言葉ではわかりづらいので、実際にブラウザの幅を縮めてみてください。

スクリーンショット 2018-09-15 16.14.56

(こちらでお確かめください)


 オブジェクト幅=アートボード幅のものを、width 100%のまま縮めると、スマートフォンサイズではかなり小さくなってしまい、あまりいいことがありません。そのため今回は「object-fit: cover;」というスタイルを採用いたしました。


■あくまでもベースコードです

 念のための補足ですが、レスポンシブデザインの「こうあるべき」姿は、案件により異なります。このスクリプトでは、面倒なコーディング部分をカバーし、予想されるスタイルを割り当ててはいますが、このスクリプトの生成コードが納品物とはなり得ません。

 タイトルタグやメタデータ、キーワードを追記するのと同様に、調整はお願いいたします。

 前述の「object-fit: cover;」についても、お好みがあろうかと思いますので、調整をお願いいたします。

スクリーンショット 2018-09-16 10.50.45


■どういう順番でスライスしているの?

 さて、ここでIllustratorデータを、どういう順番でスライスしているのか説明します。

 レスポンシブデザインは、「どれを直前のオブジェクトとしているか」が肝となります。今回、スクリプトを作ってわかったのは、レスポンシブデザインは「横並びに弱い」ということです。

 例えば、サンプルのヘッダー部分。「GOROLIB DESIGN」はアートボードの左端を、「はやさはちから」は「GOROLIB DESIGN」の右端を参照しています。htmlでは、改行(改段?)する場合、divというタグを用いますが、どこでdivを入れるか、という問題があります。

スクリーンショット 2018-09-16 10.52.18


 今回のスクリプトでは、オブジェクトごとにdivタグを入れます。


■横並びの場合はグループ化してください

 今回のスクリプトでは、アクティブアートボードの上から順番にオブジェクトを参照します。

 グループオブジェクトの場合は、そのグループの1階層分だけを左から順番に参照します。サンプルでは、「GOROLIB DESIGN」から「Twitterのアイコン」までをグループ化しています。

 まとめると、サンプルでは上から順に次のようにオブジェクトを参照しています。

(1)ヘッダー部分(グループ化)
(2)写真の部分
(3)ごあいさつ
(4)本文
(5)お問い合わせ
(6)フッター

スクリーンショット 2018-09-16 10.56.24


 グループにすると、その直下の1階層分を拾います。1つの画像としてスライスしたい部分は、グループではなく、クリッピングマスクをかけてください。選択範囲にクリッピングマスクをかけるスクリプトが付録でついています。

 G389_PixelClip.jsx(付録2)…選択範囲にクリッピングマスクをつける
タイトルなし
■参照するオブジェクトとその扱い

 Illustratorデータから参照するオブジェクトと、その扱いについては以下のとおりです。

(1)テキストか?
(2)グループか?
(3)クリッピングマスクか?
(4)1〜3以外か?

 まとめてスライスしたいところをグループ化してしまうと、直下の1階層分を拾ってしまうので、前述のとおり、クリッピングマスクをかけてください。


■並び順の参照先は左か上か水平中央

 言わずもがなですが、htmlとは、HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)の頭文字をとったものです。元々は、テキストをメインで扱う言語だったのですね(たぶん^ ^)。

 そして、このスクリプトを組んでわかったのは、htmlとは、基本は「上から詰めて行く」ものだということです。生成コードからわかることは、「margin-top(さっきのオブジェクトに対して上側にどのくらいのスキマ?)」というスタイルが頻出します。その上で「margin-left(さっきのオブジェクトに対して左側にどのくらいのスキマ?)」を使うのか、「margin: auto;(左右に等幅の余白=水平中央)」を使うのか、ということになっています。

スクリーンショット 2018-09-16 10.50.45


■ご利用における注意点

(1)校了データから別名保存した別データでご利用ください
 内部ではスライスするため、いくつかデータ変更をかけています。不測の事態をさけるため、このスクリプトを利用する際には、校了したデータ(もしくはそれに準ずるデータ)を別名保存したものでご利用ください。

(2)それぞれのオブジェクト名は自動連番です
 Illustratorの各オブジェクトから生成される要素は、自動連番です。

スクリーンショット 2018-09-16 11.05.44


(3)フォント指定はできません
 文字サイズは採用されますが、フォント指定はできません。デフォルトフォントが採用されます。


(4)本文にしたくないテキストはどうしたらいいの?
 本文にしたくないテキストは、アウトラインをかけるか、クリッピングマスクをかけてください。グループ化は、横並びのために直下の1階層分の横並びのために使っておりますので、クリッピングマスクでお願いいたします(スクリプト付録2)

タイトルなし
(5)URLリンクはオブジェクト名にセットしてください
 オブジェクト名がセットされているものは、html上でURLリンクとして採用します。Photoshopファイルのリンクなどは、オブジェクト名=Photoshopのファイル名となっている場合がありますので、ご注意ください。その場合は、オブジェクト名を消し去ってください(スクリプト付録1)

スクリーンショット 2018-09-11 15.31.18


(6)Illustratorからhtmlへの一方通行です
 Illustratorからhtmlへの一方通行です。生成されたhtmlからIllustratorデータを逆生成することはできません。


■ご購入いただいた方へのサポート

 いきなりHTMLと同様、コーディング現場の事情はさまざまでしょうから、ご購入いただいた方のリクエストには可能な限り、お応えします!(大きな仕様変更の場合は、要相談にて別途お見積もり)。


■今回のスクリプト情報


【スクリプト概要】
Illustratorから全自動でhtml+cssファイル一式を生成するスクリプトです(レスポンシブ対応)


【スクリプトファイル名】
G567_autoHTMLproResponsive.jsx(本体)
G566_setName.jsx(付録1)…URLリンクをつける
G389_PixelClip.jsx(付録2)…選択範囲にクリッピングマスクをつける

参考:超簡単スライス!Webデザイン用スクリプトの2本セットです


【使い方】
(1)対象となるアートボードをアクティブにします
(2)このスクリプトを起動します
(3)アクティブアートボード内の選択可能なオブジェクトをhtml化してデスクトップに出力します
(4)保存先を指定してください
(5)スライス(png)の解像度を選択してください(1x〜4x)←追記20180916

スクリーンショット 2018-09-16 14.46.29


※不測の事態を避けるため、校了データとは別名保存したデータにてご利用ください


【仕様】
(1)テキストはテキストとして扱います
(2)アウトラインがかかっているテキストはスライスしてイメージとして扱います
(3)横並びに処理したい部分はグループ化してください
(4)横並び以外でグループしたい部分は全体にクリッピングマスクをかけてください(付録2をお使いください)
(5)内部で「作業アートボードのすべての選択」を行いますので、オブジェクトロック、レイヤーロックされたオブジェクトは対象外です
(6)ごく小さいオブジェクトではスライスできない場合があります(その場で停止)。不測の事態を避けるため、校了データとは別のデータにてご利用ください


■付録1について(URLリンクをつける)
 オブジェクトをひとつ選択して、URLリンクを入力してください。
 機能としては、レイヤーパネル(サブレイヤー)の名前編集と同様です。

スクリーンショット 2018-09-11 15.31.18



■付録2について(選択範囲にクリッピングマスクをつける)
 クリッピングマスクをつけたい範囲を選択し、このスクリプトを起動してください。選択範囲にクリッピングマスクがかかります。
タイトルなし
お役に立てれば幸いです!ではでは出羽の海。


(追記20180916)
(1)スーパーバイザーの友人に指摘いただき、
・[word-wrap]プロパティを[overflow-wrap]プロパティに変更しました(CSS3からのようです)

(2)あと、自主回収しました!
・スライス(png)の解像度を選べるようにしました

スクリーンショット 2018-09-16 14.46.29

・CSSのソースでインデントがずれているところがあり修正しました!
─────

ダウンロード元、ファイル名は同じですので上書きしてください。


20180917_115603_1

20180917_115603_3


お役に立ちましたらツイートお願いします!




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

© 2017 GOROLIB DESIGN
Released under the MIT license.





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




◆ DTPの方へ!はじめてのWebデザイン&サイト構築セミナー
細かいことはいいからAdobe MuseでサクッとWebサイトを作ろう!というセミナーです

◆ スクリプトを使っていきなりIllustratorの上級者になろうセミナー
いきなり上級者になってイイんです!スクリプトの使い方イチから教えます

◆ 自分の強みをサクッと活かして商売にしちゃう教科書
会社を辞めたい!でも独立は不安…そんなあなたに(会員登録せずに購入できます)

◆ 自分でスクリプトを作ってみたい!そんなあなたはこちらから
ひとりで書ける!ちょい足しスクリプトマガジンZ

◆ スクリプト制作承ります!まずはお気軽にご相談ください m(_ _)m
イラストレーター用スクリプトの受注生産やってます




20180912_163747_1


2018年9月末までキャンペーン中!
通常価格4,980円のところ3,980円で発売中です!

※このスクリプトはどのマガジンにも含まれない単品販売商品となります。

20180917_115603_1

20180917_115603_2


■面倒なコーディングが数秒で(!)完了します

スクリーンショット 2018-09-11 16.00.18


スクリーンショット 2018-09-11 14.15.19


スクリーンショット 2018-09-11 15.20.02

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

 以前から構想していた「イラストレーターから本格HTML&CSSを全自動で生成するスクリプト」が完成しましたので、ご報告いたします。

「どうしてIllustratorでせっかくきれいに作ったプロトタイプを、わざわざバラバラに(スライス)して、コーティングせにゃならんのか!」という長年の不満が解消しました!開発はご面倒さまでしたが、便利な道具が作れたという思いです。

 Windowsの開発環境がないものですから、当面macOS専用とさせてください。


■自動スライス自動コーディング(たったそれだけ!)

 このスクリプトは、Illustratorでのプロトタイプ設計を忠実に生かします。

 スライスもコーディングもすべて自動です。Illustrator上でこのスクリプトを起動すると、index.html、cssフォルダにstyle.css、imgフォルダにスライス画像が格納されます。

スクリーンショット 2018-09-11 15.20.02

その後、index.htmlをブラウザで確認しておわりです。たったそれだけです。


■URLリンクを貼ることもできます(付録スクリプトあり)

 もちろん、URLリンクを貼ることも可能です。オブジェクトの名前にURLをセットしてください。オブジェクトの名前はレイヤーパネル(サブレイヤー)で確認できます。

スクリーンショット 2018-09-11 15.06.28

 ただし、このレイヤーパネルのオペレーションも若干面倒なので、今回は、オブジェクトの名前をセットするスクリプト(G566_setName.jsx)も付録で付けました!


■コーダーさんにラクしてもらおう^ ^

 このスクリプトでの生成htmlは、そのままでももちろん使えますが、メタデータを加えたり、タイトルタグを直したりと「どうせ後で手を加えるだろう」という方に向いています。私もコーディングは苦手なので、これからコーダーの方とコンビを組む予定ですが、その方にラクをしてもらうためのスクリプトといっても過言ではありません^ ^


■ランディングページデザインに向いています

 このスクリプトは、アートボード単位でhtml一式を生成しますので、ランディングページデザインに向いています。ただ、マルチアートボードの場合でも、スライス名(要素の連番)はアートボードごとに変えていますので、複数ページの製造にもお役に立てると思います。


■作成サンプルを公開いたします

 とはいえ「その、あれや!コードの細かい部分はどうなっとるんや!」という方は当然いらっしゃるでしょうから、このスクリプトで作成されたhtml一式と、元のIllustratorファイルを無料公開いたします。

サンプルのaiデータとhtml+cssのダウンロードはこちらから

 ご購入を検討されている方は、作成サンプルをご確認いただいた上で、下記の注意点をよくお読みくださいませ。

 なお、サンプルでのスクリプト処理時間は3〜4秒でした。ちなみにアートボードの高さが13408pxのランディングページでは、20秒ほどかかりました。それでも全自動ですからラクラクではあります。
スクリーンショット 2018-09-11 14.47.22


■ご利用における注意点

(1)macOS専用です
 このスクリプトはmacOS専用といたします。当方、Windowsの開発環境がないものですから、検証済みであるmacOS専用とさせてください。

(2)相対座標内での絶対座標です
 Illustratorでのプロトタイプ設計は固定的です。その位置関係を表現するために、ページ幅は可変的、ページ内部は固定的な設定にしています。以下を参照ください。作成サンプルに含まれるcssの一部です。
スクリーンショット 2018-09-11 15.40.52


(3)別名保存したデータでご利用ください
 スクリプト内部ではスライスを行っているため、いくつかのデータ変更をかけています。不測の事態をさけるため、このスクリプトを利用する際には、校了したデータ(もしくはそれに準ずるデータ)を別名保存したものでご利用ください。

(4)それぞれのオブジェクト名は自動連番です
 Illustratorの各オブジェクトから生成される要素は、自動連番です。

(5)レスポンシブデザインには向きません
 前項のとおり、相対座標内での絶対座標ですので、レスポンシブデザインには向きません。参考までに、当方では、デスクトップ用とスマートフォン用の2本立てで、アクセスデバイスによって切り替える設定をよく使います(Adobe Museがそうだったので)。レスポンシブデザイン沼に、わざわざ足を突っ込まないようにしています。

(6)フォント指定はできません
 デフォルトフォントのみとなります。スクリプト内部の処理としては「テキストかそれ以外」という分類にしています。
 テキストでしたら本文扱い、テキスト以外はpng出力としています。
(後述)font-sizeタグに対応しました(20180914)


(7)本文にしたくないテキストは?
 そのため、本文にしたくないテキストは、アウトラインをかけるか、グループ化してください。背景に塗りがある場合は、背景もろともグループ化すると便利です。
(後述)font-sizeタグに対応しました(20180914)


(8)オブジェクト名がセットされているオブジェクトは?
 Photoshopファイルのリンクなど(ファイル名)、あらかじめ名前がセットされているオブジェクトも存在します。その場合は、オブジェクト名を消し去ってください。付録のスクリプトが使えます。


(9)Illustratorからhtmlへの一方通行です
 ご想像のとおり、Illustratorからhtmlへの一方通行です。生成されたhtmlからIllustratorデータを逆生成することはできません。


■ご購入いただいた方へ

 コーディング現場の事情はさまざまでしょうから、ご購入いただいた方に向けて、可能な限り、リクエストにお応えしてまいります!(大きな仕様変更の場合は、別途お見積もり…となることもございますので、あらかじめご了承ください)。コメント欄にいただければと思います。


■今回のスクリプト情報


【スクリプト概要】
Illustratorから全自動でhtml+cssファイル一式を生成するスクリプトです


【スクリプトファイル名】
G564_autoHTMLpro.jsx
G566_setName.jsx(これはURLリンクをつけるための付録スクリプトです)


【使い方】
(1)対象となるアートボードをアクティブにします
(2)このスクリプトを起動します
(3)アクティブアートボード内の選択可能なオブジェクトをhtml化してデスクトップに出力します

※不測の事態を避けるため、校了データとは別のデータにてご利用ください


【仕様】
(1)テキストかテキスト以外で処理を分けています
(2)テキストは本文とお考えください。フォント指定はできません
(3)テキスト以外はアウトラインをかけるか、グループ化してください
(4)内部で「作業アートボードのすべての選択」を行いますので、オブジェクトロック、レイヤーロックされたオブジェクトは対象外です
(5)ごく小さいオブジェクトではスライスできない場合があります(その場で停止)。不測の事態を避けるため、校了データとは別のデータにてご利用ください
(6)body の width は、アートボード幅です


■URLリンクをつけるための付録スクリプトについて

 オブジェクトをひとつ選択して、URLリンクを入力してください。すでに名前がついている場合は、その内容が表示されます。消去して保管することも可能です。
 レイヤーパネル(サブレイヤー)で名前編集するのと同じですが、便利ですのでよろしければお使いください。

スクリーンショット 2018-09-11 15.31.18


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


(追記20180914)
font-sizeタグに対応しました。フォントの指定はできません(デフォルトフォント)が、サイズはremで対応しました。
テキスト位置のY座標については完全解明できていませんが、(行送り+サイズ)の半分だけ、Illustratorでの座標からずらすとぴったりのようです。エリア内文字はwidth指定あり、ポイント文字はwidth指定なしです。


サンプルのaiデータとhtml+cssのダウンロードはこちらから



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

20180917_115603_1

20180917_115603_2


お役に立ちましたらツイートお願いします!




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

© 2017 GOROLIB DESIGN
Released under the MIT license.





↑このページのトップヘ