Home

Artisteer 2.0 User Manual

1. Clicking on the Font Options button will open the Article Content Text options dialog box where you can adjust such font settings like e Font Family e Font Style e Font Size in pixels e Effects e Character Spacing Blocks Text x Font Style Font Size px Arial sete a pe Syel cS Arial Italic Arial Black Bold Comic Sans MS Bold Italic Courier New Georgia Effects A E Underline Aa E Small Caps A E Overline AA E All Caps A E Strikeout Character Spacing Font Preview AaBbYyGaLlJj You can also alter the following paragraph settings e Alignment artisteer com page 84 85 page Artisteer Web Design Revolution e Indentation e Spacing Just click on the More options button in the appropriate text formatting list Blocks Text x Font Paragraph eee Alignment Default x Indentation Left Side E Default px Indent First Line Right Side Defaut px Default px Spacing Ic cl Before Default z P Line Spacing After i Defaut pe t Preview Parazraph Paragraph Paragraph Paragraph Parazraph Paragraph Paragraph Peregreph Paragraph Paragraph You can also modify link parameters or visited and hovered link font settings just by clicking on the Font options button in the appropriate Link list amp 3 Visited Link cl Hovered Link p To complement your
2. E Ideas Colors amp Fonts Layout Background Sheet Header Menu Articles Blacks Bur Q aa Suggest Colors m Suggest Background Suggest Header Suggest Blocks Ge A Suggest Fonts Suggest Sheet suggest Menu Bk Suggest Buttons I xu ir Suggest Layout Suggest Artide Design suggest Footer bis m ca Ideas Element Ideas Export Ta _K _ 1 1 Creating Your Design Let Artisteer create your design for you The Suggest design feature is best used at the beginning It allows you to see the various designs available and helps you determine which styles and themes you like e y suggest Design Ideas 1 2 Making Adjustments You are able to make adjustments to many individual components when brainstorming ideas for your web design artisteer com page 23 24 Artisteer Web Design Revolution page Sometimes the font doesn t match the layout of the site or the buttons don t match the navigation By making these adjustments you can get closer to the look that you want to achieve Export Design Once you have settled on the basic look of your site you can export it as a design or template that is compatible with the type of blog CMS or application that you want to use De OR X Template Export Export E There are three steps that need to be followed to export the design 1 First select a template which will be applied and used when viewing the page in Artisteer
3. Sheet parameters include the width of the sheet and its borders the padding and the radius values You can also set custom transparency values for the sheet background Shadow parameters control the size angle and opacity of the shadow as well as its distance from the sheet borders Enter the values or drag the sliders to the right to increase option values or to the left to decrease them Sheet Options x Shadow I Size P ps e Opacity IA Ed Ck Distance IA p 5 Angle A a 45 Properties Sheet lm Sets the sheet width in pixels Supported values 500 px the minimum width to 1500 px the maximum sheet width Width a Sets the top offset for the sheet in pixels Supported values 0 px to 200 px where 0 px means no top offset This option is reset to O if Without Offset option is Top offset selected in the Top Offset list B Padding Radius Sets the padding for the sheet content in pixels Supported values O px to 50 px where 0 px means no padding This option is disabled when No Padding is selected in the Padding list Sets the corner radius of the sheet in pixels Supported values 0 px to 200 px where 0 px is equivalent to No Radius selected in the Radius list Sets border width for the sheet in pixels Supported values are O px to 20 px where 0 px is equivalent to No Border in the Border list Border Width Sets the sheet transparency Supported values are 0 to
4. m 3t Z Blend mode 5 aftlight gt Properties Header Specifies the width of the block header border Supported values 0 to 10 O pixels Border width To enable select any with header style from the Block Styles list Specifies the contrast between the starting and ending colors in the gradient nl Supported values 100 solid color to 100 the most contrast gradient Gradient contrast To enable select any gradient from Blocks gt Block Styles gt Header gt artisteer com page 80 Artisteer Web Design Revolution Texture E Transparency 5 Blend mode 9 1 3 Content 91 page Gradient list Specifies the settings of the block header texture To enable select any texture from Blocks gt Block Styles gt Header gt Texture list Specifies the transparency of the block header texture Supported values O fully opaque to 100 fully transparent Specifies how the texture blends with the underlying layer of the block Supported values Normal No effect on the underlying layers Soft Light Lightens or darkens the image depending on the color of the texture image Overlay Blends the layers together by changing the opacity darkness and lightness of the texture image You can adjust the color and style of the block content as well as control the borders text colors and hyperlinks that appear in the blocks Content 18 Text Padding Shape 3 Fil Bo
5. Qui CE ig undo C Redo Lg Export F ol il e Ideas Colors amp Fonts Layout Background Sheet Header Menu Artides Blocks Buttons Footer EO H Headings Bullets gt Date 2 Category T Hyperlink ES Picture amp Author c Tags Suggest Header Footer Article Design de CC Quote EH Table gt LC Edit Comments gt Ideas Shape W Text Formatting Other Elements Header Footer In this section you can choose the article content shape blockless or in block and use the styling button to change the following style options e Content o Margin o Text Padding e Shape o Fill o Border o Radius e Effects o Shadow 8 1 1 Shape If the default settings do not meet your requirements you can use the Articles Options dialog box to customize the settings To get to the required section of the article options click on the More button for example More Padding below any list artisteer com page 68 69 Artisteer Web Design Revolution page Properties Es opecifies the margin of the article content in pixels Supported values Margin are 0 to 50 pixels 15 Specifies the padding of the article text in pixels Supported values 0 Padding to 50 pixels Specifies the corner radius of the in block content in pixels Supported Radius values 0 to 40 pixels O Specifies the border width of the in block conte
6. 36 Artisteer Web Design Revolution page Tips and tricks Installing Drupal Themes 1 Access your Web server using an FTP client or Web server administration tools Create a folder for your specific theme under YourSiteFolder themes folder within Drupal installation For example YourSiteFolder themes MyNew Theme Copy or upload theme files exported from Artisteer into the newly created MyNew Theme folder Login to your Drupal Administer Go to Drupal Administer gt Site Building gt Themes www YourSite com q admin build themes 6 Select your newly uploaded theme from the list of available themes for your site 7 Click the Save configuration button to save your changes Oe po For more information please visit http drupal org node 456 Naming standards Use only letters preferable lowercase numbers and underscores in the theme name No special characters spaces or hyphens are allowed If you work with Drupal version 5 be sure not to rename your template folder after the export Otherwise some functions will be undeclared and the design will look corrupted Drupal Localization The localization feature is described in the Drupal documentation here htip drupal org node 1 33977 Utilizing Menus Please use the following steps to utilize menu style designed with Artisteer Go to Drupal Administer gt Site Building gt Menus www YourSite com q admin build menu Edit an existing m
7. Content gt Gradient list Texture Specifies the settings of the block header texture To enable select any texture from Blocks gt Block Styles gt Content gt Texture list F Specifies the transparency of the content block texture Supported values 0 Transparency fully opaque to 100 fully transparent Specifies how the texture blends with the underlying layer of the block Supported values ES Normal No effect on the underlying layers artisteer com page 82 83 Artisteer Web Design Revolution page Blend mode Soft Light Lightens or darkens the image depending on the color of the texture image Overlay Blends the layers together by changing the opacity darkness and lightness of the texture image Bullets Specifies the Bullet Properties Specifies the indent between the bullet and the list text Supported values 0 to Offset 20 pixels a Specifies whether the bullets should be re colored Recoloring 9 2 Block Content This section allows you to change the settings like E ze dj TM m a A Se a F mmm a Block Content e Margin Left e Margin Right e Line Height e Character Spaying e Font Options e Link Options e Bullets You can also modify the font settings of the block content according to your needs artisteer com page 83 84 Artisteer Web Design Revolution page
8. Icon Option Description Content Management System Theme WordPress The WordPress template option is provided for those who create designs for WordPress websites After selecting this template from the Template list you have options to export the design as an HTML template or a WordPress theme Joomla The Joomla template option is provided for those who create Joomla website designs Selecting this option provides the possibility of exporting your design as an HTML or Joomla template Drupal The Drupal template option is provided for those who work with Drupal CMS Selecting this option allows you to export your design as an HTML template or Drupal theme HTML Template Md Company Homepage This template can be selected if you don t use any particular CMS content management system but want to create a professional CSS design for your website artisteer com page 27 28 Artisteer Web Design Revolution page Web Developer Template ASP NET Application The ASP NET Application option is provided for NET developers creating websites in MS Visual Studio The design can be exported as an HTML template or as a Visual Studio C project CodeCharge Studio The CodeCharge Studio template option is provided for ug developers and designers who use the CodeCharge Studio NI development tool for creating web applications After selecting this template from the Template list you have options to
9. This occurs when the posts page is set to a static page different from the homepage Solution You can either upgrade your PHP version or use the following workaround Open the query php and replace this code line this gt queried_object amp get_page get_option page_for_posts With these two lines tmpPageVariable get option page for posts this 2queried object amp get page tmpPageVariable artisteer com page 92 93 Artisteer Web Design Revolution page Glossary CMS A Content Management System CMS is a software application designed to create edit publish and manage website content using a simple browser based interface The content may include text photos electronic documents music video and other type of computer files These systems usually provide a number of ready made solutions and standard templates for most common applications The main advantage of a CMS is that it requires almost no technical skills or knowledge to create the website and manage its content Blog A blog short for Web log is a special type of web site with a series of entries usually posted to a single page in reverse chronological order Blogs are often maintained by an individual and represent the personality of the author provide diary type commentary links to articles on other Web sites descriptions of different events and social issues or include other material such as graphics or video WordPress
10. you can change the background color and border of the blocks as well as apply different effects to your blocks Ej dl 1 l le je a4 o o o ririer L an ae co a En Padding Shape 3 Fill No Padding Border Effects 1 pixels Gradient h wn Ed Texture JB im Shadow e Clicking on the More buttons will open a Block options dialog box Block Options x Layout Background as adi 18 Padding 7 px e Header O Border width s 1 j pr laa Content m inl Gradient contrast ES Texture F Transparency 50 Z 3 end made Properties Background 15 Specifies the space between the outer borders of the block and the content Padding area within the block Supported values 0 to 50 pixels To enable select any artisteer com page 77 Artisteer Border width Gradient contrast Texture E Transparency Al Blend mode Web Design Revolution 78 page blocked style from the Block Styles list Specifies the block border width Supported values 0 to 10 pixels To enable select any blocked style from the Block Styles list Specifies the luminance difference between the starting and ending colors of the gradient Supported values 100 solid color to 100 the most contrast gradi
11. Block you can change the bullets parameters artisteer com page 85 86 Artisteer Web Design Revolution page Bullets Picture Font A Color tp Font Family At Size l J Style 10 Buttons The Buttons tab is used to choose the shape and style of the buttons Untitled Artisteer 2 Standard E Ideas Colors amp Fonts Layout Background Sheet Header Menu Artides Blocks Buttons E c rv La Fil Color L Border Color she Do A Text Button Button Styles You can select from a wide variety of button styles You can choose buttons with more rounded corners something in between or completely rectangular shape Button Button m Button Format You can make finishing touches to the button as well artisteer com page 86 87 Artisteer Web Design Revolution page c5 m Gradient 7 3 Fill Color Jg Border EA Border Color Sha a T 8 Shadow A Text gt The button section allows you to change the following options e Shape e Gradient e Border e Shadow e Fill Color e Border Color e Text Artisteer provides a variety of button shape templates Clicking on the Shape Option button in the shape list you can adjust the shape settings You can also adjust some effects like gradient contrast Button Options x Button Bj Shadow C Horizontal padding e 15 zl px IO Vertical pad
12. Currently the following templates are available website design WordPress Joomla Drupal Visual Studio and CodeCharge Studio 2 Next tell Artisteer what export option you want to use when generating the selected template Choose the desired Export Design option to export and save your design as individual style files 3 In the Export Dialog specify the desired template name and the folder to export your template files to If necessary compress the template folder by using Export as a ZIP archive option M Export WordPress Theme Mame Path e Inetpubsuwwwroatwordpressz Pwp cantentthemes gt Export as a folder Export as a IP archive OF Cancel artisteer com page 24 Artisteer Web Design Revolution Option Name Path Export as a folder Export as a ZIP archive Export Options Dialog 25 page Description Identifies the name of your theme It is recommended that the name should conform to the naming conventions of the CMS or other location you are exporting to Indicates the path to the folder where the exported files should be placed When the template is exported a folder with the specified name containing all the theme files is created in the specified location When the template is exported a zip archive containing all the theme files is created in the specified location The Export Options dialog box appears when you select Export gt Export Options from the Main Me
13. Family e Font Style e Font Size in pixels e Effects e Character Spacing Article Content Text x Font Paragraph Font Family Font Style Font Size px Default Font Arial ae Arial Arial Black Comic Sans M5 Courier Mew Effects A E Underline Aa E Small Caps A E Overine AA m All Caps A m Strikeout Character 5pacing Fant Preview AaBb YyGaLlJj X Preview You can also modify the paragraph setting including e Alignment e Indentation e Spacing Just click on the More options button in the appropriate text formatting list artisteer com page 71 72 Artisteer Web Design Revolution page Article Content Text x Fon Paegaph eee Alignment Indentation Left Side E Default px Fearne eel Right Side je pr Default Spacing ail Default P Line Spacing Before i After Default Px t Default gt Y Ward V Default ps Preview Para gra pl Para gra pl Para graph Para gra plo Para gra pl Para graph Para gra phPara gra pl Para gra ph Para gra pd Para paph Paza gia ph Pars pra pl Pars paph Pars paph Para papi Para pra ph Pars paph Pars paph Pars paph Pars paph Para gra ph Para gra ph Para paph Para gra plo 15 pra pl Para graph Par paph Para papi Para paph Para paph Par gra pl Pars graph 8 3 Other elements This section provides the ability to control the look of the following article elements e Hea
14. MINE eee TOO ee ee ere er ee ere 75 o o EE E EEEE E E EE E 83 10 DUON A o A 86 iE uo MAO e ne Po o ES EE REE PEO e e PA Po 89 A o m oo Eee 89 io A A 92 OSS PS e A 93 artisteer com page 3 Artisteer Web Design Revolution page What is Artisteer Artisteer is the first and only Web design automation product that instantly creates fantastic looking website and Blog templates It is a powerful software suite that makes YOU a professional designer of websites WordPress themes and 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 and without Photoshop Dreamweaver or 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 table free 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 page 4 Artisteer Web Design Revolution page What s new in Artisteer 2 Artisteer 2 has a number of exciting new features The main highlights of this versio
15. Overline AA E All Caps A E Strikeout Character Spacing Font Preview AaBbYyGaLlJj For the footer text blocks text article headline text and article header text you can also modify paragraph settings such as e Alignment e Indentation e Spacing Article Content Text Alignment Indentation Lett Side Indent First Line EE S Dean Em Spacing Before Line Spacing Me E tE be Word Preview Para gra pl Para gra pl Para gra pd Para gra plo Para pra pl Para graph Para gra phPara gra ph Para gra ph Para gra d Para gra pl Para ga ph Pars pa pl Pars paph nb HEP EIE EE EE cop pa Par paph Pars paph Pars pra ph Pars paph Pars pra pl Par gra pl Para paph artisteer com page 45 46 Artisteer Web Design Revolution page Font Scale option allows you to change the overall font scale You can set custom the font scale Just click on the Options button to get started Properties At Sets the font scale for all text The supported values are from 50 to 200 Font Scale Where 200 means the biggest font scale 3 Layout The layout tab is where you can quickly change the overall positioning of elements on the page artisteer com page 46 47 Artisteer Web Design Revolution page 3 1 Page Column Layout You can quickly change the positioning of the header and navigator bars Artisteer allows you to place the
16. Position gt Text Block ar m From File x um From File Size Suggest Header y dy vete FPES Slogan Slogan text Ar E g Ideas Layout E Background E Foreground Photo r4 J Title Title Style 6 1 Header Layout You can make changes to the header layout such as e Header Size e Text Block Here you can choose a Text block position and width artisteer com page 53 54 Artisteer Web Design Revolution page Both layout options can be configured in the General tab of the Header Options dialog box Header Options x MM Tar a General En Background B L Height p Foreground Photo E Text black g Properties This section defines the basic properties of the header Note the Header Options have no effect on layouts without the header selected in Layout gt Page Layout list General Tl Sets the height of the header in pixels The value can range from 50 to Height 500 px aj Sets the width of the text block as a percentage of the header width The range spans from 096 no text block to 10096 text block covers the Text Block entire header 6 2 Background 6 2 1 Background image You can choose from a wide variety of professional background images to be used in the header of your site e Abstract e City e Landscape e Nature e Clouds artisteer com page 54 55 Artisteer Web Design Revolution page You can also
17. Preview option is unchecked press the Preview button to see the changes on screen The use of the Preview feature will help you easily achieve the desired look of your page Finally click the OK or Cancel buttons to commit to or discard your changes artisteer com page 16 17 Artisteer Web Design Revolution page Color Selector Dialog The Color Selector dialog box is displayed when you select the More Colors button in one of the color option dialog boxes Color Selector x Color Selector Luminosity Hue Luminosity Hue Hue Sat Lum Red Red Green Green Blue Hex Y Preview oK Camel Y Preview ok Cancel The Color Selector dialog box lets you select the desired color and adjust the hue saturation and brightness of the color There are Luminosity and Hue tabs available in the dialog box Both tabs have a color selection area color palette where you can move a slider until you achieve the perfect color On the Luminosity tab there is a special luminosity slider This slider lets you increase or decrease the brightness of the color from zero at the bottom to 100 at the top With the luminosity selected you can go to the color palette and drag a small circle picker horizontally and vertically to change the hue and saturation of the color respectively The Hue tab contains a separate Hue adjustment slider Moving it all the way from red at the
18. Sets Typography Font Scale Fonts EE The fonts section includes the following functions e Font Sets e Typography e Font Scale artisteer com page 43 44 page Artisteer Web Design Revolution Font Sets allows you to change the text and heading fonts You can choose one of our standard font sets or create your own font scheme Just click on the Edit Font Set button in the Font Sets list Typography allows you to select one of our typography styles or create your own style design Just click on the Edit Typography button in the typography list Typography Select a style to edit Site Default A Text Article Content A Text Link 72 Visited Link 34 Hovered Link H 1 Heading 1 H2 Heading 2 H3 Heading 3 H4 Headina 4 Preview AaBbYyGgLlJj E55 font Family Content font size 12px font style normal font weight normal In the opened Typography dialog box you can change any text object by selecting the object and clicking the Modify button The Modify dialog allows adjusting to the following font settings e Font Family e Font Style e Font Size in pixels e Add or remove Effects e Adjust Character Spacing artisteer com page 44 45 Artisteer Web Design Revolution page Site Default Text Font Style Font Size px Default Font Default Style Arial Ee ee Italic Bold Bold Italic Courier New Effects A E Underline Aa E Small Caps A E
19. WordPress is an open source blog publishing application It is an advanced blogging tool with a focus on aesthetics web standards and usability The official WordPress website is htip wordpress org Joomla Joomla is a free open source content management system written in PHP It is used for publishing and managing content on the web and intranets and allows you to build powerful online applications The official Joomla website is htto www joomia org Drupal Drupal is a free software package that allows an individual or a community of users to easily publish manage and organize a wide variety of content on a website It is an open source project written in PHP and distributed under the GPL The official Drupal website is http drupal org artisteer com page 93 94 Artisteer Web Design Revolution page Visual Studio Visual Studio is an integrated development environment IDE from Microsoft The official website is http www microsoft com visualstudio en us default mspx CodeCharge Studio CodeCharge Studio CCS is a Rapid Web Application Development Tool from YesSoftware Company It is a software suite designed for visually creating dynamic database driven Web applications The official company website is hito www yessoftware com HTML HyperText Markup Language HTML is the predominant markup language for web pages which provides a set of markup symbols or codes to specify the structure of documents
20. a suffix of your choice in the Module Class Suffix parameter box You can use one of the available suffixes art article art block or art nostyle Footer Text Module Class Suffix am block A b Advanced Parameters If you specify another suffix not available in the template the Default Position Style will be applied to your module 4 Save the module settings Exporting a design as a Drupal theme To export a design as a Drupal theme follow these steps 1 Select Template Drupal Use Export Drupal Theme option Specify the template name and select the folder you want to export the template files to If necessary apply zip compression using Export as a ZIP archive option After the export you will obtain a set of Drupal specific theme files that can be located in the theme folder on the server and can easily be applied to the Drupal websites The path to the theme folder in the Drupal system usually looks like DrupalFolder themes ThemeName You will need to upload the exported theme files to that folder If your theme is exported as a ZIP archive extract the archive into the themes folder on server After that you can activate your theme in the Drupal Administration For this log into the administration area navigate to Administer Site Building Themes check the Enabled box as well as the Default radio button next to your template and click the Save configuration button artisteer com page 35
21. action Action name HTMLFormName gt div class Block gt lt div class Block body gt div class BlockHeader gt lt h2 gt Search Countries hz lt div classz l lt div gt lt div classz r div div lt div gt lt div gt div class BlockContent gt lt div class BlockContent body gt lt table class Record table cellspacing 0 cellpadding 0 gt lt BEGIN Error gt tr class Error gt lt td colspan 2 gt Error lt td gt lt tr gt lt END Error gt en lt tr class Controls gt lt td gt lt label for countriesSearchs_country_name gt Country Name lt jlabel gt lt td gt e 41 lt td gt lt input type text name s country name Name value s country name maxlength 40 size 40 id2 countriesSearchs country name gt lt td gt etr lt tr class Bottom gt lt td colspan 2 align right gt 42 page Artisteer Web Design Revolution 2 Colors amp Fonts The Color amp Fonts tab provides the ability to change the colors and fonts of the template ES led O Undo CxRedo g Export Untitled Artisteer Ce Ideas Colors amp Fonts Layout Background Sheet Header Menu Articles Bloc 2t Save Theme A NT Al A Delete Theme Suggest Fonts Font Sets Typography Font Scale Suggest Colors Color Themes Ideas Fonts EE 2 1 Colors To change the site theme select a theme
22. between 0 and 360 In common use hue is identified by the name of the color such as red orange or green LIA o fred green 2 cyan red Saturation is the purity of the color It represents the amount of grey in proportion to the hue This is 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 box Block Structure Blocks are an important part of Artisteer s web designs that are compatible with all modern web browsers including Microsoft Internet Explorer 6 All of Artisteer s layout elements use blocks to create an optimal layout structure In Artisteer the block is used as a universal content container that is easily resized properly in any direction artisteer com page 19 20 Artisteer Web Design Revolution page The application of blocks in Artisteer not only solves this complicated task but also creates an optimal structure Here is an example of Artisteer s use of blocks 8 Headline Slogan text gt My first blog gt Who will prevail Stav positive Oil still going up Obam
23. contact us if there are any problems or concerns with the agreement so that we may correct any problems that may exist Select the destination folder where you want the product installed Indicate whether you want to create shortcut icons on the Desktop Quick Launch panel or both Click the Install button to start the installation O w N O Click the Finish button when the installation is complete artisteer com page 8 Artisteer Web Design Revolution page Activating the software After you ve purchased Artisteer you will receive a Serial Number to be used to activate the software The activation removes the watermarks added to the generated templates by the trial version To activate the product click on the Palette icon to open Artisteer Activation dialog and enter your serial number in the first box If your computer is connected to the internet you can check Auto activation through the internet option and click the Activate button This will simplify the activation process If you work off line or do not wish to use the Auto activation method you can use the following link to obtain the activation key from any other computer connected to the web http www artisteer com p a In this case uncheck the Auto activation through the internet option and enter the obtained activation key directly in the Activation Key box Artisteer Activation x Product Artisteer Version 20 License Key 1111 1111 1111 111
24. from a variety of available color themes Further the individual colors can be changed Having chosen the colors you may refine them by adjusting the overall contrast of the colors 2 2 Paints In this block you have the ability to adjust the color theme You can select one of the predefined schemes or customize the color theme by selecting the desired colors Basic P mw I Medium s Normal EUM S A F Clicking on the Adjust options will open the list of the available color options e Luminosity e Saturation artisteer com page 42 43 Artisteer Web Design Revolution page Enter the values or drag the sliders to the right or left to increase or decrease the option values Colors x Adjust m Luminosity e al Saturation z Properties Adjust Color Options Sets colors luminosity Luminosity refers to the whiteness or intensity of a B color Luminosity for any one color will range from pure white through to black Luminosity The supported values are from 100 to 100 where 100 and 100 refer to the highest and lowest of the RGB components m Sets color saturation Saturation refers to the amount of grey in a color and determines how vivid it is The supported values are from 100 to 100 Saturation where 100 means a large amount of the grey 2 3 Fonts Select from a wide variety of font themes to match the overall look and content of the site T A A Font
25. insert you own background image Click the From File button in the Background Photo list and select the image you want to use 6 2 2 Background Image position Feel free to change the position of the picture The Position dialog box also allows you to apply the following header image settings e Resize header to image e Resize image to header e Use the original image size Background Area e box zr a Ga Effects EA Foreground Photo S nftlight artisteer com page 55 Artisteer Web Design Revolution Properties 96 page This defines the basic settings of the header background Depending on the selected image some background options may be disabled 2 Color Weight Color Saturation Blur ES Blend Mode Enabled only for Abstract backgrounds Background Sets the amount of the base color applied to the header image The base color for the header is selected under Background gt Effects gt Color Supported values are from 0 to 100 Specifies the base color Intensity The values range from 0 completely unsaturated grey to 100 completely saturated full color intensity Supported values are from 0 to 100 Sets the blur radius ranging from 0 to 30 pixels The blur effect averages all pixels within the specified radius the larger radius leads to more blurring Sets how the header image is blended with the header color This option is enabled only fo
26. shadow offset in pixels Supported values 0 to 20 pixels Specifies the angle at which the shadow is cast from the button Supported values 180 to 180 artisteer com page 88 89 Artisteer Web Design Revolution page To finish the button design you can change the overall fill of the buttons or change the text settings The text option allows you to change the color of buttons and hovered buttons as well as adjust font settings See Colors ok Button en Hovered Button Font tp FontFamily AT Size J Style 11 Footer Tab The footer tab is used to specify the style of the website s footer aD Fill Align A Text gt sn Gradient 15 Text Padding Hyperlink 7 Suggest Footer ES Textur EJRSS Ideas EN 11 1 Footer Styles The footer options include the following effects that can be applied to the footer e Color e Gradient e Texture e Align e Text Padding e Text font e Change Hyperlinks font e RSS icon artisteer com page 89 90 Artisteer Web Design Revolution page In the Footer Options dialog box you can customize effects applied to the footer Footer Options x Options 18 Padding y pr mm Gradient contrast y _ kz E Texture _ _ _ _ e gt Transparency P kz a xx Blend mode Marmal Properties Options 5 Specifies the padding of the footer s te
27. ta Menu Options E Layout Subitem Menu Bar ES tem Horizontal padding 4 5 TN gt Subitem I Vertical padding g 5 PH O Border width j ps ml Gradient contrast _ Ed Properties These will allow you to specify the submenu options Please note The options are disabled if No Submenus is selected in the Sub Item list gt Level Also note that the Gradient contrast option is disabled if No gradient is selected in the Sub Item list gt Gradient Subitem I opecifies the horizontal distance in the sub item drop down list in pixels Horizontal padding Supported values 0 to 50 pixels IE Specifies the top and bottom padding of the menu sub items Supported Vertical padding values 0 to 50 pixels C Specifies the width of the sub item borders Supported values 0 to 5 pixels Border width Specifies the contrast between the starting and ending colors in the sub item m gradient Supported values 100 solid color to 100 the most contrast Gradient contrast gradient To enable select any Gradient from the Menu gt Sub item gt Gradient list 8 Articles The Article tab provides the ability to control the look of the article You can choose the article shape blockless or in block format the text option or change the article header and footer artisteer com page 67 68 Artisteer Web Design Revolution page Untitled Artisteer 2 Standard Edition 41
28. x B mo Fonts M Sheet pese Menu al SOliggest Buttons WH S Design Template Export spans Layout ez Suggest Article Design E Footer z SAL 5 a E F Element a Pressing those key combinations will execute the command just as if you had clicked the corresponding button with the mouse For example pressing T on the Ideas tab will display a list of template options S and U keys typed quickly one after another will call the Suggest Design option and so on artisteer com page 12 13 Artisteer Web Design Revolution page Creating a Basic Design Creating a design with Artisteer is as easy as 1 2 3 fo AN a ll O Undo Cx Redo gh Export ro S Untitled Artisteer 2 Standard Edition ci jue S SA Ideas Colors amp Fo Layout Background Sheet Header Menu Artides Blocks Buttons Footer O Bl suggest Colors s Suggest Background 28 Suggest Header I Suggest Blocks 3 2 b 7 Suggest Fonts L Suggest Sheet Suggest Menu 6k Suggest Buttons ern ii Suggest Layout Suggest Article Design ES Suggest Footer er NAE Ideas Element Ideas Export d Click Export to 1 Suggest Design 2 When you find a save the created design is a tool to find a basic good design idea you as a WordPress theme theme idea and a great may want to adjust some HTML template or any place to start from design elements like other format you like color
29. 1 1111 Installation code 0000 0000 0000 0000 0000 4 Auto activation through the Intemet wk 0 Obtain Activation key at http www artisteer com p a eS M You will need to restart Artisteer after you successfully complete the activation process artisteer com page 9 10 Artisteer Web Design Revolution page How to work with the Artisteer Interface The Artisteer interface is quite simple to learn There are several main items Main Menu Quick Access Menu Tabbed Navigation Bar and Design Preview highlighted on the image below Main Menu contains basic file commands recent documents and other standard items for the File menu Quick Access Menu contains Undo Redo Save and Open shortcuts Navigation Bar contains all available editing tools Design Preview lets you see how your design will look All links and buttons in Design Preview are non clickable Main Menu Quick Access Toolbar Navigation Bar Design Preview E ld O Undo Redo Export gt Untitled Artigteer 2 Standard Edition ae ae S Ides Colors amp Fo Layout Badkgrounc Sheet Header af Artides Blocks Buttd Q B suggest Colors m Suggest Background y Suggest Header El Suggest Blocks ge e x Suggest Fonts LJ Suggest Sheet E Suggest Menu 0k Suggest Buttons Suggest Design eem Template 73 Suggest Layout Suggest Artide Design Suggest Footer gt Ideas Element Ideas Home Categories Archive About Text Link
30. 100 where 0 is equivalent to No transparency selected in the Transparency list Transparency artisteer com page 52 53 Artisteer Web Design Revolution page Shadow 1 Sets the shadow size for the sheet s shadow in pixels Supported values are from 0 px to 50 px where 0 px means without shadow This option is disabled when No Size Shadow is selected in the Shadow list a Sets the opacity for the sheet s shadow Supported values range from 0 fully transparent to 100 fully opaque This option is disabled when No Shadow is Opacity selected in the Shadow list a Sets the shadow offset in pixels Supported values 0 px to 60 px where 0 means no offset This option is disabled when No Shadow is selected in the Shadow Distance list Es Sets the shadow s offset direction The supported values are from 180 to 180 This option is disabled when No Shadow is selected in the Shadow list Angle 6 Header The header tab controls all aspects of the header including the size colors fonts foreground and background images You can use the header tab to make changes to the size and look of the header while being able to include background and foreground images ge e E led gt Undo Redo Export 5 Untitled Artisteer 2 E LJ 9 Ideas Colors amp Fonts Layout Background Sheet Header Menu Artides Blocks Buttons Footer OD POS E j 4 Ma Headline Headline A
31. 6eacb 4362 4b0d 8edd aab15c5e04ft58displaylang en Browsers supported e Internet Explorer 6 e Firefox 2 e Opera 9 e Safari 1 e Google Chrome 1 artisteer com page 7 Artisteer Web Design Revolution page Technologies supported e CodeCharge Studio 4 e WordPress 2 5 2 7 content management system e Joomla 1 5 content management system e Drupal 5 x 6 x content management system Standards supported e XHTML 1 0 Transitional e CSS2 e Section508 partially e PNG with transparency ni a y N W rFTICOCOTA A MN A In ay L S Er V j g D a DER wt Cy A EB Xu E a B BAS Ll Sa ug Vw Y IC 4 il loLtal This chapter describes how to install Artisteer on your computer Note 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 2 Double click the installation file called Artisteerlnstall exe This will launch a standard installation process Select the language that you d like to use during the installation and then click the Next button Follow the instructions provided by the Installation Wizard Carefully read the License Agreement If you accept its terms check Accept the terms of the License Agreement option and proceed to the next step If you do not agree you can quit the installation at this point Please feel free to
32. Menu the top margins look doubled as the menu is bottom aligned Distance 30 pixels Specifies the horizontal distance between menu items Supported values 0 to 7 2 Menu Bar gM Ls Border Menu Bar Refine the navigation bar further by choosing the overall gradient border width color and fill effect T Menu Bar The Menu Options dialog box allows you to adjust gradient and border settings Just click on the Gradient Options or More Borders button in the appropriate list TET Options Menu Bar X O Border width 1 J px m Gradient contrast j zs Properties Menu Bar Specifies the width of the menu borders Supported values 0 to 5 pixels To O enable select any border for the menu bar Border width Specifies the contrast between the starting and ending colors in the menu bar gradient Supported values 100 solid color to 100 the most contrast artisteer com page 64 65 Artisteer Web Design Revolution page Gradient contrast gradient To enable select any gradient from the Menu Bar gt Gradient list 7 3 Item This section provides the ability to choose how individual items of the navigation bar should look when you hover over or click on them This section includes the following functions e Set the Size Radius and Gradient values for the menu Items by clicking on the Item button e Adjust Border settings e Chan
33. Start Level and End Level options Customizing the Footer To customize the template footer via Joomla administration place one or multiple modules into the copyright position This will replace the default copyright text included in the template footer with the new content provided by the module Here are sample steps to configure custom footer 1 Goto Joomla Administrator www your site com administrator gt Extensions Module Manager 2 Click New select Custom HTML then select Next 3 In the module properties specify e itle Show Title No e Position copyright e Custom Output the desired footer content 4 Save your changes You can now use the newly created module for further footer customizations without utilizing additional modules artisteer com page 33 34 Artisteer Web Design Revolution page Joomla Positions Default Position Style nit niin aiid L Block stl arcto Lj Article Style art article __ No Style art nostyle artisteer com page 34 35 Artisteer Web Design Revolution page Joomla Module Style in Artisteer 2 2 The Default Position Style is applied to all modules located within a specific position If you want to change the style of a particular module please follow the steps below Log into your Joomla Administration and go to Extensions gt Module Manager Select the module you want to edit Go to Module Parameters and specify
34. Upper Level is fluid and resizable in any direction and the size of the Lower Level always corresponds with the size of the Upper Level Regardless of the sizes of objects 1 2 3 4 6 7 8 and 9 Object 5 automatically resizes itself to take up the rest of the space between them artisteer com page 21 22 Artisteer Web Design Revolution page Please note that if the background color is set for Object 10 Upper Level and the background color is not set for object 5 the Lower Level will be fully overlapped The Lower Level elements such as round corners borders and shadows will not be visible as they will be covered by the Upper Level artisteer com page 22 23 Artisteer Web Design Revolution page Navigation Bar Let s have a closer look at the Navigation bar It is divided into eleven different distinct categories and used to customize your design Moving from left to right we begin with the overall idea and layout to the site As we move to the right we become focused on specific parts of the site such as blocks and buttons fort EF bel O Undo Ot Redo Export Untitled Artisteer 2 IN E Ideas Colors amp Fonts Layout Background Sheet Header Menu Artides Blocks Buttons Footer 1 Ideas The Ideas tab is a great way to quickly envision your Website design right before your eyes 2118 E o Undo Redo Bp Export j Untitled Artisteer 2 ii 4
35. Visited Hovered FA September 17th 2008 a Author Admin R Edit Lorem ipsum dolor sit amet link visited link hovered link consectetuer adipiscing elit Quisque sed felis Aliquam sit amet felis bara semper velit er stent quam d ni artisteer com page 10 11 Artisteer Web Design Revolution page 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 buttons 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 Navigation Bar and select the Add to Quick Access Toolbar option To remove an item from the Quick Access Toolbar you can right click on the button and select the Remove from Quick Access Toolbar option Note Not all the commands located in the Navigation Bar can be added to the Quick Access Toolbar For these commands the Add to Quick Access Toolbar option in the right click menu is disabled By default the Quick Access Toolbar is located above the Navigation Bar To place it beneath the Navigation Bar click the small arrow button on the right end of the toolbar or simply right click within the toolbar or ribbon area and select the Show Quick Access Too
36. Web Design Revolution User Manual Artisteer Web Design Revolution page Table of Contents TDC de ACO GUNS RN e R 2 MATS a 2 d S 4 Whats new MATISteGr NE Emm e o ene 5 Produc o PEE ee TTE Em 6 Bre AG GIG NON 7 Downloading Ariste escoria id reia 7 System Regue menlis eaensosirs sierica indai adina ki aada Tanara FAN a Raie a ia aisi nisi ideas diaa Daa aeaiia Fais 7 enspe aE Cor E ET A E EE uu m 8 Activating the software 9 How to work with the Artisteer Interface cccceecccccseeeeeceeeeeesseeeeeeeeeeeeeseaeeeesaaeeeessaseeesseaeeeeseeeeesseeessageeees 10 QUIE ACCESS TODA NN TTD TERT DUET 11 Keyboard Accessibility oooooccccccoconccnnccononcnnncononncnnnnononncnnnnonnnnrnnnnonnnnnnnnnnnnnnnnnnnnnnnrnnnnnnnnnrnnrnnnnnnrannns 11 Creating a Basic DOS RT eee EE 13 Desi CUStOmMIZAUO raie aeata 14 Dialog BOXES id cias 15 Color Selector Dialog eterne s ep T E ANEA E icidas 17 WV UIC iiS oc E 18 de A e e A O A E 19 INAVIGAUON 4 P PR N ROA nn US ESO IIA 23 Wye o CPC CO T EA UR E POS OE SE 23 Ime OU DES 6 9 te 23 1 2 MEMO Ad SIMA irc titan ida A 23 Expor e P A 24 EXPO 0 0 Ss DIO m T H 25 expo DE SIOM ONIONS T ee nee enon ee eee e
37. a wins again Gripes and Grins 2008 Olympics How to SEO gt On Global Warming Can you quess The background and the block content sit on different levels The Lower Level or Background uses multiple elements to work around the CSS2 limitation of only one background image per element The Upper level sits on top of the Lower Level and contains the actual Content artisteer com page 20 21 Artisteer Web Design Revolution page The levels consist of the following objects The Lower Level e 1 3 7 9 the segments of the corner image e 2 4 6 8 the segments of the side image e 5 the central background image The Upper Level e 10 the text with the indentation The following outlines the HTML structure div class box gt div class box tl gt 1 lt div gt div class box tc gt 2 lt div gt div class box tr gt 3 lt div gt div class box cl gt 4 lt div gt div class box cc gt 5 lt div gt div class box cr gt 6 lt div gt div class box bl gt 7 lt div gt div class box bc gt 8 lt div gt div class box br gt 9 lt div gt div class box body gt 10 lt div gt lt div gt The margins in Object 10 include the corner radius and shadow sizes to display the Content properly within the borders and shadow of the Background When the radius is not specified the perception of margins is created by the actual graphic border and shadow images in the background The
38. ae ne a ere ener ee ene ee ene eee eee eee 27 LAR ie CTS eee ne eS E Py o ee E O ee eee ee 42 AN lA EET Re EN 42 o A A PP A A 43 A IER 46 9 1 Page COlIMNLYQU int aida 47 osse Nn fT 47 zie Co 70 01 o MENT 48 4 1 Adjust Page Background Options sssseeesssissssssseeeeee nennen nnne nnnm n nenne nnne nain nnns 48 artisteer com page 2 Artisteer Web Design Revolution eee page SA A A 50 SMA CSL WONG RN RE learn ao ais otr 51 A RR m M 53 AAA 53 og BaCk OUNO MNT TL 54 omo OF COO Wieso c 59 JM WT 60 A LT m m m m T 62 A 63 TN EUTIUE1 RERMTMRIH 63 FA TS S m 64 A 65 VE NESSUN RETE T E eeesest seeseseoatecenes 66 Mig el t 67 MN IT R 68 8 2 Text Formatting P m 70 SRED EEE M E D E E RE E D E EE E E A E EE EE E EA 72 o Po OU m m 74 o DMICT M R 15 S Mio
39. ansparency of the glare image Supported values 0 artisteer com page 57 58 Artisteer Web Design Revolution page Transparency no transparency to 100 fully transparent opecifies how the glare blends with the underlying layer of the block Options Normal No effect on the underlying layers ES Blend Mode Soft Light Lightens or darkens the image depending on the color of the glare Image Overlay Blends the layers together by changing the opacity darkness and lightness of the glare Image Specifies the position of a glare Image Supported values Left Center and Right Position Specifies the method of fitting the image into the header area Options Vertical resizes the image s height so that it fits vertically into the B header area Whole resizes the image both vertically and horizontally to fit completely into the header occupy the entire header area recle opecifies the gradient settings for the header area To enable select any gradient from the Header Background Effects Gradient opecifies the contrast between the starting and ending colors in the gradient The values range from 100 solid color to 10096 the most a gradient contrast Contrast Specifies the angle at which the gradient is applied The values range from 180 to 180 which allows you to select any desired direction of Angle the gradient fill Specifies the glow of the foreground object To enable use a Texture fo
40. ast E A pr m r Li LL d ra om SE gt Y DD gt ES E a a wu li H VJ we 50 page and lightness of the top layer e Soft Light This blend mode lightens or darkens the image depending on the color of the top layer if the top layer s pixel is dark then the bottom layer s pixel is darkened if the top layer s pixel is light then the bottom layer s pixel is lightened This option is not available when No Texture is selected in the Image or Texture list Glare Sets glare transparency for the page background The supported values are from 096 to 10096 where 096 means without transparency This option is not available if No Glare is selected in the Glare list Sets the position of a glare image Available options are Left Right and Center to align the glare image left right or center respectively This option is not available if No Glare is selected in the Glare list Gradient Sets height for the selected gradient type the gradient type may be changed in Gradient list The supported values are from 1 to 1000 pixels This option is not available when No Gradient is selected in the Gradient list Increases or decreases luminosity difference between the starting and ending colors in the gradient This option is not available when No Gradient is selected in the Gradient list The Sheet tab provides the ability to change the overall positioning and look of the sheet or page Yo
41. bottom through orange yellow green blue up to purple allows you to select the desired hue of the color Having the hue selected you may also move a palette color picker from left to right and from top to bottom to additionally set the saturation and luminosity values of the color Saturation can vary from 0 completely unsaturated to 100 completely saturated pure color Luminosity ranges from O black to 100 white artisteer com page 17 18 Artisteer Web Design Revolution page The values displayed in the right set of boxes will change to indicate the exact color settings These values can also be changed manually or directly in the text boxes It may be convenient when you copy the exact color value from some other graphic software and want to use it in Artisteer Property Description Hue The hue value of the color ranged from 0 to 360 Sat The saturation of the color ranged from 0 completely unsaturated to 100 fully saturated Lum The luminosity of the color measured in percentage from O black to 100 white Red The decimal value of the red shades Green The decimal value of the green shades Blue The decimal value of the blue shades Hex A hexadecimal color code usually used in HTML code The Preview option makes it possible to see the page with the selected color applied to it Ok and Cancel buttons allow you to submit or discard the changes made The colors on computer monit
42. der within WordPress installation For example lt WordPressFolder gt wp content themes lt YourThemeName gt 3 Copy or upload theme files exported from Artisteer into the newly created lt YourThemeName gt folder Login to your WordPress administration panel and select Design gt Themes In the Available Themes section click on your theme title or screenshot then click the Activate Theme link to activate it For more information please refer to the official WordPress documentation http codex wordpress org Using Themes Adding New Themes WordPress theme localization When exporting themes Artisteer automatically includes several language files obtained from the WordPress Website at hitto codex wordpress org WordPress Localization Specifically French German Italian and Spanish translations are exported by Artisteer in the WordPress compliant file naming format lt country gt _ lt LANG gt mo For example a German language file is de DE mo To include different or additional language support in your WordPress theme please find and copy the desired language files into your specific WordPress theme folder You can find the additional language files in your default theme folder lt WordPressFolder gt wp content themes default or on the WordPress Website at hittp codex wordpress org WordPress Localization To select a different language than your current WordPress language change the define function in the wp config
43. ding j ps Radius M LEER O Border width D px mm Gradient contrast j ka Properties Button aa Specifies the horizontal distance between the button caption and button Horizontal padding borders Supported values 0 to 50 pixels Ia Specifies the vertical distance between the button caption and button borders Vertical padding Supported values 0 to 50 pixels La Specifies the button corners Supported values 0 to 100 artisteer com page 87 Artisteer Web Design Revolution Radius Border width Gradient contrast 88 page Specifies the width of the button borders Supported values 0 to 10 pixels Specifies the contrast between the starting and ending colors in the button gradient Supported values 100 solid color to 100 the most contrast gradient To enable select any gradient from the Buttons gt Button gt Gradient list If you add a shadow effect to your buttons you have the possibility to make custom changes in the Button Option dialog Just click on the Shadow options button Button Options Properties I Size P Opacity El Distance E Angle x Shadow IO Size 3 px I Opacity 2n A Sk Distance g ps E Angle raa 45 shadow Specifies the blur size of the shadow Supported values 0 to 20 pixels Specifies the shadow opacity Supported values O fully transparent to 100 fully opaque Specifies the
44. dings e Hyperlink e Quote e Bullets e Picture e Table H Headings Bullets Hyperlink Picture Quote FH Table Other Elements You can change the font options quote style bullets picture table border settings or picture border settings to make your article more unique artisteer com page 72 73 page button in the appropriate element list Headings Hyperlink and Quote will Artisteer Web Design Revolution open the Article Content Option dialog box where you can adjust font and paragraph for headings and Clicking on the Font Options quote settings It is worth mentioning the Bullets elements You can choose a picture from the variety of included images or insert your custom image You can also change the color of the bullet F Color Color No Bullets Color Font Family b Ld u At Size J Style gt EM mm Y Font Options button will open the Article Option Dialog box where you can change the Clicking on the Bullet Option offset and re coloring options of the bullets Article Options Bullets Offset pa Shape Shadowy Sh Recoloring Properties Bullets Specifies the indent between the bullet and the list text Supported values 0 to Offset 20 pixels Specifies whether the bullets should be re colored Supported values Yes and artisteer com page 73 2 No Recoloring l 74 A
45. e menu item setting which specifies whether Artisteer should create a special menu item pointing to the homepage front page of the website Property Description Visible Item If this option is checked Artisteer creates a special Home Page menu item which is highlighted when the website s front page is displayed in a browser If the front page is not set this menu item points to the list of posts If the Visible Item option is unchecked no menu items are created by Artisteer The whole menu is built from the list of WordPress pages If the front page is specified in WordPress settings you will see the menu item that corresponds to that page added and highlighted in the menu If the front page is not set no menu item is highlighted by default when the list of posts is displayed in a browser Item Name Specifies the caption of the menu item pointing to the home page artisteer com page 26 27 Artisteer Web Design Revolution page Joomla Tab Property Description Top menu Position name Specify the module position where you place site menu Exported template will have a position with the specified name created especially for the top menu Watermark Tab Property Description Show Watermark If checked the watermark text will be repeated throughout the page Watermark Text A text to be displayed across the page when the Show Watermark option is enabled Now let us consider every export option in a little more detail
46. eb Design Revolution page 4 Follow the wizard steps until the skin is installed DotNetNuke Places Te Header Lo LLL LLLA ee ee ee A UM e o e ContentPane sidebar 1 Banners User4 NE un Go Banner4 Exporting a design as an HTML template 1 Select any template from the Template list Select Export gt HTML Specify the desired name and the destination folder where your HTML template is to be created Alternatively you can compress the template folder to zip format using Export as a ZIP archive option The resulting template will contain markup styles and graphics that are necessary to apply the design to any web page artisteer com page 39 40 Artisteer Web Design Revolution page Exporting a design as an ASP NET Project To export a design as an ASP NET project that can be later opened in Visual Studio you should take the following steps 1 Select Template gt ASP NET Application option Use Export gt Visual Studio C Project Specify the template name and select the folder to store the template files If necessary apply zip compression using Export as a ZIP archive option When the export is completed a new C project will be created in the specified location Open it in Visual Studio using the File gt Open Website option and examine the files created You will see e Master Page that defines a site s overall layout and contains a set of conte
47. ent To enable select any Gradient from Blocks gt Block Styles gt Background gt Gradient list Specifies the background texture options To enable select any texture from Blocks gt Block Styles gt Background gt Texture list Specifies the transparency of the background texture Supported values 0 fully opaque to 100 fully invisible Specifies how the texture blends with the underlying layer of the block Options Normal No effect on the underlying layers Soft Light Lightens or darkens the image depending on the color of the texture image Overlay Blends the layers together by changing the opacity darkness and lightness of the texture image If you selected a template with a shadow effect the shadow option provides the ability to change size angle and opacity of the block shadow as well as indicate the distance between the shadow and the block borders To accomplish this just click on the More Shadow button in the Background gt Effects gt Shadow list Block Options x Layout Shadowy E Background p IL Size 2 px e Header 2 Opacity 35 15 Content LI Distance 4k pm x P Angle artisteer com page 78 79 Artisteer Web Design Revolution page Properties You can also alter and specify the shadow options The options are disabled for no block styles selected in the Block Styles list Shadow Ie Specifies the shad
48. enu or create a new one Go to Drupal Administer gt Site Building gt Blocks www YourSite com q admin build block Place menu into the Menu region DUUD BI NOTE the Menu region can contain only a single menu or none For more information please visit hito drupal org node 102338 artisteer com page 36 37 Artisteer Web Design Revolution page Customizing the Footer To customize the theme footer via Drupal Administer place one or multiple blocks into the Copyright region Here are sample steps to configure custom footer 1 Goto Drupal Administer gt Site configuration gt Site information www your site com q admin settings site information 2 Edit the Footer message field 3 Save your changes Drupal Regions Banner 2 Banner 3 Content Left Banner 4 User 4 i Banner 5 artisteer com page 37 38 Artisteer Web Design Revolution page Exporting a design as a DotNetNuke Skin To export a design as a DotNetNuke Skin follow these steps Select Template DotNetNuke Skin Use Export DotNetNuke Skin option Specify the template name and select the folder you want to export the template files to If necessary apply zip compression using Export as a ZIP archive option Please note that the skin pack contains ArtMenu zip which is a menu module In the DNN Administration Admin gt Skins choose the Upload Skin option On the following
49. export the design as an HTML template or as a CodeCharge Studio Project Exporting a design as a WordPress theme To export a design as a WordPress theme that can be applied to the existing WordPress installation follow these steps Select Template WordPress template Select Export gt WordPress Theme option Specify the desired name and path to the folder to export your template files to If necessary you can compress the template folder by using Export as a ZIP archive option After the export you will obtain WordPress specific theme files that can be located in the theme folder on the server and can be easily applied to the WordPress websites The path to the theme folder in the WordPress system usually looks like WordPressFolder wp content themes ThemeName Now you can simply upload the exported theme files into that folder To apply the new theme to your website login to the WordPress Administration Panel navigate to the Presentation tab WordPress version 2 6 or to the Appearance gt Theme WordPress version 2 7 and activate this theme The generated WordPress themes are widget ready and compatible with WordPress version 2 5 and higher artisteer com page 28 29 Artisteer Web Design Revolution page Tips and Tricks Installing WordPress Themes 1 Access your Web server using an FTP client or Web server administration tools 2 Create a folder for your specific theme under wp content themes fol
50. for retrieval across the Internet using Web browser programs HTML is written in the form of tags surrounded by angle brackets The document can contain links headings paragraphs lists and text supplemented with interactive forms embedded images and other objects CSS Cascading Style Sheets CSS is a style language that defines the presentation of a document written in a markup language CSS controls the overall layout text size style and formatting and other design properties to let developers separate content from design RGB RGB stands for the three primary colors of light red green and blue The combination of these colors in different proportions produces any color in the visible spectrum The RGB system is used for representing colors on a computer display HSL HSL stands for Hue Saturation and Lightness It is a method for describing colors as they are perceived by the human eye HSL is considered a more intuitive way of dealing with color than RGB artisteer com page 94 95 Artisteer Web Design Revolution page Hue corresponds to the actual color saturation corresponds to the intensity and luminosity corresponds to the lightness of the color artisteer com page 95
51. ge color and text parameters If the default settings do not meet your needs you can use the Menu Options dialog box to adjust the option settings Menu Options Layout Menu Bar Er Subitem artisteer com page 65 66 Artisteer Web Design Revolution page Properties Item I El Specifies the horizontal distance between the item text and item borders Horizontal padding Supported values 0 to 50 pixels I Specifies the top and bottom padding of the menu items Supported values 0 Vertical padding to 50 pixels La Specifies the corner radius of the menu item Supported values 0 to 100 Radius C Specifies the width of the menu item borders Supported values 0 to 5 pixels Border width This option is disabled when the menu items have no borders Specifies the contrast between the starting and ending colors in the item gradient Supported values 100 solid color to 10096 the most contrast m gradient To enable select any Gradient from the Menu gt Item gt Gradient list Gradient contrast 7 4 Sub Item This section covers the ability to control the appearance of items in submenus You can change the following options e Gradient and Size in the sub item list e Fill e Border e Text If the default settings don t meet your needs use the Menu Options dialog box to adjust the option settings artisteer com page 66 67 Artisteer Web Design Revolution page
52. ge pack Utilizing Menus Please use the following steps to utilize menu style designed with Artisteer 1 Goto Joomla Administrator www your site com administrator gt Extensions gt Module Manager 2 Open an existing menu or create a new one and place it into the user3 position NOTE the user3 position can contain only a single menu or none For more information please visit hito docs joomla org Screen modules 15 Apply Artisteer style to Joomla menu To apply Artisteer menu style you should locate your menu in the module position specified under the Export Options Joomla Top menu Position name in Artisteer For this after the export go to Joomla Extensions Module Manager select the Menu e g Top Menu click the Edit icon on the toolbar Details section and select the specified position in the Position list box Multilevel Menu in Joomla It takes three steps to create a multilevel menu in Joomla 1 Activate a multilevel menu for your template in Artisteer Menu Sub item Levels Multilevel option 2 Locate your menu in the user3 module position in Joomla Administrator artisteer com page 32 33 Artisteer Web Design Revolution page 3 Goto Joomla Extensions gt Module Manager select the Menu e g Top Menu click the Edit icon on the toolbar and set Always show sub menu Items in the Module Parameters dialog to Yes If necessary you can also specify the number of sublevels using
53. l Theme Export as ASP NET Application Ed Export to CodeCharge Studio Custom Value Dialogs screenshot Library of Textures Glares and Gradients partial 7596 Number of Color and Font Schemes 504 70 Number of Photo Objects 200 300 Version artisteer com page 6 Artisteer Web Design Revolution page Quick Start Guide Downloading Artisteer You can download the Artisteer installation file from the official Artisteer Web site at http www artisteer com The software is provided with a free trial period that allows you to evaluate the product prior to purchasing the software During this period of time Artisteer is fully functional and has all its features available for testing The only restriction is that all the templates and images generated with Artisteer will have watermarks embedded in them until the product is activated The trial period is unlimited SO you can activate the software at any time you wish and activation instructions are provided in the Activating the Software chapter of this manual System Requirements This section describes the minimum system requirements for the Artisteer software Development Environment e Intel or AMD processor 1500 MHz or higher e 100 Mb free disk space e 512 Mb RAM or higher e Microsoft Windows 2000 XP Vista e Microsoft NET Framework 2 0 This framework can be obtained from the Microsoft website at http www microsoft com downloads details aspx familyid 085
54. lbar below the Ribbon option from the drop down menu Keyboard Accessibility Many options available in Artisteer can be accessed using keyboard keys instead of the mouse There is a set of combination keys provided to map to particular commands on the Navigation Bar and Quick Access Toolbar Press the Alt key to see the Key Tip badges pop up for each tab Untitled Artisteer 2 Standard Edition gus a Ideas Colors amp Fonts Lavaut Backar ie suggest Colors m suggest Background Y suggest Header B Suggest Blocks De j A suggest Fonts El Suggest Sheet E suggest Menu lok Suggest Buttons QUEE Suggest Design Template Export 5 Suggest Layout Suggest Article Design E Suggest Footer Ideas Element Ideas Export E artisteer com page 11 12 Artisteer Web Design Revolution page Pressing the key shown in some particular Key Tip badge switches the Navigator to that tab For example you can press A to switch to the Articles tab M to switch to the Menu tab and so forth Let s assume we want to navigate to the Ideas tab Once the desired tab is opened you will see another set of Key Tips displayed next to their respective commands as shown below ge EX gd O undo Redo f Export roer TE ee ia Ideas Colors amp Fonts Layout Background sheet Header Menu Articles Blocks Buttons Footer uggest Blocks
55. ludes the header and footer pages that are used to add page background sheet header and menu styles to the pages Thus all the newly created CodeCharge Studio pages will have page background sheet header and menu styles automatically applied to them However the Artisteer generated styles cannot be automatically applied to CodeCharge Studio forms buttons and other blocks on the page To add style to these components you can consider one of the following solutions e Open the CodeCharge Studio Style Builder Tools gt Styles and add a new style that looks similar to the style generated by Artisteer Use this new style for CodeCharge Studio forms and controls e Modify a CodeCharge Studio page template to add the Artisteer styles manually In that case do not select any style when creating forms and controls in CCS Then switch to HTML mode and modify your page template manually adding the Artisteer classes and the necessary html tags A sample html code is provided on the Main page so you can review it and modify CodeCharge Studio page templates accordingly The example code below demonstrates how to apply the Artisteer generated styles to a Record form on CodeCharge Studio page The unchanged HTML code is shown in black the removed code lines are crossed out and highlighted in red and the lines added to the code are highlighted in blue color lt 1 BEGIN Record countriesSearch gt lt form id countriesSearch method post
56. m the drop down menu and assigning your template as the Default Template for the website Note The generated Joomla themes are compatible with Joomla version 1 5 and higher Tips and Tricks Installing Joomla Template To install an exported and zipped template via the Joomla administration panel please do the following Go to Joomla Administrator www your site com administrator gt Extensions gt Install Uninstall In the Extension Manager choose the first option Upload Package File Click the Browse button to select the zip file from your computer Click the Upload File amp Install button p d dq xe For more information please visit http docs joomla org How to install templates artisteer com page 31 32 Artisteer Web Design Revolution page Joomla localization Joomla provides an internationalization feature and currently supports 50 world languages The language packages are available for download at nitp joomlacode org at project translation frs Joomla uses three language packages one for the front end one for the administrator and one for installation It is not required to use all three Feel free to download only the necessary packages and customize the language settings to serve your needs If there are no packages for your language you can create them manually by following the instructions provided in the Joomla documentation here hitio docs joomla org How to create a langua
57. n as compared to version 1 are e Support for creating Joomla templates e Support for creating Drupal themes e Support for creating Visual Studio project templates e Perfectly valid HTML CSS e Typography and font scaling features e Footer editing features e Support for sheet transparency e Support for uploading custom page background images glares and textures e Support for block bullets e Keyboard shortcuts for opening and saving files undo redo etc e Internationalization support Exported Wordpress themes are internationalized and available in French German Italian and Spanish with additional languages available from WordPress Website e New Export Options dialog that allows specifying template version tags author and manage some of the WordPress and Joomla specific options e Anoption for custom watermarks if you are creating temporary templates for review by your customers and want to use our built in trial protection mechanism e Improved Export Dialog with the ability to specify template name and path as well as export template to zip file artisteer com page 5 Artisteer Web Design Revolution page Product Comparison Artisteer Standard Edition vs Home and Academic Edition Home amp Academic Standard Edition Edition Free upgrades for 1 year O Design Suggestions Design Features ts Export as XHTML CSS Y WeExport as Wordpress Theme LV FRExport as Joomla Template Export as Drupa
58. navigator above or below the header or choose not to use a menu bar at all In addition if your page will have more content you might want to expand your site into two or more columns C Menu Header b d 3 2 Columns When a multi column layout is being used the Layout Options dialog box displays a set of sliders that allows you to set the percentage of the column widths Two Columns B Clicking on the Width Options will open the Layout Options dialog box You can enter the values to achieve the desired column width artisteer com page 47 48 Artisteer Web Design Revolution page 4 Background The background of the page is just as important as the page itself You can change the background effects to achieve the desired look You can choose to have LL e Background image Select one of our images or insert your own click the 7 From File button e Image or Texture You can insert your own texture template e Glare You can also insert your own Glare template e Gradient e Overall color of the Background 4 1 Adjust Page Background Options Open Options dialog to improve the design of the page background You can customize e Image or Texture e Glare artisteer com page 48 49 Artisteer Web Design Revolution page e Gradient Page Background Image or Texture al ecient Texture repeat Horizontally F Transpare
59. ncy g EA Properties Image or Texture E Sets if how a background image or texture will be repeated The supported values Texture Repeat e Fill The background image will be repeated vertically and horizontally e Horizontally Default The background image will be repeated horizontally e Vertically The background image will be repeated vertically e No repeat The background image will be displayed only once This option is not available when No Texture is selected in Image or Texture list Sets the starting position of a background image This option is not available when No Texture is selected in Image or Texture list Position m Sets whether a background image is fixed or scrolls with the rest of the page This option is not available when No Texture is selected in Image or Texture list scrolling E Sets background texture image transparency The supported values are from 0 to 10096 where 096 means without transparency This option is not available when Transparency No Texture is selected in Image or Texture list Sets how background color and background texture image layers are blended into each other There are 3 options available ES e Normal No effect on the underlying layers Blend Mode e Overlay Blends the two layers together by changing the opacity darkness artisteer com page 49 Artisteer Web Design Revolution 2 Transparency Align 12 Height Contr
60. nt in pixels Supported Border values O to 10 pixels O corresponds to Without Border This option Width is only available if you use the in block shape 8 1 2 Shadow Clicking on the More Shadows button in the styling gt Shadow list opens the Article Options dialog box where you can adjust shadow options Bullets artisteer com page 69 l 70 Artisteer Web Design Revolution page Properties Please note The shadow options are available only for the in block shape Shadow 1 Specifies the shadow size of the article block in pixels Supported Size values 0 to 20 pixels E Specifies the shadow opacity of the article block Supported values Opacity are 0 to 100 a Specifies the offset distance of the shadow in pixels Supported Distance values O to 20 pixels where O indicates no offset EE opecifies the angle at which the shadow is dropped from the article Angle block Supported values 180 to 180 8 2 Text Formatting This section allows you to change the text format options like e Margin Left e Margin Right e Line Height e Character Spaying e Font Options e Align Font Family d At Size f Style artisteer com page 70 Artisteer Web Design Revolution 71 page Clicking on the Font Options button opens the article content text option dialog where you can adjust such font settings like e Font
61. nt placeholders such as HeaderContentPlaceHolder TitleContentPlaceHolder SheetContentPlaceHolder etc e Content Page called Default aspx that has several content blocks and default pages DefaultHeader DefaultMenu and DefaultSidebar1 included into it This page is generated as an example for you to see how a finished content page may look like e CSS files that define the design of the pages e A set of other files necessary for the Visual Studio project Feel free to modify the project files the way you want and enjoy Exporting a design as a CodeCharge Studio Project To create a design that can be applied to CodeCharge Studio projects the following steps should be performed e Select Template gt CodeCharge Studio template e Select Export Design gt CodeCharge Studio Project option e Browse to the folder where you want to locate the CodeCharge Studio project and click OK to export the files When the export is completed a new CodeCharge Studio project will be created in the specified location The following pages will be added to the project artisteer com page 40 41 Artisteer Web Design Revolution page e Pagelemplate e Header e Footer e Main e About PageTemplate is an essential page that will be used as a basis for creating all the new pages within the CodeCharge Studio project This functionality is achieved using the Project Settings General New Page Template option PageTemplate inc
62. nu It can also be accessed by using the Export gt Export Options command on the Ideas tab or on the Quick Access Toolbar The dialog provides a set of options for exporting templates from Artisteer The available options are explained below Most of them are optional and no value is assigned when a field is left empty Export Options E nre n WordPress E Joomla me Watermark Properties fy Author name Show author name and UAL in Footer TT Template version Tags widgets valid SHTML z Description Cancel Preview artisteer com page 25 26 Artisteer Web Design Revolution page Properties Tab The properties tab is used to describe the information to be used by Artisteer to generate the style sheet header and the metadata information for the theme This information will be further used by CMS if your CMS supports such functionality Property Description Author Name Identifies the name of the person or organization creating the design Author URL Provides the reference to the author s website Show Author in Footer When checked the above defined author name will be displayed in the page footer Template Version Identifies the version number of the template Template URL Specifies the location of the template on the web Tags Specifies the keywords associated with the theme Description Provides additional information about the theme WordPress Tab The WordPress tab contains a Home Pag
63. o Name Xx Font Family Arial Headings 124 Anal Content Arial Font Style Font Size px Default Style Italic Bed Bald Italic A Underline Aa E Small Caps A Overline AA m All Caps x Strikeout Character Spacing Spacing Normal By Default amp P AaBbYyGgLlJj 6 5 Title Style This section provides the ability to change the title style settings to complete your title The title style section includes the following functions e Position simply drag the title to the desired place e Size e Align artisteer com page 62 63 Artisteer Web Design Revolution page 7 Menu The Menu tab is used to control the position and appearance of the main navigation menu It consists of the menu bar and the menu items It can be implemented as a standard website menu or in the form of tabs or menu buttons 7 1 Menu Styles You can change the overall style of the menu buttons including the shape coloring borders and spacing between the items Using the styling option you can change the following settings e Shape e Margin e Distance e Separator There are margin and distance options available for adjustments to the menu layout Properties artisteer com page 63 Artisteer Web Design Revolution B page Specifies the space around the menu Supported values 0 to 20 pixels Margin Please note For the Tabbed
64. ors 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 a yellow color a mix of red and blue produces a magenta color and so forth Mixing all three base colors with full intensity produces white while the absence of all the components returns black The values for red green and blue base colors are usually specified using a scale from 0 to 255 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 quite 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 where angle around artisteer com page 18 19 Artisteer Web Design Revolution page the axis corresponds to hue distance from the axis corresponds to saturation and 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
65. ow thickness Supported values 0 to 20 pixels Size a Specifies the shadow opacity Supported values 0 fully transparent to 100 Opacity fully opaque 4 Specifies the shadow offset in pixels Supported values 0 to 20 pixels Distance Es Specifies the shadow angle starting from the edges of the block Supported Angle values 180 to 180 9 1 3 Header Each block has an individual header You can choose how you want that header to look You can change the header color as well as the font and color of the text You can even choose an icon from a variety of proposed icons or insert your own custom icon image Content Text Icon d Shape 3 Fill rd Border Effects m Gradient ES Texture You can add gradient and texture effects to the block header Both options can be further customized in the Block Options dialog You can also add a custom texture to the block header artisteer com page 79 80 Artisteer Web Design Revolution page Ho Texture un p Ls Border H m Gradient Pixel Pattern E ES Insert Texture from File Clicking on the Texture Options or Gradient Options in the appropriate list will open the Block Option dialog box where you can adjust the effects settings Block Options x E Layout Header 5 Background BB shadow O Border width gt 2 Header o d m Gradient contrast _ A al Content Texture F Transparency
66. p gt Appearance Footer Themes HTML iiite i 2009 My Blog All Rights Reserved Editor Crooter o O O BS Plugins XHTML You can use these tags a abbr A Users span Th Teols Save changes settings artisteer com page 30 31 Artisteer Web Design Revolution page Exporting a design as a Joomla theme To export your design as a Joomla template follow the steps below 1 Select Template Joomla option Use Export gt Joomla Template Specify the name and select the folder you want to export the template files to Alternatively you can choose to compress the template folder by using the Export as a ZIP archive option After the export you will obtain a set of Joomla specific files that can be located in the theme folder on the server and easily applied to the Joomla websites The path to the theme folder in the Joomla system usually looks like this JoomlaFoldertemplates ThemeName You can simply copy upload the exported theme files into that folder If your theme is exported as a ZIP archive log into the back end of your Joomla installation go to Extensions gt Install Uninstall choose Upload Package File option in the Extension Manager type the path or click the Browse button to select your zip file and click the Upload File amp Install button to upload and install the theme Once the theme is successfully installed you can activate it by selecting Extensions Template Manager fro
67. php file For example define WPLANG de DE To edit translations for your language please download and install the Code styling Localization plug in from htip wordpress org extend plugins codestyling localization Then in WordPress administration select Manage Localization artisteer com page 29 30 Artisteer Web Design Revolution page Installing additional language support To include a different or additional language support in your Worpdress theme please find and copy the desired language files into your specific Wordpress theme folder You can find the additional language files in your default theme folder lt WordPressFolder gt wp content themes default or on the Wordpress Website at htip codex wordpress org WordPress Localization To select a different language than your current Wordpress language change the define function in the wp config php file for example define WPLANG de DE Editing translations To edit translations for your language please download and install Codestyling Localization plug in from http wordpress org extend plugins codestyling localization Then in WordPress administration select Manage gt Localization Customizing the Footer To customize the template footer via WordPress 2 6 administration o goto Administration gt Appearance gt Footer o edit the HTML Please note that the footer content will be placed within the Paragraph container lt
68. r the Abstract background images Supported values are Softlight Lightens or darkens the bottom layer colors depending on the colors of the header image Overlay Blends two layers preserving the opacity lightness and darkness of the bottom layer Sets a quality level for JPEG compression The range goes from 0 to 100 Better image quality results in larger file size so drag the slider artisteer com page 56 57 Artisteer Web Design Revolution page left or right to select an appropriate trade off between file size and JPEG Quality image quality 6 2 3 Background Image Effects You can add visual effects to the background to make your design look even more impressive and unique Header background options include the following effects that can be applied to the header background e Color of the header If you select No photo in the Background photo list the Header will be filled with the chosen color If you select the background image this color will be used for image colorization e Image Recolor e Glare You can insert your own glare template e Texture You can also insert your own texture template e Gradient e Blur EY Foreground Photo a s g Noma lt Whole ON J mo EE Soli o Properties Specifies the glare settings for the header background To enable Glare select any glare from the Header background gt Effects gt Glare Specifies the tr
69. rder m Gradient Ed Texture k You can also add gradient and texture effect to the block s content Both of these options are available for customization You can also add a custom texture template Clicking on the Texture Options or Gradient Options in the appropriate lists will open the Block Option dialog where you can adjust effects and bullets settings artisteer com page 81 82 Artisteer Web Design Revolution page Block Options x Layout Content 5 Background E shadow E Padding i E D my i Q Barder width 4 1 px Ge Gradient contrast kx us Texture Transparency c HE a xx Blend mode Mormal Bullet Offset px eh Recoloring Tes Properties Content 15 Specifies the space between the content block borders and the content of the Padding block Supported values O to 50 pixels Specifies the width of the content block borders Supported values 0 to 10 pixels Border width To enable select any style with inner content block from the Block Styles list Specifies the difference in luminance between the starting and ending colors in the gradient Supported values 100 solid color to 100 the most contrast gradient Gradient contrast To enable select any gradient from the Blocks gt Block Styles gt
70. reground photo on the header Specifies the transparency of the header texture Supported values 0 Transparency no transparency to 100 fully transparent artisteer com page 58 59 Artisteer Web Design Revolution page opecifies how the texture blends with the underlying layers of the header Options Blend mode Normal No effect on the underlying layers Soft Light Lightens or darkens the image depending on the color of the texture image Overlay Blends the layers together by changing the opacity darkness and lightness of the texture image 6 3 Foreground Photo This section provides the ability to add a photo that will be complementing your header You have the ability to choose the foreground photo from a variety of professional photos or many different types of subjects You can also insert your own photo 6 3 1 Position Feel free to change the position of the foreground photo in the Object Position dialog box Simply drag the photo to the necessary place Also this dialog allows you to change the size of the photo Just move the slider or click on the 100 button to apply the full size of the photo Object Position x ie c 4 Preview BR Cancel 100 artisteer com page 59 60 Artisteer Web Design Revolution page 6 3 2 Effects You can add visual effects to the foreground photo to make your design look even more impressive and unique Header foreground pho
71. results of the setting automatically as they are changed e Preview button to display the results of the settings on the page e Ok button to apply the settings and close the dialog box e Cancel button to discard the changes and close the dialog box An example of a dialog box is provided in the picture below artisteer com page 15 16 Artisteer Web Design Revolution page Menu Options x ES Layout Item Menu Bar T i Horizontal padding gt px gr Subitem I Vertical padding ru Is px Radius O Border Width gt px al Gradient Contrast Preview l OK Cancel Preview Most of the dialog boxes contain settings that can be changed using slider bars Usually these are settings for the width height opacity transparency and other range values To make changes 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 into this textbox Use the Preview button or Preview option available at the bottom of the dialog window to view the changes If the Preview checkbox is ticked the changes will be immediately displayed on the page as you drag the slider If you type the value directly in the option box click outside the box to have the value applied to the page If the
72. rtisteer u Web Design Revolution To finish your list configuration you can change the font options of the text in the list Just click on the Font Option button and adjust the font and paragraph settings in the Article Content List dialog box Article Content List x Font Paragraph Font Family Font Style Font Size px Comic Sans MS Couner New Georgia Effects A E Underline Aa E Small Caps A E Overline AA m All Caps A m Strikeout Pe ese gS a a a Spacing Bp Default gt px Font Preview AaBbYyGoLlJj Preview OF Cancel 8 4 Header and Footer You can customize the article header and footer adjust style text and headline by choosing icons from the predefined pictures or by using your own images Date 7 E Category E Author 7 Tags Header Footer oT b Edit A Comments Header Footer You can change the date author and edit icons located in the article header section and the category tags and comments icons located in the article s footer artisteer com page 74 75 Artisteer Web Design Revolution page v Show Date Color Icon Color b No Icon ae Classic poo Other E Insert Icon from File 4 9 Blocks Blocks are the individual components that make up the content of the page Things located in the blocks include links bookmarks search boxes and the overall postings of
73. s fonts or page background separately Text Link Visited H The corresponding SEU 77 September 17th 20081 Author 4 Suggest buttons if can help you with this Lorem ipsum dolor sit amet link ectetuer Search adipiscing elit Quisque sed felis Aliquam sit amet felis Mauris semper velit semper laoreet dictum quam diam dictum urna nec placerat elit nisl one more link in quam Etiam augue pede molestie eget rhoncus at convallis ut eros g C t Aliquam pharetra Nulla in tellus eget odio sagittis blandit Maecenas at nisl EN Nullam lorem mi eleifend a fringilla vel semper at ligula Mauris eu wisi Ut r ante dui aliquet nec conque non accumsan sitamet lectus Mauris et mauris Lorem ipsum dolor In most cases nearly everything you need to do can be started by clicking on the Suggest Design button This creates a random design that you can work on or you can click it again to see another suggested design artisteer com page 13 14 Artisteer Web Design Revolution 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 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 That is not all When using Artis
74. screen click the Browse button which will prompt you to find and select the zip file that you created earlier Next click the Install Skin Package link To install the menu module go to Module Definitions Host gt Module Definitions and select Install New Module You will then be prompted to find and select the ArtMenu zip on your computer Finally click the Install New Module link Tips and tricks AIN a A Installing DotNetNuke Skins and Containers Login to your DotNetNuke website as an Administrator Go to Admin gt Skins Host gt Skins Select the Upload Skin option Browse for the exported skin file lt ExportedSkinName gt zip then click the Install Skin Package link Go to the Page Settings in the Advanced Settings section please select Page Skin lt ExportedSkinName page gt Click the Update link Installing Menu Module Login to your DotNetNuke Administration Go to Host gt Module Definition Select the Install New Module option Browse for the ArtMenuSO zip file and then click the Install New Module link Utilizing Menus Use the following code to display menu dnn ARTMENU ID ArtMenu1 runat server gt AI Installing Skins in DotNetNuke 5 0 Login to your DotNetNuke Administration Host Go to Extensions gt Install Extension Wizard Browse to the skin file lt ExportedSkinName gt zip on your local drive artisteer com page 38 39 Artisteer W
75. teer Standard Edition if you can t find the option you want in a specific list then click on More to get full customization capabilities Here is an example of how this works using the Sheet tab l E be D Undo M Redo Export 7 Untitled Artisteer 2 Standard Edition BD X auo SE Ideas Colors amp Fo Layout Backgrounc Sheet Header Menu Artides Blocs Buttons Footer En pH P m BJ WIidt Radius 2 Transparency gt Suggest Sheet e e Ideas She a B uu MN Note the detailed option adjustment dialogs are not available in Artisteer Home amp Academic Edition artisteer com page 14 15 Artisteer Web Design Revolution page Sheet Options Sheet Shadow C Width Top offset 15 Padding Radius Border width Vv Preview OK Cancel Preview Dialog Boxes Many options and settings are included in the dialog boxes These can be accessed by clicking the small arrow button to the right of the group caption Fil m orrimer LUCI Menu Bar Menu Bar d a The user interface for a typical dialog box includes the following parts e Dialog caption that indicates what kind of options are available in the dialog e The list of option groups located in the left pane of the dialog box Click on the group to expand the options e Options and settings available for the selected group e Preview checkbox to view the
76. the page j7 Untitled Artisteer 2 Background Sheet Header Menu Artides Beds El Background El Header 7 Styli tying la Content gt 3l 9 1 Block Styles The block style options allow you to choose how you want blocks to be contained Maybe you want the content underneath a block to fall within a border or any other number of design combinations artisteer com page 75 76 Artisteer Web Design Revolution page 9 1 1 Styling The styling option provides the ability to change the block spacing alter the distance between blocks or make the blocks more rounded by changing the radius value imm E 7 No Radius A 2pixels Clicking on the More buttons in the styling lists will open the Block Option dialog box where you can adjust layout options 2s S Background i Shadow Header g Content Properties Specifies the radius of block corners Supported values 0 to 40 pixels To Radius enable select any blocked style from the Block Styles list ls Specifies the spacing around blocks in pixels Supported values O to 40 Block spacing pixels artisteer com page 76 77 Artisteer Web Design Revolution page Specifies the vertical distance between the header and body sections of the Distance block To enable select any blocked style from the Block Styles list 9 1 2 Background If your template allows it
77. to options include the following effects that can be applied to the header foreground photo e Recolor e Glow e Flip The foreground photo effects can be manually adjusted on the fourth tab of the Header Options dialog box Header Options x EN General Foreground Photo zw Background m al Effects IL Glow size Foreground Photo E Glow opacity 30 Properties This specifies the glow of the foreground object To enable use a foreground photo for the header Foreground Photo Ii opecifies the size of the glow from the edges of the foreground object Glow Size Specifies the glow intensity Supported values 0 fully transparent invisible Es to 100 solid opaque glow Glow Opacity 6 4 Title This section provides the ability to change the headline text and the slogan text of your design artisteer com page 60 61 Artisteer Web Design Revolution page Headline Headline Ves Slogan text Tit You can also specify the necessary font options e Color o Font Family o Font Style e Font Size Font A Color Tn Font Family At Size L FS Clicking the Font Options button opens the Header Logo Name Slogan dialog box where you can adjust the font settings like e Font Family e Font Style e Font Size in pixels e Effects e Character Spacing artisteer com page 61 62 Artisteer Web Design Revolution page Header Log
78. u might prefer a sheet with rounded edges instead of square edges You may also want to move the sheet artisteer com page 50 51 Artisteer Web Design Revolution page down a bit from the top of the page put a shadow effect change the width of the borders the sheet s background transparency or the color of the sheet gu 15 le 9 undo O Redo Export Untitled Artiste Iw Ideas Colors amp Fonts Layout Background Sheet Header Menu Articles B am Width Radius Transparency A A WZ 6 TopOffset Border Qari color Suggest Sheet gt Men jus 15 Padding Shadow 4 Border Color Ideas Sheet B 5 1 Adjust Sheet Options The sheet options can be customized by clicking on the appropriate button in the option list For example if you want to change the Padding value click on the More Padding button Without Padding zi No Padding E Padding La 2 pixels When you open the Sheet Options dialog box you will be able to edit the design of the sheet You can play around with the sheet amp shadow parameters as well to achieve the desired result Sheet Options x Sheet Cj Width px Top offset px TE Padding px Radius px O Border width 4 ls E px F Transparency Hd artisteer com page 51 92 page Artisteer Web Design Revolution
79. xt in pixels Supported values O to Padding 50 pixels where O means No Padding m Use to increase or decrease the luminosity difference between the starting Gradient Contrast and ending color of the gradient Available if a Gradient is used FI Specifies the texture transparency The supported values are from O fully Texture Transparency opaque to 100 fully transparent invisible texture Available if a Texture is used Specifies the blend mode applied while mixing the background color and texture image ES Normal No effect is applied while mixing layers Texture Blend Mode Available if a Texture Overlay Two layers are blended by changing the opacity darkness and ESO lightness of the texture Soft Light Changes the colors in the footer image depending on the color artisteer com page 90 91 Artisteer Web Design Revolution page of the top layer artisteer com page 91 92 Artisteer Web Design Revolution page Troubleshooting NET Framework is not installed error Artisteer requires NET Framework 2 0 or higher to be installed on your computer Solution Microsoft NET Framework can be obtained and installed from htto www microsoft com downloads details aspx familyid 79BC3B77 E02C 4AD3 AACF A 633F 706BA5 amp displaylang en PHP Fatal error in WordPress PHP Fatal error Only variables can be passed by reference in wordpress wp includes query php on line 2548

Artisteer 2.0 User Manual

Contents

Download Pdf Manuals

Related Search

Related Contents