MixWeber@blog

今すぐ使いたい！無料Webフォント・クラウドフォントサービスのまとめ

2011-10-03T03:54:17Z

HTML5とCSS3の普及が始まり、今ではよく見掛ける様になって参りました。

その一方でWebフォント・クラウドフォントサービスも徐々に広がりをみせています。

今回は無料で使う事の出来るWebフォント・クラウドフォントサービスをまとめてみました。

では、以下が一覧になります。

]]>

Google web fonts

■Google web fonts

Googleが提供するWebフォントです。

種類が豊富ですが、日本語は無いようです。

Google Web Fonts APIの使い方は以下に詳しく書いてあります。

http://code.google.com/intl/ja/apis/webfonts/docs/getting_started.html

Font comparer

■Font comparer

Webフォントの比較が簡単に出来るサイトになります。

Google Web FontsとTypeKitのAPIを使用して作成されています。

任意のテキストを入力し確認後、Get fontを押すとタグが発行されるので埋め込むだけで利用できます。

フォントプラス

■フォントプラス

無料で登録することが出来るサービスなります。

ですが、トライアルの有効期限は1ヶ月のようです。

有料ですと有名フォントをWebフォントとして利用することが出来るようです。

筑紫やモトヤ、白舟書体、ユトリロ、マティス、ロダン、スーラ辺りでしょうか。

※「イワタ」近日対応予定

デコもじ

■デコもじ

こちらもトライアルと有料版が用意されています。

TwitterIDなどでログイン出来るので簡単に利用可能です。

トライアル版は種類が少ない様に感じられます。

逆に有料にすると飛躍的に使えるフォントが増えるので非常に良いと思います。

fonts.com

■fonts.com

海外のWebフォント・クラウドフォントサービスになります。

海外ですが、日本語もすこしあるようです。

Upgradeをしないと使用できない物が多く含まれます。

無料版では3000+で有料版は13000+が利用可能になります。

株式会社モリサワ

■株式会社モリサワ

実はまだリリースされていませんが、取り上げておきたいので載せておきます。

モリサワはクラウドフォントサービス「TypeSquare（仮称）」を発表しました。

2011年度内には提供される予定になっています。

http://www.morisawa.co.jp/corp/news/20110810_03.html

フォントグラフィック｜fontgraphic.jp

■フォントグラフィック｜fontgraphic.jp

スタンダードの物から少し変わったフォントが使用できます。

ですが、今回の主旨からはズレていてクラウドフォントではありません。

CSSに@font-faceを使用する事で表示することが出来ます。

フォントの内容が非常に面白かったので取り上げさせて貰いました。

如何だったでしょうか。

Webフォント・クラウドフォントサービスも今後出てくるかもしれません。

ですが、課題は表示速度と処理の問題もあったりします。

特に日本語フォントは欧文フォントに比べ数MBにもなってしまいます。

表示速度が1秒遅くなるだけでユーザーのサイト離脱は飛躍的に上がります。

今後このような点を解消しつつどのように普及されて行くのかに期待が高鳴ります。

それではまたの機会に。

※フォントプラスはウェブサイトのページ内の文章を自動で解析し表示しているそうです。

なので、不要なフォントを読み込む事が無く表示速度を速くする事が出来ます。

http://webfont.fontplus.jp/service/index

Photoshopで写真を綺麗に切り抜く方法のまとめ

2011-09-12T04:52:13Z

PhotoshopもCS5.5となりツールも多くなってきました。

ですが、写真を切り抜く方法はそこまで増えていません。

なので、一度まとめることで、都度どのような切り抜き方が最適なのか判断出来る様になりましょう。

では、以下が方法になります。

]]>

消しゴムツールとマジック消しゴムツールを使う。

左が消しゴムツールを使って背景を除去した場合になります。

右はマジック消しゴムツールを使った場合になります。

消しゴムツールは、言葉通りレイヤーから特定の箇所を除去するツールになります。

マジック消しゴムツールは色相の近い箇所を1クリックで消すことが出来ます。

色味の近い画像から背景をクリップしたい場合に活躍すると思います。

また、ツールオプションを細かく設定する事で理想を実現する事が可能です。

ですが、画像を見て貰えば分かる通り細かい部分の除去には向かないようです。

パスツールを使う。

パスで選択範囲を作成してクリップする手法になります。

地道な作業になりますが、自分の理想に近い形でクリップ出来ます。

ですが、これも細かい髪の毛や羽などを切り抜いていくのは至難です。

オブジェなどの写真では活躍できそうです。

アルファチャンネルを使う。

アルファチャンネルを使った手法になります。

非常に高度なクリップが作成できます。

人物や動物などをクリップする際に活躍する手法です。

こちらの方で手順を作成しようと思ったのですが、

既に非常に分かりやすい説明があったので紹介しておきます。

Photoshopのチャンネル演算を使った髪の毛細部の切り抜き | ふぉとまに！

http://www.photo-mani.com/archives/253

クイック選択ツールと境界線を調整

クイック選択ツールというのがPhotoshop CS3から搭載されました。

任意の箇所（クリップしたい箇所）の選択範囲を作っていく感じになります。

これだけではとても粗い選択範囲になってしまいますが、

Photoshop CS5で登場した境界線を調整を使用していきます。

