カテゴリ: Webデザイン

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




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


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


◆ 仕事がなくなっちゃう(笑)スクリプトはオーダーメイドが最強です
オリジナルスクリプトつくります!3000円からどうぞ



21
■Macawで検索履歴あり!まさか同士の方がいらっしゃるとは…涙)   

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

先日、ブログのアクセス履歴を見ていましたら、Macawで検索されている方がおりました。

ムムっ!まさかの同士の方!おつかれさまです。

Macawとはアウトプットソースが超きれいな、外国製のWebオーサリングツールです。

オーサリングツールとは…まぁベタに言えば「ホームページビルダー」です。

AdobeだとMuseとかになるんですかね。ただしオーサリングツールてのは、IT業界でいうところの(昔ね)CASEツールと呼ばれるノンプログラミングツールで間違いないです。

CASEツールは軒並みソースがぐしゃぐしゃになる子なのですが、このMacawは違う。


ソースのきれいさ、パネェっす。


いいんですよぉMacaw。なぜ流行らないのか…。プロモーションが足りないんですかね。



■ほとんど問題なく納品しています


正直に申し上げますと、もうMacawで3件納品しています。

もちろんクライアント様には「Webオーサリングツールを使っています」と正直に申し上げた上での案件です。その代わりお安くご提供しています。

さほど動かない、凝った動き不要、コード追加あんまりしないのなら、Macawで十分すぎるほど十分です。その分お安くすればいいんですからね。安くていいものを提供するのは商売の基本です!

これぞWin-Win!

で、いちおうざっくりしたやり方だけ書いておきます。あんまり日本語の情報がないもので…。


■準備


(1)素材を作る
→これはまぁ従来どおり。イラストレーターかフォトショップですかね。画面サイズをアートボードサイズで作り、ピクセル単位でレイアウトしてデザインカンプとし、校了をいただく。

(2)素材を切り出す
→(1)からのスライスです。これもそれぞれのやり方はお詳しいサイトがたくさんありますので、そちらにおまかせします。


■Macawでレイアウトする


(3)初期設定
→最初とまどいますが、私のやり方はこれ。

まず、特に指定がない場合は、ブレイクポイントは1200pxにしています。もうあまり考えないことにしています。グリッドデザインもちょうどいいので…。
 
07

(4)素材の読み込み
LIBRARY > IMPORTから素材(2)を読み込みます。
29

23


(5)素材のレイアウト
LIBRARYからドラッグ&ドロップして、レイアウトします。
34


超カンタンです。


ただ気をつけたいのは、デフォルトでフローレイアウト(青い表示)になっていること。便利に使えば便利なんでしょうけど、あとあと面倒ください。

全部固定値にしちゃいます(茶色い表示)Absolute Positioning。ついでにx軸の指定もpxにします。
48

このpx値はイラストレーターでの座標を見ながら、そのとおりに入力します。そりゃそうですわ。そのためにピクセルずれがないよう、びちーっとデザインカンプ作ったんですから。


なんだかね、このデザインカンプからスライス→Webコーディングという「2回おんなじことしてるんじゃね感」が毎回いやなんですけど、なんとかならないんですかねぇ。


あと、%というのは、ブレイクポイントに対しての%値であり、こちらも便利に使えば便利なんでしょうけど、あとあと面倒ください^ ^

テキストなんかも直感でどんどんいけます。


(6)最後にグループ化してフローレイアウトにする。
で、最後の最後に全てのオブジェクトをグループ化して、そのグループをフローレイアウトにします。
06

20


そうすると、ブラウザのウィンドウを小さくしていくとき、固定幅までは余白が均等に減っていき、固定幅より小さくなると、右側がけずれていくタイプのフローレイアウトができます。

また、全体をグループ化したものをpxにしておきます。
54

 
29
43




あと、いろいろありそうなんですけど…。私の場合これだけで十分です(笑)

ということで同士の方がおられるようなので、Macawについてはちょびちょび更新してまいります!

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

ではでは出羽の海。










ご購入ありがとうございます!

■サポート(お心付け)をありがとうございます!(通算16件)

■マガジン・ノート販売実績(2017年)

1月(34件)/2月(33件)/3月(22件)/4月(20件)

