Photoshop教程:设计非常漂亮的网页页脚(2)

Photoshop教程:设计非常漂亮的网页页脚(3) 作者:startwmlife 出处:网络收集 自从Web2.0冲击互联网以来,页脚就变得比以前任何时候都显得重要了,出现了许多…

Photoshop教程:设计非常漂亮网页页脚(3)

作者:startwmlife 出处:网络收集 自从Web2.0冲击互联网以来,页脚就变得比以前任何时候都显得重要了,出现了许多非常漂亮的页脚设计。在这个教程中,我将会教给你如何在Photoshop中创建一个简洁、光滑的网站页脚。

Photoshop教程:设计非常漂亮的网页页脚(2)插图
Photoshop教程:设计非常漂亮的网页页脚(2)插图(1)
Photoshop教程:设计非常漂亮的网页页脚(2)插图(2)作者:startwmlife   出处:网络收集

自从Web2.0冲击互联网以来,页脚就变得比以前任何时候都显得重要了,出现了许多非常漂亮的页脚设计。在这个教程中,我将会教给你如何在Photoshop中创建一个简洁、光滑的网站页脚。

这就是我们把要创建的页脚。

Photoshop教程:设计非常漂亮的网页页脚(2)插图(3) 

第1步

与液体感的页首与页脚相同,渐变通常是web2.0设计风格的标志。在这个教程中我们把运用到一组模仿3D材质的渐变文件包。你可从excellent Deziner Folio获得这个文件包。单击这儿下载渐变文件包。

Photoshop教程:设计非常漂亮的网页页脚(2)插图(4) 

第2步

PS中新建新文档。我个人新建了一大的文件,1440像素X900像素大小(以适应我的17英寸显示屏的笔记本)。当然,实际上你的页脚不应该这么大,虽然它可很好的模仿出当你的浏览器窗口被拉拽后的情况。

选取一背景色彩,在我的这个例子中,背景色是一容易的从#b0b0b0到#e1e1e1的渐变色。按住Shift键,新建一垂直的从上到下的渐变。

Photoshop教程:设计非常漂亮的网页页脚(2)插图(5) 

第3步

你把要新建什么样的布局在网页设计中是相当重要的。也就是在流式布局(可自适应浏览器大小的布局)与固定宽度布局(在web2.0风格的网站中固定 宽度布局常常会是居中的)之中作出选取。我们的这个页脚把会是一固定宽度布局的页脚,大小为760像素X420像素。这个尺寸会保证即使在800像素 X600像素大小的屏幕上,也叫也会准确的显示出来。

如下运用网格来你的网站的大小。留意假如你想新建一合适于1024像素x768像素屏幕大小的布局,那么把你的网格定义在955像素X600像素的区域。

Photoshop教程:设计非常漂亮的网页页脚(2)插图(6) 

第4步

虽然我们的页脚是固定宽度,我们仍旧希望页脚能够填满整个页面。只为实现这个目的,我们会用到我在Photoshop中做的仿金属材质的图片。单击这儿下载此图片。在PS中打开这个照片,选取编辑>定义图片,为图片命名。

此时新建一新的文档,1440像素宽,86像素高,选取编辑>填充命令,选取我们刚刚新建的图片。全部选择(Ctrl+A),之后把照片剪切、粘贴到我们的第一文档的底端,我们把会获得如下的结果。

Photoshop教程:设计非常漂亮的网页页脚(2)插图(7) 

第5步

此时是时候运用第1步中那美丽的渐变文件包了。新建一新的图层,运用矩形选区工具(M)新建一100%文档宽度的,21像素高的选区。选取渐变工具 (G),之后选取一美丽的渐变,我选取的是”Black 5-Gloss”,此时按住Shift键在矩形选区内画一条垂直的线,新建这个渐变。

把新建好的外形拖动到第4步中新建的外形的上面。你应当获得与下图显示的照片类似的结果。

Photoshop教程:设计非常漂亮的网页页脚(2)插图(8) 

第6步

此时我们给第5步新建的图层加上上阴影效果。

