中国展示论坛

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

QQ登录

只需一步,快速开始

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

用Photoshop鼠绘漂亮的MP3播放器

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

先看一下最终效果:
* ^. z6 X  U7 u. [( ?: R7 f* H0 m$ L# \1 M/ h
2011022411435114.jpg + y3 h6 }* |- e. |" V
1、第一步是我们创建一个黑色径向渐变的背景。在任何颜色的油漆层,添加一个如下所示的渐变图层样式。
4 u8 U% j+ f3 p7 i0 S
' ^& R$ S; U. _ 2011022411435124.jpg 9 F, Y7 S+ F1 M' @7 z- F4 ]$ \
5 a; Q1 p9 K! ?# L* h
2、用圆角矩形工具(设置一个半径为20像素)创建一个该设备的主要元素,表现设备的形状图层(点击菜单上的第一选择)。
% P7 J7 P6 u  p; z( G% p4 [0 V2 o. u0 y0 r( D4 {3 J
2011022411435204.jpg
& y4 e0 B7 R5 ]
$ l7 m8 z5 v+ X! V# Y3、双击该图层上的向量,颜色编辑器将打开。我们可以选择一个#E1E0E0的浅灰色的颜色,进而可以增加表面的发光程度。
" c( o7 h( w$ T2 e
# B& _4 {% B/ E: d* Z4 ^* \ 2011022411435224.jpg 0 s0 o2 ?) p& p7 x; N' v3 N8 j

) T2 `  M; M7 g4 M- s4 _7 q8 Z1 C1 k9 n0 E6 J4 n
4、现在我们要创建一个该设备周边的一个斜面。在此之前,我们需要用PS标尺创建一个参考标准。点击这两个统治者收敛角,通过拖动鼠标,我们在放置光标的位置放置光标,这将使我们能够创造一个外围设备周围等距离斜面。
( ~9 `8 S  R/ l) M: u# A! K" G8 q% u* l
2011022411435236.jpg
5 C8 C2 E+ H% w* V5 X* F  _: X% ?! ?! ~  j
5、我们把这个图层的不透明度调为0,因为我们只是想看到一个表面上2像素的斜面。
  r5 E' ?, E7 Z/ u9 O3 C4 }7 s5 {, h
2011022411435302.jpg 9 l- D1 g. w3 Z7 l: z4 \$ W

! s% z; I: `4 @3 v% v, u) V* E6、套用一个1像素的描边,在设备的内部位置要使用比设备前面更暗的颜色。在这一步,我们要创建一个代表行之间的形状和播放器的前联合差距的线。
1 V3 U: `  y9 G6 w$ E
$ t  v7 H. ?, z; e 2011022411435316.jpg
' i5 r- P7 B* r" W- h2 E( _( T5 d+ S7、设置2像素值以下的内发光。
& _2 O) B* y3 p) X2 d  J& m
" q& }* ?' g5 ?  C* n0 q4 W+ G 2011022411435360.jpg
8 g4 F5 o1 L0 B5 \1 v9 n. D( [7 S7 n7 \1 p
8、给设备的前部添加软梯度,让设备更有凸出感。
$ j) s, ]$ r' S3 E8 k' h$ W( o; H6 d* B8 g& s% R
2011022411435365.jpg
! [! F4 s. w4 v. l; `& D& [
; [2 ]' e# D7 v: U, B9、现在,我们将突出这个MP3的优势。要做到这一点,需要添加一条有挤压感有三维效果的线。然后在MP3的外表面添加2像素灰度中风效果。
% d+ K: f( {: F' p1 c/ {4 S8 S/ F( I& `1 I% r+ M
2011022411435490.jpg 7 a- F. [1 C- R( n) }. t# v# S9 \7 v
10、利用锥与浮雕风格,我们在这条线的上部区域添加光效果。现在物品看上去像是从上面打光,下面变得更暗的挤压效果。 . f( s0 _$ j0 y) p/ u3 H

6 L; p  Z2 ^* A3 y 2011022411435466.jpg
) Q/ |% c" }! Z% ~- F
4 R0 ?+ P" t( z% u6 t4 R11、现在在这个图层上添加柔柔的,轻轻的内阴影效果,让播放器的前面更显突出。
* b4 j, b' |$ E' h: d2 d4 D( H$ _/ k- u) y# ?8 D  c
2011022411435560.jpg
* y, h8 T: j9 }# w) f1 O! r* a
7 ]& @$ b: w0 {12、通过复制和编辑前面的斜面层,我们创造更多的代表不同的控制按钮的斜面。
  ]5 \3 V3 k$ t
