How To Design A Stunning Landing Page For A Portfolio Website With Adobe Muse

The list of Do’s and Don’ts for a portfolio website is endless. However, out of those lists, I’ve found two things in common – avoiding to populate a single page with everything and keeping the landing page and navigation as simple, attractive and easily accessible as possible.

How To Design A Stunning Landing Page For A Portfolio Website With Adobe Muse

That’s what you’ll learn with this tutorial. Apart from this, you’ll:

  • Learn how to optimize graphics for a Muse website using Adobe Illustrator (essential for making the site content to load faster)
  • Be able to display content in perspective using Photoshop.
  • Know how to design a professional landing page with Adobe Muse.

REQUIREMENTS OF THIS TUTORIAL:

For proper understanding and creating exactly what’s shown in this tutorial, you’ll need to download certain assets from various free resources. However, you can still follow along without these.

  • Go to https://goo.gl/KVL9r1 and download this image for the header. Its dimensions must be 1400 x 750 pixels. Here’s a screenshot from the site. Put this size in custom size boxes and download it.

    Requirements Of This Tutorial

  • Go to http://goo.gl/ZeHxOF and http://goo.gl/BASRSP and download social media icon pack and down arrow icon.
  • Logos used in this tutorial can be downloaded here (hyperlink – ‘assets.rar’ file is attached with the email)
  • Go to http://goo.gl/mzw1Xh and download this iMac 27” screen vector which will be used for displaying ‘website design’ project.
  • Open creative cloud desktop application and download iPhone and iPad mini mockups as shown below. They’ll automatically be added to your Photoshop library.

    Requirements Of This Tutorial

STEP #1: HOW TO OPTIMIZE GRAPHICS FOR WEB IN ADOBE ILLUSTRATOR:

1. Open social icons ‘eps’ file in illustrator. Select the facebook icon (square version) and press Ctrl+Shift+G to ungroup these icons.

How To Optimize Graphics For Web In Adobe Illustrator

2. Click outside the canvas and select the facebook icon again. Then, go to transform panel located at the top and put W=19.5, H=19.5 and hit enter.

How To Optimize Graphics For Web In Adobe Illustrator

3. Press Ctrl+C and then, Ctrl+N. In this new document dialogue box, put ‘static_facebook_icon’ under Name field, W=20 and H=20. Make sure that pixels is selected from the units drop-down list. Click OK.

How To Optimize Graphics For Web In Adobe Illustrator

4. Press Ctrl+V to paste the facebook icon and align it properly.

How To Optimize Graphics For Web In Adobe Illustrator

5. Go to File > choose ‘save for web’ (Alt+Shift+Ctrl+S). Choose PNG-24 from the drop-down list located at top right. Click save and save it at desired location. Also, save the illustrator file (Ctrl+S)

How To Optimize Graphics For Web In Adobe Illustrator

6. Repeat steps 2 to 5 for twitter, google plus, LinkedIn and Behance icons and save them for web.

NOTE: We’ve chosen png format because they have great transparency, comparatively lower size and are best for icons and vectors.

7. Similarly, optimize these five icons for header image. This time, change their color to white. To do this, select the icon, go to Fill drop-down located at top left underneath the application menu, select white color and save for web. Now, you have 10 icons – 5 grey and 5 white colored.

How To Optimize Graphics For Web In Adobe Illustrator

8. After that, optimize the down arrow icon (color: white, document W= 30px, H=20px) and save it for web as PNG-24.

9. Now, create a new document of size 1400 x 750 pixels and name it as header_image. Click OK.

10. Go to File > Place and browse for the image that we downloaded from pexels.com. Click on the canvas to place it and adjust it inside the canvas.

How To Optimize Graphics For Web In Adobe Illustrator

TIP: Hit ‘Z’ on your keyboard, hold alt key and click on the canvas a couple times to zoom out a little so that everything is visible at once.

11. Select rectangle tool from the tool box located at the left hand side of application window. Create a rectangle and transform it to W=1400, H=750px. Then, drag this rectangle onto the placed image.

12. With this rectangle selected, go to fill drop-down, select swatch libraries menu located at its bottom left corner. In this list, go to ‘Gradients’ and choose ‘Earthtones’.

How To Optimize Graphics For Web In Adobe Illustrator

13. Select earthtone 30 as indicated in the screenshot below and close this panel.

How To Optimize Graphics For Web In Adobe Illustrator

