Photoshop9-6 Photoshopでのデザインカンプ作成その6 で作成したファイルを開きます。
今回はコンテンツページを作るので、名前をportfolio2と変更して保存します。
コンテンツ2と3を非表示にしてコンテンツ1を修正していきます。
最初に、コンテンツ1のレイヤーマスクを削除します。
写真グループを開きます。長方形レイヤー２つを選択して拡大します。サイズは250%にします。
タイトルのテキストレイヤーのTをダブルクリックして文字の大きさを36pxのに変更します。
テキスト部分も同じように修正していきましょう。24pxにします。文章が足りない場合は、コピーして体裁を整えておきます。
今回は写真や文章をはっきり見せたいので、780px 500pxの白い長方形を描画します。
コンテンツ1グループの一番下に移動します。
このままでは、後ろのグラデーションとバランスが悪いので、不透明度60%にします。
横線もタイトルの下に配置していきます。大きさが足りないので、ctrl + D でWを200%にして移動します。
ここでもう一度配置を見直しましょう。
配置を整えたらコンテンツ1グループの名前をコンテンツ1ページと変更して保存します。
コンテンツ2と3も同じように修正して保存します。この時、コンテンツ1をコピーしてもいいですし、非表示のコンテンツ2や3を変更しても構いません。
実際の現場ではありません修正箇所を考えてより手間の少ない方法を取ります。
写真があるので、コピーするよりは、コンテンツ2を修正し、その後コンテンツ2をコピーし、タイトル名を変更し、写真のみ元のコンテンツ3から移動させて整えるほうが早いかもしれません。この際コピーしたグループなどの名前は修正してください。
コンテンツ2や3を配置するときは、作品1に合わせると作成しやすいでしょう。
最後にモーダルのデザインを作成します。
モーダルは角丸四角形で 幅350px 高さ450pxで作成します。半径は5pxで作成しましょう。
フォームの入力事項は
名前、メールアドレス、問い合わせ内容です。こちらも角丸四角形で作成します。
名前とメールアドレスの角丸四角形は W 300px H 30px 半径は5px 線の太さは1px 線の種類は細かい点線を選んでください。線の細かい設定は属性ウィンドウを使って修正できます。属性ウィンドウが見えない場合は、ウィンドウ→属性にチェックを入れると表示させることができます。
問い合わせ内容の角丸四角形は W 300px H100px 半径は5px 線の太さは1px 線の種類は細かい点線で作成します。
角丸四角形のレイヤーにモーダル外側、名前入力、メールアドレス入力、内容入力と名前をつけて、グループ化します。
テキストで「お名前」「メールアドレス」「お問い合わせ内容」と作成して配置します。テキストの文字フォントは 小塚ゴシックPro6NR 太さ R サイズ14px アンチエイリアスなしにしてください。
モーダルが完成したら、テキストレイヤー、角丸長方形レイヤーをグループ化して、モーダルと名前を変更しておきます。
次にレイヤースタイルを使ったボタンを作成します。（実際のモーダルないボタンはCSSで作成しますが、今回はPhotoshopの練習なのでボタンを作成します。）
角丸四角形ツールを選択し、 幅 100ｐｘ 高さ 40px 半径40px にします。色はいったん#333399にしておきましょう。
モーダル外枠と今作った角丸長方形レイヤーを移動させ、水平方向中央揃えを押して整えます。
角丸長方形レイヤーはボタンと名前を変えておきましょう。
文字ツールで フォントサイズ24px 太さB アンチエイリアス シャープにして、 「送信」 と入力します。
移動ツールで、ボタンレイヤーと送信テキストレイヤーを選択し、水平方向中央揃えで揃えます。
拡大ツールで200% にして、ボタンを作りこんでいきます。
ボタンの大きさを変更したい場合は、CC2014以降のバージョンでは、角の比率が保たれたまま拡大縮小できます。
CC2014 以前のバージョンの方は、パスコンポーネントツールを選択し、その後変形させると、円の角度を保ったまま大きさを変更することができます。
パスコンポーネントツールを使わず拡大や縮小させた場合、角の半径も変形してしまい、デザインが崩れる原因となります。
例）パスコンポーネントツールを選択後、移動ツールなどでバウンディングボックスを表示させ大きさを調整します。半径の比率を保ったまま横に伸びます。
制作現場で、Adobeシリーズのバージョンが最新バージョンではない場合も想定されますので、パスコンポーネントツールでの拡大、縮小を覚えておきましょう。
次にボタンをレイヤースタイルで装飾していきます。レイヤー→レイヤースタイル→グラデーションオーバーレイを選択します。
レイヤーの調整部分をクリックし、レイヤーのスタイルを変更します。
グラデーションエディーター画面が出たら、左下のカラー分岐点をダブルクリックしてカラーピッカーを表示させて、333399にします。
グラデーションスライダーの中の薄い部分にマウスカーソルをあてると、カラースポイトが表示されるので、そのままクリックします。
グラデーションスライダーの色が変わります。だいたい30%くらいのところをクリックします。新しいカラー分岐点ができるので、ダブルクリックします。もう一度333399を入れてOKをクリックします。
自然なグラデーションができました。（通常のグラデーションでは、立体感が出ないので、最初を薄く、中央を濃くする設定をしています。）
次にもう一度レイヤースタイルを追加していきます。境界線にもグラデーションを使ってみましょう。
レイヤー→レイヤースタイル→境界線を選択するか、ボタンレイヤーの右横 fx をダブルクリックして、境界線にチェックボックスを入れて選択します。
サイズ 1px 内側 グラデーションを選択し、グラデーションスライダーをクリックします。さきほどと同じようにグラデーションを作成し、最後に角度を90°にしてOKをクリックします。
拡大したままでは、画像がわかりづらいので拡大ツールでaltを押しながら100%に戻します。
最初のグラデーションオーバーレイで上部が白すぎると感じた場合は、グラデーションエディターで終点をクリックし、スポイトが出たら始点と同じ色にしてみるとグラデーションが変化します。
きれいなボタンができました。
以上でデザインカンプは完成です。しっかり保存してください。
次は、デザインカンプから実際に使う画像をスライスしていきます。