2 page. Table of Contents

Transcription

1 Version 3.1

2 2 Table of Contents Table of Contents... 2 What is Artisteer?... 6 What s New in Artisteer How to work with the Artisteer interface?... 8 Start-Up Dialog... 9 Quick Access Toolbar File Menu Preview Area Ribbon Bar Quick Start Guide Downloading Artisteer Editions of Artisteer: Home&Academic vs. Standard System Requirements Installing Artisteer Activating the Software Creating an Artisteer Project Using the Artisteer Samples Creating a Website or Blog Supported Content Management Themes and Web Design Templates Creating a basic design Design Customization Supported Color Models and Properties Exporting and Publishing Templates, Projects, Websites or Blogs The Export Options Dialog General Tab CSS Options Tab Description Tab Watermark Tab Footnote Tab artisteer.com 2

3 3 WordPress Export Options Blogger Export Options DotNetNuke Export Options Website or Blog Export Options Website or Blog:Exporting and Publishing an HTML Project Website or Blog:Publishing a Blog to Artisteer.Net Joomla Template:Export and Installation Tips and Tricks: How to Use Joomla Menus with Artisteer WordPress Theme:Export and Installation Drupal Theme: Export and Installation Blogger Designs: Publishing and Export DotNetNuke Skin:Export and Installation ASP.NET Project:Exporting a Design CodeCharge Studio Project: Exporting a Design Ideas Tab Creating Your Design Making Adjustments Home Tab (Website or Blog Only) Edit Tab (Website or Blog Only) Setting the Content Layout All Pages Option Row Options Cell Options Inserting Media and Links Insert an Image Insert a Video Insert a Table Insert a Hyperlink Insert a Button Editing the HTML Source Colors & Fonts Tab artisteer.com 3

4 4 Colors Paints Color Selector Dialog (More Colors) Fonts Layout Tab Content Tab Shape Content Styling (Website or Blog Only) Style and Font Paragraph Metadata Background Tab Sheet Tab Header Tab Header Layout Header Background Image Foreground Photo Flash Title Title Style Menu Tab Menu Layout Menu Styles Menu bar Item Subitem Blocks Tab Block Styles Block Content Vertical Menu Tab Layout and Styles artisteer.com 4

5 5 Menu Bar Item Subitem Buttons Tab Footer Tab Layout Footer Styles CMS-Specific Features Theme options for WordPress themes Glossary artisteer.com 5

6 6 What is Artisteer? Artisteer is the first and only Web design automation product that instantly creates fantastic looking Website and Blog templates. This powerful software can make YOU a professional Web designer of Websites, WordPress themes and other blog templates. Artisteer 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 expensive software like Photoshop or Dreamweaver, and with little or no technical training required. Use Artisteer to generate cool Web design ideas, adjust the generated designs using many included elements, backgrounds, photo objects and buttons, create professional, table less, 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! artisteer.com 6

7 7 What s New in Artisteer 3.0 The new features in Artisteer 3.0 include: Website creation features with support for editing s 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 the 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 Free website hosting service at (accessible from within Artisteer) Header and footer can now be -wide Added transparency areas for various graphical effects Added masked header textures (transparency areas in the texture graphics) artisteer.com 7

8 8 How to work with the Artisteer interface? The Artisteer interface is very 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. artisteer.com 8

9 9 Start-Up Dialog The Artisteer start-up dialog suggests types of projects available in Artisteer. You can create a website or blog, start with one of the ready-made website samples, or create a CMS template for Joomla, WordPress, Drupal, Blogger, or DotNetNuke. You can also create web templates for ASP.NET applications, or CodeCharge Studio projects. artisteer.com 9

10 10 Icon Option Description Website or Blog Samples Online Samples,,, Content Management System Themes 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 for Wordpress style blogs. There are several sample templates installed with Artisteer. These samples cover different categories of websites with typical start-up content. Online Samples will take you to Artisteer.com and show you a gallery with ready-made templates, which can be downloaded and previewed for free. From each sample, you can download and install one of the CMS templates, such as Joomla, Wordpress, Blogger, etc., or you can download the Artisteer project from which these templates were created. Note, you cannot import CMS templates into Artisteer, even the ones that were created with Artisteer. If you want to use one of the sample designs as the basis, or idea for your own website, download the Artisteer and open the Artisteer project (i.e. *.artx file). Create and export a Joomla, WordPress, Drupal, Blogger or DotNetNuke template for your website or blog., Web Design Templates Create and export an ASP.NET application or CodeCharge Studio project. artisteer.com 10