図が境界線を調整のオプション画面になります。

エッジの検出とエッジの調整を細かく調整でき、

半径調整ツール（左端のブラシアイコン）を使用し非常に細かいクリップが可能です。

アルファチャンネルと同等かそれ以上の効力とスピードを発揮すると自分は思います。

如何だったでしょうか。

色々なクリップ手法があるとお思います。

業務の中でどの手法が一番早く終わるのか、取捨選択しながら使ってみて下さい。

ではでは、またの機会にm(__)m

このクリエーターからデザインとセンスを学べ！お手本にしたい日本人グラフィッカー&デザイナー10選

2011-09-09T00:45:33Z

今回は自分の為のまとめをエントリーします。

ここ最近、Twitterで色々な方を知り、凄い方が多いという事を再認識しました。

この記事を共有する事で皆様の刺激になれば幸いです。

尚、主観での選抜となりますのでご容赦の程を・・・。

では、以下が10選となります。

]]>

Azusa Mano

Webサイト：Prismgirl

Prismgirlの眞野東紗さん。

感性豊かに描かれるグラフィックは非常に完成度が高く、魅了される。

綺麗で美しい描写の物もあれば、メッセージ性の強い作品もある。

是非、彼女の作品から色々な技術や考えを受け取って欲しい。

Ryota Kikuchi

Webサイト：NODACT

NODACTのRyota Kikuchiさん。

WEB制作をメインに据えながらも、グラフィック技術の高さに感銘を受ける。

モノトーンで構成される彼独特のグラフィックから高いセンスと技術を盗んで欲しい。

Koji Nishida

Webサイト：RAKU-GAKI

RAKU-GAKIのKoji Nishidaさん。

既に説明を割愛したい程に有名。

Web制作からグラフィック制作までこなすマルチクリエーター。

繊細かつ大胆な表現は見る者を掴んで離さない魅力が詰まっている。

自分もずっとこの人を追ってやってきている。

Tomoyuki Arima

Webサイト：TATSDESIGN

TATSDESIGNのTomoyuki Arimaさん。

多くのプロダクトデザインを手がけるクリエーター。

Webサイトを見ていただければ分かるが、非常に才能のある方です。

だが、それとは別に彼のデザインに対する姿勢と考え方を是非とも見習って欲しい。

参考にザ・インタビューへのリンクを貼っておく。

http://theinterviews.jp/tatsdesign

Masanori Sakamoto

Webサイト：MotLa

MotLaのMasanori Sakamotoさん。

交響詩篇エウレカセブンのArt Direction, Design, Flash Developmentを務めた方。

個人的にすごく好きなのでオススメしたい気持ちで、取り上げさせて頂きました。

Ryo Asakura

Webサイト：Seventhgraphics

SeventhgraphicsのRyo Asakuraさん。

直接的なコンタクトは取った事はないのですが、あずにゃんﾍﾟﾛﾍﾟﾛの人だと思います。

3DCGを主にVJやデザインも手掛けているとても多才な方だと思います。

mashana

Webサイト：ReactvationGraphics

ReactvationGraphicsのmashanaさん。

一度、Ustで会話をした程度の面識ですが、とても凄い方です。

コラージュアートを得意とし、高い技術力とセンスの高さは圧巻。

是非、作品の数々を見て欲しい。

http://mashanayuki.deviantart.com/

Taiyo Yamamoto

Webサイト：deform

deformのTaiyo Yamamotoさん。

正直、凄すぎて良く分からない人です。

どうやったら、こういうのが出来るのか謎です。

しかも、Flasherなので更に訳が分からないです。

ただ一つ分かることは、ウルトラかっこいいという事です。

Yosuke Takeuchi

Webサイト：synesthesia

synesthesiaのYosuke Takeuchiさん。

初めて自分がアブストラクトなグラフィックを意識した人だと思います。

個人的にずっと前から存じ上げていたのですが、凄い人になってしまった。

今ではCMのCG等を手掛けている方です。

10.

Naoya Miyadai

Webサイト：opticalflats.net

opticalflatsのNaoya Miyadaiさん。

この方も個人的にずっと前から存じ上げておりまして、尊敬している方です。

Ta-K(Yosuke Takeuchi)さんと同じく今ではCMやPV等を手掛けている方です。

とても綿密なCGグラフィックが魅力的な方だと思います。

如何だったでしょうか。

終盤がかなり個人的な趣味になってしまいました。

ですが、是非知って頂きたい方々だったので紹介させて頂きました。

Webが分からないから、CGが分からないからではなく、

色々な物を取り入れる方が良いと個人的には思うので、

この記事が何かを奮い起こす切欠になれば幸いです。

ではでは、またの機会にm(__)m

Illustratorでカッコよくグランジデザインをつくるチュートリアル

2011-09-05T05:34:09Z

前回はPhotoshopでグランジ系の文字を作ってきましたが、

今回はIllustratorで挑戦をしてみました。

寧ろ、こちらの方が非常に簡単で手間が少ないです。

では、以下が手順となります。

]]>

文字を入力。

まず初めに、元になる文字を入力します。

なるべく、bold感のあるフォントを選択すると良いでしょう。

マスクをする。

次に、文字をマスクしていく為の手順をおっていきます。

まずは、パネルグループから透明を選択します。

不透明マスクを作成。

