在Photoshop中创作一个清新优雅的网页设计

在这个网页设计教程,您将学习如何创建一个优雅和专业的网页布局,可以用来作为网站系列站点。我们将使用Photoshop中的各种技术,依靠一些基本的工具,如形状工具和图层样式,这将导致一个可用的网页设计。作为奖励,我们已列入工作的HTML / CSS/ JavaScript的网页模板,您可以下载并使用你喜欢的任何方式,免费!

 Create a Clean and Classy Web Design in Photoshop

预览

点击下面的图片可以看到 全面的网页设计.

 Preview

工作样例

点击下面的图片可以看到 工作范例 (你可以在本文的最后下载).

 Working Demo

相关资源

步骤1: 建立Photoshop文档

第一件事,我们需要建立一个新的Photoshop文档,用于我们的网页设计布局,并使其尺寸设置为1020×1180px.

 Set up the Photoshop document

步骤2: 设置导航条背景

我们将从头部开始,然后按照我们的思路一直做到底部。 使用矩形选择工具(M), 创建一个整个网页宽度的矩形画布,然后向其填充暗灰色(#393939)。

 Make the navigation bar background

步骤3: 风格化导航条背景

通过组合键Cmd + J 复制已经创建好的导航条,在复制图层上使用一个降噪滤镜(滤镜 > 噪点 > 添加噪点) ,要注意的是,我们应该使用统一的噪点分布,使背景可以为以后使用。

 Stylize the navigation bar background

然后改变这一层的混合模式为叠加,降低不透明度为23%左右。

步骤4: 创建站点的Logo或是名字

对于我们的Logo,我使用字体“Georgia并设置为“粗斜”,我使用白色(#FFFFFF)做为文本“Six”的颜色,并且使用米色(#F7E5C4) f作为文本“Studios”的颜色. 对于这个Logo或是名字, 我使用本文前面提到的资源中免费的Mono Icons 列表中的 boxupload32 图标。

 Create the site's logo/name

步骤5: 添加菜单链接

到了做横向导航链接的时候了. 将活动链接颜色设为 #DBD1BE, 非活动链接颜色设为 #ABAAAA.

 Add the menu links

为了让我们的活动链接更引人注目,给它做个圆角矩形背景。从工具面板中选择矩形工具(U),选中活动链接文字,然后调整边缘中半径设为5px、前景色设为#464646, 如下图所示做一个圆角矩形。.

 Add the menu links

在你的圆角矩形图层上,右击并从上下文菜单中选择混合选项,添加内阴影和描边图层样式。

内阴影设置:

 Inner Shadow settings

描边设置:

 Inner Shadow settings

 Inner Shadow settings

步骤6: 功能区域添加背景色

为便于用户浏览和查看你的精选作品,在网页布局的顶端部分,会设置一个图片幻灯片区域。这个区域也可以显示关于你的站点的一些描述。要开始做事了,我们要使用矩形选框工具(M)创建一个矩形用来表示该功能区的背景,填充颜色 #D3CAB8.

 Add the background of the featured area

接下来,下载并且在Photoshop中打开Grungy Natural Beige Photoshop Pattern (或是您自己喜欢的风格) 。 拖拽这个纹理到你的画布上,并覆盖该区域背景。

步骤7: 屏蔽掉背景纹理中不需要的部分

我们不希望到最后显示多余的纹理, 所以我们要屏蔽掉不需要的部分. 要做到这一点, Cmd/Ctrl + click 在图层面板的功能背景层的缩略图上做自动选择.

在图层面板中选择纹理层,然后点击面板底部的添加图层蒙版按钮掩盖除选择区域外的一切。

然后调整纹理层的不透明度到35%左右,让下面的图可以显示出来。

 Mask out unwanted portions of the background texture

使用横排文字工具(T),在此功能区使用字体“黑体”或“宋体”添加一些文字,要确保标题文字和正文在不同的层次。

标题文本颜色使用白色(#FFFFFF),正文颜色使用浅灰色(#2A2A2A).

 Mask out unwanted portions of the background texture

给标题文本添加一个下拉阴影和颜色渐变的效果。

阴影设置:

 Mask out unwanted portions of the background texture

渐变叠加设置:

 Mask out unwanted portions of the background texture

 Mask out unwanted portions of the background texture

步骤8:创建 "About us" 圆角按钮

"About us" 界面按钮,使用圆角矩形工具(U),还是设置5px的半径。按钮上的文字,可以使用颜色#404040

你可以找到箭头图标,我使用Mono Icons 中的 circleright32) 并使用切换命令(CMD/CTRL+T)调整图标的大小,以填充您创建的按钮。

 rounded corner button

在这个圆角矩形图层上添加外发光和颜色渐变效果,使形状更生动。

外发光设置:

 rounded corner button

渐变叠加设置:

 rounded corner button

 rounded corner button

步骤9: 添加florish 设计元素

功能区这里最后一步是添加一个微妙的florish设计元素,增强网页优雅而高贵的外观和感觉。首先,下载并安装碎花刷子画笔包(在前面的相关资源中列出)。

在使用画笔前设置前景色为 #343434 .

选择画笔工具(B),在我们安装的笔刷包中找到你喜欢的花笔尖,通过一次点击应用你的笔触。

之后,改变层的混合模式为强光。

 Add a florish design element

步骤10: 创建幻灯片区

让我们一起来处理幻灯片内容区,使用圆角矩形工具(U)在网页布局右侧生成一个前景色为白色(#FFFFFF),半径为5px的圆角矩形形状。

 Create the slideshow area

调整这层的透明度为15%,让一些背景图案可以显示出来,然后添加阴影的形状。

 Create the slideshow area

步骤11:在幻灯片区添加一个图片

我们需要在框中这一点上添加缩略图,取一个你可以在这个区域使用的图像(如网站的截图),并放置在这个区域上。我们想要把圆角羽化,在图层面板中,CMD/Ctrl+点击圆角矩形的缩略图预览进行选择。

还是在图层面板上,在上面选择图像层。打开 选择> 修改>羽化选区 设为10px。然后, 选择>反向(Cmd/Ctrl + Shift + I)  反向你的选择。

设置图片圆角,选择 编辑> 清理.

 Add an image for the slideshow area

步骤12: 为正在显示的图片添加文字描述

让我们为幻灯片区域当前显示的图片添加文字描述。在图层面板的缩略图预览图像周围通过(Cmd/Ctrl+单击)创建一个选取框。选取后,创建一个新层并且用黑色(#000000)填充选区。然后使用矩形选框工具(M)选择新创建的圆形黑色矩形的顶部并删除它。

 Add a description of the image being shown

该层的不透明度降低到75%左右,让图像可以显示出来。完成后,使用横排文字工具(T)添加一些文本用来描述图像。

 Add a description of the image being shown

步骤13:在功能区底部添加分割

功能区的最后一步是在它的底部添加一个灰色、水平分割。我们按照步骤2和步骤3中相同的方法创建这个分割,唯一的不同是给它添加内阴影。

 Add a divider at the bottom of the featured area

这是我们全部完成的功能区:

 Add a divider at the bottom of the featured area

时间转移到我们的主要内容区

步骤14: 主要内容区添加背景色

你可能已经猜到了,内容区域将在我们的网页设计预览中显示为3列。 我们不想使其变得枯燥并且放弃白色的背景,所以用矩形选框工具(M)创建一个跨越整个画布宽度的矩形选框,给它填充白色(#000000)。

 Add color to the background of the main content area

我们的内容区域将是非常简单的,但是如果做得正确也需要走一段很长的路要走。我们将从左侧开始,在左侧放置服务列表。

步骤15: 添加列标题

对于列标题,该列内容将从Mono Icons中挑选符号,并将它们定位到左侧。

列标题文字使用“Georgia”字体和深灰色(#323232),接下来,使用钢笔工具(P)在列标题下面添加一个底部边框。

 Add column headings

在路径中使用描边,首先设置和文字相同的前景色(#323232),然后找到一个很好的画笔笔尖直径设为3px。

在一个新层上,去到你的路径面板(“窗口”>“路径”),在面板底部点击描边路径的毛笔按钮。

 Add column headings

下一步,我们想给我们的弯曲线一个渐变的点点。加入渐变叠加图层样式。

 Add column headings

 Add column headings

 

重复弯曲的线层(按Ctrl / Cmd+ J),然后轻移它低于原线4到5个像素,降低它的不透明度到24%左右。

 Add column headings

步骤16: 左列添加内容

所以的这一切都是留给左列添加内容,标题文字颜色设置为深灰色(#323232)。正文使用灰色(如#2A2A2A)可读的阴影。

使用和步骤8中相同的过程生成“Read More”界面按钮。然而,中间行,我想切换颜色,所以我做了坚实的颜色灰色(#484848)圆角矩形,我建议悬停这些按钮的状态呈现在网页设计模拟。

 Add content to the left column

 

步骤17: 中间列添加内容

伴随着左列的结束,将注意力转移到中间。 创建和左列相同的标题,改变的是你找到合适的图标。

使用圆角矩形工具(U)生成一个一个半径为3px和前景色白色(#FFFFFF)的小圆角内容框,并添加一些文字和描述。

 Add content to the middle column

然后应用一个外发光的圆角内容框和描边层样式。

外发光设置:

 Add content to the middle column

描边设置:

 Add content to the middle column

完成的圆角背景框,并添加图像匹配你的描述。

 Add content to the middle column

步骤18: 添加右列内容

右列和左中两列的安排非常相似。我们要创建其它两个相同的标题,在此列使用不同的图标象征内容。

对于非主动链接,我用暗灰色的字体颜色(#353535)。我们活动连接,我用普通的白色(#FFFFFF)。活动链接的背后,我创建了一个背景,使用圆角矩形工具(U)与3px半径和相同的深灰色作为我们的非主动链接(#353535),使它脱颖而出。

 Add content to the right column

步骤19: 设计Newsletter模块

下一步,我们需要建立我们的Newsletter模块。使用圆角矩形工具(U),创建半径为3px的对话框。在这个圆角框,适用于在第2步创建噪点的,灰色的背景,使我们可以重用从导航栏的设计元素,在我们的网页布局,相同的过程。

 Design the Newsletter widget

你现在需要做的是添加一些内容到您的Newsletter模块。标题的字体是斜体Georgia,图标还是选自Mono Icons。叠加图层样式颜色米色(#F7E5C4),使其与我们的网络布局的配色方案完美融合。

然后,只需使用您的矩形选框工具(U)生成一个圆角矩形,用于服务用户的电子邮件地址作为输入字段;使用白色填充颜色(#FFFFFF)。

 Design the Newsletter widget

这是我们主要内容的区域!时间转移到最后一节:网络布局页脚。

步骤20: 添加页脚背景

页脚设计酷似步骤2和步骤3标题导航背景。尽管如此,你会想它比你的导航高一点,因此,它可以容纳更多的内容。

 Adding the background of the footer

步骤 21: 添加页脚内容

接下来,在页脚添加一些链接。使用矩形选框工具(M),创建一个矩形,并填充深灰色的颜色(#323232)。然后将其放置在框中一些白色的文字(#FFFFFF)为您的链接。

 Adding the background of the footer

现在改变矩形层的混合模式为柔光,降低不透明度为63%,让页脚的背景显示通过。重复这个过程中,为你所需要的许多环节。

 Adding the background of the footer

我们需要做的最后一件事是添加我们的社会媒体上面我们页脚的导航菜单图标,然后我们的商标和版权文字添加到我们的页脚的右侧。使用的图标来自 Vector Social Media Icons.

 Adding the background of the footer

这就是它!

 Preview

下载源文件:

 原文链接:http://designinstruct.com/web-design/clean-classy-web-design-photoshop/

 

转载于:https://www.cnblogs.com/mayixue/archive/2012/03/31/2427834.html

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2021 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值