14. With the rectangle still selected, go to gradient tab located at right hand side of the application window. If it’s not there, press Ctrl+F9. Click, hold and drag the middle gradient slider to extreme left.

How To Optimize Graphics For Web In Adobe Illustrator

15. Then, inside the ‘Opacity’ field (located at the top), put 87% and hit enter.

How To Optimize Graphics For Web In Adobe Illustrator

16. Save this image for the web. This time, choose JPEG and quality=86%. Also, save the illustrator file.

How To Optimize Graphics For Web In Adobe Illustrator

STEP #2: PREPARING ASSETS IN PHOTOSHOP:

17. Open Adobe Photoshop CC. Go to File > choose ‘New’. Put the name as ‘ecommerce_design’, W=619px and H=310px.

Preparing Assets In Photoshop

18. From Libraries panel (located at right hand side), select ipad mini mockup that we downloaded and drag it onto the canvas.

Preparing Assets In Photoshop

19. Hold shift key and increase its size by dragging the corners and adjust it inside the canvas as shown below.

Preparing Assets In Photoshop

NOTE: You might want to use the zoom tool. To switch between zoom and selection tools, hit ‘Z’ and ‘V’ keys on your keyboard. Also, if you can’t find libraries panel (or any other panel), just go to Window menu > select Libraries.

20. Select rectangle tool and create a rectangle of any size inside the canvas (don’t worry about its fill color). A properties box will show up. Inside this, put W=1024px and H=768px and make sure the chain icon is not selected.

Preparing Assets In Photoshop

21. Now, click the chain icon to select it. Put W=290px and hit enter. Collapse this properties panel.

22. Under Layers panel located at right side, select ‘Rectabgle 1’, right click it and choose ‘convert to smart object’.

Preparing Assets In Photoshop

23. Then, go to edit menu > choose ‘Free transform’. Again, open edit menu > transform > select ‘distort’.

24. Hold one corner of the rectangle and make it coincide with one corner of the ipad’s screen. Do this for all four corners and hit enter. You’ll have the following result. Use the zoom tool if necessary.

Preparing Assets In Photoshop

25. Under Layers panel, right click the background layer and delete it. Also, make ‘rectangle 1’ layer invisible by clicking the little eye icon to its left.

26. Repeat steps 18 to 22 to create one more rectangle, convert it into smart object and make it coincide its every corner with corners of ipad screen and hit enter.

27. Make the ‘rectangle 1’ layer visible and ‘ipad’ layer invisible.

28. Right click ‘rectangle 1’ layer and choose ‘edit contents’. It’ll be opened in a new tab. Go to File > Place embedded, browse for ‘screen1.png’ which can be found in Logos folder you downloaded. Click place and hit enter. Press Ctrl+S. This change will be updated on rectangle 1 in our main file. Close this tab.

29. Similarly, do this for rectangle 2 with ‘screen2.png’ and save it. Move the layers up or down in the layers panel according to your preference. Delete the ipad layer.

30. Right click any rectangle layer and choose ‘blending options’. A layer style box will appear. Select the last option which is ‘drop shadow’ and put the values as shown below.

Preparing Assets In Photoshop

31. In this dialogue box, right next to blend mode, there is a color box. Click it and choose the following color values.

Preparing Assets In Photoshop

32. Apply same drop shadow effect to the second layer also. Press Alt+Ctrl+Shift+S. Select PNG-24 and click save. You’ll have the following result.

Preparing Assets In Photoshop

NOTE: This is how you can place a website or any image in perspective. You just need to know exact resolution of the device on which you’re going to place it. Do it for iphone and imac mockups for displaying ‘logo design’ and ‘website design’ projects as shown below.

STEP #3: SETTING UP WORKSPACE IN MUSE:

33. Open Adobe Muse CC. You’ll be greeted with a welcome screen. Under ‘Create New’, click site and a new site dialogue box will show up.

Setting Up Workspace In Muse

NOTE: Another way to create a new site is by going to File > New Site or Ctrl+N.

34. In this dialogue box, there is a drop-down menu that says ‘fluid width’. Open this up by clicking it and select ‘Fixed width’ and change the values of page width and columns as shown below. The ‘gutter’ field’s value will change automatically.

Setting Up Workspace In Muse

35. Expand the advanced settings option and ensure the ‘sticky footer’ check-box is selected. Also, make sure that the site in ‘center aligned’ within the browser area. Click OK. Muse will take you to the PLAN mode.

