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

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

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

我们要使用缩放,钢笔工具,椭圆工具,圆角矩形工具绘制一个卖萌,简单的机器人。这里不多描述如何绘制这个机器人了,看图吧。

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

把绘制成功的机器人群组,ctrl+鼠标点击云层的缩略图,再选中机器人的t添加一个图层蒙版,目的是把他藏到云后面,蒙版的方式上面介绍过,重温下吧。

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

现在我们就来画鸟和徽章。我们使用钢笔工具,画笔工具和横排文字工具。如何,有详细的绘制过程。

用自己的方式绘制出来也可以哦。

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

第4步 – 第一个分栏绘制

首先,创建一个区域框,我们将添加团队成员的信息。使用矩形工具绘制一个480×425白色矩形,上下添加两个灰线(这里可以使用剪切蒙版,不会的同学把尺寸对齐就好了),并添加一段文字 图中字体为Delicious。为文字和白色矩形添加图层样式如图

混合模式为正片叠底,透明度4%黑色,取消全局光角度42°,距离3px,大小0px。

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

接着来,在辅助线的帮助下,添加照片和资料,自己找图占位吧。

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

下面是每个字体的样式,尺寸,颜色

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

还记得上面我们绘制过相同的箭头了么。同样的方式,再绘制一个。用矩形工具,然后再辅助线的帮助下,创建一个矩形的形状图层arrow,添加锚点工具和直接选择工具。

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

为他添加阴影。复制这个图层得到arrow副本,这里你可以隐藏图层arrow,设置颜色为#000,不透明度为5%。ctrl+t然后右键选择变形径,稍作调整,得到以下图形。

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

好了,现在显示刚才隐藏的图层arrow,并提到副本那层上面。

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

使用横排文字工具来创建一个“——–”字符串,你可以栅栏化和变形得到下面的效果,还添加了柔软的阴影。(凭感觉吧)

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

最后添加文本(有点小投影哦)。

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

现在创建三个街区,该工作室提供的服务的描述。在本节中,我们使用真棒图标集,创造了由灰粉阿巴斯为WeGraphics,WAPP卷。2和WAPP卷。

记住:在这种情况下,导游是真正有用的,以填补图标和文字部分。

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

 

添加三个“点”(一个不错的阴影),提高1px的白色阴影的文字,如下图所示。

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

我们创建也是一个不错的菜单,只需在下面的白框,它应该是在这一点上,清楚如何实现这个菜单。我们增加了一刚一柔内阴影“箭头”。

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

第5步 – 中间带

中间的元素,我们的设计是一个内容丰富的信息图表中引入的一大功能区,其中包含一个口号。为了实现这一功能区,我们将创建5个自定义形状使用钢笔工具,像往常一样,(我再次提醒的是,如果你是一个初学者,你可以阅读入门:Photoshop的钢笔工具,以了解更多有关如何使用这工具)。一起来看看究竟是什么样的形状,我们需要绘制(注:主要形状和#798ea4为较深的形状),我们将使用#497287。

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

学习 · 提示

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

关注大神微博加入>>

网友求助,请回答!