11 11 Quick Access Toolbar The Quick Access Toolbar is a customizable toolbar which you can use 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 Artisteer interface, start up and preview settings can be adjusted in the Preferences dialog (at the bottom right corner of the file menu). artisteer.com 11

12 12 Please note that the Save/Save As option is disabled if you are using Artisteer in trial mode. If you would like to switch your template to a different application or Content Management System, open Change Template and select the desired type of template. Although when you create a project, you have to pick the type of template you want to create, you can create any template from one project. For example, if you are using the standard edition of Artisteer, you can create templates for Joomla, Wordpress, Blogger, etc., all from one project. You do not have to create separate projects for each template. When you change templates within a project, you do not lose the design you were working on. Rather, where the CMS templates share the same design elements, the design you create with one template is applied to the other. Where they are different, the changes are saved and you can come back to them at any time by changing the template type. For example, if you create a website or blog project, you design a Header and create style choices for the content such as how headings and tables will look on your website. You can also create content for your website, such as s and post articles. If you change the template type to Wordpress, the style elements, such as the Header, and other choices are automatically applied to your Wordpress theme, but the content is not because with Wordpress, like most CMSs, the content is added in the Wordpress backend. That artisteer.com 12

13 13 is, you do not create content with Artisteer when you are creating a CMS template; you only define the design, or style of how the content will appear. The content in your website is added in the backend of the CMS. But, you will notice that when you switch from a website or blog to Wordpress, the content (e.g. s and posts) disappears in Artisteer. The content has not been deleted; you can go back to the content at any time by changing the template type from Wordpress back to website or blog. Use the Export menu in Artisteer to export a template, HTML, and/or configure Export options. The export features are also available on the Quick Access Toolbar. Use the Export menu to export your template to a single file (i.e. archive file), or to a file folder. artisteer.com 13

14 14 If your project is a website or blog, you can publish and host your project on Artisteer.net, publish your s to a local file or folder, and/or copy your files to your own hosting service using Artisteer s FTP client. If you publish your website to Artisteer.net, all of your style selections and content is automatically copied to Artisteer.net. This is the only way to copy your files to Artisteer.net. If you are creating a static HTML website (not hosted on Artisteer.net), you can elect to publish your project to a file or folder and move them yourself later to your remote, or FTP your files to a remote host using Artisteer s FTP client (This option is only available for static HTML websites. You must add your FTP settings before using: File Export Export Options FTP Server. Your host provider should provide you with the information you need to configure the Artisteer FTP client). artisteer.com 14

15 15 Publish to Local or FTP Specify the type of the exported template: HTML a group of HTML s Blogger Blogger template CodeCharge Studio CCS project Template DotNetNuke DNN skin Drupal Drupal theme Joomla Joomla template ASP.NET ASP.NET project WordPress WordPress theme Export to Publish the template to a local computer, or remote hosting service. artisteer.com 15

16 16 Folder name Path Create ZIP File Include *.ARTX Project Help This name will be used as the subfolder or archive name where your template files will be saved. Specify a folder path where you want to export your template files. Select this option if you want to create a single archive file to contain your files. Select this option if you want to include your project file with your template (*.artx). This may be useful if you want to make a copy of your project file, or you want to share your project with other Artisteer users. Otherwise, this has no effect on your website or template. Note, before you elect this option you should always save your project first so your actual project file and the one in your template are the same. Get online instructions on exporting the template/project. Use the Import feature to import the design and content from another.artx project. This only applies to website or blog projects. With other types of projects, like Joomla, Wordpress, and other CMSs, you define the design, or style of your content but the content is added in the backend of the CMS. For example, you choose the font, size and color of the text in your articles, but the actual text of the article is created in the CMS. What you see in the Preview area of Artisteer is some sample text, images, tables, etc. designed to show you in general what your web s will look like with the design selections you have made in Artisteer (e.g. font selection). In a website or blog project, you create both the design and the content at the same time. The distinction can be ambiguous though. For example, use Content Text to set the font, size and color of the text in your article. Use the Preview area to enter text in your or post directly (e.g. select artisteer.com 16

17 17 the content area and enter your text). Use the Edit tab to override the default style options you selected with the Content tab. The changes you made with the Content tab are part of your design just like working with any CMS template. The changes you made with the Preview area and the Edit tab are part of your content. The Import option lets you import just design, or style settings from another project (e.g. which could include Head, Page Background, Sheet options, etc.), or content (e.g. s or posts), or both design and content. Use the Preview in Browser option to see how your website looks in different browsers. The preview (e.g. Chrome) is only available in the list of browsers if the browser is already installed on your computer. The language of the Artisteer interface may be configured in the Preferences dialog. The default language is English (US), but Artisteer supports many other languages. You can also use the Preferences dialog to: Enable or disable the start-up dialog this is the dialog you see when you start Artisteer without a project file, Enable of disable Auto-preview when you make style changes in Artisteer, such as changing colors etc., your changes will appear in the Preview area. Enable or disable Preview Highlights when you move the mouse over content (e.g. a block in the sidebar, or a post article) in the Preview area, Artisteer highlights the area with a border and special icons you can use to manipulate the area (eg. Suggest icon). This can be distracting to some users. artisteer.com 17