: t, T1 q9 o: k4 {* C 2011022411435531.jpg 9 a& c/ s: R3 \2 T6 R/ g8 J

  S- e3 x4 m  B& k13、现在通过编辑形状层来创建播放器的主播放/暂停按钮。重复第一个斜面,在边界以内画一个圆形物体。然后放大10%的水平,因为我们只需要那些斜面。
: b0 o3 Q% K; C& q: X$ [. ^, r' Q  ~5 H1 d: S2 X/ O! P( ?6 F
2011022411435598.jpg
3 T! C7 t% e4 L$ R$ g& A3 N
7 k1 \6 k2 L$ D1 K! ]& b14、像下面这样在步骤13中创建的形状中应用软3像素面具。
# ]$ {/ i2 E5 K* L  I" a6 O- k1 z4 v' ]) |( t6 j0 T
2011022411435668.jpg
# [; w: D- T. P+ G5 r; N9 J7 X$ h7 z) y) ]
15、为了使面具隐藏对象和它的图层样式,在图层样式窗口单击选项“图层蒙版隐藏效果”。如果我们不选择此选项,这个面具只能隐藏形状,但是会把效果显示出来,而我们就是想要把它隐藏。 - ]& _! V. ?, u+ c5 Z1 F
$ ^) P) ]9 X- _: v, P. X
2011022411435633.jpg
- l- _7 b+ R: w2 h16、相同的面具也将用于其他斜面,我们可以从之前的图层屏蔽掉。用鼠标右键点击图层里面的遮罩层的图标,选择“从选择减去层面膜”。这将创建一个和以前相同的选择。 * s8 r" s4 s) t2 w6 g
5 W. ?8 Q. i2 F: Q/ i5 k9 Q. i- C
2011022411435767.jpg + a2 o/ \- j" T

3 c5 t. x7 l' F. o% J17、在这一步,我们将重复选择转换图层的步骤。 ( y+ k7 @' C" G: g, h2 q. q

! |# S% s( r8 ?4 E* x4 ` 2011022411435745.jpg
1 ]% A# o. V, U  y- e% `6 m+ _
) }8 D8 \! d; S: _18、我们已经有了设置主按钮的斜面。现在我们需要给播放器创建一个显示器:黑色亚克力屏幕,在那里可以显示歌曲名字和播放时间。 $ ^- e# {  i! V/ S1 l  F