透明を選択した後、パネルメニューを選択し不透明マスクを作成します。

クリップする。

3.がうまく出来ていれば図のようになると思います。

もしクリップのチェックが外れていたら、チェックを入れましょう。

クリップにチェックを入れると、キャンバスから入力した文字が不可視状態になると思いますが、そのままの状態で問題ありません。

ブラシでアート_木炭・鉛筆を使いマスクする。

今度は、ブラシでマスクしていく為の準備をします。

ツールアイコンからブラシを選択します。

次に、ブラシセットからアート_木炭・鉛筆を選択します。

実際にマスクしていく。

ブラシセットを選択し終わったら、

塗りを未選択状態にし、線を白に設定します。

クリップの部分をアクティブにし、ブラシをかけていくと図のようになります。

※クリップ部分とは不透明マスク作成時に現れたクリップ表示の部分になります。

完成。

一度では形にならないので、横一直線だけでなく斜めや縦に何度も重ねていく事で、粗く複雑にマスクすることが可能です。

如何だったでしょうか。

前回のPhotoshopで作成する工程よりも、非常に簡単にかつ手軽に出来たと思います。

実際、こちらの方が綺麗に出来ると思うので、オススメです。

ではでは、またの機会にm(__)m

Photoshopでグランジ系の文字を作ってみる

2011-07-08T17:34:51Z

今回はグランジ系（汚れた・薄汚い）の文字の作り方。

今じゃ既にそういったフォントも配布されています。

ですが、そんなのを使っていてはクリエイターじゃないですよね。

自分でも作ってみたい！それが発見に繋がると思います。

それでは、やり方は以下の通りになります。

]]>

文字の作製。

まず適当な文字を打ちましょう。

なるべく太目の文字がイイと思います。

スマートフィルタ用に変換。

打ちこんだ文字レイヤーに対してスマートフィルタ用に変換を適用します。

これをやることで、フィルターを適用した際に再度調整が可能になります。

粒状フィルムを適用。

[2]で作製した、レイヤーに対して粒状フィルムの効果を適用させます。

[フィルター]→[アーティスティック]→[粒状フィルム]を適用します。

テクスチャを適用。

続けて、テクスチャフィルターを適用します。

[フィルター]→[テクスチャ]→[粒状]を適用します。

テクスチャを適用。

更に続けて、ぎざぎざのエッジを適用します。

[フィルター]→[スケッチ]→[ぎざぎざのエッジ]を適用します。

グランジテクスチャでマスクする。

効果を掛けたレイヤーに対して、空のピクセルマスクを用意します。

そして、用意していたグランジテクスチャを張ります。

張り方はピクセルマスクサムネイルをAlt＋左クリックをすると、
カンバスに表示されます。

そのカンバスに対してコピペしましょう。

完成。

以上で完成になります。

ですが、整える為に[イメージ]→[色調補正]→[レベル補正]をする事で良くなります。

やるかやらないかは、適用したテクスチャにもよりますので、お好みで。

Grunge Typo >> PSDダウンロード

如何だったでしょうか。

グランジ系（汚れた・薄汚い）感じの物はあまり得意でないので、調べてみました。

もし、良ければ使ってみて下さい。

ではでは、またの機会にm(__)m

Illustratorで簡単にキラキラブラシ素材を作ってみる

2011-07-04T06:34:07Z

今回は趣向を変えて、Webでも使えそうなものをエントリー。

やり方は色々あると思いますが、Illustratorでやるにはどうしたらイイか調べました。

クロスハッチだけでなく、色々な使い方も出来るかもしれません。

それでは、やり方は以下の通りになります。

]]>

正方形の作製。

まず初めに、背景色を黒にして白い正方形を作成しましょう。

大きさは適当で構いません。

正方形を回転し縮小する。

[1]で作成した、正方形を45度回転させて横幅を縮小させます。

縮小させるには、拡大・縮小ツールを使う事で可能です。

拡大・縮小ツールはツールパネルの中にあります。

パンク・膨張を適用。

[2]で作製した、回転・縮小させたオブジェクトに対して効果を適用させます。

適用させる効果は、パンク・膨張という効果です。

効果はメニューバーの中にあります。

[効果]→[パス変形]→[パンク・膨張]を選択して下さい。

パンク・膨張を調節する。

今回は、パンクさせるのでスライダーを左へ動かして、値をマイナスへしていきます。

この時、プレビューにチェックを入れておくことでどれ位の効果が出ているかが分かるので入れておいて損はありません。

※パンクさせるオブジェクトのアンカーポイント数だけ突起の数が変わります。

数を増やしたい場合はアンカーポイントを増やしてみて下さい。

散布ブラシとして登録する。

[4]で作製したオブジェクトを散布ブラシとして登録します。

散布ブラシオプションは図のようにしました。

変更点はサイズ、感覚、散布になります。

図を参照でお願いします。

ブラシで散布する。

[5]で設定した散布ブラシを使用して、適当に描いていくとこのようになります。

線の太さを変えることで、大きさを変えることが出来ます。

また、散布ブラシ自体を複製して設定を変えて、
色々なバリエーションを増やすのもイイと思います。

如何だったでしょうか。

割と手軽に出来るのでオススメです。

もし、職場に素材集や自作のパーツを持ち込めない場合は、