18 18 Preview Area Template Layout The default Artisteer template layout reflects the typical website structure, consisting of the Page Background (Background Tab in Ribbon), Header, Horizontal Menu, Sidebar (Vertical Menu, Blocks), Content (Article 1, Article 2), and Footer: artisteer.com 18

19 19 The borders of layout elements are highlighted in the Preview area in yellow when you mouse over the area. Left-clicking the mouse over one of the layout element activates the corresponding options on the Ribbon bar. Over each layout element there is a mini toolbar with available features displayed as icons, such as Suggest, Position, Delete Block, Pages, Width (Sheet only), and Hide Article artisteer.com 19

20 20 Title. Some of these features may be absent depending on the type of Artisteer project and CMS you are designing. Layout Element Header Page Background Sheet Menu Vertical Menu Block Sidebar Content Article Title Footer Mini Toolbar Features Suggest, Position Suggest Suggest, Width Suggest, Position, Pages (Website or Blog only) Suggest, Delete Block, Position, Pages (Website or Blog only) Suggest, Delete Block, Position Suggest Suggest Hide Article Title (Website or Blog only) Suggest Note, Article 1 in the picture above is an example of an Post article written for your blog as it would appear if created in a CMS like Joomla, Wordpress, etc. For example, the article has a headline, a date and time, an author reference and icon links to related content. When you are working with a CMS like Joomla, Wordpress, etc., you will not see the image and sample text as you see here since the content for your Post is written in the CMS. What you see in the Preview area is an example of your style defined in Artisteer applied to a sample image and text. What you will see on your website is your style applied to the content you create in the CMS. Similarly, Article is a sample except the Preview area shows you all of the possible style elements you can control in Artisteer. For example, you can decide how lists should appear on your s. You can define what icon to use to begin each list item (e.g. numbers or bullets), and what font each line item should have. When you create your content in the CMS (e.g. write a Post article), if you include a list, this is how the list will appear. Suggest Mode artisteer.com 20

21 21 You can also use the suggest mode to see some design ideas for a layout element. Again, when you move the cursor over various parts of the Preview area, Artisteer will highlight a layout element by adding a yellow border around the area. For example, the Header on your is a layout element, the horizontal menu is a layout element, as well as the Sheet, Blocks, etc. Select the Suggest Mode buttion in the upper right corner of the Ribbon bar, and then hover the cursor and left-click the mouse on the element you want to change in the Preview area. Click the Suggest Mode button again to change Artisteer back to regular editing. You can also cycle thru suggestions on an element by holding the Ctrl key down while moving the mouse over the Preview area. When you press the Ctrl key, the Suggest icon should appear over the element that is highlighted. When you left-click the mouse, Artisteer will suggest a design idea and change the layout. If you do not want the change, click the Undo button on the quick access toolbar. Otherwise, you can ask for another suggestion just by holding the Ctrl key down and clicking the mouse. Position In the Preview area you can manage the position of the Header, Menu, Vertical Menu and Blocks. Hover the mouse over the appropriate element and click the Position icon. Please note, that the artisteer.com 21

22 22 position of Blocks and Vertical Menu is not available for Drupal and DNN skins, as the position of these elements can only be changed within the CMS. The Website or Blog Artisteer project includes an additional Pages option, which helps to link s and the appropriate horizontal and vertical menu items. Hover the mouse over the menu, click the Pages icon and select the you want to include, or exclude from the menu. Website Map (Website or Blog Project Only) The website map is located on the left side of the preview window. The map helps you see and manage the organization of your web s. Right-click the mouse on one of the s to display the context menu and select the approriate command New Page, New Child Page, New Blog Post, Edit, Rename, Delete, Use as Blog Page, Hide Article Title, Properties. Hide the website map by clicking the icon. artisteer.com 22

