飾り罫がダウンロードできるサイト。
http://frames-design.com/
ありがたや(・∀・)
Thursday, March 28, 2013
Wednesday, March 27, 2013
PhotoshopとAfterEffectsでループ動画を作る。
今回はphotoshopでループ素材を描いて、AfterEffectsで動画にしてみる。
1.photoshopで空適当に描く。今回は1024x384で作ろうと思います。
左端と右端の色味を変えすぎると後で苦労します。
奥のゆっくり動く雲と手前の早く動く雲をレイヤーを分けて描いちゃいます。
最終的にどちらの方向に動かすか考えて描くのがおすすめです。
2.さて、左端と右端が綺麗につなげることができればループ素材の出来上がりなのです。
そこで、「フィルタ」→「その他」→「スクロール」を使います。スクロールの数値をいじると、つな ぎ目部分がわかります。ここのつなぎ目を綺麗にしてあげるわけです。ブラシとぼかしを駆使 して、綺麗にしてあげましょう。
3.綺麗にしたら、「スクロール」の数値を0に戻してあげれば、元の状態で、つなぎ目がない画像 の出来上がりです。これで、photoshopでの作業は終わり。
4.作った素材をAfterEffectsに読み込んで、エフェクトの「オフセット」をかける。
手前の雲と奥の雲の数値を変えてあげると、奥行きのある空ができます。
ニコニコモンズに置いておきます。
Photoshopで元を作っておくとＦｌａｓｈにも使えるので「スクロール」は覚えておくといいと思います。
Wednesday, March 20, 2013
和物・和柄のデザインに使える素材集・サイト（無料+有料）
基本商用利用可のサイトを紹介。ただこのまとめを作成時と利用規約が変わっている場合もあると思いますので、商用利用の場合は各サイトの利用規約のご確認を。
「基本無料で素材がダウンロードできるサイト」
粋屋様 素材の利用とともに和柄の名前の勉強になる。商用利用の場合は一報。
DotsDomino 和物に限らず色々な素材が用意されている。違法？
季節素材 夢幻華亭様 素材は、リンクフリー・加工ＯＫ・商用サイトでのご利用、個人（非営利・非商用）での印刷使用可。無断での商用印刷利用は禁止。
和風素材.com フリー素材。和風イラスト、テクスチャなど。
水の宮和風素材 フリー素材。数は少ないがクオリティの高い和風イラスト素材が有ります。
ましうし堂 和風のイラスト素材有り。個人は無料。営利目的での使用はメールにて確認。
Ｉｌｌｕｓｔ ＡＣ 会員登録制の無料素材サイト。和風なイラスト多し。
パターンデザインのサイト フリー素材。イラストレーター用のパターンを提供しているサイト「和風」タグに和柄のパターン有。
「和物が置いてある有料素材サイト」
ＷＡＧＡＲＡ．ｏｒｇ （株）京都デザインファクトリーが運営している和風素材の販売サイト。
下にアマゾンのリンクを貼っている「和柄パーツ＆パターン素材」を作った会社。
正直言って、この2冊のパスデータの和柄素材は種類が豊富で使い勝手がいいい。
パスデータなので自分で加工も楽にできる。
pixta 写真素材サイト。着物の写真など多数。
photolibrary 写真・イラストともに和風の素材が多数。
「有料素材集」
素材辞典・和の色彩シリーズ 和柄バックグラウンドデザイン集。一部販売終了。
素材辞典-036 日本が誇る伝統文様を織り上げた、艶やかな帯柄を収録。
素材辞典-051 友禅・和更紗・藍染めなど、伝統的な技法で鮮やかに染め上げた染め物を収録。
素材辞典-068 ひな祭り、子供の日、七夕、御盆、十五夜、七五三、正月、節分など日本の季節の祭りや、祝い事、年中行事の写真を収録。
【関連記事】
Illustrator：和柄のパターンの作り方を紹介。24種類のtips＆リンク集
画像の無料素材サイト「stock xchng」 他
画像の無料素材サイト「写真素材 足成」様
データクラフト (1998-02-14)
売り上げランキング: 9,127
売り上げランキング: 9,127
データクラフト (1998-11-06)
売り上げランキング: 8,680
売り上げランキング: 8,680
データクラフト (1999-12-03)
売り上げランキング: 3,702
売り上げランキング: 3,702
Monday, March 18, 2013
Illustratorで玉（球体）に文字を貼り付ける
イラストレーターのバージョンはcs5.5です。3D機能があればどのバージョンでも問題なし。
1.貼り付けたい文字をテキストツールで書きます。
今回は最近お気に入りの「Gotthard」フォントを使いました。
3.｛シンボルオプション｝ウィンドウが出てきて、シンボルの種類を尋ねられます。
今回はグラフィックを選んでOKを押しましょう。文字に関してはこれだけ。
4.貼り付けられる球体を作ります。
「楕円ツール」を選んで、「shift」を押しながら正円を描きます。
5.「ダイレクト選択ツール （白い矢印）」を選んで正円のアンカーポイント一箇所だけ選択し、キーボードのdeleteで削除します。これで半円になるはずです。
10.今回はこんな感じに貼り付けてみました。位置や大きさを決めたらOKを押します。
11.完成。お疲れさまです。
この機能は文字以外にもいろんなものを貼り付けられるので、皆さんもいろいろ試してください(´∀｀)
応用
イラストレーターで作った球体をフォトショップでちょいと加工したもの。
この素材はニコニコモンズに上げています。
ここです。
ご自由にお使いください。
こちらは本物
1.貼り付けたい文字をテキストツールで書きます。
今回は最近お気に入りの「Gotthard」フォントを使いました。
2.書いた文字を「グラフィックスタイル」パネルに持っていきます。
（「グラフィックスタイル」パネルは上の「ウィンドウ｝メニューにあります。）
3.｛シンボルオプション｝ウィンドウが出てきて、シンボルの種類を尋ねられます。
今回はグラフィックを選んでOKを押しましょう。文字に関してはこれだけ。
4.貼り付けられる球体を作ります。
「楕円ツール」を選んで、「shift」を押しながら正円を描きます。
5.「ダイレクト選択ツール （白い矢印）」を選んで正円のアンカーポイント一箇所だけ選択し、キーボードのdeleteで削除します。これで半円になるはずです。
6.半円を「選択ツール（黒い矢印）」で選んでおいて、上のメニューの
「効果」→「3D」→「回転体」と進みます。
「効果」→「3D」→「回転体」と進みます。
7.｛3D回転体オプション｝というウィンドウが開きます。
プレビューにチェックをいれると、先ほどの半円が立体的な球体になっていることがわかります。
このウィンドウで球体の質感や光の当たり具合などを調整できます。今回はこのままで先に進みましょう。マッピングボタンを押します。
8.｛アートをマップ｝ウィンドウが開きました。ここで、球体に貼り付けるシンボルの調整ができます。左上のシンボルというプルダウンメニューを開くと、先ほど登録した文字が選べますので選びましょう。ついでにプレビューにチェックをしておきましょう。
9.はい、球体に文字が張り付きました。
位置が気にいらなければ、調整はいくらでもできます。
10.今回はこんな感じに貼り付けてみました。位置や大きさを決めたらOKを押します。
11.完成。お疲れさまです。
この機能は文字以外にもいろんなものを貼り付けられるので、皆さんもいろいろ試してください(´∀｀)
応用
イラストレーターで作った球体をフォトショップでちょいと加工したもの。
この素材はニコニコモンズに上げています。
ここです。
ご自由にお使いください。
こちらは本物
デザインフォントダウンロードサイト・フォントに関するお役立ちリンク集
デザインをする際にはフォントが非常に重要。
せっかく絵柄がいい感じになっても、そこに使われるフォント次第で台無しになることもよくあります。
デザイナーはいろんなフォントを知っていることがとても大事なのですが、僕の脳みそはそうそう覚えられません。フォントの種類多すぎなんだよー(つд⊂)
なので、いろんなサイトのリンク集は非常にありがたいです。
ここでは、そんなサイト様の紹介。
ABOUT FONT様
フォントの総合サイトリンク集だけでなく、プレビューでフォントの紹介もあります。
たいへんありがたいサイト。
photoshop VIP様
フォントのみならずデザインに関する情報がめちゃくちゃ豊富。
紹介されている英字フォントはお洒落なものばかり。
Google Web Font
Googleが提供しているフォントサイト。英字のみ。
dafont
1001freefonts
こちらも英字フォント。ただ、両サイトとも数が尋常ではないので迷ってしまいます。
Font temple
Maniackers Design Font
関連フォントに関するお役立ち記事
フォントに関する便利ツールを18種を一挙紹介
プロフェッショナルのデザイナーがよく使う21種類のフォント
フォントの見分け方（初級）
ロゴに使われているフォントがわかるサイトいろいろ
WhatTheFont
DTP Transit
MacOS Xのフォント管理方法
記号でも読み方色々
ダウンロードしておきたい100個のフリーフォント保存版まとめ
英語圏の人はいいなー。日本語のフリーフォントすくないんだよ。
高いし(´；ω；｀)
せっかく絵柄がいい感じになっても、そこに使われるフォント次第で台無しになることもよくあります。
デザイナーはいろんなフォントを知っていることがとても大事なのですが、僕の脳みそはそうそう覚えられません。フォントの種類多すぎなんだよー(つд⊂)
なので、いろんなサイトのリンク集は非常にありがたいです。
ここでは、そんなサイト様の紹介。
ABOUT FONT様
フォントの総合サイトリンク集だけでなく、プレビューでフォントの紹介もあります。
たいへんありがたいサイト。
photoshop VIP様
フォントのみならずデザインに関する情報がめちゃくちゃ豊富。
紹介されている英字フォントはお洒落なものばかり。
Google Web Font
Googleが提供しているフォントサイト。英字のみ。
dafont
1001freefonts
こちらも英字フォント。ただ、両サイトとも数が尋常ではないので迷ってしまいます。
Font temple
Maniackers Design Font
関連フォントに関するお役立ち記事
フォントに関する便利ツールを18種を一挙紹介
プロフェッショナルのデザイナーがよく使う21種類のフォント
フォントの見分け方（初級）
ロゴに使われているフォントがわかるサイトいろいろ
WhatTheFont
DTP Transit
MacOS Xのフォント管理方法
記号でも読み方色々
ダウンロードしておきたい100個のフリーフォント保存版まとめ
英語圏の人はいいなー。日本語のフリーフォントすくないんだよ。
高いし(´；ω；｀)
Sunday, March 17, 2013
ブログで文字や画像 を 中央に配置
自分用にメモ。
HTMLで
真ん中に配置するとき <div align="center">文や画像</div>
左に配置するとき <div align="left">文や画像</div>
左に配置するとき <div align="right">文や画像</div>
便利だ(*´∀｀*)
HTMLで
真ん中に配置するとき <div align="center">文や画像</div>
左に配置するとき <div align="left">文や画像</div>
左に配置するとき <div align="right">文や画像</div>
便利だ(*´∀｀*)
Photoshopでライトセイバーを作るチュートリアル動画
いろんなやり方があると思いますが、ニコ動にあったこのチュートリアルが一番わかりやすい動画だと思います。
【ニコニコ動画】【Photoshop】ライトセーバーの作り方 基礎→実践
この記事の経験値ボールはこの方法で描かせてもらいました。
【ニコニコ動画】【Photoshop】ライトセーバーの作り方 基礎→実践
この記事の経験値ボールはこの方法で描かせてもらいました。
初心者用AfterEffects チュートリアル集
AfterEffectsの勉強に使わせていただいているサイトを紹介します。
After Effects STUDY!!
たぶんAEを初めて触るときには一番勉強になるサイト。超初心者向け。お世話になりました。
AE : GATHERINGさん
海外のチュートリアルをまとめているブログ。情報量ぱねえ(;ﾟДﾟ)!
Learn After Effects CS5 & CS5.5
基本ですね。僕はcs5.5を使っているのですがほかのバージョンでも十分役に立ちます。
videocopilot
ここも定番。英語のチュートリアルですが動画のチュートリアルなので十分わかります。
ayatoweb
たぶん、中級者以上向け。たぶんというのは僕はまだ、こちらのサイトにあるチュートリアルはいくつかしか理解できていません。もう少し勉強をしてからチャレンジすると思います。
イラストレーターでハートマークを作る最も簡単な方法
イラストレーターを使う仕事をされている方なら、必ずと言っていいほど作る機会がある「ハートマーク」。
いろいろな作り方がネットで紹介されていますが、ここでは僕がよく使う方法を紹介。
① テキストツールで「ハート」と打ち込む。
② 「♥」に変換する。
③ アウトラインを取る。
④ 変形ツールなどで気に入った形に加工。
⑤ 素敵なハートですね。
以上
高野 雅弘
ソフトバンククリエイティブ
売り上げランキング: 57,677
ソフトバンククリエイティブ
売り上げランキング: 57,677
AfterEffects 練習（街から地球までズームアウト）
AfterEffects チュートリアル
http://www.videocopilot.net/tutorial/earth_zoom/
今なら、パワーズ・オブ・テンも簡単に作れちゃうんだね。( ´∀｀)
http://www.videocopilot.net/tutorial/earth_zoom/
今なら、パワーズ・オブ・テンも簡単に作れちゃうんだね。( ´∀｀)
フィリス・モリソン フィリップ・モリソン チャールズおよびレイ・イームズ事務所
日本経済新聞出版社
売り上げランキング: 58,459
日本経済新聞出版社
売り上げランキング: 58,459
Saturday, March 16, 2013
イラストレーターcs5で整列が上手くいかない件
illustratorcs5を使っていて起きた問題。
線幅をつけたオブジェクトを整列ツールを使って整列をしたら何故かずれてしまう。
最初はクリックしわすれたのかと思っていたのですが、調べてみるとどうもちがうらしい……。
原因は「ピクセルグリッドに整合」というやつ。
新規ドキュメント作成画面を見てみると、ほんとだへんなチェック項目がある。
また、対象のオブジェクトを選択して、変形ツールの下にもチェック項目がありますね。
結局、このチェックをはずすと、いままで通りの整列ができました。
この「ピクセルグリッドに整合」ってやつは、どうもweb用画像を作るときに便利らしいのですが、僕にとては正直邪魔者でしかありませんです(;´Д｀)
皆さんも気をつけてくださいね。
After Effects英語版と日本語版のエフェクトリスト対応表
英語版のチュートリアルを見ていると、日本語版とエフェクト名が違う時があって戸惑うときがあります、そこでこちらを見ながら作業をするわけですが、これが結構大変。
なので、自分が見やすいようにこのブログで確認できるように転載。
【Audio オーディオ】
●Backwards リバース
●Bass & Treble バス＆トレブル
●Delay ディレイ
●Flange & Chorus フランジ＆コーラス
●High-Low Pass ハイパス／ローパス
●Modulator モジュレータ
●Parametric EQ パラメトリック EQ
●Reverb リバーブ
●Stereo Mixer ステレオミキサー
●Tone トーン
【Blur & Sharpen ブラー＆シャープ】
●Bilateral Blur ブラー（バイラテラル）
●Box Blur ブラー（ボックス）
●Channel Blur ブラー（チャンネル）
●Compound Blur ブラー（合成）
●Directional Blur ブラー（方向）
●Fast Blur ブラー（滑らか）
●Gaussian Blur ブラー（ガウス）
●Lens Blur ブラー（レンズ）
●Redial Blur ブラー（放射状）
●Reduce Interlace Flicker インターレースのちらつき削減
●Sharpen シャープ
●Smart Blur ブラー（詳細）
●Unsharp Mask アンシャープマスク
【Channel チャンネル】
●Alpha Levels アルファレベル
●Arithmetic アリスマチック
●Blend ブレンド
●Calculations 計算
●Channel Combiner チャンネルコンバイナー
●Compound Arithmetic 合成アリスマチック
●Invert 反転
●Minimax 最大／最小
●Remove Color Matting カラーマット削除
●Set Channels チャンネル設定
●Set Matte マット設定
●Shift Channels チャンネルシフト
●Solid Composite 単色合成
【Color Correction 色調補正】
●Auto Color and Auto Contrast 自動カラー補正と自動コントラスト
●Auto Levels 自動レベル補正
●Brightness & Contrast 輝度＆コントラスト
●Broadcast Colors ブロードキャストカラー
●Change Color 色を変更
●Change To Color 他のカラーへ変更
●Channel Mixer チャンネルミキサー
●Color Balance カラーバランス
●Color Balance (HLS) カラーバランス（HLS）
●Color Link カラーリンク
●Color Stabilizer カラースタビライザ
●Colorama コロラマ
●Curves トーンカーブ
●Equalize 平均化（イコライズ）
●Exposure 露出
●Gamma/Pedestal/Gain ガンマ／ペデスタル／ゲイン
●Hue/Saturation 色相／彩度
●Leave Color 色抜き
●Levels レベル
●Levels (Individual Controls) レベル（個々の制御）
●Photo Filter レンズフィルタ
●PS Arbitrary Map PS 不定マップ
●Shadow/Highlight シャドウ・ハイライト
●Tint 色合い
●Tritone トライトーン
【Distort ディストーション】
●Bezier Warp ベジェワープ
●Bulge バルジ
●Corner Pin コーナーピン
●Displacement Map ディスプレイスメントマップ
●Liquify ゆがみ
●Magnify ズーム
●Mesh Warp メッシュワープ
●Mirror ミラー
●Offset オフセット
●Optics Compensation レンズ補正
●Polar Coordinates 極座標
●Puppet パペット
●Reshape リシェープ
●Ripple 波紋
●Smear にじみ
●Spherize 球面
●Transform トランスフォーム
●Turbulent Displace タービュレントディスプレイス
●Twirl 回転
●Warp ワープ
●Wave Warp 波形ワープ
【Generate 描画】
●4-Color Gradient 4 色グラデーション
●Advanced Lightning 稲妻（高度）
●Audio Spectrum オーディオスペクトラム
●Audio Waveform オーディオウェーブフォーム
●Beam レーザー
●Cell Pattern セルパターン
●Checkerboard チェッカーボード
●Circle 円
●Ellipse 楕円
●Eyedropper Fill スポイト塗り
●Fill 塗り
●Fractal フラクタル
●Grid グリッド
●Lens Flare レンズフレア
●Paint Bucket 塗りつぶし
●Radio Waves 電波
●Ramp カラーカーブ
●Scribble 落書き
●Stroke 線
●Vegas ベガス
●Write-on ブラシアニメーション
【Keying キーイング】
●Color Difference Key カラー差キー
●Color Key カラーキー
●Color Range 色範囲
●Difference Matte 異なるマット
●Extract 抽出
●Inner/Outer Key インナー／アウターキー
●Linear Color Key リニアカラーキー
●Luma Key ルミナンスキー
●Spill Suppressor スピルサプレッション
【Matte マット】
●Matte Choker マットチョーク
●Simple Choker チョーク
【Noise & Grain ノイズ＆グレイン】
●Add Grain グレイン（追加）
●Dust & Scratches ダスト＆スクラッチ
●Fractal Noise フラクタルノイズ
●Match Grain グレイン（マッチ）
●Median ミディアン
●Noise ノイズ
●Noise Alpha ノイズアルファ
●Noise HLS and Noise HLS Auto ノイズ HLS およびノイズ HLS オート
●Remove Grain グレイン（除去）
●Turbulent Noise タービュレントノイズ
【Paint ペイント】
●Paint ペイント
●Vector Paint ベクトルペイント
【Perspective 遠近】
●3D Glasses 3D メガネ
●Bevel Alpha ベベルアルファ
●Bevel Edges ベベルエッジ
●Drop Shadow ドロップシャドウ
●Radial Shadow 放射状シャドウ
【Simulation シュミレーション】
●Card Dance カードダンス
●Caustics コースティック
●Foam 泡
●Particle Playground パーティクルプレイグラウンド
●Shatter シャター
●Wave World ウェーブワールド
【Stylize スタイライズ】
●Brush Strokes ブラシストローク
●Cartoon カートゥーン
●Color Emboss カラーエンボス
●Emboss エンボス
●Find Edges 輪郭検出
●Glow グロー
●Mosaic モザイク
●Motion Tile モーションタイル
●Posterize ポスタリゼーション
●Roughen Edges ラフエッジ
●Scatter 拡散
●Strobe Light ストロボ
●Texturize テクスチャ
●Threshold しきい値
【Text テキスト】
●Numbers番号
●Timecodeタイムコード
【Time 時間】
●Echo エコー
●Posterize Time ポスタリゼーション時間
●Time Difference 時間差
●Time Displacement 時間置き換え
●Timewarp タイムワープ
【Transition トランジション】
●Block Dissolve ブロックディゾルブ
●Card Wipe カードワイプ
●Gradient Wipe グラデーションワイプ
●Iris Wipe アイリスワイプ
●Linear Wipe リニアワイプ
●Radial Wipe 放射状ワイプ
●Venetian Blinds ブラインド
【Utility ユーティリティ】
●Cineon Converter Cineon コンバータ
●Color Profile Converter カラープロファイルコンバータ
●Grow Bounds 範囲拡張
●HDR Compander HDR コンパンダ
●HDR Highlight Compression HDR ハイライト圧縮
【Obsolete 旧バージョン】
●Basic 3D 基本 3D
●Basic Text 基本テキスト
●Lightning 稲妻
●Path Text パステキスト
●HDR Highlight Compression HDR ハイライト圧縮
関連動画：クリーパーを使ってエフェクト紹介
フリーBGM
動画を作っていて結構悩むのが使用するBGMだったりします。
ニコ動とかを見ているとフツーに市販させれてる音楽を使っているんだけど、これが合法なのか違法なのかわからないので結局フリーのBGMからいい感じのを探すわけです。
フリーのBGMですから、いろんなクオリティのものがピンからキリまであるわけで。
こちらに紹介をするサイト様の音楽を一番よく使うので紹介。
フリーBGM・音楽素材 MusMus
http://musmus.main.jp/
ニコ動とかを見ているとフツーに市販させれてる音楽を使っているんだけど、これが合法なのか違法なのかわからないので結局フリーのBGMからいい感じのを探すわけです。
フリーのBGMですから、いろんなクオリティのものがピンからキリまであるわけで。
こちらに紹介をするサイト様の音楽を一番よく使うので紹介。
フリーBGM・音楽素材 MusMus
http://musmus.main.jp/
役に立つ素材集
仕事がら、日々それなりに素材集のチェックはしてます。
気に入ったものが見つからない場合などはコツコツ自分で作ったりもするのですが、ラフを描いて、パスデータにするというのは結構時間がかかるので納期が厳しい仕事だとかなり雑になりがちで、結局あまり納得のいく仕事ができなく最終的にフラストレーションだ溜まってしまうハメになるのです。
それで時間の短縮のために素材集の出番なのですが、「なんだよ、このクソ素材集！！」と買ったあとに思わず叫んでしまいたいものがたまにあります。
僕は（ていうかデザイン関係の人は結構な数でいるとおもいますが）素材集の素材をそのままデザインに組み込むことは滅多にありません。
やっぱり自分のデザインようにアレンジをしたいので・・・
なのに、データの改変はダメとか画像データしか入ってないとか。
そりゃ、データ形式をちゃんと確認をしない自分が一番問題なのですが、素材集を作った人は自分が作った素材がどんなデザインにも合うと思っているのでしょうか？
最近受けた仕事をしている時に上のようなことを思いながらMACに向かってたとさ。
その仕事は和物のデザインの仕事でその時、鬼のように役に立った素材集を紹介したいと思います。
成願 義夫さんの作られた「和柄パーツ＆パターン素材 (CD-ROM付)」です。
中身すべてがパスで出来てて本当に色々応用がきく素晴らしい素材集だと思いました。おかげで仕事の効率メチャメチャUPしたのです。
Subscribe to:
Posts (Atom)