About this book

Designing good looking, professional quality web templates or building your own website are rather complicated tasks, demanding a lot of technical and graphical expertise. Artisteer has changed this situation, enabling you to do it by yourself, without the need to learn skills such as HTML, web-programming languages, or drawing.

"Creating stunning Templates with Artisteer" is a practical, step-by-step guide that will show you how you can prepare an elegant, professional looking website, on your own, using features of Artisteer. It also describes the process of designing templates for various popular CMS platforms like WordPress or Joomla!, by giving you practical hints, showing how to install those templates and how to import the content into CMS.

"Creating stunning Templates with Artisteer" leads you through the process of designing a website, including all standard layout elements, from header to the footer, including menus and special boxes. You will learn how to prepare the templates, store them and export them in the form of ready-to-use HTML pages or packages that can be installed in various CMS platforms such as WordPress, Joomla!, Drupal, or DotNetNuke. The last part of the book shows you some tips and tricks that allow you to extend standard themes generated by Artisteer for enriching the website with image gallery, combining two menus, and more.

You will learn how to create a professional quality website or CMS template on your own, with the use of Artisteer with minimal technical difficulties.

Publication date:
March 2013
Publisher
Packt
Pages
170
ISBN
9781849699419

 

Chapter 1. Meet the Artisteer

In this book, you will see that you are able to design and prepare a professional-quality website template all alone, without anybody's help. You don't need to know how to draw or how to code. You don't need to worry about HTML, CSS, PHP, and all that complicated stuff. All you need is your copy of Artisteer.

You may ask, "What is Artisteer?"

 

What is Artisteer


Artisteer is an Automated Web Designer. What does it mean? In simple words, it's an application that lets you prepare great websites, even if you don't know anything about drawing, programming, web technology, and all that stuff. With Artisteer, you can design your website, fill it with content, and in the end, generate the ready-to-use HTML/CSS files that you can upload to your web server (in fact, this can also be done in Artisteer). You can also automatically generate any layout in the form of a template dedicated to one of several well-known CMS systems, such as Joomla!, Drupal, WordPress, or DotNetNuke. The design process looks totally different in comparison to the traditional way in which it's usually done. While you still have a lot of control and can decide many aspects of your design, the drawing process is done automatically and doesn't demand any graphic skills from you, except a good eye for what looks good on a page. And it's fast. Indeed very, very fast.

Artisteer was the first application of its kind in the market and still remains one of the best tools in this category.

 

Artisteer versus other software tools