23 23 Page Properties In the properties you can define attributes of your. Some of these are very important to search engine optimization (SEO). General Option Description Name URL HTML Name of the web. This is used in the URL to identify the on your website. HTML reference to your. If the browser supports it, this is the title of your as it appears in the browser s tabs, or in your favorites list if you bookmark the. Note, this is different from artisteer.com 23

24 24 the title that appears in the website map. The title in the website map is used in your horizontal and vertical menu (if you have not change the menu source). Page Tags Option Description Description Give a short description of the created. Your description becomes part of the meta tag, description, in the HTML code for this. <meta name="description" content="this is my separator " /> This is important to SEO. Keywords Your keywords become part of the meta tag, keywords, in the HTML code for this. <meta name="keywords" content="sepkeyword" /> This is important to SEO. Custom Meta Tags Use this text box to add the HTML code to define additional meta tags you want included. These are important to the search engine rankings for your. <meta name= author content= Bob Smith /> <meta name= contact content=bsmith@robertsmith.us /> Show in Menu Option Horizontal Menu Vertical Menu Description Check the box to have the displayed in the Horizontal Menu or uncheck the box to exclude it from the menu. Check the box to have the displayed in the Vertical Menu or artisteer.com 24

25 25 uncheck the box to exclude it from the menu. WYSIWYG Editing (Website or Blog Only) What You See Is What You Get (WYSIWYG) Editing is a simple and effective way to add new data to a website. Click the text area in the Preview window, delete the sample text and add/paste the new content. The website Headline, Slogan, Page Title, Articles, Block, and Footer text may be changed in Artisteer with WYSIWYG editing mode. Horizontal and Vertical Menu item names may be altered in the website map (select the and press F2 or right-click the mouse on the and select Rename) artisteer.com 25

26 26 Ribbon Bar The Ribbon bar is divided into Tabs. Each Tab contains options in a logical sequence from general ideas and options (Ideas, Colors and Fonts, Layout) to specific elements (Background, Sheet, Header, Menu, Content, Sidebar, Vertical Menu, Buttons, Footer). Moving from left to right, we begin with the overall idea and layout of the site. As we move to the right, we become more focused on specific parts of the site such as blocks and buttons. You can use the Preview area to click on the part of the template you would like to design and select the options available inside the active tab. Some extra tabs with options for adding and editing content appear on the Ribbon if you create a Website or Blog project in Artisteer (see the sections Home Tab and Edit Tab below for more details) artisteer.com 26

27 27 Quick Start Guide Downloading Artisteer You can download the Artisteer installation file from the official Artisteer Web site at or Please choose the release of Artisteer appropriate for the platform you will be using: PC or Mac. There are no functional differences between the PC and Mac releases. The software is provided with a free trial period that allows you to evaluate the product before purchasing. During this period of time, Artisteer is fully functional and has all of its features available for testing, however you will not be able to save your Artisteer project. Also, you can export templates, but all the templates and images generated with Artisteer will have watermarks on them until the product is activated. The trial period is unlimited and you can activate the software at any time you wish. Activation instructions are covered in the Activating the Software chapter below. With the trial version of Artisteer you can also try Artisteer.net with the following restrictions: Trial Version Full Version Free Disk Space 10 MB 200 MB Artisteer Image Gallery unavailble available Custom Domain unavailable available The Usage of Blog free 30 day trial* unrestricted After the 30 day trial, a notification will be sent to your , offering you to purchase Artisteer or continue using the trial version within the next fourteen days. When this period expires, you will receive another notification. artisteer.com 27

28 28 Editions of Artisteer: Home&Academic vs. Standard There is only one platform release (Mac or PC) of the Artisteer software that you install on your system, but the features available in Artisteer depend on the type of license you have purchased. If you purchased the Standard edition, all features of Artisteer are available. If you purchased the Home edition, there are certain templates you will not be able to export and you will not be able to set most of the custom options available in the Standard edition. The following chart illustrates the differences between both editions: Version Home&Academic Edition Standard Edition Free upgrades for 1 year Design Suggestions Design Features Export as XHTML+CSS Export as Wordpress Theme Export as Blogger Template Export as Joomla 1.5, 1.6, or 1.7 Template Export as Drupal 5/6/7 Theme Export as ASP.NET Application Export to CodeCharge Studio Custom Values Dialogs* Library of Textures, Glares, Partial (75%) and Gradients Number of Color and Font Schemes *Custom Values Dialogs refers to additional customization options available in the Standard edition. Normally, these appear with the icon in the bottom right corner of the command block on the Ribbon artisteer.com 28

