Tuesday 4 October 2016

Draw an SVG with Fill in Adobe Muse

Muse For You - Draw an SVG with Fill in Adobe Muse - Web Design Ledger

Draw an SVG with Fill in Adobe Muse. No Coding Skills Required.

Muse For You - Adobe Muse CC Adobe Muse CC Logo

In the video tutorial above I go over how to draw an SVG in Adobe Muse with the SVG Draw Widget found at http://museforyoushop.com. I recently released an update where you can now draw the SVG and have the fill fade in. The steps are as follows.

1. Drag and drop the “SVG Draw – Add First” widget from the library panel and place it at the top of your Adobe Muse website. If you do not see the library panel go to Window > Library.

2. Drag and drop the “SVG Draw Widget” from the library panel.

3. Add an SVG image. The SVG image can be any size and have a fill.

4. Set the stroke color and stroke width within the widget options.

5. Select the “Add Fill After Draw” option to have the fill fade in after the SVG draws.

6. Select “Enable Fill Color” if you would like to set a solid color for the fill instead of the original fill of the SVG image. If this option is selected you can select a fill color for the SVG.

Muse For You - Draw an SVG with Fill in Adobe Muse - Web Design Ledger

7. Choose from the following drawing methods:

  • Delayed – Draws all the SVG paths at the same time with a delayed start.
  • Async – Draws and finishes all the SVG paths at the same time.
  • One by One – Draws the SVG paths one by one.

8. In the new update you have the option of redrawing the SVG:

  • On Hover
  • On Click
  • On Window Resize

You can have the SVG redraw in all of these cases or different variations. For instance you can select on hover and on click.

9. If you would like the SVG to fade out after it draws enable the “Fade Out” option. This option works well if there is no fill.

10. Done.

For more video tutorials and widgets for Adobe Muse visit http://museforyoushop.com.

Happy Musing :).

Read More at Draw an SVG with Fill in Adobe Muse



from Web Design Ledger https://webdesignledger.com/draw-svg-fill-adobe-muse/

No comments:

Post a Comment