コレでサクッと作っておくのは如何でしょうか？

ではでは、またの機会にm(__)m

Photoshopで手軽にカッコイイデザインを作ってみる【その4】

2011-06-22T05:15:49Z

昔こんなの流行っていましたね？という事でエントリー。

どこかのチュートリアルを探せばあるかもしれませんが、埋もれてるかもしれません。

ということで、僕の方でも保管しておこうと思います。

応用にも使えると思いますので、是非ご覧下さい。

尚、今回から出来るだけpsd、epsファイルを配布したいと思います。

それでは、やり方は以下の通りになります。

]]>

背景の作製。

まず初めに、新規レイヤーを用意し、

グラデーションツールで図のような白黒のグラデーションを用意します。

グラデーションツールはツールボックスの中にあります。

フィルターで波形を適用する。

次に1.で作製したレイヤーに対して、

[フィルター]→[変形]→[波形]を適用します。

図のようになれば問題ありません。

設定値はキャンバスの大きさに比例して変わっていきますので、気をつけて下さい。

図は300*300ですが、以下のような設定値になっています。

波数：15

波長：（最小）1、（最大）40

振幅：（最小）1、（最大）20

比率：（水平）100%、（垂直）100%

グラデーションを作製する。

新規レイヤーを用意し、まず初めに何色でもイイので塗りつぶします。

その後に、塗りを0%にします。

次にレイヤースタイルを追加し、虹色のグラデーションを作成し適用します。

この時に、描画モードは焼きこみ（リニア）にしましょう。

何故こんな事をするのか？それは、後でやり直せるからです。

少し明るくする。

新規レイヤーを用意し、1.で作成したレイヤーと同じものを作成します。

作成後に、描画モードをソフトライトに変更します。

円を加える。

次に円を加えていくのですが、新しいブラシを作成します。

やり方は以前に紹介した下記の記事に書いてありますので、参照して下さい。

Photoshopで手軽にカッコイイデザインを作ってみる【その1】

ランダムに散布していく方法は以下の手順です。

1.ツールボックスから、ブラシツールを選択します。

2.[メニューバー]→[ウィンドウ]→[ブラシ]を選択、ブラシパレットが出現します。

3.シェイプ、散布、その他にチェックを入れて下さい。

4.シェイプはサイズジッターを100%にする。

5.散布は散布を1000%に設定。両軸はお好みでお願いします。

6.数も適度に設定して下さい。

7.その他は不透明度ジッターを100%に設定します。

設定が完了したら、新規レイヤーを用意します。

ブラシツールで上から下へなぞっていけば散布されます。

複製する。

5.で作成したレイヤーを複製します。

複製したレイヤーに対して、[フィルター]→[ぼかし]→[ガウス]を適用する。

描画モードはオーバーレイに設定します。

完成。

6.の時点で完成はしていますが、
僕の場合は少しボケ足しの多いブラシを少し加えました。

特に大したこともしてないので、記述はしません。

もし、気になるようでしたらpsdを見てみて下さい。

Aurora Circle >> PSDダウンロード

如何だったでしょうか。

最近はチュートリアルのまとめ記事も多いですが、

全部英語だったり、記事が埋もれてしまったりなので勿体無いですよね。

なるべく自分のblogで実行して保管していきたいと思います。

ではでは、またの機会にm(__)m

Photoshopの3D機能を使ってみる【その1】

2011-06-18T20:20:11Z

今日は実験中のPhotoshopの3D機能を使ってみます。

まだまだ、実験段階ですがメモとして残しておきます。

正直、使い物にはなりませんが、物は使いようという言葉もあります。

最初に断っておきますが、そもそもの使い方を無視してます。

それでは、やり方は以下の通りになります。

]]>

背景の作製。

まず始めに、描画色を白に背景色を黒にします。

逆でも問題はありません。

設定が終わったら、新規レイヤーを用意して白く塗りつぶします。

フィルターで雲模様を適用する。

次に1.で作製したレイヤーに対して、

[フィルター]→[描画]→[雲模様2]を適用します。

図のようになれば問題ありません。

ならない人は、描画色と背景色をを見直してみて下さい。

3Dを作製する。

2.で作製したレイヤーに対して、

[3D]→[グレースケールからの新規メッシュ]→[球]を適用します。

図のようになれば、成功です。

要は2.で元となるテクスチャを作成する事が目的です。

角度の調節をする。

正直、このままでは何の役にも立たないので、角度の調節をします。

他にもテクスチャを張ったり、反射を変えたり、光の角度も変えられます。

レンダリング設定を変える。

ですが、やはりこれでも使い物にはなりません。

そこで、レンダリング設定を色々弄ってみましょう。

今回は陰線消去ワイヤーフレームを選択してみます。

他にも沢山のレンダリング設定が選べるので、色々と試してみて下さい。

陰線消去ワイヤーフレームでレンダリングする。

こんな感じになります。

少し角度も調節しました。

正直、これでもどうなのか？という感じなのですが、

まだ実験中なので色々やってみたいと思います。

今回は自分の実験中の記事を書いてみました。

3Dソフトがないのでこの機能で面白いことが出来ないかもう少し試してみます。

C4D等を持っていればこんな事しなくても済むんですけどね。

次はもう少しためになる、記事を書こうと思います。