29 29 bar. Also, many submenus in Artisteer have a More selection or a specific item selection that allows you select advanced options (e.g. Font Options, Gradient Options, etc.) System Requirements This section describes the system requirements for the Artisteer software. Windows Intel or AMD processor 1500 Mhz or faster 150 MB free disk space 1 GB of RAM Microsoft Windows XP, Windows Vista or Windows Seven Microsoft.NET Framework It can be obtained from the Microsoft website at: B386F32C0992 Mac OS (Intel) Intel Core Duo 1.33GHz 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 artisteer.com 29

30 30 Browsers supported: Internet Explorer 7+ Firefox 2+ Opera 9+ Safari 1+ Google Chrome 1+ Technologies supported: CodeCharge Studio 4 WordPress content management system Joomla (1.5, 1.6, 1.7) content management system Drupal (5.x, 6.x, 7.x) content management system Blogger DotNetNuke 4.9+ ASP.NET / Visual Studio Artisteer.net Standards supported: XHTML 1.0 Transitional CSS 2 Section 508 (partially) artisteer.com 30

31 31 PNG with transparency Installing Artisteer This chapter 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 during the installation. Click the Next button. Follow the instructions provided by the installation wizard. Carefully read the License Agreement. If you accept its terms, check "I Accept the terms of the License Agreement" option and proceed to the next step. Otherwise, quit the installation. Select the destination folder where you want to install the product. Indicate whether you want to create shortcut icons on the desktop and Quick Launch panel. Click Install button to start the installation. Click Finish button when the installation is complete. Artisteer supports silent installation. If you would like to install the software using silent installation, please use /silent key to perform silent installation of Artisteer. This will run the installation process in the background without displaying the installer dialogs, progress bars etc. Your installation query should look similar to the following: artisteer.com 31

32 32 Activating the Software After you have purchased Artisteer you will receive a License Key by to be used to activate the software. The type of license that you purchased determines the features that are available in Artisteer ( Home vs. Standard ). The activation removes the watermarks added to the generated templates in the trial version. It also automatically enables all of the features of Artisteer for the edition you have purchased ( Home vs. Standard ). Note, the license key is associated with the Artisteer release, not the target platform. For example, the license key is the same for both Mac and PC if you are installing Artisteer 3.1 even though the software package may be different. To activate the product select File Artisteer Activation and enter your license key number in the first box. If your computer is connected to the internet, check "Auto-activation through the internet" option and click the Activate button. If successful, the software will connect to the Artisteer servers on the Internet, return an activation key, and automatically enable the features of Artisteer. If you work off-line, use the following link to obtain the activation key from any other computer connected to the web: In this case, uncheck the "Auto-activation through the internet" option and enter the activation key you obtained from the other computer directly in the Activation Key box. artisteer.com 32

33 33 Creating an Artisteer Project You create an Artisteer project using either the start-up dialog (described above) when you start Artisteer, or with File New New Project. You select the type of project you want to make, create your design and content, and then save your changes with File Save, or File Save As This creates a special Artisteer project file (e.g. <your project name>.artx). Your project file is very important. If you later want to make changes to your design, you will need your project file. Artisteer only works with.artx files. You can export CMS templates from Artisteer, but you cannot import CMS templates created with other software (or even CMS templates created with Artisteer). You can only work with.artx project files, so you should save your changes when your design is finished and keep backup copies of your projects. Eventhough when you first create a project in Artisteer, you must select a specific project type corresponding to the template you want to create (e.g. Wordpress), you are not constrained to one particular theme or template. In each project file, you can create designs for several types of templates at once. Normally, you will create and work with a single design, but suppose you decide that instead of one CMS, like Joomla, you want to create a design for Wordpress. You can simply change the template type using the File menu (i.e. File Change Template). artisteer.com 33

