你的位置:创意公社- ideaer >> 百科 >> 平面设计 >> 详细内容 在线投稿

初级photoshop教程-创建一个动作按钮

排行榜 打印 发给朋友 举报 发布者:ks3352
热度208票  浏览172次 【共0条评论】【我要评论 时间:2010年10月27日 09:55
创意公社- ideaer.ttI&~qNX

在这一篇教程中,我将教给你怎样在photoshop中运用一些基本的技巧,创建一个动作按钮。之所以叫做动作按钮,是想让你的用户来点击这个按钮,它一定连接到一个地址,比如说RSS订阅地址或者是评论按钮等等。你也可以看看另一片制作按钮的教程《在photoshop中如何制作一个简洁干净的按钮》。创意公社- ideaer@9EqK(?C/N$oa

创意公社- ideaer2l[/QdDt

好了,让我们看看最后的效果图创意公社- ideaer&w/m&w3_7|(Fk
初级photoshop教程-创建一个动作按钮创意公社- ideaer(ET8neNi s

];Tj9q$su5Q1怎样设计一个动作按钮创意公社- ideaer F%CH~6\M:X8K'l/W
这个按钮一定是放在合适位置上的,并且明显的,这样的话当用户浏览你的网站的时候可以第一眼就看到这个按钮。这里罗列了5个好的动作按钮的标准。

+t6a;qC}1 创意公社- ideaer2}/]x5RmS&OW