Photoshop教程:设计非常漂亮的网页页脚(2)插图(9) 

第7步

把前景色设定为#545557,背景色设定为#1e211f。在第4步新建的图层下新建一新的图层。运用选区工具选择第4步图层的内容。选取渐变工 具,选取第一渐变(前景与背景色的结合),按住shift键,在选区上勾出一垂直的渐变。此时选取第4步的图层,把图层混合模式修改为正片叠底。

Photoshop教程:设计非常漂亮的网页页脚(2)插图(10) 

第8步

在所有图层上面新建一新的图层,在参考线中间画一色彩为#dfdfdf的圆角矩形。在图层上右击,单击混合选项,给矩形新建一投影效果。之后在完成图层上右击,选取新建图层,如此会把投影效果分离为一单独的图层。

此时你已经有了矩形图层与阴影图层,拖动并且调整阴影的大小直到获得如下图的效果。你可按下Ctrl+T来调出变换工具,之后右击,选取透视,向内拉拽顶部的两个手柄。也可把阴影朝下方拖动,运用柔软画笔的橡皮工具把上面边上的阴影擦掉。

Photoshop教程:设计非常漂亮的网页页脚(2)插图(11) 

第9步

最终加上文字、版权信息与你的logo做完设计。

Photoshop教程:设计非常漂亮的网页页脚(2)插图(12) 

第10步

只为在html文件中运用页脚,只需把文字移除(文字把会在html中加上),见下图剪切背景照片,之后把其粘贴到一新的文件中。就像在 Photoshop中那样,这个图片把会在CSS文件中运用背景照片属性来实现。这就是为什么我们要把照片剪切到这么小,为的是以小的文件获得更好的效 果。

要剪切页脚只想要在参考线内选取照片的内容,之后把其剪切并粘贴到一新的文件中。

选取存储>存储为网页与设备命令来保存这两张照片。之后选取JPG格式与适合的品质。JPG格式与PNG格式都是存储照片的很好的格式,他们可保存很多的色彩。GIF格式最好用于色彩容易的照片。这种不同的使用方法是因为不同的算法得来的。

Photoshop教程:设计非常漂亮的网页页脚(2)插图(13) 

最后的页脚

如此就做完了一幅漂亮的页脚元素!

作者:startwmlife   出处:网络收集

自从Web2.0冲击互联网以来,页脚就变得比以前任何时候都显得重要了,出现了许多非常漂亮的页脚设计。在这个教程中,我将会教给你如何在Photoshop中创建一个简洁、光滑的网站页脚。

这就是我们把要创建的页脚。

Photoshop教程:设计非常漂亮的网页页脚(2)插图(3) 

第1步

与液体感的页首与页脚相同,渐变通常是web2.0设计风格的标志。在这个教程中我们把运用到一组模仿3D材质的渐变文件包。你可从excellent Deziner Folio获得这个文件包。单击这儿下载渐变文件包。

Photoshop教程:设计非常漂亮的网页页脚(2)插图(4) 

第2步

PS中新建新文档。我个人新建了一大的文件,1440像素X900像素大小(以适应我的17英寸显示屏的笔记本)。当然,实际上你的页脚不应该这么大,虽然它可很好的模仿出当你的浏览器窗口被拉拽后的情况。

选取一背景色彩,在我的这个例子中,背景色是一容易的从#b0b0b0到#e1e1e1的渐变色。按住Shift键,新建一垂直的从上到下的渐变。

Photoshop教程:设计非常漂亮的网页页脚(2)插图(5) 

第3步

你把要新建什么样的布局在网页设计中是相当重要的。也就是在流式布局(可自适应浏览器大小的布局)与固定宽度布局(在web2.0风格的网站中固定 宽度布局常常会是居中的)之中作出选取。我们的这个页脚把会是一固定宽度布局的页脚,大小为760像素X420像素。这个尺寸会保证即使在800像素 X600像素大小的屏幕上,也叫也会准确的显示出来。

如下运用网格来你的网站的大小。留意假如你想新建一合适于1024像素x768像素屏幕大小的布局,那么把你的网格定义在955像素X600像素的区域。

