《如何用Photoshop设计一个具有现代感的博客界面》

Part 1：用Photoshop设计一个博客界面 本教程主要是告诉大家如何在Photoshop里面设计一个有活力并具有现代感的博客界面。 我们会从零开始告诉大家如何从一个空白的画布来一步步的制作出整个界面。 这是我为Springy Developments的一个WordPress主题项目中的一个特别的设计，将来我想我们一起来看看如何将这个设计转化为编码的过程以及最后如何将他们制作成最终的产品。 牢记最初的概念设计稿，下面的教程将会一步一步来明确这个过程。想要一个好的设计，大量的试验和一些元素的重新安排是不可或缺的，因为这将让我们很好的理解为什么使用这些工具，为什么这样布局来设计这样一个产品。 打开PS然后创建一个空白文档。我比较喜欢在一个大一点宽屏文档上面开始制作。切记使用RGB色彩模式以及设置为72DPI就好，因为我们紧紧是在屏幕上使用（注，一般印刷是300dpi，而屏幕只要72就够了，CMYK为印刷色） 首先我们来处理页面的背景，这个地方没什么特别有趣的填充物。给背景选择一个素色，然后从上面使用放射性渐变工具一直拖到中间。当然你也可以选用自己喜欢的颜色，在这里我就选择了我选择的是蓝绿色的渐变。 打开一个 牛皮纸 素材， 我们将用它来为背景增加一些有趣的材质效果。 将材质去色 (CTRL+SHIFT+U),然后选择高斯模糊用大一点的像素来抹掉牛皮纸上面的一些细节。 将修改过的牛皮纸材质放在渐变的背景色上面，然后选择混合模式的叠加选项，再修改透明度为90%。 在一个网页设计中设计合理的用户显示器范围是网页布局一个重要的步骤。除非另有 要求 对教师党员的评价套管和固井爆破片与爆破装置仓库管理基本要求三甲医院都需要复审吗 ，我一般都是将分辨率调整到1024×768，因此我在文档的中部将参考线设置为960px宽，两边空白处各有20px宽，这是为了以防一些元素超出之前设置的屏幕分辨率。 使用圆角矩形工具画一个内容区域如上图所示，颜色为浅灰色（#eeeeee)，圆角半径为20px。注意在这种情况下圆角矩形并不要两边顶满，因为下面右侧还要添加一些东西。 双击圆角矩形图层然后添加8白色描边，宽度为8px，混合模式为叠加然后调整透明度为30%，这样就会有一个很酷的透明效果-_-” 再次为这个圆角矩形兄添加一个内发光，白色的5像素即可，这样会让边线产生一个很细小的倾斜效果。 最后添加一个外发光，黑色的15%透明度的，于是一个淡淡的内容区的阴影就这样出现了。 新建一层，再画一个圆角矩形宽度一样，但这次要改改圆角半径，10px足矣。在下面给这个灰色区域添加一点点渐变让他有一种倾斜度。 复制一个之前的内容区域，然后用橡皮工具从中间将两侧的边线擦出一个渐变来。（注，这里最好选择一个图层蒙版然后用渐变做，橡皮的透明度不好控制，不知道他是怎么做到的-_-”） 在整个边线上再用铅笔工具画1px的垂线。这里可以按住shift来保持角度和垂直。 还是要慢慢擦出来渐变（其实这一步可以在擦边线之前做好然后再套上图层蒙版做渐变。） 这样一个巨大的灰色内容区就这么的呈现在眼前鸟，并且下部还有些渐变哦。回顾下来看看，顶端的圆角要比下面的大，边线是在中部渐变透明的。 将一个纸张的材质盖住内容区头部的一部分。可以用色相/饱和度（ctrl+U）将其调整为蓝绿色。 按住CTRl然后点右边图层中内容区的缩略图，可以创建一个选框，然后反选（CTRL+ALT+I）然后删除多于的部分（注：这里更推荐另一种方法，首先确定纸张层与内容层相邻并且纸张层在内容层上面，然后在纸张层上右键，创建图层蒙版，就可以出现类似的效果，后面调整起来比较方便），然后还是擦出一条渐变来。 用铅笔工具在头部的下面画一条1px的横线。 选择内容图层然后用上面的方法建立一个选取，按住ALT键来缩小选区如上图。然后新建一个图层在这个选区内填充上白色并且改变透明度为90%这样然后略微做一下渐变，这样就在头部添加了一点高光。 继续用矩形选框工具在内容区域上面画一个侧边栏。依旧填充灰色背景（#eeeeee） 添加一个透明的边框，跟上面做的方法差不多选择描边选项即可。 继续用外发光来添加一个浅灰色的边，调整扩展值到最大这样我们可以得到一个双边线效果。 再用内发光工具给侧边栏添加一个白色的边线效果，方法跟上面的一样。调整阻塞选项到最大值，可以让光出现的比较柔和。 最后在侧边栏上添加一个从白色到灰色的渐变来增加些细节和层次。 将侧边栏裁开，因为之前 计划 项目进度计划表范例计划下载计划下载计划下载课程教学计划下载 的是每一个菜单目录都是一个单独的区域。 > 博客日志区的设计方法跟前面的很类似，每一日志都需要有一个自己的封闭区域。画一个矩形来模拟这些区域。 填充上白色，然后右键点击侧边栏将他的图层样式拷贝走然后粘贴到这个日志区域图层上。（偷懒的方法一定不要忘记嘎） 到这一步基本上框架已经搞定了，下面我们在页面上做一些文本测试来看看我们的颜色和大小有没有问题 创建一个导航区域，注意要有渐变，做法参照头部的方法。输入导航文字。 随便扒拉一篇你要发布的日志复制过来，调整颜色和大小和行间距。标题是相当重要的元素所以必须要粗点颜色要醒目点。一些作者信息例如时间日期等到时不重要的，所以他们可以小一点颜色浅一点。 在内容区域底部画一个浅色矩形。 用一些看起来很棒而且免费的按钮来设置一些函数，添加一些次级信息例如留言数，继续阅读等。这些信息对访客来讲还是很有用的所以将他们另外隔开放到另一个地方来。 最后添加写其他页面原色比如订阅啦等。RSS图标你可以在教程很多地方找到例如 a tutorial 活 free icon set. （国内的站酷不错） 咣当当最后一个华丽丽拥有良好的页面信息和清楚的框架结构的博客界面设计就这样的出来鸟。下面我们会讲解如何将这个设计稿转化为真正的网页。 终于翻译完了，其实主要是想看第二章如何布局的，不过看到这个教程比较完备就顺便先把这个翻译了。有些地方是按照自己的方法来翻译的，不过都能达到类似的效果。如果有不足还望大家指出~~~ Part 2如何将PSD效果图制作成XHTML+CSS文件 继上一篇教程，《如何用Photoshop设计一个具有现代感的博客界面》，现在我们来看看如何将这个概念设计转化为完整的由XHTML和CSS组成的 标准 excel标准偏差excel标准偏差函数exl标准差函数国标检验抽样标准表免费下载红头文件格式标准下载 网页。从PS里面将之前的设计稿从PS里面输出然后再加上编码，这样我们就会得到一个完整的博客设计。 在上一个教程里面，我们创建了一个包含了所有框架，设计，色彩，拟议定的板式和基本内容的设计模型。 现在是时候让我们回顾一下之前的计划和概念设定来看看——哪些需要使用纯粹的xhtml和css，哪些需要使用到原来的图片。 首先被导出的元素是大的背景图。隐藏掉其他所有页面的图层，然后选择大的背景图导出为web使用格式。 从第一印象上来讲，这个大图片很容易让人觉得他很大，所以体积会变的很大。但是事实上用jpg格式调整好质量质量之后这个文件仅仅才30K而已，这里需要你来拿捏文件的质量和整体的体积的平衡。（译者注：图片如果太大可以适当用高斯模糊来减少细节这样图片体积就会缩小点，一般来讲背景图不必使用特别清晰的底图，增加体积却又吸引眼球影响阅读。） 接下来导出的是主体内容区，画出另一个大的选区，其重要包括整个中部面板——当然别忘记那些带有效果的地方比如阴影，半透明的边框等，都要一一包含在内。注意还要考虑到头部复杂的透明度的导航区域，所以选取应该直接延伸到顶部。 一般来讲允许网页垂直重复的话，只要选择中部区域一小列内容导出就可以，我们后面可以让他垂直重复来达到设计稿上面的效果而不增加文件体积。 下面来完成页脚部分，选择同样的宽度，然后高度要包含灰色渐变的图形。 为了导出侧边栏，主体区域现在暂时的使用垂直拉伸。 因为之前的设计，所以这个独立的侧边栏的图形将充分利用两个图片——上部是足够长的区域，以便容纳更多的内容防止超出设计的部分，另一个是一个小的底部，底部宽度要与上部一致。这是一个类似用于菜单的滑动门的技术。 这个长的可以自动伸缩的部分导出的时候要注意包含边线的透明效果。 下一步是薄的底部部分，这样侧边栏部分就完成了。 另一个导出的小的可自动伸缩部分的是导航栏的背景，它可以根据菜单文字的长度来自动伸缩。这里需要使用png的文件因为可以利用其透明度来覆盖住不同颜色的背景，这样看起来会更~和谐~~~~ 文章部分在概念设计稿上是跟侧边栏有一样的边线效果，但是因为他们没有覆盖在其他的图片上并且也没有复杂的透明度等问题，所以我们将会用纯粹的css代码来实现他的效果。 接下来就是使用了蓝色渐变的内容区（也就是放留言数继续阅读等的区域），这个地方也是导出一个瘦长的区域然后横向重复就能达到其效果。 小的评论气泡，箭头，rss标志和电子邮箱图标等，都随着logo一起单独的导出即可，最好使用png格式这样适应性更强——当然如果你确定放弃给ie6的用户使用或者浏览的话。 现在概念设定已经完整的被分成了独立的图片，五部分的框架被拆分成了13个图片文件。他们一共才95Kb，这么来看即使是拨号网络也能比较流畅的观看网页了。 一个html网页设置控制结构的布局是必须的，上面那段话你没必要自己写，随便查看一个网页的源文件都能找到。一个单独的css样式 表 关于同志近三年现实表现材料材料类招标技术评分表图表与交易pdf视力表打印pdf用图表说话 pdf 是将包括视觉规则的设计。然后让html文件链接到这个新建的css样式表文件。 我们将内容和背景放到一个含有ID的div的容器里面。不过要记得我们有一个浅色的背景在最后面需要垂直重复的说，直到CSS3才更广泛的支持第二个div在这个图像之上。 网站名字用H1的标签来控制，他也是logo的基础，上部导航和rss /电子邮件订阅选项是作为无序列表。 接下来开始用CSS重新构建页面，清除浏览器的默认设置。背景图像是附属于body和全局字体风格的设置。容器，内容和页脚的div也要使用适当的背景图片和风格设置。 继续写CSS样式表，接下来的一些元素用代码写出来慢慢加上，建立一个无序列表然后加上合适的图片和颜色。 到目前来讲就可以在浏览器里面看看啦～基本上的大型已经出来啦～logo啊导航啊内容区啊基本上已经颇具雏形鸟。 接下来是在这个框架上渐渐丰满起来，用一个容器来搞定文章发布区，就像我们前面说的一样，这个地方我们不用图片只需要用代码就能搞定。 文章发布区的边线和颜色以及文章标题和段落文字都继续用CSS的样式表写好（实在不行就照抄吧，囧rz）。对于网站开发来讲，大部分用 firefox的朋友有福了，这意味着我们可以用moz-border-radius这句话来让我们的页面有一个很漂亮的圆角就跟我们当初的设计稿一样。不过对于其他浏览器来讲我们只能降级让其实现为一个直角鸟。（不过貌似我记得IE下面也可以用css写出来圆角的说，就是比较麻烦，这里给一个参考来）