国外web2.0系列网页设计教程之用PS创建一个Slick and Minimalist的Web ...

在此Photoshop 网页设计教程是在一国外官方网站翻译而来,本教程主要探讨如何创建膜和外观最小的网站布局。 为方便地对齐布局上的设计元素,我们将作为模板使用 960 网格系统。

预览

这里的预览的我们将一起预览一下设计图最终效果。

创建一个新的 Photoshop 文档

1我们将使用 960 网格系统 (下载它在)作为起始的模板。一旦下载,文件 ppen 960_grid_12_col.psd,然后隐藏称为 12_col_grid 的组。

Create a new Photoshop document

创建背景

2 {dy},背景层在层面板中右键单击,然后选择 层的背景这将解锁背景图层,以便可编辑。 我作为 bg 名为背景图层。

Creating the background

现在选择渐变工具 (G) 3、 你的前景颜色设置为 #efefef#cacaca 你的背景颜色。在选项栏中的渐变的类型,请选择 径向渐变渐变拖动画布,让您有类似于这样:

Creating the background

设计标头部分

4我们将添加一个新的水平参考线,在该从我们{zg}的边框设置文档的顶部的 50px 标记。这会将标记布局的标头部分的位置。

Designing the header section

5我们会开始添加我们的标题和口号 ; 选择卧式型工具 (T),然后键入您网站的名字和你的口号。 以下是我在布局中使用的字体设置:

“”YourName

  • 字体系列: Nilland 字体 ()
  • 字体大小: 33pt
  • 字体粗细: 大胆
  • 抗混叠设置: 强
  • 颜色: # 525252

「 一些令人敬畏的口号”

  • 字体系列: Arial
  • 字体大小: 14pt
  • 字体粗细: 正则
  • 抗混叠设置: 强
  • 颜色: # 207687

6 对齐字体左之上的准确位置使用您的参考线。

Designing the header section

创建我们的导航

7 选择卧式型工具 (T),然后键入导航文本 (回家,有关我们、 服务、 投资组合和联系人) 用下面的字体设置:

  • 字体系列: Arial
  • 字体大小: 17pt
  • 字体粗细: 正则
  • 抗混叠设置: 强
  • 颜色: # 525252

8使用文档的参考线对齐像下图的导航链接文本:

Creating our navigation

创建搜索栏

9现在是时候创建的位置的搜索栏右侧的导航链接。 选择圆形矩形工具 (U)、 半径选项值设置为 5px,然后绘制,圆角的层形状拖到画布,它具有 155px 宽度和 20px 高度,位于右侧的导航链接。

10 通过双击在层面板中,打开层样式对话框的圆角的矩形形状图层上添加一个内影层样式。层样式设置时,请使用下面的下列设置:

Creating the search bar

11现在让我们来创建 GO 按钮。 同一高度 (20px) 和半径选项值 (5px),而阔度 30px,请创建一个新的圆角的矩形形状。

12 应用被 # 2fa9c1 的左的色站和被 # 207687 的颜色正确站的垂直 (90 度) 线性渐变层样式上,转到按钮。

Creating the search bar

