收藏本站 | 广告设计 | 设计素材 | 教程 | ppt素材 | 中职 | 范文 | 常识 | 学习方法 | 作文  
订阅
首页
高考试题中考试卷学习方法范文写作作文大全公务员考试英语考试中职教育生活常识评语大全
热门: 广告设计 设计素材 教程 ppt素材 自考试卷 计算机等级考试 财会类考试 建筑工程考试 医药类考试 考研 电脑学习 驾照考试 语录名言好词 周公解梦 偏方
当前位置:一路求学网文章频道平面设计教程photoshop教程Photoshop简单规划VISTA风格网站首页布局

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

一路求学网 http://www.16qiuxue.com  阅览次数: 624次 11-08 14:08:08 

标签:ps教程,photoshop入门教程,photoshop初级学习,http://www.16qiuxue.com Photoshop简单规划VISTA风格网站首页布局,

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

  最终效果图:

  

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
,Photoshop简单规划VISTA风格网站首页布局

网友评论>>

联系我们 | 网站地图 | 广告设计 | 设计素材 | 教程大全 | ppt素材 | 中职教育 | 范文大全 | 常识大全 | 学习方法 | 作文大全
一路求学网 版权所有. Copyright © - http://www.16qiuxue.com. All rights reserved.
学习方法_小学英语作文_驾照考试试题_幼儿园大班评语
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18