REDLINE MAGAZINE | Fireworks トリミング画像を一括書出 CS4編REDLINE MAGAZINEトップページへ

すべてのエントリを見る

Fireworks トリミング画像を一括書出 CS4編

バシャログ。さんのFireworksネタが大好きでいつも拝見して勉強させて頂いてます。先日こんなエントリがあったので、自分でも試してみました。サムネイル用等に複数の画像ファイルをFireworksでトリミングする際、効率よく楽にファイル書き出しする方法のお話。

【Fireworks】トリミングした画像をたくさん書き出したいときに思い出してください | バシャログ。
【Fireworks】トリミングした画像をたくさん書き出したいときに思い出してください2 | バシャログ。

バシャログ。さんではバージョンがCS3っぽいのですが、じぶんは今CS4を利用してるので、そのバージョンでのお話。

新規作成~カンバスサイズの設定~画像の読み込み

上記記事同様、複数の画像ファイルを一気に1つのFWページ内で編集するという前提で、まず「ファイル」>「新規作成」でトリミングしたいサイズにカンバスサイズを設定して新しいドキュメントを作る。

新規ドキュメント内に使いたい画像ファイルを一気に全部読み込んで配置。

キャプチャ・画像ファイルを配置

もしでっかいサイズの画像をある程度縮小してからトリミングしなきゃなんない時は一旦その元サイズで全部読み込んでからプロパティパネルの「画像サイズ」で一気に適当な大きさに縮小しちゃえば早いかなと。

レイヤーをステートに配分

CS3以前は「フレーム」と呼ばれていたものはCS4では「ステート」という名称に変わっている模様。アニメーションGIFを作る機会も少ないので個人的には馴染みは薄めなのですが・・・。

先ほど読み込んだファイルはそれぞれ1つずつレイヤーに分かれているので、レイヤーパネルで全部選択。

レイヤーを全て選択した状態のまま、今度はステートパネルへ移動。今はステートは1しかない状態のはずなので、ステート1を右クリック -> 「ステートに配分」をクリック。

キャプチャ・レイヤーを全て選択し、ステートに配分

これで各画像ファイルがそれぞれ1つずつステートに分かれた状態となる。

キャプチャ・ステートに配分

先ほど読み込んだ画像の個数分ステートが現れてるのが確認できる。

トリミング位置あわせ

各ステートを確認してトリミングする位置を確認。まぁ全部そのままでいいわって場合はそのままでオッケー。その他シャープかけておきたいとか、ちょこちょこ手を入れたい時はこの段階でお手入れを。

スライス~書き出し

普通にスライスを追加して最適化。スライス名はつけてもつけなくてもどっちでもいいと思う。

キャプチャ・スライス

「ファイル」>「書き出し」をクリック。ファイル名は何か適当に。(スライス名を付けてたらそれが表示されてるはず)今回はsampleとしました。書き出しの選択で「ステートからファイルへ」を選択し、「保存」。

キャプチャ・「ステートからファイルへ」を選択

そうすると「sample_s01.jpg」「sample_s02.jpg」のような形で連番が付いたファイルが書き出しされる。

キャプチャ・書き出された画像

特に何も書き出し時のファイル名の設定をした記憶はないんだけれども、なんか最初からこういう名前で書き出しされた。パシャログ。さんでは命名規則をちゃんと設定してたんだけどな・・・。(もしかしたら自分で昔設定をいじったのかもしれないけど)一応「ファイル」>「HTMLの設定」内の「ドキュメントの詳細」も確認してみました。

キャプチャ・「ファイル」>「HTMLの設定」

めっちゃシンプル。ここまで何の設定もされてないと多分過去に自分でいじってプレーンな状態にしたんだろうなっていう気がしてきました・・・。この設定はあまり使ったことがなくてよく分からないんですが、一気にhtmlや画像書き出す際のオプションか何かだったと思う。

キャプチャ・「ファイル」>「HTMLの設定」

書き出す時のファイル名の何かをいろいろ選べる模様。まぁなんせ私のように全部「なし」になってる状態で一気にステート全部書き出すと、書き出し名+「 _ 」+0付き連番という名前になるらしいです。

書き出したファイルの名前を変更

で、普通にアンダースコアの次は0付き連番でいいのに勝手に「s」ってついてますね。なんのsでしょう・・・。ステートのs?スライスのs?よく分かりませんが邪魔なのでこれらのファイルの名前もFireworksで一気に変更します。

「ファイル」>「バッチ処理」をクリック。すると処理するファイルを選択する画面になるので名前を変更したいファイルを全部選択して「次へ」をクリック。(ここでファイルの選択をスルーしても後でまた出てくる)

キャプチャ・バッチ処理 ファイルの選択

バッチ処理のバッチオプションの「名前を変更」を追加。下の「名前を変更」の部分で「置換」「空白を次と置換」「接頭辞を追加」「接尾辞を追加」と4つ並んでいるんですが、今回は「置換」を選択。置換前の文字列に「_s」、置換テキストに「_」を入れました。そして「次へ」

キャプチャ・バッチ処理 「名前を変更」を追加

次にリネームした画像をどこに保存するかの選択。オリジナルと同じ場所か、もしくは任意の場所か選択して「バッチ」をクリック。また「スクリプトを保存」をクリックすると、今回のこのバッチ処理の内容をファイルに保存しておける。