1. 位置创意公社- ideaerby(|)f9d*[(C:A*^p
用户一定能很容易地找到这个按钮,可以放置在页面头部,产品的旁边,导航条上,或者是其他位置。但是要记住,一定要位置明显。创意公社- ideaermQX;O$FyXs'IjR c0Z

{:j&{y+c5C:s12.颜色
4k8Wi:Y Sf6F1 这个按钮的颜色一定是整个页面的亮点,颜色要抓住用户的注意,可以选择明亮和对比度稍微大一些的颜色。

qFe(@/K6^5mf8M%D1

xo9`!? uPd-q13. 文字创意公社- ideaer%gzDD.A@JH})s
这个用于你和用户之间沟通的词汇非常重要,像是免费的(这个是最常用的),注册,下载,提交等等。尝试用简单但是有效的词汇,这样用户会更容易理解。

+J3T)N*@%t1 创意公社- ideaerB3~y\9]+A0i

4. 尺寸
?Z vS!@1 这是你的页面上很重要的一个按钮,毫无一味的,这也是你的页面上可能被点击次数最多的地方。如果你把这个按钮设计的比其他地方的按钮稍大一些,可能效果就会更加明显。但是别忘记,并不是越大越好,还是要注意整体设计效果的。创意公社- ideaer!a8}I#y'_

创意公社- ideaero7C7Z6mL;vA

5. 干净创意公社- ideaer0DpBNFI
你的按钮不可能写满了文字,或者是有很多元素。按钮上的文字需要足够的空间,这样文字的可读性会大一些。

C VH[ BDN uQ1

g,j@os1好了,以上就是我们要注意的。创意公社- ideaerP\S O*R n(X/l7p]

4~|w L ZC1 OK,让我们开始吧
[S3jZ)bE1 新建一个文档 300 x 200 px。设置合适的背景色。我用的是灰色渐变背景。选择背景色为#181818 ,前景色为#343434,选择径向渐变工具(圆心渐变),从你的画布中间开始向一个角拖拽渐变。你会得到下面的结果:
X1r)s8a@B1 step_01
0Gl8H5J(f1 选择圆角矩形工具。(或者是你选择一个你喜欢的自定义形状)创意公社- ideaer_}-I[g

1Di:N,R&L`]]0[0Y_$W1step_02

Wi-T%[4uWk1

o~U/iA f1在画布的中间画一个矩形。尺寸自定。
u(G.S6uJ*P}`0T%UV1 step_02_1创意公社- ideaer/B0T-B)f0v

创意公社- ideaer$|['w9dk,m

查看你的图层面板,双击该图层打开图层属性面板,或者是右键点击图层缩略图,选择图层属性。
TV7i,F-eQ KO \1 step_03
V vZ\c$LS1 然后添加图层样式,包括阴影,内阴影,斜面与浮雕,渐变叠加和描边。创意公社- ideaer [/W,U)Y8t;R

zr/? mU0U1 step_05创意公社- ideaer;E,u&_C1P | mST
step_06创意公社- ideaerxN1CNx`sB
step_07
\,F0~B;q^7~1 step_08
t`|sRp1 好了,点击确定,你应该得到了下面的效果。
9Cb,WCv6KGv} p m1 step_09创意公社- ideaerJ2~RR,k!m@7_u3T F
新建一个图层,命名为bright,在浮动工具栏中用圆形选区,在按钮上画一个圆形。创意公社- ideaerFDt m!b
step_10创意公社- ideaer C[A+Qj-?cv
填充白色。创意公社- ideaerR CY t(Nc|y/q
step_11
/V H g fA f1yx1 按住shift+ctrl+alt键,点击你的形状图层,这时候你将会得到一个选区,点击你的图层brigh ,点击删除,然后设置图层透明度为15%,这时候你将会得到下面的结果:
U6]} qQY.y\/A:b1 step_13创意公社- ideaerHm@$qR~0z
好了,这时候可以写按钮上的文字了:下载,免费,注册等等。随便填充一个颜色,然后设置图层样式-外发光和图层渐变。创意公社- ideaer ^#S U O5^h X N
step_15
!jQ#|~'KJP'y1 step_16创意公社- ideaerEG s+VR#P
好了,这就是我们现在的结果。
@8{p KSY!a1 step_17创意公社- ideaer]V o)I#G7\)]
你可以添加一些小的元素。像是下面的样子:创意公社- ideaer%~8E%J7d$?D
final_call_to_action_button
EdYd ~!\%v1 好了,结束了。很容易吧。我希望你会喜欢这个教程。

7cO\[K(f L(PCI1 创意公社- ideaer,~8c-v jjr

源教程来源:via创意公社- ideaer,j$v.} x~V#`w4f.m3O}"f

],}Dx7VR~e1在这一篇教程中,我将教给你怎样在photoshop中运用一些基本的技巧,创建一个动作按钮。之所以叫做动作按钮,是想让你的用户来点击这个按钮,它一定连接到一个地址,比如说RSS订阅地址或者是评论按钮等等。你也可以看看另一片制作按钮的教程《在photoshop中如何制作一个简洁干净的按钮》。创意公社- ideaer q)s jT p a

7J(l-]G8i,j'JB9~1好了,让我们看看最后的效果图
Q"a4w~#O0C$b3T1 初级photoshop教程-创建一个动作按钮创意公社- ideaer2@0QoM*`Ij(@UmP

%F't8VaU^:b&rxN1怎样设计一个动作按钮创意公社- ideaere S^1`3D:l R8e
这个按钮一定是放在合适位置上的,并且明显的,这样的话当用户浏览你的网站的时候可以第一眼就看到这个按钮。这里罗列了5个好的动作按钮的标准。

[Oj5OA0uC9F1

#jM]nB f/S11. 位置创意公社- ideaerZ(V i}&[9j
用户一定能很容易地找到这个按钮,可以放置在页面头部,产品的旁边,导航条上,或者是其他位置。但是要记住,一定要位置明显。创意公社- ideaerI1V4|\AyJ0?*l

k9OK^N3t12.颜色
5j!j5rS ? W/e Xb1 这个按钮的颜色一定是整个页面的亮点,颜色要抓住用户的注意,可以选择明亮和对比度稍微大一些的颜色。

$U+k(m Z$Q0n'O;q1

(Xu!G.w$Q13. 文字创意公社- ideaer)}.jS f5{%]2pv.o
这个用于你和用户之间沟通的词汇非常重要,像是免费的(这个是最常用的),注册,下载,提交等等。尝试用简单但是有效的词汇,这样用户会更容易理解。创意公社- ideaerV0iP b@Y]

8Yq!Or}14. 尺寸
'f3o^"E w!av [ Mt1 这是你的页面上很重要的一个按钮,毫无一味的,这也是你的页面上可能被点击次数最多的地方。如果你把这个按钮设计的比其他地方的按钮稍大一些,可能效果就会更加明显。但是别忘记,并不是越大越好,还是要注意整体设计效果的。

5N"i)`w2pU[h'w1

3d4H6{!G9`)a15. 干净创意公社- ideaer+U{%_!re?cB!i
你的按钮不可能写满了文字,或者是有很多元素。按钮上的文字需要足够的空间,这样文字的可读性会大一些。

NlU$i0oAC"Q;g-I"^IM1

P!C)LpZW6S*_1好了,以上就是我们要注意的。创意公社- ideaer E)~7]d C8Xq s
创意公社- ideaerpcL;Ajw fA,F
OK,让我们开始吧
CDq1j$Je`1 新建一个文档 300 x 200 px。设置合适的背景色。我用的是灰色渐变背景。选择背景色为#181818 ,前景色为#343434,选择径向渐变工具(圆心渐变),从你的画布中间开始向一个角拖拽渐变。你会得到下面的结果:创意公社- ideaerd2B.^i:M@(SW$H
step_01
.X-RZcW@1M:O+t1 选择圆角矩形工具。(或者是你选择一个你喜欢的自定义形状)

D+Y)o8iL5`nJ x0xL1 创意公社- ideaer5n1e!^U!k"qr&bN

step_02创意公社- ideaer'd` C:D.]#R R`-e

