• 周大福收购了 ENZO,这会是进一步发力内地市场的开始吗?

  • VALENCIA chair 一款精致且富有创意的椅子

  • Quadrato Knife,追求极致品质

  • KENZO 也换新 logo 了,设计有些特别

  • prada 快闪店点亮巴黎老佛爷百货公司

  • 美国桌游发行商 Pandasaurus Games 启用新 LOGO

  • 一封来自开封双龙巷的共创之邀

  • 2020 OUT OF WHITE——冬奥崇礼, 不止于白

  • IS Instore 为阿迪达斯设计引人入胜的品牌体验

  • 【2019 红点奖】JUCE Arena / 会议防干扰装置

  • monitillo 1980 品牌展 彰显大理石不凡之美

  • 可随身携带进行户外探险的“分离式 Hevi 扬声器”

  • 微信新增十款默认表情,深受群众喜爱的「万能表情」终于来了!

  • 普通风景 / NaCl illustration studio

  • 狗狗日托班 一大波超萌睡姿来袭

  • Facebook 推出 Lasso,这是要正面刚抖音了

  • AI 画作的首场拍卖会确定了时间,10 月底佳士得将带来历史性的一刻

  • 微软正式发布 Surface Hub 2 是协同工作的未来吗?

设计

如何设计网页 BoxedArt 网站设计教程

贡献者: lizzy 来源:Arting365.com 时间:10年前 热度:

      这篇 photoshop 网站设计教程是 2009 年度 TOP30 佳 photoshop 精品教程   里面的系列教程之一,我们对网站煞费苦心的设计感到非常的自豪,好了,我们将展示出设计秘密。好了,让我们开始这一步步指导大家如何在 photoshop 中设计网页


这个 photoshop web 界面教程分为以下几个部分:

1. 背景  

2.header 部分  

3.body 部分  

4.footer 部分


背景

第一步:创建一个画布

      首先,打开 photoshop 创建一个新的项目。你可以点击文件 > 新建或按下 CTRL+ N 快捷键来创建。我们选择一个普通的画布大小 1000×900,当然这些设置可以在后期增加。



第二步:应用渐变

      既然我们的画布已经创建了,是时候开始背景的设计了。创建一个新层(快捷键 CTRL+SHIFT+N)。接着给这个图层从左往右添加渐变前景色设置为 #edd8af 背景色为 #ede4c9. 这个颜色用来表示盒子的颜色。


第三步:添加纹理


我们想要 BoxedArt 背景设计看起来像厚纸板的效果。创建另一个新层,颜色填充为 #bcb6a9。下一步应用胶片颗粒艺术效果设置参数如下。接着为了使它看起来粗糙一点,我们给它应用一点高斯模糊效果。








以下就是我们应用这些效果后背景图层看起来的效果。



HEADER 部分


第四步:导航条设计


顶部的导航区域部分我们放置了一条条状的带子。我们可以看到这种带状风格在很多网站都有应用,不过我们这里用到的有一点不同。由于 BoxedArt 想要将这个设计看起来像用来发送邮件的盒子。为了创建这个导航条我们需要从 bigstockphotos.com 上下载一个带状的图片,使用自由变换工具(在编辑菜单下选择自由变换或者快捷键 CTRL+T)沿着顶部的区域伸展开来 。接下来创建透明效果我们要把图层样式设置为线性加深。下面就是效果:




第五步:老邮票导航按钮


停留在盒子主题,我们要让这个导航按钮看起来有点破旧磨损邮票。为了达到这种效果列,我们需要一张老邮票(还是在 bigstockphotos.com 上下载)。下载后第一步是描出邮票的路径,从背景中提出来,邮票上依然有图像。为了覆盖邮票上的图像,我们用一张黄色的纸张粘贴在上面也就是添加一个纹理效果。


下一步,我们要给导航按钮添加一些颜色来区别各种不同类的导航,我们在邮票上添加一些装饰花纹效果,在你完成创建好颜色盒子后,我们把这个层的样式修改为线性加深以便颜色能与老照片混合在一起。然后我们增加另一个新层自上而下颜色为黑白我们给这个图层添加胶片颗粒艺术效果设置如下,最后我们把图层设置为正片叠底,把这个不透明度设置为 60%。








注意:您可以在上述屏幕快照看到创建的邮票图层。

第六步应用导航按钮到导航条上


现在我们已经创建好了几个不同颜色的邮票按钮,是时候来完成最后 header 部分的准备工作了,把导航按钮应用到导航条上,我们通过给每个导航按钮应用由 mathilde 设计的 Sketchy icons 图标来添加一些手写效果。这些 icon 图标是放置在每个颜色盒子,并调整了中心图标的位置。同样的步骤把 icon 应用到每个邮票上去。




下一步,对每个邮票使用自由变换工具(CTRL+T),将他们调整不同的朝向给他们一种拍打的效果。这一步后,我们切换到文字工具,每个分类使用一种手写字体。这里我用到的是 “Loved by the King”. 最后我们的导航条就完成了。



第七步开始顶部介绍区域


首先创建一个新层(CTRL+SHIFT+N)在工具栏中选择矩形选框工具。现在在页面上创建一个矩形使用白色来填充。这块区域将被用来当做一张白纸。




好了我们已经完成白色纸张部分了,在白纸图层下面创建另一个新层然后填充黑色,这个将用来创建阴影。完成之后我们转到滤镜 > 模糊 > 高斯模糊半径设置为 6.5. 之后把这个层的不透明度设置为 20%,向右移动 5pixels。然后添加主要的文字,这样的话短语”Simplify and Save”会被用到,位于顶部纸张部分。




