ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

Homeフォトショップ講座 > Photoshopを使って弁護士事務所風のウェブサイトを作る方法

Photoshopを使って弁護士事務所風のウェブサイトを作る方法

投稿日:2008年10月24日   レベル:中級者    ソフトウェア:PhotoShop
このチュートリアルでは、Photoshopを使って弁護士事務所風のウェブサイトを作ってみたいと思います。


Step1:背景を作成
760ピクセル×770ピクセルの新規ドキュメントを作ります。

背景色に「#282828」を選択します。

長方形ツールで、シェイプを2つ作ります。

背景を作成


Step2:サイドのベースを作成
同じツールで。別の小さなシェイプを作ります。色は白を選択します。

背景を作成

それから小さな白いシェイプのレイヤーの不透明度の数値を変更します。

背景を作成

すると次のようになります。

背景を作成


Step3:メインのベースを作成
大きな白いシェイプを選択して、レイヤーパレットを右クリックして、「レイヤーのラスタライズ」を選択します。

背景を作成

ブラシのセットをダウンロードできます。

背景を作成

Photoshopにブラシをロードします。

背景を作成

ブラシを新しいレイヤーに追加します(新規レイヤーを作るには、「Ctrl」+「Shift」+「Alt」+「N」キーを押します。)。
次の画像のように端に黒い色を加えます。

背景を作成

大きい白いシェイプを選択して、多角形選択ツールを使って次のように選択範囲を作ります。

背景を作成

「Delete」キーを押して、「Ctrl」+「D」キーを押します。

背景を作成


Step4:テキストとイメージを追加
次のステップはテキストとイメージの追加です。
簡単にできますので方法については説明を省略します。

背景を作成

自分にとってこのレイアウトはシンプルです。
長方形ツールでシェイプを追加します。
シェイプが白いレイヤーの上にあることを確認してください。

背景を作成

グレーのシェイプに次のレイヤースタイルを設定します。

背景を作成

背景を作成

背景を作成

すると次のようになります。

背景を作成

左側に素材集の画像を配置します。

背景を作成


Step5:装飾を追加
続けて楕円形ツールで円形のシェイプを作り、次のように配置します。

背景を作成

小さなシェイプ全部に次のレイヤースタイルを設定します。

背景を作成

背景を作成

ペンツールペンツールで、次のようなシェイプを作ります。

背景を作成

上のレイヤースタイルをこのシェイプにも設定します。
それからレイヤーを何度か複製します(選択したレイヤーを複製するには、「Ctrl」+「J」キーを押します。)。
作ったシェイプを配置すると、次のようになります。

背景を作成


Step6:完成
これで完成です。

背景を作成


引用:Web Design Library  著者:www.talk-mania.com 翻訳:菊池



スポンサードリンク

コメント

ランダム記事5件

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