--/--  スポンサーサイト 

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[ --/--/-- --:-- ] スポンサー広告 | トラックバック(-) | コメント(-)

01/21  イラレの「3D」をもっと活用しよう 

CS3のイラストレータの効果に「3D」というのがある。

結構機能的にはすごいのに
なんか地味な存在になってしまってる気がする。

フォトショップや3DCGソフトなどで事足りるという人にとっては
まあ中途半端な機能ではあるのだが。

でもちょっとしたワンポイントやアイキャッチをデザインするのには
結構便利だと思う。

使い方も、予備知識無しでほぼ把握できる感じ。

Adobe Illustrator CS3ScreenSnapz001

遠近感や、押し出し幅、押し出しの形、向きなど
結構細かく調整が可能。

マッピングでシンボルを貼り込んだりもできる。

Adobe Illustrator CS3ScreenSnapz002

ここで注意すべき点は、単純な形のオブジェクトを使用すること。
パスが複雑だったり、マッピングで複雑なシンボルを選んだりすると
どえらい処理時間を要求される。

「回転体」なんてのもおもしろい。

Adobe Illustrator CS3ScreenSnapz003

なんか3DCGソフトでレンダリングしたような仕上がり。

ちなみにオフセットは回転する円の直径を調整するところ。

Adobe Illustrator CS3ScreenSnapz004

「グラフィックスタイル」パレットの「3D効果」でも
同様の効果がかけられるので
「効果」の「3D」でピンとこないようであれば
「グラフィックスタイル」をいろいろいじってみるのもいい。

チラシ作りなどでイラストレータを使用しているオペレータは
案外この機能を知らない人も中にはいると思う。

もっと評価されてもいい機能だと思うんだけどなぁ。


スポンサーサイト
[ 2009/01/21 02:42 ] DTP | TB(0) | CM(0)

12/11  Photoshopで破線(点線)を描く パス編 

フォトショップで破線(点線)を描く時のパスを使用する場合。

まず破線にしたい形にパスで線・図形を作成する。
特にパスの始点と終点を結ぶ必要はない。

PhotoshopScreenSnapz005_20081209200057.jpg

この時シェイプではなく「パス」を選んでおく。

パスを作成したら、ブラシツールを選択して
「ウィンドウ」より「ブラシ」を開く。
「ブラシ先端のシェイプ」から、破線の太さ・間隔などを設定。

PhotoshopScreenSnapz004_20081209200820.jpg

次にパスウィンドウで作業用パスを選択し
オプションから「パスの境界線を描く」を実行。

PhotoshopScreenSnapz001_20081209201811.jpg

するとパスにブラシが適用される。

PhotoshopScreenSnapz002_20081209202421.jpg

この方法であればパスを残している限り修正が可能だ。


[ 2008/12/11 15:10 ] DTP | TB(0) | CM(0)

12/09  Photoshopで動画をGIFアニメに・その2 ~素材・鳥居みゆき~ 映像編集ソフトに迫るPhotoshop Extendedの潜在能力 

Photoshop Extendedでの鳥居みゆき「ヒトエンドラーン」のGIFアニメ化。
思いの外きれいに仕上がったので
ノーマルでも十分満足ではあるが、
ここはちょっとオリジナリティを出してみたい。

torii_gifanime00.gif

テロップ、というか動きに合わせてセリフを入れてみよう。
今回は鳥居みゆきの動きに合わせて
「そーれヒットエンドラーン~うぐいすじょう」までの文字を入れてみる。

今まで全然使ったことがなかったので知らなかったが
フォトショップのアニメーション機能には
かなり凝った編集が可能だとわかった。

アニメーションパレットのタイムライン表示の編集画面が
映像編集ソフト的なインターフェイスで
機能的にも似たようなことができる。

PhotoshopScreenSnapz012.jpg

パっと見、動画編集の経験がない人などから見ると
とっつきにくい、敷居の高さを感じるかもしれないが
やってることは結構単純で
「どの時間にどうレイヤーを表示させるか」
ということである。

とにかく実践してみよう。

まず必要なテキストをレイヤーで追加していく。
順を追って表示させたい場合は
それに応じてテキストを区切って追加する。

普通にレイヤーパレットで新規レイヤーを作成すると
最終コマのレイヤーの上に作成されていく。
同時にタイムラインでも、どんどん上に重ねられて作成される。

