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

本教程涵盖了多部分系列的第一部分,我们将在其中完成构建时尚设计组合网站的过程。在这篇特别的文章中,我们将在photoshop中创建视觉概念和总体设计概念,beplay足球使用各种效果,混合模式和图层样式以创建设计的所有详细元素。

时尚组合网站设计

我们将要创建的网站具有一个漂亮和干净的布局,并利用一个对比的标题区域来吸引用户。否则,这个概念将被设计成大字体和界面元素上的细微细节。完成PSD概念后,头上在我的网页设计博客第25行学习如何编写设计代码,然后把它转换成一个完全工作的WordPress主题。

查看公文包Web设计概念

打开Photosbeplay足球hop并创建新文档。我倾向于使用1680×1050的尺寸来了解网站在宽屏显示器上的外观。用浅灰色/奶油色填充背景,并从过滤器菜单中给出2%的噪音值。

右键单击并将所选内容转换为960px,然后绘制参考线以突出显示中心和每侧。

使用圆角矩形工具绘制内容区域,但要使边缘距离导轨大约10像素,以便添加投影效果。

把你的标志贴在设计的中心。如果你想创造一个这样酷的小徽章样式的标志,看看我的旧教程.

使用圆角矩形工具在标题区域绘制一个小按钮。将混合模式更改为“覆盖”,以允许底层纹理显示。

添加一个非常微妙的内部阴影,给人以一个插入的外观的印象。关键是将不透明度向右降低到10%左右。

将按钮复制到徽标的任一侧,然后向每个导航项添加文本。典型的页面可能是主页,关于,投资组合和联系人。

Cmd+单击白色内容区域的缩略图,然后用选框工具按住Alt键拖动下方,以保留较短的选定内容。用黑色填充这个区域。

加载此层的“层样式”窗口并添加图案覆盖。这里我用的是iPhone4风格的织物纹理Palaniraja博士.

在标题区域的底部绘制一个4像素的细边框,并将其填充为浅灰色。

使用黑色到透明渐变沿页眉下边缘绘制小阴影。将不透明度调低到10%左右。

使用Georgia字体在标题区域添加时尚的介绍性标题。添加一点跟踪功能,使字母稍微间隔一点。

使用圆角矩形工具绘制按钮形状,然后使用图层样式窗口开始装饰它。从一个渐变开始,使用来自标题背景的深灰色和浅灰色样本。

通过将内部发光处理为浅灰色的细边框,使按钮具有斜角外观,然后添加1倍深灰色笔画。

用一行文本完成按钮,并调整放置阴影效果的设置以创建插入外观。

在标题中粘贴网站设计工作的示例。从标题区域进行选择,然后添加一个图层蒙版,以将屏幕截图剪裁为合适大小。

使用photoshop的图层样式效果添加投影,然beplay足球后右键单击并选择“创建图层”。使用变换功能的扭曲功能向外弯曲阴影。降低不透明度以获得更逼真的外观。

在主内容区域的标题上使用标题标题的排版,并用一个漂亮的大无衬线字体写出正文副本。

绘制灰色矩形作为项目组合项预览的基础,然后给一个圆角矩形一个内部阴影来创建一个微妙的按钮元素。

在展示项目时用缩略图完成项目组合项,然后使用导航菜单中的字体样式添加文本链接。

组合并复制构成项目组合项的元素,然后交换缩略图以展示您的最新工作。

用版权声明完成页脚区域并返回顶部链接。主页概念现在已经完成,所以让我们充实一下内页。

复制PSD并将其重命名为“关于”。内部页面不需要大的标题区域,但是我们可以使用这个空间来显示页面标题。将收割台区域按大小修剪。

调整标题中的文本以介绍页面。在这种情况下,about页面的标题可以是“about chris spooner”(关于Chris Spooner),也可以使用您自己的名字。

粘贴正文副本以填写“关于内容”区域。别忘了留出空间展示自己的照片!

可以通过复制项目组合项并替换每个设计项目的缩略图来构造项目组合页。

用所选的项目组合项填写该页。当我们最终把网站建设成Wordpress主题时,每个项目组合都将创建为博客文章。

使用一系列圆角矩形为联系人页面布局典型的联系人表单,然后列出你最喜欢的社交网站和图标。

时尚组合网站设计

别忘了在中途停留线25学习如何把你的PSD概念变成一个完全工作的HTML和CSS网站。

参见教程的第2部分:HTML&CSS中的编码

访问此下载

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

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

28评论

  1. 一如既往的好职位。

    作为一名设计师,我仍在不断发展,目前主要是3D设计或印刷设计。是否很难实现Web设计的飞跃?
    您建议使用哪些程序?

    继续精彩的工作!

    • 和所有的事情一样,学习基础知识需要一些初始时间,但毫无疑问你会掌握它的窍门。
      至于应用程序,我使用photoshobeplay足球p和coda来设计和构建网站。

  2. 这太棒了!在你的各种博客和最近的黑行动视频中跟踪你一段时间,在过去一个月左右的时间里我也在建立自己的网站,所以这是一个伟大的灵感。继续努力,谢谢您!

  3. 出色的工作,这是一门艺术(没有双关语的意图),以使精彩的网页设计正确,但你已经钉在这一个。我和其他许多人一样涉足了UI接口的设计方面,但到目前为止还没有涉足到技术方面并对其进行编码。这篇文章/教程激励我迈出这一步。谢谢你这样做:—)。干杯

  4. 谢谢您,谢谢您,谢谢您!当我一个多月后就要毕业的时候,我刚刚开始强调我需要如何开始我的投资组合。这给了我一个很好的起点!

  5. 感谢您发布此消息!我正在寻找一种媒介,可以帮助我们为我的网站获得大量的推广,作为回报,我也通过网站给了我一个业务,我必须说,这在这个过程中确实帮助了我。

  6. 很好的教程。我正在尝试建立一个投资组合,但不能花时间学习如何建立一个网站。感谢您的指导,我可以在任何时候一起鞭打一个。

    干杯

评论现已关闭