photoshop设计vista风格网页
2022-12-26 14:07:51
来源/作者: /
己有:6人学习过
![](http://img.lvups.com/d/file/bigpic/2022/12/26/sz3usdedcdo.gif)
以下是详细的photoshop教程步骤:新建一个800*900,背景为#1e1e1e的文件。选择圆角矩形工具,在顶部拖出一个高约30px的黑色矩形框。并添加以下样式:
![](http://img.lvups.com/d/file/bigpic/2022/12/26/cito0xomyvm.jpg)
![](http://img.lvups.com/d/file/bigpic/2022/12/26/sailwmzo3fu.jpg)
![](http://img.lvups.com/d/file/bigpic/2022/12/26/5sy5kka22vy.jpg)
![](http://img.lvups.com/d/file/bigpic/2022/12/26/sev111spzkf.jpg)
![](http://img.lvups.com/d/file/bigpic/2022/12/26/xrx2lel1koa.jpg)
现在黑色圆角矩形条应该有点vista的意思了吧,选择自定义形状,添加网站首页图标,和站点地图图标。
![](http://img.lvups.com/d/file/bigpic/2022/12/26/j50ibjmxmcw.gif)
打开一张vista风格的壁纸,这里用vistagrass壁纸,(点着下载),调整、裁剪大小。
![](http://img.lvups.com/d/file/bigpic/2022/12/26/uel4asj32wg.gif)
下面制作高光区,用钢笔工具做出下面选取:
![](http://img.lvups.com/d/file/bigpic/2022/12/26/gd11fhku34i.jpg)
填充白色,并添加图层模板,梯度渐变。
![](http://img.lvups.com/d/file/bigpic/2022/12/26/vdgz0wez4uj.gif)
添加网站标题和口号
![](http://img.lvups.com/d/file/bigpic/2022/12/26/ma1qmb0nbyq.gif)
复制第一步里面的黑色矩形框,去掉内阴影效果,移动到绿色草地下面作为导航栏。并添加导航文字。
![](http://img.lvups.com/d/file/bigpic/2022/12/26/dz4a2oi1xyg.gif)
![](http://img.lvups.com/d/file/bigpic/2022/12/26/butttjmfta3.gif)
13 5下面制作,下面的内容板块。同样用圆角矩形工具,做出一个大小适当的,标题栏。添加如下样式:
![](http://img.lvups.com/d/file/bigpic/2022/12/26/1brqmpdlkud.jpg)
![](http://img.lvups.com/d/file/bigpic/2022/12/26/veyvqgk3e5e.jpg)
![](http://img.lvups.com/d/file/bigpic/2022/12/26/pwavwcx0n5l.jpg)
![](http://img.lvups.com/d/file/bigpic/2022/12/26/qe1z4le5pwl.jpg)
![](http://img.lvups.com/d/file/bigpic/2022/12/26/cuugydwxved.jpg)
标题栏做好后,仍然是圆角矩型工具,在下面添加内容框。
![](http://img.lvups.com/d/file/bigpic/2022/12/26/154i0u2su3e.jpg)
最终得到页面:
![](http://img.lvups.com/d/file/bigpic/2022/12/26/sz3usdedcdo.gif)
上一篇:用ps绘制火凤凰Logo
下一篇:用ps制作精致小巧按钮