ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

Homeフォトショップ講座 > 細長いラインの入った、3Dのレトロなデザイン-デザインチュートリアル

細長いラインの入った、3Dのレトロなデザイン-デザインチュートリアル

投稿日:2015年7月24日   ソフトウェア:Photoshop

このチュートリアルでは、細長いラインの入った、3Dのレトロなデザインを作ります。

Step1:はじめに

次のような背景画像を用意しました。
もしご自身の画像を使う場合は、500x500で開いてください。

はじめに



Step2:細長いラインを作る

まず、細長いラインを作る準備をしましょう。
3Dに見えるように、あとでラインを折ることにします。
ペンツールを使って次のような設定で描いたので、同じように描いてみましょう。

細長いラインを作る

さらに色を追加していきましょう。
下のガイドに従って、ペンツールを使って、先ほどの内側に2つ目の色を追加しましょう。

細長いラインを作る

次のような色で、先ほどのステップを2回繰り返しましょう(レイヤーを複製してずらせば簡単です)。

細長いラインを作る





Step3:奥行きを作る

次は、奥行きの部分を作っていきます。ラインの右側に、ラインが折れる部分を作ります。同じペンツールを使って、次のように作成します。

奥行きを作る

表側のラインにやったように、色を追加していきます。
順番に気をつけます。
一番目にくるのは、明るい緑になります。

奥行きを作る

次の色も同じようにして色を付けます。

奥行きを作る

知っているかもしれませんが、暗い影をつければ、奥行きを感じるようになります。
影は次のようにしてつけます。
ペンツールを使わないですむように、元のラインのレイヤーを複製し、上側へ持って行って、不要な部分を削除します。
次のプレビューは不要な部分を削除する前の状態を表しています。

奥行きを作る



Step4:奥のラインを作る

同様にして、色のついたラインを複製し、奥のラインを作ります。今は、次のような状態になっているはずです。

奥のラインを作る



Step5:光の効果を加える

色を設定してラインを並べましたが、すでに3D効果を感じることはできます。
しかし、さらに光の効果を加えていきましょう。
複製し、色を白に変えて、ラスタライズします。
消しゴムツールを使い、直径を100pxにしてトップ以外の部分を消し去ります。
そうすると色あせたように見えます。
おわったら、オーバーレイを適用します。

光の効果を加える



Step6:完成

終わりました。 少し手を加えて、次のような感じになりました。

完成

これはかなり単純なチュートリアルです。
しかし、シンプルなのに効果的で3次元のように見えるポップなレイアウトを作る方法への導入としては、なかなかいいと思います。
このインスピレーションはモンスターテンプレートで見つけた次のレイアウトから来ています。

完成



引用:Web Design Library 著者:graffititools 翻訳:なかけん



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング