非主流图片论坛 » PS 专区 » PS 教程 » 超酷网站登录界面的PS制作过程

lengyaowen 发表于 2008-1-18 12:53

超酷网站登录界面的PS制作过程

直接开始我们的教程（注：软件版本为Photoshop CS3）。 [align=left]　　我们先看看效果图：[/align][align=center][img]http://www.52photoshop.cn/yeditor/uploadfile/20071228210814782.jpg[/img] VQt QO$q
效果图[/align]　　下面是背景素材和人物素材。
r2m v|%SM [align=center][img]http://www.52photoshop.cn/yeditor/uploadfile/20071228210814900.jpg[/img]QjX!`hNpb
素材1[/align][align=center][img]http://www.52photoshop.cn/yeditor/uploadfile/20071228210814814.jpg[/img]5jym!Y[q x)F
素材2[/align][align=center]　打开Photoshop，创建新画布，大小根据个人网站需要而定，这里我们设置为900*650像素。[/align]　　打开背景素材图，使用移动工具（V）将背景素材拖动到刚刚创建的画布中。
k2a!a jzU0~ [align=center][img]http://www.52photoshop.cn/yeditor/uploadfile/20071228210814467.jpg[/img]2|5D/ccV'Spl"S
图1[/align]　　继续使用移动工具（V）调整素材图的位置直到满意为止。 _-E0zY*D5[4K$E?*U
[align=center][img]http://www.52photoshop.cn/yeditor/uploadfile/20071228210814834.jpg[/img]
-i$|(Ll b-^ 图2[/align]　　创建灯光效果，选择素材层，滤镜 >> 渲染 >> 光照效果。 +?:]"hLUC
C Vq6r#Iy
[align=center][img]http://www.52photoshop.cn/yeditor/uploadfile/20071228210815458.jpg[/img]Rt~Pe)T
图3[/align]　　得到如下效果（注意调整光源位置）： hO8B8v%mSu
[align=center][img]http://www.52photoshop.cn/yeditor/uploadfile/20071228210815362.jpg[/img]"t.@f9KW\
图4[/align][align=center]使用矩形选框工具（M）建立如下选区。 [/align][align=center][img]http://www.52photoshop.cn/yeditor/uploadfile/20071228210815484.jpg[/img]
z^kt6b S 图5[/align]　　创建新图层，并用白色填充选区。
6}*~ wk\;D X n$Qf!} [align=center][img]http://www.52photoshop.cn/yeditor/uploadfile/20071228210815916.jpg[/img]7o"j^&DQ
KW+gk
图6[/align]　　自由变换（Ctrl + T），得到如下效果。
-S(_i~}"dR#Z;[ [align=center][img]http://www.52photoshop.cn/yeditor/uploadfile/20071228210815432.jpg[/img]P"Z9bY5E
图7[/align]　　图层 >> 图层样式 >> 投影。2R8p'y1Jk&D
[align=center][img]http://www.52photoshop.cn/yeditor/uploadfile/20071228210815379.jpg[/img]
tuR'T3p 图8[/align]　　复制图层并旋转得到如下效果。
#ypV'^%^"Qz:?^ k [align=center][img]http://www.52photoshop.cn/yeditor/uploadfile/20071228210815818.jpg[/img]+^q6};GPd
图9[/align][align=center]　按住Ctrl键并在图层面板点击顶部矩形图层获得选区。 [/align][align=center][img]http://www.52photoshop.cn/yeditor/uploadfile/20071228210815247.jpg[/img]+[
BA,?s(i\+li9u
图10[/align]　　选择 >> 变换选区，按住Alt键，缩小选区。 ;ro:y ["T1Yz
[align=center][img]http://www.52photoshop.cn/yeditor/uploadfile/20071228210815156.jpg[/img]O!K3X,Lk/po?P!C'K
图11[/align]　　选择 >> 存储选区，将上述选区保存。
6oB0^6r
Z ner 　　载入人物素材图片，并调整大小。 E]
a.jQ
[align=center][img]http://www.52photoshop.cn/yeditor/uploadfile/20071228210815625.jpg[/img]
8J?g.e#E3Xj 图12[/align]　　选择 >> 载入选区，将之前存储的选区载入，选择 >> 反选，删除。 R`2`!]NZ'BLcB
[align=center][img]http://www.52photoshop.cn/yeditor/uploadfile/20071228210815984.jpg[/img]
Yi1\%Am;y-D"RS#s7W 图13[/align]　　新建图层，使用笔刷工具，并选择箭头笔刷，绘制如下效果。 )l ^-Xf\)dIq
[align=center][img]http://www.52photoshop.cn/yeditor/uploadfile/20071228210815185.jpg[/img]
)hGa(Z` s7L(}~'[B 图14[/align][align=center]编辑 >> 变换 >> 变形。 [/align][align=center][img]http://www.52photoshop.cn/yeditor/uploadfile/20071228210815572.jpg[/img]
e(kB9A*?l&v 图15[/align]　　输入登录提示文字“Enter”。4E'iwj }
[align=center][img]http://www.52photoshop.cn/yeditor/uploadfile/20071228210815497.jpg[/img]
q_9O+EZ#R/['G
k 图16[/align]　　为文字层添加投影效果，图层 >> 图层样式 >> 投影。 j#Q_ M+@q~fJ
[align=center][img]http://www.52photoshop.cn/yeditor/uploadfile/20071228210815146.jpg[/img]
^$^wT'a2O e I&x;xY 图17[/align]　　得到如下效果： w+};AS;VG+A
[align=center][img]http://www.52photoshop.cn/yeditor/uploadfile/20071228210816997.jpg[/img]+kX5t8?Lr7Y~Vu|
图18[/align][align=center]　自由变换（Ctrl + T），调整文字层的位置及角度。[/align][align=center][img]http://www.52photoshop.cn/yeditor/uploadfile/20071228210816735.jpg[/img]
yX8Lj1}5}Q1o 图19[/align]　　输入网站版权申明文字。 e@&s-M|P
[align=center][img]http://www.52photoshop.cn/yeditor/uploadfile/20071228210816859.jpg[/img] Y&\'x&X8GT+\s)h+\9`2o
图20[/align]　　为版权申明文字设置图层样式。3zMnS7jf~G
[align=center][img]http://www.52photoshop.cn/yeditor/uploadfile/20071228210816417.jpg[/img]1p5[#Ac4K(H"opC
图21[/align][align=center][img]http://www.52photoshop.cn/yeditor/uploadfile/20071228210816873.jpg[/img]XYt&N*WOTFd
图22[/align]　　得到如下效果：f-@'? qb g
[align=center][img]http://www.52photoshop.cn/yeditor/uploadfile/20071228210816340.jpg[/img]
r*sN!eM&\W 图23[/align]　　输入标题文字，并采用与“Enter”层相同的图层样式。UY*j*u6LL'Q iq8]
[align=center][img]http://www.52photoshop.cn/yeditor/uploadfile/20071228210816678.jpg[/img]
$q1x0R*a8F#Q 图24[/align]　　最终效果如下，希望大家能够喜欢。 zAfU!~h:g.V(g
[align=center][img]http://www.52photoshop.cn/yeditor/uploadfile/20071228210814782.jpg[/img]RAaWsaG"cg
图25[/align]

天比海蓝 发表于 2008-5-15 13:30

怎么看不到图片/？？

查看完整版本: 超酷网站登录界面的PS制作过程