apple社のiPhoneの対抗機種として注目の高いGoogleのNexus One。

日本においてはいまだキャリアも決まっておらず発売時期は未定となっていますが、iPhoneの半額程度の価格設定など気になる要素がたくさんです。

今回はそんなNexus Oneの液晶デザインなどを自由にカスタマイズできるフォトショップ用PSDファイル「Nexus One HD」をご紹介します。

収録されているファイルは、パーツごとにレイヤーで分けられており、細かくデザインを変更することができます。

また通常写真などでよく見る灰色の本体カラーのほかに黄色や赤などのカラフルなデザインにもできるようになっています。（サムネイル画像を参照）

もちろん壁紙やアイコンなども自由に変更可能なので、自分だけのオリジナルNexus One携帯をデザインできますよ。

使用に関するライセンスは、個人利用は問題ありませんが、商用利用についての記述が見当たりませんでした。

商用利用をお考えの方は、直接デザイナーさんに問い合わせる必要があります。

このような形でレイヤーごとにていねいに整理されているので、直感的にデザインすることができますよ。

以下のボタンをクリックするとダウンロードを開始することができます。

↑　クリックすると原寸拡大表示されます。

今回は、フォトショップを使って本物の様な輝きがまぶしい銀色文字をつくる方法をご紹介します。

「レイヤースタイル」を適用するだけで、簡単に質感の高いデザインに仕上げることができるので、覚えておくと便利なテクニックのひとつです。

最後にサンプル用PSDファイルも公開していますので、レイヤースタイルを保存しておけばボタンひとつでデザインすることができますよ。

詳細は以下から。

チュートリアル情報 

---

プログラム : Photoshop

バージョン : CS4で作成　（古いバージョンでも可能）

 難易度 : 初級者から中級者

 所要時間 : 5分から10分ほど

チュートリアルをはじめる前に今回使用するパターン画像をダウンロードしておきましょう。

>> 銀色文字用パターン画像

※ダウンロードを完了したら、フォトショップで画像を開きましょう。

次にメインメニューより「編集」＞「パターンを定義」を選択し、パターンの定義をしておきましょう。

これでパターンファイルとして使用することが可能になります。

次に使用するフォントをダウンロードしましょう。

今回は「ウェブデザイナーにもおすすめ、あまり見かけない新しいフリーフォント20個まとめ」で紹介した「Sorts Mill Goudy」フォントを使用しました。

 チュートリアル

STEP 1　背景画像をデザインする

メインメニューよりファイル＞新規を選択し、ドキュメントを開きます。

このチュートリアルでは、キャンバスの大きさを1000×600pxの72px/inchとします。

