ps中常见线条及边框设计制作

在网页与多媒体界面设计过程中,经常会使用到一些线条边框设计,以对界面区域进行划分,特别是在网页中,线条及边框设计比较多。本小节将介绍网页中常用线条及边框设计的制作方法。

一、虚线的制作

在网页中,虚线是一种最常见的线条及边框设计,它一方面可以使网页结构清晰,另一方面也对画面起修饰与点缀作用。

(1)执行“文件>新建”菜单命令,如下图所示。
ps中常见线条及边框设计制作

(2)双击工具箱中的“抓手工具”,将图像放大显示。
(3)选择工具箱中的“矩形选框工具”在工具选项栏中设置“羽化”值为0,在图像窗口中拖动鼠标,在中间建立一个像素的选择区域,然后填充为黑色,如下图所示。
ps中常见线条及边框设计制作
(4)按CtrL+A快捷键全选图像,执行菜单栏中的“编辑>定义匿案”命令,在弹出的“定义图案”对话框中单击“确定”按钮,则定义了图案。
(5)重新建立个图像文件,然后选择工具中的“单行选框工具”,建立一个单行选择区域,在执行菜单栏中的“编辑>填充”命令,在弹出的“填充”对话框中选择刚刚定义的图案进行填充,结果就会产生虚线,将虚线应用到网页中的效果如下图所示。

ps中常见线条及边框设计制作

二、立体线条的制作

使网页中的线条及边框设计具有一种独立感,可以极大地丰富网页的视觉效果,创建更活跃的网页界面,这里介绍一种独立感线条的制作方法。
(1)执行“文件>新建”菜单命令,创建一个尺寸为9.5cm×5cm、分辨率为72像素/英寸的图像文件。
(2)设置背景色的RGB值为95、98、1 01,将图像背景色填充为灰色。
(3)将图像以200%的比例放大显示。
(4)选择工具相中的“铅笔工具”,在铅笔工具选项栏中设置参数,如下图所示。

ps中常见线条及边框设计制作

(5)打开“画笔”面板,设置参数,如下图所示。

ps中常见线条及边框设计制作

(6)创建一个新图层“图层1”。
(7)设置前景色的RGB值为1 93、1 94、198,按住Shift键的同时在画面中水平拖动鼠标,绘制一条两个宽度的虚线,如下图所示。

ps中常见线条及边框设计制作

(8)创建一个新图层“图层2”,然后设置前景色为黑色,在按住Shift键的同时在灰色线条的上方水平拖动鼠标,再绘制出一条相同长度的黑色虚线。
(9)选择工具箱中的“移动工具”,然后使用方向键微移“图层2”的黑色虚线,使“图层1”与“图层2”中的两条虚线产生交错效果,两条虚线偏移1个像素,如下图所示。

ps中常见线条及边框设计制作

(10)双击工具箱中的“放大镜工具”,使图像以1 00%的比例显示,则产生了立体效果,如下图所示。

ps中常见线条及边框设计制作

如果将这样的立体线条应用到网页设计中,将产生很好的视觉效果,如下图所示,将这种线条重复使用,可以形成大面积的分割区域。

ps中常见线条及边框设计制作

三、斜纹线条的制作

斜纹线条多用作网页中某一功能区的底纹使用,使用它作为分割线的情况比较少见。斜纹线条的制作主要运用了Photoshop软件的自定义图案技术,具体操作步骤如下。
(1)执行“文件>新建”菜单命令,创建个尺寸为9.5cm x 5cm、分辨率为72像素/英寸的图像文件。
(2)设置背景色的RGB值为95、98、1 01,将图像背景填充为灰色。
(3)将图像以1600%的比例放大显示。
(4)创建一个新图层“图层1”。
(5)选择工具箱中的“铅笔工具”,在铅笔工具选项栏中设置参数,如下图所示。

ps中常见线条及边框设计制作

(6)设置前景色的RGB值为1 90、1 91、1 92,在画面中单击,绘制出两条平行的,由1 0个像素组成的倾斜线条,如下图所示。

ps中常见线条及边框设计制作

(7)选择工具箱中的“矩形工具”,在工具选项栏中设置“羽化”值为O,然后在画面中拖曳鼠标,创建一个矩形选择区域,然后在“图层”面板中隐藏“背景”层,如下图所示。

ps中常见线条及边框设计制作

(8)执行“编辑>定义图案”菜单命令,在弹出的“图案名称”对话框中输入名称,然后单击“确定”按钮,如下图所示。

ps中常见线条及边框设计制作

(9)按Ctrl+A快捷键全选图像,然后按Delete键删除选择区域内的图像。
(1 0)选择工具箱中的“矩形选框工具”,在画面中创建一个矩形选择区域。
(1 1)选择工具箱中的“油漆桶工具”,在“油漆桶工具”选项栏中单击,选择刚刚存储的图案名称,如下页图所示。

ps中常见线条及边框设计制作

(1 2)在选择区域内单击,填充图案,然后按Ctrl+D快捷键取消选择区域效果,如下图所示。

ps中常见线条及边框设计制作

将这种斜纹线条应用到网页设计中,既可以作为功能区的底纹,也可以作为一种点缀,如下图所示,我们将这种斜纹线条应用在导航条右侧的空白区上,平衡了整个页面,并且增强了节奏感,页面更加和谐、清晰。

ps中常见线条及边框设计制作

四、交叉纹线条的制作

