ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

Homeフォトショップ講座 > Photoshopでポートフォリオサイトのレイアウトを作る方法

Photoshopでポートフォリオサイトのレイアウトを作る方法

投稿日:2010年09月03日   レベル:中級者    ソフトウェア:PhotoShop

このチュートリアルでは、ポートフォリオサイトのレイアウトを作る方法を紹介します。

Step1:長方形を描く

新規ドキュメントを800ピクセル×600ピクセルで作成し、背景色を#1f1f1fにします。
新規レイヤーを作成し、ページの左側に四角形を描いて#2d2d2dで色を塗ります。
同様に画面の上と下に四角形を描き、ファイルを保存します。
3つの四角形が別々のレイヤーに分かれていることを確認してください。

長方形を描く



Step2:境界線をつける

背景レイヤーの上のレイヤーをダブルクリックし、レイヤーオプションを開きます。
1ピクセルの黒い色の境界線を、不透明度30%に設定して追加します。
一番上のレイヤーをクリックし、Ctrl+Eを二度押して下のレイヤーを結合します。
「四角形の入っているレイヤーと背景のレイヤー」の2つが残ります。

境界線をつける





Step3:長方形の一部を消す

少しだけズームし、長方形選択ツール長方形選択ツールで四角形の端を削除します。
Shiftを押して、2つ目の選択範囲を四角形の両端に指定します。

四角形の両端を選択する

クリックして拡大

四角形の両端を選択し、Deleteを押します。

長方形の一部を消す



Step4:上に箱をつくる

新規レイヤーを作成し、レイヤー名を数字にします。
小さな箱を作り、#101010の色で塗ります。
数字の名前のレイヤーをダブルクリックし、レイヤーオプションを表示させます。
2ピクセルの黒い色の境界線を追加し、次のように配置します。

小さい箱をつくる

箱のレイヤーを複製し、複製した方のレイヤーを選択します。
Shiftを押しながら右矢印のキーを5回押すと、程よい間隔がつきます。
この作業を10回繰り返し、10個の箱を作ります。
その後、箱に1-10までの数字を入れます。

箱を配置する



Step5:左に箱をつくる

続けて、画面の左側に4つの箱を作ります。
レイヤースタイルは数字の入った箱と同じ設定にします。

左に箱をつくる

テキストを追加します。

テキストを追加する



Step6:さいごに

サイトのタイトル、スローガン、ロゴを追加します。
私は、メインギャラリーのイメージと小さめのイメージを追加しました。
あなたの想像力を発揮し、思い通りになるまで試してみてください。

ロゴなどを追加する

画像にインフォメーションボックスを追加して、文章を入力しましょう。
メインギャラリーイメージの隣に箱を作り、レイヤースタイルを設定します。
インフォメーションボックスと同じスタイルを設定し、1ピクセルの黒い色の境界線とドロップシャドウをつけて、ボックスにタイトルを入れてみました。

できあがったサイトは、こちらです。



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



スポンサードリンク

コメント

ランダム記事5件

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