首页 > 教程 > 关键词 > 界面设计最新资讯 > 正文

ps教程!教你打造一枚简约音乐播放器

2015-06-05 11:02 · 稿源:UI中国

用PS中的矢量形状以及图层样式打造精致的音乐播放器组件。

界面设计一定要保持简约,保证原汁原味的内容,一眼即知的操作方式。

音乐组件

通过本文,你将学习到:如何使用PS图层样式添加流畅精致的质感;如何打造细腻的渐变,让组件看起来栩栩如生;如何设计交互性优秀的组件按钮。

教程中完成的组件是灰度图像,可以在这里下载源文件

01.创建一个容器图层

图层样式 渐变叠加 线性 90度 从#F9F9FA(顶部)到#EFEFEF(底部),

添加白色的内阴影,距离2px

02.添加投影

给容器图层添加4px 黑色投影,距离1px,不透明度10%.

添加1px描边,填充类型为简便,从浅到深的渐变,顶部颜色为#C8C8C8,底部颜色自行调节。

03.划分出按钮栏

复制图层,选择路径选择工具

(A),选择矩形路径。使用矩形工具画出如上图形状,记住要按住 shift,然后选择与形状区域相交。

04. 创建按钮形状

移除掉描边和投影,渐变叠加稍微柔和一点顶部设为#F0EFEF,底部设置为#F9FAFA,使用直线工具,

画一个条#DFDFDF的线横跨容器,再画两条垂直线,不透明度设置为6%。

05. 播放图标

自定义形状工具,画一个尖锐的三角形,填充为#BABABA。通过自由变换旋转90度。

设置黑色内阴影大小1px 距离1px,不透明度40%。

白色投影 距离1px

06. 快进图标

复制播放图标。使用自由变换,比例缩放为75%,然后使用路径选择工具选择路径。复制粘贴,然后按住shift,利用键盘的向右键再复制一个小三角型。

07. 倒回图标

使用直线工具,按住shift,为快进图标添加1px的垂直线。

按cmd+h来隐藏路径。选择移动工具按住opt+cmd,再按住键盘的向左键来复制图层。然后cmd+t,右键,垂直翻转。

08. 添加文本