34 34 If you have created a website or blog project, and added content to your website, you can still change the project without losing any of your content. This is because there are two parts to your project: the style and the content. The style represents those elements that describe how your website will appear. For example, the selected color of your Page Background is a style element. How you want Headings to appear in your content is another style element. When you add text, images, and other content for your s and posts, these are content elements. When you save your Artisteer project, both your style and content is saved at the same time. If you are hosting your website on Artisteer.net, you can also create content on Artisteer.net. This free hosting service is Wordpress based so adding content and managing your website is very similar to Wordpress. Every time you publish your website from the desktop to Artisteer.net, your content and style that you see on the desktop is synchronized with the content you added on Artisteer.net so you should re-publish your website often and save your project file to keep your content current. You should refer to the Artisteer.net manual for more details about how to use Artisteer.net, and how your content and style are kept in-synch. When you are working with a website or blog project you are creating both the style and the content at the same time. If you are working with Joomla, or some other CMS, you create the style but the content (i.e. text, images, etc.) is normally added in the CMS host software (the backend ). You only work with one template type at a time in Artisteer. When you change template types (File Change Template), Artisteer applies the existing style changes you made to the new template, where the old and the new templates share the same style elements. For example, if you set the Page Background to red in your Joomla template and then switch to Wordpress, your new template will also have a red background because Page Background is a common style element. If you swtich from a website or blog project to another template, like Wordpress, you will see that some of your design changes have been applied but your content (e.g. s and posts) disappears. Your work is not lost. If you switch back to a website or blog template, your content will reappear. artisteer.com 34

35 35 Using the Artisteer Samples Artisteer is installed with several professionally designed sample projects which you can use as-is, or customize as you choose. You are free to use the Artisteer samples as you wish so long as you follow the license agreement at The Artisteer built-in sample projects 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 on the program start up and then just pick the template you want to use. When your project is opened, make sure the project (template) type corresponds to the type of template you want to create (File Change Template). Besides the samples that are installed with Artisteer, there are many more free samples on Artisteer s website You can also get to this by clicking on the Online Samples icon in the Artisteer start-up dialog when you create a new project. If you open one of the built-in samples, Artisteer will open the project sample file and you can begin making changes. If you want to use one of the on-line samples, you will need to download the.artx project file and then open the project file from wherever the file was downloaded. 1. Select Online Samples Select Online Samples in the Artisteer start up artisteer.com 35

36 36 2. Find a Sample Find the sample website, which seems closest to your target website. 3. Download the Artisteer Project Download and open the.artx project. On the web, there are several template types besides the Aristeer project file that you can download and use. If you want to use the sample as the basis for your own website, or if you want to make changes to the sample to create a new website, download and use only the Artisteer project. This is the only template format that you can use within Artisteer. You cannot import other formats (e.g. Joomla) even if the template was exported from Artisteer. The other templates are only for illustration purposes only. They allow you to, for example, download a Joomla template, install it and see immediately what the template would look like in Joomla. artisteer.com 36

37 37 As mentioned above ( Creating an Artisteer Project ), you can export your project to any type of template that your particular version of Artisteer supports. Most of the samples have been created as website or blog so when you open the project you may see that several s and posts have been created already. The first thing you want to do then is check the project type and change it if you want to use a different type of template (e.g. File Change Template Joomla) for your website. If you see the content (i.e. s and posts) disappear, don t worry. You can always get these s back if you change the project type back to website or blog. 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 WYSIWYG mode, use the standard Artisteer tools to add and modify your design and publish the created website to Artisteer.net (Artisteer s free hosting service), or export it as an HTML website. You can either start from the default project, or choose one of the professionally done samples, included with Artisteer, or available on Artisteer s website. So, creating a website is now as easy as Select Project Select a Website or Blog project in the Artisteer start up dialog. artisteer.com 37

38 38 2. Edit Edit the sample content in the Preview area by clicking the content area and pasting/typing your own text. 3. Publish/Export Click Create Website to publish the website with the help of Artisteer.net - a free online hosting service and blogging service, or Export the website as HTML. Supported Content Management Themes and Web Design Templates On the Artisteer start-up dialog you can choose the type of project you would like to create. With Artisteer, you can design templates for Joomla, WordPress, Drupal, Blogger, and DotNetNuke. You can also export Artisteer generated templates as ASP.NET and/or CodeCharge Studio applications. artisteer.com 38

39 39 Artisteer generated templates of any supported Content Management System and Application may also be exported as HTML s. artisteer.com 39

40 40 Creating a basic design Creating a design with Artisteer is as easy as 1-2-3: 1. Suggest Design is a tool to find a basic theme idea by viewing different design suggestions genereated at random 2. Select Design when you find a good design idea. You may want to adjust some design elements like colors, fonts or background separately. The corresponding Suggest buttons will help you find what you want 3. Export to save the created design as a WordPress theme, HTML template or any other template format you like. In most cases, nearly everything you need to do can be started by clicking the Suggest Design button. This creates a random design that you can either work with as-is, or click again to see another design suggestion artisteer.com 40

41 41 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 options until you get exactly the appearance you want. On each tab there are several options for customizing specific elements. Note: Some options may not be available depending on the settings and layout choices you have made in other areas. Also, all of the advanced options are not available in the Home edition of Artisteer. That is not all! If you can t find the option you want in a specific list, normally there is a More selection to get full customization capabilities: Here is an example of how it looks for the Sheet tab: Even more options artisteer.com 41