■マガジン・ノート販売実績(2016年)

5月(7件)/6月(9件)
7月(5件)/8月(5件)/9月(8件)/10月(8件)/11月(6件)/12月(10件)


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




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

© 2017 GOROLIB DESIGN
Released under the MIT license.





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




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


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


◆ 仕事がなくなっちゃう(笑)スクリプトはオーダーメイドが最強です
オリジナルスクリプトつくります!3000円からどうぞ



■下処理を最小限にしました!素材名も付けられます

※スクリプト起動する前にイラストレーターデータは保存し、さらに別名保存したデータに対してスクリプトを用いてください(後述)

スクリプトはダウンロードにてお願いいたします。

スクリプトの起動についてはこちらから。

おつかれさまです。GOROLIB DESIGNです。

先日の記事
参考:三階ラボさんのスクリプトでWebデザイン素材をサクッと切り出す方法
のあと、あの憧れの三階ラボさんから「オフィスではもっとゴイスーなスクリプトを使ってます」とのコメントをいただきました。

ぜ、ぜひともヒントを!

と懇願したところ、もはやアートボードにもしないで出力できる(なんならネーミング次第で解像度も複数出力できる)とのこと。

いやいやいや、どうなってんのー(笑)本当にゴイスーです!脱帽。

画像出力コマンドにはオプションがありますが、

OPT.antiAliasing = true; // true : アンチエイリアスON
OPT.transparency = true; // true : 透過
OPT.artBoardClipping = true; // true : アートボードでクリップする


まあ気になるのは"artBoardClipping"ですけど、もしアートボードにしないで画像出力するなら、出力対象「以外」のオブジェクトをオフ表示にするしかない。


レイヤーに分けてレイヤーごとに出力するという方法も見かけましたが、いずれにしても下処理がパネェ感じです(失礼!)。


すみません、生来の面倒くさがり屋なので…。


で、なんだかそんなゴイスーなものはできそうもなく、あとはやっぱりアートボードクリップしかなさそうなので、それで行くことにしました。

プラス、ちょいとカンタン仕様にしてみました。


■選択オブジェクトをpng出力する。以上!


私、面倒くさがりなんです。下処理がイヤ。いきなりいきたいんです。

ここで目を覚ましました。面倒くさがりの本能!「面倒くさかりまさお」です(イミフ)。

もうね、このスクリプトは、選択オブジェクトをpng出力するだけです。

唯一の下処理は、カタマリにしておきたい素材について。カタマリにしておきたい素材はグループ化しておいてくださいね。

しくみは
(1)選択したオブジェクトを
(2)ひとつづつアートボード化しながら
(3)指定フォルダにpng出力する
という構造です。

□オブジェクトを選択します
□スクリプトを実行します
52

□保存先を指定します
17
□ファイルができます。グループ化したところはちゃんとカタマリで出ます。
43
 
□以上です。なおアートボードはめちゃめちゃになります(笑)



■処理後は保管しないでください(笑)


なので最初のアートボードはどっかいっちゃってめちゃめちゃになります(笑)

ひどいっすねぇ。ごめんなさい。制御ができない…。

素材用に別名保存したものをご利用ください。細かく言えば下処理ができた段階で、保存するのがベストかと思います。

ソースも載せときます(後述)。Githubに掲載するのってどうやるんだろ?あっちのほうが正式っぽくていいのかな…。

三階ラボさんには足元にもおよびませんが、サクッと素材を切り出すにはよさそうなので、どうぞご利用ください。

今回研究してぜーんぜんわからなかったのは、三階ラボさんのスクリプトでは矩形オブジェクトとテキストをグループ化したものを処理しているわけですが、その扱いが皆目わからない…orz。

そのグループ化したものから、パスアイテムとテキストアイテムを参照し、さらにテキストデータを抽出しているわけですが、皆目わからない…(2回目)。


しかし心からすげぇなぁ…三階ラボさん。


ではでは出羽の海。


スクリプトはダウンロードにてお願いいたします。

スクリプトの起動についてはこちらから。


以下ソースです。
━━━━━━━━━━
// Gorolib_DirectOutputPNG24.jsx
// Copyright (C) 2016 GOROLIB DESIGN All Rights Reserved.

