Artisteer3 User Manual

2 page artisteer.com | page 2 Table of Contents Table of Contents 2 What is Artisteer? 5 What’s New in Artisteer 3.0 6 How to work with the Artisteer interface? 7 Start Up Dialog 8 Quick Access Toolbar 10 File Menu 10 Preview Area 14 Ribbon 19 Quick Start Guide 20 Downloading Artisteer 20 Editions of Artisteer: Home&Academic vs. Standard 20 System Requirements 21 Installing Artisteer 23 Activating the software 24 Creating a Website or Blog 25 Creating a Website From the Artisteer Built-in Samples 26 Creating a Website From Online Samples 29 Supported Content Management Themes and Web Design Templates 31 Supported Color Models and Properties 32 Creating a basic design 34 Design Customization 35 Exporting and Publishing Templates, Websites or Blogs 37 Export Options 40 Exporting a design as a WordPress theme 43 Exporting a design as a Joomla theme 45 Exporting a design as a Drupal theme 47 Publishing and Exporting Blogger designs 48 Exporting a design as a DotNetNuke Skin 49 3 page artisteer.com | page 3 Exporting a design as an ASP.NET Project 49 Exporting a design as a CodeCharge Studio Project 50 Exporting a Design as an HTML Template 53 Exporting a Designed Website or Blog as an HTML Website 53 Publishing a designed Website or Blog to Artisteer.Net 54 Ideas Tab 56 Creating Your Design 56 Making Adjustments 56 Home Tab (Website or Blog Only) 57 Edit Tab (Website or Blog Only) 60 Colors & Fonts Tab 72 Colors 72 Paints 74 Color Selector Dialog (More Colors) 76 Fonts 78 Layout Tab 82 Content Tab 87 Shape 87 Content Styling (Website or Blog Only) 90 Style and Font 91 Paragraph 95 Metadata 97 Background Tab 99 Sheet 106 Header Tab 110 Header Layout 110 Background 111 Foreground Photo 114 Flash 116 Title 118 Title Style 120 Menu Tab 121 4 page artisteer.com | page 4 Menu Layout 121 Menu Styles 122 Menu bar 123 Item 126 Subitem 128 Sidebar Tab 130 Sidebar Layout/Styling 130 Block Styles. 131 Block Content 139 Vertical Menu Tab 142 Layout and Styles 142 Menu Bar 143 Item 144 Advanced Options 146 Subitem 146 Buttons Tab 149 Footer Tab 153 Glossary 155 5 page artisteer.com | page 5 What is Artisteer? Artisteer is the first and only Web design automation product that instantly creates fantastic looking Website and Blog templates. It is powerful software that makes YOU a professional Web designer of Websites, WordPress themes and blog templates. It lets you create fantastic looking Website designs and templates in just minutes, without having to know anything about editing graphics or HTML. With Artisteer YOU immediately become a Web design expert, editing and slicing graphics, coding XHTML and CSS, and creating CMS templates and WordPress themes - all in minutes, without Photoshop or Dreamweaver, and no technical skills. Use Artisteer to generate cool Web design ideas, adjust the generated designs using many included elements, backgrounds, photo objects and buttons, create professional, tableless, cross browser compatible and fully compliant HTML and CSS code and export your design to create great looking Web and Blog templates. Creating great designs has never been easier! 6 page artisteer.com | page 6 What’s New in Artisteer 3.0 The new features in Artisteer 3.0 include: • Website creation features with support for editing pages and blog posts • Web design and website samples • Support for fluid layouts (resizable sheet width) • Interactive web design preview area (clicking a web design element navigates to corresponding tab in Artisteer) • Ability to specify design styles for the "Suggest" feature, generating thematic web designs (corporate, simple, retro, etc.) • Custom CSS options in Export Options • WordPress theme code based on the default WP 3.0 TwentyTen theme • Additional header and background graphics • Additional color themes • Website hosting service at www.artisteer.net (accessible from within Artisteer) • Header and footer can now be page-wide • Added transparency areas for various graphical effects • Added masked header textures (transparency areas in the texture graphics) 7 page artisteer.com | page 7 How to work with the Artisteer interface? The Artisteer interface is quite simple to learn. There are several main items: File Menu, Quick Access Toolbar, Ribbon with Tabs and Design Preview (highlighted on the image below). File Menu contains basic options (New, Open, Save, Save As), the Change Template option, the Export menu (Template, HTML, CSS Options, Export options, Favicon), the Preview in Browser option, Activation settings, and About Artisteer dialog. Quick Access Toolbar contains Open, Save, Undo, Redo, and Quick Export options. Ribbon contains the designer’s tools. Design Preview lets you see how your design will look like. Clicking on any objects in the Design Preview will automatically change the tab on the Ribbon bar to the options you can use to style those objects. 8 page artisteer.com | page 8 Start Up Dialog The Artisteer start up dialog suggests types of projects available in the software.You can create a website or blog, use the ready built-in or online website samples, design templates for Joomla, WordPress, Drupal, Blogger, DotNetNuke as well as create an ASP.NET application or CodeCharge Studio project. 9 page artisteer.com | page 9 Icon Option Description Website or Blog You can create a website in Artisteer and export it as an HTML website or publish it to Artisteer.net - a free online hosting service and blogging tool. Samples Samples suggest different categories of websites with typical start-up content. There are Personal and Professional, Business, and Community samples. Custom content may be entered WYSIWYG-wise. Editing tools are located in the Edit tab. Besides, you can insert links, images, cliparts, tables, and buttons. You can also view and modify the source HTML, as well as add/modify the web design using all the design tools available in Artisteer. Samples may be also used as CMS templates. Go to File- > Change Template and select the appropriate CMS, then export the project. Online Samples Online samples will take you to Artisteer.com and show a gallery with free ready-to-go templates, which can be previewed and downloaded at the website. The fully customizable templates are available for Joomla, WordPress, Blogger, Drupal and DotNetNuke. They are also available as an Artisteer project or an HTML website template. Online samples may be used both for personal and for commercial purposes. , , , Content Management System Themes Create and export a Joomla, WordPress, Drupal, Blogger or DotNetNuke template for your website or blog. Change the project anytime by going File -> Change Template 10 page artisteer.com | page 10 , Web Design Templates Create and export an ASP.NET application or CodeCharge Studio project. Quick Access Toolbar The Quick Access Toolbar is a customizable toolbar that provides the ability to create one-click shortcuts to frequently used commands and quickly perform the most common tasks. By default, the Artisteer Quick Access Toolbar contains the Open, Save, Undo, Redo and Export commands, but you can customize the content of the toolbar by adding or removing items as you like. To add a new item, right click on the desired command button in the Ribbon bar and select "Add to Quick Access Toolbar" option. To remove an existing item, right click on the item in the Quick Access Toolbar, and select "Remove from Quick Access Toolbar". Note: Not all the commands located in the Ribbon bar can be added to the Quick Access Toolbar. For some commands, the "Add to Quick Access Toolbar" option in the right click menu is disabled. File Menu In the File menu you can manage Artisteer projects (New, Open, Save, Save As), change the template, export or preview it as well as find general information about the version of Artisteer, your license key etc. The language of the interface, start up and preview settings can be adjusted in the Options dialog (at the bottom right corner of the file menu) [...]... describes how to install Artisteer on your computer Before you proceed, please make sure that your computer meets the requirements listed in the System Requirements chapter Log into Windows as a Power User, or assume the Primary Administrator role Double-click the installation file called ArtisteerInstall.exe This will launch a standard installation process Select the language that you’d like to use... option you want in specific list then click on “More…” to get full customization capabilities: Here is an example of how it looks for the Sheet tab: Even more options artisteer.com | page 35 36 page The user interface for a typical dialog box includes the list of the option groups located in the left pane of the dialog box Click on the group to expand its options Most of the dialog boxes contain settings