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

今回はフォトショップを使って、ツルツルした質感のメタル文字をデザインする方法をご紹介します。

テキスト文字に関しては、フォトショップの便利な機能「レイヤースタイル」のみを使ってデザインされているので、はじめての方も簡単に作成することができますよ。

詳細は以下から。

チュートリアル情報

 プログラム : Photoshop

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

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

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

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

・　レイヤースタイルのみを使用した簡単テキストエフェクト

・　「逆光」フィルタを使ってキラキラ感を表現する方法

などがあります。

サンプル用PSDファイルダウンロード 

英語表記のチュートリアルとなりますが、あらかじめデザインされているサンプル用PSDファイルも無料公開されています。

 サンプルでレイヤーなどを確認しながらデザインすれば比較的簡単に完成させることができます。

ダウンロード詳細

ファイルサイズ : 2.6MB

ファイル形式 : psdファイル (zipファイルで圧縮されています。）

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

 今回のチュートリアルは特に難しいステップもなく、テキストスタイルを適用することで簡単にデザインすることができます。 

まずフォントを選び、適当な文字を入力しましょう。

太字スタイルのフォントを使うと、うまくテキストエフェクトかけることができます。

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

詳しいレイヤースタイルの設定については、サンプルPSDファイルまたは参照元サイトに記載されています。

レイヤースタイルすべて適用すると以下のようになります。

これだけでも十分かっこいいテキストエフェクトですが、さらにリアル感を出すために影を加えます。

新しいレイヤーを「文字レイヤー」の下に作成します。

次にレイヤーパレット上で、Ctrlキーを押しながら「文字レイヤー」のサムネイルをクリックし選択範囲を指定します。

選択範囲を描画色「黒」(#000000)で塗りつぶし、メインメニューより「フィルタ」＞「ぼかし」＞「ぼかし（移動）」を「角度86度」、「45px」で適用します。

ぼかしフィルタを適用したレイヤーを少しだけ右下に移動させましょう。

最後に光がキラキラ反射しているようなデザインを加えます。

新しいレイヤーを一番上に作成し、描画色「黒」(#000000)で塗りつぶします。

つづけてメインメニューより「フィルタ」＞「描画」＞「逆光」を選択し、レンズの種類を「ムービープライム」として適用します。

レイヤーの描画モードを「スクリーン」に変更し、再度メインメニューより「イメージ」＞「色調補正」＞「色相・彩度」を以下のように設定します。

このときに「色彩の統一」にチェックを入れるのを忘れないようにしましょう。

最終的にこのようなツルツルした光沢のあるメタル文字をデザインすることができました。

参照元サイトにはレイヤースタイルの具体的な適用値など確認できますので、よろしかったらこちらも一緒にいかがでしょうか。

また質感の異なるメタル文字のつくり方を以前紹介していますので、こちらも合わせてどうぞ。

どちらも日本語チュートリアルとなっています。

簡単！フォトショップで本物のような輝きがまぶしい銀色文字をつくる方法

Photoshop（フォトショップ）でメタリックな質感がすごい銀色文字をつくる方法

デザインにポップなストリートアートを加えたいとお考えですか。

今回はカラフルでかわいい手書き風イラストを100種類まとめた「Pimpin’ Pack Vector」をご紹介します。

収録されているファイルは、矢印やドクロマーク、ハート、ドクロマーク、王冠、ピストルなどユニークなアイテムをセットにしたベクターファイルです。

イラストレーターで編集可能なEPSファイルとなっているので、色の変更はもちろん、ベクターなので拡大縮小を思い通りにすることが可能です。

それぞれのベクターアートをフォトショップに移行して、デザインに加えることもできます。

300dpiのプリント可能な解像度となっており、アパレル関係、音楽関係などにも使うことができるのではないでしょうか。

ただし使用に関するライセンスは、Creative Common Licenseが発行されており、個人利用のみとなっていますのでお気をつけください。

以下は収録されているベクターファイルのサンプルとなります。

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

3種類のファイル転送サービスを使いダウンロードすることができますが、リンクが切れる可能性があります。

早めのダウンロードをオススメします。

ホームページやブログなどにおいて、リンクが切れいているときなどに表示される404ページ。

最近は404ページにもユーザーを混乱させない工夫、デザインがされているウェブサイトが増えています。

404ページにおいての使い方として、ひとつはメニューバーや検索ボックスなどを配置することで、ユーザーが探している情報を見つける手助けをする場合です。

そしてもうひとつはそのウェブサイトやデザイナーの個性を発揮することができるユニークなデザインを使う場合です。

今回はそんなユニークなデザインの「404-Page Not Found」ページを50個まとめた「50 Examples of Creative 404 – Page Not Found」をご紹介します。

どのサイトも他のサイトが真似することができない面白いアイデアばかりとなっています。

これを機会に自分だけの404ページをデザインしてみてはいかがでしょう。

詳細は以下から。

ユニークなデザインの「404-Page Not Found」まとめ

South Park Studios

人気アニメの公式ウェブサイトだけあって、キャラクターを使ったかわいいデザインですね。

Brizzard Entertainment

デスクトップ画面が割れた様なデザインが印象的。

大きくメニューを斜めにレイアウトしてあり、最新ニュース、会社情報などにアクセスできるようになっています。

Future of Web Design London

分かりやすい大きな404をデザインしています。

クリックするとホーム画面に戻るようになっています。

PopScreen

前のページに戻る、ホームに戻る、人気動画を見るなどユーザーが必要としているであろう情報をまとめています。

検索ボックスをつけるアイデアも個人的に好きです。

Gdzilla Smash Page

ページを開くとウェブサイトのキャラクターがユニークな動きをしています。

こちらもホームに戻るボタンを設置していますね。

Carsonfied

メニューボタンなどと一緒に問い合わせ先やtwitterへのリンクをまとめています。

ウィンドウ幅を無視したデザインレイアウトは参考になります。

Abduzeedo

よく紹介させていただいているブラジルのデザインサイトのひとつですが、こちらもホーム画面に戻る、タグを見るなどユーザーの行動に配慮したレイアウトに仕上がっています。

Henrik Hedegaard

デザイナーさんなどのポートフォリオサイトにはオリジナルキャラクターをデザインすることでユーザーにインパクトを与えることができそうです。

Tele2

ユニークな画像を使用することで、ユーザーの印象に残りやすくなります。

404ページにもフッターをレイアウトし、サイトマップとして使うことができます。

Pattern Tap

404ページを表示したときのユーザーの感情を表したようなユニークな画像が面白いサイト。

こちらもメニューバーを下部分に配置しています。

Blue Daniel

こちらはPhotoshop VIPの404ページと同様のフラッシュを使っています。

※音が出ますのでご注意ください。

SpringLoad

かわいいイラストを使って404ページをデザインしたウェブサイトのひとつ。

Apartment Home Living

404ページを表示してから時間差を使ったユニークなアイデアですね。

rbadini.com

こんなページならユーザーに驚きを与えることができそうです。

このほかにも参照元サイトにはいろいろなユニークな404ページがまとめられています。

アイデアの参考になるかもしれません。

[参照元 : 50 Examples of Creative 404 Page Not Found - Speckyboy Magazine]

世界的なブームにもなっているトイカメラをご存知ですか。

トイカメラをWikipediaで調べてみると、「トイカメラ（英: Toy Camera ）は、本体･レンズ等、ほぼ全体を構成する素材が合成樹脂等から作られ、組立の構成が比較的簡単な箱型で、安価なカメラ。」と記述されています。

(参考 : トイカメラ – Wikipedia)

もともと大衆的に広く使われるように安い価格で発売されれているトイカメラですが、同じ機種でも品質にばらつきがあり、撮影した風景と写真のギャップを楽しむことができます。

最近ではプロのカメラマンがトイカメラで撮影した写真のみで構成された写真集などが発売され、そこから徐々に人気に火がついたようです。

現在はトイカメラで撮影したような加工を加えることができるiPhone用アプリケーションなども開発、販売されています。

今回はフォトショップを使って、写真をトイカメラやポラロイドで撮影した様に加工するチュートリアルをまとめた「Uncovering Toy Cameras and Polaroid Vintage Effects (with Photoshop Tutorials)」をご紹介します。

詳細は以下から。

トイカメラやポラロイド風に写真加工するPhotoshopチュートリアルまとめ

■ Holgaのような写真加工と魚眼レンズテクニック

写真をトイカメラで撮影したように加工する方法

トイカメラブランドのひとつ「Holga」で撮影したような写真の縁をぼかすテクニックをほんの数ステップで完成させることができます。

Holga風に写真加工をする方法

こちらも上記チュートリアルと同様のエフェクト加工することができます。

解説用サムネイル画像も大きく分かりやすい説明が参考になりますよ。

普通の写真を魚眼レンズ（フィッシュアイ）風に加工する方法

こちらはYouTubeを使った動画チュートリアルとなっています。

4分ほどの短い動画で、操作もゆっくり行われているので英語が苦手な人にもオススメです。

魚眼レンズ風写真を簡単にデザインする方法

こちらのチュートリアルではあらかじめ魚眼レンズ風に魅せることができるPNG画像を配布しており、これを使うことで簡単にどんな写真でも加工することができます。

とてもシンプルなつくり方なので、個人的にも参考にしてみようと思います。

■ あえて写真を低画質に加工するテクニック

Vignetting

トイカメラで撮影した写真の特長のひとつで、写真の縁部分の光量が少なく暗くなったエフェクト（フォトショップではビネットと呼ぶらしいです。）をデザインする方法を紹介しています。

じつはPhotoshop VIPのサムネイル画像でよく使うテクニックのひとつでもあります。

写真にソフトフォーカスを簡単に加える方法

撮影した写真の色味やコントラストがいじる必要のない場合は、ソフトフォーカスエフェクトにすることでぼんやりとしたトイカメラ風加工することができます。

写真を歪めてトイカメラ風に加工するPhotoshop用アクションファイル

ボタンひとつで、トイカメラ特有の歪んだ画像をデザインすることができるアクションファイル。

これは色々なデザインに応用することができそうです。

アクションファイルのインストールについてはこちらをご覧ください。

写真に光が漏れた様な加工をする方法　パート1＆パート2

大衆用カメラとして生まれたトイカメラを使うと感光してしまった写真が撮れる場合があります。

そんな光の漏れ具合を自分でデザインすることができるチュートリアルです。

解説用サムネイル画像が少ないため、ある程度の英語力が必要になってくるかもしれません。

■　カラーと光の調整テクニック

写真をトイカメラ風のビンテージ加工する方法

ビネットエフェクトに簡単な色調補正を行うことでレトロ感たっぷりなデザインに仕上げることができます。

簡単なチュートリアルですので覚えておくと便利かもしれません。

トーンカーブをいじるだけで普通の写真をビンテージ風に加工する方法

フォトショップの便利な機能のひとつに新規調整レイヤーがあります。

この機能の中で写真の色味を変更することができる「トーンカーブ」を使って簡単にビンテージ風写真をデザインすることができます。

トーンカーブを使ったビンテージ写真加工の方法

こちらも上記と同様にトーンカーブのみを適用する簡単テクニックのひとつ。

トーンカーブは調節次第で写真の明るさ調整などにも使えるマルチな機能が魅力です。

どんな写真もビンテージ風に加工する方法

こちらも写真をビンテージ加工する方法が紹介されています。

手順をすべて保存してアクションファイルにしてみてもいいかもしれませんね。

■　テクスチャを重ねる簡単テクニック

ファインダー画像を重ねてビンテージ写真加工する方法

古いカメラを使って撮影しているようなエフェクトを簡単にデザインすることができるファインダー画像。

このチュートリアルでは実際にファインダー画像を重ねる方法を紹介しています。

ビンテージファインダー画像集　（Flickrグループより）

上記で使用したファインダー以外にもさまざまな種類を無料でダウンロードすることができます。

Flickrにこんなグループがあることすら知りませんでした。

紙テクスチャを使ったビンテージ写真の加工方法

テクスチャ素材を使った手軽に加工することができるチュートリアルが紹介されています。

テクスチャ素材を使ったビンテージ写真の加工方法

こちらは動画チュートリアルとなっており、ゆっくり手順ごとに解説しているので分かりやすくなっています。

写真をネガフィルム風に加工する方法

あらかじめデザインされたネガフィルムのPSDファイルをダウンロードして、画像をはめ込むだけで完成します。

複数の写真を違和感なく重ねる方法

簡易的な写真編集ソフトでは表現するのが難しいテクニックですが、フォトショップを使えば簡単にデザインできてしまいます。

複数の写真を違和感なく重ねるもうひとつの方法

こちらも同様のエフェクトを加えることができます。

■　ポラロイド風に写真加工するテクニック

写真をポラロイド風に加工する方法

こちらのチュートリアルでは4種類のポラロイド風写真加工チュートリアルがまとめてあります。

古い写真のようなノイズを加える方法

ビンテージ写真特有の汚れはPhotoshopブラシを使うことで表現しています。

その他の写真加工方法 

フォトショップの便利な機能「アクションファイル」をインストールすると、ボタンひとつでビンテージ、レトロ写真をデザインすることができるので、初心者の方にもオススメの加工方法です。

これまでにPhotoshop VIPで紹介したアクションファイルのまとめ記事を掲載しておきます。

こちらも試してみてはいかがでしょうか。

プロのような写真加工がクリックひとつ、Photoshopアクションファイル40個まとめ

アクションファイルのインストール方法が分からない方は、まずこちらを読んでもらうと分かりやすいかもしれません。

撮影した写真をビンテージ風に一発加工するフォトショップ用アクション80個まとめ

古い新聞をイメージしたようなデザインアクションは、あまり見かけませんね。

クリック一発でプロのような仕上がり、Photoshopアクションファイル70個まとめ

簡単なアクションファイルの使い方も一緒にまとめています。

「アクションファイルって？」という方はまずこちらの記事をどうぞ。

参照元サイトには、これらのチュートリアルのほかに各トイカメラの歴史などについても詳しく説明されています。

英語表記となりますが、サンプル写真などもとてもきれいですのでよろしかったら一緒にどうぞ。

[参照元 : Uncovering Toy Camera & Polarodi Vintage Effects (w/ Photoshop Tutorials - Smashing Magazine]

[サムネイル用写真提供 by babyabby10]

Photoshop VIPではフォントやデザイン、フォトショップに関する無料素材、チュートリアルなどをほぼ毎日公開しています。

RSS購読よろしくお願いします。（参考 : RSSって何ですか？）

ホームページやブログなどにおいてアイコンは、デザイン性、ユーサビリティにおいても重要なパーツのひとつとなっています。

特に人気の高いウェブサイトなどでは、使いやすく、初めてサイトを訪れてくれたビジターにも直感的に操作できるように親切設計がされています。

これまでにもいろいろなアイコンセットを紹介していますが、今回はホームページ、ブログなどを制作するときなどに使えるUIデザイン用アイコンセットをまとめた「Ultimate Roundup of Free User Interface Icons」をご紹介します。

一度紹介したことのあるアイコンセットも含まれていますが、どれもウェブサイト制作で使えるものばかりとなっています。

詳細は以下から。

UIデザイン用アイコンセットまとめ

Scalable Icons

全部で25種類のイラストレーターで編集可能なベクターファイルが収録されています。

このアイコンセットは個人、商用利用かかわらずまずデザイナーさんに許可を取る必要があります。

Free Vector Icons

型押し風にデザインされたシンプルでスタイリッシュなアイコンセット。

収録されているファイルにはPNGファイル以外にもフォトショップで編集可能なPSDファイルも一緒にまとめられているので、色の変更など簡単にできますよ。

Diagona Icons

200種類にも及ぶPNG画像でデザインされたアイコンが揃っています。

すべて10×10px、16×16pxとなっており、ミニアイコンとして使用することができます。

商用利用に関してはライセンスを購入する必要があるようです。

Free Web Develpment Icons

個人、商用に限らずどんなプロジェクトにでも使用することができるweb2.0風アイコンセット。

収録されているアイコンは全部で80個となっており、24×24pxのミニアイコンタイプ。

PNGファイルのほかに、icoファイル、tifファイル、gifファイル、bmpファイルが同梱されています。

Free Web Development Icon 2

こちらも24×24pxのミニアイコンタイプのアイコンセットとなっており、合計60個のアイコンを収録しています。

アイコン色を少し薄くしたバージョンも含まれているので、通常時、フーバー時など使い分けることができそうです。

Free Web Development Icon 3

動作を簡単に確認できるかわいいデザインのアイコンセットで、カラー、白黒バージョンの2タイプが用意されています。

Blogging Icon Set

ブログに必要と考えられるアイテムを12種類そろえた立体的なデザインのアイコンセット。

24×24、36×36、48×48pxの3タイプが用意されており、どれもPNGファイルに仕上げられています。

個人、商用どちらのプロジェクトでも使用可能となっています。

Funciton Icon Set

ウェブデザイン制作で便利なアイコンが128個揃っており、クレジットカード、ソーシャルメディアアイコンなども一緒にまとめているので、ダウンロードしておくと便利です。

またどのアイコンも細かくデザインされており、どんなデザインにもうまく合わせることができそうです。

One Bit Icons

企業用ウェブサイトなどで使われていそうな落ち着いたカラーリングが特長のひとつ。

全50個のアイコンが収録されており、個人、商用利用ともに問題なく使用することができます。

WIP　Web Iconset

個人利用のみとなりますが、質感がとても美しいアイコンセット。

ウェブサイトに必要なアイテムがまとめられています。

Iconic Project

ピクトグラムのようなシンプルなデザインが揃っているアイコンセット。

全部で14色の異なる色に変更することができ、サイズも8×8pxから32ｘ32pxの5種類から選ぶことができるので、色々なデザインに応用することができそうです。

Glossy Buttons

ツルツルとした質感を表現したい場合はこちらのアイコンファイルはいかがでしょうか。

33種類のアイコンが16×16pxから48×48pxまでの5種類でダウンロード可能となっています。

また個人、商用利用ともにOKなのもうれしいですね。

Snow Pack

あまり他では見かけないユニークなアイテムをデザインしたアイコンセット。

102種類のアイコンが収録されており、商用利用も可能となっています。

Orb Icons

思わずクリックしてしまいたくなるかわいいアイコンが全部で100種類揃っており、サイズも16×16pxと32×32pxに2タイプから選ぶことができます。

Mini Icon Collection

いろいろなパーツに使うことができて便利な113個のアイコンセット。

すべてグレイスケールでデザインされており、10×10pxのGIFファイルで収録されています。

MinIcons

30種類の細かくデザインされた高品質アイコンセットのひとつ。

スピーカーのデザインなど個人的に使いたいところです。

Adobe Creative Icons

Adobeシリーズを立体的にデザインしたユニークなアイコンセット。

アイデア次第で面白い使い方ができるのではないでしょうか。

256×256pxのPNGファイルとicoファイルがそれぞれ収録されています。

Bright Free Icon Set

光沢感たっぷりなデザインアイコンセットのひとつ。

あまり他では見かけないデザインのアイコンが多く、ウェブサイトなどで使うと直感的に分かりやすいデザインですね。

DelliPack 2.0

サムネイル画像以外にも合計15種類の立体的なアイコンセット。

アイコンサイズも大きいので、色々な使い方をすることができそうです。

Designers Icons

デザイナーさんにオススメしたいポップなデザインが印象的なアイコンセット。

すべてのアイコンはPSDファイルで配布されているので、フォトショップを使って色の変更なども自由に行うことができます。

Free Mobile Berries

モバイル用アプリケーションのためにデザインされた高品質な60個のアイコンセット。

64×64pxでデザインされ取り、どのアイコンもユニークでポップなカラーリングがナイス。

Glossy Vector Icons

ミニマルデザインのウェブサイトなどとの相性がよさそうなシンプルなアイコンセット。

全画面表示などの面白いデザインも収録されていますね。

Photo Editing App Icons

写真編集アプリのUIデザインに困ったらこちらがおすすめです。

細部まで作りこまれた高品質アイコンで他で見たことないデザインがポイントです。

個人的にダウンロードさせてもらったアイコンファイルのひとつです。

UIデザインアイコンに関連するまとめ記事

今回紹介したアイコン以外にも、Photoshop VIPではこれまでにもカテゴリー別にウェブデザインで使えるアイコンセットを紹介しています。

よろしかったら、こちらも一緒に合わせてどうぞ。

シンプルでオシャレなデザインに必要なアイコンセット15個まとめ

ミニマルなデザインのUIデザインをしたいときに使えるシンプルなアイコンをまとめています。

標識などに使われている絵文字「ピクトグラム」のアイコンセットいろいろまとめ

言語を使わずにデザインだけで理解することができるグローバルなアイコンが揃っています。

ウェブデザイナーやブロガーが持っておきたい、アイコンセット40個まとめ

UIデザイン用アイコン以外にもソーシャルメディア系アイコンも一緒にまとめています。

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

ピクトグラムデザインをアイコンを使わずにフォントで表現することもできます。

持っておくと何かと便利な絵文字風フォントをまとめています。

また無料ダウンロード「アイコン」コンテンツにもさまざまなアイコンファイルをご紹介しています。

こちらも覗いてみてはいかがですか。

Photoshop VIP >> 「アイコン」ダウンロードコンテンツ

参照元サイトにはこれら以外にもたくさんの高品質なアイコンセットがまとめられています。

もっとアイコンを探したい方などぜひ参考にしてみてはいかがでしょうか。

[参照元 : Ultimate Roundup of Free User Interface Icons - 1st WebDesigner]

デスクトップ壁紙最近変えてますか。

普段使っているパソコンのデスクトップ画面もお気に入り画像に変更するだけで気分的にもリフレッシュ、リセットしたような気持ちになりますよね。

今回はデスクトップ画像にしたくなる30枚のクールな無料画像とフォトショップチュートリアルをまとめた「30 Most Visually Stunning Wallpapers for Your Desktop + Tutorials」をご紹介します。

宇宙や自然もモチーフとしたかっこいい壁紙を探すだけでなく、フォトショップを使ってデザインすることができるチュートリアルも一緒にまとめられているので、「自分で壁紙をデザインしたい。」という方は参考にしてみると良いかもしれません。

詳細は以下から。

クールなデスクトップ壁紙に使いたい無料画像まとめ

紹介されていたクールなデスクトップ壁紙画像の中からいくつか印象に残るデザインをピックアップしてみました。

参照元にはこのほかにもたくさんの壁紙画像がまとめられていますので、よろしかったら一緒に合わせてどうぞ。

harbinger

A New Dawn

Moonshadow

Tropical Moon

Circumpolar

First Snow

Edge of Precipice

Field of Art

Valentinka

The Rise of a Planet

Collab: Nightly Journey

A New Era

Artificial

デスクトップをデザインするPhotoshopチュートリアルまとめ

上記にまとめられたような宇宙や自然をモチーフにしたデスクトップ壁紙をデザインすることができるフォトショップチュートリアルもいくつかまとめています。

多少難易度の高いチュートリアルも含まれていますが、いくつかのデザインに関しては、Photoshop VIPにおいて日本語チュートリアルとして紹介しています。

写真合成で砂漠にそびえる都市をデザインする方法

複数の写真を合成することで、砂漠にぽつんと出現した都市をデザインします。

またライティングエフェクトを使ったキラキラに輝くビーム光線のデザイン方法なども学ぶことができます。

（難易度 : ★★★）

宇宙船が地球に襲来したようなデザインをつくる方法

タイトルのままですが、宇宙船なども身近にあふれる素材をミックスしてデザインします。

特にライティング効果を最大限に引き出すレイヤーの描画モード設定方法はとても参考になります。

多少の英語力が必要かもしれません。

（難易度 : ★★★）

インパクトのある青空をデザインに使ったファンタジー画像のつくり方

こちらも写真合成を中心としたフォトショップチュートリアルのひとつ。

カラーバランスなどの調整レイヤーを用いることで、カラフルなデザインに仕上げています。

（難易度 : ★★★★）

英語による動画チュートリアルも公開されており、ステップ毎に解説されているので分かりやすくなっています。

カラフルに輝くアブストラクトポスターをデザインする方法

Omega Codeという音楽バンド用ポスターをフォトショップでデザインします。

多数のカラフルな色を使い、フィルタ機能を駆使することでキラキラなデザインを完成させます。

サンプルPSDファイルも公開されているので、参考にするとよいでしょう。

（難易度 : ★★★）

まぶしい程にキラキラな惑星をゼロからデザインする方法

惑星にテクスチャ素材を使うことで、見た目以上に簡単にデザインすることができるチュートリアルのひとつ。

レイヤースタイルをうまく適用することでまぶしい光を描くことができ、ペンツールの使い方などにも注目したいところです。

（難易度 : ★★★）

スラム街みたいな廃墟と化した都市をデザインする方法

こちらも複数の写真を合成することでデザインをまとめているチュートリアルのひとつ。

ただしフォトショップだけでなく3D作成アプリケーションが必要な高度なチュートリアルでもあります。

（難易度 : ★★★★★）

写真合成によるファンタジーな風景をデザインする方法

ナイアガラの滝の様な迫力のある風景に古びた中世ヨーロッパ風の城を写真合成していきます。

滝のデザインにも複数のシーンを盛り込むことでダイナミックなデザインに仕上げることができます。

（難易度 : ★★★★）

こちらも動画チュートリアルが公開されているので、参考にしてみるとよいかもしれません。

「Back To Space」ケーススタディ

チュートリアルではありませんが、絶妙なグラデーションカラーを使用したデスクトップ壁紙デザインの工程をたくさんのサムネイルで確認することができます。

デザインにおけるレイアウトなどの参考になりますよ。

フォトショップで海外ドラマ「Heroes(ヒーローズ)」のロゴをつくる方法

以前日本語で解説させていただいたフォトショップチュートリアルとなります。

（難易度 : ★★）

フォトショップでオーロラが輝く地平線に太陽が沈む様子を描く方法

こちらも以前Photoshop VIPで日本語チュートリアルとして紹介していますのでぜひ参考にしてみてはいかがですか。

（難易度 : ★★★）

未知なる力を秘めた宇宙をモチーフにデザインされた数々のクールな無料画像＆チュートリアルばかりでした。

お暇なときにでも壁紙変えてみてはいかがでしょうか。

参照元サイトには今回未紹介の壁紙画像などがたくさんまとめられています。

ぜひこちらも一緒に合わせてどうぞ。

[参照元 : 30 Most Visually Stunning Wallpapers for Your Desktop + Tutorial - Richworks]

新品よりも使いこむことで味わい深い色合いに変化していくレザーテクスチャは、人気ファブリックのひとつでもあります。

ウェブデザインなどでもよく使われるテクスチャ素材で、エレガントで豪華な印象に仕上げることができます。

今回はいろいろな色のレザーテクスチャを9枚まとめた「Leather Texture Pack」をご紹介します。

収録されているファイルは全部で9種類となっており、最高で2000×3000pxの高画質テクスチャ画像となっています。

レザー特有の質感を最大限に引き出したファイルばかりとなっており、いろいろなデザインに応用することができそうです。

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

以下は収録されているテクスチャ素材のサンプルとなります。

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

コメント欄の真上に「Download Source File」と記載された部分よりダウンロード可能です。

映画のタイトルに使われているフォントは、どれも映画のテーマに合わせてデザインされたオリジナルフォントの場合がほとんどではないでしょうか。

そんな映画のタイトルをパロディしたようなロゴデザインを見かけることがありますよね。

 多くの場合は、それらのロゴをモチーフにデザインされたフォントを使用しています。

今回はそんな映画のタイトルに使われているフォントを忠実に再現したフリーフォント26個をまとめた「26 Hot Free Fonts Inspired by Movies」をご紹介します。

映画タイトルに使われているフォントをまとめていますが、このほかにも有名ブランドなどのロゴをパロディしたフリーフォントも以前「あの有名ブランドや映画のロゴをモチーフにしたフリーフォント、20種類あつめました。」でまとめています。

こちらも一緒に参考にしていただくとよいかもしれません。

（参考記事 : あの有名ブランドや映画のロゴをモチーフにしたフリーフォント、20種類あつめました。)

詳細は以下から。

あの映画タイトルに使われているフリーフォントまとめ

Caribbean Regular

Van Helsing

The Sixth Sense

The Incredibles

Turtles Normal

Swordfish

Scream Real

Monster AG

Gremlins

Ghostbusters

Finded Nemo

BatmanForeverAlternate

Catwoman

Buffied

Adveture Normal

a bug’s life

あまり関係はないのですが、先日行われたアカデミー賞の短編アニメーション部門の受賞作品「Logorama」では、数多くの有名ブランド、映画タイトルなどを使った素晴らしい作品となっています。

やはりロゴの与えるインパクトは大きいですね。

また参照元サイトにはこれら以外にもいろいろな有名映画をモチーフにしたフリーフォントがまとめられています。

こちらもよろしかったら、あわせて一緒にどうぞ。

[参照元 : 26 Hot Free Fonts Inspired by Moveis - Denis Designs]

以前「テクスチャ素材を使ったウェブデザインの参考になるウェブサイト60個まとめ」 をご紹介しましたが、まだまだテクスチャを使ったきれいなウェブサイトはたくさんあります。

ウェブデザインにおいてテクスチャ素材を使用するポイントとして、ヘッダーやフッターなど部分的にデザインとして加える場合と背景画像としてウェブサイト全体に使用している場合があります。

また使用するテクスチャ素材によってデザインもさまざまです。

今回はテクスチャ素材を使ったオシャレできれいなウェブサイト50個をまとめた「50 Inspiring Textured Web Designs」をご紹介します。

多くのウェブサイト、ブログがテクスチャを使ってユニークなデザインに仕上げており、ウェブデザインの参考になりそうなものばかりとなっています。

詳細は以下から。

テクスチャ素材を使ったオシャレできれいなウェブサイトまとめ

The Walk to Washington

フォトショップを使い、ダーク系ウェブデザインにウッドテクスチャを使用している具体例です。

サイトのテーマカラー「水色」を効果的に使うことで、全体をすっきりと見せています。

先日紹介したモノクロ調ウッドテクスチャを使えばデザイン可能かもしれませんね。

The I-Heart Revolution Film

ヘッダー部分にレトロ感あふれる写真を並べて、各パーツをグランジデザインでまとめています。

レトロデザインとグランジデザインの相性はやはり鉄板かもしれません。

写真加工にはこちらのアクションファイルがオススメですよ。

Giant Ant Media

灰色をベースとした「壁」をモチーフにデザインされたウェブデザインのひとつ。

背景画像としてテクスチャ素材を使っており、手書きデザインとうまくはまっています。

AdFlavor

エレガントで落ち着いた雰囲気をデザインしたい場合はこちらのデザインはいかがでしょう。

ウッドテクスチャを使うことで全体を茶色でまとめ、クリーム色のテクスチャと合わせてデザインされています。

Voice of Haiti

壊滅的な被害を受けたハイチの現状を伝えるウェブサイト。

こちらも背景画像として、テクスチャ素材を画面いっぱいに使用しています。

ダーク系ウェブサイトをデザインするときは、背景を真っ黒にするのではなく、このようにテクスチャを加えてあげることで質感がアップしますね。

Infinitum

余白スペースをうまく使ったシンプルなウェブサイトのひとつですが、よく見ると背景は「白」ではなく、ざらざらとした質感のテクスチャを使用しています。

このさりげなさにデザインセンスを感じます。

Jeroen Homan

シンプルなテクスチャを使ったウェブサイトならこちらもオススメです。

ヘッダー部分に大きなタイポグラフィーを使っているのですが、ウェブデザイン全体がうまくまとまっています。

Swiths

机の上をモチーフにしたユニークなデザインが魅力的なウェブサイトのひとつ。

フッター部分にもユニークなデザインがされていますよ。

Eric Campbell

フラッシュで作成されているウェブサイトですが、背景の美しいグラデーションと使われているフォントのバランスがとてもナイス。

どのフォントを使っているのでしょうか、気になります。

Harmony Republic

水彩画デザインを使ったウェブサイトに紙テクスチャを使うことで、実際カンバスにデザインされているように仕上げることができますね。

Darling Tree

パステルカラーを基調としたウェブデザインにはシンプルなテクスチャがとてもよくはまります。

背景画像にテクスチャ素材を使うことで、よりユニークなウェブデザインを完成させることができそうです。

Frisk Web

ダンボール用紙のテクスチャに手書き風フォントを加えることで、ポップで親しみやすい印象を与えてくれるウェブサイトのひとつ。

ポートフォリオサイトをデザインするときなどに参考になるのではないでしょうか。

こちらもフッター部分がユニークなデザインに仕上がっていますよ。

Pixel Thread

背景画像にコケの生えたウッドテクスチャを使い、ボディ部分をポスターのように魅せたデザインのひとつ。

よく使われているデザインですが、ウィンドウ幅に関係なくデザインをすっきりとまとめることができますね。

Corvus

ヘッダー部分に淡い色合いの水彩画風のベクターアートをデザインしたウェブサイトのひとつ。

ヘッダーとフッターのデザインを合わせることで、本文をより強調することができそうです。

Think Up

フォルダを開いて閲覧しているような錯覚がたのしめるウェブサイトのひとつ。

毎日更新しているブログなどには不向きかも知れませんが、クリエイティブなデザインです。

Designfabrika

ランダムに並べられたウッドタイルとカラフルな虹色を組み合わせたポートフォリオサイト。

Inspire Worship Conference

ウッドテクスチャに半透明のデザインを使っており、背景画像が透けて見えるユニークなサイト。

こういう使い方は今後増えてくるのかもしれませんね。

落ち着いた配色も個人的に好みです。

どのサイトも他にはないユニークなデザインが印象的です。

背景画像にテクスチャを使う場合、あまり個性の強いテクスチャだと読みづらくなる可能性もあり、紙テクスチャなどのシンプルなテクスチャが多く使われているように感じました。

このほかにも参照元サイトには、オシャレできれいなウェブサイトがたくさんまとめられています。

よろしかったら、こちらも一緒にいかがですか。

[参照元 : 50 Inspiring Textured Web Designs - Web Design Ledger]

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

今回はフォトショップを使って、光沢感たっぷりなツヤツヤ文字をデザインする方法をご紹介します。

特に難しい手順もなく、フォトショップの便利な機能のひとつ「レイヤースタイル」を適用する簡単なチュートリアルとなっていますので、どなたでも気軽にチャレンジすることができます。

ロゴデザインなどで使えば、デザインが映えそうなテキストエフェクトですので、これを機会につくり方を覚えてみてもいいかもしれません。

サンプル用PSDファイルも無料でダウンロードできるので、実際のデザインを確認しながらデザインすることができます。

詳細は以下から。

チュートリアル情報

プログラム : Photoshop

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

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

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

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

・　レイヤースタイルを適用したテキストレイヤーを重ねて立体的なテキストエフェクトを完成

・　ツヤツヤ感を出すために「覆い焼きカラー」を使ったトリック

などがあります。

サンプル用PSDファイルダウンロード

英語表記のチュートリアルとなりますが、あらかじめデザインされているサンプル用PSDファイルも無料公開されています。

 サンプルでレイヤーなどを確認しながらデザインすれば比較的簡単に完成させることができます。

ダウンロード詳細

ファイルサイズ : 700KB

ファイル形式 : psdファイル (zipファイルで圧縮されています。）

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

今回はあらかじめ用意された壁紙の上にテキストエフェクトを完成させます。

もちろん壁紙はお好みのものでもかまいませんが、青色系の壁紙を使うことでよりツヤツヤ度をアップすることができますよ。

「ダウンロードしておきたい25個の高品質な筆記体フリーフォント完全まとめ」で紹介したBallpark Weinerフォントを使ってデザインします。

適当な文字を入力したら、「文字レイヤー」を複製しましょう。

一番上に配置されているレイヤーを「非表示」として、下のレイヤーからまずレイヤースタイルを適用していきます。

メインメニューより「レイヤー」＞「レイヤースタイル」を選択し、順番にエフェクトを適用していきましょう。

細かい設定はサンプルPSDファイルで適用されている値を参考にしても良いですし、以下のサムネイルをクリックすると拡大表示されます。

レイヤースタイルを適用することで以下のようになります。

先ほど「非表示」にしておいたレイヤーを「表示」して、こちらの文字レイヤーにもレイヤースタイルを適用します。

ここまでレイヤースタイルをうまく適用すると、以下のようになると思います。

出来上がった2つの文字レイヤーをひとつのフォルダに格納して、フォルダの描画モードを「覆い焼きカラー」としましょう。

これがライティングエフェクトを加えたような透明感を出すポイントとなります。

レイヤーパレット上で、Ctrlキーを押しながら、どちらかのテキストレイヤーのサムネイルをクリックすると、選択範囲が指定されます。

続けてメインメニューより「選択範囲」＞「選択範囲を反転」を適用します。（Ctrlキー＋Iがショートカットとなります。）

新しいレイヤーをフォルダの中の一番下に作成し、メインメニューより「レイヤー」＞「レイヤーマスク」＞「選択範囲外をマスク」を適用します。

あとはツールボックスより描画色「白」(#ffffff)のソフトブラシを使って、少しずつペイントしましょう。

レイヤーの「不透明度」や「塗り」を調節するのも忘れずに。

以下のサムネイルをお手本にペイントしていきましょう。（分かりやすいようにテキストレイヤーを非表示にしています。」

完成

レイヤースタイルとソフトブラシを少し使ってペイントするだけの簡単なテキストエフェクトをご紹介しました。

参照元サイトでは、このほかにも高品質なフォトショップのテキストエフェクトのみを紹介しています。

ウェブデザインもすっきり見やすいので、一度覗いてみてはいかがでしょうか。