搜索
首页web前端PS教程ps中常见线条及边框设计制作
ps中常见线条及边框设计制作Jun 01, 2016 pm 02:32 PM
线条边框

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

一、虚线的制作

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

(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中常见线条及边框设计制作

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
Windows 11 上调整窗口边框设置的方法:更改颜色和大小Windows 11 上调整窗口边框设置的方法:更改颜色和大小Sep 22, 2023 am 11:37 AM

Windows11将清新优雅的设计带到了最前沿;现代界面允许您个性化和更改最精细的细节,例如窗口边框。在本指南中,我们将讨论分步说明,以帮助您在Windows操作系统中创建反映您的风格的环境。如何更改窗口边框设置?按+打开“设置”应用。WindowsI转到个性化,然后单击颜色设置。颜色更改窗口边框设置窗口11“宽度=”643“高度=”500“>找到在标题栏和窗口边框上显示强调色选项,然后切换它旁边的开关。若要在“开始”菜单和任务栏上显示主题色,请打开“在开始”菜单和任务栏上显示主题

如何在 Microsoft Word 中制作自定义边框如何在 Microsoft Word 中制作自定义边框Nov 18, 2023 pm 11:17 PM

想让你的学校项目的头版看起来令人兴奋吗?没有什么比工作簿首页上的漂亮、优雅的边框更能使其从其他提交中脱颖而出了。但是,MicrosoftWord中的标准单行边框已经变得非常明显和无聊。因此,我们展示了在MicrosoftWord文档中创建和使用自定义边框的步骤。如何在MicrosoftWord中制作自定义边框创建自定义边框非常容易。但是,您将需要一个边界。第1步–下载自定义边框互联网上有大量的免费边界。我们已经下载了一个这样的边框。第1步–在Internet上搜索自定义边框。或者,您可以转到剪贴

excel边框设置方法科普excel边框设置方法科普Mar 20, 2024 am 10:30 AM

Excel出现在我们日常工作和生活中已经不是一件罕见的事情了,无论是员工信息、工资表的制作或者是学生入学信息和成绩单的制作,Excel都是一款比较好用的工具。当要对Excel进行打印的时候需要设置边框来实现打印需求。本文小编为大家科普几个Excel边框设置方法。方法1、利用功能选项卡按钮,这应该是大家经常用的方法,方便快捷,具体操作:选中需要添加边框的单元格区域B2:H10,依次点击【开始】选项卡-【边框】右侧下拉按钮-【所有框线】,完成添加框线。方法2、选中需要添加边框的单元格区域B2:H10

电脑屏幕出现线条抖动闪烁怎么办电脑屏幕出现线条抖动闪烁怎么办Feb 22, 2024 pm 05:46 PM

在小伙伴日常使用电脑的时候,可能会遇到屏幕上出现线条闪烁的情况,非常影响使用体验,但又不知道如何处理,今天小编为大家带来电脑屏幕出现线条抖动闪烁解决方法。电脑屏幕出现线条抖动闪烁怎么办1、显卡故障如果长时间使用电脑有一定可能导致显卡出现问题,导致渲染发生故障,进而出现线条闪烁的情况出现。这种情况下,用户只需要关闭一段时间电脑,让显卡的到休息恢复性能,重启电脑后就能够解决。2、外部磁场当电脑所处环境如果存在强磁场,也会导致该情况出现,用户需要将电脑放置于空阔的环境中进行测试。如果线条抖动的情况消失

如何使用CSS实现元素的边框动画效果如何使用CSS实现元素的边框动画效果Nov 21, 2023 pm 02:26 PM

如何使用CSS实现元素的边框动画效果导语:在网页设计中,为了增加用户的视觉体验和页面的吸引力,常常会使用一些动画效果来使页面元素更加生动和有趣。其中,边框动画是一种很常见的效果,它可以使元素边框呈现出变化、闪烁或者流动的动态效果。本文将介绍如何使用CSS来实现元素的边框动画效果,并提供具体的代码示例。一、实现边框颜色变化动画要实现边框颜色变化的动画效果,可以

如何修复iPhone屏幕上的线条如何修复iPhone屏幕上的线条May 03, 2024 pm 09:10 PM

注意到iPhone屏幕上的垂直绿色、粉红色或while线条?一些用户求助于各种论坛,社交媒体句柄,关于他们在iPhone屏幕上目睹一些线条的问题。通过我们的快速解决方法,如果问题仍未解决,请继续按照解决方案解决此问题。修复1–取下屏幕保护膜在手机屏幕上的线条可能是由于显示屏上的屏幕保护膜造成的。有时,积聚的灰尘、水或任何其他异物可能会在保护器和屏幕的间隙之间滑动,导致屏幕上出现线条。从屏幕上取下屏幕保护膜并检查线路的状态。修复2–尝试删除该行一些用户只需按下电话上垂直线的一侧即可删除该线。步骤1

如何使用PHP为图片添加边框如何使用PHP为图片添加边框Aug 26, 2023 am 10:12 AM

如何使用PHP为图片添加边框在网页开发和图像处理中,经常需要为图片添加边框,以提升图片的美观度和可视性。本文将介绍如何使用PHP为图片添加边框的方法,并附有代码示例。首先,我们需要确保服务器上已安装了PHP的GD库。GD库是一个用于处理图像的开源库,可以用于创建、操作和输出图像。大多数服务器默认已经安装了GD库,但如果没有安装,可以通过PHP的扩展程序管理工

CSS属性实现渐变边框效果的技巧CSS属性实现渐变边框效果的技巧Nov 18, 2023 pm 02:53 PM

CSS属性实现渐变边框效果的技巧,需要具体代码示例在网页设计中,边框是一个重要的元素,能够为页面带来更加丰富的视觉效果。而如果能够在边框上实现渐变效果,将进一步增加页面的吸引力。本文将介绍一些使用CSS属性实现渐变边框效果的技巧,并提供具体的代码示例。使用"border-image"属性实现渐变边框<style>.gradient-

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),