现在你看在白纸下面有阴影,但是纸张并不是粘在哪里的。所以我们在纸张的一边来添加一些胶带,如先前的教程一样,我们在另一边添加了一个邮戳来保持画面的平衡。在你的纸张完成后,我们选择一些手写字体来添加一些文字。看起来的话想事包裹上的信息。最后加亮这些图层按下 CTRL+ T 自由变换工具,角度设为 -1.5 degrees 使它看起来更加具有真实效果。



第八步 贴上一个便签


我们使用了一个便签设计来分开空间来介绍我们网站的优惠注册信息。这个在整个盒子主题上运用的非常好,设计这样一个便签效果需要创建另一个新的图层,选择钢笔工具使用钢笔工具来绘制一个方形区域如下图所示




在你完成之后转到路径面板,按住 CTRL 键点击路径图层,接着你会看到方形区域已经载入选区了,之后使用前景色 #fffb78 背景色#fffcd1 从左上角到右下角绘制渐变。你将会看到这样一个熟悉的黄色便签纸形状。




第九步


现在我们需要再一次添加阴影效果,给这个便签纸添加深度,所以创建另一个新层 (CTRL+SHIFT+N)。过程如之前给白纸创建阴影差不多,但是是将不透明度设置为 40%。你需要变换一下阴影来创建一种倾斜效果,轻微的拖动一下如图所示。



第十步给便签纸添加内容


下一步,给便签纸添加一些文字,在我们的便签纸中我们要添加一些加入等按钮,为了创建相似的按钮首先我们绘制一个盒子使用绿色填充,然后添加一个蒙板选择一种 grudge 笔刷。下一步遮住按钮的一些部分看起来就像破损一样,这就是我们创建邮戳的效果。






这个是最后呈现的效果。



BODY 部分


第十一步卷曲胶带纸标题


我们转到 body 的内容部分。在这个设计中,我们要创建 2 栏和一些图标。我们使用的是已经有的图标因为我们喜欢这种手写效果包括 Handy Icons and Sketchy icons.。在 body 开始的区域我们要一个标题栏用来罗列我们网站的内容。我们把这个 header 部分做成卷曲效果。至于说到透明胶带我们使用的来自 bigstockphoto 的图片。为了增加胶带的深度,我使用矩形选框工具来选择胶带的一些区域。在选中选区后我们复制这个图层按下 ALT+SHIFT 向左边移动,然后在向右移动一下使它看起来显得长一些。为了避免缝隙的产生我们使用图章工具里拼合这些缝隙。可以查看下面的效果。




第十二步预览下的小图标


BoxedArt 网站的内容区域包含很多网页模板的预览。创建这种效果我们需要选中矩形选框工具创建一个小的矩形,然后使用颜色 #123057 填充。 这些按钮我们只要复制第一个图层,移动它到第一个图层下面,设置这个图层的透明度这里我们设置的为 40%。重复同样的步骤处理余下的按钮。



第十三步使用针脚线来分开这些区域


为了分开这些主要的分类,为了创建这些虚线我们可以文字工具角度为 90,把这些图层的样式设置为叠加,为了使这些显眼点我们只需复制这个图层 2 - 3 次至于颜色多深取决于你自己。




第十四步填充额外的内容


添加剩下的内容就非常简单了,我们只需使用直线工具来分开每个部分,在添加些图标和文字,这里我们用到的是一种干净的字体 Helvetica Condensed,。下图就是 body 部分的整体效果了。



第十五步—底部广告部分


我们已经到了底部放置广告部分了,这里的带状条将会再一次应用起来,使用先前有的图片作为起点,下一步,我们要使用圆角矩形工具,前景色设置为白色半径为 5px。接着我们需要在设置一些小的圆角矩形,颜色设置为 #f8f7f3 边框用深灰。你可以在下图的图层样式中设置边框(就是一种描边效果)。






这就是我们完成后创建的效果




现在让我们来添加标题和广告到每个盒子中,效果如下图:



第十六步 公告部分


公告部分我们采取的是和 header 部分相似蒙板的方法,当然还有订阅新闻通讯等区域也是这样的方法,就像纸张粘上去的一样。首先我们给 header 部分添加一种厚纸张效果,这个和 body 部分的方法基本一样。至于内容部分,选中矩形选框工具在右下角绘制小盒子颜色填充为 #f9e5a6。完成按下 CTRL- D 取消选区,在选择加深工具,笔刷大小设置为 35pixels 加深棕色盒子的边角区域就像下图所示





最后我们把图层的不透明度设置为 60% 再双击图层在图层样式中添加一些阴影效果,参数设置如下图,然后在添加一些内容。


完成后的效果很不错哦


FOOTER 部分


第十七步网页底部


到了我们创建底部的部分了,首先我们使用矩形选框工具,在页面上选择下图这样一个区域,使用颜色 #462d0f 填充,选择直线工具绘制一条直线颜色设置为#a05d18。




到了底部的分类部分了,我们要又一次绘制一个大的选框,颜色填充为 #472a0b ,图层的不透明度度设置为 78%,接着创建另一个图层颜色填充为 #fffcd1。下一步添加胶片颗粒效果最后把图层的不透明度设置为 30% 图层样式为正片叠底。




完成后你应该看到的样子




最后我们只需重复我们在 footer 部分的操作或者复制图层把它移到底部,这样你就可以添加内容了。看下下面的预览图,是否有些启示列,希望你喜欢。




恭喜!你已经圆满完成这个教程我们在这个 BoxedArt 网站设计中也学到一些有用的 photoshop 技巧知识,

 

lizzy

没有个性签名

评论 条回复
扫进你口袋
微信搜索Arting365design 或 扫描二维码
© 2017 Arting365 Corporation, All right reserved / 沪ICP备05004653