创意公社- ideaer&fU+A!Pw n G7w*Sg`

在画布的中间画一个矩形。尺寸自定。创意公社- ideaer[/_X^rN
step_02_1创意公社- ideaerK9WY&^YG S4gQG

(pd6Gc t:F1查看你的图层面板,双击该图层打开图层属性面板,或者是右键点击图层缩略图,选择图层属性。创意公社- ideaerj(mhx,q&M1Q
step_03
m!BW-S]z!W/vH n'b'V1 然后添加图层样式,包括阴影,内阴影,斜面与浮雕,渐变叠加和描边。
8SRfPj(~b1 创意公社- ideaerxY:F5Z2p
step_05创意公社- ideaer3vx'Li V"D
step_06创意公社- ideaerQr!^0_3D/d
step_07
$[:Z%N(S MI1 step_08创意公社- ideaer;J5\7S!A,E2P?F|6|
好了,点击确定,你应该得到了下面的效果。
;txi}(c'f"j~l9_K1 step_09创意公社- ideaer)Af&Ri,LlrV
新建一个图层,命名为bright,在浮动工具栏中用圆形选区,在按钮上画一个圆形。创意公社- ideaer'r hg]D
step_10创意公社- ideaervx%}O|b
填充白色。
-ycb$?"f8k+C"[y1 step_11创意公社- ideaer_#O~,~Bh5q
按住shift+ctrl+alt键,点击你的形状图层,这时候你将会得到一个选区,点击你的图层brigh ,点击删除,然后设置图层透明度为15%,这时候你将会得到下面的结果:
3{g w:U~*k%{E)T1 step_13
O [8xrg$zk7~!s1 好了,这时候可以写按钮上的文字了:下载,免费,注册等等。随便填充一个颜色,然后设置图层样式-外发光和图层渐变。
MZE;@B B[1 step_15创意公社- ideaerZ}iS"}_+K S&i%W\u
step_16创意公社- ideaer)e\al3qs3C4KE
好了,这就是我们现在的结果。
2U"Vt4_9u1 step_17创意公社- ideaerAqg^aET(a,^*aE
你可以添加一些小的元素。像是下面的样子:
PN o4{4n+Q1 final_call_to_action_button创意公社- ideaer1ys K(a vyA
好了,结束了。很容易吧。我希望你会喜欢这个教程。创意公社- ideaer+f Abz;\:Q[ V

创意公社- ideaer&U)Q"l z!U#^:RbE@o

源教程来源:via创意公社- ideaerJ6{ BybH

创意公社- ideaer*|K*N+F;CQ

在这一篇教程中,我将教给你怎样在photoshop中运用一些基本的技巧,创建一个动作按钮。之所以叫做动作按钮,是想让你的用户来点击这个按钮,它一定连接到一个地址,比如说RSS订阅地址或者是评论按钮等等。你也可以看看另一片制作按钮的教程《在photoshop中如何制作一个简洁干净的按钮》。创意公社- ideaer5ugd3U?zP(D3P*X}

k_*u1H#rn9C fI1好了,让我们看看最后的效果图创意公社- ideaer V:|],Q8i1o(X[5tp8W4Y
初级photoshop教程-创建一个动作按钮

KByo\ I1 创意公社- ideaer b a.]g@|

怎样设计一个动作按钮
'b{CC ^`I8o3w)])i:v1 这个按钮一定是放在合适位置上的,并且明显的,这样的话当用户浏览你的网站的时候可以第一眼就看到这个按钮。这里罗列了5个好的动作按钮的标准。创意公社- ideaerrNMN,p"X