Setting Up Workspace In Muse

36. Hit Ctrl+S and save your site at a desired location. I recommend you to create a separate folder for your site and to save it every time you make a change.

NOTE: Fluid width is for creating responsive layout. We’ve chosen fixed width because we’ll be creating a scroll effect which doesn’t work with fluid sites.

37. Double click ‘A-master’ located at the bottom in a gray area. From tool box located at left hand side of the application window, select ‘text tool’.

Setting Up Workspace In Muse

38. Make a text box on the canvas. Hit Ctrl+T to open the text panel and under fonts drop-down, look for web fonts and choose ‘add web fonts’.

Setting Up Workspace In Muse

39. A new window will appear. Select ‘edge web fonts’ tab, search for and download the following fonts one by one:

  • Monoton
  • Telex
  • Numans
  • Raleway
  • Lato
  • Arimo

After downloading these fonts, delete the text box.

Setting Up Workspace In Muse

40. Open ‘Layers’ panel located at right side or go to Window menu > choose ‘layers’. Click the little folded edge paper icon located at its bottom right. Click it twice to create two more layers.

Setting Up Workspace In Muse

41. Double click ‘layer 1’. Layer options window will pop-up. Under name, put ‘home_header’ and click OK. Repeat this process for other two layers and name them as ‘static_header’ and ‘content’ respectively.

Setting Up Workspace In Muse

42. Arrange the layers in an order shown below by simply dragging them up or down and save the changes.

Setting Up Workspace In Muse

NOTE: We’ve put the layers in this order because we want our header to be at top of everything else. Layers are an efficient way to organize and stack the site content especially when the layout gets complex.

43. Select ‘static_header’ layer and collapse this panel.

STEP #4: ESTABLISHING STATIC HEADER:

44. At the top of the page, you’’ see two guides. First one is ‘top of page’ guide and the second is ‘header guide’. Click, hold and drag the header guide below and set it at 80 pixels. You can do this with the help of rulers. This is our header area.

Establishing Static Header

45. Select rectangle tool or hit ‘M’ on your keyboard. Make a small rectangle on the canvas and make sure its border color is ‘red’ which indicates that this object is inside ‘static_header’ layer.

46. Go to ‘Resize’ (or ‘Transform’ in older versions of Muse) located at top right, click it and put H=80.

Establishing Static Header

47. Drag this rectangle and put it inside the header area in such way that it snaps with ‘top of page’ and ‘header’ guides.

48. Now, we’ll increase the width of rectangle and make it 100% to make it scalable for every screen size. Expand the rectangle to both the edges and make sure it snaps with the page edges. When you’ll reach the edge, on orange colored guide will show up indicating that object has been snapped and a message will say W=100% or W=1400.

Establishing Static Header

49. With the rectangle selected, click Fill drop-down underneath the application menu and select white color.

50. Click the word ‘stroke’ next to fill. Click the chain icon to break it and put ‘1’ in bottom stroke weight field.

Establishing Static Header

51. After that, click the stroke color drop-down, put the values for R, G and B as 235 each. Then, click the folded edge paper icon to create a new swatch. A swatch options box will appear. Click Ok and save the changes.

Establishing Static Header

52. Go to File > Place. Browse for ‘static_logo.png’ and click open. The cursor will change its appearance to a place gun loaded with an image. Click on the canvas to place it.

53. Then, move this image onto the header rectangle and align it to its vertical center (a blue line will indicate when it’s centered) and snap it to the left border as shown below.

Establishing Static Header

54. Again, go to File > place and select all the static social media icons that we optimized using Illustrator. Click Open. You’ll see that the place gun will have a number (5) indicating five loaded images. If you want to switch to another icon to place it first, you can use the arrow keys on your keyboard. Place them one by one.

55. Select all the icons and go to ‘Align’ panel located next to Resize at top right. Under ‘Align to’ drop-down, select ‘align to key object’.

56. Then, put 11 in the field provided under ‘Distribute spacing’ option. Click the options ‘A’ and ‘B’ as shown in the screenshot below.

Establishing Static Header

57. With these icons selected, right click and choose ‘group’ or Ctrl+G. Move this group onto the header rectangle and snap it to the right border in alignment with the logo as shown below.

Establishing Static Header

58. Create a text box and type HOME in it. Hit Ctrl+T and select Font: Telex, Size: 13, color: black, center aligned and 120% leading. Adjust width and height of this text box according to the font size.