42 42 The user interface for a typical dialog box includes a list of option groups located in the left pane of the dialog box. Click on the group to show its options. Most of the dialog boxes contain settings that can be changed using slider bars. Position the pointer over the slider and drag it to the right or left to increase or decrease a specific option s value. The selected value will be displayed in the box next to the slider bar. You can also enter the desired value directly in the textbox. Supported Color Models and Properties The colors on computer monitors are made up of varying amounts of red, green and blue base colors. Depending on how much you take from each base color, you can create any of the colors which a monitor can display. For example, a mix of red and green produces the yellow color, a mix of red and blue magenta and so forth. Mixing all three base colors with full intensity produces the white color while the absence of all the color components returns black. The values for red, green, and blue base colors are usually specified using a scale from (decimal), where 255 represents 100% intensity of the color. RGB is a convenient color model for computer graphics because the human visual system works in a similar way. However human perception does not see colors as triplets of numbers: red, green and blue. Instead it is more convenient to describe colors as made up of hue, saturation and lightness (or luminosity). This HSL scheme defines colors more naturally and can be visualized as a cylinder whose central axis ranges from black at the bottom to white at the top with neutral colors between them. The artisteer.com 42

43 43 angle around the axis corresponds to hue. The distance from the axis corresponds to saturation, and the distance along the axis corresponds to lightness, or luminosity. Hue specifies a pure, spectral color. It is measured as a location on the color wheel, expressed as a degree between 0 and 360. In common use, hue is identified by the name of the color such as red, orange, or green. Hue Color 0 red 1 yellow 2 green 3 cyan 4 blue 5 magenta 6 red Saturation is the purity of the color. It represents the amount of grey in proportion to the hue, measured as a percentage from 0% (grey with no hue at all) to 100% (fully saturated color). On the standard color wheel, saturation increases from the center to the edge. Luminosity (Lightness): is the relative lightness or darkness of the color, usually measured as a percentage from 0% (black) to 100% (white). Artisteer allows you to work with both HSL and RGB color schemes. The desired color can be specified in the Color Selector dialog. artisteer.com 43

44 44 Exporting and Publishing Templates, Projects, Websites or Blogs Once you have settled on the basic look of your site, you can export it as a template compatible with the type of blog, CMS, or application that you want to use. Blogger users may publish templates directly to Blogger. If you have created a Website or Blog project you can publish your website as HTML s to a local folder on your computer or move it to a hosting server via Artisteer s FTP client. If you choose, you can also publish your website to Artisteer.net. To export the template/html/application, 1) Press Ctrl+E. An export button is also located on the Quick Access Toolbar. Click WordPress Theme, Joomla Template etc. (this depends on your project type). You can also export your template using the File menu. artisteer.com 44

45 45 2) In the Export dialog indicate the template type (HTML, WordPress, Blogger, Joomla, Drupal, DotNetNuke, ASP.NET Application, CodeCharge Studio), and version of your CMS (for Joomla DotNetNuke, and Drupal templates). Note, the template type depends on the type of your project. If you want to export a different type of template select File Change Template. Specify the desired template name and the folder where you want to export your template files. If necessary, compress the template folder by using "Export as a ZIP archive" option. You can also save your.artx project file with your template. This has no affect on installing or using your template. This option is useful though if you want to create a backup copy of your project file, or you want to transfer your template to another Artisteer user. 3) Click Export to finish the process or select Options to adjust some specific export options: artisteer.com 45

46 46 The Export Options Dialog Apart from the Export dialog, the advanced export options are located in the File Menu and on the Ideas tab (Export group). You can use this dialog to set specific options for exporting templates from Artisteer. The available options are described below. Most of them are optional; no value is assigned when a field is left empty. Note: some extra group tabs may appear depending on the template type. General Tab The general options help to adjust the text/writing direction and Site Icon (Favicon) Option Text Direction Site Icon Description Specify the text/writing direction. Artisteer supports both Left to Right and Right to Left directions. This is not only how the text will appear on your s, but also how text is inserted in Artisteer. Choose a site icon from the gallery or insert a custom icon from a file. Browsers that support favicons, will display this next to the web address for your site in the address bar and/or the browser s artisteer.com 46

