PS合成教程,PS绘画制作,PS基础教程,PS抠图教程,PS滤镜教程,PS美化教程,PS实例制作,PS调色教程,PS网页制作,PS文字教程,PS新手教程,PS修复教程,PS照片处理
当前位置: 网页制作 > PS设计教程之如何制作一个时尚的商业模 (‾◡◝)

今天我们将在Adobe Photoshop中设计一个时尚的商业模板。该模板包含页眉(header)、图片轮换、服务区域、视频,关于我们、页脚(footer)等内容。通过本教程,结合图案、纹理、颜色等元素,轻松几步即可制作出3D效果的界面。

Snickles: Create A Modern Business Template In Adobe Photoshop

下图是今天我们将要制作的模板,点击可以全屏预览。

本教程需用到的资源

· 背景纹理

· 用户界面元素

· 社交网站图标

· 图标

· 秘鲁AtixVector的插画作品

第一步:创建文档

在Photoshop中创建一个1400像素x1700像素的文档。

标尺工具在本教程中非常有用,使用之前要确保标尺和参考线已经显示

· 标尺快捷键:Ctrl+R

· 参考线快捷键:Ctrl + ;

使用标尺工具时,信息面板也非常重要,用标尺进行测量时,相关信息会先在在信息面板。如果没有显示,你可以到窗口(Windows)勾选上信息(Info)这一选项。

站点的内容区域的总宽度为960像素。所以我们先创建第一条参考线,进入到视图(View)中的选择新建参考线(New Guide),设置值为220像素,重复步骤将值改为1180像素。这样可保证站点内容区域居于整个画布中央(译者注:即左右各为220像素)

第二步:为Header和Slider创建背景

我们要让背景表面呈现出3D效果,以放置幻灯片展示区。顶部安放的是网站标志,导航条和RSS订阅图标。

使用矩形工具(U)创建一个960像素的,颜色为#092f56的矩形。接下来,用标尺工具从该矩形的底部拉一条距离(该矩形)顶部为140像素的水平参考线。

添加一条颜色为#062340,大小1像素的分割线,记住,只有该分割线在横向参考线的上方,距离为1像素。

用矩形选取工具(M)创建一个图示选区。设置前景色为#000,然后选择线性渐变(Linear Gradient)前景色到透明填充该选区。设置图层样式为正片叠底,不透明度为30%。

用矩形工具(U)创建一个45像素的矩形,放在图示位置。

应用图层选项

投影颜色:#000

内阴影(内阴影颜色)颜色:#0f3b6

渐变叠加:使用线性渐变拉渐变色:#051f3a, #082c50

描边颜色: #06213a

效果

接下来,使用已经下载的背景纹理。选择Paper 9放到图示的画布位置。

将图层混合模式设为正片叠底(Multiply),不透明度设为30%。待我们制作好Header和Slider之后,会为背景增加高光效果。

第三步:制作Header

页面包含标志,导航和RSS订阅。

网站Logo

我使用的字体是Snickles,可在Font Squirrel中找到。按照以下的字体设置键入网站名字。

字体设置

字体名:Snickles

字体样式:正常

字体大小:60pt

注意:网站的标志距离顶部为75像素。

应用图层样式

投影颜色:#000

内阴影颜色:#fff

渐变叠加:#c0c0c0, #ffffff

效果

导航条制作

下载RSS订阅按钮,放置在图示位置,并添加上图示文字:Signup To Newsletter

字体设置

字体名: Arial

字体样式: Regular

字体大小: 12pt

字体颜色: #fff

应用图层样式

投影颜色: #000

内阴影颜色: #fff

渐变叠加颜色: #f38600, #fed676

绘制一个580像素 x 50像素,半径为20像素的圆角矩形,与顶部距离为75像素,如下图所示:

应用图层样式

投影颜色:#000

内阴影: #fff

渐变叠加颜色:#fea201, #fccf6a

效果

用文本工具在导航条上分别写上Home, Blog, About Us, Free Consultation和Contact Us。 各个链接之间的距离为41像素,

字体设置

字体名: Helvetica Neue

字体样式: Roman

字体大小: 12pt

字体颜色: #fff(Home的颜色), #ac5b00(其余链接的颜色)

Home文本层与其它链接有所不同,先复制一个图层,将其放在原始文本层下,用键盘上的移动键轻微向上移动1像素,将字体的颜色改变成#d38904。其它的链接放在原始文本层之下,下移1像素的距离,并将颜色变为#ffe91e。这下,各个链接看起来有浮雕效果了。

接下来使用直线工具在每个链接之间添加分割线,分割线颜色为#fee79e,大小1像素,放置在图示位置。

在所有文字图层之下,创建一个图层,画一个70像素 x 30像素,颜色为#ee9e0d的圆角矩形,放在图示位置。

应用图层样式

投影颜色: #fff

内阴影颜色: #000

效果

RSS订阅源

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

上一篇:

下一篇:

相关推荐

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

精彩评论

  • 一位WordPress评论者(1年前 (2020-05-11))

    嗨,这是一条评论。 要开始审核、编辑及删除评论,请访问仪表盘的“评论”页面。 评论者头像来自...

    评:世界,您好!

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线