Establishing Static Header

59. Similarly, create four more text boxes for WORK, SERVICES, CONTACT and ABOUT. Select all of them, go to align panel and repeat what we did with social media icons. This time, change the distribute spacing to 50. Group and move them onto the header rectangle as shown below.

60. Now, we’ll pin these objects to top of the browser which will make our header static. Means, it will always be displayed at top of the browser irrespective of scrolling. To do this, select header rectangle, go to ‘Pin’ located at top right and click inside its top middle square as shown below.

Establishing Static Header

61. Likewise, pin the logo to top left, menu group to top middle and social icons group to top right. Our static header is ready.

STEP #5: ESTABLISHING FOOTER:

62. You’ll see three guides at the bottom namely – footer, bottom of page and bottom of browser. Click, hold and drag ‘bottom of browser’ guide and set it at 770 pixels with the help of rulers. Then, drag ‘footer’ guide and snap it to ‘bottom of page’ guide. This is our footer area.

Establishing Footer

63. Create a rectangle inside this area of H=270 and W=546, make its top and bottom sides coincide with footer and bottom of browser guides respectively.

64. With this rectangle selected, click the word ‘stroke’ and apply just the top stroke of weight ‘1’ (stroke color values: R=235 G=235 B=235). Go to ‘align’ panel and under align objects, select ‘align horizontal centers’ (it’s the second option).

65. Place the static_logo.png and add text inside this rectangle as shown below. (Text Font: Arimo, Size: 14, Color: R=37 G=37 B=37, Center aligned and 120% leading).

Establishing Footer

66. The copyright symbol you’re seeing before 2016 can be added from ‘Glyphs’ panel located at right side of application window. If it’s not there, go to Window > Glyphs. Our footer is ready.

Establishing Footer

STEP #6: CREATING HOME PAGE HEADER AND SCROLL EFFECT:

67. Close the master page and go back to the plan mode.

68. Open ‘Home’ page by double clicking it. Open layers panel, select ‘home_header’ layer and collapse the panel.

69. Make some room here by dragging down the footer layer to 4000 pixels with the help of rulers.

70. Now, create a rectangle of 100% width. Full width, as we did earlier, can be achieved by expanding the rectangle from its left and right edge and snapping it to both edged of the page.

71. Expand the rectangle upwards by dragging its top edge and snap it to top of page guide as shown below.

Creating Home Page Header And Scroll Effect

72. Go to resize panel, put H=750px.

73. With the rectangle selected, click the word ‘Fill’ (not the color drop-down) and click ‘add image’. Browse for ‘header_image.jpg’ that we downloaded from Pexels and optimized in Illustrator. Under ‘fitting’ drop-down, select ‘scale to fill’ and position it to top left corner.

Creating Home Page Header And Scroll Effect

74. In this ‘Fill’ options box itself, next to fill, there’s an option called ‘Scroll’. Click it and put 0 in initial and final motion fields. This means, the image will stay still and the content will move creating a nice and a visually appealing scroll effect.

Creating Home Page Header And Scroll Effect

75. Create a text box and type ‘ABOUT OUR TEAM’ in it. Font: Telex, Size: 13, Left aligned, color: white and leading: 120%. Move it and place it at top left corner of the image as follows.

Creating Home Page Header And Scroll Effect

76. Place all social icons we optimized for our header image. Align them at equal spacing as we did for static header. Group and place them at top right corner of the image as follows.

Creating Home Page Header And Scroll Effect

77. Create a text box. It should be of W=944, H=92. Type ‘WE DESIGN THE WEB’ in it. Font: Monoton, Size: 72, Center aligned, 120% leading. Change color of the word ‘WEB’ to R=41 G=171 B=226 and white for the rest.

78. Create three small text boxes more for SERVICES, CONTACT and BLOG. Font: Telex, Size: 13, Color White, center aligned and 120% leading.

79. Place the ‘header_logo.png’ image. Adjust the logo and these four text boxes as follows.

Creating Home Page Header And Scroll Effect

80. Go to ‘Widgets’ library located at right side. Expand ‘Buttons’ section. Select ‘State button’ and drag it onto the canvas. Close widgets panel.

81. Carefully select the little circle inside this button and hit delete.

82. Double click inside Lorem Ipsum text box, select the whole text, delete it and type ‘PORTFOLIO’.