FDR = Folder.selectDialog();
DOC = activeDocument;
SEL = activeDocument.selection;

if(DOC && FDR && SEL) {
for ( N=0 ; N<SEL.length ; N++ ) {
//アクティブなアートボードを取得
ABD = DOC.artboards[DOC.artboards.getActiveArtboardIndex()];

//選択オブジェクトのサイズを取得
GEO = SEL[N].geometricBounds;

//アートボードのサイズを設定
ABD.artboardRect = GEO;

//PNGファイル出力
OPT = new ExportOptionsPNG24();
OPT.antiAliasing = true;
OPT.transparency = true;
OPT.artBoardClipping = true;
FILE = new File(FDR.fsName + "/" + (( '00' + N ).slice( -3 )) + ".png");
DOC.exportFile(FILE,ExportType.PNG24,OPT);
}
}
━━━━━━━━━━

(追記160401)
ちなみにアートボード変換はgeometricBounds(実際の座標。プレビュー境界オフのイメージです)でやっています。線幅2pxで線の位置を中心にしておられる方は、線幅が半分なくなっちゃいますのでご注意を(こういうオブジェクト)。オブジェクトサイズをタテヨコともに2px増やして、線の位置は内側にしてください。
52

(追記160401)もちろん円形のものでも枠をつくらずにイケます。
11

52


(追記160403)
サブレイヤーを展開してオブジェクトおよびグループに命名すれば、そのファイル名で出力するよう変更しました。名前がない場合は、オブジェクトの重なり順の番号で自動的に命名します。


(追記160409)
kamiseto様のありがた〜いコメントを参考に、Document.imageCaptureの使用に書き換えました。ものすごシンプルになりました!ありがとうございます。







ご購入ありがとうございます!

■サポート(お心付け)をありがとうございます!(通算16件)

■マガジン・ノート販売実績(2017年)

1月(34件)/2月(33件)/3月(22件)/4月(20件)

■マガジン・ノート販売実績(2016年)

5月(7件)/6月(9件)
7月(5件)/8月(5件)/9月(8件)/10月(8件)/11月(6件)/12月(10件)


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




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

© 2017 GOROLIB DESIGN
Released under the MIT license.





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




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


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


◆ 仕事がなくなっちゃう(笑)スクリプトはオーダーメイドが最強です
オリジナルスクリプトつくります!3000円からどうぞ



イラストレーターからWeb素材を直接切り出すスクリプトを制作中です

おつかれさまです。GOROLIB DESIGNです。

な、な、なんと!三階ラボさんのスクリプトをご紹介したところ、まさかのご本人登場!ツイッターにてコメントをいただきました。ありがとうございます!

参考:三階ラボさんのスクリプトでWebデザイン素材をサクッと切り出す方法
http://gorolib.blog.jp/archives/57214129.html


なんだかもっとすごいスクリプトがあるとのことで、なんとかヒントをおねだりしたところ、

なんと!アートボードにしなくても書き出せるようにしておられるとのこと。

さすがですなぁ。心から憧れてしまいます。


で、ヒントを得ましたので私なりに考えていたのですが、全部アートボードにしなくても、

・選択オブジェクトをループで回しながら
・選択オブジェクトサイズのアートボードにしつつ
・png出力

ということならできそうな気がしてきました。

一方、レイヤーごとにpng出力というスクリプトは別な方が公開されていますが、新規レイヤーを作っては移動、作っては移動はたぶんご面倒さまなので、上記のやり方がよいと思っています。


 でもまだできません。凡庸なアタマゆえ、ごかんべんを…。


ではでは出羽の海。




 


ご購入ありがとうございます!

■サポート(お心付け)をありがとうございます!(通算16件)

■マガジン・ノート販売実績(2017年)

1月(34件)/2月(33件)/3月(22件)/4月(20件)

■マガジン・ノート販売実績(2016年)

5月(7件)/6月(9件)
7月(5件)/8月(5件)/9月(8件)/10月(8件)/11月(6件)/12月(10件)


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




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

© 2017 GOROLIB DESIGN
Released under the MIT license.





↑このページのトップヘ