スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

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月の人気記事ランキング