LOGO-200LOGO-120x35LOGO-200LOGO-200
  • 首页
  • BIM咨询
  • 课程
    • BIM全科高级综合班
      • BIM建筑与结构实战班
      • BIM机电管线实战班
      • BIM建筑装饰实战班
      • 全国BIM技能等级考试班
    • 室内设计就业高级综合班
    • 建筑园林景观表现班
    • 建筑参数化设计犀牛班
    • 工业产品设计犀牛高级班
    • 平面广告设计
    • 淘宝美工网页
    • AutoCAD专项
    • 网课
    • 作品
      • 室内设计作品
      • 建筑犀牛作品
      • 产品设计作品
      • 园林设计作品
      • 平面设计作品
  • 课件
    • 建筑
    • Auto CAD 课件
    • 室内设计课件
    • 建筑犀牛课件
    • SketchUp 课件
    • Lumion 课件
    • 产品设计课件
    • Keyshot
    • BIM课程课件
      • BIM建模结构课件
      • BIM机电课件
      • BIM装饰课件
    • 平面设计课件
      • PS课件
      • AI课件
      • CDR课件
      • ID课件
    • 更多设计经典和教程
      • –室内设计–
      • –建筑设计–
      • –平面设计–
      • –产品设计–
      • –网页设计–
      • –CG插画–
      • –设计动态–
    • BIM技术
      • –BIM资讯–
      • –BIM教程–
      • –BIM案例–
      • –BIM考证–
      • –BIM软件–
  • 资源
    • 软件
    • -材质贴图-
    • -3DMAX模型-
    • -Sketchup模型-
    • -Rhino模型-
    • -BIM模型-
    • -CAD图纸-
    • -室内设计-
    • -建筑规划-
    • -平面设计-
    • -景观园林-
  • 设计答人
  • 管理系统
  • 制作
  • 其他
    • 合作企业
    • 招聘求职
    • 最新动态
    • 我们的风采
    • 关于我们
    • 手机版
  • –常用素材包–
  • -材质贴图-
  • -3DMAX模型-
  • -Sketchup模型-
  • -Rhino模型-
  • -BIM模型-
  • -CAD图纸-
  • -室内设计-
  • -建筑规划-
  • -平面设计-
  • -景观园林-
【官网】Photoshop绘制3D效果的网页模板
2016年7月30日

本教程主要使用Photoshop绘制3D效果的网页模板,今天我们来分享的这篇教程是一个比较另类的网页布局,3D网页布局。像这样的网页,做成个人主页是一个不错的选择,但是如果用来做商业页面的话,得有勇气了.

先看看最终效果图

2011062708050802

效果不错吧,那么就一起动手吧。

1。打开photohshop软件,新建一个1200*1200文档。设置前景色:“#424241″背景色: “#191919。然后在工具箱选择“渐变工具”,设置如下图:

2011062708050807

渐变效果如下图:

2011062708050884

2。选择“文字工具”打上你网站的名字和宣传词,效果如下图:

2011062708050810

接下来给这些文字添加一些图层样式:

2011062708050849 2011062708050879 2011062708050888 2011062708050949

最终的效果如下图

2011062708050916

3。接下来我们给网页添加一个搜索框,选择“圆角矩形工具”并设其圆角的大小为:15px.在页面的右上角画一个圆角矩形。

2011062708050990

接下来给这个矩形添加一个图层样式设置如下图:

20110627080509662011062708050938

最终效果如下图:

2011062708050977

再次选择“圆角矩形工具”并设置圆角的大小为:5px。画一个比较小的矩形,按ctrl+enter把路径变为选区,然后给这个选区填充白色。

使用矩形选区工具,把这个小的圆角矩形裁剪后半截,按ctrl+x,再按ctrl+v复制到一个新的图层,然后暂时隐藏起来,留到后面要用。

2011062708050909

接下来给这个矩形的前半部添加一个图层样式,设置如下图:

2011062708050908

2011062708051076

其效果如下图:

2011062708051064

下面我们把刚才隐藏的后半部打开,利用图层样式,把它做成一个按扭。

20110627080510982011062708051046

新建一个图层,我们给这个按扭添加两条1px的线条,一条填充白色,一条填充黑色。并设这个图层的混合选项:soft light最后的效果下图:

2011062708051120

4。接下来我们来建一个3D导航。

新建一个图层,在距离搜索框下的100 px左右,画两条1 px宽950 px长的线条,一条填充黑色,一条填充白色。并混合模式:叠加.

2011062708051194

新建一个图层,选择“矩形选区工具”画一个与线条一样宽的矩形,并填充白色。

