ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

Homeフォトショップ講座 > コンテンツボックスの作り方

コンテンツボックスの作り方

投稿日:<2006年8月8日>   レベル:中級    ソフトウェア:PhotoShop


これがこのチュートリアルでの完成品になります。
チューとリアルででの完成品

ステップ1
新しいドキュメントを開いて、背景を白にします。新しいレイヤーを作成して、矩形選択ツールで、コンテンツボックスに手ごろな大きさの範囲を選択してください。そして、その領域を#8f8f8fカラーで塗ります。下の例を参考にしてください。

コンテンツボックスを製作


ステップ2
新しいレイヤーを作成して、先程作成した長方形を選択し、選択範囲>選択範囲を変更>縮小をおこないます。ここで、縮小量を10pixleに設定してください。そして、下のイメージのように、#f1f1f1カラーで塗ります。

新規レイヤー制作


ステップ3
さて、ここからコンテンツボックスに色々な効果を加えていきます。最初に、コンテンツボックスの輪郭を作っていきましょう。次の設定を一番大きなボックスに対して適用します。

コンテンツボックスに輪郭を適用

シャドウの設定

ストロークの設定

下のようになったと思います。

設定完了


ステップ4
では、内側のボックスにも手を加えていきましょう。レイヤーを選択して、次の設定をおこなってください。

内側のボックスも修正する

内側のボックスも修正(2)

内側のボックスも修正(3)


こうなりましたか?

コンテンツボックス完成

これで基本的な輪郭はできあがりました。


ステップ5
ここからは、リンクを含んだメニューを作成していきます。最もシンプルというわけではありませんが、ここでは私が作成した、次のようなメニューを使用します。

メニュー画像

これを複製して、コンテンツボックスの中に貼り付ければ完成です。テキスト部分は、必要なように変更してください。

完成です!!

これで完成

引用:Web Design Library著者:PicoDeath翻訳:atuk



スポンサードリンク

コメント

ランダム記事5件

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