ではでは、またの機会にm(__)m

Illustratorで手軽にカッコイイデザインを作ってみる【その4】

2011-05-31T07:21:47Z

Illustratorで手軽にカッコイイデザインを作ってみる【その4】です。

前回に引き続きタイポグラフィを作成していきます。

手軽ではありますが、手間は掛かります。

また、Illustratorとしていますが、Photoshopも使用していきます。

やり方は以下の通りになります。

]]>

背景の作製。

この背景作成は2年程前に流行り出した手法です。

ここの作成方法は省きますが、参考記事を出しておきます。

下記のサイトで、チュートリアルを出しているので参考にして下さい。

Photoshop Vip：http://photoshopvip.net/archives/10289

自分は参考記事とは違うパターンを用意して作成しました。

後は、光源の上下と斜めに入れています。

手法は中央に入れているラインと同じ方法なので、
単純に増やしたという感覚で問題ありません。

文字を用意する。

以前に書いた記事を参考に、文字を作成していきます。

Illustratorで手軽にカッコイイデザインを作ってみる【その3】

ですが、今回はオプションを加えていきます。

次の工程で説明はしますが作業をやり易くする為の、効果です。

図を見て頂くとマッピングの下に[基本オプション]とあるのですが、

通常時は[詳細オプション]となっています。

[詳細オプション]を押すと、[表面]という項目がでます。

ここの項目で光の位置を調節して、文字の表面が照らされるように調節して下さい。

文字を組み上げる。

全ての文字を用意したら、文字の組み立てをしていきます。

今回はHelveticaの単語を使用しました。

因みに使用しているフォントもHelveticaになります。

正しくは廉価版というか、大人の事情で名称が変わっている、Swis721になります。

※組み上げた文字はPhotoshopへコピペしておきましょう。

着色をする。

ここからPhotoshopへステージを移します。

組上げた文字に着色をしていきます。

この為に[2]で光の位置を調節してもらいました。

文字の表面を白く飛ばすことで、選択範囲を楽に取る事ができます。

1文字ずつレイヤーを用意し、自動選択ツールで選択し、塗りつぶしていきます。

その後、各レイヤーごとにグラデーションをセットしていきます。

背景の装飾を作製。

一度、Illustratorへ戻り背景装飾の作製に掛かります。

下記の記事を参考に作製を行ってみて下さい。

動きのある背景の方がインパクトが出るかと思います。

Illustratorで手軽にカッコイイデザインを作ってみる【その1】

作成が終わったら、Photoshopへコピペします。

レイヤーにグラデーション効果を加えましょう。

なるべく[1]背景の作製で使用した色合いに近い、
グラデーションを適用するのがベターだと思います。

このレイヤーを複製し更に効果を掛けていきます。

[フィルタ]→[ぼかし]→[ぼかし(ガウス)]でぼかし効果を加えます。

掛けすぎると飛んでしまうので、気をつけましょう。

このレイヤーは複製する前のレイヤーより前面に配置しましょう。

文字の盤面様の装飾を作製。

こちらは文字の盤面用の装飾です。

[5]と同様に作成をしていきます。

作成が終わったら、Photoshopへコピペします。

はみ出る部分はきちんとマスクしていきましょう。

マスクが終わったら、描画モードを[オーバーレイ]へ変更し、
透明度を馴染む様に変更します。

今回は60%に設定しました。

完成。

完成です。

もしかしたら、文字が暗すぎる場合があれば調整レイヤー等を付加して下さい。

自分は[3]文字を組み上げる。で作製したレイヤーを複製して、
ぼかしの効果を入れました。

後は各自で装飾してみて下さい。

今回はPhotoshopとIllustratorの配分が半分ずつでしたね。

長所と短所があるので、上手く使いこなせるようになれればイイなと思います。

もし、分からない点や、どうしたら良いでしょう？という事があれば、

Twitterにてお応え致しますので、よろしくお願いいたします。

ではでは、またの機会にm(__)m

Illustratorで手軽にカッコイイデザインを作ってみる【その3】

2011-05-25T07:03:13Z

Illustratorで手軽にカッコイイデザインを作ってみる【その3】です。

今回はタイポグラフィを作成していきます。

Illustratorの3D機能を使う事で表現が可能となります。

やり方は以下の通りになります。

]]>

テキストを用意する。

今回は私のアーティストネームであるdisQを使って組み上げていきます。

まず初めに、任意のテキストを用意して下さい。

1文字ずつ加工していくので、1文字ずつ用意して下さい。

白を基調としていきますので、背景に黒のレイヤーをおいて、文字は白としましょう。

3D機能を使う。

[1]で用意したテキストに対して3D効果を適応していきます。

3D効果といっても、正体は押し出し・ベベルなので気負う事はありません。

メニューバーの[効果] > [3D] > [押し出し・ベベル]を選びましょう。

効果の設定確認。

今回は上記の図のような設定を適用しました。

X軸、Y軸、Z軸の角度を変更し、ベベルの種類も変えています。

効果の確認。

効果が適応されていれば上記の図のようになります。

[3]でやった工程を他の文字にも適応していきます。

文字を組み上げる。

用意した文字にそれぞれ効果を掛け終わったら、組み上げていきます。

角度やレイヤーの順番を変えて上手く配置しましょう。

