ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

Homeフォトショップ講座 > PhotoshopでWordPressのログイン画面を作る方法

PhotoshopでWordPressのログイン画面を作る方法

投稿日:2011年12月27日   レベル:初心者    ソフトウェア:Photoshop

このチュートリアルでは、フォトショップでWordPressのログイン画面を作る方法を紹介します。

Step1:はじめに

フォトショップを使って、WordPressのログイン画面を作ります。
ここでは暗めの色にぼかしの背景を使い、生き生きした感じにしたいと思います。

チュートリアルにそって作業すると、シンプルなテクニックで細やかなデザインを使用としていることに気づくことと思います。
このテクニックはシンプルで使いやすいので見落とされがちです。

完成イメージです。

はじめに



Step2:ぼかしの背景をつくる

新しいキャンバスを開いてサイズを450ピクセル×300ピクセルにします。

レンズフィルター

作成したキャンバスに、このイメージ(右クリック−保存)をドラッグアンドドロップします。

レンズフィルター

「フィルタ」−「ぼかし」−「ぼかし(ガウス)」を選択して25.2%にします。

レンズフィルター





Step3:ログインフォームをつくる

角丸長方形ツール角丸長方形ツールの半径を3ピクセルに設定し、描画してから「#3a3a3a」で塗ります。
レイヤーを「本体」と名付けます。

色相・彩度

新規レイヤーを作成し、「ノイズ」と名付けます。
「ノイズ」レイヤーを選択した状態で「本体」レイヤーをクリックし、「#3a3a3a」で塗ります。
「フィルタ」−「ノイズ」−「ノイズを加える」を選択し、数値を1.5%に設定します。

顔の細かい箇所を白くする

新規レイヤーを作成し、「ヘッダー」と名付けます。
選択ツールで選択範囲を作り、「#000000」で塗ります。
「ヘッダー」レイヤーが指定された状態で「本体」レイヤーをクリックし、ヘッダーの上部の端を削除します。
その後、「Ctrl」+「Shift」+「I」キーを押し、「Delete」キーを押します。

顔の細かい箇所を白くする

「ヘッダー」レイヤーで、ブレンドオプションの「グラデーション」を次のように設定します。

顔の細かい箇所を白くする

続けて、細かい線を加えます。

顔の細かい箇所を白くする

新規レイヤーを作成し、「白い線」と名付けます。
一行選択ツールで1ピクセルの線を引き、「#ffffff」で塗ります。
不透明度を16ピクセルに設定します。

顔の細かい箇所を白くする



Step4:テキストを加える

テキストを加えます。
ここでは、27ポイントの「Bebas」フォントを使い、名前とパスワードを書きます。色は「#ffffff」にします。
ヘッダーのテキストは、24ポイントの「Arial」フォントを使います。

ブラシで目や唇、ネックレスを塗る



Step5:テキストフィールドをつくる

半径3ピクセルの角丸長方形ツール角丸長方形ツールを使い、次のように描きます。

眉毛とまつ毛を暗くする

ブレンドオプションの「シャドウ(内側)」で、ブレンドモードを「通常」に、色を「#565a63」に、不透明度を100%に、角度を90度に、距離とサイズを「1」に設定します。

トーンカーブ

グラデーションを、次のように色を設定します。

ブラシ

境界線は、サイズを1ピクセルにして色を「#302f2f」にします。

眉毛とまつ毛を暗くする

完成した入力フィールドを複製し(「Ctrl」+「J」キーを押して)、下側に移動してパスワードのテキストの隣に配置します。

眉毛とまつ毛を暗くする



Step6:チェックボックスをつくる

新規レイヤーを作成し、「チェックボックス」と名付けます。
選択ツールで小さな正方形を作ります。「#000000」で塗ります。

完成

チェックボックスのイメージにテキストを加えます。
ここでは13ポイントの「Arial Regular」を使い、色を「#ffffff」にします。
「Forgot Password」の色を「#686868」にします。

完成



Step7:ログインボタンをつくる

角丸長方形ツール角丸長方形ツールの半径を3ピクセルにし、上記のようにログインボタンを描きます。

完成

ブレンドオプションの「シャドウ(内側)」で、色を「#87FCCE」に、不透明度を「100%」に、距離とサイズを「1」に設定します。

完成

グラデーションの色を次のように設定します。

完成

グラデーションの不透明度を「100%」に、角度を「90度」にします。

完成

境界線の色を「#05743F」に、サイズを「1ピクセル」に、不透明度を「100%」にします。

完成

ログイン部分のテキストを、「Bebas」フォントの「23ポイント」に、色は「#05a056」にします。

ログイン部分のテキストのブレンドオプションで「ドロップシャドウ」を次のように設定します。

完成



引用:Web Design Library 著者:sanjaykhemlani.com 翻訳:菊池



スポンサードリンク

コメント

ランダム記事5件

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