分享
 
 
 

用Photoshop打造小巧播放器(图)

王朝图像设计·作者佚名  2006-01-14
窄屏简体版  字體: |||超大  

无论你要设计一个应用程序界面、皮肤,或是一个播放器的外观,你会发现,这篇教程中的技巧对你来说都会合用。很明显,我不可能坐在这里,一个字一个字的敲出打造一个界面的所有步骤,因为有些实在是基础的基础。但是,我想,告诉你如何创造一些元件,对你设计一个美观的界面来说,还是有用的。

1.首先,新建一个合适大小的文档。这个例子中,我用的是500×500像素大小的文档,分辨率为72像素/英寸,背景为白色。

如果你觉得在偌大的空白画布上工作有些空荡荡的,那为什么不在图像中贴一副喜爱的壁纸或制造一个简单的背景呢?当然要保证作为背景的图像颜色非常淡,降低图层的不透明度是个好办法。(图01)

图01

2.现在开始绘制播放器的主要形状。在这篇教程中,我们想要制作的是一个小巧玲珑的播放器,形状尽量的简单。将前景色设为一种浅灰色#E5E5E5,在工具箱中选择形状工具中的圆角矩形工具,在工具栏中设定创建新的形状图层,圆角半径为50px,拖动鼠标,在图中绘制一个圆角矩形,形状如图02所示。

图02

采用矢量形状工具来确定圆角矩形的形状,除了方便之外,更重要的是,我们可以通过修改路径来编辑形状。点击图层剪贴路径缩略图以显示路径,用直接选择工具点击路径显示节点(图03)。

图03

用直接选择工具选择右上方的节点,点击方向键向上移动5次,即向上移动5像素;选择右下方的节点,向下移动5像素(图04)。

图04

接下来,用钢笔工具在如图位置上添加节点(图05),用直接选择工具选择上面新添加的节点,向下移动4像素;选择下面新添加的节点,向上移动4像素(图06)。隐藏了路径之后,你可以看到光滑的形状,这就是我们要打造的播放器的外形了。

图05

图06

提示:用矢量形状工具创建面板形状是个不错的主意。不但图像质量会提高,更重要的是,你可以随时编辑修改。

3.下面的工作是要给形状添加立体外观。我想使它呈现光滑的金属外观,我们通过图层样式来实现。当然,你可以用各式各样的方法来进行,但运用图层样式的话,以后遇到相同的情况就可以直接套用样式了。双击图层,我们开始运用图层样式:

选择渐变叠加,混合模式为正常,不透明度为10%,缩放为34%,其它保持默认;

选择光泽,将混合模式改为正常,颜色为黑色,不透明度为16%,其它保持默认状态;

选择斜面和浮雕,在结构中,仅将大小改为9像素,软化改为6像素,在阴影中,将角度改为90度,高度改为6度,暗调模式的不透明度为0%,其它保持默认;

选择内发光,混合模式改为正常,不透明度为21%,发光颜色为黑色,其它保持默认;

选择内阴影,将不透明度改为17%,角度为-87度,取消全局光,距离为5像素,阻塞为16%,大小为6像素,其它保持默认;

选择投影,不透明度为17%,角度为90度,距离为3像素,扩展为0,大小为3像素。

这样,播放器的面板就完成了。你可以将图层样式保存起来,下次再用。下面的任务是给面板上添加各种元素。(图07)

图07

4.选择圆角矩形工具,将前景色设为白色,依然按照刚才的设定,在面板层上新建一个小一些的圆角矩形层,添加渐变叠加样式,将不透明度设为49%,渐变为从白到黑,选择反向,缩放为93%,效果如图08。

图08

现在我们需要一个略小于我们刚才所建的黑色圆角矩形。复制刚才的形状图层,右键点击新的副本层,从弹出菜单中选择“清除图层样式”命令;双击图层缩略图,在拾色器中选择黑色,这样,新图层的颜色就变成了黑色。我们想使它稍微小一些,按CTRL+T,调出变形框,按住ALT,使缩放对称,稍稍向上拖动变形框的下边, 同样,按住ALT,向内拖动变形框侧边。如果觉得不合适,按ESC取消变形,按ENTER确定变形。(图09)

图09

我们依然用图层样式为之添加立体效果:

选择斜面和浮雕:深度为1%,大小为1像素,角度为90度,取消全局光,高度为80度,高光不透明度为47%,其它保持默认,在等高线选项中,选择消除锯齿,范围设为100%;

选择内发光,混合模式为正常,不透明度为96%,发光颜色为黑色,在图索选项中,设阻塞为20%,大小为3像素;

这样,你的图现在应该像下图一样(图10)。

图10

5.现在,我们来打造一个真正的 液晶 屏幕。下面你看到的过程会和上面的有些相似。

选择前景色为#86B7E7,使用圆角矩形工具,将圆角半径设为3像素,在黑色面板上绘制一个新的蓝色圆角矩形层,作为液晶屏幕的面板(图11)。

图11

它看上去太平板了,所以我们用图层样式修饰:

选择投影,将混合模式设为正常,颜色为白色,不透明度为30%,角度为-56度,取消全局光,距离为3像素,大小为1像素,其它默认;

选择内发光,混合模式设为正常,不透明度为41%,颜色为黑色,其余按照默认;

选择斜面和浮雕,深度为211%,大小为92像素,阴影角度为-90度,取消全局光,高度为45度,高光模式为颜色减淡,颜色为白色,不透明度为30%,暗调模式为颜色减淡,颜色为黑色,不透明度为0%;

选择描边,大小为1像素,颜色为黑色,图像现在如图12所示。

图12

下面的步骤可随意选择,不过我经常用它来为图像添加高光效果,就像它真的反射了光线一样。当然,要得到反光效果并不是只有这一种方法,但我觉得,这种方法创造的效果最为逼真。

首先,复制蓝色的液晶屏幕层,用右键菜单去除图层样式,用白色重新填充图层。按CTRL+T,变形形状图层,在屏幕上的工具栏中,将宽度设为97%,高度设为87%,确定变形(图13)。随后,在高及混合选项中,将填充不透明度降低为0,使其不可见。恢复默认前景背景色面板,并反转前景色和背景色,进入渐变叠加图层样式,将渐变设为前景色到透明,选择反向,将缩放设为123%,其余选项保持默认。这样,我们就得到了很好的高光,但仍有一些不够完美,我们来进一步修改高光。

图13

在高光层中,点击图层面板下的添加图层蒙版按纽,为高光层添加图层蒙版,蒙版缩略图夹在图层缩略图和图层剪贴路径缩略图之间。确定在图层蒙版中,选择钢笔工具,画出如图路径(图14),按CTRL+ENTER,将路径转化为选区,反选,将蒙版选区填充为黑色,取消选择,此时的高光层如图15所示。

图14

图15

选择合适的字体,为液晶屏幕添加显示数字(图16)。

图16

最后,需要你发挥一些想象力,再添加一些其它的按纽和零件,使其更完整,这个精致玲珑的播放器就完成了。(图17)

图17

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有