当前位置: 首页 > 工具软件 > MuseUI > 使用案例 >

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

陶涵育
2023-12-01

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设计和发布网站”

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-create-buttons-in-photoshop-and-adobe-muse--cms-22142

muse ui去除按钮阴影

 类似资料: