photoshop制作简单网页效果图的教程
相关话题
用Photoshop制作简单的网页效果图会更利于网页制作,规划网页的整体布局。那么如何在Photoshop中制作网页效果呢?下面是小编为大家整理的photoshop制作简单网页效果图的教程,仅供大家参考~
photoshop制作简单网页效果图的教程如下:
一、创建一个新的Photoshop文件(Ctrl + N),设置宽度为1000px,高度为950px,色彩模为RGB。在默认背景层上双击,然后按Enter键在打开的新建图层对话框窗口,解锁背景层。
将前景色设置为#EBEBEB,按alt+delete填充颜色,然后执行滤镜>杂色>添加杂色,设定参数为2%。
![photoshop制作简单网页效果图的教程](http://i1.sanwen.net/doc/1606/094Q1M60-0.png)
二、自定义三个图案样式
1、新建一个38x38px大小的Photoshop文档,使用矩形选框工具(M)/自由变换(Ctrl + T)或铅笔工具创建一个对角线图案,确保背景层是透明的,然后执行编辑>定义图案,保存图案。
![photoshop制作简单网页效果图的教程](http://i1.sanwen.net/doc/1606/094Q15526-1.jpg)
2、创建一个3x3px 大小的Photoshop文档,使用矩形选框工具创建三个黑色方块,如下图所示:保存图案(与第一个定义图案方法一样)。
![photoshop制作简单网页效果图的教程](http://i1.sanwen.net/doc/1606/094Q141T-2.jpg)
3、创建一个130x20px 大小的Photoshop文档,绘制图案如图,并保存(方法如上)。
![photoshop制作简单网页效果图的教程](http://i1.sanwen.net/doc/1606/094Q161V-3.jpg)
三、创建标题栏
新建一个图层命名为标题栏,矩形选框工具创建一个高度为130px,宽度为950px的选区,执行编辑>填充,自定义图案选择刚刚定义的图案三:
![photoshop制作简单网页效果图的教程](http://i1.sanwen.net/doc/1606/094Q12264-4.jpg)
双击标题栏图层添加图层样式,渐变叠加,参数如图:
![photoshop制作简单网页效果图的教程](http://i1.sanwen.net/doc/1606/094Q13391-5.jpg)
右击标题栏图层将其转化为智能对象,然后栅格化。添加杂色参数为2%,按住ctrl键,鼠标点击该图层,新建图层,执行编辑>填充,自定义图案选择刚刚定义的图案二:
![photoshop制作简单网页效果图的教程](http://i1.sanwen.net/doc/1606/094Q1I05-6.jpg)
下载划痕笔刷,新建图层,前景色为白色,刷出如图效果,将不透明度降低为15%。
![photoshop制作简单网页效果图的教程](http://i1.sanwen.net/doc/1606/094Q1D22-7.jpg)
四、添加网站logo
在标题栏左边新建文字图层,添加logo文字calaka,字体为lobster,打开图层样式添加一个阴影,参数如图:
![photoshop制作简单网页效果图的教程](http://i1.sanwen.net/doc/1606/094Q12515-8.jpg)
![photoshop制作简单网页效果图的教程](http://i1.sanwen.net/doc/1606/094Q113D-9.png)
复制文字图层,并将复制的文字图层放在下面,向右下方移动(右4px、下4px),按住ctrl点击复制的文字图层,填充刚刚定义的图案二。
![photoshop制作简单网页效果图的教程](http://i1.sanwen.net/doc/1606/094Q1D21-10.jpg)
五、创建导航栏
首先添加四个导航文字,每个导航为一个图层,全选导航图层并执行图层>对齐>垂直居中,圆角矩形工具为主页栏添加一个背景层,并设置图层样式:
![photoshop制作简单网页效果图的教程](http://i1.sanwen.net/doc/1606/094Q13491-11.jpg)
描边:
![photoshop制作简单网页效果图的教程](http://i1.sanwen.net/doc/1606/094Q11I8-12.png)
内发光:
![photoshop制作简单网页效果图的教程](http://i1.sanwen.net/doc/1606/094Q1H32-13.png)
渐变叠加:
![photoshop制作简单网页效果图的教程](http://i1.sanwen.net/doc/1606/094Q15914-14.png)
投影:
![photoshop制作简单网页效果图的教程](http://i1.sanwen.net/doc/1606/094Q12D1-15.png)
将该图层的模式改为叠加,不透明度62%,效果如下:
![photoshop制作简单网页效果图的教程](http://i1.sanwen.net/doc/1606/094Q11512-16.jpg)
六、创建介绍文字,可以下载提供的字体也可以选择别的字体。
![photoshop制作简单网页效果图的教程](http://i1.sanwen.net/doc/1606/094Q11W0-17.png)
七、创建作品展示区
首先为了排版整齐我们要创建如图参考线,新建图层绘制一个矩形,填充白色,描边1px黑色(图层样式),在新建一个图层用黑色画笔画出投影,将投影层放在下面。
![photoshop制作简单网页效果图的教程](http://i1.sanwen.net/doc/1606/094Q14518-18.png)
![photoshop制作简单网页效果图的教程](http://i1.sanwen.net/doc/1606/094Q14944-19.png)
导入照片,并修改照片的大小,放在方框图层之上:
![photoshop制作简单网页效果图的教程](http://i1.sanwen.net/doc/1606/094Q13615-20.png)
十、创建页脚
加入网站版权信息,最终效果图:
![photoshop制作简单网页效果图的教程](http://i1.sanwen.net/doc/1606/094Q1M32-21.jpg)
photoshop制作简单网页效果图的教程的评论条评论