当前位置:首页>ps实例教程>ps网页设计>网页模板>教程内容

PS创建一款简洁大方的欧美商务网站首页(6)

来源:站酷 作者:wangyufeng_888 学习:15607人次

  一篇简单创建欧美商务网站的教程。在本教程中,我将告诉你如何用PS构建创建欧美商务网站。这样的布局可用于业务布局,企业网站,甚至是一个WordPress主题。

ps教程:www.16xx8.com_PS创建一款简洁大方的欧美商务网站首页制作教程 教程

  先看看photoshop教程整体样式:

ps教程:www.16xx8.com_

  开始,创建一个新的文档,将填充背景层颜色值:#ece5db。

ps教程:www.16xx8.com_

  1、在底部的布局,创建一个圆角矩形工具。设置前景色为:#f6f2ed。

ps教程:www.16xx8.com_

  2、为圆角矩形添加如下的图层样式。

ps教程:www.16xx8.com_

 

  3、继续使用矩形工具,在网页头部创建一个简单的矩形,填充颜色 #2d2b26。

ps教程:www.16xx8.com_

  4、复制网页头部的矩形,放在底部布局。 复制图层的快捷键 CTRL+J 。

ps教程:www.16xx8.com_

  5、请添加以下层样式。

ps教程:www.16xx8.com_

  6、在头部矩形下创建另一个形状。在这里以后放置logo。

ps教程:www.16xx8.com_

  7、也为这个形状添加一些简单的图层样式。

ps教程:www.16xx8.com_ ps教程:www.16xx8.com_

 

  8、使用圆角矩形工具,创建一个形状。可以创建成一个幻灯片形式的banner。

ps教程:www.16xx8.com_

  9、加入banner图片, 建议使用唯美的图片。

ps教程:www.16xx8.com_

  10、加入文字导航。这里样式的是大字导航名称,下面辅助的解释说明信息文字。

ps教程:www.16xx8.com_

  11、为导航添加一些垂直的线。

ps教程:www.16xx8.com_

  12、放大导航区域,看清线条的处理。

ps教程:www.16xx8.com_

 

  13、加入Logo。

ps教程:www.16xx8.com_

  14、在logo区域的右侧,加入网页搜索框。

  要创建这个需要使用圆角矩形工具。如果你看我前面的教程,会发现我已经使用这个搜索表单的图层

  样式。

ps教程:www.16xx8.com_

  15、在这中间的布局我要添加一个图像和一些内容。

ps教程:www.16xx8.com_

  16、如下设置图层样式。

ps教程:www.16xx8.com_ ps教程:www.16xx8.com_

  17、请查看下面的图片,是如何填补了网页主体的布局。

ps教程:www.16xx8.com_

  18、这是最终的结果。

ps教程:www.16xx8.com_

 

学习 · 提示

  • 一定要打开PS,跟着教程做一遍,做完的图到这交作业:提交作业
  • 建议练习时,大家自己找素材,尽量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到论坛发帖提问:新手求助
  • 加官方微信,随时随地,想学就能学:ps_bbs,或扫右侧二维码!
  • 关注我们学更多,每天都有新教程:新浪微博 抖音视频 微信小程序
- 发评论 | 交作业 -
最新评论
暂无评论,交个作业支持一下吧~

关注大神微博加入>>

网友求助,请回答!