发新话题
打印

使用Photoshop设计Web版头一例

使用Photoshop设计Web版头一例


使用Photoshop设计Web版头一例
- B% P  h' f' ~3 w2 W9 x, f: j1 @. k: F
2 P4 C$ d6 m7 Y) v1 h7 m/ z! H
5 h4 e9 f5 S2 ~- m1 L
  眼睛是整张脸的重要部分,所以漂亮的人物CG,一定少不了一对漂亮的眼睛。要画出眉目传情的眼睛,只要掌握好方法,也不是很难。下面就跟着我在Photoshop中
( z) u/ m, \- y( |) Q,一步一步来打造传情美眸吧。3 E' T4 g$ ]8 y6 A( [
  1.新建图层用来打线稿,用钢笔工具画出眼睛和眉毛的形状(如果是半侧面的话,要注意透视关系)。8 p9 Q* u' e$ Y# x2 @" a7 @2 j: i

* H- J) D- i. F4 e. U0 N& @* G4 u! P- Q/ K/ z; Y/ t7 F
( V# V+ V/ v7 K2 G+ j5 V
4 U( Y2 l3 S+ {6 @
  2.在图层面板中再新建一层,这层是皮肤层了。选一个淡点的肉色,把皮肤淡淡地平涂一遍。选支稍大的笔刷,用喷枪工具(压力小点,设置的18左右,模式“正片叠底”),还是用这个颜色,涂出暗部,因为右边是暗部所以要偏深些。
1 |, }' G8 ~9 q. U  e0 x
0 X0 @% K% T2 g  p2 o
, c5 @9 I( C* T" Z5 \& r, Z/ C; q7 r- ~+ b( ]" h- S

2 u, q1 O. s; @8 R  C. H  3.换支稍小的笔刷,在同一层,加深眼眶和眉毛。用减淡工具(压力20模式“中间调”)提亮鼻梁和额头。
8 D5 v# G7 k; Z6 d) C9 w& C1 ?! @4 ~- ~; Q% e* x9 `
$ ]5 p9 A1 m( ]# C& a( @7 I4 l# |

9 c$ k0 E% w3 n0 l2 j: J6 t) w* }' }% L0 `5 u
  4.接着,可以在眼眶里加上眼珠了。继续新建层,用钢笔工具勾出眼珠后,按“Ctrl 回车”(钢笔转换为选区)。按“Ctrl Alt D”设置羽化值为1 ! u9 ]4 j. y! B! P6 O& g; r. O
(羽化的目的是为了让边缘看起来不那么生硬)。然后选个你喜欢的颜色来填充。保持选区,挑个深色,用喷枪把眼珠周围一圈加深。用涂抹工具,在眼珠内从外向里,拖出一丝一丝的感觉来(可别把眼珠拖得变形了)再在中间点出适合大小的瞳孔。眼睛也有反光的哟,用减淡工具 ! ]# J1 B3 Y% U' C# G
在靠近瞳孔的地方提亮。
" f2 y$ A& t; t  [, r4 ^5 `% D# K( l2 ]2 J3 H, b