レイヤー名の横の▼をクリックすると中身が開く。
ここでタイムライン上に不透明度などの指示を与えて
素材を動かしたり消したり変形させたりするのである。

動きの指示を出したい場所(時間)に縦ラインをもっていき
「不透明度」などの横にあるストップウォッチマークをクリック。
そして現れた菱形をクリックすると
タイムライン上に「キーフレーム」が表示される。

PhotoshopScreenSnapz009.jpg

キーフレームがこの編集の核である。

キーフレームを追加すれば様々な指示を与えることができる。
例えば、位置のキーフレームで始点と終点を定義すれば
素材が移動していく表現が可能だし、
不透明度は方法によっては点滅・フェードイン・フェードアウトが可能、
スタイルはエンボスなどの効果、
ワープテキストは変形が可能だ。

キーフレーム上で効果を追加する場合は
レイヤーパレットなり移動ツールなりで
通常のフォトショップの操作と同様に実行していく。

今回はテキストのみなので、あとはキーフレーム追加で
テキストレイヤーごとに動きを与えていくだけだ。

鳥居みゆきヒットエンドラーンGIFアニメ・セリフエディション完成。

torii_gifanime01.gif

保存時のオプション設定によって色数を調整すれば
ちょっと味のある感じにもなる。

torii_gifanime02.gif

フォトショップはほんとに多機能。
使ったことのない機能がまだまだあると思う。

まぁこういったとこがとっつきにくいともいえるんだけど。


[ 2008/12/09 04:25 ] 鳥居みゆき | TB(0) | CM(0)

12/08  Photoshopで動画をGIFアニメに 

動画素材をPhotoshop Extendedに読み込んでGIFアニメ化する方法を
忘れぬように覚え書き。

環境はPhotoshop CS3 Extended。

まずは兎にも角にも素材の動画が必要だ。

今回はあえて鳥居みゆきのヒットエンドラーンをGIFアニメ化してみる。

QuickTime PlayerScreenSnapz001


なるべく短い動画を用意。せいぜい10秒くらいのもの。
解像度はのちほど変更するので特に気にしなくてよい。
形式は確認したところではmpeg、mov、aviが読み込みに対応。

まず「ファイル」の「読み込み」から
「ビデオフレームからレイヤー」を選択。

PhotoshopScreenSnapz001_20081208220052.jpg

すると読み込みオプションが表示される。

PhotoshopScreenSnapz002_20081208220208.jpg

フレームをスキップする頻度が変更可能だが、
ここは「最初から最後まで」を選択。

動画を読み込むと、各コマが全てレイヤーの状態で開く。
しかし300枚って……

PhotoshopScreenSnapz003_20081208220648.jpg

次に、個人的には滅多にお目にかからないアニメーションパレットを表示。

PhotoshopScreenSnapz004_20081208221030.jpg

この「フレームアニメーション」表示では
各コマの表示秒数などを変更できるが
今回はこの「フレームアニメーション」表示は必要ないので
オプションメニューより「タイムライン」へ変更。

PhotoshopScreenSnapz005_20081208221451.jpg

「タイムライン」表示は映像編集ソフトに似たインターフェイスになる。
編集時の基本画面はこんな感じ。

PhotoshopScreenSnapz011.jpg

ここで容量を軽くするために、
アニメーションパレットのオプションメニューから
ドキュメント設定を選び、フレームレートを調整しておく。

PhotoshopScreenSnapz006.jpg

ファイルの秒数とフレームレートが表示される。
15fpsくらいでいいだろう。ここは臨機応変に。

PhotoshopScreenSnapz014.jpg

さらにドキュメントの解像度を下げる。
とりあえず今回は160×120pixel。ちっちゃ。

PhotoshopScreenSnapz007.jpg

保存時のオプションで解像度変更も可能だが処理が重くなるのでここで変更。

さあ後は保存するだけ。
「ファイル」から「Webおよびデバイス用に保存」を選択。

PhotoshopScreenSnapz016.jpg

そうすると保存用のメニューが現れるので容量と相談しながら調整する。

PhotoshopScreenSnapz015.jpg

