上一篇我们安装完开发所需要的必备软件了,本节内容主要讲解一下使用PS完成网站首页模版创建、矩形工具使用、渐变效果制作。
一、网页首页模版创建
1、首先打开我们下载的ps软件,左上角选择文件-新建(快捷键ctrl+N),然后创建一个1920x3000的画布,网页设计分辨率选择72就可以,颜色模式我们选择RGB,点击创建;(注意宽度选择的是像素)
为什么我们要创建1920宽的呢,目前我们的显示器分辨率一般为1920px,所以创建1920px宽度的可以使我们的网页背景正好显示完整,左右不会出现空白。
2、接下来我们要将单位与标尺调整为像素,方便我们测量宽高。操作步骤为:编辑-首选项-单位与标尺(快捷键ctrl+K,找到单位与标尺)
3、选择 视图-标尺(快捷键ctrl+R)调用我们的刻度尺,方便直观的看到宽度和高度;左击刻度尺拖出2条参考线分别到360和1560刻度,使中间留有1200px的宽度。两个刻度尺中间的距离就为我们内容展示的区域,使用 (快捷键ctrl+; )可以显示关闭刻度。
为什么要使用1200px的宽度呢,因为目前主流的网页设计主体内容宽度为980px和1200px,而1200px可以显示更多的内容,网页也可以显得更加的高端大气。
该网页的头部是由一个黑色背景导航条,一个logo和右侧的文字排版加上banner图片渐变按钮。
二、使用矩形工具制作黑色背景导航条:
1.选择“矩形工具”,设置填充色为“#333”,描边设为空;
2.创建“图层1”点击画布,在弹出的窗口中设置宽度1920,高度25,点击创建;
3.使用移动工具将导航条移动到左上角;
三、logo图片导入
1、使用文件->打开(ctrl+o),将logo图片打开;
2、ctrl+A选中图片,然后复制粘贴到当前页面中;
3、移动图片到指定的位置;
四、导航文字的书写
点击左侧工具栏中的“横排文字工具”
1、在指定位置点击并书写文字;
2、调整文字字体为“微软雅黑”,字号为16px,颜色为#333;
五、banner图制作-按钮渐变效果
1、首先导入我们找好的一张背景图片;
2、使用“文字工具”来写上对应的文字;
3、使用“矩形工具”来创建一个宽度200,高度45的矩形;
4、选中矩形图层,右击选择混合选项,然后创建一个从#28aace到#38dff2的线性渐变。参数如下图所示。