ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

Homeフォトショップ講座 > Photoshopでウェブサイトのデザインを作る方法

Photoshopでウェブサイトのデザインを作る方法

投稿日:2010年04月02日   レベル:初心者    ソフトウェア:PhotoShop

このチュートリアルでは、ウェブサイトのデザインを作る方法を紹介します。

Step1:はじめに

800ピクセル×800ピクセルのドキュメントを作成して背景を黒くしたら、「#01afee」の色で長方形を作ります。
「Ctrl」+「T」キーを押して、次のように長方形を回転させます。

長方形を回転



Step2:スプラッターを追加

「スプラッターブラシ」かブラシセットをサーチエンジンで検索してダウンロードし、ランダムにスプラッターを入れます。
色は青と黒を使います。

スプラッターブラシ





Step3:タイトルを作成

文字ツール文字ツールでタイトルとスローガンを入力します。

タイトルとスローガン

上の画像のようにタイトルに色を2つ使う際は、使った色のスプラッターを加えます。
タイトルに黄緑を使う場合はスプラッターも黄緑にします。
すると次のようになります。

スプラッター



Step4:ナビゲーションを作成

文字ツールを使ってナビゲーションを追加し、自由変形ツール(「Ctrl」+「T」キー)を使って文字を回転させます。

ナビゲーション



Step5:セクションとコンテンツを追加

メインページに3つのセクション「news & updates」、「tutorials」、「latest projects」を加え、それぞれのセクションの横にアイコンを入れて、カスタムシェイプメニューから全部を選択します。

セクション

それぞれのセクションの下にコンテンツを加えます。

news & updates

partners

tutorials

latest projects



Step6:フッターを作成

それぞれのコンテンツを配置したら、異なる色を選択します。
ここではタイトルに使った黄緑を使って、ページの下に大きなスプラッターを加えます。

スプラッター

フッター情報を加えます。

フッター



Step7:スプラッターを追加

最後に、コンテンツの周囲へ黒いスプラッターを加えます。

スプラッター



Step8:完成

作業が終わると次のようになります。

完成
クリックして拡大



引用:Web Design Library 著者:Hv-Designs.co.uk 翻訳:菊池



スポンサードリンク

コメント

ランダム記事5件

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