2013/12/27

Illustratorの3D効果を利用して飛び出した光沢のある文字を作る

Illustratorの3D効果は普段使いますか?あまり使わない方もいると思います。
というか僕自身あまり使った事がなく、こんな事も出来るんだというのを知ったため
まだまだ甘い部分はあると思いますが解説したいと思います。
まず適当に文字を打ちます。今回は「TYPOGRAPHY」としました。

STEP1 3D効果を適用する
さきほどうった文字に「効果」>「3D」>「押し出し・ベベル」を
適用します。
初期設定はだいたいこのようになっているとおもいます。
↑右上の丸三つが3Dの角度を設定します。
左の図形をドラッグしながら調節することもできますし、数値で変更も可能です。
その下の遠近感は数値をあげるほど3Dの後方部分が遠近感があるように見えます。

最初の状態がこれです。
プレビューにチェックを入れて実際の効果を確認しながら作業するといいでしょう。
最初は立体感があまりなく、地味な感じになってますね。

STEP2 光の位置を調節する
STEP1の状態を見てわかるようにSTEP2では点の数が増えていますね。
これは赤枠の中の真ん中の紙がめくれたようなボタンを押すと
点の追加が出来ます。これは光の位置になりますので
今は左上と右下から光が当たっている状態です。
影の部分に光を追加してあげると陰影をつけることができます。
一番左の矢印と丸のボタンは選択した光を背面にまわすボタンです。

これが今の状態です。ちょっと光沢がでてきましたね。

STEP3 陰影を出す
次は光の量を調節します。まず環境光をめいっぱい下げます。
そうすることで、光の明るいところと暗いところのコントラストが
はっきりします。そしてハイライトの強さを強くすることで
光の部分が強く輝きます。
ブレンドの階調では光の暗い部分から明るい部分になっていく
グラデーションが数を大きくすれば細かく色を変化させていくため
より滑らかな変化になります。
この数値は自分の作業中のものと見比べながら
お好きな数値に調整されてください。

これで光沢感がでるようになりました。
これで完成でもいいのですが、ついでなので
ベベル効果も解説するため今回はこれにベベル効果も加えてみたいと思います。
ちなみにベベル効果とは浮き出したような効果のことです。

STEP4 ベベル効果を適用する
3D効果設定オプションの押し出し・ベベルをご覧下さい。
押し出しの奥行きとはそのまま奥行きのサイズなので説明しません。
フタは今現在はフタをしている状態ですが、これを右側をクリックすると
オブジェクトが空洞になります。
そしてベベルでベベルの効果を標準に選択します。
一般的なベベルです。ベベルは色々種類があるため、時間があるときに
試されてみてください。
高さは今回は1ptにしています。(あまり太くすると文字がつぶれるため。)
次にその右のマークのような物をご覧下さい。
これはベベルを内側に設定するか外側に設定するかのマークです。
今は外側にしています。文字を3Dにする場合は外側のほうがいいと思います。
内側にすると肝心の文字の部分が細くなり、文字が崩れる場合があります。

これで完成です。

最後に
今回はIllustratorの3D効果を使って3Dの文字を作ってみました。
もちろんこの効果は普通のオブジェクトにも適用できます。
いろんなところで応用できると思います。
効果を適用した後でも、文字を打ちかえれますし、色も変えれます。
本当に便利になりました。
今回は以上になります。最後までお読みいただきありがとうございました。
あなたのお役に立てれば幸いです。

2013/12/25

Webデザインの背景に使えるシンプルなバックグラウンド素材 Subtle patterns


Webデザインをするにあたり、背景をどういうふうにするか迷いますよね?
ただ真っ白だけじゃ面白くないし、かといってあまり色を使うのもまとめずらくなりますし
派手にするのも難しいし、というときがあります。
そこで今日ご紹介するサイトはとてもシンプルかつホームページのアクセントになる
バックグラウンド素材サイトです。
邪魔にならない程度の優しいミニマルデザインを演出することができます。

http://subtlepatterns.com/

さらにこのサイトではプレビューを見る事も出来ます。
プレビューを押すとバックグラウンドが変わります。
ダウンロードナビゲーションもわかりやすいです。
ここで中に入っている素材をいくつかピックアップしてみました。




































ダウンロードしますとpng形式でファイルが格納されています。
webではそのまま使用し、repeatさせれば大丈夫です。
photoshopでパターンを定義して背景に使う事もできますね。


ライセンスについてはCreative Commons Attribution-ShareAlike 3.0 Unported Licenseと表記されていました。
クリエイティブコモンズについてはhttp://creativecommons.jp/licenses/ (日本語サイト)
今回も最後までお読みいただきありがとうございます。
あなたのお役に立てれば幸いです。

2013/12/24

背景に使える!一発加工!photoshop グランジブラシセット厳選7選

今回はphotoshopのブラシツールに読み込んで使うブラシセットを紹介します。
photoshopで背景を作ったり、デザインしたりする時には大変重宝する機能です。
一発ぽんっと押すだけで雰囲気ががらっとかわったり、デザインに深みがでます。
その中でも今回は個人的に大好きな「グランジ」に焦点をあてさせていただきます。
ブラシには全く関係ないですがグランジと言えばNIRVANAのカートコバーン!
ということで今回のトップ画像は僕の大好きなカートコバーンを使わせていただきました。


 さて本題! 
174_grunge_splatter
グランジスプラッターブラシ、水が跳ねたようなデザインが印象のブラシです。

 こちらはちょっとブレたようなグランジが特徴のグランジスプラッターブラシ。
ポイントで使うのもいいですね。

145_grunge_splatter

 これは一発押せば全てこのブラシでまかなえそうですね。一枚物に使えそうです。
角ごとに使えるものもあるので役立ちます。角の処理ってけっこう悩むので
これがあれば悩む事なくぽんっと押すだけでいいですね。

Light Grunge Textures: 14 Free Hi-Res Photoshop Brushes

個人・商用ともに利用可能
http://www.fudgegraphics.com/2009/07/light-grunge-textures-14-free-hi-res-photoshop-brushes/
こちらは色々入ってます。メタルのような質感やざらざらとした壁のような質感、
布のような質感のグランジブラシがセットになっています。

All Hands Brush Set

https://creativemarket.com/jackfahnestock/13282-All-Hands-Brush-Set
とても使い勝手のよさそうなグランジブラシです。
こちらは無料ではなく$3で購入することができます。

RetroSupply 

https://creativemarket.com/dustinlee/13193-RetroSupply-Retro-Photoshop-Kit/
こんなデザイン大好物です。もちろんこれはこんなグランジテイストが出来ますよ。
というサンプルデザインですが、他にもこんな感じでいくつかサンプルをのせてくれています。イメージがわきやすいですね。$15で購入することができます。
  
Subtle Grunge Brushes
個人・商用ともに利用可能。
http://wefunction.com/shop/subtle-grunge-brushes/
全体の紙面をデザインするのに重宝しそうです。
あまりハード過ぎず、ほどよい感じで背景を演出したいとき等に使えそうです。
このサイトにアドレスと名前を登録するとダウンロード可能です。

Photoshopブラシを読み込む
では実際にここでブラシを読み込む方法を紹介しておきます。

ブラシツールを選択します。
















上部の赤枠のところ
ブラシの種類をクリックすると
現在登録されているブラシの一覧が表示されます。













 一覧が表示されたら右上にある
歯車のようなマーク(CS6の場合、他のバージョンの場合歯車ではない場合もあります。)
をクリックします。
そしてあとは「ブラシファイルの読み込み」し、ダウンロードしたファイルを指定してあげれば完了です。








Subtle Grunge Brushes174_grunge_splatterのブラシを使い
簡単にサンプルを使ってみました。

 まとめ
今回はphotoshop用グランジブラシ素材を紹介しました。
初めての紹介でしたので僕が好きなグランジというジャンルを紹介しましたが
今後いろいろと紹介していけたらと思っています。
ライセンスの表記が見当たらないサイトやよくわからなかった物は表記していません。
 個人の責任で確認し、使用するようにしてください。
今回も最後までおよみいただきありがとうございます。
あなたのお役に立てれば幸いです。

2013/12/22

超ハイクオリティなコラージュが自分でも作れちゃう!photoshopチュートリアルを紹介!(英語)


今回は海外のphotoshopコラージュチュートリアルをいくつか紹介します。
海外ではこのように現実とかけ離れたような幻想世界やリアルにコラージュした作品が
いくつもあります。全て英語で解説されていますが、画像付でわかりやすく説明してあるので自分でも作ってみてはどうでしょう。

Photoshop tutorial: Advanced compositing techniques


http://www.digitalartsonline.co.uk/tutorials/photoshop/advanced-compositing-techniques/

様々な素材を組み合わせて明るくポップに仕上げてあります。
 配置バランス、細かな液体のような表現効果が勉強になります。

Photoshop tutorial: Create beautiful lighting effects 


http://www.digitalartsonline.co.uk/tutorials/photoshop/create-beautiful-lighting-effects/
アーティスティックでレトロな色合いのデザインですね。
細かな光の入れ方が解説されています。

Water Splashing Effect for a Lady Image


http://www.photoshoplady.com/tutorial/water-splashing-effect-for-a-lady-image/8188
グランジでダークなモノクロデザインです。
ペンキを吹き付けたようなブラシを細かく違和感なく配置していく方法がわかります。