ツールボックスより「グラデーションツール」を選択し、黒(#000000)から灰色(#2f2f2f)のグラデーションを中心から円形にかけます。

メインメニューより「フィルタ」＞「テクスチャ」＞「テクスチャライザ」を適用します。

今回は「拡大・縮小」を100%、「レリーフ」を4に設定しました。

STEP 1　テキストエフェクト

ツールボックスより「文字ツール」を選択し、あらかじめダウンロードしておいたフォントを使い、描画色「白」(#ffffff)で適当な文字を入力する。

今回は文字サイズを240ptに設定しています。

メインメニューより「レイヤー」＞「レイヤースタイル」を選択し、順番に適用していきます。

ドロップシャドウ

シャドウ（内側）

光彩（外側）

光彩（内側）

べベルとエンボス

グラデーションオーバーレイ

グラデーションの設定は以下のようになります。

パターンオーバーレイ

すべてのスタイルを適用すると以下のようなテキストエフェクトが完成します。

完成

いかがでしたでしょうか。

レイヤースタイルを適用するだけで、光り輝く銀色文字を5分で完成させることができました。

出来上がったテキストのレイヤースタイルを保存しておけば、いつでもボタンひとつで銀色文字をデザインすることができます。

文字サイズが小さい場合は、レイヤースタイルの値を変更してあげることで、うまく仕上がりますよ。

金色文字のつくり方と一緒に覚えておくとよさそうです。

今回作成した銀色文字のサンプル用PSDファイルをダウンロードすることができます。

PhotoshopVIPは高品質のフォトショップチュートリアルを皆さんにお届けしています。

随時更新されるチュートリアルのRSS定期購読をしませんか。

RSS購読することにって、ホームページに新しい記事がないか探さずに、Photoshop VIPが毎日更新される記事をお届けする便利な機能です。

もちろん無料ですのでお気軽にどうぞ。

RSSをさらに詳しく知りたいひとはコチラの記事に説明しています。 

今週はバレンタインデイですね。

以前「ハート型」を使ったアイコン、Photoshopチュートリアル、ブラシなどまとめました。」を紹介して、いろいろな無料素材をまとめましたが、今回はかわいいアイコンを発見したのでエントリーします。

今回ご紹介するアイコンセットは、お使いのパソコンのデスクトップに使えそうなハート型をモチーフにしたアイコン10個セット「Saint Valentine’s Day Icon Set」をご紹介します。

収録されているアイコンは全部で10種類となっており、32×32,48×48,128×128そして150×150pxのpngファイルが揃っています。

期間限定でウェブサイトやブログ、デスクトップのアイコンを変更してみてもいいかもしれません。

使用に関するライセンスも個人利用、商用利用に問題なく使うことができるのもうれしいですね。

以下は収録されている全アイコンセットのサンプルとなります。

ダウンロードを開始するには以下のボタンをクリックしてください。

Photoshop VIPではこれまでにもジャンル別にいろいろなフリーフォントを紹介しています。

今回は、ユニークでクリエイティブなフリーフォントを３０個まとめた「The 30 Most Creative & Unusual Fonts」をご紹介します。

多くのフリーフォントはすでに紹介済みでしたが、いくつかまだ見たことのない珍しいフォントもいくつかピックアップしています。

フォントがありすぎると選ぶのに困ったりもしますが、選択肢が増えるのはうれしいですよね。

詳細は以下から。

ユニークでクリエイティブなフリーフォント３０個まとめ

---

Orial

ヘルベチカフォントに花柄オーナメントの模様がデザインされたフリーフォント。

大文字、小文字、数字がそれぞれデザインされているので、使い勝手がよさそうです。

Beyond Sky

少しかすれたグランジデザインのフリーフォントのひとつ。

大文字「B」と「S」のみオーナメントデザインが施されています。

Ink God

無造作にデザインされたラインが印象的なグランジフリーフォント。

ロゴなどをさくっと作成したいときなどにも使えそうです。

Killed DJ

こちらもグランジデザインを使ったデザインフリーフォントのひとつです。

イベント用のポスター、フライヤーなどに使うとよいアクセントになりそうです。

Labrat

ところどころ欠けたようなデザインがユニークなフリーフォント。

２種類の太さのフォントを同時にダウンロードすることができます。

Pipestruct

土管をつなぎあわせた様なイラスト調のフリーフォント。

黒抜き、白抜きの２種類が揃っています。

Wild Arrows

矢印記号をうまく使うことで、アルファベットを完成させたフリーフォント。

New Garden

以前ご紹介しているかもしれませんが、、。

細いラインのフォントをお探しでしたら、こちらはいかがでしょう。

Barcode

サムネイルのとおりですが、組み合わせることでバーコードをデザインできるフォント。

Kinkee

ハートをデザインした丸っこいデザインが印象的なフォント。

女の子関連のロゴなどを作るのによさそうです。

Confession

某アーティストのCDジャケットロゴとして使われていたフリーフォント。

音楽イベント関係のロゴなどにうまくマッチしそうです。

Trashco

ハーフトーンを使ったファッション雑誌などに使われていそうなフリーフォント。

特に気になるフリーフォントをピックアップしてみました。

お好みのフォントが見つからなかった方やもっとフリーフォントを見つけたい方は「2009年に公開されたフリーフォントベスト50個まとめ」などにもまだ見たことのないフォントがあるかもしれません。

よろしかったら、一緒にどうぞ。

2009年に公開されたフリーフォントベスト50個まとめ

また参照元サイトにもクリエイティブなフリーフォントがまとめられています。

[参照元 : The 30 Most Creative and Unusual Fonts - Iniwoo]

フォトショップを使う上でなにかと便利なパターンファイル。

今回はそんなパターンファイルの中でもあまり見かけない、継ぎ目のないメタルテクスチャパターンファイル「8 Tileable Metal Textures」をご紹介します。

収録されているファイルには合計8種類のメタルテクスチャが収録されています。

シンプルなステンレスのようなパターンから、さび付いたグランジデザインのパターンまで豊富な種類が揃っています。

ダウンロードできるファイルは2種類用意されており、ひとつはパターンのみを収録したファイル、もうひとつは、パターンファイルのほかに512×512、1024×1024pxのテクスチャ素材が収録されています。

パターンを使うことでカンバスの大きさなどを考えずに、継ぎ目のないデザインを作成できるので、ウェブサイトなどの背景デザインとしても利用できそうです。

また使用に関するライセンスも個人利用、商用利用ともに問題なく使うことができるのもうれしいですね。

以下は全メタルテクスチャパターンとなります。

以下のボタンを押すと参照元サイトに移動します。

用意されている2種類のファイルより、お好みに応じてダウンロードを開始してください。

↑　クリックすると原寸拡大表示されます。

今回は、フォトショップで本物のような輝きがまぶしい黄金文字をつくる方法をご紹介します。

本当に光が当たって反射しているようなテキストエフェクトをフォトショップのレイヤースタイルを適用するだけで作成できます。

最後にサンプル用PSDファイルを公開していますので、スタイルを保存しておけばクリックひとつで完成してしまうお手軽チュートリアルです。

詳細は以下から。

チュートリアル情報

プログラム : Photoshop

バージョン : CS4で作成　（古いバージョンでも可能）

 難易度 : 初級者から中級者

 所要時間 : 5分から10分ほど

チュートリアルをはじめる前に今回使用したフォントをダウンロードしておきましょう。

今回は「ダウンロードしておきたい25個の高品質な筆記体フリーフォント完全まとめ」で紹介した「Exmouth」フォントを使用しています。

チュートリアル 

STEP 1

メインメニューよりファイル＞新規を選択し、ドキュメントを開きます。

このチュートリアルでは、キャンバスの大きさを1000×600pxの72px/inchとします。

ツールボックスより「文字ツール」を選択し、あらかじめダウンロードしておいたフォントを使い適当な文字を描画色「黒」(#000000)で入力します。

このチュートリアルでは、文字サイズを270ptに設定しました。

文字サイズを小さくする場合など、レイヤースタイルの数値を変更しなければいけませんので、ご注意ください。

STEP 2

作成した「文字レイヤー」を選択し、メインメニューより「レイヤー」＞「レイヤースタイル」を選択し、以下のとおりに順番に適用していきます。

ドロップシャドウ

シャドウ（内側）

光彩（外側）

べベルとエンボス

グラデーションオーバーレイ

グラデーションの設定は以下のとおりです。

新規グラデーションに追加しておくとよいかもしれません。

すべてのレイヤースタイルを適用したら完成となります。

完成

今回、背景画像のデザインは「フォトショップで本物そっくりな錆びたカラフルメタル文字を作る方法」のSTEP 20と同じ方法でデザインしています。

テクスチャを使わずに、「逆行」フィルタと「雲模様2」フィルタをうまく使うことで、質感の高いテクスチャ素材をデザインすることができます。

代わりに黄金テキストのみデザインに加えてもまったく問題ありません。

よろしかったら、一緒にどうぞ。

(参考記事）　フォトショップで本物そっくりな錆びたカラフルメタル文字を作る方法

先日ご紹介した「簡単！フォトショップで黄金に輝く3Dテキストエフェクトを5分でつくる方法」とはまた違うテイストのテキストエフェクトですが、用途に応じて使い分けたりするのもよいかもしれませんね。

今回作成した黄金文字のサンプル用PSDファイルをダウンロードすることができます。

PhotoshopVIPは高品質のフォトショップチュートリアルを皆さんにお届けしています。

随時更新されるチュートリアルのRSS定期購読をしませんか。

RSS購読することにって、ホームページに新しい記事がないか探さずに、Photoshop VIPが毎日更新される記事をお届けする便利な機能です。

もちろん無料ですのでお気軽にどうぞ。

RSSをさらに詳しく知りたいひとはコチラの記事に説明しています。 

↑　クリックすると参照元サイトに移動します。

今回は、フォトショップを使ってシンプルでスタイリッシュなポートフォリオウェブサイトをつくる方法をご紹介します。

特に難しいテクニックなどはありませんが、やさしい色使いやクリックしたくなるような立体的なボタンの作り方などは覚えておきたいテクニックではないでしょうか。

またグリッドを使うことで見た目もすっきりとしたポートフォリオサイトをデザインすることができます。

デモページも用意されていますので、実際完成したポートフォリオサイトを見てみるとよいでしょう。

>> デモページはこちら

詳細は以下から。

チュートリアル情報

---

プログラム : Photoshop

バージョン : CS4で作成　（古いバージョンでも可能）

 難易度 : 初級者から中級者

 所要時間 : 1時間から1時間30分ほど

 このチュートリアルから学ぶことのできるポイントとしては、

・ グリッドを使ったシンプルで見やすいウェブレイアウトの作成方法

・ 1pxの白ラインを効果的に使った立体的でエレガントなラインの作り方

・ クリックしたくなるような立体的なボタンの作り方

などがあります。

チュートリアルハイライト

---

グリッドラインを考えながらデザインすることで、まとまりがありすっきりとしたデザインに仕上げることができます。

グリッドラインデザインの補助ツールに関しては960.gsをオススメします。

ウェブサイトトップ左上部分よりあらかじめグリッドラインをデザインしたファイルをダウンロード可能となっています。

こちらはPhotoshopはもちろん、Fireworks、InDesignなど合計8種類のアプリケーションに対応しておりとても便利です。

ウェブレイアウトを区切るために使うラインも少し手を加えるだけでエレガントに仕上がります。

まず灰色(#cccccc)でラインを1pxの「鉛筆ツール」で描きます。

次に白(#ffffff)のラインを灰色ラインの下に加えることで、立体的なデザインに仕上がります。

分かりにくいですが、ヘッダーロゴと組み合わせると以下のようになります。

グリッドラインを使うことで、テキストなどのレイアウトも簡単に、そしてすっきりとデザインできますね。

またテキストの文字色も黒(#000000)ではなく、濃灰色（#555555)や灰色（#888888)を使うと背景画像ともマッチします。

等間隔にボックス枠を表示することができるのもグリッドを使ったウェブレイアウトの特長です。

サムネイル画像をただレイアウトするのではなく、周りに灰色の枠をつけることもユーサビリティーにおいてポイントとなります。

以下のようなシンプルで質感の高いボタンの作り方も、レイヤースタイルを適用するだけのお手軽チュートリアルです。

ボタンに適用するレイヤースタイルは2種類で、「べベルとエンボス」、「グラデーションオーバーレイ」となります。

今回使用しているフォントは「Myriad Pro」を薄灰色(#eeeeee)で入力しています。

べベルとエンボス

グラデーションオーバーレイ

具体的な詳しい作り方に関しては、参照元サイトを参考にしてください。

英語表記でのチュートリアルとなりますが、手順も比較的やさしく、使用する色なども細かく表記されているので分かりやすいと思います。

少し前の記事になるのですが、とても魅力的なポートフォリオサイトがまとめられていたので、メモ的エントリーです。

今回ご紹介するのは、世界中のウェブデザイナーやグラフィックデザイナー、フォトグラファーなどのポートフォリオサイトです。

デザインした作品をまとめて見せることで、クライアント、ユーザーに対しても効果的に自己表現することができるのではないでしょうか。

「写真、動画ギャラリーやポートフォリオに使えるWordPress用無料テンプレート8個まとめ」で紹介したような高品質なテンプレートを使ってもいいかもしれませんね。

詳細は以下から。

クリエイティブなポートフォリオサイト50個まとめ

---

Notorious Design

 UKをベースに活動を続けるデザイナーさんのポートフォリオサイト。

グランジデザインを使用したヘッダー部分に、大きくメニューを配置することで使いやすさが◎。

作品をそれぞれスライドショーで見せるのも好印象です。

Lairdesign

カラフルなパントーンカラーを使ったシンプルなポートフォリオサイト。

作品紹介ページは3カラムでデザインされており、とてもすっきりとした印象です。

Sarah Longnecker

繊細なテクスチャ素材、立体的なリボン、型押し文字などさまざまなウェブトレンドをうまく取り入れたサイト。

動画が中心なのですが、ポップアップで魅せるところなどは参考にしたいところです。

Colagene

多数のイラストレーターさんの作品をグリッドを使ったすっきりとしたレイアウトで公開しているサイト。

ユーサビリティーもよく考えており、はじめて訪れたユーザーも迷うことなく作品をたのしむことができます。

Justin M. Maller

以前Photoshop VIPでもこちらで作品紹介させてもらったJustin M. Maller氏のポートフォリオサイト。

リキッド型の動きのあるレイアウトを使用しており、大きなサムネイルが作品を探しやすいです。

Les Illustrations de Lapin

手書きのイラストを全面に使ったやさしい色使いが魅力的なポートフォリオサイト。

作品を水平方向にずらずらっと並べているのですが、デザイナーの感性をよく表現しているサイトのひとつです。

Adaptd

レトロデザインを使ったデザインがユニークなサイトです。

色使いはもちろん、使用されているフォントなどもとても参考になります。

xgraphica

背景画像にウッドテクスチャを全面に使った温もりを感じるウェブサイト。

表示されている文字が多少見にくいのですが、アイデアは個人的にとても好きでした。

Digital Mash

これまでにも何度か紹介しているのですが、背景画像の透明感のあるデザインがユニークなサイト。

やさしい色使いと大胆なレイアウト方法はぜひ参考にしたいところです。

Work at Play

フラッシュを使った面白い動きを組み込んだデザインオフィスのウェブサイト。

これならクライアントなどにうまくデザインを伝えることができそうです。

MediaFlex

ヘッダー部分にHelveticaフォントを使ってスタイリッシュなダーク系ポートフォリオサイト。

Riot Industries

いろいろなまとめ記事にもたびたび登場する落ち着いた色使いが魅力的なウェブサイト。

作品を重視した見やすいナビゲーションもよいですね。

いろいろなポートフォリオサイトを見て感じたことは、

・　グリッドを使ってすっきりとした見やすいウェブデザイン

・　作品紹介に関しては、複数のイメージ画像を用意してスライドショーで魅せる

・　About Usを分かりやすく配置することで、連絡をとりやすいように配慮する

などがありました。

「自分でオリジナルのポートフォリオサイトをデザインしたい。」

という方は、「(海外記事) Photoshopでシンプルなポートフォリオサイトデザインをつくる方法」を参考にしてみるのもよいかもしれません。 

参照元サイトにはこれら以外にもたくさんの具体例が掲載されています。

よろしかったら、一緒にどうぞ。

[参照元 : 50 Inspiring Portfolio Design Inspiration - Web Design Ledger]

きらきらに輝くライティングエフェクトはフォトショップの中でも人気の高いチュートリアルのひとつです。

そんなライティング効果を簡単に表現することができ、収録数も50種類と豊富な「50 Lighting Effects Pack」を今回はご紹介します。

収録されているファイルには、50種類のPhotoshop用ブラシとJPEG画像がそれぞれまとめられています。

JPEG画像には、色付けもされているので、そのままデザインにレイアウトすることができそうです。

使用に関するライセンスも個人利用、商用利用ともに問題なく使うことができます。

簡単な使い方について以下で触れています、参考にしてみてください。

JPEG画像をデザインに合成する方法

Photoshopを使ってデザインする場合は、レイアウトしたJPEG画像の描画モードを「スクリーン」にしてみてください。

 これで、背景の黒部分のみが透明になり、うまくデザインと合成することができます。

JPEG画像に色づけをしたい場合は、新しいレイヤーを画像の上に作成し、お好みの色でペイントします。

つづけてペイントしたレイヤーの描画モードを「オーバーレイ」とすることで、自由自在に色を変更することができます。

Photoshop用ブラシに色付けをする方法 

---

次にPhotoshop用ブラシを使う場合は、背景がない代わりにブラシ自体はペイントする色に限られます。

きらきらに輝くライティングエフェクトをデザインしたい場合は、以下の手順で簡単に表現することができます。

１．黒などのダーク系の背景デザインを使うことで加工がうまくいきます。

２．背景レイヤーの上に新しいレイヤーを作成し、使いたいブラシを選択します。

３．明るい色を選択し、ペイントします。

4．ペイントしたレイヤーを複製し、メインメニューより「レイヤー」＞「レイヤースタイル」＞「カラーオーバーレイ」を適用します。

　　描画色「白」(#ffffff)で複製したレイヤーを塗りつぶします。

5．再度メインメニューより「レイヤー」＞「新規調整レイヤー」＞「彩度・色相」を選択します。

　　あとは、お好みで設定をいろいろ変更することでお好みの色のライティング効果をデザインすることができます。

以下は収録されているファイルのサンプルとなっています。

以下のボタンをクリックすると参照元サイトに移動します。

お好みでJPEGイメージ画像かPhotoshop用ブラシファイルの2種類を選択することができます。

以前ご紹介した記事に「デザインにも使える絵文字風フリーフォント30個まとめ」がありました。

絵文字風フォントは、文書や書類などを作成しているときに、アクセントとしてデザインを加えることができるのが特長です。

またアルファベットごとにデザインが振り分けられているので、スタンプ感覚で使うことができます。

今回は、「46 Cool & Useful Dingbat Fonts」より未紹介の絵文字風フリーフォントをいくつかご紹介します。

前回に比べ、花柄やオーナメント、シルエットといったフォトショップなどでもよく使われるデザインがたくさんまとめられています。

詳細は以下から。

デザインにも使える絵文字風フリーフォントまとめ

We Spray

ポップなアーバンデザインをまとめたフリーフォント。

ロゴなどを簡単に作成したいときなどに使えそうです。

BeatBox

古いラジカセをスキャンして取り込んだストリート色の強いフリーフォント。

いろいろな種類のラジカセが揃っています。

Border Corners

いろいろな模様でデザインされた「かど」部分に使えるユニークなフォント。

文章だけでは物足りないときなどにアクセントになりそうです。

Damask Dings

組み合わせて使うことで、紋章を作ることができるフリーフォント。

Adhesive Nr. Seven

よくデザインとして使われている立体的なリボンが揃ったフリーフォント。

リボン上に文字を打ち込むこともできそうですね。

Flower Ornaments

花柄を細かくデザインしたオーナメントのフリーフォント。

全部で９種類と数は少ないですが、クオリティーは高いですよ。

Floralia

デザイン性の高い花柄模様をスタンプ感覚で使えるフリーフォント。

種類の豊富さも魅力のひとつです。

Butterflies

タイトルどおり、いろいろなかわいい蝶々がまとめられたフリーフォント。

Birds of a Feather

鳥をモチーフにしたシルエットをまとめたフリーフォント。

Zoologic

小動物からキリンなどの大型動物まであらゆる動物のシルエットをまとめたフリーフォント。

個人的にもダウンロードしておきたいと感じたフォントのひとつです。

4Yeo Sport

テニスや野球などスポーツに関するシルエットが揃ったフリーフォント。

フォトショップのブラシでもあまり見かけないシルエットがいくつかありました。

Soldier WW2

第２次世界大戦をモチーフに作られた兵士のシルエットを集めたフリーフォント。

Efon

かわいいイラストをスタンプのように使えるフリーフォント。

文書などではアイコンとして使ってもいいかもしれません。

Dead Letter Office

郵便物に押されているスタンプをそのままひとつずつフォントにした便利なセット。

これはフォトショップのブラシ感覚で使うことができそうです。

作業しているパソコンにフォトショップが入っていない、そんなときに活躍してくれそうなセットが揃っています。

参照元にはこれら以外にも絵文字風フリーフォントがまとめられています。

よろしかったら、一緒にどうぞ。

[参照元 : 46 Cool & Useful Dingbat Fonts - Think Design]