カテゴリ: Webデザイン

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




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


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


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






■気になるあなたに夏の贈り物です
(クリックで動きます)
タイトルなし

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

 唐突ですがWebデザイン。

 Illustrator制作におけるDTPとWebの違いって、カラーモード(CMYKかRGB)、ピクセルの最適化と並んで「アートボードの高さが決まらない」のが大きいのではないでしょうか。DTPではアートボードサイズ(=判型)って最初に決めたら動かないですからね。それがWebではチョ〜動く。やすやすと、お気軽に、お気楽に、カンタンに(しつこいー!)。

 具体的にはフッターが軽々しく動く(失礼)Webデザイン。コーディングでは高さ=auto設定もありますので、Illustratorでのデザイン中は「まあまあ、高さは大きくとっておけばよかよかよ!」となりますが、そうは言っても性格的に「いつでもピッタリにしたい人」いらっしゃると思います(はい、私です)。

 というわけで、選択オブジェクトの最下端をアクティブアートボードの下端とするスクリプトを作りましたので、ご利用ください。

■今回のスクリプト情報
(クリックで動きます)
タイトルなし


【スクリプト概要】
選択オブジェクトの下端をアクティブアートボードの下端にします

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

【使い方】
(1)高さを変更したいアートボードをアクティブにします
(2)アートボードの下端にしたいオブジェクトを選択します
(3)このスクリプトを起動します
(4)アクティブアートボードが選択オブジェクトの下端までの高さに変更されます

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

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

https://note.mu/gorolib/n/ne8194501ed3a



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




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

© 2017 GOROLIB DESIGN
Released under the MIT license.





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




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


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


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






■メニューを端から端まで見てみるのもアリですな
^ ^

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

 数週間前からMacawで複数ページのコーディングをする方法を探していました。

 Macawとは米国製のWebオーサリングツールであり、クラウドファンドで鳴り物入りで開発されたアプリです。ソースがきれいで使いやすいので重宝しているのです。

 私は本職DTPなので(元システム屋なのにWebはそれほど…というww)単ページのWebコーディングで使っていましたが、今回複数ページのご注文をいただきましたので、Macawによる複数ページの作成方法を探しておりました。

 ただこのMacaw、知名度は推して知るべしでして日本語のページはほとんどない。全ページ英語のマニュアルを購入したりしたのですが、ページを開いて2秒で寝てしまうのでほとんど読めてない(笑)。

 先ほど意を決して「よっしゃ、そんならメニューの端から端まで見てやろう」とFileというメニューをクリックしたところ、

 1番目…New Project
 2番目…New Page

とありました。
38
46
56

 まさかの2秒で見つかったのです!(爆)

 なるほど、いつも作っている単ページは「1ページしかないNew Project」であり、複数ページの場合は、Project内にNew Pageを追加していくのね。

 というわけで、これからの人工知能社会は「ググってもわからない仕事」がどんどん増えてきます。そのうちAIがつくったアプリのマニュアルを人間様がつくる(!)という仕事もできるかもしれませんな。

 Macawの知識はあまり必要ないかもしれませんが、メニューを端から端まで見てみるという調査方法もアリだな、と思った次第です。

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




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

© 2017 GOROLIB DESIGN
Released under the MIT license.





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




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


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


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




■簡易版ですがCSSもつくります!本格版も開発予定

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

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

 単位はピクセルにして、ピクセルパーフェクトで、オブジェクトサイズは端数が出ないように、線がにじまないように(オープンパスなら2px、クローズドパスなら1pxで内側)など、そりゃもうとても気を使います。でもそこは疑問じゃない。デザインカンプ校了してコーディングに移るとき、

 なんで素材をスライスせにゃならんのか!

 という疑問がどうしてもアタマから離れない。私はそんなに声を荒げるタイプじゃないですが、声を「少しだけ大きく(笑)」して言いたいんです。せっかく苦労してピクセルパーフェクトで作ったものを、なんでまたスライスしてコーディングなる工程を踏まなくちゃならんのか(しかもコーダーさんに寸法を添えて)

 そんなの当たり前じゃんか?ということなんでしょうけど、本当に当たり前なんでしょうか。だってピクセル寸法もサイズも間隔も、画像もテキストもベクター素材も全部揃ってるんですよ?

 そのままポーンとhtml生成されたっていいじゃない、と思い立ち作成したスクリプトでございます。


■クラウドファンディングで本格版も計画中

 ただし、こんな大仕掛けはすぐにはできませんので、まずは簡易版を公開いたします。アートボードサイズのpngファイルを作成、それをソースファイルとするhtml一式を自動生成します。紙芝居ってやつですね^ ^

 でもデザインカンプの校正には必要十分です。デザインカンプの校正ってpng単体でもpdfでもイマイチで、やっぱり本物そっくりの「動かないhtml」をブラウザで見ていただくのが一番です。今回のスクリプトで生成されるhtmlセットは毎回手作りしてたのです。とても面倒くさかった…。

 将来的には自動スライス、自動配置、自動リンクで、Illustratorからそのまま本格Webページを生成したいのですが、その場合はクラウドファンディングで開発費を集める予定です^ ^


■今回のスクリプト情報

【スクリプト概要】
Illustrator上のアクティブアートボードサイズをpng出力し、それをソースとするhtmlセットを自動生成します

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

【使い方】
(1)htmlセットを作成したいアートボードをアクティブにします
(2)このスクリプトを起動します

【仕様】
(1)アクティブアートボードをアートボードクリップにてpng出力します
(2)Webページ幅はアートボード幅となります
(3)ページは中央固定(margin: 0 auto)です
→ウィンドウ幅が余る場合は中央、ウィンドウ幅を縮めていくと両方の余白が均等に減っていくアレです(説明ムズっ!)
(4)htmlセットのフォルダ名はタイムスタンプです(いつも新規作成します)
26

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


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

https://note.mu/gorolib/n/n95c63c33acfc


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




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

© 2017 GOROLIB DESIGN
Released under the MIT license.





↑このページのトップヘ