Create a Fantasy Castle in Photoshop Inspired by The Movie Alice in Wonderland 

アリスインワンダーランドにインスパイアされて作ったチュートリアルみたいです。 ファンタジーの雰囲気がばっちりですね。
リアルな影の付け方、写真の加工、ブラシで芝生を描く方法などわかりやすく解説されています。

Manipulating a Lady Standing in a Water Scene

もはや英語でもない文字で、しかも一枚の画像になってるので 翻訳もしずらいというざっくりとしたチュートリアルですが
画像を見るだけでもやり方がわかると思いますよ。
水中の中を作る方法がわかります。

http://www.photoshoplady.com/tutorial/manipulating-a-lady-standing-in-a-water-scene/7944 

 

How to Create an Anti-Smoking Ad Concept with Photoshop



http://www.photoshoplady.com/tutorial/create-an-anti-smoke-advertisement-poster/7823

正直この作品を見た時は衝撃的でした。
「タバコは身を滅ぼしますよ。」というポスターのようですが
誰もが見て一発でわかる強烈なメッセージを放っています。
僕も禁煙した口なのでいえるのですが、このポスターいろんなところでデカデカと
うちだしてもいいんじゃないかと思います。 体にタバコの灰をなじませていく方法が解説されています。

 

Create a Surreal “Parting of the Sea” Photo Manipulation

http://www.photoshoplady.com/tutorial/manipulating-a-parting-scene-for-the-sea/7411


圧巻のチュートリアルです。この作品の全貌を見せてもいいのかと思います。
しかし、簡単に真似出来ないのも事実かも!サメやイルカ達の陰影のつけ方
水中の水のゆらめきをちゃんと水中にいる生物にも適用させて
細かくリアルに表現されています。解説や設定の数値も細かく公開してくれていますが、ここまでリアルに、そして同じように表現するのは
かなりの難易度だとおもいます。しかも英語を解読していかなければならないので。
ですが、こういうやり方があるというのはかなり勉強になります。チュートリアルを見ながら同じ用に自分流でやっていくのもいいかもしれません。
photoshopの上達にもなります。


今回のまとめ
今回は海外のチュートリアルの紹介に挑戦してみました。
正直自分も何度か海外のチュートリアルにチャレンジしていますが、なかなか思った通りの結果が得られないというのが多々ありました。
翻訳してもどのツールを使っているのかわからなかったりするので。なので僕も紹介して解説しておきながらまだまだです。
でも色々とやってみて自分の幅は広がった気がします。皆さんも是非試してみてはいかがでしょうか?
本日も最後までお読みいただきありがとうございました。

2013/12/21

Adobe Flashで結婚式用のプロフィールムービーを作ってみた

今回はいつものデザインとはちょっと違うのですがデザインはデザインということで
Adobe Flashを使ってムービーを作成したことについて書きたいとおもいます。
最近知人の結婚式用プロフィールムービーの作成を依頼されまして
まず結婚式用プロフィールムービーを作るのも初めてでしたし、
Flashも専門学校の時に触って以来ほとんど触っていませんでした。
ではなぜFlashにしたのかというと、元々FlashはAdobeのデザインパックを
買った時に入っていましたし、そこら辺に売ってある素人でも作れるようなソフト使っても面白くないとおもったからです。
ですが、やっぱり初めてやることは壁に打ち当たってばっかりだったのでここに記録し
同じような壁に打ち当たった方が、ここにたどり着き参考になる事を願って書き記します。

作業環境
 imac OSX 10.6.8
Adobe Flash CS5.5


STEP1 画面サイズの確認
 まずはじめに式場の画面サイズと環境を確認することが重要です。
今回僕は初めてな上に製作期間も大変少なかったため、確認をおこたり、何回か作り直すはめになりました。
画面サイズにはアスペクト比というのがあり、16:9か4:3という比率というものがあるそうです。一般的なのは16:9だそうなので最初16:9で作っていたのですが、今回のところは4:3で作ってほしいとの事でした。後からわかったのですが、後に出てくる動画変換ソフトでもこの比率は編集出来たみたいです。ただ、最初に比率を合わせておかないと写真が切れたりするかもしれないという恐怖があったため、最初に合わせておきました。
たぶん最初に合わせておいた方が無難です。

STEP2 実際にFlashで製作
Flashで使った機能はそんなに難しいものではありません。
というか期間もなかったため、あまり難しい機能は使わず簡単な機能だけで
しようとおもい作りました。
モーショントゥイーンで写真をフェードイン、フェードアウトさせたり
スライドインさせたりといった作業だけです。
音楽の挿入の仕方も簡単でした。ファイルのライブラリに読み込むから
ライブラリに読み込み、画像と同じようにBGM用のレイヤーを作って
ライブラリからドラッグするだけです。
今回はFlashについての詳しい説明は自分もそこまで詳しくないのと
あまりにも長くなるため割愛させていただきます。
あとは音楽にあわせてメッセージを入れながら微調整をしていきました。
難しかったのは写真を切り替えるタイミングと文字を入れるタイミング。
最終的に尺がたりなかったり、余りすぎたりすると、このタイミングが余計難しくなりました。 

