PS网页设计教程——小贴士:五步在PS中创建倒计时数字牌

简介:

本教程展示如何在PS中设计倒计时数字牌,如下图所示

image

 

这种数字牌目前在很多场合都能看到,尤其是现在很流行的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位。背景内容为白色

 

image

 

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解锁该图层,当前的标题“背景”,双击该图层,在出现的对话窗口上显示的标题改为“图层”,按确定

image

 

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

image

image

 

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图层之后

image 

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。

image

image

 

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。

image

image

 

image

 

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),正好触及白色矩形的两边,如下图所示,命名为“深线”

image


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

image

 

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.

image

image 
 

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。

image

image

image

 

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次获得理想的效果。你也可以按照你自己的想法设置

image

 

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%

image

 

Show us what you made!

这是我另外做的一个效果

image



    本文转自万仓一黍博客园博客,原文链接:http://www.cnblogs.com/grenet/archive/2012/08/24/2653798.html,如需转载请自行联系原作者

相关文章
|
Shell C#
Photoshop-Beta智能版ps安装教程
Photoshop-Beta智能版ps安装教程
699 0
|
5月前
|
编解码
网页设计稿一开始画稿怎么设,为何PS保存出来的图片大小和电脑上看的不一样
网页设计稿一开始画稿怎么设,为何PS保存出来的图片大小和电脑上看的不一样
PS设计稿如何与网页设计稿相匹配
PS设计稿如何与网页设计稿相匹配
ps人像磨皮教程Portraiture2023宿主插件下载使用教程
磨皮是人像处理时必不可少的一个步骤,使用ps磨皮的方法有好几种,比如常用的图章磨皮,当然也有用插件进行快速磨皮的。作为一款鼎鼎大名的智能型磨皮插件,Portraiture磨皮功能是懒人的福音!不必进行蒙版绘制、不必进行通道计算,自动就能完成皮肤、头发、眉毛等区域的磨皮处理,而且效果感人,任你用放大镜都看不出磨皮痕迹。
316 0
ps2022软件下载安装教程——mac版本全版软件下载安装包教程
ps2022软件下载安装教程——mac版本全版软件下载安装包教程
296 0
|
计算机视觉
ps软件2021版本下载安装教程-PS全版本最新版本软件安装包
ps软件2021版本下载安装教程-PS全版本最新版本软件安装包
171 0
获得PS2023软件和Photoshop2023插件神经滤镜的方法下载教程
ps是软件photoshop的简称,该软件以处理像素构成的数字图像为主,其中包含众多的编修以及绘图工具,能够有效完成各项图片的处理工作,满足日常所需。在网络上,ps逐渐成为p图软件的统称,另外,ps还有备注的意思,常常用来表示附言、附录等。最新版Photoshop 2023是一款图片编辑软件,PS 2023中文版帮助你组合、修饰和重新混合您的照片,为您的旧黑白添加新颜色,或者让不需要的东西消失,也或者将无聊的背景变成异国情调的天堂,功能强大。
667 0
|
7月前
|
Linux
百度搜索:蓝易云【Linux系统ps命令:查看正在运行的进程】
通过这些简洁的ps命令用法,你可以方便地查看Linux系统中正在运行的进程信息。
90 1
|
7月前
|
安全 Linux 应用服务中间件
linux(三十一)系统信息命令ps查看系统进程
linux(三十一)系统信息命令ps查看系统进程
229 1
|
7月前
|
存储 监控 Linux
【Shell 命令集合 系统管理 】⭐⭐⭐Linux 查看当前正在运行的进程信息 ps命令 使用指南
【Shell 命令集合 系统管理 】⭐⭐⭐Linux 查看当前正在运行的进程信息 ps命令 使用指南
130 0