Photoshop设计制作汽车网站头部流程

[复制链接]
查看: 327|回复: 0
gggds 发表于 2009-12-19 18:06:52 | 显示全部楼层 |阅读模式
Photoshop设计制作汽车网站头部流程作者: 佚名 来源:不详 浏览:1 日期:2009-4-14 3:09:488 n# c2 h' c$ U* a! f' b

+ Q( k  z' q* i) B! D0 S2 B
8 b' N) X9 d$ D9 P0 G9 H  B' ]2 d
/ y9 P% C! N2 x( l% |$ I; M' ~- y: s: s7 |

8 l3 D0 T1 Y' K, {- k, z- i  首先选择一张汽车的图片素材:9 X' C- l; C% p8 B( ?
+ z$ U4 }1 f- R/ g

6 j# T1 W9 k( _0 G) C6 a
3 x( s, [/ d8 F# [素材图片! {; V! n8 r9 a
  看看效果图:
# d# W3 n+ ~( d7 K( {& ]& s& D5 ~2 k1 h! O
6 K9 x: p, B' M4 }; g, T

$ ]7 l8 _4 |0 z5 ^( h效果图# g" B/ |$ D, ]1 U/ i8 i+ L
) J" R2 f" O" T1 N/ _
$ ]" z9 t. R! ~, x
5 G/ ~0 w7 J% S4 y" t" `+ d

  `2 ?8 B, j. O( f0 P* ^+ i: l 5 ?' a7 g) h2 c: y9 q8 h0 I7 `; G

1 o9 d6 X3 W) [1 x
6 n; i" O& K' C& E; x# C. W9 j" k9 U
9 Y6 j& S/ H8 m$ K5 C+ {) J" V  D! `

3 T3 I6 p4 l. A' v9 d  在PS中将汽车图片的上部去除。* r: @- |5 ]3 z3 T0 E/ s" k

1 z+ k3 {  ~$ n4 d2 q/ e& l; F9 Z! i9 U3 Z8 f/ i

. P0 B- m; @6 P2 ^# ^3 a图1  
6 J$ ~9 q$ j6 M: W' j+ X  i' R: R  使用我们准备的风景图片。
7 b& J( i- p: _' C5 k. U# \0 |" N6 c( s5 C; @

! ?8 l# a- {7 r6 B% _$ H, Q4 O: Z, M! Z' t- R
图2  8 c6 @2 e  ~+ Q5 a/ c+ P

7 }( w4 V3 n$ M/ N; [9 g) r
, U) B) S* l# I0 F$ W2 d 7 j5 u1 H2 R# @0 l! j
, r. Q9 v# k6 i

3 {9 V' k) L# H1 s
  T" {& f, Z& j. v+ e" l7 g
; p; {) x  Q+ v- b
" f: t" k- e9 i! u0 e
3 H1 n5 Z. l" q# H+ m7 b/ V5 W( t4 \+ j
  将风景图片拖动到汽车图层之后作为背景。; L( |8 k3 W* R1 \  s* _% _

# J% m) s7 z0 W: ~; g1 h5 G7 b
/ Z6 n! j+ A# x4 e) m# r: O* f# [1 ]* l, g2 i& V
图3  7 [4 S5 p/ S7 N* u- Q
  为了使图片更真实,我们要把车窗部分扣出,并将其不透明度调整为80%,这样车窗就能出现真实透明效果的感觉了。- b" u4 [9 [4 A1 V5 J5 T
上一页下一页123 4 ~% M. u3 D$ |( w; o$ G; |/ Q

# L5 _# U6 G$ Y* H) l6 f) w; M
  m; d4 H0 x: J/ Y % C0 C" `0 ]) g0 ?& s# o
上一篇hotoshop教程:工笔画网游美眉下一篇hotoshop教程:大楼魔幻般瞬间被切割# f+ a8 b+ H/ T

' V- P6 Z. x! {9 `3 Z+ e! J3 W6 w+ W! m+ Z
, Q5 d. @. w$ ~1 L6 Q
0 ~' g3 w0 O0 U

! ^+ [& ~. r# d0 F7 Y/ a- a- a' G6 H* w2 L& A+ T& s' I
Photoshop设计制作汽车网站头部流程作者: 佚名 来源:不详 浏览:2 日期:2009-4-14 3:09:48
2 C- t, T0 g. M0 K
' i/ n, f- c1 G6 S& I# T# o
+ I5 i. B3 m- L8 c7 G图4 
1 H  Z! t& e- y1 a) }" q( a9 P
2 p1 x" Q$ G$ E
- \  T* H7 d- W* o
: u* `1 y' K5 u" E
' }; W# i% g6 y3 ~ 0 G, y1 V5 {4 o- p

2 T% G( j; U7 B7 \3 u5 P5 b. C
# s2 ~; Q6 {+ l  ^  t) S, H: a
6 d( h" l3 R. Y0 g1 Q5 `6 Y# r# K$ ^

: T( y3 N4 C1 L' Q  由于白云部分的图片过于图片,我们将白云区域选中。
3 N: ^' {- d9 h9 h: |+ d) [8 \6 W
- t7 {$ M8 y8 z' X/ j4 ~& ~8 `0 f, M
/ C  S9 `6 E! d
图5 
( T; Q% t6 ?4 e- c. R+ P  新建一个图层,期间保证之前选中的白云区域状态,随后在区域上添加从上到小的渐变效果,颜色为#4271fc 到#9da6fb ,并设置不透明度为95%,这样就能隐约看出下面的白云轮廓了。+ s" b* ^4 o4 m1 o7 ~, }+ _2 D

! I: I# `, }3 `: u% w" ^
' W. Q. G$ G/ t# m% `% U; J
, n' J. p) v5 x图6
# E, @1 ~& E* r9 Z- q* d$ v/ n, r2 a7 d+ k1 C! F1 h7 G3 `' p. z/ g  T+ Z
; s" B7 f1 j( R6 {
7 `% w0 I# z. D2 t9 y+ b3 @3 t
4 i. }2 _' b9 L

5 ^' z0 c" e% v! C( U) o
! |! k( z0 ]# ^3 ]$ s: y  m! q2 @* L! i
7 V/ G# G9 |1 X5 Q% [, \0 \
4 D" Y. Q6 s% s' W! H1 U0 U
9 J( R4 @$ F9 y% G! [5 Y- Y
  现在我们来制作真个汽车网站头部的背景主题,在PS新建立1600×600大小文件,这里我们使用1600宽的目的是主要适应一些大尺寸的浏览器,你也可以根据自己喜好设定尺寸。% k0 H4 I* g7 y
) q: h1 l2 L/ K

$ L0 x) _8 v1 V1 K- ^; _+ S7 U5 n* f8 E
图7  
: V& [( I* w1 O# }+ |( Z  设置PS的前景色为#121212 ,背景色为#474748 ,从上往下在背景图层中拉出渐变色,随后添加顶部绿色渐变区块与底部灰色渐变区块。
( @; q$ y* v4 B, w( U9 d. F$ K4 {8 D4 {

5 e" c+ ?, z4 z4 U8 K. I% a: ^
7 E( ]6 F8 F3 k. F. H3 p图8
  {0 o. |. I8 ~6 _9 q+ S. W6 P! V6 p% j9 L0 m  Q

" f4 n/ h( W$ s! U3 q+ K4 E ) d9 h  K" n( W; j- f" k; z7 |

3 C# I  E# Q( w+ T+ R# R& {% f ' x* {7 `$ T8 S( x, P
7 F' t2 Q& E" z- c9 U( K# n
! ^2 i1 O, W( o; j* G

( s: X) J+ p2 K* m* O
  v/ x/ p& I4 c: h0 o# g  w9 F* G) l: ^
  使用选区工具选中中间区域作为放置之前的汽车图片位置。, J$ M9 z/ k' r
9 @0 D- K, \, O' A

) [* f2 p0 j* y; n& q7 G& {- X$ z8 \  o6 s5 m
图9? / C! t( v+ B$ F9 Z
你需要将选中的区域单独截取出来,因为我们要为其添加阴影图层样式。
  H# ?8 n; B6 T; Q/ C! [ 上一页下一页123 , B: z) Q& [0 p
3 d* F7 ~; T% M& b+ y

1 ]8 K8 Y9 c1 X. {' o5 ^9 P+ y/ D; E . F2 w7 B4 s) K$ d" B2 Z4 n
上一篇hotoshop教程:工笔画网游美眉下一篇hotoshop教程:大楼魔幻般瞬间被切割5 y( S& U* P% g' D

+ L3 `0 S! O: b- m4 a; f+ I. c' O7 b
! E5 h' m. j' K0 @  Q6 Y/ G
* S" N' @  _5 X( H$ c

* z- a5 M" T( s4 }9 `0 W
% F5 k; L# |" _) }8 Z  vPhotoshop设计制作汽车网站头部流程作者: 佚名 来源:不详 浏览:3 日期:2009-4-14 3:09:48" V( a& B1 g5 I3 B
; p* x  I( u6 s8 o4 k3 s, O; R
  {- {* o) G4 i! D6 b
图10
# o; W" K+ w0 ~2 P% O' a9 {" g1 @+ J8 ?. Z
6 d1 T8 J. [2 H- n

* X8 z$ |9 T5 M7 I7 Q/ X) i
5 g( O2 J9 }& D+ q
2 N% V0 c9 g( m2 q$ S, |, k8 [# h2 V2 t; u3 I# F

' x% g) U" c6 o; f( W. c2 h+ |" m+ U- i3 k. t
7 E! g' ~. u; M. M: B3 p
0 [2 g4 h1 c" L6 K
  完成阴影效果后将我们之前做的汽车图片拖入其中。
# u0 g$ f) d* k3 V* h# ^; [8 }: P: ?# |; d+ G3 t$ i
) K7 F& V2 F/ T3 _
: L" \! e. x; }( ]
图11 
0 k& d2 v, s0 D  添加汽车网站的导航凹槽线条。
3 j* i, q! J" n3 i- n; |0 w1 C& h' }; N% s( D; q

$ \% e  u! V, c) Y: x
4 T# @* @& \6 W' P- `; v8 I图12
) k, q) P6 m4 ]/ f
# |' R: r; U$ ?4 k! g3 b8 v4 j; F" U3 n* J+ K; }7 U2 m7 Z% \! w) E

( T3 P+ ?6 w. M2 ]  ^4 S6 N" e  }$ F0 l! B3 x; E/ y

, X. ^7 T  S+ Z1 b9 `" ~* _& i2 ~8 l+ Y/ a

. V1 a( x8 U1 V2 v6 r% k) C# h0 p; a+ L( _4 z- E- o8 h0 g

" E  v) |; ^6 n! b5 v, e
, ~  T4 L0 s# D) S$ U- E' h

, h& r8 B+ j! B5 _3 C& H3 y  加入文字与斜线来使页面更具变化。最后完成效果如下图:
' f7 v* K4 Y8 \! G$ k( G( n* V! V6 l4 r# Q
# s/ X/ A& ~+ M2 a8 z4 }

, m, z/ w  z1 s效果图; m4 J/ e$ _% q4 J
) m9 g3 C) T0 m4 Z( M4 V: U8 L
+ N% W5 O$ J( |# ~  a7 S- a
上一页下一页123 2 N7 F! s  a' M
' z. @) F( x$ ]6 h( [
7 H! m; Z* {: U1 Q

) I- }# a" {% g' G! l上一篇hotoshop教程:工笔画网游美眉下一篇hotoshop教程:大楼魔幻般瞬间被切割

本版积分规则

精彩图文

Copyright   ©2015-2016  展示网  Powered by©Discuz!  技术支持:凡尚展览     ( 粤ICP备14065977号 )