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.

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.

  

• 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.

  

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.

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.

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.

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

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)

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.

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.

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’.

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

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.

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

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

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.

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

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

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.

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’.

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.

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.

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

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.

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.

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.

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.

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’.

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’.

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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).

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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

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.

• 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.

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.

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.

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.

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.

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.

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

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).

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’.

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:

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.

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.

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.

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.

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.