创意公社- ideaer`ZZu#_C

1. 位置创意公社- ideaer_&i0ae-\!C
用户一定能很容易地找到这个按钮,可以放置在页面头部,产品的旁边,导航条上,或者是其他位置。但是要记住,一定要位置明显。创意公社- ideaer*HC?,f#h x?

创意公社- ideaerl Eln3q7x

2.颜色创意公社- ideaerF ?Pnd!Ov3? Dl2]"H
这个按钮的颜色一定是整个页面的亮点,颜色要抓住用户的注意,可以选择明亮和对比度稍微大一些的颜色。创意公社- ideaer&}bg+QN#F1m

lgE7R~-f5sV13. 文字
b!BvP\d|1 这个用于你和用户之间沟通的词汇非常重要,像是免费的(这个是最常用的),注册,下载,提交等等。尝试用简单但是有效的词汇,这样用户会更容易理解。

P:CYi\tn1 创意公社- ideaer U#EH3uijNC

4. 尺寸
y{1L_2u+gUA1 这是你的页面上很重要的一个按钮,毫无一味的,这也是你的页面上可能被点击次数最多的地方。如果你把这个按钮设计的比其他地方的按钮稍大一些,可能效果就会更加明显。但是别忘记,并不是越大越好,还是要注意整体设计效果的。

{6V:{t#c9Q~;s1 创意公社- ideaerZ8z$[ j"^Q-?

5. 干净
"cm+|x2]R_"r1 你的按钮不可能写满了文字,或者是有很多元素。按钮上的文字需要足够的空间,这样文字的可读性会大一些。创意公社- ideaer,R-R&j:ol+Q,ZU'_

:Z)lvL7Q S7q-md1好了,以上就是我们要注意的。
6n,~Z{IM+Gz1
)R*iD Wd9t/x1 OK,让我们开始吧
+|P;kr||E1 新建一个文档 300 x 200 px。设置合适的背景色。我用的是灰色渐变背景。选择背景色为#181818 ,前景色为#343434,选择径向渐变工具(圆心渐变),从你的画布中间开始向一个角拖拽渐变。你会得到下面的结果:创意公社- ideaer.h(tA%@ ?V
step_01
.mmn%w*? l'|_2h9Fj1 选择圆角矩形工具。(或者是你选择一个你喜欢的自定义形状)创意公社- ideaerK-@ QKPa L

5w;v8c#xiJ|1step_02

E8}:O!K S.k RAcq1 创意公社- ideaer5d%jZ%VC

在画布的中间画一个矩形。尺寸自定。
%q-["t.m_'Y3[ Z1 step_02_1创意公社- ideaerhu^BY&R

创意公社- ideaer:N U~W3R/y

查看你的图层面板,双击该图层打开图层属性面板,或者是右键点击图层缩略图,选择图层属性。
#I| W3Q*de1 step_03
VP5gc8S@2Z/a7T&\"z1 然后添加图层样式,包括阴影,内阴影,斜面与浮雕,渐变叠加和描边。创意公社- ideaer_1i(oG4cZ7f

3Ug$~ MWd g1 step_05创意公社- ideaer6q5{/TA{.eB:n
step_06创意公社- ideaer r f O9G i"G7R[
step_07
,o?T-]3`I4x1 step_08
6F)h%| ly-Z,g1 好了,点击确定,你应该得到了下面的效果。创意公社- ideaergs*`g t:|
step_09
v ]&v[8bb~7ELvi m1 新建一个图层,命名为bright,在浮动工具栏中用圆形选区,在按钮上画一个圆形。创意公社- ideaer ~M C)o9Ea9}
step_10
&`2ii hO_Y%b9T1 填充白色。创意公社- ideaerI/E s__%H
step_11创意公社- ideaern0Ad tf6k c'_2b
按住shift+ctrl+alt键,点击你的形状图层,这时候你将会得到一个选区,点击你的图层brigh ,点击删除,然后设置图层透明度为15%,这时候你将会得到下面的结果:创意公社- ideaerThtx(N]
step_13
"j0lhn4[\N$N,i1 好了,这时候可以写按钮上的文字了:下载,免费,注册等等。随便填充一个颜色,然后设置图层样式-外发光和图层渐变。创意公社- ideaerc2bFu?1y6MlR
step_15创意公社- ideaerD:p"~E"a#g(C;q
step_16
:h)g7Qv'P1 好了,这就是我们现在的结果。
XQq'A6BOy$Tm1 step_17
-eL]t#\O P S1 你可以添加一些小的元素。像是下面的样子:
Y:d6zi(A&pK-B3`#o1 final_call_to_action_button创意公社- ideaergPDB e&w
好了,结束了。很容易吧。我希望你会喜欢这个教程。

J WRm6Q1

TU D7J'~ }z1源教程来源:via

J:s2p1i;i [#j1

( 0 B )

( 0 B )

( 0 B )

( 0 B )

( 0 B )

( 0 B )

( 0 B )

( 0 B )

( 0 B )

( 0 B )

( 0 B )

( 0 B )

( 0 B )

( 0 B )

( 0 B )

( 0 B )

( 0 B )

顶:14 踩:11
对本文中的事件或人物打分:
当前平均分:-0.08 (49次打分)
对本篇资讯内容的质量打分:
当前平均分:-0.87 (46次打分)
【已经有88人表态】
11票
感动
12票
路过
11票
高兴
10票
难过
13票
搞笑
11票
愤怒
10票
无聊
10票
同情
上一篇 下一篇
发表评论
换一张

网友评论仅供网友表达个人看法,并不表明本网同意其观点或证实其描述。

查看全部回复【已有0位网友发表了看法】