本教程展示如何在PS中設計倒計時數字牌，如下圖所示
這種數字牌目前在很多場合都能看到，尤其是現在很流行的Android手機系統上也能看到一二
1. Setting up the Photoshop file
1、配置Photoshop文件
1.1. Create a new file (Ctrl + N). In the New file dialog box, set the Width and Height units to pixels (if it isn't already). Set the width to 500 and the height to 300 pixels. We're creating a graphic element for web, as mentioned above, so set the Resolution to 72 pixels/inch, color mode to RGB color, 8 bit and background contents to white.
1.1新建文件（Ctrl+N）。在新建文件的窗口上，設置寬度和高度的單位為pixels（如果不是pixels的話）。設置寬度為500，高度為300。要創建網頁上用的圖片元素，如上提及，分辨率設置為72像素/英寸，顏色模式設置為RGB顏色，8位。背景內容為白色
1.2. To unlock the layer, currently titled "background", double click on it and on appearance of a dialog window showing title as Layer 0, press ok.
1.2解鎖該圖層，當前的標題“背景”，雙擊該圖層，在出現的對話窗口上顯示的標題改為“圖層”，按確定
2. Adding color to the background (Layer)
2、添加背景顏色（圖層）
2.1. Select Layer 0 (if not already selected) and go to Layer > Layer Style > Gradient Overlay.
2.1選擇“圖層”（如果沒有被選中），然后點擊：圖層 > 圖層樣式 > 漸變疊加
2.2. Make sure the opacity is 100%, style is linear and angle is 90 degrees. Click on the gradient and in the Gradient Editor, add color stops in this order: #191d29 at 0% location, #616a71 at 60% and #a9afab at 100% location.
2.2如下圖設置圖層樣式，不透明度100%，樣式選擇線性，角度設置為90度。點擊漸變，在漸變編輯器窗口里，按順序設置顏色：在0%的位置上為#191d29，在60%的位置上為#616a71，在100%的位置上為#a9afab
3. Adding a white box
3、添加白色的方塊
3.1. Click and hold (without releasing) the Rectangle Tool to select Rounded Rectangle Tool.
3.1點擊並按住（不要松開）矩形工具，選擇圓角矩形工具
3.2. Choosing radius as 6 px, as shown above, create a rectangular box like the one shown below and rename it as "white-box" after double clicking the "shape 1” layer.
3.2設置半徑為6px，如上所示，創建一個圓角矩形（198，89，86，109），如下所示，改名為“白色方塊”，在雙擊形狀1圖層之后
3.3. With white box as selection, go to gradient overlay (as explained in step 2.1). Again, make sure the opacity is 100%, style is linear and angle is 90 degrees. Click on the gradient and in the Gradient Editor, add color stops in this order: #e1e1e1 at 0% location, #ffffff at 49%, #e1e1e1 at 51% location and finally, #ffffff at 100% location.
3.3在白色的方塊選中的時候，設置漸變疊加（像之前的步驟2.1）。再次，不透明度設置為100%，樣式設置為線性，角度為90度。點擊漸變，在漸變編輯器窗口里，按順序設置顏色：在0%的位置上為#e1e1e1，在49%的位置上為#ffffff，在51%的位置上為#e1e1e1，在100%的位置上設置為#ffffff。
3.4. In the same box as gradient overlay, look for Drop Shadow and Stroke. We have to select them too. Drop shadow settings: Opacity - 45%, distance - 2 px, spread - 0 px and size - 3 px. Stroke settings: Size - 1 px, position - inside and color: #ffffff.
3.4在漸變疊加的窗口上，找到投影和描邊。同樣如下圖設置。投影設置：不透明度為45%，距離為2px，擴展為0，大小為3px。描邊設置：大小為1px，位置為內部，顏色為#ffffff。
4. Adding Separators to the box
4、在方塊中添加分隔符
4.1. Click and hold the Rounded Rectangle Tool to select Line tool.
4.1點擊並按住圓角矩形工具去選擇直線工具
4.2. With weight as 1 px and color #90949c, draw a line horizontally middle across the white box, just enough to touch the edges widthwise, like shown in the pic below. Name it "dark-sep".
4.2寬度設置為1px，顏色為#90949c，在白色方塊中畫一條水平直線（198，143，86，1），正好觸及白色矩形的兩邊，如下圖所示，命名為“深線”
4.3. Right-click (ctrl-click in mac) "dark-sep" layer and select duplicate. Name it "white-sep". Press V on the keyboard to select Move tool, press bottom arrow to move "white-sep" downwards by 1 px and change it color to #ffffff.
4.3右擊“深線”圖層，選擇復制圖層。命名為“白線”，按鍵盤上的V選擇移動工具，按下方向鍵移動“白線”圖層下移1px，改變顏色為#ffffff
5. Adding text to complete the countdown
5、添加文本完成倒計時數字牌
5.1. Press T on the keyboard to select Text tool. We have chosen "Myriad Pro bold" in 80 pt size but feel free to select your favorite font here. Select the layer "white-box" and type in a digit or a letter in vertical and horizontal middle. We have typed in a 2.
5.1按鍵盤上的T選擇文字工具。選擇字體Myriad Pro bold，字體大小80pt，或者選擇你覺得合適的字體。選擇白色方塊圖層，居中輸入一個數字或文字。這兒輸入的是2.
5.2. With text layer as selection, go to gradient overlay (as explained in step 2.1). Again, make sure the opacity is 100%, style is linear and angle is 90 degrees. Click on the gradient and in the Gradient Editor, add color stops in this order: #2d2d2d at 0% location, #474747 at 49%, #2d2d2d at 51% location and finally, #474747 at 100% location.
5.2選中文字圖層，添加漸變疊加（像之前的步驟2.1）。再次，不透明度設置為100%，樣式設置為線性，角度為90度。點擊漸變，在漸變編輯器窗口里，按順序設置顏色：在0%的位置上為#2d2d2d，在49%的位置上為#474747，在51%的位置上為#2d2d2d，在100%的位置上設置為#474747。
Here we have our countdown ready for usage as an element in broadcasting, collaterals or user interfaces.
至此已經完成計時牌，可以用在廣告牌的元素，並列的元素，或是用戶界面元素。
Bonus Step - add reflection to the counter
獎勵步驟：添加數字牌的倒影
B.1. Select the layer "white-box" and duplicate this layer (step 4.3). Right click (ctrl-click in mac) and first select "rasterize layer" and then, "clear layer style" as shown below.
B.1選擇“白色方塊”圖層，並復制該圖層。右鍵選擇“柵格化圖層”，接着選“清除圖層樣式”
B.2. Press M on the keyboard to select Rectangular Marquee Tool and select the box 60% horizontally, from the bottom, like shown above. Go to Select > Modify > Feather and choose a feather radius of 20 px. We pressed "delete" 3 times to get the desired effect. You may choose as per your preference.
B.2按鍵盤上的M選擇矩形選擇工具，從下往上選擇豎直60%部分，如上所示。點擊：選擇 > 修改 > 羽化，選擇羽化半徑為20px。 按Delete鍵3次獲得理想的效果。你也可以按照你自己的想法設置
B.3. Press ctrl+d (cmd+d in mac) to deselect. Press V to go back to move tool and move the shape to the bottom of white box. Go to Edit > Transform > Flip vertical and change opacity of this layer to 20%.
B.3按Ctrl+D取消選擇。按V選擇移動工具，移動到白色方塊的下方。點擊：編輯 > 變形 > 垂直翻轉（注：這步好像是多余的）。設置不透明度為20%
Show us what you made!
這是我另外做的一個效果
