photoshop网页设计教程,十步教你制作简单漂亮的网页

2017-11-17  1515 分类:设计资讯

photoshop网页设计教程,十步教你制作简单漂亮的网页

对于网虫来说,网页无疑是一个神奇的东西,网络离不开网页,浏览各种信息都离不开网页的展示,可以说网页组成了我们现在网络生活,你一定对于网页的产生抱有极大的兴趣吧?对于设计师来说,网页设计应该不会陌生吧?因为PS就可以设计网页,photoshop网页设计有专门的对应课程和教程。下面品索教育就分享一篇关于网页的设计教程,photoshop网页设计教程,十个步骤教你制作简单而且漂亮的网页,不管是设计师还是爱好者都可以关注收藏哦!

其实设计网页的方法很多,常见的有直接编写代码方法,利用可视化软件设计(例如DreamWeaver)法,利用中间软件实现格式转换法(例如Word生成HTML代码),还有就是PS设计网页法,也就是我们下面要介绍的photoshop网页设计教程。利用ps你可以实现各种意想不到的效果,一起来看教程,这里会用到图案、图层样式、笔刷等等PS工具。

效果图预览:

photoshop网页设计.jpg

步骤:

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


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


ps创建文档.png


二、自定义三个图案样式


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


ps图案样式1.jpg


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


ps图案样式2.jpg


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


ps图案样式3.jpg


三、创建标题栏

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


ps填充颜色.jpg


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

header02.jpg

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

填充设置.jpg

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

颜色修改.jpg


四、添加网站logo

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


logo设置.jpg


logo参数设置.png

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

logo导航栏.jpg

五、创建导航栏

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


navigation1.jpg


描边:


nav1.png


内发光:


nav2.png


渐变叠加:


nav3.png


投影:


nav4.png

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


navigation_final.jpg


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


text-ind.png


七、创建作品展示区


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


创建作品展示区.png创建作品展示区2.png


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


导入照片.png


十、创建页脚


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

photoshop网页设计.jpg

但是想要设计好网页,除了掌握PS外,颜色的搭配,版面的布局,以及人机交互的繁简性,都需要斟酌思考。 任何一个网页都包含大量的表格,难道这些表格都是设计者一点点设计出来的吗? 其实不然,现在很多的网页都是使用Photoshop编辑后再通过Dreamweaver来轻松布局网页表格。 


猜你喜欢