• Hello!欢迎来到网页设计学!
当前位置: 首页 > 设计理论 > 网页制作教程 > 个人网站建设教程(一):photoshop制作网页效果图

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

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

很多想要创建个人网站但没有接触过网站的朋友经常会问,要制作一个网页都要学习哪些知识呢,具体的制作流程是什么呢,其实这个制作过程很简单,先不管网页的设计水平怎样,要制作一个网站要同时掌握三个软件,大体制作流程分为三个大的步骤 :

1、Photoshop制作页面效果图;

2、Firework做图像切片;

3、导出网页,Dreamvever重新布局。

这三个软件就是传说中的网页制作三剑客,如果你都不会使用,还需要花点时间学习一下,下面我们以个人网站的建设为例,分析一下网站建设的过程。
首先要用photoshop制作出网页效果图:

Personal website tutorial ps 1

本教程用到的字体、图案资源下载:微盘下载

一、新建文件大小为1024px*750px,背景为白色,然后新建一个图层(图层一),用矩形选框工具创建一个1024px*50px大小的选区,填充颜色#fdbd89,位置如下图:

Personal website tutorial ps 2
二、新建图层(图层二),用矩形选框工具创建一个矩形选区,填充颜色#fde8d6,位置如下图:

Personal website tutorial ps 3
三、新建图层,按住ctrl鼠标点击图层二,执行编辑>填充,填充图案(下载资源里)。混合模式改为叠加。

Personal website tutorial ps 4
四、新建图层,用白色画笔在右上方画出几个正五边形,排列起来。

Personal website tutorial ps 5
五、添加文字和图案。

Personal website tutorial ps 6
六、添加导航文字,每一个导航项目为一个图层,然后垂直对齐。

Personal website tutorial ps 7
七、添加日历效果。

Personal website tutorial ps 8
八、在网页中间添加个人简介和最新文章。

Personal website tutorial ps 9
九、在主页底部中间位置添加媒体分享图标以及网站版权信息。

Personal website tutorial ps 1
主页效果图制作好了,然后用firewok切片,切片教程请看下一篇文章:

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

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

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


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

相关文章

发表评论

友情链接:

  • 网页设计

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