muse ui去除按钮阴影_如何在Photoshop和Adobe Muse中创建按钮

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之间使用资产比以往任何时候都更容易。我希望您喜欢这个快速提示！