Photoshop绘制高雅清新的网站首页模板

作者:PS真功夫 翻译 出处: Photoshop教程:一款清新高雅的网页布局 预览: 在这篇网页设计教程中,你将学习如何设计优雅并专业的网页布局,我们将运用各种photoshop技巧,依靠图形工具和图层样式等基本操作来实现此布局。作为奖励,在教程结束后附有HTML/CSS/JavaScript的网

PS设计制作摄影主题网站主页教程

作者:Limiy 翻译 出处: 本文为外文翻译,但对初学做网页设计的人很有用,可以借鉴一下。 1. 首先按ctrl+n新建一个760 x 770文件 2. 文件-打开,导入素材图片 3. 选择滤镜-渲染-镜头光晕 4. 输入值如图 5. 按ctrl+j新建一个图层,导入草地素材图片,选择橡皮工具,选择画笔为

作者:PS真功夫 翻译   出处:
Photoshop绘制高雅清新的网站首页模板插图

Photoshop教程:一款清新高雅的网页布局

预览:

Photoshop绘制高雅清新的网站首页模板插图(1)
在这篇网页设计教程中,你将学习如何设计优雅并专业的网页布局,我们将运用各种photoshop技巧,依靠图形工具和图层样式等基本操作来实现此布局。作为奖励,在教程结束后附有HTML/CSS/JavaScript的网站模板,完全免费下载。

网站模板

点击下图查看网站模板

Photoshop绘制高雅清新的网站首页模板插图(2)

素材

  • 矢量社区媒体图标(下载)
  • 凌乱、自然灰褐色图案(下载)
  • 高清花纹笔刷(下载)
  • Mono图标(下载)

1、新建文档

打开photoshop,新建尺寸为1020*1180px的空白文档。

2、设置导航条背景

