中国展示论坛

 找回密码
 注册中国展示论坛

QQ登录

只需一步,快速开始

搜索
中国展示论坛 门户 查看主题

用Photoshop鼠绘漂亮的MP3播放器

发布者: gggds | 发布时间: 2014-11-8 21:17| 查看数: 3768| 评论数: 0|帖子模式

先看一下最终效果: " c9 A/ T+ f1 f5 @

/ _+ y6 F9 s8 x; m9 K2 q  S 2011022411435114.jpg 9 |& [7 k) B1 q7 y* P* b
1、第一步是我们创建一个黑色径向渐变的背景。在任何颜色的油漆层,添加一个如下所示的渐变图层样式。 , {1 j4 C! u' e+ q* {& y! j1 p
1 i4 Z. b6 I/ ]3 Q, t$ x
2011022411435124.jpg - B+ g1 l, z8 f, p
7 j6 Q  I* }* k* u6 z: {
2、用圆角矩形工具(设置一个半径为20像素)创建一个该设备的主要元素,表现设备的形状图层(点击菜单上的第一选择)。 ! E3 c5 {! O  G; u9 Z# g( y
; p" G& Q8 R* f& K7 Z9 C. Y4 Y
2011022411435204.jpg
: d9 ~* J; }! I' _) _
! N. j/ Q9 n* a! O3、双击该图层上的向量,颜色编辑器将打开。我们可以选择一个#E1E0E0的浅灰色的颜色,进而可以增加表面的发光程度。 # Y( l+ H& `) ?: [2 y# [

: ?! M: p$ E. d( u 2011022411435224.jpg ) s3 _" r1 R  {4 D, m5 l

1 B( E) ?7 ~( a: k7 u! ]
% M) I- S# A$ G0 E4、现在我们要创建一个该设备周边的一个斜面。在此之前,我们需要用PS标尺创建一个参考标准。点击这两个统治者收敛角,通过拖动鼠标,我们在放置光标的位置放置光标,这将使我们能够创造一个外围设备周围等距离斜面。
6 }6 i0 k# \% p
! M) ~" E1 A4 e# N/ g 2011022411435236.jpg
% s! B; x$ A( A. a; T5 Y* @; |% l% h
5、我们把这个图层的不透明度调为0,因为我们只是想看到一个表面上2像素的斜面。
9 ~' Q! I  B, w- x- U5 ?
! Y6 w0 i. Q8 R: s' R# J 2011022411435302.jpg 5 u) d. v5 N1 b7 k
) d6 w+ A6 Y; y
6、套用一个1像素的描边,在设备的内部位置要使用比设备前面更暗的颜色。在这一步,我们要创建一个代表行之间的形状和播放器的前联合差距的线。 + g, p$ y* E9 a: J, \* w

