这篇文章最初发表于2008年
介绍的技巧和技术可能过时。

更深入地了解网页设计的世界,本教程将介绍在Adobe Photoshop中设计生动多彩的现代博客布局的过程。beplay足球从空白画布开始,我们将从头开始创建整个结构和效果。

博客设计教程

这个特别的设计是我目前正在制作的一个Wordpress主题,用于Springy开发,在未来,我们将看一看编码过程,并了解如何将站点集中到最终产品中。

记住,在最初的概念创造过程中,与下面的教程步骤相比,这个过程不那么清晰。进行了大量的实验,并且经常重新制作元素,以测试哪些元素最有效。然而,本演练希望能够很好地理解在从头创建所选布局期间使用的工具和技术。

博客设计教程

打开Adobe Photoshbeplay足球op并创建新文档。我喜欢处理反映更大宽屏分辨率的大文档。记住使用RGB颜色模式,只在屏幕上查看站点,分辨率为72dpi。

博客设计教程

我要处理的第一个领域是页面背景,这就是可以引入一点兴趣的地方,它为高分辨率的用户填补了空间。为背景选择纯色,然后从顶部中心拖动一个径向渐变。显然,颜色的选择取决于你,但这里我用的是绿色和青色的混合物。

博客设计教程

打开一个棕色纸来自最近一篇文章的资源,这将用于在背景中添加一些纹理形式的兴趣。

博客设计教程

去饱和(ctrl+shift+u)纹理,然后添加相当宽的高斯模糊,以去除许多更精细的细节。

博客设计教程

将纹理放置在渐变上,并将混合模式更改为覆盖。将不透明度更改为90%。

博客设计教程

在网站设计中,用户监视器的范围在网站布局中扮演着重要的角色。除非另有要求,我将把分辨率调低到1024×768,因此,在文档中心绘制了导轨,以表示960px的宽度,在元素超出屏幕限制之前,这会在每侧提供大约40px的空间作为一个小填充。

博客设计教程

使用圆角矩形工具绘制一个内容区域,该内容区域填充浅灰色(eeeeee),角半径为20px。注意,在这种情况下,矩形不跨越两个页边距,这是为了在以后的生产线中提供一些设计上的帮助。

博客设计教程

双击矩形的图层,添加一个8px的白色笔画。将“混合”模式更改为“覆盖”,并将“不透明度”降低到30%,以产生凉爽的透明效果。

博客设计教程

为矩形添加一个轻微的内部辉光,使用5倍大小的白色,以产生非常轻微的斜边效果。

博客设计教程

最后添加一个微妙的外部辉光使用黑色在15%的不透明度,给内容区一个轻微的阴影。

博客设计教程

在新层上,画另一个圆角矩形,这一次,10px的角与原来的一样宽。在底部加一点渐变到灰色。

博客设计教程

右键单击“灰色内容”面板的效果,然后选择“创建图层”。在新创建的由笔划组成的层上,使用橡皮擦使笔画在文档中间淡出。

博客设计教程

用铅笔工具在整个边缘上垂直画一条1px的线,给笔画增加一点额外的触感。按住SHIFT键以约束轴,以获得清晰的直尺。

博客设计教程

使用橡皮擦淡出这条线,以匹配其余边框淡出为黑色的方式。

博客设计教程

到目前为止,内容区有一大片灰色的平坦区域,底部会有点暗。上角的半径大于下角的半径,边框具有透明度,可以显示底层背景并向中间淡出。

博客设计教程

放置内容区域上半部分的纸张纹理副本。使用“色调/饱和度”工具(ctrl+u)提供蓝/绿颜色。

博客设计教程

按ctrl键并单击内容层的缩略图以创建选择,反转选择(ctrl+shift+i)并删除多余部分。也可以使用“擦除”使纹理稍微淡出,在顶部留下一条条纹。

博客设计教程

使用铅笔工具在标题下添加一条水平的1px白线。

博客设计教程

再次从内容区域创建一个选择,然后在文档中拖动矩形框以排除大部分选定内容的同时按Alt。在新图层上,向下绘制白色到透明渐变,并将不透明度调整为90%,在页眉添加光泽高光。