作成した文字をctrl+cでコピーし、Photoshopへctrl+vでペーストします。

※この段階で一度Photoshopへ移行します。

装飾品を作成する。

再びIllustratorへ戻り、装飾品を作成していきます。

図のモデルは背景用に作成したものです。

ブレンドオプションを使用し作成しました。

ブレンドオプションに関しては下記の記事で触れているので参考にして下さい。

■Photoshopで手軽にカッコイイデザインを作ってみる【その2】

参考記事の内容に加えて、注意して欲しい点があります。

それは、線の太さと色を適度に変更し、グラデーションを演出するという事です。

参考記事は線型のモデルなので、今回のモデルとは相違します。

これは、線の太さを調節する事で解消されます。

※作成し終わったら、Photoshopへコピペしておいて下さい。

文字を誂える。

文字自体に装飾を加えるための、パーツを用意します。

図のような物を作成するには、前々回の記事を参考にして下さい。

※作成し終わったら、Photoshopへコピペしておいて下さい。

完成。

最後はPhotoshopへステージを移し、装飾品を配置していきます。

[6]で作成したものは、光彩を外側に薄くかけています。

[7]で作成した、ブラシはテキストに沿ってマスキングをしていきます。

手書き風のイラストは素材集を使用しているので、
各々イメージに合うものを用意して下さい。

今回はPhotoshopとIllustratorの配分が半分ずつでしたね。

長所と短所があるので、上手く使いこなせるようになれればイイなと思います。

もし、分からない点や、どうしたら良いでしょう？という事があれば、

Twitterにてお応え致しますので、よろしくお願いいたします。

ではでは、またの機会にm(__)m

Illustratorで手軽にカッコイイデザインを作ってみる【その2】

2011-05-22T16:16:13Z

Illustratorで手軽にカッコイイデザインを作ってみる【その2】です。

カラースキームを用意して複雑なカーブの表現はどうやるのか？

Illustratorを使って表現してみたいと思います。

やり方は以下の通りになります。

]]>

カラースキームを用意する。

まず初めに、必要になるカラースキームを用意します。

今回は上から1px、2px、3pxの物を用意しました。

作成する時には、グリッドを表示してスナップしておきましょう。

カラースキームで悩んでしまう人には、下記のサイトを利用する事をオススメします。

■Color Scheme Designer：http://colorschemedesigner.com/

アートブラシを登録する。

[1]で用意したカラースキームを選択して、新規ブラシに登録します。

この時にアートブラシを選択して下さい。

リピートされる方向に注意して、確認してから登録しましょう。

実際に引いてみる。

前回やった、"Illustratorで手軽にカッコイイデザインを作ってみる【その1】"のテクニックを使用します。

例えば対角線上にパスを引き、先程のブラシを適応すると上記の図のようになります。

ならない場合、ブラシを登録する時に繰り返す方向を間違えているかも知れません。

もう一度確認してみましょう。

角度をつける。

次は角度をつけてパスを引いて見ましょう。

Shiftボタンを押しながらパスを打つと、45度間隔で打つことが可能です。

カーブをつける。

[4]で角度をつけて引いたパスを選択します。

次に[効果] > [スタイライズ] > [角を丸くする]を選択します。

どの位曲げるかというダイアログでるので、適当な値を入れましょう。

※今回は25mmに設定しました。

カーブの確認。

[5]の工程が上手く出来ていれば、図のような効果が得られるでしょう。

複雑なカーブも可能。

パスをもっと複雑にカーブさせても同じ効果が期待できます。

単純なものと複雑なものを併せて、より高度なデザインを生みましょう。

完成。

あとは、適度に曲線を増やして配置していきます。

やりすぎると密集しすぎてバランスが取れなくなるので注意です。

最後に、カーブの重なる部分は影を落としていき、タイポグラフィを組みましょう。

如何だったでしょうか。

Photoshopだけでは辛い部分を、Illustratorで作る事ができます。

こういう部分も長年どうしたものかと悩んでいたので、解消されて良かったです。

もし、分からない点や、どうしたら良いでしょう？という事があれば、
Twitterにてお応え致しますので、よろしくお願いいたします。

ではでは、またの機会にm(__)m

Illustratorで手軽にカッコイイデザインを作ってみる【その1】

2011-05-19T18:36:00Z

Illustratorで手軽にカッコイイデザインを作ってみる【その1】です。

よくブラシ系で見掛けるFloweryなデザインはどうやってるのか？

やり方は非常に簡単なものです。

]]>

ブラシとパスを用意する。

まず初めに、「豪華なカールブラシとフローラルブラシのセット」という
デフォルトのブラシを用意します。

※ブラシライブラリ > 装飾 > 豪華なカールブラシとフローラルブラシのセット

そして、図のように適当にペンツールでパスを1本引きます。

パスにブラシを適用する。

さっき引いたパスを選択したまま、
用意しておいたブラシを選択するとブラシがパスに適用されます。

何故パスに適応するのか、それは後から編集が出来るからです。

今回適応したのは「フローラルブラシ12」になります。

渦巻き上の物を作成する。

恐らくコレが出来れば、問題なく好きに出来ると思います。

ここでは、[渦巻き]ツールを使っていきます。

私はIllustratorに対してかなりの情弱なので、
これが何処にあるのか分かりませんでした。※1