「インターレース」にチェックが入っていると「劣化」は選べない。
いくつか試してみて、256色のままで「劣化」を調整するのが
一番きれいに仕上がりそう。
ものによっては「インターレース」にチェックを入れたり、
Webスナップをいじったりするほうがうまくいく場合もあるので
ここも臨機応変に。あとループ設定も忘れずに。

これで動画からGIFアニメの完成。

torii_gifanime00.gif

このクオリティで約500kbなら文句ないだろう。



しかしここまでくると欲が出るもので、
ちょっと加工してみたくなってくる。

実はフォトショップにはかなりの潜在能力があるのだ……

長くなるので「その2」へつづく……。


[ 2008/12/08 23:07 ] 鳥居みゆき | TB(0) | CM(0)

12/06  Photoshopで破線(点線)を描く 曲線編 

自分で忘れぬように覚え書き。

曲線を描く場合を忘れていたので記録しておこう。

まあ非常に単純なことだが
ブラシタブ→ブラシの先端シェイプ→間隔をいじるだけ。

20081206.jpg

こっちのほうが応用利くかなぁ。
[ 2008/12/06 10:17 ] DTP | TB(0) | CM(0)

12/01  Photoshopで破線(点線)を描く 

自分で忘れぬように覚え書き。

Photoshopで点線を描きたいときがたまにある。
Illustratorで作成すれば自由自在だが、
Illustratorを開くまでもないような時に。

環境はPhotoshop CS3。
バージョン違いでも応用は利くだろう。

まず下準備から。
正方形のファイルを作成し、半分を黒、半分を白に塗りつぶす。
このときの黒(色)部分が線分、白(色無し)部分が破線の間隔となる。
このファイルでメニューの「編集」から「パターンを定義」を選択。


20081201-01.jpg


プレビューが変だが問題なし。
パターンに新しく追加されていればOK。

20081201-02.jpg


あとは必要な太さ・長さのファイルを作成し、
「塗りつぶし」から「パターン」を選択すれば破線になる。

20081201-03.jpg




パターンは応用も利く。
たとえば、縦方向のグラデーションでパターンを作成しておく。
そのパターンで正方形を全面塗りつぶし。

20081201-04.jpg


そしてメニューの「フィルタ」→「変形」→「極座標」を使い、
横縞パターンを円状に加工する(縦縞だと円にならない)。

20081201-05.jpg


さらにメニューの「フィルタ」→「変形」→「波形」で
微調整しながら縞模様を歪ませる。

20081201-06.jpg

あとは使えそうな部分をトリミング、変形、色調整し
必要に応じて木の質感を加えれば、木目ができる。

20081201-07.jpg


木の素材の質感を出す例
・新規レイヤー→木目パターンで塗りつぶし
 →レイヤーの描画モードで乗算などを選択して合成
・新規レイヤー→塗りつぶし→ノイズを加える→ぼかし(移動)
 →レイヤーの描画モードで乗算などを選択して合成


[ 2008/12/01 11:49 ] DTP | TB(0) | CM(0)

12/01  Photoshopで波線を描く 

自分で忘れぬように覚え書き。

環境はPhotoshop CS3。
バージョン違いでも応用は利くだろう。

まず何でもいいから線を引く。
大きめに作っておいて後で縮小したほうがきれいに上がるかも。

PhotoshopScreenSnapz001.jpg


そしてフィルタの「変形」から「波形」を選ぶ。

PhotoshopScreenSnapz002.jpg


「波形」のウィンドウが開いたら、正弦波を選び、
波数、波長の最小、振幅の最小をそれぞれ1に設定。

PhotoshopScreenSnapz003.jpg


プレビュー画面を確認しながら、波長・振幅の最大値で微調整していく。

PhotoshopScreenSnapz003-02.jpg


状況に応じて、線幅・波数・振幅などを調整して使用する。

PhotoshopScreenSnapz004.jpg


これでいちいちイラストレータを開いてパスの「ジグザグ」を使うことなく
フォトショップ上で波線が描ける。

PhotoshopScreenSnapz005.jpg


【追記】

波長、振幅などは特に1に設定しなくてもOK。


[ 2008/12/01 01:08 ] DTP | TB(0) | CM(0)
プロフィール

zsf

Author:zsf
果たして生き残れるのか

カレンダー
07 | 2017/08 | 09
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -
Books
amazonキーワード検索
google ad
無印良品ネットストア


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。