Artister 3 - Web Design Revolution doc

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) [...]... the Color Selector dialog artisteer.com | page 33 34 page Creating a basic design Creating a design with Artisteer is as easy as 1-2 -3 : 1 Suggest 2 When you find a th t l t the created design as a elements like colors, WordPress fonts or page theme idea and Export to save adjust some design to find a basic good design idea you may want to Design is a tool 3 Click theme, HTML background separately The... help of Artisteer.net - a free online hosting service and blogging tool, or Export the website as HTML Creating a Website From the Artisteer Built-in Samples The Artisteer built-in sample websites were designed to give you some ideas on the possible layout, design and content of a website depending on the topic it covers To create a website based on one of the Artisteer sample websites, select Samples... text 5 Publish/Export Click Create Website to publish the website with the help of Artisteer.net - a free online hosting service and blogging tool, or Export the website as HTML artisteer.com | page 30 31 page Supported Content Management Themes and Web Design Templates On Artisteer start up you can choose a type of project you would like to create Artisteer 3. 0 designs templates for Joomla, WordPress,... from different website samples with embedded content or select one of the available online samples made by professional web designers To create a new website or blog, use the ready website samples or go to the online gallery of samples, select the corresponding icon in the Artisteer start up dialog You can also switch to Website or Blog from another template (File -> Change Template -> Website or Blog)... Blog) So, creating a website is now as easy as 1-2 -3 1 Select Project Select a Website or Blog project in the Artisteer start up dialog artisteer.com | page 25 26 page 2 Edit Edit the dummy content in the Preview by clicking the content area and pasting/typing the text Rename Header, Slogan, add and rename Pages, Blocks and Articles 3 Publish/Export Click Create Website to publish the website with the... Windows Vista® or Windows Seven® artisteer.com | page 21 22 page Microsoft NET Framework 2.0+ It can be obtained from the Microsoft website at: http://www.microsoft.com/downloads/en/details.aspx?FamilyID=9CFB2D5 1-5 FF 4-4 491-B0E5B386F32C0992 Mac OS (Intel) Intel Core™ Duo 1 .33 GHz or faster processor 150 MB free disk space 1GB of RAM Mac OS X v10.5.x or 10.6.x Mac OS (PowerPC) Not supported Browsers supported:... do can be started by clicking the Suggest Design button This creates a random design that you can either work on or click again to see another suggested design artisteer.com | page 34 35 page Design Customization Artisteer is a powerful tool with great customization capabilities After you find a good design idea you may go into a specific tab and adjust the design to match your needs On each tab there... sample websites in Artisteer are arranged in three groups – Personal and Professional, Business, and Community You can choose from the variety of topics too – there are diary- like sample websites, samples on law, health, sport, fashion, business, restaurants, motor-cars, parenthood, religion and education 2 Find a Sample Find the sample website, which seems closest to your target website Sample websites... the "Auto-activation through the internet" option and enter the obtained activation key directly in the Activation Key box artisteer.com | page 24 25 page Creating a Website or Blog Starting from Artisteer 3. 0 you can create a website or blog in Artisteer This means you can add and edit content in a WYSIWYG mode, use the standard Artisteer tools to add and modify design and publish the created website... source HTML artisteer.com | page 27 28 page 3 Edit Edit the dummy content in the Preview by clicking the content area and pasting/typing the text 4 Publish/Export Click Create Website to publish the website with the help of Artisteer.net - a free online hosting service and blogging tool, or Export the website as HTML artisteer.com | page 28 29 page Creating a Website From Online Samples If you have not . 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. 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. 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