• Hello!欢迎来到网页设计学!
当前位置: 首页 > 设计理论 > 网页制作教程 > 用photoshop制作一个简单的网页效果图

用photoshop制作一个简单的网页效果图

.................................................................................................................................................................

用photoshop制作网页效果图,本教程中我们将会用到图案、图层样式、笔刷等等。
字体笔刷资源下载地址:微盘下载

相关教程:Photoshop中创建一个简洁大气的网站效果图

个人网站建设教程(一):photoshop制作网页效果图

ps教程:10个用photoshop制作网页效果图教程

效果图预览:preview 0
步骤:
一、创建一个新的Photoshop文件(Ctrl + N),设置宽度为1000px,高度为950px,色彩模为RGB。在默认背景层上双击,然后按Enter键在打开的新建图层对话框窗口,解锁背景层。

将前景色设置为#EBEBEB,按alt+delete填充颜色,然后执行滤镜>杂色>添加杂色,设定参数为2%。

Create a New Photoshop Document

二、自定义三个图案样式

1、新建一个38x38px大小的Photoshop文档,使用矩形选框工具(M)/自由变换(Ctrl + T)或铅笔工具创建一个对角线图案,确保背景层是透明的,然后执行编辑>定义图案,保存图案。

pattern1

2、创建一个3x3px 大小的Photoshop文档,使用矩形选框工具创建三个黑色方块,如下图所示:保存图案(与第一个定义图案方法一样)。

pattern2

3、创建一个130x20px 大小的Photoshop文档,绘制图案如图,并保存(方法如上)。

pettern3

三、创建标题栏
新建一个图层命名为标题栏,矩形选框工具创建一个高度为130px,宽度为950px的选区,执行编辑>填充,自定义图案选择刚刚定义的图案三:

header 01

双击标题栏图层添加图层样式,渐变叠加,参数如图:

header02
右击标题栏图层将其转化为智能对象,然后栅格化。添加杂色参数为2%,按住ctrl键,鼠标点击该图层,新建图层,执行编辑>填充,自定义图案选择刚刚定义的图案二:

header 03
下载划痕笔刷,新建图层,前景色为白色,刷出如图效果,将不透明度降低为15%。

header05

四、添加网站logo
在标题栏左边新建文字图层,添加logo文字calaka,字体为lobster,打开图层样式添加一个阴影,参数如图:

logo01

logo02
复制文字图层,并将复制的文字图层放在下面,向右下方移动(右4px、下4px),按住ctrl点击复制的文字图层,填充刚刚定义的图案二。

logo03五、创建导航栏
首先添加四个导航文字,每个导航为一个图层,全选导航图层并执行图层>对齐>垂直居中,圆角矩形工具为主页栏添加一个背景层,并设置图层样式:

navigation1

描边:

nav1

内发光:

nav2

渐变叠加:

nav3

投影:

nav4
将该图层的模式改为叠加,不透明度62%,效果如下:

navigation_final

六、创建介绍文字,可以下载提供的字体也可以选择别的字体。

text ind

七、创建作品展示区

首先为了排版整齐我们要创建如图参考线,新建图层绘制一个矩形,填充白色,描边1px黑色(图层样式),在新建一个图层用黑色画笔画出投影,将投影层放在下面。

works01

workss

导入照片,并修改照片的大小,放在方框图层之上:

works fanial

十、创建页脚

加入网站版权信息,最终效果图:

preview 0

本文链接:用photoshop制作一个简单的网页效果图

转载声明:本站文章若无特别说明,皆为原创,转载请注明来源:网页设计学,不可只有文字没有链接,请尊重他人的劳动成果!否则我们将追究其责任。

特别说明:本站所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!


...........................................................................................................................................................

相关文章

发表评论

友情链接:

  • 网页设计

专业网页设计师交流平台 设计交流QQ群: 网页设计交流