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

ps网页布局设计实例教程(3)

来源:优设 作者:情非得已 学习:12521人次

怎么样的风格呢?好了,我们申请的“前端形状相同的风格,”你可以看到下面(的模式,我们要使用,是从旧纸上WeGraphics 模式)。

Photoshop设计简洁大方的网页界面,PS教程,16xx8.com教程网

对于两个小三角形,应用以下样式:

Photoshop设计简洁大方的网页界面,PS教程,16xx8.com教程网

启动子添加的口号。

Photoshop设计简洁大方的网页界面,PS教程,16xx8.com教程网

第6步 – 信息图表

需要合成的我们的fictionary设计工作室的创作过程中加入少许的信息图表新生儿从的想法。下面你可以看到大结局的结果(明显的,它只是一个简单的例子,如何发展背后的一个项目,你可以描述一个创造性的过程)。

Photoshop设计简洁大方的网页界面,PS教程,16xx8.com教程网

开始设计的两个圆(按住Shift键画一个完美的圆周,颜色为#3d3d3d)。设置,左侧的形状,填充为0%;合适的形状,设置混合模式为亮光,填充为35%。添加样式,如下所示(为图案叠加为左侧的形状的形状,除了它是相同的)。

Photoshop设计简洁大方的网页界面,PS教程,16xx8.com教程网

需要注意的是左边的圆圈中使用自定义的模式,我们可以采取的步骤2相同的技术来创建此模式。

使用椭圆工具(白色的小圆圈一次,然后把它复制到再次使用)和线工具(重量:3px的,颜色为#FFFFFF)设计图在左侧。集团所有创建的形状和线条,重复的组,将其转换为智能对象,然后栅格化了。现在,您可以将样式添加到该层。

Photoshop设计简洁大方的网页界面,PS教程,16xx8.com教程网

使用钢笔工具绘制一些标签(使用鲜艳的色彩:#d82f4c,#edcd59,4d85a2#598b3b),然后将它命名使用横排文字工具,您可以申请一个的软降shadwo到,标签和文字。

Photoshop设计简洁大方的网页界面,PS教程,16xx8.com教程网

在正确的圈等三个圆圈,设置填充为20%,添加文字(你可以申请一个软阴影的字符串),如图所示。

Photoshop设计简洁大方的网页界面,PS教程,16xx8.com教程网

现在,我们要隐藏超出部分的“设计”与“发展”界。正如已经看到的,我们将使用图层蒙版。

按Ctrl +单击在“图层”调板中的“创意”圆的形状,然后去选择>修改>扩展的值设置为3个像素。

Photoshop设计简洁大方的网页界面,PS教程,16xx8.com教程网

 

按Ctrl + Shift + I反选,然后将图层蒙版的形状命名为“设计”。

Photoshop设计简洁大方的网页界面,PS教程,16xx8.com教程网

重复上述操作,创建一个新的选择和扩大它所示。您可以使用Ctrl + Shift +点击,当你需要添加矢量蒙版缩览图从两个或两个以上的选择,通过点击“设计”和“创意”的形状,在这种情况下,我们创建了选择。

Photoshop设计简洁大方的网页界面,PS教程,16xx8.com教程网

按Ctrl + Shift + I反选,然后将图层蒙版的形状命名为“发展”。

Photoshop设计简洁大方的网页界面,PS教程,16xx8.com教程网

学习 · 提示

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

关注大神微博加入>>

网友求助,请回答!