8 T, F' b2 l+ k) u 2011022411435316.jpg ' s2 g5 K4 f7 f; m1 |
7、设置2像素值以下的内发光。 , U+ V$ `. w1 u" o' n% R
& Q- Z8 B- [8 y2 N8 w
2011022411435360.jpg
" Z3 r! o- a# {6 ^9 ~; \# n! }, f* b! v
8、给设备的前部添加软梯度,让设备更有凸出感。 - V* v) y6 }2 ^9 N1 {5 n

# r, ?2 l2 Z; w! s* v7 E0 g! p 2011022411435365.jpg
$ T: w* w0 d/ x8 T8 [% q
! L) H+ P. ^; f6 E7 P5 @9、现在,我们将突出这个MP3的优势。要做到这一点,需要添加一条有挤压感有三维效果的线。然后在MP3的外表面添加2像素灰度中风效果。
/ F5 U3 N; d$ f* |! @5 z% s* W% f4 q1 X! N5 @3 R4 X" y- V1 Q' P
2011022411435490.jpg
+ o* |' c& H" H6 B4 t; B* E8 V8 |) }10、利用锥与浮雕风格,我们在这条线的上部区域添加光效果。现在物品看上去像是从上面打光,下面变得更暗的挤压效果。
* C8 W, Q/ \" {  }1 g: z7 L7 k- t! G: [$ _/ K3 Z1 e- }
2011022411435466.jpg 2 @, J3 _) t- _$ J) }& R
  Z+ K! D# I( Y
11、现在在这个图层上添加柔柔的,轻轻的内阴影效果,让播放器的前面更显突出。
  F; r6 i" H" e6 @* s) \( d$ @4 I: ^' _* X7 K; [
2011022411435560.jpg + P) a6 u; N/ z5 ~
! Q2 E9 Z3 q* f; ^; r8 m$ B
12、通过复制和编辑前面的斜面层,我们创造更多的代表不同的控制按钮的斜面。
3 r+ W2 V+ @2 W1 @9 o. O6 j" w: X
1 L8 B) t& N2 S4 e 2011022411435531.jpg
+ ~8 o& V! Z* S$ P' S+ ^. G
7 y8 C! q5 M% q2 _$ V13、现在通过编辑形状层来创建播放器的主播放/暂停按钮。重复第一个斜面,在边界以内画一个圆形物体。然后放大10%的水平,因为我们只需要那些斜面。 ( p: r+ p2 u' |

" B  x2 W9 F. Y( h2 b: n( N 2011022411435598.jpg
7 V+ s; \2 z  H4 K- ]* V* ]$ w9 f; K/ I5 L
14、像下面这样在步骤13中创建的形状中应用软3像素面具。 & M' R2 t3 A1 D

; l( D8 F7 A! l7 J 2011022411435668.jpg : f/ H. f" @! g- l: s
/ n, T) Q& C- O) d( ^( Z' A
15、为了使面具隐藏对象和它的图层样式,在图层样式窗口单击选项“图层蒙版隐藏效果”。如果我们不选择此选项,这个面具只能隐藏形状,但是会把效果显示出来,而我们就是想要把它隐藏。 # w& x- N9 N# z3 i: V* N% W3 F

% F! ^$ B  L* U7 e9 J 2011022411435633.jpg 1 N# z) c- W  j1 u, C0 z1 }* ^
16、相同的面具也将用于其他斜面,我们可以从之前的图层屏蔽掉。用鼠标右键点击图层里面的遮罩层的图标,选择“从选择减去层面膜”。这将创建一个和以前相同的选择。
8 i+ L1 h* [. V
1 o" L" }" V" B; U 2011022411435767.jpg 6 w' q) p2 j+ b

; v" w* V, a3 O2 @; n: ~1 t( |17、在这一步,我们将重复选择转换图层的步骤。
, J  ?& I, f! F; v9 o& h
6 D$ w4 ?$ H" f5 Z7 P, K 2011022411435745.jpg
. s0 d0 e& h9 b5 {2 ~* d% O3 l& `0 l. k6 u6 ^' V- T# s4 y
18、我们已经有了设置主按钮的斜面。现在我们需要给播放器创建一个显示器:黑色亚克力屏幕,在那里可以显示歌曲名字和播放时间。
) P) W+ @7 j! t% l9 \; i8 `7 T( o6 |% ]5 ~! p% L6 @
2011022411435730.jpg   `2 L9 ^) g4 E, z; Y
19、首先,我们使用阴影来创建一个光从上面射向底部的斜面。使用图片显示配置的风格,可以使图片显得锐利和清晰,而不是黑暗和模糊。
$ j  R& G0 k' u4 ?9 ?" }
4 q5 @( j0 C2 U6 R0 D 2011022411435876.jpg ; o+ x1 H$ o' q3 E
/ q, ?9 @4 w$ G9 P' s2 L4 U, q
20、现在,我们需要建立一个径向渐变。把黑色和白色两种颜色尽量靠近中心附近,那样没有这么多两色的柔软性。黑色占49%,白色占50%。
! L' ^1 c! v, T  {- D6 Q) u! O# L: T" j* ^! n+ W  x3 K
2011022411435857.jpg
7 Q( F. [- ?$ F6 a7 h5 ?$ g4 H7 @! ?  V9 e3 E' P# b4 ^
21、取消点选该选项与层对齐。如果我们不这样做,梯度将只能从该对象的中心到边缘,我们希望梯度更大和更广泛。
4 a4 }1 T" L' A$ h3 @6 ~
* B+ m7 x  q4 ]+ Y1 P 2011022411435847.jpg
9 L& S: @9 U% |! q2 Z22、他出示您的镜面效果,使用两个类似于我们创建按钮那一步的斜面来做一个形状。使用一个一致行程内的黑色1像素中风。使用内部发光,2像素的大小设置为屏幕上的混合模式。 ' }. q: [' y/ D

1 L4 {/ H4 ~; N8 o; b+ H 2011022411435962.jpg
" l3 Y7 l! h! a  [$ k9 i6 ]  |" W3 ^0 s" U& y4 E& V
23、现在我们已经完成了我们的MP3播放器的前面。现在我们需要添加一些显示按钮和文本的图标。
  K, O2 ]% e' u! ]9 H# d2 z9 Y. H6 Z1 E; v( q, r
2011022411435932.jpg : L6 L5 [6 j9 D4 m4 s

& j% Z! `! ~1 ?! X0 r0 Q  q24、现在,让我们在显示屏上模拟显示滚动文本。使用像素化的字体,我们需要添加将播放的翻译名称和歌曲名称。你可以使用这个免费的字体。记得把走样移出菜单上的文字工具窗口,以保持文本尖锐。 0 A+ n) o# I" {
4 g, E7 b& G+ b! c4 g  M% ?4 D# t
2011022411435917.jpg
6 _( r  y, @! ], Q25、我们用其他位图字体创建计时器,指示时间的流逝。此字体也是免费的,你可以在这里得到它。
/ ?- T7 Q6 F# i( p5 c. @% l
+ s7 l( [' y8 Q: p 2011022411440021.jpg 6 N( l" Z8 F3 g1 {
7 N2 {( x1 L5 M8 P
26、使用通用的显示图标和音频或视频播放器符号的字体。你可以使用这一个。一旦它被安装用来创建播放器不同的按钮,在这种情况下,播放/暂停控制(随着播放器的发展,您将需要创建两个国家的按钮时,当按钮被按下时,播放按钮变成暂停按钮,反之亦然)。
) A7 K5 c: |5 e6 [$ F
: \* H5 ~* W$ F: q 2011022411440089.jpg
3 p- o* @: L, E
) n8 n" {# u4 O$ Z! B# _& x/ \) S27、对于这个符号,我们使用和前表面相同的颜色。用颜色选择工具,我们可以绘制文本。 2 l) b( W  d* n+ Z  e" C
; u, R; R: d; r1 \
2011022411440043.jpg 5 o: L3 s1 k# \! ?* p7 e
# F; u, j/ e! W9 f; K( p  X+ I
28、现在,我们可以包括各种不同的款式,让播放器外观看起来像浅浮雕标一样。使用内阴影下的相应值。 ) [3 {% |! [8 ~+ P; A- @# l

" D& p9 |3 `2 {  y! h8 N 2011022411440090.jpg
0 P+ ^0 A1 f0 t* M
# G. s- S* N$ b+ w29、用这些操作可以减轻底部斜面。
& y% r: s8 s- a
  h! m, g- L4 }4 q* G1 U 2011022411440166.jpg + t7 T! L$ c. ^; j2 F6 O7 V5 ]
+ q% }" Z* V" w! y! z6 _7 X$ ]
30、使用柔软的宽度和坡度小的表面,让播放器看起来不是很枯燥。
* c0 }1 i5 e! Z9 ?6 W' U. b  p. `' K/ s. v/ b/ z
2011022411440102.jpg
$ ]1 \. C  R# y/ H, J1 H

最新评论

QQ|小黑屋|手机版|Archiver|中国展示论坛 ( 粤ICP备14065977号

GMT+8, 2018-11-22 19:27 , Processed in 1.171883 second(s), 33 queries , Gzip On.

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表