muse ui去除按钮阴影
在本教程中,我将向您展示如何在Photoshop中创建按钮以及如何在Adobe Muse项目中使用按钮的所有状态。 一旦设计好Photoshop资源并将其导入到Adobe Muse中,我们将看看如果想进一步更新PSD会发生什么情况。
观看截屏
下载视频或在YouTube上订阅Tuts + Web Design 。
阅读教程
欢迎使用有关Adobe Muse的快速提示教程。 上面的视频演示了如何在Photoshop中创建按钮并将其放置在Adobe Muse中。
Adobe Muse中的按钮具有四个状态。 因此,如果您在Adobe Muse中将矩形放置在此处,则会知道默认情况下您有四个状态
- 正常的 。
- 翻转 (当鼠标悬停在元素上时)。
- 按下鼠标 (单击时)。
- 和积极 。
要创建按钮,请绘制一个矩形,然后用颜色或渐变填充它,或在背景中添加图像。
这很棒,但是有时候您会想要在Adobe Photoshop中设计所有内容,并能够从那里导入状态。
使用Photoshop
打开Photoshop并创建矢量形状; 正常的绿色按钮。 根据需要设置样式,带有圆角,边框等。 我想创建四个状态,因此我将从命名第一层Button Normal开始 。
然后,我将复制该层-下一层将是我的鼠标悬停状态。
在这种情况下,我们只需更改颜色,使其更亮。
对所需的所有四个状态重复该过程,然后将文件另存为ButtonGreen.psd。
移至Adobe Muse
现在在Adobe Muse中,如果我想使用此设计而不将图层导出到PNG文件,则可以直接执行“ 文件”>“放置Photoshop Button” ,选择“ ButtonGreen.psd”,然后它将解析Photoshop中可用的所有图层文件。
将每个图层分配给按钮状态,然后将其放在舞台上,并根据需要调整其大小。
然后,使用“文本”工具,我们可以在其顶部添加一个标签(例如,SUBSCRIBE)。
预习
如果现在在“浏览器”中预览它,您将确实看到,我们有四个状态。 当我们进行鼠标悬停以及单击时,它将更改按钮的状态。
返回Photoshop
现在,如果我在Photoshop中更改或修改设计会怎样?
例如,在Photoshop中,让我们更改“正常状态”的颜色。 我们将其设置为蓝色按钮,然后保存PSD文件。 如果现在返回到Adobe Muse,则没有可见的更改,但是如果打开“资产面板”,则会看到警告消息。
它将表示自导入数据以来资产已更改,因此我们可以右键单击并仅说我们要更新资产。
结论
这表明在Adobe Photoshop和Adobe Muse之间使用资产比以往任何时候都更容易。 我希望您喜欢这个快速提示!
更多Adobe Muse
有关Adobe Muse的更多详细信息,请参阅我的免费课程“ 使用Adobe Muse设计和发布网站” 。
muse ui去除按钮阴影