PhotoshopのWebサイトヘッダー

• かもしれません 6, 2024

このチュートリアルでは、PhotoshopでWebサイトのヘッダーを作成します^R Flashでアニメーション化します^R 触媒^TM。アニメーションは空の背景から始まり、デザイン要素がスライドインして、目の前にヘッダーを「構築」します。アニメーションは「ロード時」に開始するようにプログラムされ、数秒間続きます。このWebサイトのヘッダーは、事実に基づいたグリーティングカードビジネス向けです。

最初のステップは、Photoshopでヘッダーを作成することです。 Flash Catalystでデザイン要素を操作する準備として、各デザイン要素を独自のレイヤーに配置します。ご覧のとおり、6つの設計要素があります。

1.背景
2.ヘッダーの幅全体の下部バー
3.会社名
4.誕生日カード
5.パンプキンノートカード
6.クリスマスカード

1. Photoshopで新しいプロジェクトを始めましょう。幅を1000ピクセル、高さを225ピクセル、背景を透明に設定します。このサイズは、ウェブページの上部にうまく収まります。
   
   
2. アニメーションの開始時に表示される要素は、白い背景のみです。選択した背景色で画像の最初のレイヤーを塗りつぶします。レイヤーパネルで、このレイヤーの名前を「Background」に変更します。
   
   
3. 影付きのエッジを作成するには、Inner Shadow Layer Styleを使用しました。 [背景]レイヤーをダブルクリックし、[内側の影]の横のボックスをオンにします。距離とチョークを0に、サイズを49に設定します。
   
   
4. 次に、ストロークレイヤースタイルで画像の周りに細い境界線を追加します。 Colorを茶色（＃6e674f）、Sizeを2、PositionをInsideに設定しました。
   
   次に、カードを追加します。グリーティングカードのサイズを230 x 175ピクセルに縮小しました。これにより、ヘッダーのサイズに比例して保持されます。
   
   
5. カボチャカードをヘッダーにコピーして貼り付けましょう。新しいレイヤーに「Pumpkin」という名前を付けます。 [編集]-[自由変形]をクリックして、カードをわずかに右に回転させます。パンプキンレイヤーをクリックして、ドロップシャドウレイヤースタイルを適用し、デフォルト設定のままにします。
   
   
6. 誕生日カードとクリスマスカードの両方について、最後の手順を繰り返します。
   
   次に、ヘッダーの下部にバーを追加します。このバーの後ろにカードを入れて、棚の上のカードをエミュレートします。
   
   
7. 新しいレイヤーをレイヤーパネルに追加し、「Bar」という名前を付けます。
   
   
8. 長方形のマーキーツールを使用して、茶色の境界線のすぐ内側にあるヘッダーの下部領域を選択します。バーの色を選択し、この色で選択範囲を塗りつぶします。
   
   
9. レイヤーをダブルクリックし、背景レイヤーに行ったようにストロークレイヤースタイルを追加します。
   
   
10. Horizo​​ntal Typeツールをクリックして、ビジネス名のフォントを選択します。境界線の色と同じ茶色を使用しました。ヘッダーの左側にビジネス名を入力します。
    
    
11. この手順はオプションです。テキストをラスタライズします。テキストレイヤーを右クリックし、メニューから[ラスタライズタイプ]を選択します。
    
    
12. プロジェクトをPhotoshop .psd形式で保存します。
    
    

Copyright 2018 Adob​​e Systems Incorporated。全著作権所有。 Adobe Systems Incorporatedの許可を得て、Adobe製品のスクリーンショットを転載しました。 Adobe、Photoshop、Photoshop Album、Photoshop Elements、Illustrator、InDesign、GoLive、Acrobat、Cue、Premiere Pro、Premiere Elements、Bridge、After Effects、InCopy、Dreamweaver、Flash、ActionScript、Fireworks、Contribute、Captivate、Flash CatalystおよびFlash Paper米国および/またはその他の国におけるAdobe Systems Incorporatedの登録商標または商標です。

動画の説明: Photoshop（フォトショップ）で簡単にオシャレなヘッダーを作る手順動画 (かもしれません 2024).