' |$ C. D9 S8 b1 }% [! h2 U% ] 2011022411435730.jpg % N3 _/ g( x6 ^1 {8 b5 {
19、首先,我们使用阴影来创建一个光从上面射向底部的斜面。使用图片显示配置的风格,可以使图片显得锐利和清晰,而不是黑暗和模糊。
% Z8 ]; D! k- L: `9 _
1 ?& }$ P$ X4 E) s% W4 n 2011022411435876.jpg
: a- h8 M* O9 y2 h4 Q
! ^1 n0 H  A/ F20、现在,我们需要建立一个径向渐变。把黑色和白色两种颜色尽量靠近中心附近,那样没有这么多两色的柔软性。黑色占49%,白色占50%。 * a  s3 q0 Y" R& _* \

7 x( V0 _6 e4 ~/ k5 K 2011022411435857.jpg 3 D2 D. Q" q7 D% _9 p. v

7 V! M1 s2 B6 N  K' r5 g6 s* F21、取消点选该选项与层对齐。如果我们不这样做,梯度将只能从该对象的中心到边缘,我们希望梯度更大和更广泛。
. T( t$ b. S% F. m" t' ?& E0 ]$ [5 N4 W( }2 i+ y& U( T/ z* p
2011022411435847.jpg
$ n7 I6 e( e7 I8 y$ [+ @; Q. T- c22、他出示您的镜面效果,使用两个类似于我们创建按钮那一步的斜面来做一个形状。使用一个一致行程内的黑色1像素中风。使用内部发光,2像素的大小设置为屏幕上的混合模式。 + i8 q$ ^9 Q( W7 s
- E! [: q  P7 W" G3 F
2011022411435962.jpg % j- W: S* e8 @
$ _; v# s8 I8 q; W! K- {
23、现在我们已经完成了我们的MP3播放器的前面。现在我们需要添加一些显示按钮和文本的图标。
9 x: I- j5 u+ j. X% P
6 E/ E( t- q" L0 h7 o 2011022411435932.jpg ( f* F. ?8 I' ?/ q  R5 p) }; \& N

+ S7 E! K) R! l9 Y: n* e# ]* F1 H24、现在,让我们在显示屏上模拟显示滚动文本。使用像素化的字体,我们需要添加将播放的翻译名称和歌曲名称。你可以使用这个免费的字体。记得把走样移出菜单上的文字工具窗口,以保持文本尖锐。 5 S/ `- V; F+ `* n* u/ L* P$ k- W

) P  ?5 Y/ g, R+ [ 2011022411435917.jpg
5 a9 C2 ?9 n+ u9 s; _! j25、我们用其他位图字体创建计时器,指示时间的流逝。此字体也是免费的,你可以在这里得到它。 3 a" q9 O  M2 t$ c$ j5 w3 o
7 a' z  h2 G! r8 j4 Y% i7 ^: Y; Q
2011022411440021.jpg 5 [) G0 R1 w% W' _) x6 d, R

0 j8 K6 ^1 Q3 H. h& r26、使用通用的显示图标和音频或视频播放器符号的字体。你可以使用这一个。一旦它被安装用来创建播放器不同的按钮,在这种情况下,播放/暂停控制(随着播放器的发展,您将需要创建两个国家的按钮时,当按钮被按下时,播放按钮变成暂停按钮,反之亦然)。 ! J$ N/ U4 x/ R

! [' w- N, `! K 2011022411440089.jpg
& L  U8 T) T% Y! d: R
$ M; j0 x5 C9 n) }% G& s% \! I27、对于这个符号,我们使用和前表面相同的颜色。用颜色选择工具,我们可以绘制文本。
* W5 k5 H* B2 W* K+ Q
, M' Z: p# w7 E+ ~* w* e1 a, K7 a 2011022411440043.jpg ' ~# a& B+ o1 {0 L

# w8 W& W. O) Z2 ~0 ]( I# \28、现在,我们可以包括各种不同的款式,让播放器外观看起来像浅浮雕标一样。使用内阴影下的相应值。
( Z$ a% D5 I% p, \8 p1 p- S, T. S
2011022411440090.jpg 3 ^( ?5 g1 v8 x0 {3 ]2 E

' e+ P2 L# c) }; n! T29、用这些操作可以减轻底部斜面。
0 @: m# i" n3 }" {
+ p  F; r9 L& W: d; c- a4 H/ k 2011022411440166.jpg
0 I. {% q3 y: _: U0 c8 O5 d# R
/ s- @; r# n/ z  ]. K30、使用柔软的宽度和坡度小的表面,让播放器看起来不是很枯燥。 # {  [7 Y( d! v

2 W" k# N0 h$ O# f2 Q 2011022411440102.jpg

* f) J5 Q, S" r4 x

最新评论

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

GMT+8, 2019-5-23 23:53 , Processed in 1.171868 second(s), 31 queries , Gzip On.

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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