ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

Homeフォトショップ講座 > Photoshopで画面が動くデジタル時計をデザインする方法

Photoshopで画面が動くデジタル時計をデザインする方法

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

このチュートリアルでは、Photoshopで画面が動くデジタル時計をデザインする方法をご紹介します。

Step1:時計の枠を作成

350x200の新規キャンバスを作成し、黒(#000000)で塗ることから始めましょう。
まずは時計の枠を作ります。キャンバス全体を選択し、「選択範囲」−「選択範囲を変更」−「境界線」を選んでください。
20ピクセルに設定します。(選択範囲が内側に20ピクセル移動します)

20ピクセルに設定

次に、ボックスの外側のエリアを選択して枠を作るため、「選択範囲」−「選択範囲を反転」を選びます。
これで20ピクセルの境界線が選択されます。
新規レイヤーを作成してください。
お好みの色で塗ってください。私はメタルフレームをイメージして濃いグレーを設定しますが、どんな色でも構いません。

ダークグレーに設定



Step2:レイヤーを設定

新規レイヤーを選択したまま、「レイヤー」−「レイヤースタイル」−「レイヤー効果」を選び、おしゃれなメタルフレームにするために次のような設定をします。

ドロップシャドウ

ドロップシャドウ

シャドウ(内側)
#CCCCCCの色を使ってください。

シャドウ(内側)

光彩(内側)
#666666の色を使ってください。

光彩(内側)

ベベルとエンボス

べベルとエンボス

輪郭
形状はガウスを使ってください。

輪郭

サテン
形状はローリングスロープ、色は#FFFFFFを使ってください。

サテン

グラデーションオーバーレイ
#CCCCCCから#666666へのグラデーションです。

グラデーションオーバーレイ

境界線

境界線

これが現在の枠です。

完成した枠



Step3:数字を入力

まず、横書き文字ツールを使って88:88とタイプしてください。

「デジタル/LCD」用のフォントを使う必要があります。私は「DS Digital」を使っています。
dafont.comから無料でダウンロードできます。サイズは123pxで色は#3d3d3dです。

フォントをダウンロード

タイプしたレイヤーを複製します。先ほどとは違う数字をタイプしてください。
例えば8:05です。私は目が痛くなる様な青(#04e3fd)を選んで使ってみます。
どんな色に設定しても構いません。

新しいレイヤーがグレーの数字に完全に重なるようにしてください。
さらに輝きを加えるには同じ青で光彩(外側)を少し適用してもいいですが、必須ではありません。

数字の入力

コンピュータに新規フォルダを作り、この画像を保存してください。
ファイル名は「1.jpg」にします。
これが最初の画像です。

1つ目の画像

次に、数字の間の青い点を消してください。(グレーのレイヤーはそのままにしておきます)

2つ目の画像

これが2番目の画像です。「2.jpg」という名前で「1.jpg」と同じフォルダに保存します。



Step4:アニメーションを設定

「ウィンドウ」−「アニメーション」を選択してください。

「ファイル」−「読み込み」−「画像をフレームに割り当てる」を選択して、2つの画像を保存したフォルダを選んでください。

アニメーションに下記の時間を設定してください。

アニメーションの設定

GIFファイルとして最適化して保存します。(アニメーションはGIFファイルとしてのみ保存できることにご注意ください。)



Step5:完成

完成です。

完成



引用:Web Design Library 著者:loreleiwebdesign 翻訳:幕澤



スポンサードリンク

コメント

ランダム記事5件

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