A. 怎么使用Photoshop做活泼手绘风格网页设计稿
怎么使用Photoshop做活泼手绘风格网页设计稿？
这是一篇用Photoshop做网页视觉设计稿的教程，文章将一步步介绍如何在Photoshop中做一个活泼的手写风格网页设计稿。设计过程主要分为以下几个部分：背景、header部分、body部分、footer部分。
下面是效果图预览。 背景描绘 第一步：创建画布 首先，打开photoshop创建一个新的项目。你可以点击文件新建或按下CTRL+N快捷键来创建。我们选择一个普通的画布大小1000×900，当然这些设置可以在后期增加。
第二步：应用渐变 既然我们的画布已经创建了，是时候开始背景的设计了。创建一个新层(快捷键CTRL+SHIFT+N)。接着给这个图层从左往右添加渐变前景色设置为#edd8af背景色为#ede4c9。这个颜色用来表示盒子的颜色。
第三步：添加纹理 我们想要BoxedArt背景设计看起来像厚纸板的效果。创建另一个新层，颜色填充为#bcb6a9。下一步应用胶片颗粒艺术效果设置参数如下。接着为了使它看起来粗糙一点，我们给它应用一点高斯模糊效果。
以下就是我们应用这些效果后背景图层看起来的效果。
方法/步骤2
网页头部 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键点击路径图层，接着你会看到方形区域已经载入选区了，之后使用前景色#fffb78背景色#fffcd1从左上角到右下角绘制渐变。你将会看到这样一个熟悉的黄色便签纸形状。
第十步：给便签纸添加内容 下一步，给便签纸添加一些文字，在我们的便签纸中我们要添加一些加入等按钮，为了创建相似的按钮首先我们绘制一个盒子使用绿色填充，然后添加一个蒙板选择一种grudge笔刷。下一步遮住按钮的一些部分看起来就像破损一样，这就是我们创建邮戳的效果。
B. 怎么修改网页背景代码
一、网页单色背景 - TOP
如果纯颜色的网页背景，只需要对body设置background背景颜色即可
body{background:#FFF}
设置网页背景为白色
二、规律背景图片 - TOP
1、从上到下渐变横向相同背景
渐变从上到下宽度全屏背景效果截图
这种网页背景只需要切出1像素宽，高度合适的图片作为背景素材，如下图：
切出这样一个竖条图片素材作为背景素材
body{background:#FFF url(bg.gif) repeat-x 0}
这样设置这个图片为背景图片靠网页顶部水平平铺，背景为白色，这里注意根据你的图片路径设置好引入图片路径。
2、水平平铺类背景图片
比如2014版DIVCSS5网页，原理和渐变平铺相同，也是切出一竖条后作为Body背景水平平铺实现，这样就全屏网页背景铺满。
css切出这样一个竖条效果截图
代码和第1种相同，只是图片不同而已。对body设置背景图片水平平铺。
三、不规律大图背景 - TOP
常常看到一些专题或形象网页，背景是一种非常大图片作为背景，而通常情况下宽屏和窄屏显示器都能显示铺满的全屏背景图片，就像图片能自适应宽度大小一样的。其实这种实现一样非常简单，将这张图片宽度美工设计足够大，比如市场上最宽显示屏分辨率宽度为2560像素，那么要让这样的宽屏显示器浏览此网页也能铺满全屏，那么你的这张背景图片就必须做成宽度大于或等于2560px宽度的，这样以来宽屏、窄屏显示器打开此网页都能铺满全屏，最小化、最大化、改变浏览器窗口打开背景图片都是全屏的居中的看上去就像背景图片自适应大小一样。
关键：全屏自适应背景图片关键是图片做足够宽，以最宽分辨率显示屏能都铺满，小分辨率自然就更是铺满。同时需要设置这样背景图片作为body背景后需要居中。
假如这张背景图片为：bg.jpg
设置CSS代码：
body{background: url(bg.jpg) no-repeat center 0}
代码解释：设置这个图片为网页背景，通常不平铺（no-repeat），水平居中，靠上显示
四、头部背景图片和底部背景图片内容多少高度可增减头部底部背景不变 - TOP
这里DIVCSS5为大家介绍两种常见头部和底部不同背景图片技巧设置布局方法。
1、头部和版权图片
这种直接将头部背景图片设置为body背景居中靠上显示，底部版权地方DIV设置宽度100%；同时设置此背景图片或背景颜色。
body{background: url(bg.jpg) no-repeat center 0} #footer{margin:0 auto;width:100%;background: url(ft-bg.jpg) no-repeat center 0}
这样即可实现头部底部背景不同，同时不受内容多少高度影响。
2、网页靠顶部上背景图与固定底部靠下背景图
而靠底部背景图片远超出了版权底部盒子高度。
网页靠上靠下背景图片不同，内容区域跨越靠上和靠下的背景效果截图
这样的结构上下不同图片，不随中间内容增高减少影响背景布局，通常对html标签和body设置背景即可实现。
假如顶部深蓝背景图片为“top.jpg”,底部浅蓝背景图片为“foot.jpg”
DIV CSS设置网页背景关键CSS代码：
html{background: url(top.jpg) no-repeat center 0} body{background: url(foot.jpg) no-repeat center bottom}