透明边框软件-怎么用PS让一张图片的边缘逐渐变成透明

在AXURE软件中,部件样式可以编辑,但有时却无法满足所有个性化原型的需求。例如文本框部件,可以设置是否隐藏边框,但即使隐藏边框之后,文本框还会有白色的背景。

当界面需要一个无背景色的输入框时,对于完美主义者来说,那无法去除的白色背景就显得尤其无法忍受,现在,就让我们用非常规手段,去了它。

01

建立“文本框背景透明”页面,双击页面名称,打开页面编辑页

02

“部件”窗口,拖一个矩形到编辑页,设置填充颜色:蓝色;再拖一个文本框(单行)放置在矩形的上面。

03

生成原型(注意是生成,不是预览),可以看到文本框(单行)的白色背景遮住了下面的矩形一部分。

04

找到原型生成时,保存的文件地址,找到“文本框背景透明”页面的样式文件:

05

打开文件,找到文本框(单行)部件的CSS样式,在样式内增加:opacity:0

06

保存文件,在浏览器中刷新原型查看效果

透明背景制作教程工具:photoshop CS6(大家可以点击跳转下载PS软件 , 已经安装好的直接跳过)

1、用photoshop软件制作一个透明格式的图片或者图标、logo , 背景不要是白色或者去除背景层白色 , 请看下面两张图对比:

背景不透明:

背景不透明

背景透明:

背景透明

2、单击选中右边需要制作背景透明的图层 , 再按键盘快捷键:Ctrl 鼠标左键(单击) , 添加选区

添加选区

3、选择:图层 , 旁边的:通道 , 再选择下面的 , 新建图层 , 建立一个:Alpha通道 , 此时背景就会变为黑色 , 选区仍旧存在 , RGB、红、绿、蓝 , 三个通道自动会取消通道眼睛(自动不选择)

建立一个:Alpha通道

4、按键盘上的快捷键:Ctrl delete或者Alt delete , 将Alpha通道选区填充为白色 , 快捷键详细用哪组 , 根据自己的情况 , 也就是PS左边的两个颜色(背景色和前景色)

将Alpha通道选区填充为白色

5、将:通道图层里面的RGB、红、绿、蓝前面的眼睛(全部勾选)

勾选全部通道图层

6、按键盘上的Ctrl Shift S快捷键另存为.BMP带Alpha通道的32位图片即可 。

按键盘上的Ctrl Shift S快捷键另存为.BMP带Alpha通道

选择32位

温馨提示:

操作以上步骤你可能会碰到PS按快捷键无法填充Alpha通道为白色的问题 , 原因可能是 , PS软件里面的前景色和背景色可能没有白色或者你的输入法为中文输入状态导致 。

步骤如下:

1.打开PS修图软件,选择你需要修改的图片;

2.在PS修图软件的左侧栏中找到“渐变”工具;

3.然后选择渐变颜色,将其修改为前景色到背景色;

4.完成上一步后,在上部工具栏中选择“径向渐变”;

5.给图片加多一个“蒙蔽”,在图层任务栏中的最下方的选项;

6.最后进行相应的微调,调到自己适合的渐变大小即可。