【素材/フリー】ファイアーワークスで使える素材やテクスチャを配布では、
ファイヤーワークス(fireworks)の素材/テクスチャ/ボタン/アイコン/等々の実データを無料配布や使い方など。
ファイヤーワークス(fireworks)作業に役立てるようなブログを目指しております。

カテゴリ: 小技 の記事一覧

| | 次の10件へ≫

 

袋文字の作り方はてなブックマーク -

  • 2010/08/04(水) 15:41:03

久し振りにファイアーワークスの小技について。

袋文字の作り方についてです。



袋文字ってこんな文字の事ですよ。
(俺の認識が違ったらごめんなさい)

イラレならテキストアウトライン化して線の塗りをつけて太さを設定すると簡単にできるんですが、ファイアーワークスでも同じ事が出来るんですが、今回はアウトラインしなくても簡単にこの袋文字を作る方法を紹介します。
袋文字を作ってからテキストの編集が可能!
個人的にはすんごい便利だと思う。

では手順。


■手順


まず、テキストを書きます。

そのままですね。


■手順


書いたテキストを選択してグループ化
(Ctrl+G)



■手順


ここがミソです。
先ほどグループ化したテキストを選択すると、プロパティの線の設定が可能に!ここをちょっと設定すると簡単に袋文字が作れます。




■手順


後は調整して完成です。

はてなブックマークに追加 deliciousに登録 livedoorクリップに登録 Yahoo!ブックマークに登録 @niftyクリップに登録 FC2ソーシャルブックマークに登録 newsingに投稿 twitterでつぶやく
 

ショートカットはてなブックマーク -

  • 2010/07/08(木) 10:14:52

よく使うショートカットです。

何も選択していない状態で「Tab」を押すとパネルが非表示になります。

何気に便利です。

作業スペースの確保ができる!


なかなか便利ですよ。

はてなブックマークに追加 deliciousに登録 livedoorクリップに登録 Yahoo!ブックマークに登録 @niftyクリップに登録 FC2ソーシャルブックマークに登録 newsingに投稿 twitterでつぶやく
 

使えると思うショートカットはてなブックマーク -

  • 2010/05/28(金) 15:38:47

今回は…

「Ctrl」+左クリック


これは、パスの終わりや、テキスト入力の終わりで使うと通常のカーソルにもどります。

使えますよ。

はてなブックマークに追加 deliciousに登録 livedoorクリップに登録 Yahoo!ブックマークに登録 @niftyクリップに登録 FC2ソーシャルブックマークに登録 newsingに投稿 twitterでつぶやく
 

ファイアーワークスでのgifアニメの作り方はてなブックマーク -

  • 2010/05/12(水) 11:02:09

ファイアーワークス(fireworks8)でのgifアニメの作り方を説明します。

アニメーションgif gifアニメ
このgifアニメを作る手順を追って説明していきます。


以下手順&説明--------------------------------------------------

]箸汎阿したいものを用意する。

今回の例では200px×200pxの正方形の枠の中でAの柄が動くgifアニメを作っていきます。


 

A


とにかく動かしたいものが無かったらはじまりませんね。
用意しましょう。

用意できたら枠の中にAをはめてみる。
すると静止した時のイメージになりますね。
ここまでは普段の画像の作り方と同じです。

ここからgifアニメにしていきますよ。



▲侫譟璽爐覇阿していく

,罵儖佞靴燭發里鯑阿していきます。
今回は背景のイメージがスクロールしている簡単なものなので、とりあえずAのサイズを枠のサイズより大きくします。
サンプルは200px×400pxです。
下図のようにはみだしますね。



用意できたらフレームを編集していきます。



パネルに「フレーム」と言うのがあると思います。
ここを編集していきます。





右肩のメニューより「フレームの複製」を選択し1フレーム追加します。



選択するとフレーム2が増えてるはずです。
このフレーム2のAを10px上に動かします。



そしてフレーム2を選択した状態で「フレームの複製」をします。
そしてできたフレーム3のAをまた上に10px動かします。
これを繰り返します。