将倒回图标位置放好,让倒回和快进对称。下一步,添加标题、时间和艺术家名称,使用字体工具,标题和艺术家要形成对照,让标题文本图层的样色深一点。

  • 相关推荐
  • 大家在看
  • 索尼:PS5系统界面完全重构、与PS4 100%不同

    上周,公布了外形和首批游戏的PS5成了业内热门话题。会后,索尼一众高管也出面接受了采访、参与网上Q&A等,回答了不少发布会之外的疑问。其中,PlayStation UX设计高级副总裁Matt MacLa

  • 李楠评价PS5工业设计:这两点差评

    6月12日,索尼正式召开PS5发布会,PS5游戏主机的真机外观也终于揭开神秘面纱。外观方面,PS5主机采用了一种立式夹层设计,也有点像一本立起来的书籍,上宽下窄,中间是黑色的主体,两侧是乳白

  • 三星蓝光播放器突然大规模停止工作

    最近几天,全世界的三星用户报告他们的多款蓝光播放器突然停止工作。用户在官方论坛报告,通电之后,播放器出现了反复的启动关闭,发出类似试图加载光盘的噪声。电源和弹出光盘的按钮都失效,重置的尝试也都失败了。

  • 索尼PS5外观正式公开:黑白双色调设计 支持两种摆放方式

    6月12日消息,凌晨四点,索尼PS5的线上发布会正式召开,受制于疫情影响,本次发布会采用线上形式,索尼官方公布了主机外观、配置以及将于新平台上推出的全新游戏阵容。外观方面,索尼PS5不是此前爆料的“深V造型”,采用了立式机体,整机采用黑白双色调设计,科技感十足。官方称,PS5有自带光驱和无光驱两种版本。配件方面,索尼PS5包括DualSense充电站、全新的高清摄像头、Pulse 3D无线耳机以及遥控器等。配置方面,采

  • 有哪些电视播放器软件值得推荐?当贝酷狗音乐装机必备

    一般我们购买电视后,都会使用官方应用市场中附带的银河奇异果(爱奇艺)、CIBN酷喵影视(优酷视频)、云视听极光(腾讯视频)等视频点播APP,不过这些软件,必须要开通VIP,要不然就得等待非常久的广告。所以今天我们主要讲得是那些不用VIP也能使用的软件,内容取向各不相同,大家按需求下载!首选播放音乐软件--当贝酷狗音乐喜欢听音乐的朋友,这款软件一定不能错过,这是一款无广告,版权全面,不用办会员也能听各种音乐的软件,无论是

  • 三星蓝光播放器批量抽风:无限重启死循环、原因不明

    你家还保留有蓝光播放器吗?数以千计的用户在网络上报告,自家的三星牌蓝光播放器、家庭影院等系统遭遇严重问题,无线进入重启死循环。事情似乎是从本周五(6月18日)开始出现,以蓝光播放器

  • PS5正式官宣!网友:老婆 咱家路由器该换了

    把PS伪装成路由器,是男人之间才有的默契。经过6月5日的短暂跳票之后,今日凌晨,PlayStation官微正式宣布,PS5线上发布活动定于北京时间6月12日凌晨4点举行。“希望与您一起见证这一历史

  • 索尼PS5新外形曝光:“深V”消失、有PS3内味儿了

    PS5主机保留的悬念还不少,比如量产外形、首发一方/三方游戏、定价等,在12日凌晨4点的发布活动中,索尼应该会揭晓一二。赶在这之前,荷兰设计师Jermaine Smit公布了一批PS5的新工业设计渲染图

  • 索尼PS5仍在稳步推进中:定制AMD处理器下周开始出货

    这两天,关于新一代索尼PlayStation5游戏主机的消息可谓跌但起伏,先是发布会正式官宣,随后有被无限期推迟,让无数网友和分析遗憾不已。不过虽然发布会被推迟了,但该机的投产进度似乎仍在正常推进。现在有最新消息,近日有外媒透露称,该机所将搭载的全新AMD处理器将于下周开始出货,这也意味着PS5本身的进度并没有太大问题。据外媒最新发布的消息显示,后端IC封装测试厂商将从下周开始,向下游厂商出货AMD为索尼PS5?

  • AMD摇钱树开花结果:PS5处理器下周开始出货

    虽然PS5全球发布会因故推迟了,但投产进度仍在正常推进。据外媒报道,后端IC封装测试厂商将从下周开始,向下游厂商出货AMD为索尼PS5定制的处理器,并在第三季度末之前达到一个小高峰。索尼P

  • 20多年后 PS2主机终于被软破了:PS4/5或同样奏效

    还记得当年的索尼PS2主机吗?没想到在20多年后的今天,其软破方法告成。具体来说,安全工程师CTurt开发了运行自制程序的方法,原理是利用DVD播放器漏洞来绕过读盘时重重加密验证的第一阶段,

  • 还说像路由器吗?《战神》粉丝展示定制版PS5概念图

    此前,Playstation 5 的设计吸引力众多粉丝的目光,虽然这个造型十分令人难忘,但一些粉丝决定继续将“路由器”的梗进行到底,纷纷P图,让PS5看起来更像时一款路由器的模样。当然

  • 索尼PS5即将大规模量产 外媒称所需处理器本月开始出货

    据国外媒体报道,原定于当地时间6月4日举行的索尼PS5发布会,已经决定推迟,但这似乎并不会影响这一款游戏主机的生产事宜。外媒的报道显示,后端集成电路封装和测试服务商,将在6月7日的这一个周,向下游的合作伙伴出货索尼PS5所需的处理器。从外媒的报道来看,索尼PS5所搭载的处理器,是由AMD专门为其设计的定制处理器,6月7日所在的这一个周开始出货,其后出货量将逐渐提升,并在今年三季度达到峰值。索

  • 索尼良心?PS5起售价被曝和PS4一样:对比同配电脑省2/3

    索尼仍迟迟不肯公布PS5主机的价格,但昨晚,靠谱爆料人IronManPS5给出了数字无光驱版399欧元、蓝光光驱版499欧元的消息。我们简单分析下,2013年PS4主机发布时,欧版起步价同样是399欧元(500

  • PS4机能受限带不动《生化危机8》:想玩请买PS5

    上周的PS5发布会上,《生化危机8:村庄(Resident Evil 8: Village)》一同公布,定于2021年发售,登陆PS5/XSX和PC平台。细心的玩家可能注意到了,居然没有现款主机?可靠报料人Dusk Golem透

  • 设计实战 赞扬设计服务带你探究LOGO设计

    我们都知道,每个公司都有着它自己的独特性,这种独特性是由它的发展历程和特有的服务细节所塑造的,也正是因为这种独特性的存在,设计师们才能基于它们来为这些公司企业进行LOGO设计。LOGO绝对是最能够直观的体现一个公司属性和风格的东西之一。专门设计一个独立的、与众不同的LOGO是一件很艰难的事,因为就目前市场上存在的公司企业和五花八门品牌LOGO实在是太多太多了。LOGO设计的独一无二,对公众而言,能够看一眼就能快速的想起某一?

  • PS5平着放长啥样?安上底座犹如悬浮在桌上 网友完美伪装路由器

    6月12日的发布会上,索尼公布了PS5定妆照以及四款配件的官图。“白加黑”的外观设计虽然引发了一定的争议,但也算独创一派,颇有新意。不过,当时索尼只公布了PS5站立的模样,不好网

  • PS5标准版及数位板全部配置详情 PS5各版本配件外观等一览

    索尼互动娱乐(SIE)在北京时间今(12)日凌晨举办的线上直播发表会中,正式揭露了下一代主机「PlayStation 5(PS5)」的造型,确认将推出内建光碟机版本与无光碟机版本。官方同时公布了包括控制器充电座、HD 摄影机、3D 无线耳机麦克风、多媒体遥控器等一系列周边。但尚未公布具体上市日期与价格。

  • 《地平线》新作明年登陆PS5

    《Horizon Forbidden West》是PS4独占作品《Horizon Zero Dawn》(地平线黎明时分)的续作,开发单位依然为索尼旗下的Guerrilla工作室。主角与她的伙伴将在新作中勇闯西部禁区探索新疆界,直达

  • 比PS4快100倍 Epic:PS5 SSD性能太强 已重写虚幻5部分代码

    据外媒报道,Epic Games工程副总裁Nick Penwarden近日接受采访时表示,PS5在计算和图形性能上都实现了巨大飞跃,其存储架构也很特别,必须重写虚幻5引擎的部分代码,才能充分发挥PS5 SSD的读写速

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议

热文

  • 3 天
  • 7天