補足:今回のフレームレートは20fpsで作りました。
最初は24fpsでつくっていたのですがムービーに書き出した時に画像の残像が残る現象があり、調べたところ24fps以外のfpsにすれば解決できるとのことでした。

STEP3 ムービー形式に書き出し
ムービーができあがったら、まず動画変換できるよう
ファイルの書き出し>ムービーで書き出しを選択し
Quick timeの「.mov」形式で書き出します。

そしてここから実際にDVD用に変換するわけですが
その変換用のソフトもだいぶ悩みました。
最終的にAVI形式に変換して入稿すればいいと聞いていたので
当初Adobe media encoderでAVI形式に変換できると思っていたのですが
どこを探してもAVIに変換する形式が見つかりませんでした。
調べてみるとインストールされているソフトによって書き出しの設定が
異なるみたいです。なんだそりゃ!?です。
泣く泣くあきらめ、おとなしく別のソフトを購入することにしました。
そこで色々調べたり、知恵袋で聞いたりしながら選んだのが下のソフトです。
様々な動画形式を変換できますし、iphoneやタブレットなどいろんな端末に
適した動画に変換してくれます。


なぜこのソフトにしたかというと
他にも色々お試しインストールしてためしたのですが、
動画を変換する機能とDVDを焼く機能が同時にできることが
決め手でした。他社のものは結構動画変換とDVD作成が別々になっていることが
多いようでこちらのソフトは値段もお安くなっていたのでこれにしました。

STEP4 動画を変換
STEP3で書き出した.movファイルを他の環境でもみれるように
AVI形式に変換します。
使い方はとても簡単で、上に「変換」と「作成」と「ダウンロード」とあるので
「変換」に合わせ、変換したいファイルをドロップして入れます。
そしたら下のような画面になります。
 右上の1で動画の編集ができます。
1の編集画面 ここでアスペクト比の編集や、明るさ、トリミング等ができます。
 ↓↓↓↓↓
そして「2」の項目をビデオに合わせ「3」のAVIに合わせて
右下の変換ボタンをクリック!!で完了です。

STEP5 DVDに焼く
最後はさきほどのソフトで「作成」タブに合わせ

お好みの設定にして作成を押すだけで終了です!!
簡単でしたよね?
変換も作成もとても高速でこのソフトおすすめです!
購入する前に無料ダウンロード版を使ってみるといいと思います。


おわり 
 以上で今回の「Flashで結婚式用プロフィールムービーを作ってみた」は終了です。
実際のところFlashの操作というのが肝心なところではありますが
それを書き出したらきりがないため、今回はムービーをDVDに焼くまでの
流れを解説しました。僕の文章でご理解いただけたでしょうか?
まだまだ抜けている点、無知な点もあるとおもいますが
色々ご指摘、情報を頂けると嬉しいです。
最後までお読みいただきましてありがとうございました。

2013/12/20

デザインのインスピレーションに役立つハイクオリティなサイト

デザインのインスピレーションに役立つハイクオリティなサイト


今回は最近僕がとても気に入っているサイトを紹介致します。
デザイナーのみなさんはいいアイディアが浮かばないときどうしていますか?
やっぱり過去の作品をみたり、サイトをみたりしてインスピレーションを高めますよね。
その中でも今回紹介するサイトはかなりレベルも高くジャンルも豊富だと思います。
behance

http://www.behance.net/

グラフィックデザイン、アート、キャラクターデザイン、イラストレーション
タイポグラフィー、カリグラフィーなどの品質の高いデザインがのっています。
どちらかというとアート色が強いのですがアート系が好きな方にはたまらないとおもいます。僕もずっと眺めています。眺めているだけでも自分の中からなにかが湧いてくる感じがするような気がします(笑)

※サイトの中身
作品の中に入るとデザイナーの名前や国などがのっています。

ここでこのサイトの中で僕が普段自分のアルバムに保存しているものを
いくつか紹介したいとおもいます。
ただ、全部カリグラフィーやタイポグラフィーデザインですが
気にしないでください。個人的趣味です。


こんな感じで実際に書いている画像も多いです。
中にはムービーもついてたりします。


 いかがでしたでしょうか?今回は以上になります。
今回は色々と中の作品を魅せたかったのでこのサイトに搾り紹介しましたが
他にもインスピレーションに役立つサイトはありますので
違うジャンルに特化したサイトも今後紹介していけたらと思います。
最後までお読みいただきありがとうございました。