Link:INB Home|INB English| INB русский язык|INB العربية|INB Türkiye|INB فارسی|INB Español|INB Français|INB Português|INB Deutsch|INB 國語|INB 中文|INB 日本语|INB 한국어|INB ภาษาไทย|INB tiếng Việt||PS チュートリアルPhotoshop でウェブレイアウトを作成する方法
INB 日本語掲示板
ようこそ(産業・自然科学者)ここでは、工業化時代のファイティングスピリットに満ちている、あなたと私の両方を通してこのネットワーク空間の自国の生物学的精神科学者と狂気の所に来ました。ホームinbforum.com、永久の名前:jp-inb.forumotion.com
INB 日本語掲示板

ようこそ(産業・自然科学者)ここでは、工業化時代のファイティングスピリットに満ちている、あなたと私の両方を通してこのネットワーク空間の自国の生物学的精神科学者と狂気の所に来ました。ホームinbforum.com、永久の名前:jp-inb.forumotion.com


You are not connected. Please login or register

《《《《《《《上一页INBforum   Go down

上一页INBforum》》》》》》》前のトピックを表示 次のトピックを表示 Go down  メッセージ [Page 1 of 1]

1 PS チュートリアルPhotoshop でウェブレイアウトを作成する方法 on Fri Mar 18, 2011 11:55 am

Admin


Admin
このチュートリアルでは、Photoshopでウェブレイアウトを作ってみたいと思います。



Step1:はじめに

900x900の新規ドキュメントを作成し、階調の異なる2種類の濃いグレーを背景色/描画色に設定します。
次に、長方形選択ツール[You must be registered and logged in to see this image.]でカンバスの一番上に長方形を描き、線型グラデーションで上から下にドラッグして塗ります。
さらに、次のようなレイヤースタイルをその長方形に追加してください。
[You must be registered and logged in to see this image.]
[You must be registered and logged in to see this image.]
今のところこんな感じです。
[You must be registered and logged in to see this image.]




Step2:タイトル・キャッチコピーを入力する

横書き文字ツールでウェブサイトのタイトルとキャッチコピーを入力します。
[You must be registered and logged in to see this image.]
タイトルに次のようなレイヤースタイルを追加します。
[You must be registered and logged in to see this image.]
[You must be registered and logged in to see this image.]
【クリックして拡大】









Step3:ボタンを作成する

角丸長方形ツール[You must be registered and logged in to see this image.]を選択しヘッダーの下に小さな長方形を描きます。
[You must be registered and logged in to see this image.]
その小さな長方形に、下記のようなレイヤースタイルを追加してください。
[You must be registered and logged in to see this image.]
[You must be registered and logged in to see this image.]
[You must be registered and logged in to see this image.]
[You must be registered and logged in to see this image.]
小さな長方形はきれいなボタンみたいになったはずです。
[You must be registered and logged in to see this image.]




Step4:必要な情報を入力する

このボタンをウェブサイトに必要な数だけ複製して、ヘッダーの一番下に合わせて並べ、メニュー名を書き入れてください。
[You must be registered and logged in to see this image.]
【クリックして拡大】
ヘッダーを複製し、「編集」-「変形」-「垂直方向に反転」を適用し、
複製したレイヤーをカンバスの一番下に移動します。これがフッターになります。

横書き文字ツールでフッターに必要な情報を入力してください。
[You must be registered and logged in to see this image.]
【クリックして拡大】




Step5:コンテンツボックスを作成する

それでは、コンテンツボックスを作成しましょう。
長方形選択ツール[You must be registered and logged in to see this image.]で次のような2つのボックスを描いてください。
[You must be registered and logged in to see this image.]
次のようなレイヤースタイルを両方のボックスに適用します。
[You must be registered and logged in to see this image.]
[You must be registered and logged in to see this image.]
2つのボックスを上下に並ぶように配置してください。

こんな感じになっているはずです。
[You must be registered and logged in to see this image.]




Step6:コンテンツボックスを複製する

両方のボックスを複製して、それぞれ独立したコンテンツボックスを作成してください。
[You must be registered and logged in to see this image.]
【クリックして拡大】
全てのコンテンツボックスに見出しを付けてください。
[You must be registered and logged in to see this image.]
【クリックして拡大】




Step7:完成

これで出来上がりです。
コンテンツを加えれば下記のような感じになります。
[You must be registered and logged in to see this image.]
【クリックして拡大】





引用:Web Design Library 著者:hv-designs.co.uk 翻訳:幕澤]

ユーザーのプロフィールを表示 http://jp.inbforum.com

上一页INBforum   Go down

上一页INBforum前のトピックを表示 次のトピックを表示 トップに戻る  メッセージ [Page 1 of 1]

Permissions in this forum:
返信投稿: 不可

Copyright ©2009-2010 LTD Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

IT:SINGLESERVGoogle谷歌翻译TranslateFORUMSOFTLAYERGoogle谷歌广告联盟AdSenseAsia

 

Create a forum on Forumotion | © PunBB | Free forum support | 連絡先 - | Report an abuse | www.sosblog.com