Photoshop教程:设计非常漂亮的网页页脚(2)插图(6) 

第4步

虽然我们的页脚是固定宽度,我们仍旧希望页脚能够填满整个页面。只为实现这个目的,我们会用到我在Photoshop中做的仿金属材质的图片。单击这儿下载此图片。在PS中打开这个照片,选取编辑>定义图片,为图片命名。

此时新建一新的文档,1440像素宽,86像素高,选取编辑>填充命令,选取我们刚刚新建的图片。全部选择(Ctrl+A),之后把照片剪切、粘贴到我们的第一文档的底端,我们把会获得如下的结果。

Photoshop教程:设计非常漂亮的网页页脚(2)插图(7) 

第5步

此时是时候运用第1步中那美丽的渐变文件包了。新建一新的图层,运用矩形选区工具(M)新建一100%文档宽度的,21像素高的选区。选取渐变工具 (G),之后选取一美丽的渐变,我选取的是”Black 5-Gloss”,此时按住Shift键在矩形选区内画一条垂直的线,新建这个渐变。

把新建好的外形拖动到第4步中新建的外形的上面。你应当获得与下图显示的照片类似的结果。

Photoshop教程:设计非常漂亮的网页页脚(2)插图(8) 

第6步

此时我们给第5步新建的图层加上上阴影效果。

Photoshop教程:设计非常漂亮的网页页脚(2)插图(9) 

第7步

把前景色设定为#545557,背景色设定为#1e211f。在第4步新建的图层下新建一新的图层。运用选区工具选择第4步图层的内容。选取渐变工 具,选取第一渐变(前景与背景色的结合),按住shift键,在选区上勾出一垂直的渐变。此时选取第4步的图层,把图层混合模式修改为正片叠底。

Photoshop教程:设计非常漂亮的网页页脚(2)插图(10) 

第8步

在所有图层上面新建一新的图层,在参考线中间画一色彩为#dfdfdf的圆角矩形。在图层上右击,单击混合选项,给矩形新建一投影效果。之后在完成图层上右击,选取新建图层,如此会把投影效果分离为一单独的图层。

此时你已经有了矩形图层与阴影图层,拖动并且调整阴影的大小直到获得如下图的效果。你可按下Ctrl+T来调出变换工具,之后右击,选取透视,向内拉拽顶部的两个手柄。也可把阴影朝下方拖动,运用柔软画笔的橡皮工具把上面边上的阴影擦掉。

Photoshop教程:设计非常漂亮的网页页脚(2)插图(11) 

第9步

最终加上文字、版权信息与你的logo做完设计。

Photoshop教程:设计非常漂亮的网页页脚(2)插图(12) 

第10步

只为在html文件中运用页脚,只需把文字移除(文字把会在html中加上),见下图剪切背景照片,之后把其粘贴到一新的文件中。就像在 Photoshop中那样,这个图片把会在CSS文件中运用背景照片属性来实现。这就是为什么我们要把照片剪切到这么小,为的是以小的文件获得更好的效 果。

要剪切页脚只想要在参考线内选取照片的内容,之后把其剪切并粘贴到一新的文件中。

选取存储>存储为网页与设备命令来保存这两张照片。之后选取JPG格式与适合的品质。JPG格式与PNG格式都是存储照片的很好的格式,他们可保存很多的色彩。GIF格式最好用于色彩容易的照片。这种不同的使用方法是因为不同的算法得来的。

Photoshop教程:设计非常漂亮的网页页脚(2)插图(13) 

最后的页脚

如此就做完了一幅漂亮的页脚元素!

Photoshop教程:设计非常漂亮的网页页脚(2)插图
Photoshop教程:设计非常漂亮的网页页脚(2)插图(1)
Photoshop教程:设计非常漂亮的网页页脚(2)插图(2)

作者: 791650988

为您推荐

联系我们

联系我们

0898-88881688

在线咨询: QQ交谈

邮箱: email@wangzhan.com

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

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

微信扫一扫关注我们

关注微博
返回顶部