ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

Homeフォトショップ講座 > PhotoshopでTwitterのコンテンツボックスを作る方法

PhotoshopでTwitterのコンテンツボックスを作る方法

投稿日:2009年07月31日   レベル:中級者    ソフトウェア:PhotoShop

このチュートリアルでは、PhotoshopでTwitterのコンテンツボックスを作ってみたいと思います。

Step1:はじめに

サイズ400ピクセル×400ピクセルの新しいキャンバスを作成します。

新しいキャンバスを作成する



Step2:コンテンツボックスを作る

角丸長方形ツール角丸長方形ツールで半径を8ピクセルにします。
次のように長方形を作ります。

長方形を作る

レイヤーにブレンドオプションを設定します。
レイヤーを右クリックしてブレンドオプションを選択したら次のように設定します。

ドロップシャドウを設定する

グラデーションオーバーレイを設定する

グラデーションエディタを設定する

すると次のようになります。

結果

角丸長方形の上側を薄く目立たせます。
角丸長方形のレイヤーで「Ctrl」キーを押しながらクリックして選択範囲を作ります。
新規レイヤーを作成して「#FFFFFF」で塗ります。
矢印キーで長方形を選択したら、選択範囲を数ピクセル移動させて、「編集」−「消去」を選択します。

角丸長方形の上側を薄く目立たせる

レイヤーの不透明度を約30%に設定したら次のようになります。

不透明度を30%に設定する



Step3:アイコンを追加する

Twitterのアイコンをコンテンツボックスに追加します。
次のアイコンを使います。

アイコンを追加する

アイコンファクトリーのアイコン

上側に配置します。

配置する



Step4:テキストを追加する

コンテンツボックスに見出しを追加します。
「Latest」に「#04a7ca」を、「Twitter」に「#f84c6c」を使い、フォントはhelvetica(ヘルベチカ)にします。

見出しを追加する

これからつぶやきを表示させます。
長方形選択ツール長方形選択ツールで、次のように選択範囲を作って「#FFFFFF」で塗ります。

#FFFFFFで塗る

レイヤーに次のようにブレンドオプションを設定します。

カラーオーバーレイを設定する

境界線を設定する

テキストを追加したら次のようになります。

結果



Step5:完成

コピーして残りの箇所にも同様に作業したら次のようになります。

完成


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



スポンサードリンク

コメント

ランダム記事5件

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