首页 > 办公 > Photoshop > 正文

Photoshop简单规划VISTA风格网站首页布局

2024-08-21 23:27:17
字体:
来源:转载
供稿:网友

  水晶效果的网站界面十分常见,也是许多网页设计师必学的设计手法之一。以下我们就来回顾下这种简单实用的设计方法,对于初级网页设计师可能会有很好的启发作用

  最终效果图:

  

photoshop简单规划vista风格网站首页布局-webjx.com

 

  新建一个800*900,背景为#1e1e1e的文件。选择圆角矩形工具,在顶部拖出一个高约30px的黑色矩形框。并添加以下样式:

  

photoshop简单规划vista风格网站首页布局-webjx.com

 

  

photoshop简单规划vista风格网站首页布局-webjx.com

 

  

photoshop简单规划vista风格网站首页布局-webjx.com

 

  

photoshop简单规划vista风格网站首页布局-webjx.com

 

  

photoshop简单规划vista风格网站首页布局-webjx.com

 

  现在黑色圆角矩形条应该有点vista的意思了吧,选择自定义形状,添加网站首页图标,和站点地图图标。

  

photoshop简单规划vista风格网站首页布局-webjx.com

|||

  打开一张vista风格的壁纸,这里用vistagrass壁纸,(点着下载),调整、裁剪大小。

  

photoshop简单规划vista风格网站首页布局-webjx.com

 

  下面制作高光区,用钢笔工具做出下面选取:

  

photoshop简单规划vista风格网站首页布局-webjx.com

 

  填充白色,并添加图层模板,梯度渐变。

  

photoshop简单规划vista风格网站首页布局-webjx.com

 

  添加网站标题和口号

  

photoshop简单规划vista风格网站首页布局-webjx.com

 

  复制第一步里面的黑色矩形框,去掉内阴影效果,移动到绿色草地下面作为导航栏。并添加导航文字。

  

photoshop简单规划vista风格网站首页布局-webjx.com

 

  下面制作,下面的内容板块。同样用圆角矩形工具,做出一个大小适当的,标题栏。添加如下样式:

  

photoshop简单规划vista风格网站首页布局-webjx.com

 

  

photoshop简单规划vista风格网站首页布局-webjx.com

 

  

photoshop简单规划vista风格网站首页布局-webjx.com

 

  

photoshop简单规划vista风格网站首页布局-webjx.com

 

  

photoshop简单规划vista风格网站首页布局-webjx.com

 

  标题栏做好后,仍然是圆角矩型工具,在下面添加内容框。

  

photoshop简单规划vista风格网站首页布局-webjx.com

 

  最终得到页面:

  

photoshop简单规划vista风格网站首页布局-webjx.com
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表