一連の動きが出来ると後は書き出しです。


書き出し

後は簡単ですね。
書き出せば完成。



最適化の部分を「アニメーションGIF」にして書き出し。

これで完成です。


アニメーションgif gifアニメ


長々とわかりにくい説明でごめんなさい。

フレームの長さを調節する場合はパネルの「フレーム」の数字を設定すれば変わります。
また、ループなど再生回数の設定も左下のアイコンで設定が出来ます。

はてなブックマークに追加 deliciousに登録 livedoorクリップに登録 Yahoo!ブックマークに登録 @niftyクリップに登録 FC2ソーシャルブックマークに登録 newsingに投稿 twitterでつぶやく
 

使えると思うショートカットはてなブックマーク -

  • 2010/04/28(水) 09:40:38

一番使っているショートカットの紹介。

拡大や縮小、回転したい対象を選択した状態で、

「Ctrl」+「Shift」+「T」



「数値を入力して変形」

のショートカットになります。

それだけですが、何気によく使います。

はてなブックマークに追加 deliciousに登録 livedoorクリップに登録 Yahoo!ブックマークに登録 @niftyクリップに登録 FC2ソーシャルブックマークに登録 newsingに投稿 twitterでつぶやく
 

【3D風】立体的なテキストの作り方はてなブックマーク -

  • 2010/02/04(木) 11:05:26

こちらで紹介されている。
3D風テキストの作り方を見て実践してみた。


↑こんなのがファイアーワークスだけで簡単に作れちゃいます。


以下はfireworks8での手順です。




1.テキストを準備

3Dっぽくしたいテキストを書くだけです。
簡単ですね。




2.テキストをアウトランして角度をつける

まずテキストをアウトラインします。
その後、「拡大・縮小ツール」「歪曲ツール」「傾斜ツール」などで角度を調整します。
これが仕上がりに大きくかかわってくるので重要っぽいです。






3.テキストをコピーする

角度が決まれば、テキストのコピーをとります。
そして色のついているテキストを最上部にし、「グロー」を下図の様に設定します。



コピーした、もう一つの素材の色を「白」にします。




4.立体にしていく

立体(3D)っぽくしていきます。
先ほどコピーした「白」の方の素材に「ソリッドシャドー」と「シャドー(内側)」を設定していきます。

■ソリッドシャドーの設定
-

■シャドー(内側)の設定
-

どうですか、だんだんそれっぽくなってきてませんか?




5.影をつける


そろそろ仕上げにかかります。
一番上の色のついたテキストをコピーし、色を「黒」にし、「ぼかし(ガウス)」を設定します。

そしてこのパーツの透明度を調節します。
出来たら最下部にし、位置を調節します。




6.仕上げ

最上部のテキストに対して、アクリルっぽくしてみたり、グラデーションをかけてみたりすると仕上がりが変わってきますね。
これで完成。



説明読むの面倒だ!と言う方はデータをダウンロードし、実際にデータをみてください。




実データをダウンロード


pngデータをダウンロード
※右クリックで画像を保存してお使いください。

はてなブックマークに追加 deliciousに登録 livedoorクリップに登録 Yahoo!ブックマークに登録 @niftyクリップに登録 FC2ソーシャルブックマークに登録 newsingに投稿 twitterでつぶやく
 

パターンの追加方法はてなブックマーク -

  • 2010/01/12(火) 10:11:29

パターンを追加するには、
パターンを適用させたい矩形を選択した状態で下記の様に、
その他」を選択します。





その他をクリックし、読み込みたいパターンを選択。

すると選択していた矩形にパターンが適用されます。

はてなブックマークに追加 deliciousに登録 livedoorクリップに登録 Yahoo!ブックマークに登録 @niftyクリップに登録 FC2ソーシャルブックマークに登録 newsingに投稿 twitterでつぶやく
 

ノート風素材の作り方はてなブックマーク -

  • 2010/01/06(水) 10:37:43

