Complete a simple line of code does not write web design

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.

　06. Adding Micro-pieces

Go back to the floor plan and open the homepage. Select Featured News Composition widget (sorry, little Muse CC, should be "special news component"), then add a component.

07. Select Font

Triggers the component target. Select the text font. You can find the Font menu in Control Panel and Text panel, select Web Fonts, and add fonts.

　　08. Add Icon

The template for the component is shown in the figure. Now you need to add the icon that you designed in step 1. Select File > Place, select icon and logo.

　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.