図のように緩い渦を描く場合は、
アートボード上で1clickするとダイアログボックスが出ます。

セグメント数を調整すると可能になります。

※1 ツールパネルから直線ツールを長押しし[渦巻き]ツールを選択します。

ブラシを適用する。

[1]と同じようにブラシを適用していきます。

今回は「フローラルブラシ11」を適用しました。

完成。

後はペンツールで曲線を描いて、好きなブラシを適用していけば完成です。

コツは中心点を決めて、核になる物を用意してから装飾していくと、
バランスが良くなります。

如何だったでしょうか。

個人的には長年の悩みが解消されて良かったです。

もし、分からない点や、どうしたら良いでしょう？という事があれば、
Twitterにてお応え致しますので、よろしくお願いいたします。

ではでは、またの機会にm(__)m

リニューアル

2011-05-18T05:04:35Z

リニューアルをしました。

すごく久しぶりにblogを弄った。

忙しい日々にピリオドを打ちまして、勉強の再開と相成ります。

リニューアルに際し、変更点は以下の通りになります。

]]>

html5+CSS3+jQuery

html5化は早期かなとも思いつつ、じゃあいつやるんだ？

と、考えたときに、「今」でしょ！って感じでやりました。

一応現時点ではW3CのMarkup Validation Service通して、

1 warning出てるんですが、原因が特定できません。

ですが、それなりの精度は出たと思います。

CSS3とjQueryはほんの少しといった程度。

因みに画像が殆どないのでページを開くのが早い。

デザイン

デザインというデザインはしていません。

グラフィカルなものはblogに向いていないと思ったので、文字だけにしました。

利便上、1カラムが今のところ一番良い気がしたのですが、

スタンダードな2カラムを採用。

理由は1カラムの構築の難しさからの挫折ですね・・・。

どうナビゲーションしていくか、吟味しなければ・・・。

どういう人達が何処からどうやって到達して、
何処へ行くのか考察しなければならないという事です、基本ですね。

まぁ、このサイトの課題は当面どうやって集客するかなのですが。

コメント廃止

本来ならフォームをくっつけて、
訪問者の意見や感想をフィードバックするのが普通なのですが、

でも、自分が全然コメント欄を利用しないのにねぇ、と。

寧ろ、もっと色々なツールがあるんだからソレ使えば？って感じです。

何かあればTwitterで言ってくれと、強気な感じですｗ

内容の変更

まぁ、ろくに更新もしなかったので今更感がたっぷりですが、

自分の聴いていた音楽のレビューが主だったんですが、

更新しない間にもPhotoshop系の記事で見に来られる方が多数いまして、

どうやら需要があるようなので、そこらへんを突いていこうかなと。

よろしくお願いいたします。

最後に・・・

まぁ、そんな感じで内容も新たに心機一転blogをやろうと思います。

といことで、長くなりましたがこの辺でノシ

Photoshopで手軽にカッコイイデザインを作ってみる【その3】

2009-04-26T18:05:35Z

やって参りました、Photoshopで手軽にカッコイイデザインを作ってみる【その3】です。

お題は「星雲」で御座います。

「星雲」ですが、ほぼ「宇宙」で間違いないですｗ

この技法はMdNでも紹介されており、今回はそれをどう手軽にカッコ良くするかです！

ではでは、早速やって参りましょう♪

]]>

背景グラデーションを作製。

ここでは、下地になる背景グラデーションを作製します。

黒から濃い青(黒寄りの青)のグラデーションを引きます。

ランダムな星屑を散りばめる為の素材を作製する。

今度は星屑を演出する為の素材を作製します。

まずは「新規レイヤー」を用意し、描画色を黒く塗りつぶします。

この時に、背景色を白にするのを忘れないで下さい。

次に[フィルタ]→[ノイズ]→[ノイズを加える]を適用します。

※[量]は150%、[分布方法]は均等に分布、
[グレースケールノイズ]にチェックを入れます。

更に、このノイズに[フィルタ]→[ぼかし]→[ぼかし(ガウス)]の1.0pixelで
適用します。

星屑を具現化する。

[2]で作製したレイヤーの[描画モード]をスクリーンにします。

今度は[イメージ]→[レベル補正]で絞っていき、星屑の数を具現化していきます。

星雲の素材を作製する。

描画色を黒、背景色を白に設定した後に、新規レイヤーを用意し黒く塗りつぶします。

そうしたら、[フィルタ]→[描画]→[雲模様1]を適用します。

続けて同じレイヤーに対し、[フィルタ]→[描画]→[雲模様3]を3回程適用します。

余分な星雲をマスクしていく。※これ・・・、山場なんだぜ！

えー、早くも山場ですｗｗｗｗｗ

というのも、星雲を消しすぎるとスカスカになり、残しすぎるとモッタリするんです。

なので、丁寧にバランス良くマスキングをしていきます。

コツはボケ足しの若干強いブラシでちょこちょこマスクしていく感じです。

星雲に着色をしてみる。※実はこれ・・・、2回目の山場なんだぜ！

さぁ、工程5よりも大変です。

正直グラデの腕磨いてから掛かって来い！！って感じです。

実作業としては、新規レイヤーを用意してグラデーションツールを選択します。

グラデーションの種類に「スペクトル」を選択し、
色の範囲を変えたり抜いたりします。

