This is a tutorial for you by Chris Kellett, with just the AI cc and Muse cc, you can do simple Web page design and publishing without a single line of code.
But this article simply introduces the general operation process, more details need you to study carefully.
01. The basic layout with AI
The first step in the workflow is to use AI CC for basic layout and to create basic vector icons. When finished, select release to Layer (order) in the Layers panel. This will allow the design to be exported for PS editing.
02. Complete the design with PS
According to the AI-derived layer, using PS for visual design.
03. Naming Layers
When designing with PS, maintain good habits, such as properly naming layers, taking advantage of CC's builder tools, and ensuring that there are no spaces in named layers and layer groups (which can be replaced with underscores and hyphens).
04. Export Image Resources
Select the file > Builder > Image resource (file>generate>image Assets) after all layers and layer groups have been named. Save as PSD file, you can realize dynamic export image resources as a separate file.
05. Import to Muse CC
Import to Muse CC, in the floor plan, select the browser fill option (Browser fill), select the saved PSD file; Next, select a combination in the options, do not set the fill color, and remove the border.
03. Naming Layers
When designing with PS, maintain good habits, such as properly naming layers, taking advantage of CC's builder tools, and ensuring that there are no spaces in named layers and layer groups (which can be replaced with underscores and hyphens).
04. Export Image Resources
Select the file > Builder > Image resource (file>generate>image Assets) after all layers and layer groups have been named. Save as PSD file, you can realize dynamic export image resources as a separate file.
05. Import to Muse CC
Import to Muse CC, in the floor plan, select the browser fill option (Browser fill), select the saved PSD file; Next, select a combination in the options, do not set the fill color, and remove the border.
09. Change of State
Use the Status (State) panel to select the normal, flip, and activate state for each trigger (Trigger) for the component. You can change the color of the PNG icon through the effect tool.
10. Title Style
What about the title? Draw a rectangular box of the appropriate size, and then use the Font tool to enter the caption. Click the new Style icon in the paragraph style panel. Select H1 in the list
11. Add a simple form to a component
Here to save. Select Triggers (Trigger) to delete content in the objects (target) panel. Open the palette and pull out a simple fill-out component, put it in the right place. Use the status panel to modify the specific style of the form area.
12. Select Background image
Back in the flat view, select browser Fill and discard the image. But still in the Broswer fill panel mode, load a background image, center, adjust the proportions to ensure that the image is filled in.
13. Local Preview
Detected using Muse's built-in (built-in) browser preview. Select the Preview tab to test. Of course, use the browser to test it.
14. Publish
Use the Business Catalyst service to publish the website and click Publish (Publish). Enter the name of the test site, choose an address to do the host, select OK. The website will be uploaded, when finished, open the browser.
15. Online editing
If there is a change, then after the change, click the release button again, this will automatically upload the part of the change (and will not upload the unchanged part). Click on the admin button to open the business catalyst background so that you can edit content online in real time.
16. Upload with other tools
If you want to use other FTP applications to upload files, select File > Export as HTML option, so you can continue to upload with the FTP tool.
17. Complete
OK, we have completed a "No Line of code" Web design and construction by using the CC version of PS, MUSE, AI, Business Catalyst.