Photoshop用ブラシをFireworksで。
いろんなサイトでPhotoshopの素敵なフリーのブラシ素材が配付されてて、そんな配付サイトの紹介エントリを目撃するたびに「これFireworksでそのまま使えたらいいのになぁ」なんて思います。まぁそのままブラシとしてFireworks上で使うことはできないのですが、Photoshopの素敵ブラシを使用する機会は多いのでFireworks使いの自分がどう付き合ってるのかっていうエントリです。
とりあえず前提として、Fireworks上でそのままブラシとして使うことはできない（多分）ということで、感覚的にはスタンプ画像みたいな感じで使ってます。とにもかくにも、まずはどうにかして使いたいブラシをFireworks上に移植にする事からですよね。Fireworks用にスタンプ画像的なものを用意するいくつかの方法から。
Photoshopからそのままグイーン
自分はFireworks使いといってもPhotoshopも持っているので、これは一番楽な方法。Photoshop上でブラシを使って、それをそのままFireworksのカンバスへドラッグ。但し、透過されないので背景が白色になる。
白背景のデザインでもうそのまま置きたいだけっていう場合はこれが一番早い。逆に透過されてないと困る場合はこの方法じゃ無理。背景色が白、単発で使いまわしもしない場合はコレで事足りる。けど、同じブラシをサイズや色を変えてFireworks上で使い回ししたい場合は不向き。いちいちFireworksとPhotoshopを行ったりきたりしなきゃならないのでその辺りは面倒。
Photoshopで一旦透過png画像へ
使いたいブラシで画像を作って一旦Photoshopから透過png画像として保存。その後Fireworks上へ配置する方法。スタンプ的な感じ。上記の直接グイーンよりもこっちの方がFireworks上でいろいろできる。というか、やっぱり透過されてる方が絶対便利で使いやすい。
「あ、もう少し大きくしたい」という場合が多々あるので、予めPhotoshopで大きめの画像にしておく方がオススメです。大きい画像を小さくする分には問題ないのですが、小さいものを大きくするとぼやけて汚くなるので･･･。何回もPhotoshop上で同じ画像をサイズ変更して保存するのは面倒なので、大きすぎるんじゃね？くらいで後々使いやすくなるんじゃないかと。
Photoshopがないなら「abrViewer」
以前にも紹介した事があるのですが、Photoshopのブラシをプレビューすることが出来る「abrViewer」というソフトがあります。Photoshopを持ってなくても、これがあればブラシをプレビューして透過png画像として保存、という工程はクリアできます。
>>Opensource photohop brush viewer - abrViewer
「abrViewer」にブラシファイルを読み込んで「Export」>「thumbnail」をクリック。
任意のフォルダを選択すると、自動的にそのブラシファイルに含まれるすべてのデータが透過png形式で保存されます。
こんな感じで透過されてるのがわかります。
気に入ってるブラシに含まれるデータをいろいろと使いたいって場合はPhotoshopを開いて1つ1つ選ぶより、こっちの方法で一気に用意してしまった方が早いです。何度も使いまわしたいので共有ライブラリに入れておきたいっていう場合もこっちの方がいいと思います。保存されるサイズはそのブラシのオリジナルサイズになります。ということでPhotoshopがなくてもFireworks上にスタンプ画像を用意する事はできる、と。
Fireworks上で出来る事
本当はこういったブラシに関する事はPhotoshopで仕上げてしまうというのが一番いいのでしょうが、今回はFireworks上で加工もなんとかするぜ！という趣旨なのでそういうノリで書きますね。
色の変更
色の変更はフィルタ関連のパネルの「カラーを調整」の辺りで調整するか、ツールボックスの「カラーの置き換え」を利用して変更してます。「カラーの置き換え」はビットマップ画像でも特定の色だけを変更するという作業が効率よくできるので結構オススメです。という自分も「カラーの置き換え」は最近知ったツールなんですが･･･。例えばサイトのメインカラーが決まっててそれに合わせて特定の色部分のみ、その決まっている色に変更したい場合なんかにはめちゃめちゃ使いやすいです。
>>Adobe Fireworks CS4 * ビットマップオブジェクトのカラーの置き換え
「カラーを調整」>「色相・彩度」で色を変更してみた例。
「カラーの置き換え」で元画像の一番濃い色部分のみを変更してみた例。
サイズ・方向の変更
普通に「拡大・縮小ツール」や「変更 > 変形 > 数値を入力して変形」等で変更。反転とか角度とかも普通にいつもFireworksで作ってる画像同様に変形すればいい。
※ちょいメモ。読み飛ばしＯＫ。
何か理由があって画像補完形式を「バイキュービック法」以外の設定にしてる場合は頻繁にそういう設定を変更するのは面倒だと思うのでエッジが汚くなるのを防御するため、一旦別のカンバス上にその画像を置いて「カンバスをあわせる」>「画像サイズ」で変更。
左が「バイキュービック法」以外の形式で小さくしたもの、右が「バイキュービック法」や「画像サイズ」で小さくしたもの。
実は少し前に何かあって「バイキュービック法」から違う形式に変更していたのを忘れてて、画像の拡大縮小の際にえらくエッジがギサギサでどないなっとるねんって一人で悶々としてたんですね。普段触らない設定をいじると焦りますねぇ。つーことで上の一文は自分がまた焦らないための復習メモってことで。デフォルト設定はちゃんと「バイキュービック法」になっているはずなので気にしないでＯＫです。
グラデーションを付ける・その1
配置した画像は、そのままグラデーションをかけるのは無理なので、方法を2つほど。
まずはマスクを利用する方法。長方形でも円形でもいいので、普通にグラデーションの付いた矩形を用意してマスク（Alt+M+M+G）。もしくは「コマンド」>「クリエイティブ」>「ベクトルマスク」とか。
グラデーションの種類は線形でも円形でもその他の種類でもＯＫ。
マスクに使用するグラデーションは何色にしてもマスクかけた画像の色自体は変わらないのでそこはやっぱり手動で変更。
「コマンド」>「クリエイティブ」>「ベクトルマスク」でも同じような結果になる。（自分が使ってるバージョンはCS4なんですが、以前使ってたバージョンでは「イメージのフェード」っていう名称だった気がします）
グラデーションをかける・その2
これは以前FireworksのTipsを紹介してるサイトで見かけた（どこのサイトだったか忘れました。すみません＞＜）方法なのですが、一旦そのpng画像と同じサイズくらいのグラデーションをかけたオブジェクトを作ります。（元画像がすっぽり入るように）グラデーションの種類は線形でも円形でも何でもいけます。
そのグラデーションをかけたオブジェクトを元pngの上にピッタリ重ねてから「カット」（CTRL+X）。そして元pngを選択した状態で「編集」>「内部にペースト」（CTRL+Shift+V）
左が元png画像、右がグラデーションを入れたもの。
ただ、ブラシの種類によってはエッジがかなり目立つ感じになるのでそこは何とかせねばならんかもです。
また、ブラシの中で色の濃淡による模様が入ってる場合はなくなっちゃうので、濃淡も活かしたいって場合は･･･元ファイルを下に重ねてみる･･･とか？
グラデージョンをかけたオブジェクトをカットする際、必ず元png画像の上にピッタリ重ねる必要があります。ここちゃんと重なってないと内部にペーストできないです。
フィルタをかける
デザインに合わせて、フィルタパネルの中から適当なフィルタ効果をかけて加工。なんかちょっとだけ作ってみた。ちょっと立体的にしたり、ノイズ入れたり。なんやかんや・・・。
というわけで、自分はこんな感じでPhotoshopブラシをFireworks上で使ってます、というお話でした。
意外と知られていないペースト機能
ここからはブラシ関係ない話なんですが、上でちょっと触れたので、ついでに書いてみます。Fireworksの「編集」メニューの中には普通のペースト以外にも3つのペースト機能があります。これが意外と便利なんですよ。
- マスクとしてペースト（CTRL+ALT+V）
- 内部にペースト（CTRL+Shift+V）
- 属性をペースト（CTRL+ALT+Shift+V）
属性をペーストのマニュアルのページがどこか分からない＞＜
これは一度作ったオブジェクトのスタイルだけをコピーして別のオブジェクトに適応させてくれる使い勝手のいいペースト機能です。よく使うものはスタイルパネルに登録という方法もあるんですが、そこまでするまでもないっていうケースでいい感じです。
今回エントリで使用させて頂いたブラシ
今回、上で使用させて頂いた蝶のブラシはhawksmont Universe :)さんで配付されていたものなんですが、なにやらセキュリティ問題に遭遇してブラシ配付が停止になってるっぽいです。（2009年10月4日現在）ブラシのページにいくとNot Foundになっちゃう。ブラシを紹介してるいろんなブログで取り上げられてたのに残念＞＜
<< Fireworks トリミング画像を一括書出 CS4編 | Photoshopブラシ「まとめ」の「まとめ」 >>
トラックバック
このエントリーのトラックバックURL:
http://redline.hippy.jp/cgi/mt/mt-tb.cgi/245
コメント (7)
先日お世話になったmon-juです。このアドレスで早速使わせて頂き、問題も解決致しました。ありがとうございます。http://www.attraction-s.net/
どうやら、jsの問題では無く、画像の処理に問題が有ったのではと思ったのですが？こちらのサイトでは以前お知らせした問題が有りますので、やはりお知らせのとおり、jsの関係のようです。
http://members3.jcom.home.ne.jp/haru.yu/maruyamaclass.html
もう少し詳しく判りましたら再度お知らせ致します、先ずは、助かりました、本当にありがとうございます。
投稿者: mon-ju | 2009年10月04日 20:00
エントリーの内容とは関係ありませんが、jsについて教えていただきたくコメントいたしました。
全ページ共通のサイドバーをjsで読み込み、さらに現在みているページはリンクをできなくし、背景色を変更する。
これをjqueryでやるにはどうしたら良いのでしょうか…？
サイドバーの読み込みは以下のようにしております。
$("div#sideBar").load("sidebar.txt");
そのため現状、全ページが以下のようになっています。
<div id="sideBar">
<ul>
<li><a>ホゲホゲ</a></li>
<li><a>ホゲホゲ</a></li>
<li><a>ホゲホゲ</a></li>
</ul>
</div>
これを、現在見ているページでは
class="current"を追加し<a>要素を削除する。
<div id="sideBar">
<ul>
<li><a>ホゲホゲ</a></li>
<li class="current">今見ているページ</li>
<li><a>ホゲホゲ</a></li>
</ul>
</div>
お忙しいところ大変申し訳ありませんが、
ご教示お願いいたします。
投稿者: takuya | 2009年10月18日 16:29
>takuyaさん
.loadを利用して外部txtファイルを読み込むっていうのをやったことがなくて今試してたんですが、知識不足で、なんか読み込んだ先の要素をごにょごにょ･･･がうまくいかなかったです（汗
javascriptは苦手なんですが、私だったらこうするかな、っていうサンプル作ってみました。
（PHPを利用しているのでtakuyaさんの環境でPHPが利用できない理由があるからJS使ってるのに！っていう事でしたらごめんなさい＞＜）
とりあえずloadは置いておいて、
1.phpでsidebar.txtをinclude
2.各htmlのbodyにidを割り振る、
3.sidebar.txtの各li要素にもidを割り振っておく
4.jQueryでそのbodyとliのidガ両方揃ってる時、class「current」を追加する
5.class「current」がついてるliに含まれるa要素の中のテキストを一旦変数にいれておく
6.該当a要素とその変数を置換する
っていう流れでやってみました。
http://redline.hippy.jp/redline_sample/0910_jQuery/sample01.php
sidebar.txtの中身
<ul>
<li id="page1"><a href="sample01.php">ページ1</a></li>
<li id="page2"><a href="sample02.php">ページ2</a></li>
<li id="page3"><a href="sample03.php">ページ3</a></li>
</ul>
各ページのソース
[CSS]
.current{
background:#f90;
font-weight:bold;
}
[Javascript]
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
$("#page_01 #page1 , #page_02 #page2 , #page_03 #page3").addClass("current");
var currentText = $(".current a").text();
$(".current a").replaceWith(currentText);
});
-->
</script>
[HTML]
<body id="page_01">
<h1>サンプルページ1</h1>
<div id="sideBar"><?php include 'sidebar.txt'; ?></div>
</body>
ページ2.3についてもbodyのidを書き換えてる以外は同様です。
PHPを利用できないとなると使えないんですが、この方法でincludeする場合はjs無効の場合でもちゃんとナビゲーションは機能するのでこっちの方がいいかなとか思ったり･･･。
お役に立てなかったらすみません･･･。
私の頭ではこれ以上のことは分からないので、どなたかjavascriptに詳しい方にお尋ね下さいまし＞＜
「jQuery 現在のページ」とかでググったらいろいろ出てきましたよー。
投稿者: Red | 2009年10月19日 11:43
はじめまして。
いつもRedさんのブログを背景して勉強させて頂いてます。
Fireworksのブラシって少ないんだなと思っていましたので、今回もすごく勉強になりました。
早速やってみたいと思います！
それにしても･･･記事に関係ない質問ばかりで大変ですね＞＜
>takuya
ここで何度も何度も何度も何度も質問されてるようですが、記事と全く関係ないコメント欄で質問するのはどうかと思います。
もっと自分で調べましょうよ。または教えてgooなどで質問したらどうですか？
確かにこちらは勉強になるブログですが、甘えすぎです。
Redさんも親切過ぎですよ。
質問に答える事が自身の勉強になるのも分かりますが。
人のブログで出すぎた事を言ってすみません。
最近の「教えてください！」の嵐にウンザリしていましたので、書かせてもらいました。
またためになる記事を楽しみにしています。
投稿者: 森 | 2009年10月19日 13:01
すみません。変換間違いでした
＞背景して勉強させて頂いてます。
背景ってｗ
拝見ですね。失礼しました。
投稿者: 匿名 | 2009年10月19日 13:02
Redさん、お返事ありがとうございます。
今回はPHPを利用できない状況なので、参考にさせていただきます！
ご指摘があったように、何度も記事に関係ない質問をし大変申し訳ありませんでした。
軽率な行動だったと反省しております。
投稿者: takuya | 2009年10月20日 15:58
>森さん、コメントありがとうございました。
Fireworks、とっても便利ですよ！いい子ですよ！というのをアピールしておかなきゃソフト自体が消えてしまいそうな予感がするので必死にアピってます＞＜
どんどんFireworksにハマってくださいー！
>質問に答える事が自身の勉強になるのも分かりますが。
そうですね。。気をつけます･･･。でもおっしゃるとおり、実際かなり勉強になってますです。。。
>takuyaさん
>今回はPHPを利用できない状況なので
あ゛あ゛あ゛ーやっぱりそうでしたか＞＜
お役に立てず、すみませんです･･･。
投稿者: Red | 2009年10月21日 19:58