选取矩形选框工具(M),创建有整个画布宽的选区,高度不要太高,然后用深灰色(#393939)进行填充(cmd/ctrl+F5),如下所示:

Photoshop绘制高雅清新的网站首页模板插图(3)

复制(cmd/ctrl+J)刚新建的导航图层,并对其添加杂色滤镜(滤镜>杂色>添加杂色),如下设置:

Photoshop绘制高雅清新的网站首页模板插图(4)

然后更改图层混合模式为”叠加”,透明度下降到大约23%。

3、创建站点logo/名称

对于logo,我使用了粗斜样式的字体Georgia,用白色(#ffffff)编辑’Six’时,用米黄色(#F7E5C4)编辑’Studios’,对于图标,选用了Mono图标中的boxupload32图标,如下所示:

Photoshop绘制高雅清新的网站首页模板插图(5)

4、添加菜单

使用颜色(#DBD1BE)编辑激活时的菜单,正常状态的菜单使用颜色(#ABAAAA)。

Photoshop绘制高雅清新的网站首页模板插图(6)

为了让激活状态下的菜单更加醒目,选取圆角矩形工具(T)创建一个圆角矩形(圆角半径为5px,前景色为#464646)放置在菜单图层下方,如下所示:

Photoshop绘制高雅清新的网站首页模板插图(7),然后设置如下图层样式:

‘内阴影’/’描边’:

Photoshop绘制高雅清新的网站首页模板插图(8) Photoshop绘制高雅清新的网站首页模板插图(9)

Photoshop绘制高雅清新的网站首页模板插图(10)

5、添加展示区背景

在布局头部,我们还要添加一个作品展示区,以幻灯片形式来播放图片,每张图片配有简单介绍和导航。在开始前,选取矩形选框工具(M)创建矩形,以颜色(#D3CAB8)进行填充。

Photoshop绘制高雅清新的网站首页模板插图(11)

下一步,下载凌乱、自然灰褐色图案(或其它图案)拖放到文档中,放在矩形图层上方。

接下来我们要遮住一些不需要的纹理,在图层面板选中矩形图层,按住cmd/ctrl键,点击缩略图,创建一个自动选区,然后选中纹理图层,在下拉菜 单中点击”添加图层蒙版”,这样遮住了除选区外的所有区域,最后,撤消选区(ctrl+D),把纹理图层的透明度下降到35%。

Photoshop绘制高雅清新的网站首页模板插图(12)

6、添加网站介绍

使用水平字体工具(T),在展示区左侧添加网站文字说明,采用HelveticaArial字体进行编辑,确保标题(颜色#FFFFFF)和内容(颜色#2A2A2A)文字在不同图层。

Photoshop绘制高雅清新的网站首页模板插图(13)

为了使标题更加炫目,按如下设置添加图层样式:

‘阴影’/’渐变叠加’:

Photoshop绘制高雅清新的网站首页模板插图(14) Photoshop绘制高雅清新的网站首页模板插图(15)Photoshop绘制高雅清新的网站首页模板插图(16)

接下来,创建”About us”的圆角按钮。再一次选取圆角矩形工具(U),设置半径5PX,文本颜色为#404040,同时在右边有一个箭头图标(Mono图标集中的circleright32),重设它的大小以匹配按钮。

Photoshop绘制高雅清新的网站首页模板插图(17)

在矩形图层上添加以下样式:

‘外发光’/’渐变叠加’:

Photoshop绘制高雅清新的网站首页模板插图(18) Photoshop绘制高雅清新的网站首页模板插图(19) Photoshop绘制高雅清新的网站首页模板插图(20)

最后一步是在按钮右边添加花纹,就是这微妙的设计元素增加了此设计的优雅度。下载并安装花纹笔刷(资源区的上方),先设置前景色为#343434,选取画笔工具(B),找到花纹笔刷,在画布上进行一次点击,然后把图层混合模式改为“强光”。

Photoshop绘制高雅清新的网站首页模板插图(21)

7、创建幻灯片区

选取圆角矩形工具(U),前景色为白色,半径为5PX,在展示区右侧生成一个圆角矩形。

Photoshop绘制高雅清新的网站首页模板插图(22)

设置此图层的透明度为15%,以显示背景图案,接着添加’阴影’的图层样式:

Photoshop绘制高雅清新的网站首页模板插图(23)

此刻,我们需要在幻灯片区域添加图片缩略图,你可以找一个网站截图或其它图片,放在白色圆角矩形上方。我们得把图片四角变成圆角,在图层面板,按住 cmd/ctrl,点击白色圆角矩形的缩略图,创建一个自动选区,接着选择放图片的图层,去往菜单”选择>修改>收缩”,收缩10px,然后 执行”选择>反选”(cmd/ctrl+shift+I)反选选区,最后执行”编辑>清除”。

Photoshop绘制高雅清新的网站首页模板插图(24)

接下来添加图片描述,在图层面板,按住cmd/ctrl,点击图片图层的缩略图,创建一个自动选区,新建图层,并以黑色填充选区,然后使用圆角矩形选框工具(M),选取新建的黑色矩形的上部分并删除。

Photoshop绘制高雅清新的网站首页模板插图(25)

降低图层透明度到75%,添加简单的文字说明

Photoshop绘制高雅清新的网站首页模板插图(26)

8、在展示区底部添加分隔线

像步骤2一样在展示区底部添加一条灰色、水平分隔线,不同在于还要添加’内阴影’的样式:

Photoshop绘制高雅清新的网站首页模板插图(27)

Photoshop绘制高雅清新的网站首页模板插图(28)

设计的主内容区的时间到了!

9、给主内容区添加背景

就像预览图一样,主内容区分布为三列,选取矩形选框工具(M),生成画布宽的选区,用颜色(#FBF5EA)进行填充。

Photoshop绘制高雅清新的网站首页模板插图(29)

主内容区的设计其实相当简单,但是要让人看出很简单也要花一定时间完成。我们将从左边开始,放置服务列表。

10、添加列标题

对于我们的列标题,从Mono图标挑选一个象征符号,并放在标题左边,使用字体”Georgia“和颜色(#323232)编辑标题文本。下一步,在文本底部添加弧线边界,这就要用到钢笔工具(P)了,像下图一样创建一条路径。

Photoshop绘制高雅清新的网站首页模板插图(30)

为了给路径描边,设置前景色为文本颜色(#323232),然后选择一个较硬的画笔工具,大小大约为3px。接着打开”路径”面板(窗口>路径),点击面板下方的”用画笔给路径描边”。

Photoshop绘制高雅清新的网站首页模板插图(31)

下面为曲线添加一点渐变,设置”渐变叠加”的图层样式:

Photoshop绘制高雅清新的网站首页模板插图(32) Photoshop绘制高雅清新的网站首页模板插图(33)

复制曲线图层,离原图层下方4或5px处,降低透明度到24%。

Photoshop绘制高雅清新的网站首页模板插图(34)

11、为左栏添加内容

设置标题颜色为深灰(#323232),文本内容颜色为一种可读性的灰色(例如:#2A2A2A)。像创建”About us “一样创建”Read More”按钮,对于中间这行,我改变了颜色,一种纯灰色(#484848)用于激活状态下的颜色。

Photoshop绘制高雅清新的网站首页模板插图(35)

12、为中栏添加内容

像左栏一样,添加标题和图标(另外合适的图标)。使用圆角矩形工具(U),设置半径3px,前景色为白色,生成一小型的圆角矩形,在矩形下方添加一些文本和描述。

Photoshop绘制高雅清新的网站首页模板插图(36)

接着为圆角矩形设置图层样式:

‘外发光’/’描边’:

Photoshop绘制高雅清新的网站首页模板插图(37) Photoshop绘制高雅清新的网站首页模板插图(38)

然后,在圆角矩形内添加与描述相配的图片。

Photoshop绘制高雅清新的网站首页模板插图(39)

13、为右栏添加内容

像左栏和中栏一样,添加标题和图标。对于未激活的链接,采用深灰色(#353535)编辑字体,对于活动状态的链接,采用白色字体,并且创建深灰色(#353535)圆角矩形背景,半径也是3px。

Photoshop绘制高雅清新的网站首页模板插图(40)

14、设计时事通讯窗口

选取圆角矩形工具(U),生成一个3px的圆角矩形,像第2步一样设置杂色滤镜。

Photoshop绘制高雅清新的网站首页模板插图(41)

使用字体Georgia Italic编辑标题,从Mono图标中选择一个信封的图标,给此图标设置了颜色(#F7E5C4)叠加,创建了一个圆角矩形选框,用来输入用户邮箱,以白色填充。

Photoshop绘制高雅清新的网站首页模板插图(42)

15、添加footer

一开始创建footer,就像创建header中的导航一样,只不过要比导航条高些。

Photoshop绘制高雅清新的网站首页模板插图(43)

接下来创建一些链接,选取圆角矩形选框工具(M),生成如下图一样的选框,以深灰色(#323232)进行填充,里面用白色文字填充。

Photoshop绘制高雅清新的网站首页模板插图(44)

然后把混合模式改成”弱光”,透明度降低到63%,以突出背景颜色。重复此流程,创建其它链接。

Photoshop绘制高雅清新的网站首页模板插图(45)

最后一件事,选择一些社区媒体图标添加到链接上方,选择站点logo和copyright放在footer右侧。

Photoshop绘制高雅清新的网站首页模板插图(46)

Photoshop绘制高雅清新的网站首页模板插图(47)
Photoshop绘制高雅清新的网站首页模板插图(48)
Photoshop绘制高雅清新的网站首页模板插图(49)作者:PS真功夫 翻译   出处:
Photoshop绘制高雅清新的网站首页模板插图

Photoshop教程:一款清新高雅的网页布局

预览:

Photoshop绘制高雅清新的网站首页模板插图(1)
在这篇网页设计教程中,你将学习如何设计优雅并专业的网页布局,我们将运用各种photoshop技巧,依靠图形工具和图层样式等基本操作来实现此布局。作为奖励,在教程结束后附有HTML/CSS/JavaScript的网站模板,完全免费下载。

网站模板

点击下图查看网站模板

Photoshop绘制高雅清新的网站首页模板插图(2)

素材

  • 矢量社区媒体图标(下载)
  • 凌乱、自然灰褐色图案(下载)
  • 高清花纹笔刷(下载)
  • Mono图标(下载)

1、新建文档

打开photoshop,新建尺寸为1020*1180px的空白文档。

2、设置导航条背景

选取矩形选框工具(M),创建有整个画布宽的选区,高度不要太高,然后用深灰色(#393939)进行填充(cmd/ctrl+F5),如下所示:

Photoshop绘制高雅清新的网站首页模板插图(3)

复制(cmd/ctrl+J)刚新建的导航图层,并对其添加杂色滤镜(滤镜>杂色>添加杂色),如下设置:

Photoshop绘制高雅清新的网站首页模板插图(4)

然后更改图层混合模式为”叠加”,透明度下降到大约23%。

3、创建站点logo/名称

对于logo,我使用了粗斜样式的字体Georgia,用白色(#ffffff)编辑’Six’时,用米黄色(#F7E5C4)编辑’Studios’,对于图标,选用了Mono图标中的boxupload32图标,如下所示:

Photoshop绘制高雅清新的网站首页模板插图(5)

4、添加菜单

使用颜色(#DBD1BE)编辑激活时的菜单,正常状态的菜单使用颜色(#ABAAAA)。

Photoshop绘制高雅清新的网站首页模板插图(6)

为了让激活状态下的菜单更加醒目,选取圆角矩形工具(T)创建一个圆角矩形(圆角半径为5px,前景色为#464646)放置在菜单图层下方,如下所示:

Photoshop绘制高雅清新的网站首页模板插图(7),然后设置如下图层样式:

‘内阴影’/’描边’:

Photoshop绘制高雅清新的网站首页模板插图(8) Photoshop绘制高雅清新的网站首页模板插图(9)

Photoshop绘制高雅清新的网站首页模板插图(10)

5、添加展示区背景

在布局头部,我们还要添加一个作品展示区,以幻灯片形式来播放图片,每张图片配有简单介绍和导航。在开始前,选取矩形选框工具(M)创建矩形,以颜色(#D3CAB8)进行填充。

Photoshop绘制高雅清新的网站首页模板插图(11)

下一步,下载凌乱、自然灰褐色图案(或其它图案)拖放到文档中,放在矩形图层上方。

接下来我们要遮住一些不需要的纹理,在图层面板选中矩形图层,按住cmd/ctrl键,点击缩略图,创建一个自动选区,然后选中纹理图层,在下拉菜 单中点击”添加图层蒙版”,这样遮住了除选区外的所有区域,最后,撤消选区(ctrl+D),把纹理图层的透明度下降到35%。

Photoshop绘制高雅清新的网站首页模板插图(12)

6、添加网站介绍

使用水平字体工具(T),在展示区左侧添加网站文字说明,采用HelveticaArial字体进行编辑,确保标题(颜色#FFFFFF)和内容(颜色#2A2A2A)文字在不同图层。

Photoshop绘制高雅清新的网站首页模板插图(13)

为了使标题更加炫目,按如下设置添加图层样式:

‘阴影’/’渐变叠加’:

Photoshop绘制高雅清新的网站首页模板插图(14) Photoshop绘制高雅清新的网站首页模板插图(15)Photoshop绘制高雅清新的网站首页模板插图(16)

接下来,创建”About us”的圆角按钮。再一次选取圆角矩形工具(U),设置半径5PX,文本颜色为#404040,同时在右边有一个箭头图标(Mono图标集中的circleright32),重设它的大小以匹配按钮。

Photoshop绘制高雅清新的网站首页模板插图(17)

在矩形图层上添加以下样式:

‘外发光’/’渐变叠加’:

Photoshop绘制高雅清新的网站首页模板插图(18) Photoshop绘制高雅清新的网站首页模板插图(19) Photoshop绘制高雅清新的网站首页模板插图(20)

最后一步是在按钮右边添加花纹,就是这微妙的设计元素增加了此设计的优雅度。下载并安装花纹笔刷(资源区的上方),先设置前景色为#343434,选取画笔工具(B),找到花纹笔刷,在画布上进行一次点击,然后把图层混合模式改为“强光”。

Photoshop绘制高雅清新的网站首页模板插图(21)

7、创建幻灯片区

选取圆角矩形工具(U),前景色为白色,半径为5PX,在展示区右侧生成一个圆角矩形。

Photoshop绘制高雅清新的网站首页模板插图(22)

设置此图层的透明度为15%,以显示背景图案,接着添加’阴影’的图层样式:

Photoshop绘制高雅清新的网站首页模板插图(23)

此刻,我们需要在幻灯片区域添加图片缩略图,你可以找一个网站截图或其它图片,放在白色圆角矩形上方。我们得把图片四角变成圆角,在图层面板,按住 cmd/ctrl,点击白色圆角矩形的缩略图,创建一个自动选区,接着选择放图片的图层,去往菜单”选择>修改>收缩”,收缩10px,然后 执行”选择>反选”(cmd/ctrl+shift+I)反选选区,最后执行”编辑>清除”。

Photoshop绘制高雅清新的网站首页模板插图(24)

接下来添加图片描述,在图层面板,按住cmd/ctrl,点击图片图层的缩略图,创建一个自动选区,新建图层,并以黑色填充选区,然后使用圆角矩形选框工具(M),选取新建的黑色矩形的上部分并删除。

Photoshop绘制高雅清新的网站首页模板插图(25)

降低图层透明度到75%,添加简单的文字说明

Photoshop绘制高雅清新的网站首页模板插图(26)

8、在展示区底部添加分隔线

像步骤2一样在展示区底部添加一条灰色、水平分隔线,不同在于还要添加’内阴影’的样式:

Photoshop绘制高雅清新的网站首页模板插图(27)

Photoshop绘制高雅清新的网站首页模板插图(28)

设计的主内容区的时间到了!

9、给主内容区添加背景

就像预览图一样,主内容区分布为三列,选取矩形选框工具(M),生成画布宽的选区,用颜色(#FBF5EA)进行填充。

Photoshop绘制高雅清新的网站首页模板插图(29)

主内容区的设计其实相当简单,但是要让人看出很简单也要花一定时间完成。我们将从左边开始,放置服务列表。

10、添加列标题

对于我们的列标题,从Mono图标挑选一个象征符号,并放在标题左边,使用字体”Georgia“和颜色(#323232)编辑标题文本。下一步,在文本底部添加弧线边界,这就要用到钢笔工具(P)了,像下图一样创建一条路径。

Photoshop绘制高雅清新的网站首页模板插图(30)

为了给路径描边,设置前景色为文本颜色(#323232),然后选择一个较硬的画笔工具,大小大约为3px。接着打开”路径”面板(窗口>路径),点击面板下方的”用画笔给路径描边”。

Photoshop绘制高雅清新的网站首页模板插图(31)

下面为曲线添加一点渐变,设置”渐变叠加”的图层样式:

Photoshop绘制高雅清新的网站首页模板插图(32) Photoshop绘制高雅清新的网站首页模板插图(33)

复制曲线图层,离原图层下方4或5px处,降低透明度到24%。

Photoshop绘制高雅清新的网站首页模板插图(34)

11、为左栏添加内容

设置标题颜色为深灰(#323232),文本内容颜色为一种可读性的灰色(例如:#2A2A2A)。像创建”About us “一样创建”Read More”按钮,对于中间这行,我改变了颜色,一种纯灰色(#484848)用于激活状态下的颜色。

Photoshop绘制高雅清新的网站首页模板插图(35)

12、为中栏添加内容

像左栏一样,添加标题和图标(另外合适的图标)。使用圆角矩形工具(U),设置半径3px,前景色为白色,生成一小型的圆角矩形,在矩形下方添加一些文本和描述。

Photoshop绘制高雅清新的网站首页模板插图(36)

接着为圆角矩形设置图层样式:

‘外发光’/’描边’:

Photoshop绘制高雅清新的网站首页模板插图(37) Photoshop绘制高雅清新的网站首页模板插图(38)

然后,在圆角矩形内添加与描述相配的图片。

Photoshop绘制高雅清新的网站首页模板插图(39)

13、为右栏添加内容

像左栏和中栏一样,添加标题和图标。对于未激活的链接,采用深灰色(#353535)编辑字体,对于活动状态的链接,采用白色字体,并且创建深灰色(#353535)圆角矩形背景,半径也是3px。

Photoshop绘制高雅清新的网站首页模板插图(40)

14、设计时事通讯窗口

选取圆角矩形工具(U),生成一个3px的圆角矩形,像第2步一样设置杂色滤镜。

Photoshop绘制高雅清新的网站首页模板插图(41)

使用字体Georgia Italic编辑标题,从Mono图标中选择一个信封的图标,给此图标设置了颜色(#F7E5C4)叠加,创建了一个圆角矩形选框,用来输入用户邮箱,以白色填充。

Photoshop绘制高雅清新的网站首页模板插图(42)

15、添加footer

一开始创建footer,就像创建header中的导航一样,只不过要比导航条高些。

Photoshop绘制高雅清新的网站首页模板插图(43)

接下来创建一些链接,选取圆角矩形选框工具(M),生成如下图一样的选框,以深灰色(#323232)进行填充,里面用白色文字填充。

Photoshop绘制高雅清新的网站首页模板插图(44)

然后把混合模式改成”弱光”,透明度降低到63%,以突出背景颜色。重复此流程,创建其它链接。

Photoshop绘制高雅清新的网站首页模板插图(45)

最后一件事,选择一些社区媒体图标添加到链接上方,选择站点logo和copyright放在footer右侧。

Photoshop绘制高雅清新的网站首页模板插图(46)

Photoshop绘制高雅清新的网站首页模板插图(47)
Photoshop绘制高雅清新的网站首页模板插图(48)
Photoshop绘制高雅清新的网站首页模板插图(49)

作者: 791650988

为您推荐

联系我们

联系我们

0898-88881688

在线咨询: QQ交谈

邮箱: email@wangzhan.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部