Because Artisteer is a new kind of tool, it is hard to give a proper definition of what it is. There are a lot of easier ways to say what Artisteer is not. This will allow us to avoid any confusion about what it should be compared with. If we consider the typical process of building a website, it usually consists of several stages as follows:

  1. Firstly, a designer prepares a design. He usually works with a graphics editor.

  2. When the design is ready, it's analyzed in detail to qualify what can be achieved with HTML/CSS, and what has to stay as pictures. Then the whole layout is sliced into small pictures.

  3. A web developer prepares the layout in the HTML language and places every single picture into its proper position with the help of CSS. To illustrate the look of the site and to be able to choose the appropriate typography, the places for content are usually filled with some dummy text (for example, "Lorem ipsum dolor sit amet…). He does this usually with a code editor.

  4. The dummy text gets replaced with the target content. This task is usually done with the help of a WYSIWYG editor. At the end of this stage, we have a complete static website.

  5. If the website should contain some more sophisticated elements, such as photo galleries, fancy tooltips, movies, forms, and so on, or if it should be transformed into a template for a CMS, an additional code has to be written. This is the job of a programmer, who writes the code in a code editor using a client-side or server-side language (according to what should be achieved).

This allocation of tasks is of course quite hypothetical, and it may vary in particular teams and companies, but the goal was to show you the flow of the overall process. Sometimes the entire process is done by a single person, but in the case of bigger projects, it's not uncommon that every stage is realized by a group of people. Therefore, we're talking about a group of people (a team of various specialists) using different tools, such as graphics editors, WYSIWYG HTML editors, code editors, and so on.

  • Artisteer is not a graphics editor. In a graphics editor, you must design everything by hand, while in Artisteer all the elements (for example, header, menu, and so on) are generated automatically, according to the parameters you set via the program's interface. Graphic editors offer sophisticated tools, which Artisteer doesn't contain, to process pictures and photos. In a graphics editor you can create any graphic, while in Artisteer the only thing you can design is a website.

  • Artisteer is not a WYSIWYG editor. In a What You See Is What You Get (WYSIWYG) editor, you can type the words and insert the graphic elements into a website in a similar way as you would use a word processor (for example, MS Word) and the application automatically transforms everything into an HTML code. The layout elements in Artisteer are not just graphics, they are highly interactive and you have a lot of control over them. You can resize them, change the color, border, placement, and almost any other aspect of their look and feel. Your actions are not transformed into HTML immediately. You work with a binary Artisteer project (.artx files), and only when you press the Export button, the layout is exported. What it means is that all the layout is processed in one go and the HTML/CSS/JavaScript/PHP code is generated. But it's also true, that the way of working with Artisteer is practically WYSIWYG—you don't see any code, but the final design.

  • Artisteer is not a code editor. You can press the Show the code button and take a look at the HTML file that will be generated (and even change it), but this is not the native way you will work with this application. The native way is "point and click". In a code editor you write the code and preview the results. In Artisteer you modify the results and preview the generated code.

  • Artisteer is also not a collection of predesigned layouts, as many people seem to think. There is no upper limit on the unique layouts that can be created, because the answer is unlimited. It's true that the program contains a limited number of graphics and predefined elements, for example, menu. But the possibility of inserting your own images and determining almost any aspect of the elements (size, colors, fonts, and so on) suggests that you are a real designer, and not just someone who selects a template from the predefined options.

The tools that are most similar to Artisteer are other web builder applications. The difference is in what you can change and set up. As I mentioned earlier, you can change almost everything in Artisteer.

 

Who can use Artisteer


So who is Artisteer dedicated to? The potential audience of this program is very large. I can't be sure, but I feel that the intention of Artisteer's creators was to create a tool that allows the nongraphic and nontechnician people to create complete and great-looking websites. This would place Artisteer as a tool for hobbyists and enthusiasts, but the scope of users is much larger. Let's consider this problem from several different points of view.

Hobbyists

A hobbyist is somebody who wants to have a website because of his/her private passion. It's not his/her job, it's not his/her business, he/she won't gain any money on it. It may be a private blog on Blogger or WordPress, or just a simple family website, often based on the cheapest hosting service possible. For such a person, hiring a professional web development company or freelancer is usually not an option because of the cost. Usually, the only available option is to try to prepare the page on his/her own (the results will be adequate to his/her skills), or to buy a ready-made template (accepting the fact that there are a lot of different websites that look the same). Artisteer gives such people a third option: buy the program and prepare a unique and good-looking site all alone. The cost will be less than the usual price for a ready-made, standard layout on the market.

Designers

A designer is an artistically talented person who can use the graphics editors and create good-looking designs for web pages. In a team, a designer usually does the first stage of work, creating an overall concept of how the site will look, and preparing the graphics. While a designer is good at drawing, he/she can't code. To create a website a designer needs the help of a web developer. But with Artisteer, he/she can design the template and enrich it with his/her own custom graphic elements, which he/she can prepare. He/she can even enter the content and transfer this all into a CMS skin, offering the end user a complete solution.

Web developers and programmers

The frontier that divides web developers and programmers is often very thin, and various companies use different names for the same jobs. In this book, we assume that a web developer is someone with the skills for creating HTML/CSS code. Additionally, he or she often has good knowledge of administrating the CMSs, can install and configure various extensions, and is able to prepare the whole website, including stylesheet modifications, as there's no requirement of individual programming. The programmers are usually "next-level web developers", with programming skills. Usually, they code the core of the CMS systems or its additional functionality (create extensions). In short, we can assume that a web developer is someone who builds websites using the things that a programmer codes.

Web developers and programmers are able to build the whole website on their own, if not for one problem—they can't draw. They may be great technicians, but not graphics designers, and even the most technically advanced site without graphics does not impress anybody. That's why they often use ready-made templates as a basis for further work. The problem arises when there is a need to modify not the functionality, but the look of the site. In that case they have to cooperate with the designers.

Designers are the people who have an artistic taste. They can assess what looks good and what doesn't, even if they couldn't draw it on their own. Artisteer offers them the possibility to design a template independently, by determining the look of the site and its various elements, by changing their parameters such as colors, position, size, and so on. As you will see later, working with Artisteer resembles a situation wherein the designer is sitting next to you, listening to your suggestions, making the changes on the fly, and presenting the results immediately.

Web development companies

One of the main reasons that people work together is that nobody is perfect, nobody possesses all the talent. It would seem that for an individual, Artisteer may be a good option, because it allows him to avoid cooperation (which can be costly) with other specialists and to create the whole project alone. But in case of a team consisting of people with different complementary skills, there's no need to use such a tool at all. Based on my personal experience, I disagree with such a thought, and I can quote several arguments to support my words as follows:

  • The main cost factors of any work or project is always the time and the skills required for the job to be done. Designing and programming are very time-consuming tasks, and any automation saves time and money.

  • One of the biggest and most frustrating things in the web-design business is that your customer usually won't pay for something that he or she hasn't seen before. With Artisteer, the first stage of concept can really be done very fast.

The previously discussed examples of why Artisteer can be useful for various groups of people doesn't mean that everything can be done with Artisteer, of course. For example, you can't add any logic to the site, as this would demand a programming work. Similarly with the graphics, even the best automated generator won't replace the real artist. Like with every other thing, the custom and handmade products are the best, and websites are not an exception to this. For example, cars. Do you agree that a representative, handmade limousine, or a sports car is better than a popular compact from serial production? You probably do, but do you have a handmade sports car? Millions of people everyday drive the cheap compacts to commute, and they are pretty happy with it. Price is the factor. The same is with websites.

 

Your first template in 10 minutes


Ok, enough of just talking. Let's see Artisteer in action. Like in most programming books, where the first exercise is displaying the "Hello World!" text, we are going to create our first "Hello World!" template. So let's begin.

The program comes in two editions: Home & Academic and Standard, which differ in functionality. The Home & Academic edition is a truncated version of the Standard edition. In this book we work with the Standard edition.

You can download the latest version from the producer's website under the address http://www.artisteer.com/?p=downloads. There is one installer for both the versions and according to the license number you have, the Standard or Home & Academic edition will be activated. The same installer can also be used to install the trial version that allows you to know the program and make the decision if you want to buy it or not.

The trial version has no time limit for usage or feature limitations. You may use it for as long as you wish and play with all functionalities. The difference between the trial and full versions is that the trial version doesn't allow you to save a project, and the exported templates show the Trial watermark.

The installation process is fully automated, and if you accept the license terms and don't need to install the application in a specific location, all you have to do is just click on the Next button until the process is finished.

To transform the trial version into the full version, the application needs to be activated. This process requires an Internet connection. To activate, click on the Activate button shown on the welcome screen (you can also choose the File | Activation option from the menu). You will go to the Artisteer Activation window, where you should enter your license key into the License Key: field", as shown in the following screenshot:

Activation window

After you have entered your license key, click on the Activate button. After a few seconds, your copy of Artisteer will be fully activated.

Creating a new project

After you start the program, the first screen you will see is a window titled New Project. Here you can decide whether you want to open a previously saved project, or start a new one. The main part of this window consists of three rows. In the first row you can filter among the available, pre-made templates (if you want to start by modifying one of them). The pre-made templates are presented in the third row, according to which category and sorting rule you choose.

The second row always contains only one icon. Click on it when you want to start with a Blank template and style everything from scratch.

In the column to the right-hand side of the window, there is a list of recently opened projects, as in the following screenshot:

The startup window in Artisteer

You may say, "Wait a minute! You have said that in Artisteer I can design not only static websites, but also templates for various CMSs. Where can I set up what exactly I'm going to do?" Yes, you are right. What's more, in the previous versions of Artisteer, there was an additional field in the startup window where you could set it up. But with the current version, you don't have such an option. It's not a restriction of functionality, but rather a change in the philosophy of working with the application. You are just designing, no matter which platform you will choose later. That's because you choose the platform at the end, not at the beginning. It also highlights the fact that Artisteer enables you to focus on the design, and not the platform that you choose. Think of design as something that is platform independent.

Because we want to start with a blank template, let's click on the solitary icon in the second row. Artisteer will load its default data. In the following steps we are going to turn it into our custom layout.

Note

As you can see, the Blank template is not really empty. It contains some basic elements and some example content. However, this is the most initial state while working with Artisteer, used when you are going to design a template from scratch.

The program interface

What you see in the next screenshot is Artisteer's default interface. If you're familiar with modern applications, you will feel right at home. The main menu is in the form of a ribbon (introduced in Microsoft Office 2007), and the main options, such as Edit, Colors & Fonts, Layout, Content, Background, Sheet, Header, Menu, Blocks, Vertical Menu, Controls, and Footer correspond to the main stages while designing a layout (we will talk about those things in detail in the next chapter). The first option, called Home, contains the options that affect the whole site in general.

Are you a little bit confused about how to start? Don't worry! Before we use the more advanced options, we will start with a very simple and intuitive tool: the Suggest Mode function.

Program interface

The Suggestion tool

Suggest Mode is a function that suggests a look of the element you are currently working on. Because the Home tab refers to the scope of the whole project, using this function at this level suggests the whole design with all the dependent elements. Let's click on the icon. It's the yellow bulb, first on the left, with the Suggest Design label.

The whole design has changed. Amazing, isn't it? It's not just switching to the next available template from a collection. When you clicked on the icon, Artisteer generated a whole new layout, consisting of randomly generated elements. What you see is unique. If you don't believe it, you can very easily test it on your own. Just restart the program and try to do it once again. You will probably never see exactly the same layout twice.

Click over and over on the Suggest Design icon, until you really like what you see.

Note

What's interesting is that although a new proposal is generated every time randomly, the Undo function works correctly. It seems that the full history of generated layouts is stored as long as the program runs.

Previewing the project

At any time, you can see the live preview of your project in the browser. To get it, perform the following steps:

  1. Click on the File menu (above the ribbon).

  2. Choose the Preview In Browser function. A list of browsers installed in your system will expand.

  3. Choose the browser you want to see your project in.

    Choosing a browser for preview

After a while the selected browser will open, showing your project in its current state. Look at the address bar. You will notice that what you see is a real HTML file that was generated by the program (in your system's temporary directory). It's important because you can be sure that you see exactly the same file that will be generated while exporting the project.

Initial customizations

If you are satisfied with the project, double-click on the Enter Site Title text (sometimes it can also be Best Idea or something else, but it's always the biggest text in the header). You will see the blinking cursor, like in any word processor. Delete the text and type Hello World!. Do the same with the site slogan below the header, replacing the original text with My first Artisteer template. After you have finished typing, just click on any other element to apply the changes.

On the left-hand side of the screen you can see a panel named the Pages section. That is where you define the number and titles of pages your entire site contains. Please note that the content of this panel is strictly connected with the menus in your project. By default, every project has two menus—a horizontal and a vertical one. Both the menus are pretty interactive even while designing. For example, if you move your mouse cursor over the first position of the horizontal menu, it will expand, showing all containing subpositions. The vertical menu behaves similarly, but you must click on the position to expand it.

When you click on the menu item, the corresponding page in the Pages section on the left panel will be selected. The panel presents all the pages in the form of a tree. You can click on the little triangle on the left of the Home page to expand its child elements. You can observe that at the beginning, Artisteer creates both the menus with two positions in them, and the first position contains tree subpositions.

Pages are presented in the form of a tree, showing the structure of the project

A small website usually has only one menu—vertical or horizontal. If there's a need to use two (or more) menus, the first one is usually the main menu, and the second acts as its subordinate, displaying options on the lower levels. In our first project we don't need two menus, so we will preserve only the horizontal menu.

Let's change the titles of the menu's positions and the titles of the subpages of the site.

In the left panel, do the following:

  1. The name of the first page, Home, is good. We will leave it unchanged.

  2. Expand all the child elements of Home by clicking on the little triangle on the left.

  3. Right-click on the Subpage 1 item, and from the content menu choose Rename. The label will be selected and you can now delete the text and type. Type About Me and press Enter. Right-click on Subpage 2 and rename it as Contact, as described above.

  4. Right-click on Subpage 3, and from content menu choose Delete. On the confirmation dialog choose Yes.

  5. Rename Blog as My Blog.

The structure of your project should now be as shown in the following screenshot:

Structure of our project after changes

The structure of menus has also changed according to the changes we made. The horizontal menu should look like the following screenshot:

Horizontal menu immediately presents the current structure of the page

Now, click on the Vertical Menu group on the ribbon and click on Position. A list with the possible positions, where the vertical menu can be displayed, will expand. The vertical menu is displayed as the filled square. Let's choose the first option called No Block. This option does not display the vertical menu at all:

We set the vertical menu to not be displayed

Ok, we have finished our first design. It didn't take more than 10 minutes, did it? If so, try to do it once again. When you know what you're doing, I'm sure you can do it this time even more quickly.

Saving the project

You should archive every project (since you know that an Artisteer project not only contains a design, but also the content, we should call it a project rather than just a template) you have made. This simple principle may sound trivial, but there are many reasons to follow it, as follows:

  • Whether you do the project for yourself or someone else, sooner or later there'll be a need to modify it

  • You or your customer can make the decision of changing the CMS platform (but not the design)

  • Your server may break, or be attacked

In all of the discussed situations, it will be suitable to have a copy of your work to modify or restore the website. The simplest (and I think the best) way to achieve this goal is to save the project in the native Artisteer binary format. That's right. Although Artisteer generates the templates as a set of HTML/CSS/JavaScript/PHP files (or one ZIP archive), it also has its own native binary file with the .artx extension. Those files contain all the components of your project design and its content.

Note

You may think of it as an analogy to writing a document in MS Word. The resulting form of a document is the printed sheets of paper, but you can save and archive your document in the form of a MS Word .docx file. Then you can load your .docx file into Word at any time, modify it, and print it once again. Printed sheets of paper are rather hard to change—it's possible only by hand, with a pencil. The same situation is with Artisteer and the exported web pages. You can open an .artx file at any time, make some changes, and export the template once again, but changing the exported files is possible only with manual coding. There is no way to reverse the export process and import the exported template back into Artisteer. It is also not possible to take, for example, a template from drupal.org and import it into Artisteer for editing.

To save your project, click on the icon on the shortcuts menu on the ribbon, or expand the File menu and choose the Save or Save As… option. Then type the name of your project, set the target location of the file (the default saving path is C:\users\YourUser\Documents\Artisteer Templates), and click on Save.

Note that Artisteer shows a list of the recent projects on startup; so the next time you start Artisteer, you will see your project on the list.

As I mentioned earlier, if you choose to store your projects in the form of HTML files, you can't open and edit the project with Artisteer anymore, and you'll have to code all the possible modifications manually. Even if you have a good understanding of how to do it, you can be sure that manual coding takes a lot more effort and time than working with Artisteer. There is also one more reason in favor of choosing the native files for your archive. The .artx files are independent of the CMS platforms. Let's say you run your site with WordPress and want to port it into Joomla! (or vice versa). No problem, you just open the .artx file and export it once again, choosing Joomla! as the target. If you had only the exported template files, to do such a migration, you would need to recode the whole template. Of course, here we skip the situation that you work on a more complicated project, in which Artisteer is used only as a middle tool, and the exported template undergoes further modifications to add some additional functionality. But in such cases, I'm sure you will decide to archive everything possible, for example, .artx files, source graphic files, read template, and so on.

Exporting the template

Now that we have designed and saved our project, it's time for exporting. To export the project, click on the Export icon on the shortcuts area of the ribbon, or choose File | Export | Website Template from the menu. We are going to export the project as a Website Template form. What it means is that this will be a static and normal website, not powered with any CMS system.

Exporting a project

In the window that appears as shown in the following screenshot, we have to set some parameters:

In the Export window, you set up export parameters

  • Template: This is a field you can change to the desired type of exported template (CMS system). We leave it as it is, with Website Template.

  • Export to: This is a field where you can determine if you want to export it to Local (as files on your hard drive) or FTP (transfer it directly into your web server). We want to export it as Local.

  • Folder Name: This is the name of the folder that will be created, and in which all the template files will be saved. This name cannot contain spaces and characters that are forbidden when naming a folder (for example, \, /, ?, and so on). Let's delete the default value (Untitled) and type myFirstTemplate.

    Note

    Although Windows doesn't recognize small and big letters, Linux does, and your web server is probably powered by Linux. While naming the folder, be careful how you type its name.

  • Path: This is the navigation path to the created folder. Click the browse icon and choose your desktop.

    Below, there are two additional options:

    • ZIP archive: If you check this checkbox, the template won't be saved in a new folder, but as a ZIP archive, with the name you typed in the Folder Name field. This option should be checked for most CMSs. Because we are not exporting to any CMS for now, we leave this option unchecked.

    • Include ARTX Project: If this option is checked, the binary Artisteer project file is saved among the other template files. I suggest that you leave it unchecked, as we have already saved our project.

    Note

    Most CMSs offer the functionality of installing templates in the form of ZIP archives that can be uploaded through its administrative panel. If you export for a CMS, you will probably check this option.

Removing the Footnote

Before we click on the Export button, we navigate to Options (click on that button). By default, Artisteer inserts a note in the footer, informing that this template was created with Artisteer. Since this is a clever marketing move from Extensoft (the company that produces Artisteer), in most cases you will not want to include such information.

In the Options window, click on the last position on the left-hand side (Footnote) and uncheck both the Include a backward link to the Author and Include backward links to the CMS and the Artisteer options as shown in the following screenshot:

Remove the note about Artisteer,that is, Created with Artisteer, from the footer

Click on OK to return to the previous window, and click on Export to export the template. After a while, the process will be finished and you will find a new folder on your desktop: myFirstTemplate.

Congratulations! You have just designed, saved, and exported your first template in Artisteer. Open this folder and double-click on the index.html file. After a while, you'll see your site in your default browser.

 

Summary


In this chapter, you have learned what kind of tool Artisteer is, what is its place among other software tools, and how it can be useful for different groups of users. You now know how to create new projects, modify them using the Suggestion tool, and export them as working HTML websites.

You also know how to remove the Created with Artisteer note from the footer and how to save the project in the native Artisteer's file, for further modifications and backup purposes.

Now, you are ready to know the details of how to design a template with Artisteer.

About the Author

  • Jakub Sanecki

    Jakub Sanecki is an experienced web developer and programmer, with over 11 years of experience. He was born in 1977 in Poland. In 2001, right before graduation (he graduated in company management) he founded Fregata—a company where he works until today, and took up his true passion, information technology. Starting with providing services related to a popular ERP system, the company evolved in the direction of programming services and custom software development. With the increasing popularity of the Internet, it concentrated on web applications' and websites' development. Author of many web and desktop applications, Jakub works as an independent IT consultant and freelancer, realizing projects of various size and complexity, for companies of various sizes. He also provides training courses related to IT and web technologies and the techniques to use them in the company environment. For some years he worked as a university teacher, teaching web and desktop programming. Fregata is an authorized reseller of Extensoft. You can visit www.szablonik.net, as it provides support and additional information about this software tool. Privately, a husband and father of two children, Jakub lives with his family in Sosnowiec (in Poland), spending little moments of free time playing piano or reading books.

    Browse publications by this author
Creating Templates with Artisteer
Unlock this book and the full library FREE for 7 days
Start now