按键盘上ctrl+T组合键,右击菜单选择“透视”。把鼠标移到左边的节点上按住不放拖动,最终效果如下图

2011062708051182

接下来双击这个图层打开图层样式的对话框,设置如下:

20110627080511902011062708051142

选择“椭圆选框工具”画一个椭圆,效果如下图:

给这个椭圆选取区填充黑色,并设置它的不透明度为:50%。如果你一步一步跟着我做的话,你就会得

到下面的效果。

2011062708051261

5。下面我们来给导航加一些元素。我在这个网页下载一些图标:http://apathae.deviantart.com/art/W-R-E-N-84310039

给第一个图标添加一个外发光的效果(在图层样式里添加哦)。

2011062708051218

按ctrl+J复制图标,再按ctrl+T,在右击菜单中找到“垂直翻转”。然后选择:滤镜-模糊-高斯模糊,给这些图标添加一些模糊的效果。

2011062708051224

点击图层面板上的“蒙版”图标,给这些图标添加一个蒙版,然后选择“渐变工具”渐变色彩从“黑–白”。然后使用渐变工具从上到下拖拉。最终的效果如下:

2011062708051254

最后我给第一个图标添加一个“小提示”的图标,效果如下图:

2011062708051289

6。接下来我们来完成页面的主体部分。

使用“矩形选区工具”来画出主体的部分。要注意的一点是矩形的大小要和导航的一样大。

2011062708051263

给这个矩形添加一个图层样式,设置如下图:

2011062708051253

给主体添加你想要的内容,在这里我把主体分成了三个部分来添加,其最终的效果如下图:

20110627080512272011062708051233

7。嘎嘎。。。终于快大功告成了。最后我们来给页面添加页脚。

在主体的下面添加两条1 px的直线,一条填充黑色,一

条填充白色。并混合模式:叠加.(有没有印象哟,上面我们也做过同样的步骤).

最后加上你网站的信息,这样一张较为较特殊的网页布局就完成了。

2011062708051303

微海报分享

Related posts

2020年8月6日

Illustrator快捷键


Read more
2020年4月20日

3-3 课 Keyshot渲染实例(吉他)——材质图的应用


Read more
2020年4月20日

3-2 课 Keyshot的HDRI贴图的编辑功能


Read more
2020年4月20日

3-1 课 Keyshot场景的视频教程


Read more

搜索本站

最新文章

  • 产品设计高级班学员作品 2021年3月17日
  • 3dmax 2021 中文 2021年2月4日
  • Revit2020 中文 2020年12月3日
  • 广州地铁六号线香雪站BIM咨询案例 2020年9月15日
  • 图学会全国BIM技能等级考试 2020年9月14日
  • 国家职业资格培训鉴定实验基地BIM证书 2020年9月14日
  • 绿色建筑产业联盟BIM证书考证 2020年9月14日
  • 2019全球建筑学院排名TOP 20 2020年9月11日

标签云

3DMax软件下载 AutoCAD软件下载 BIM技术 BIM技术经典 BIM教程 BIM软件下载 CG插画 CG插画经典 UI设计 UI设计教程 UI设计素材 Vray软件下载 产品设计作业 产品设计作品 全模型建筑场景 合作企业求才 园林设计作业 地毯 室内家具模型 室内整体模型 室内设计作品 室内设计素材 小砖块 平面设计 平面设计作业 平面设计教程 平面设计经典 平面软件下载 建筑园林素材 建筑犀牛作业 建筑设计经典 我们的风采 技巧 摄影 摄影,技巧 效果图 教程 最新动态 砖墙贴图 网页设计教程 网页设计经典 苹果MAC软件下载 设计动态 设计动态经典 高清贴图

严老师电话|微信|

手机:18902259698

梁老师电话和微信

手机:18902250768

QQ咨询

严老师 QQ 275043888

QQ联系咨询课程

晶网设计培训是广州建筑室内设计培训知名机构,拥有专业建筑犀牛课程,BIM培训考证,室内设计学习,园林景观学习课程等完善的广州室内设计培训教学机构。

地址:广州天河北路高科大厦A座3001室(地铁三号线华师站B 出口,前行20米左转就入A座大堂, 3号电梯上30楼)联系电话 020-85210826

©2018 晶网设计 粤ICP备10225019号-1
  • BIM咨询
  • 建筑动画
  • 园林景观
  • 设计方案效果图
  • 各类建模
shejizhizuo
  • BIM咨询
  • 建筑动画
  • 园林景观
  • 设计方案效果图
  • 各类建模