83. Select the selection tool (arrow tool) from tool box. Go to text panel (Ctrl+T) and change the formatting of ‘portfolio’ text as follows.

Creating Home Page Header And Scroll Effect

84. Now, select the state button and resize it to W=177, H=43. Adjust the text box properly inside the button.

85. Select the button. Go to ‘corner radius’ option (located next to stroke). Click all the four corners to make them flat.

Creating Home Page Header And Scroll Effect

86. With the button selected, look at the top left corner, underneath application menu. You’ll notice that ‘state button’ is written in bold letters. This is known as ‘current selection area’. It allows you to know what you’ve selected.

Creating Home Page Header And Scroll Effect

87. Right next to it is ‘Normal’. Click it and you’ll have four states.

88. For Normal state, change fill color to ‘none’ and stroke color to white.

89. Select ‘rollover’ state, change both fill and stroke color to R=41 G=171 B=226.

90. For ‘mouse down’ and ‘active’ state, required changes will be applied automatically.

91. Select its normal state again, expand the ‘Transition’ panel located at the bottom. Select the check-box that says ‘Fade’ and put the values as shown below. Save the changes.

Creating Home Page Header And Scroll Effect

92. Place ‘down_arrow.png’ image below the button. You should have the following result.

Creating Home Page Header And Scroll Effect

93. Our home header is ready. Go to File > Preview page in browser (Ctrl+Shift+E) and see if everything is working properly.

STEP #7: ADDING CONTENT:

94. Go back to Muse, open the layers panel, select ‘content’ layer and collapse the panel.

95. Scroll down to white space below and make a text box of W=464, H=60. Type ‘OUR RECENT WORK’ in it. Font: Raleway light, size: 46, color: black, center aligned and 120% leading. Now, select the word ‘RECENT’ and change its font to ‘Raleway Bold’.

96. Make two more text boxes. One with W=376, H=165 and other with W=376, H=363.

97. Double click inside the first one and type ‘WEBSITE DESIGN’. Font: Raleway Extra Light, size: 77, color: black, left aligned, 100% leading.

98. Double click inside the second one and paste some dummy text from lipsum.com as follows.

Adding Content

  • For main heading – Font: Lato Bold, size: 30, color: R=33 G=42 B=52, left aligned and 120% leading.
  • For main paragraph – Font: Lato light, size: 21, color: R=57 G=57 B=57, left aligned and 120% leading.
  • For ‘Client’s Testimonial’ heading – same as main heading but the size is 21.
  • For testimonial paragraph – same as main paragraph but the font is ‘Lato Light Italic’

99. Select ‘portfolio’ state button, copy and paste it below the text box we created in previous step. Change the text from portfolio to ‘VIEW SITE’

  • For normal state – Fill: none, stroke and text color: black.
  • For rollover state – Fill and stroke color: R=41 G=171 B=226 and text color: white.

100. Place ‘imac with website mockup’ image. Arrange the image, text boxes and buttons as follows.

Adding Content

101. Scroll down to white space and create a rectangle of W=1200, H=5. Apply top stroke of weight ‘1’ and color R=235 G=235 B=235. Place it as follows. This will work as a separator.

Adding Content

102. Copy the text boxes and buttons we create in steps 92 to 95, paste them below the separator. Change text of first box to ‘LOGO DESIGN’ and button text to ‘VIEW LIVE’.

103. Place ‘iphone with logo mockup’ and arrange them as follows.

Adding Content

104. Copy and paste the separator after this.

105. Similarly, copy and paste the text boxes and button below this separator. Change text of first box to ‘E-COMMERCE’.

106. Place ‘ecommerce_design.jpg’ that we created and optimized in steps 15 to 30 with Photoshop. Arrange everything as follows.

Adding Content

107. Now, create a rectangle of W=1004, H=363 with no fill and top stroke of weight ‘1’ and color: R,G,B=235 each.

108. Inside this rectangle, create two text boxes. In the first one, type – ‘WHAT WE BELIEVE IS’ (Font: Raleway light, size: 35, color: R,G,B=37 each, center aligned and 100% leading). Select the word ‘BELIEVE’ and change the fonts to ‘Raleway bold’.

