「网页设计」PS入门之网站模版创建、矩形工具使用、渐变效果制作
cac55 2024-09-23 04:12 33 浏览 0 评论
上一篇我们安装完开发所需要的必备软件了，本节内容主要讲解一下使用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的线性渐变。参数如下图所示。
相关推荐
- Protel电路设计常用设计编辑器案例2——创建元件
-
#大有学问#今天介绍一下Protel常用设计编辑器的电气连接工具栏。单击主工具栏上的工具按钮或选择【查看】|【工具栏】|【配线工具栏】菜单命令可以关闭或打开【电气连接(WiringTools)】工具...
- Protel调整元器件的位置(1)——移动和对齐元器件
-
今天介绍调整元器件位置的方法。首先介绍移动和对齐元器件的方法。在绘制电路原理图时，放置完了的电路图可能位置不太合适，需要进行移动。原理图中的所有对象都可以被移动，移动方法相似。对于元器件的移动来说又分...
- 电路仿真软件详谈(八)，proteus电路仿真软件和protel的区别
-
电路仿真软件是常用工具类型之一，proteus更是电路仿真软件中的佼佼者。但是对于proteus电路仿真软件和protel，二者总是被弄混淆。例如，protel是电路仿真软件吗?proteus电路仿真...
- PCB文件转换生产文件Protel 99SE_pcb格式转换
-
为何要将PCB文件转换为GERBER文件和钻孔数据？因为GERBER文件是一种国际标准的光绘格式文件，它包含RS-274-D和RS-274-X两种格式，其中RS-274-D称为基本GERBER格式，并...
- PCB设计项目教程 -PDF_pcb设计作品
-
PCB设计项目教程》及相关PCB设计教材详细介绍：一、核心教材《PCB设计项目教程》该教材由徐凯、王威担任主编，于2017年由北京理工大学出版社出版。其采用“项目导向、任务驱动”的教学模式，...
- 最受欢迎的pcb设计软件Protel99se到底怎么样?
-
Protel99se是一款国内非常实用且流行的设计行业的pcb设计软件，其由pcb原理图设计和多层板电路设计两大功能组成，其最大的特点是好获取，在网上可以随便的找到，且Protel99se软件适用于w...
- 人人都是网络雇佣兵，一种基于路由器的ddos平台设计思路
-
本文灵感来自于三个方面优酷路由宝，迅雷宝这种路由器流量兑现方式Anonymous匿名者的ddos方式传统木马ddos方案先说路由宝迅雷宝，这种以用户网络为节点的CDN网络中，会传输大量的流量，我上月优...
- 接口性能测试工具Locust介绍_接口和性能的测试要点
-
接口性能测试工具其实挺多的，小型有apache的ab工具，大型的有Jmeter、Locust......这里要介绍的是Locust，相对于Jmeter进行了比较完善的封装，Locust可以就显的更自...
- 华硕笔记本电脑安装系统实战心得体会
-
故障:某某的电脑叫人安装系统至一半就蓝屏死机.拿来给我安装,发现光驱无效,不能用光盘安装.电脑启动蓝屏.解决方法:用了半天时间安装也出现类似问题.后来考虑用U盘来装.1.首先制作U盘系统,把U盘资...
- dos命令systeminfo图文教程，显示操作系统配置信息msinfo32
-
大家好，我是老盖，首先感谢观看本文，本篇文章做的有视频，视频讲述的比较详细，也可以看我发布的视频。今天我们学习systeminfo命令，该工具显示本地或远程机器(包括服务包级别)的操作系统配置的信息，...
- 玩家展示现代硬件上运行的MS-DOS 拥有令人难以置信的向后兼容性
-
一位YouTuber展示了在现代计算机硬件上直接运行古老的MS-DOS操作系统和经典游戏的能力。这段视频由YouTuberInkbox发布，向观众展示了如何启动古老的、前Windows...
- 比微PE还干净还强大，带网络:USBOS V3.0超级PE装机工具20221031
-
期待已久的USBOSV3.0超级PE装机工具20221031又和大家见面了，用过的朋友都知道他的确很强大，对于新旧电脑的支持很好，目前为止还没有电脑不支持的，包括苹果PC。很多朋友还在用诸如大白菜、...
- 大童保险李晓婧:保险的本位是风险管理应在四方面进行建设
-
经济观察网记者姜鑫5月17日，大童保险服务宣布升级了风险管理模式，推出DOSM（DemandOriented，SolutionModel）需求导向型解决方案5.0版本。新解决方案从原有“六位...
- DOS常用命令及简介_dos常用命令大全及用法
-
DOS是英文DiskOperatingSystem的缩写，意思是“磁盘操作系统”。我是在95年开始学的电脑，当时学校的机房里，还没有一台WINDOWS操作系统的电脑，当时都是用DOS、UC-DOS...
- Windows 忘记开机密码?不用任何工具，1招轻松破解
-
出现忘记Windows密码的情况，概率有多大？对此，小电只能回答忘记开机密码的情况，说来就来，没有规律，也不会提前告诉你一声~而忘记Windows开机密码的时候，很多朋友都会想起可以使用u盘启动盘来破...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- 如何绘制折线图 (52)
- javaabstract (48)
- 新浪微博头像 (53)
- grub4dos (66)
- s扫描器 (51)
- httpfile dll (48)
- ps实例教程 (55)
- taskmgr (51)
- s spline (61)
- vnc远程控制 (47)
- 数据丢失 (47)
- wbem (57)
- flac文件 (72)
- 网页制作基础教程 (53)
- 镜像文件刻录 (61)
- ug5 0软件免费下载 (78)
- debian下载 (53)
- ubuntu10 04 (60)
- web qq登录 (59)
- 笔记本变成无线路由 (52)
- flash player 11 4 (50)
- 右键菜单清理 (78)
- cuteftp 注册码 (57)
- ospf协议 (53)
- ms17 010 下载 (60)