キャプチャ・バッチ処理 保存場所の選択

バッチ処理の最初で処理するファイルの選択をスルーした場合は次にどれを処理するんだ?と聞かれるので、該当するファイルを全部選択した状態で「完了」をクリック。「バッチ処理が正常に完了しました」とか処理されたファイル数が表示されれば無事完了。

キャプチャ・バッチ処理 完了

処理されたファイルを確認してみると、先ほど書き出した「sample_s01.jpg」が「sample_01.jpg」のようにリネームされているのが確認できる。

キャプチャ・リネームされたファイル

ちなみにさっき途中でスクリプトの保存をした場合は、その際出来たファイルをダブルクリックするといきなり処理するファイルの選択画面が出てくる。何回かに分けて上記の作業を繰り返す時は保存しておくと便利なのかも。

そういうわけで。

Fireworksでもこんな簡単にこういうコトができたんだーと感動して嬉しかったわけですが、実のところ、トリミングが必要ないケースでのサムネイル化やリネームはフリーソフトを使ってました。

HTMLThumb

サムネイル化にはコレ使ってました。が、しかし作者さんのサイトが!Not Found状態になってるではないですか・・・。ガーン。

Vector:HTMLThumb

jpegしか対応してないそうなんですが、トリミングの必要なくそのまま縮小だけしたいって場合は便利。ただ、一気にガシっと縮小したいのに100ファイル中、数枚だけ縦長のファイルがあるって場合はそいつだけおかしいことになるので別途対応は必要。

まるたけ

リネームはコレが一番お気に入りです。かゆい所にもバシバシ手が届く感じです。なんとも味のあるアイコンがたまりません。

Vector:まるたけ

ということで、超久々の更新はFireworksネタでした。ちゃんちゃん。

そうそう、まったく話は変わるんですが、ロリポップのサーバーが、6月29日より値段はそのままで、今まで200MBだった容量が1GBになるそうでヽ(´ー`)ノ
ずっとここの容量については気にはなっていたのでこれで一安心です。

<< マインドマップツール | Photoshop用ブラシをFireworksで。 >>

トラックバック

このエントリーのトラックバックURL:
http://redline.hippy.jp/cgi/mt/mt-tb.cgi/241

コメント (4)

はじめまして、いつも楽しく拝見しております。
Fireworksからリネームなんて事ができたんですね。
バッチをあまり使った事が無かったので、勉強になりました。

ちなみに、サムネイルを作成する時は「縮小専用。」もおすすめですよ。
http://www.vector.co.jp/soft/win95/art/se153674.html

>Iperさん
「縮小専用。」私も使った事ありました(n'∀')η
画像に関して、普段はFireworksやPhotoshopをメインで使ってますがこういうシンプルな機能に特化したフリーソフトって結構重宝しますよね。
作ってくださった方に感謝感謝です(n' ω 'n)
コメントありがとうございましたー!

こんにちは。
色々と勉強させていただきます!
1つだけ基本的なことを伺いたいのですが、

>新規ドキュメント内に使いたい画像ファイルを一気に全部読み込んで配置。

の際に、全部いっぺんに読み込む方法はございますでしょうか?
「ファイル」→「読み込み」からだと、1つのファイルしか指定できないため、これを繰り返して数十枚の画像を読み込んでいてとても面倒な作業となっているのですが....

お手隙の際にお返事いただけたら幸いです!

>malaさん
コメントありがとうございました。
>全部いっぺんに読み込む方法はございますでしょうか?
複数のファイルを別ファイルとして開きたい場合は一気に開きたい画像をエクスプローラー等で複数選択して、FWが立ち上がってない状態ならデスクトップ等にアイコンがあるならそこへドラッグ、FWが立ち上がってるなら何もファイルが開いてない時に複数選択した状態でFWの中にドラッグすれば別ファイルとしてダダダーって一気に開きます。
今回の記事のように同じファイル内に複数読み込みする場合は、一度ファイルを新規でも何でもいいので開いてそこへ複数選択した状態でドラッグすれば一気に読み込めます(ノ´∀`*)




※コメント欄に「<」「>」等を含むソースを記載する場合は実体参照に変換してください。

このページの一番上へ

その他の情報など

最近のコメント

PHP オブジェクト指向の勉強
  • Red - 2010.01.08
  • hogepage - 2010.01.21
  • Red - 2010.01.22
  • - 2011.11.27
  • houseiii - 2011.11.27
Fireworks トリミング画像を一括書出 CS4編
  • Iper - 2009.06.27
  • Red - 2009.06.27
  • mala - 2011.11.17
  • Red - 2011.11.18
jQueryでボックスを上下左右中央に簡単配置
overflow を使用したボックス背景のこと
  • - 2007.12.13
  • Red - 2007.12.13
  • - 2007.12.13
  • Red - 2007.12.13
  • hj - 2011.09.23
IE6 → 透過PNG+overflow=混ぜるな危険(追記有)

メッセージを送る

こちらのメッセージ送信フォームは閉鎖させて頂きました。
御用の方は新しい方のブログ にコメント頂くか、 連絡用のフォーム もありますので、そちらからご連絡ください。