博客设计教程

使用矩形选框工具绘制延伸到主内容区域之外的边栏。用灰色背景色(eeee)填充。

博客设计教程

使用“图层样式”窗口中的“笔划”选项向侧栏添加透明边框效果。

博客设计教程

使用外部发光选项添加非常轻微的灰色边框,将排列调整到最大值将使默认的辉光变为纯色条带,这有助于添加此双笔划效果。

博客设计教程

以类似的方式使用“内部发光”选项,在侧边栏的内部添加一个白色的细笔划效果。“扼流圈”选项设置为“最大”,也会使辉光显示为实心块。

博客设计教程

最后,在从白色到浅灰色背景的侧边栏添加一个渐变,以添加一点兴趣和尺寸。

博客设计教程

将侧边栏拆分为各个部分,该计划将为每一组菜单项设置单独的部分。

博客设计教程

类似的方法也将用于博客设计的发布区域。每根柱子都要装在自己的容器里。绘制矩形选择以模拟其中一个容器。

博客设计教程

用白色填充该区域,右键单击侧边栏并复制图层样式。将此层样式粘贴到容器上,以快速添加相同的边框效果。

博客设计教程

布局结构基本完成,模拟页面的文本元素以测试颜色和大小。

博客设计教程

通过创建较小的选择并在标题上方添加渐变渐变来创建导航区域。使用文本工具键入链接。

博客设计教程

获取即将发布的博客文章的内容,粘贴信息并调整文本的颜色和大小,以给出适当的层次结构。标题是最重要的元素,因此大小必须大,颜色必须粗体。尽管元信息并不重要,所以它的尺寸更小,颜色更浅。

博客设计教程

在Post容器的底部绘制一个蓝色渐变的矩形。

博客设计教程

使用神奇的从函数设置图标,添加第二信息,如评论计数和阅读整篇文章的链接。在它们自己的条带中突出显示这些内容将它们与内容分开,但会向查看器提供有用的信息。

博客设计教程

最后添加其他页面元素,如订阅选项。此处的RSS图标的形式为教程或作为一部分免费图标集.

博客设计教程

页面上提供了大量信息,清晰地显示了整个网站的外观。在未来的文章中,我们将研究导出这种设计的元素,并将布局编码为真正的网页。

在Pinterest上共享
没有图像。
65评论 提交 加上你的!
订阅接收spoon图形通讯beplay全方位手机移动娱乐平台

订阅我的时事通讯,成为第一个听到新文章的人

65评论

  1. 干得好,伙计。我喜欢它。但是你使用的质地不好。这对背景造成了额外的影响。

    你能做一个关于这个网页设计的切片过程的教程吗?

    谢谢!

  2. 真是难以置信。我想知道你是否也会做一个切片教程。即使你在我的RSS阅读器里,我来这里是因为我在Flickr上看到了你的主要网站的截图。我从没意识到你有主站点,只是博客。真不错。

  3. 这是一个非常优雅的设计。然而,您打算将整个背景作为单个图像加载吗?似乎它将是一个相当大的JPG和缓慢的初始加载到一个爬行。

  4. 我感兴趣的是,在编写代码时,您将如何处理背景。我知道你可以把它做成一个图像,但是装载会很慢?

  5. 你好!优秀的图坦卡蒙和博客!我真的很期待XHTML和CSS TUT的编码。谢谢!

  6. 多棒的教程啊,提供对Web开发过程的深入了解。

    我,就像很多人都迫不及待想看你如何切,XHTML和CSS这种photoshobeplay足球p设计。

    谢谢你的辛勤工作!

  7. 很棒的教程。

    然而,我有一个问题/要求。你能更详细地解释如何/为什么使用指南吗?我真的很困惑我们如何和为什么使用这些指南。读完这篇短篇小说后,我试着做些研究。但找不到任何有用的指南教程。我在没有使用指南的情况下进行网页设计…从不编码。但我现在想学。

    谢谢你

评论现已关闭