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)
11
page
artisteer.com | page 11

Please note
If you would like to switch your template to a different application or Content Management System,
open
that the Save/Save As option is disabled in the trial mode.
Change Template and select the necessary type of template. Artisteer will automatically adjust
the created design.
12
page
artisteer.com | page 12

The Export menu in Artisteer allows exporting a template as a Content Management theme and/or as
an HTML page, configuring Export options and adding a Site Icon (choose from the gallery or insert
from file). The export features are also available at the Quick Access Toolbar.

The Import feature (Website or Blog only) allows importing design and content from an .artx project.

13
page
artisteer.com | page 13
The Preview in Browser
The language of the interface may be configured in Artisteer
option may help see how your website looks in different browsers. Artisteer
suggests preview in Internet Explorer, Firefox, Chrome, opera and Safari. The preview in Artisteer is
active only for the browsers installed on your computer.
Options
You can also enable or disable start up dialog, auto-preview and preview highlights.
dialog. Artisteer currently
supports Arabic, Chinese, Czech, Danish, Dutch, English, French, German, Hungarian and Italian
languages. The default language is English (US).

The Preview highlights feature is designed set off the items of template layout, such as Header,
Menu, Article, Block and Footer. When enabled the feature highlights the borders of a layout item in
yellow.

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

The borders of layout elements are highlighted in the Preview area in yellow on mouse hover.
Leftclicking the layout element activates the corresponding options on the Ribbon.
15

page
artisteer.com | page 15

Over each layout element there is a mini toolbar with available features, such as Suggest , Position
, Delete Block , Pages , Width (Sheet only) , and Hide Article Title . Some of features
may be absent depending on the type of Artisteer project and CMS.
Layout Element
Mini Toolbar Features
Header
Suggest, Position
Page Background
Suggest
Sheet
Suggest, Width
Menu
Suggest, Position, Pages (Website or Blog only)
Vertical Menu
Suggest, Delete Block, Position, Pages (Website or
Blog only)
Block
Suggest, Delete Block, Position
Sidebar
Suggest
Content
Suggest
Article Title
Hide Article Title (Website or Blog only)
Footer
Suggest
Suggest Mode

You can also use the suggest mode to see some design ideas for a layout element. Select Suggest
Mode from the upper right corner of the Ribbon, hover and leftclick the element. Click the Suggest
Mode again to quit the feature.
16
page
artisteer.com | page 16

Position
In the Preview area you can manage the position of Header, Menu, Vertical Menu and Blocks. Hover
the appropriate element and click the Position icon . Please note, that the position of Blocks and
Vertical Menu is not available for Drupal and DNN skins, as the position of these elements can be
changed only within the CMSs.

The Website or Blog Artisteer projects include additional Pages option, which helps to link pages and
the appropriate horizontal and vertical menu items. Hover the menu item, click the Pages icon and
select the page.
17
page
artisteer.com | page 17

Website Map (Website or Blog Only)
The website map is located at the left side of the preview window. It helps to arrange and move
through web pages. Right click the website map area to evoke the 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.

Page Properties

18

page
artisteer.com | page 18
In the page properties you can add some SEO-valuable meta data for the created pages.
General
Option
Description
Name URL
Here you can type the valid URL name of the web page
HTML
Here you can type the page title, which will be displayed in the
content area of your website and in the browser tabs.
Page Tags
Option
Description
Description
Give a short description of the created page. The description should
accurately describe the contents of the page.
Keywords
Specify the keywords for the created web page
Custom Meta Tags
Type your own meta tags following in the following format: <meta
name = “author” content = “Artisteer” />
Show in Menu
Option
Description
Horizontal Menu
Check the box to have a page displayed in the Horizontal Menu or
uncheck the box to exclude it from the menu.
Vertical Menu
Check the box to have a page displayed in the Vertical Menu or

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 dummy text and add/paste the new
data. Website Headline and Slogan, Page Title, Articles, Block text, and Footer text may be changed
in Artisteer with the WYSIWYG mode. Horizontal and Vertical Menu item names may be altered in the
website map (press F2 or right click and select Rename)
19
page
artisteer.com | page 19

Ribbon
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 the part
of 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 appeare on the Ribbon if you create a
Website or Blog in Artisteer (see the chapters Home Tab and Edit Tab)


20
page
artisteer.com | page 20
Quick Start Guide
Downloading Artisteer
You can download the Artisteer installation file from the official Artisteer Web site at
. 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 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 so you can activate the software at
any time you wish and the activation instructions are provided in the Activating the Software
Editions of Artisteer: Home&Academic vs. Standard
chapter.
There is only one platform version (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
 
21
page
artisteer.com | page 21
Export as Blogger Template

 
Export as Joomla 1.5 or 1.6
Template
 
Export as Drupal 5/6/7 Theme
 
Export as ASP.NET Application
 
Export to CodeCharge Studio
 
Custom Values Dialogs*
 
Library of Textures, Glares,
and Gradients
Partial (75%)

Number of Color and Font
Schemes
50+ 70+
*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
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®

22
page
artisteer.com | page 22
Microsoft .NET Framework 2.0+. 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
Browsers supported:
Internet Explorer 7+
Firefox 2+
Opera 9+
Safari 1+
Google Chrome 1+
Technologies supported:
CodeCharge Studio 4
WordPress 2.7-3.1 content management system
Joomla (1.5, 1.6, 1.7) content management system
23
page
artisteer.com | page 23
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)
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
Log into Windows as a Power User, or assume the Primary Administrator role.
chapter.
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.
24
page
artisteer.com | page 24
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.
Activating the software
After you have purchased Artisteer you will receive a License Key to be used to activate the software.
The type of license that you purchase determines the features that are available in Artisteer (‘Home’
vs. ‘Standard’). The activation removes the watermarks added to the generated templates by the trial
version. It also automatically enables all of the features of Artisteer for the edition you have purchased
(‘Home’ vs. ‘Standard’).

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 obtained activation
key directly in the Activation Key box.

25
page
artisteer.com | page 25

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 to a free hosting Artisteer.net or export it as an HTML project. Besides,
you can choose 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)
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.