13然后写任何类似的文本”search…“使用水平型工具 (T) 之上的搜索栏 ; 使用白色 (#ffffff)。

14 使用自定义形状工具 (U),创建一个白色箭头,它对齐到中心。我以前称为 箭 2,它有标准版本 Photoshop CS 中的自定义形状。在选项栏中的形状选项下拉菜单中查找它。

我们的搜索栏应找像这样:

Creating the search bar

15 在之前我们将移到下一步是确保一切都在我们的文档中的秩序。以下是我层面板的一个屏幕抓取我是发展布局:

Creating the search bar

创建分隔线

16 使用在线工具 (U),用下面的颜色值创建的每个其它两 1px 行:

Creating the search bar

注:有很多方法可以设置行的形状的颜色。{dy},在选项栏中的颜色选项设置前绘制线条。其它的方式如果你已经画了的行就使用颜色叠加层的样式。我会让你决定如何执行此操作。

添加了 sub-navigation

17 键入使用使用以下设置该水平型工具 (T) sub-navigation 文本:

  • 字体系列: Arial
  • 字体大小: 17pt
  • 字体粗细: 正则
  • 抗混叠设置: 强
  • 颜色: # 787878

18 确保在分离的行集中对齐主要与 sub-navigation 之间。以下是如何看起来应:

Adding the sub-navigation

创建特色的设计区域

19我们首先创建该地方特色设计的图像会所以我们会选择圆形矩形工具 (U),我们将创建一个矩形的335px 宽度和高度 128px 和半径选项设置为 5px

20 将渐变中风层样式应用于它为 渐变 填充类型选项的设置。修改渐变的颜色,以便它开始于 # 31aeca# 2b9ab2 在结束。

Creating the featured designs area

Creating the featured designs area

21 调用此新创建的层 photo_holder

22好,让我们通过转到文件中添加的功能设计图像 > 地方。 这将打开位置对话框,在其中可以选择要将我们的画布上的图像。选择图像,并完成之后,然后按位按钮。

23请确保在图像图层是 photo_holder 层 ; 如果它不移动。 在图像图层上右击,然后选择 创建裁剪掩码

Creating the featured designs area

24 修改图像的大小,您可以使用自由变换 (ctrl/cmd + T)。当是满意大小请确保您的图像对齐到映像以上,根据刷新到右侧的布局设计。

在设计中添加一些内容

25让我们将某些内容添加到我们的设计,但在之前我们这样做,我们要设置我们为我们的内容的边界。 这样做将在下图中的像两个水平指南。

Add some content to the design

添加一个标题和类别

26 使用以下设置为标题和类别。

标题 (在我的案例中是”手倒立 !”)

  • 字体系列: Arial
  • 字体大小: 20pt
  • 字体粗细: 正则
  • 抗混叠设置: 强
  • 颜色: # 2197b1

类别 (在我的案例中是”photoshop 设计”):

  • 字体系列: Arial
  • 字体大小: 17pt
  • 字体粗细: 正则
  • 抗混叠选项: 强
  • 颜色: # 313131

段内容

27 添加您使用参考下图的段落文本。

Paragraph content

28 工具面板中选择移动工具 (V),并选择我们的三个文本层在层面板 (按住 ctrl/命令时点击他们选择它们)。

29 给他们相等间距使用 分发上边缘 选项。

Paragraph content

创建滑块控件

30滑块控件的创建时间。 启动复制这两条线,我们创建了的导航,然后调整大小时他们 (您可以使用自由变换来执行此操作)。 我们将会在暗行暗,把它的颜色值(# 777575)。

Create the slider control

31 然后创建一个使用矩形工具 (15px 宽和高 15px) 的小框矩形形状,并将渐变叠加层样式应用于它。

Create the slider control

32 在之前我们将移到下一步我们要组织我们的层。使用下面的引用图像,以确保这些层是正确的顺序。

Create the slider control

创建内容框

33 了,我们需要先设置我们的边界。拖水平的参考线,把它放在滑块行。50px 差距为离开,然后添加另一个水平参考线。

Create the slider control

34 现在选择圆矩形工具 (U)。创建 260px 宽度和 170px 高度的矩形和 # d0d0d0 的一种颜色。调用此层 bg_1

35 对齐矩形喜欢在以下的引用图像使用移动工具 (V) 准确的位置。

Create the slider control

36 bg_1 图层在层面板中右键单击,然后从上下文菜单中选择 创建的层掩码

37 选择渐变工具 (G),将你的前景色和背景色设置为黑与白 (按 D 键自动重置颜色)。用一个线性的渐变将从顶部到底部直到你满意外观。

Create the slider control

38现在让我们来创建阴影。 复制 bg_1 层。名称重复的层 阴影放置在 bg_1 图层下面图层。然后应用颜色叠加层样式有暗灰色的颜色 (# 3e3e3e)。

Create the slider control

39但在选定的影子层,时去筛选器 > 模糊 > 高斯模糊。 设置模糊半径为 5.0px

Create the slider control

40 使用渐变工具 (代流动服务) 调整,蒙直到您有类似这样:

Create the slider control

41 添加到框中的某些内容。下面,您会看到什么我提供的结束。

Create the slider control

42 组到称为 内容 组创建的内容层次。

43 现在我们想要将它。选择内容组、 按住 ctrl/命令的关键,在层面板中选择 bg_1 一层。选择该移动工具 (V),然后单击 对齐水平居中 选项和它们放置到的 对齐垂直居中 选项。

Create the slider control

44 让此框的两个副本的复制原始内容我们刚刚创建的层。将它们对齐、 更改该的内容,别忘了在底部添加一个水平的参考线。

Content

45让我们重新检查,确保我们的层的所有组织 ; 使用我的层的屏幕快照作为参考。

Content

创建主内容区域

46 离开差距为 50px,并将一个新的水平参考线。开始添加您的内容和对齐,根据以下的图像。

Creating the main content area

Creating the main content area

47让它看起来好一点。 我们会选择矩形字幕工具 (M)。 在样式选项中选择 15px 的固定的宽度和 30px 固定的高度的 固定大小将您的前景颜色设置为 # 12197b,填充矩形字幕选择颜色 (按 ctrl/cmd + Backspace 来填充)。

Creating the main content area

48 使用相同的设置,您可以添加一些内容在右侧。

Creating the main content area

49 拖动底部的一个新的水平参考线。添加一条分隔线 ; 使用以下的图像作为参考。

Creating the main content area

50 回请查看您的所有层进行都组织作为引用使用如下图。

Creating the main content area

创建脚注区

51我们将首先页脚区域创建 (再) 创建一个新的水平指南。 上述的情况下,该指南之间留出差距为 50px 并拖动一个新的水平指南 !

52 选择单行字幕工具 (M)。将您的前景颜色设置为白色 (#ffffff)。单击创建字幕选择在画布上。然后按下 ctrl/cmd + Backspace 填充它。调用此层 1px_upper_line

Creating footer area

53 选择矩形字幕工具 (M),然后创建一个矩形的 1020px 宽度 (它横跨整个宽度的画布和 160px 高度。这将会是页脚区域的背景。使用任何颜色填充它。将渐变叠加层样式应用于使用以下设置它。

Creating footer area

54复制 1px_upper_line 图层,并将它移动到底部在的页脚调用它您需要的任何名称,但我已经叫我的(1px_down_line)。这是它的外观。

Creating footer area

55 开始添加一些内容 ; 用于引用以下的图像:

Creating footer area

Creating footer area

56您可以从 deviantART 下载社会媒体图标 — — 他们名为 由 。

57 对齐就像在如下图:

Creating footer area

创建小脚注

58 底部的大 (棕色脚注),一个新水平参考线拖走了 50px 的差距,然后添加一个新的水平参考线。

59 然后编写您的导航页脚文本如下所示:

Creating the small footer

60 版权文字和对齐它在的右侧添加一个 最终 的水平参考线。

Creating the small footer

调整画布大小

61{zh1},我们需要另一个 50px 差距之间留页脚的导航、 版权文字和边框去做的我们就会调整我们的画布大小。

Adjusting the canvas size

结论

与我们的存在 !我们已经创建了一个清洁和最小的布局设计 !

发表评论

您的昵称 *

您的邮箱 *

您的网站

郑重声明:资讯 【国外web2.0系列网页设计教程之用PS创建一个Slick and Minimalist的Web ...】由 发布,版权归原作者及其所在单位,其原创性以及文中陈述文字和内容未经(企业库qiyeku.com)证实,请读者仅作参考,并请自行核实相关内容。若本文有侵犯到您的版权, 请你提供相关证明及申请并与我们联系(qiyeku # qq.com)或【在线投诉】,我们审核后将会尽快处理。
—— 相关资讯 ——