と、MdNに書いてありますが上手くいかないよ？

なので、色合いも沢山弄りましょうｗ

で、何度もやり直していい感じのグラデが出来るまで試行錯誤です。

※試行錯誤をする前に、このレイヤーの「描画モード」をカラーにし、

「不透明度」を30%～35%にしておきましょう。

いい感じのグラデが出来たら、[フィルタ]→[変形]→[渦巻き]を適用します。

今回は-280%を適用しました。

逆光で味付けする。

描画色を黒にした後に、新規レイヤーを用意して黒く塗りつぶします。

次に[フィルタ]→[描画]→[逆光]を適用します。

適用し終えたら、「描画モード」をスクリーンに設定します。

大小様々な物を用意して、配置していきます。

光の線をアクセントとして加える。

ここからはオリジナルです。

白のグラデーションを多用し、「描画モード」をオーバーレイに設定して重ねていきます。

注意するべき点は、沢山配置しすぎるとゴチャゴチャになってしまい、返ってダメになります。

タイトルを入れる。

はい、いつもの如くセンスにお任せですｗｗｗｗｗ

今回は、3種類のレイヤーを重ねて光が強めで若干飛んでる感じにしました。

今回は若干手軽の部分から外れてしまったかも知れませんね。

ですが、肝はグラデだと思います。

そこさえクリアできれば、早い時間で作製できると思いますので、

是非とも頑張ってみてください。

ではでは、またの機会にm(__)m

カッコイイデザインを作るために参考にしたいサイト10選【その1】

2009-02-16T10:00:49Z

今回はグラフィックをやるに当たってパクリ元を紹介！(ぉ

クリエイターにあるまじき発言かと思われますが、

余程の才能が無い限りは本当の意味でのオリジナルは生み出せないでしょう。

ここで言いたいのは、あくまで表現方法としての、と言う事です。

恐らく「頭の中がボヤけて形が良く分からない」みたいな時に、

閲覧してもらえれば「コレだ！！」となるかもしれません。

センスアップにも繋がると思うのでご賞味あれ。

]]>

depthCORE :: Digital to the Core

http://depthcore.com/

デジタルアートここに集結って感じです。

僕が当初から今でも良く見ているサイトになります。

多岐にわたるジャンルは表現方法として勉強になると思います。

また、表現技法も斬新かつ最新のものが見れるので影響される事は必須。

deviantART

http://www.deviantart.com/

言わずと知れた、海外老舗サイト。

あらゆる創作物にあふれたジャンルと、クオリティの高さは必見。

High Floater

http://www.highfloater.com/

かなり沢山のportfolioサイトがストックしてあります。

イマジネーションや表現に詰まったら徘徊しましょうｗ

コレだけあれば自分のイメージにハマる物が見つかるはず？！

Prismgirl

http://prismgirl.org/

もうね、圧巻の一言、、、っていうか、好き過ぎる。

僕にとって一番影響力が大きかった思います。

眞野さんの作るもの全ての作品が自分の感性へ響きます。

この世界観、技術力、こだわり、尊敬しています。

iregret

http://iregret.org/

もうなんかね、超スゲーって感じｗ

え？手書きなの？デジタルなの？ってレベル。

どうやら、まずリアルにやった後に処理してるらしいですが・・・。

なんか、凄すぎですよね(汗

NODACT™

http://www.nodact.com/

菊池良太さんのHPです。

この方の影響力も非常に大きかったです。

Photoshop技術大全でお見かけして、

光の演出に傾倒していた僕としては神様みたいな存在でした。

今でも憧れの的で御座います＞＜

Aeiko (v6) Portfolio of Pete Harrison (I love Juicypanda)

http://www.nodact.com/

多分、いま僕が一番良く見ているサイトですね。

クオリティが本当に高くて、

このサイト見てると「いいなぁ～」とか「カッコイイなぁ～」とか、

子供の言葉しか出ないですｗ

Aeriform

http://www.aeriform.co.uk/

昔に流行った横長のサイトですね。

portfolioしかなければ、ある意味ありのサイト構築ｗ

っていうか、作品の質が質なだけに横だろうが縦だろうが関係なしに見入ってしまうｗ

この方は抽象系から光の演出まで色々とやっているので参考にするのにお勧めです。

AKIKO NISHIZAWA

http://www.akikonishizawa.in/

もう有名すぎて知っている方が多いかもですね。

にしても、いつの間にこんなにサイト重くなったんだ！！

ですが、待って見る価値ありですよ♪

コラージュアート必見です！！

10.

nonamedesign

http://www.nonamedesign.info/

今はもうportfolioを閉じてしまっていますが、

indexだけでも見て頂ければ分かる通り、素敵過ぎます！

僕がデジタルアート始めた当初は真似しまくっていました。

でも、真似とも取れない様な出来でしたが・・・＞＜

以上、10サイト選出させて頂きました。

ですが、これも個人の選りすぐりにしか過ぎません。

本当に作りたいものは自分で見つけるべきだと思いますし、

自分で考えるものだと思います。

ですが、「出来ないや！」と投げてしまうのが一番勿体無いと思います。

なので、これが製作する為の1つの橋渡しになれば幸いです。

またこのような機会があればやりたいと思います。

ではでは♪