8 C* b5 B1 M/ U$ m- C
- s! f7 K: m  t+ r1 M( \6 T; U( K  @. a+ }. Z2 ]: J
  5.用喷枪画出眼白,这时候的眼睛看起来还是木呆呆的,所以 9 [% [: T$ c  b" @' A/ y
接着就要开始深入细节的工作了。用喷枪把眼皮和眼睑颜色加深,因为画的是外国人的眼睛,眼窝特别凹陷,眉弓则突出,所以眼窝处的阴影重。用画笔工具画出双眼皮的厚度,注意一些细节的变化,用稍大的笔刷
6 D0 |2 J! k0 s& O,就像女孩子画眼影似的 从眼角处向斜上方刷。下眼线可以用减淡工具提亮。点出高光 现在眼睛神气多了吧。
3 t0 a; Z! b  U
5 a& I' c' Y. q- |7 i  P$ k
& `7 M! u9 ~; I
6 s. t0 \5 ]$ l  i- O. l5 n
/ p# ]' }8 l$ Z6 P9 k( t- R  因为这是特写镜头,所以眉毛也不能含糊,用最细的笔刷,顺着眉毛的生长方向来画。眉梢要淡些。 还有睫毛 4 s. G+ ~0 y% b8 \6 W& B
是用涂抹工具慢慢拖出的。另外的一只眼睛也用同样的方法来画。(不过建议你两只眼睛同时来画) 7 g& D9 s7 {6 d6 r
  最后把每一层都用“Ctrl U”来调节一下“饱和度”和“亮度”。 $ w% P/ K% ~7 N& k, m4 m
  好了,到这里 ,一对深邃迷离、传情的凝眸就差不多完成了。
9 e1 I8 h, P* {2 c( O
! H9 k/ Z0 p: u% r! R: C$ Z: o' g% _& S' _# J- s

: f( n# B% {" @
" D3 J: T8 Q/ T( q" P% |! W9 P  小提示:如果有兴趣的话你还可以继续细化,眼睛是脸上很重要的部位,用Photoshop画眼睛时要不断地注意笔刷压力的调节,压力太大会显得突兀。画到有阴影的地方(比如眼窝)不要忽视一些细微的变化,因为精不精到就看你对细节的把握了。还要注意两只眼睛的关系,眼神要一致,高光要恰到好处,太多的高光反而会使眼睛看起来空洞无神哦。如果基本功不好的话,平时就多对镜子观察自己的眼睛吧。1 ]* x& Q3 K  k: O' b; G
  这是我刚作完的一个web,我想利用这个东东,展示一下利用ps构思制作版头的常见方法,素材组织,ps制作等技术的运用。
6 q  T( ?. O  ^* L  这个小教程作为论坛内部交流,构思想法还太简单,也希望和大家交流看法~~~~
1 I/ v6 N7 v4 |; f# ?. ~; c3 I5 b: O* P) w8 r7 K
# A6 [1 X" Z# g$ s8 @6 E
7 A1 u2 b% s( \7 N3 s
; e- x8 t' U( m6 C0 z& L  w( S; _
  首先是整体构思,为了配合引导页延续效果,所以决定在栏目页延续了紫色基调,单也作了相应调整……摆脱调引导页紫色带来的过分压抑负面效果,在栏目页主体配色使用浅紫色(突出色),黄色(辅助色)和白色(主体色)。并决定在头部使用能够体现紫霞夕照,紫气东来的效果……6 h2 Y, Q1 i1 G3 H, H7 b9 i: s
+ I" i: x% O6 I) Z' p, v3 L
! K8 `  Q8 G) t1 b; a4 `1 }

) J& S4 B! {1 A: Y* v5 b. T
5 q, r2 F  C: G, |0 i/ K  接下来是图片的素材准备:* `8 I5 Q" |6 v2 ^  @( w" |, U
  基本要求是云彩效果、北京城市的地标建筑最好是夜景或傍晚景观~~~$ k* H/ Z# T( y
  以下是两个要用到的素材:; {6 b' w8 A5 S4 n( q$ i' I0 B* Q
6 I" ~' H$ Y' i# Q5 h6 u

! m1 e1 u7 \8 z& d% A. a: F4 f( s) o% l; Q, _% \
 ( p9 y0 `) W6 h# M' b
$ p) p' [- L7 g/ W5 Q: }; x
" F, i8 M9 W) j; q# \
6 ?$ w/ g: K/ u4 y

/ d( a$ m; c3 i% M; C  备注:由于上传限制所以北京夜景图作了相应修改缩小了,实际使用的图片是了4000px的扫描图片。. c4 I5 L, l0 ^' p
  准备工作完成以后,开始正式在ps中制作了:9 n: ?) l$ K( D9 ?7 V" Y/ t
  1.首先将图一导入设计稿,并作变形缩小处理。
& S4 t( w  O6 p+ e/ w+ G# {# e6 }
2 J3 K5 N# T( q2 t$ ~0 _+ K* X

0 z& [  p9 X1 a' M' U
. |% Q9 e$ O8 f, L8 O7 q6 ~3 m  请大家注意压缩后的图片被圈红的地方。在这个局部形成了一个紫色白色黄色的渐变。(我不得不承认这是动手设计前没有想到的),我感觉如果能够很好运用这个渐变将会为版头的整体基调打下一个好基础(这样避免就避免使用全部面积使用紫色带来的压抑感觉,又能很好的过渡到web中间正文的白底上去)
, _9 v! h# v8 m( L: y6 F9 |4 ?9 I3 S( u2 t5 |
/ S+ I3 q- l, F/ }0 ~: N3 i
% G  C) P- D1 g6 N' R" L5 B- ]

* a. a& J' O# `* D) e  有了上面的想法,就可以制作版头的渐变背景了,但是单纯使用ps渐变,还不足以实现这种紫霞效果,所以我保留了图一素材中的云彩效果,将原图中的多余元素扣掉……
( F6 `' o) I! R$ N/ n  K- W. f# a& l

+ h# f& ?. Z0 H" {; X2 |# {7 r, U! P- p' r/ ^
% D  V: s$ Q4 g
  制作晚这个图层(图层名称:紫霞)后,在紫霞图层下面新建一个图层用来制作紫霞下面夕阳的光晕,ps制作可以采用使用渐变工具或者是将图1金黄色区域选择后作变形处理~~~,版头背景最终效果……
2 r- u1 W3 X6 S1 m7 ]) B4 i  (备注:至于左边的logo背景由于设计时已经扣掉了,这里没办法弥合,所以相应的logo效果处理这里略过,logo效果使用了ps羽化效果)  h8 K* D; g/ P$ `; [
  x5 ~" u4 v: \. |

8 [6 ]  \1 f0 r, U5 _% F1 f+ m. }8 @. T4 T* Q0 o! D' Y8 |

/ Y+ P6 P, ^+ l: K$ a  2.下面的工作就简单的多了,将图二导入设计稿中,并做变形……快速蒙板,使用快速蒙板时在图片的上方(为了实现整体的紫霞效果),左斜边(留有一下空间为添加其他元素如动画留下空间),正下方(将版头和下面正文用黄色隔离开)+ r; J- c5 z& A: ]4 a8 S
: T3 q5 h% ~1 O8 t- I% s0 Y

$ q* h( l2 v! d" K2 g" y/ M9 A- R) f7 E2 _  K

+ ^/ P. V7 ?$ @4 w) u/ g5 ]  最后是以下收尾工作,比如将紫霞下面的国贸大厦重新置于幕前,左侧立交桥体的延伸处理等……………………) |) B0 F; {3 \7 c1 d
  基本上构思制作就这么多,感觉在ps制作方面没有使用太多的效果(自己ps水平有限),但构思过程颇有收获,没有一个好的构思出发点就很有一个好的作品,同时也不得不提到设计过程中和我共同讨论研究的朋友同事,的确激发了不少灵感~~~



点击图标进入精品网摘收藏 欢迎大家加入网络收藏夹

TOP

发新话题