在上一篇文章中,我们安装了开发所需的软件。本节主要介绍如何使用PS来完成网站主页模板的创建、矩形工具的使用以及渐变效果的产生。
1、主页模板创建1.首先,打开我们下载的PS软件,在左上角选择filenew(快捷键Ctrl+n),然后创建一个1920x3000画布。选择72作为网页设计分辨率,颜色模式我们选择RGB并点击创建;(请注意,宽度是以像素为单位选择的)
我们为什么要创造1920宽的空间?目前,我们的显示分辨率它通常是1920像素,所以创建一个1920像素的宽度可以让我们的网页背景完全显示出来,左右两边都没有空白。
2.接下来,我们需要将单位和标尺调整为像素,以便我们可以测量宽度和高度。步骤:K+Ctrl
3.选择查看标尺(快捷键Ctrl+R)调用我们的标尺,方便直观地查看宽度和高度;在比例上单击鼠标左键,然后拖出两条参照线,以进行缩放3601560级,中间宽度为1200px。两个刻度之间的距离就是我们内容的显示区域。使用(快捷键Ctrl+;)电子秤可以显示或关闭。
为什么使用1200像素的宽度?因为目前主流网页设计的主要内容宽度是980px和1200px,1200px可以显示更多的内容,网页也可以呈现更高端的氛围。
页面的头部由一个黑色背景导航栏和一个标志右边的文本布局加上横幅图片渐变按钮。
2、使用矩形工具制作黑色背景导航栏:#选择“填充”工具#填充矩形;
2.创建“第1层”,点击画布,在弹出窗口中设置宽度1920和高度25,然后点击创建;
3.使用移动工具将导航栏移到左上角;
3、徽标图像导入
1.使用文件->;打开(Ctrl+O)以打开徽标图像;
2.点击Ctrl+A复制到当前页面;
3.将图片移动到指定位置;
4、导航文本的编写
单击左侧工具栏中的“水平文本工具”
1.点击并在指定位置写入文本;
2.将文本字体调整为“MicrosoftYaHei”,字体大小调整为16px,颜色调整为#333;
5、横幅画制作-按钮渐变效果
1.首先,导入我们找到的背景图片;
2.使用“文本工具”编写相应的文本;
3.使用矩形工具创建一个宽度为200、高度为45的矩形;
4.选择矩形层,右键单击以选择混合选项,然后创建从#28aace到#38dff2的线性渐变。参数如下图所示。
最新评论