以前紹介した「ノート風テクスチャ素材」の作り方を紹介します。

※ファイヤーワークス8で作っています。

まず「ペンツール」で適当な長さの直線をひきます。

こんな感じ。

この線の設定を変更していきます。



デフォルトではこんな感じですが、
ストロークの種類を変更をすることでノート風の線になります。
ノート風の線をひくには「油性」の「ブリストル」を選択します。
※上記以外でもかまいません。



に設定すると…

破線の様になりました。
これをお好みの間隔でコピペしてください。

それっぽくなってきましたね。
後は、線の色背景に色をつけることでノート風になりますよ。



これで完成です。

テクスチャとして登録する場合は、つながる大きさを決めて切り出せば完了です。

はてなブックマークに追加 deliciousに登録 livedoorクリップに登録 Yahoo!ブックマークに登録 @niftyクリップに登録 FC2ソーシャルブックマークに登録 newsingに投稿 twitterでつぶやく
 

ファイアーワークスで写真(画像)の切り抜きをするにははてなブックマーク -

  • 2009/12/16(水) 11:32:02

今回は、写真(画像)の切り抜きについて。

ファイアーワークスで切り抜きをする時は、マスクを使ってます。
まず、切り抜きたい形を「ペンツール」でなぞっていきます。
で、なぞり終わったら、画像を選択し「マスクの追加」を選択。
そして、なぞったパスをマスクを選択した状態でペーストします。
すると、いらない部分が消えます。

ざっくり説明するとこんな感じです。
と、まぁ、パス抜きですね。
(下の方で詳しく説明します。)
俄然フォトショップでパス抜きする方が綺麗に切り抜きができます。
ファイアーワークスユーザーの皆様ごめんなさい。
慣れもあるんでしょうけど、やっぱり俺はフォトショップの方が…



では、画像を交えて詳しく説明。



この画像の真ん中のdocomoの広告を切り抜きます。

まずは、「ペンツール」で形をなぞっていきます。



ペンツール」で下の様な感じで形をなぞっていきます。
↓↓↓↓↓↓↓↓↓↓↓


これを最後までなぞり、そしてパスを閉じます



これで形はできましたね。
そして画像を選択した状態で、マスクの追加をします。


そして、先ほどなぞったパスをマスクにコピペします。



↑↑↑↑↑↑この様になればOK!

すると…




切り抜き完了。


正直ファイアーワークスでのパス抜きは使いにくい部分が多いと思います。
ただ、上記の画像の様に簡単な形ならファイアーワークスで問題ないと思います。
(ウェブ用画像なら問題ないかな?)
が、形が複雑になるとやっぱりフォトショップで切り抜きした方が綺麗にできますよ。

はてなブックマークに追加 deliciousに登録 livedoorクリップに登録 Yahoo!ブックマークに登録 @niftyクリップに登録 FC2ソーシャルブックマークに登録 newsingに投稿 twitterでつぶやく
 

ファイアーワークスで、にじまない破線を描くにははてなブックマーク -

  • 2009/12/03(木) 18:28:11

今回は、破線についての小技です。

ファイアーワークスで破線を描く場合、下の設定だと




下の破線の様に、にじんだ破線になってしまいます。





このにじんだ破線を、くっきりさせるには?



簡単な方法があるんです。

まず、線を描きます。






の設定ですかね。


ここからがミソで、下の画像の様に罫線にテクスチャを設定します。



多分デフォルトで入っているテクスチャ(垂直線2)を100%にします。


すると





くっきりはっきりした破線が!


比べてみると…




どうでしょうか?

この破線の間隔を広げるには別のテクスチャなどで応用できますよ。

はてなブックマークに追加 deliciousに登録 livedoorクリップに登録 Yahoo!ブックマークに登録 @niftyクリップに登録 FC2ソーシャルブックマークに登録 newsingに投稿 twitterでつぶやく
 

ブログ内検索

人気のエントリー

ブログパーツ

PoweredBy

Powered By DTIブログ


エロチャット エロチャット ツーショット 人妻 出会い