与斜纹线条~样,交叉纹线条也多用于网页功能模块的底纹,制作方法与思路跟斜纹线条基本一致,关键是准确定义好图案样本,这一点很重要。
(1)执行“文件>新建”菜单命令,创建一个尺寸为9.5cm×5cm、分辨率为72像素/英寸的图像文件。
(2)设置背景色的RGB值为95、98、101,将背景色填充为灰色。
(3)将图像以1 600%的比例放大显示。
(4)创建一个新图层“图层1”。
(5)选择工具箱中的“铅笔工具”,在“铅笔工具”选项栏中设置参数,如下图所示。

ps中常见线条及边框设计制作

(6)设置前景色的RGB值为1 90、1 91、1 92,在画面中单击,绘制出一个由单个像素组成的图像,如下图所示。

ps中常见线条及边框设计制作

(7)选择工具箱中的“矩形选框工具”,在工具选项栏中设置“羽化”值为O,在画面中拖动鼠标,创建一个正方形选择区域,如下图所示,将图像选中,然后在“图层”面板中隐藏“背景”层。

ps中常见线条及边框设计制作

(8)执行“编辑>定义图案”菜单命令,在弹出的“图案名称”对话框中输入名称,然后存储图案。
(9)按Delete键删除选择区域内的图像,然后显示“背景”层,重新使用“矩形选框工具”在画面中创建一个矩形选择区域。
(1 O)选择工具箱中的“油漆桶工具”,在油漆桶工具选项栏中单击,选择刚刚存储的图案。
(11)在选择区域内单击,填充图案,效果如下图所示。

ps中常见线条及边框设计制作

在网页设计中,我们使用交叉纹线条作为导航条的底纹,使得页面显得很清净而又不单调,如下图所示,与其他的按钮式导航条相比,这种设计具有制作方法简单、效果突出的特点。

ps中常见线条及边框设计制作

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3221867.html

(0)
上一篇 2025年4月1日 13:51:08
下一篇 2025年4月1日 13:51:17

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 北京健康宝的边框每天都在变化吗

    北京健康宝的边框每天都在变化吗是大家经常问的,毕竟对于初次申请健康宝的友友来讲,因为健康码突然出现的这个跑马灯所以这个话题就成了大家讨论的焦点,一起看看吧。 北京健康宝的边框每天都在变化吗 北京健康宝的边框是每天都在变化的,毕竟这个边框的主…

    2025年5月25日
    242.3K00
  • 北京健康宝粉色边框能不能出入北京

    北京健康宝粉色边框能不能出入北京是大家经常问的,毕竟对于初次申请健康宝的友友来讲,因为健康码突然出现的这个跑马灯所以这个话题就成了大家讨论的焦点,一起看看吧。 北京健康宝粉色边框能不能出入北京 北京健康宝粉色边框因不能判定你是否健康,所以这…

    2025年5月25日
    365.7K00
  • Photoshop照片添加红木相框教程

    红木,千百年来,我国一直在延用着。不管是最酷的现代人还是随便一位老年人,一样在欣赏和接受。目前市面上的红木制品的价格大家比我更清楚了,今天我们来学习如何制作红木像框。 先来看效果:

    2025年4月1日
    200
  • html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点_html5教程技巧

    如果你还不知道Canvas是什么,可以看看上一篇. 在学画画的时候,线条是最基本的了,而线条的连接可以组成任何图形。在Canvas中也是如此。 在开始之前我们先拿出画布和画笔: 复制代码代码如下: var cvs = document.ge…

    2025年4月1日 编程技术
    100
  • 移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)

       前两天在开发在微信访问的html5页面,里面有个订单查询要选择时间,刚开始使用的输入框,没加任何的样式,效果是白色的背景再加上边框很丑,完全与整个背景不协调。 刚开始设置了输入框背景色透明(background-color:trans…

    2025年4月1日
    200
  • html中fieldset边框样式设置

    或许你想到可以用图片来实现这样的效果,但图片除了体积稍大,语义上也很欠缺。这样的效果如何用xhtml+css实现呢?首先我们通过 fieldset设置一个方框(也译作域),然后通过特定的标签legend域标题,设置一个标题,并对它们进行相应…

    2025年4月1日
    100
  • 怎样隐藏溢出DIV边框的内容

    平时我们布局的时候,有时内容超过了我们div边框限制的宽高,这样就会让网页错位变乱,特别的不美观,用户体验度极差,我们需要怎么样来隐藏溢出div边框的内容呢?今天就给大家带来这一份教程。 CSS样式实现溢出超出DIV边框宽度高度的内容自动隐…

    编程技术 2025年4月1日
    100
  • 怎么用css写虚线边框

    今天给大家讲解各种样式的div虚线边框怎么用css操作,虚线下划线,虚线列表都可举一反三,让你再也不纠结于实线虚线!首先我们先看一下四边都为虚线边框的div。 一、四边为虚线边框 border:1px dashed #000; 黑色虚线边框…

    编程技术 2025年4月1日
    100
  • div元素怎样添加圆角边框

    这次给大家带来div元素怎样添加圆角边框,给div元素添加圆角边框的圆角边框有哪些,下面就是实战案例,一起来看一下。 div   {   border:2px solid;   border-radius:25px;   } 登录后复制 相…

    编程技术 2025年4月1日
    100
  • 分享div加一个边框样式的示例代码

    如何给div加一个边框样式? 对div盒子加一个边框样式很简单只需要使用border板块样式即可。 一、虚线与实线边框   –   TOP 边框虚线样式:dashed边框实现样式:solid border:1px dashed …

    编程技术 2025年3月29日
    100

发表回复

登录后才能评论