109. In the second text box, type the famous quote by Milton Glaser as shown below (Font: Lato Light Italic, size:70, color: R,G,B=37 each, center aligned and 120% leading.

110. Copy and paste any of the above state buttons and change its text to ‘SEE OUR WORK’. Arrange everything as follows.

Adding Content

STEP #8: LINKING:

111. From the tool box, select ‘link anchor’ or hit ‘A’ on your keyboard. The cursor will change its appearance to a place gun loaded with an anchor. Place this anchor above ‘OUR RECENT WORK’ text box as shown below.

Linking

112. A dialogue box with anchor options will pop-up. Inside name field, put ‘recent_work’.

Linking

113. Select the down_arrow image place below portfolio button. Go to ‘Hyperlinks’ drop-down located at top and select ‘recent_work’. Save the changes and preview the site (Ctrl+Shift+E).

Linking

STEP #9: ADDING ALTERNATIVE TEXT, METADATA, LEVEL TAGS AND FAVICON:

114. Alternative text is a way of making search engines understand the meaning of matter contained in an image and must be provided to every single image you add to your site. To do this, right click any of the three images that we’ve placed and choose ‘edit image properties’.

Adding Alternative Text, Metadata, Level Tags And Favicon

115. An image properties dialogue box will pop-up. You’ll see two fields here. One is ‘tool tip’ and the other is ‘alt text’. Basic differences between the two are as follows:

Adding Alternative Text, Metadata, Level Tags And Favicon

TOOL TIPALT TEXT
  • This is the title which appears when you hover over an image in the browser.
  • In HTML, this is referred to as <title> tag.
  • This is the information about image’s subject.
  • In HTML, this is referred to as <alt> tag.
  • Should be short yet descriptive.
  • Doesn’t appear in the browser but it is written automatically inside the code.

NOTE: You should search the web for methods and important considerations for adding alt text and metadata as they’re cardinal aspects for better SEO.

116. To add metadata, go back to Plan view, right click the home page and choose ‘page properties’. A new window will show up containing three tabs namely – layout, metadata and options. Switch between these tabs, explore the options and add relevant keywords.

Adding Alternative Text, Metadata, Level Tags And Favicon

117. Another important factor to consider before taking the site on-line is to alter some text properties to add level tags.

NOTE: Normally, when you add written content on a website, you make the headings bold and larger than the paragraphs (or other text) in order to illustrate the difference between them. We, as humans, can recognize this difference. But the problem is that the browser does not understand which part of your text is the heading and which one is the paragraph unless, you assign designated level tags to each one of those.

Surely, it will present your page online as you designed it whether you have applied the tags or not (because of CSS), but for making an SEO friendly site, it is necessary to use these descriptive tags.

118. To do this, select the text, go to text panel (Ctrl+T) and at the bottom, you’ll see a drop-down containing all the tags. Select them accordingly and save the changes.

Adding Alternative Text, Metadata, Level Tags And Favicon

119. Go to File > Site properties. Under content tab, the last option is ‘Favicon’ (in older versions of Muse, it’s under Layout tab). When you hover over the word ‘Favicon’, a tool tip will appear describing what it is and what should be its appropriate dimensions. It is advantageous to add a favicon as it caters for making your brand stand out and for making your site easily identifiable if the users have bookmarked it.

Adding Alternative Text, Metadata, Level Tags And Favicon

STEP #10: EXPORTING THE SITE:

120. At last, go to File > Export as HTML (Ctrl+E). Under site URL field, put www.squaremaze.com and select the location where you want the site to be exported. Click OK. Our Landing Page is now ready. You can preview it (‘index.html’ file) in any browser you want and test its look and performance.

Exporting The Site

FINAL RESULT:

Portfolio Site Landing Page Final Result

Portfolio Site Landing Page Final Result

Portfolio Site Landing Page Final Result

Portfolio Site Landing Page Final Result

Portfolio Site Landing Page Final Result

Portfolio Site Landing Page Final Result

Portfolio Site Landing Page Final Result

CONCLUSION

Using other applications such as Illustrator, Photoshop, Fireworks, Fuse and Animate to create quality assets for a Muse site has always proved beneficial and has extracted exceptional outcomes. This was just one approach towards designing with this awesome tool. Go ahead and explore more. Thank You.

Like it? Share it.

2 Comments

  1. Illustrator is my favorite tool. Can’t imagine better tool than this. But I think you should read some articles about mistakes. Sometimes web designers are forgetting about general rules. But when they don’t know about specifics it’s worse.

  2. Thanks for great videos i really enjoy them

Leave a Comment Yourself

Your email address will not be published. Required fields are marked *