47 47 bookmarks. CSS Options Tab Option Description CSS prefix Additional CSS styles The CSS prefix exists to avoid conflicts with CSS classes of 3rdparty modules. The art- value is a default CSS prefix in Artisteer, which may be modified. It may contain only alphanumeric symbols and dashes (A-z, 0-9, -, _ ) and should start with an A-z letter. You can enter custom CSS styles here. They will be embedded in the CSS file generated by Artisteer. Description Tab The Description tab describes the information to be used by Artisteer to generate the stylesheet header and the metadata information for the theme. This information is used by the CMS, if your CMS supports such functionality. Option Description Author Name Author URL Template Version Template URL Tags Description Identifies the name of a person or organization creating the design. Provides a reference to the Author's website. Identifies the Version Number of the template. Specifies the location of the template on the web. Specifies the keywords associated with the theme. Provides additional information about the theme. Watermark Tab Option Show Watermark Description If checked, the Watermark Text will be repeated throughout the artisteer.com 47

48 48. Watermark Text The text to be displayed across the when the "Show Watermark" option is enabled. Footnote Tab Option Include a backward link to the author Include a backward link to the CMS and the Artisteer Description When checked, the above-defined author name will be displayed at the bottom of the with a link using the name of the Author and the Author s URL address as defined above. When checked, the CMS name and Artisteer will appear at the bottom of the. Uncheck this box if you do not want this to appear. WordPress Export Options The WordPress tab contains home Menu Item settings, which specify whether Artisteer should create a special menu item pointing to the home (front ) of the website. Menu Source settings define the source of the menu items: categories or s. Pages means the static s on your website. Categories means the categories you create in Wordpress. Categories are arbitrary artisteer.com 48

49 49 names you use to organize your posts and s; these names can be arranged in a hierarchical order. Option Show Home Item Description Normally, when viewers visit your site, the URL they use does not reference a specific. E.g. The default, or front for a Wordpress site is normally a list of your Post articles. If you select this option, a menu item is added to your horizontal menu bar so your viewers can always go back to this. If you unselect this option, the Home item does not appear so while viewers are on your site, they cannot select a choice on the menu bar to navigate back to this. The horizontal menu bar normally consists of items that are links to the s of your site. The Home option only applies to the default front, which is a list of your Posts. In the Reading settings in Wordpress, you can change the front to either a static, or a specific Post. However, if you change the front from the default, the Home option no longer applies (i.e. you will not see your Home option in the menu bar). This option also appears in your Theme options in Wordpress. See Theme options for Wordpress section below. Any settings in your Theme options override the same settings in your theme generated from Artisteer. Also, your Theme options are shared for all of the Artisteer themes you have installed. For example, if I unselect Show Home Item in my Theme options, then it overrides this setting in my exported theme, even if I uninstall, delete and reinstall the theme. Home Item Caption Menu Source Specifies the caption of the menu item pointing to the home if you have select Show Home Item above. Defines whether categories or s, are used as the source for artisteer.com 49

50 50 the horizontal and/or vertical menu. Blogger Export Options Option Show Blogger Navbar Description Use this option to hide or show the blogger Navbar. Menu Source Home menu item Define if categories, s, or archive should be used as the source for the horizontal and/or vertical menu. Pages are the static s on your website. Categories are arbitrary names you create and use to organize your posts. Archive refers to the dated post archives. Specifies the caption of the menu item pointing to the home. artisteer.com 50

51 51 Option Hosting Provider Description You can choose a hosting provider for images: Picasa Web Albums, ImageShack Image Hosting, or FTP server if you use another image hosting service. DotNetNuke Export Options Option Description DNN Version Menu Options Specify the DNN version you are using. Artisteer 3.1 version supports DNN 4.9 and DNN 5. DNN 6 will be supported with the next Artisteer update. Using DNN 4.9 skins, the Login tab and User tab are automatically added to the menu. Using DNN 5 skins, the Login tab and User tab may be removed from the menu with the help of the Menu Options. Along with the custom Artmenu object, Artisteer 3.1 now supports artisteer.com 51

52 52 the standard DNN Menu, which can be enabled by selecting the Use DNN Menu option. The Show Login Tab in Menu and Show User Tab in Menu options is available for DNN 5 skins. The options allow removing the Login Tab and User Tab from the DNN Menu. To remove the Login Tab and/or the User Tab, tick the Use DNN Menu box and deselect the appropriate tab. Website or Blog Export Options Option Default Page Tags Description Description You can add a site description, keywords and custom meta tags for more effective SEO. The information will be stored in the appropriate meta tags inside the <head> tag. Give a short description of the created. Your description becomes part of the meta tag, description, in the HTML code for this. artisteer.com 52