Book Image

Creating Templates with Artisteer

By : Jakub Sanecki
Book Image

Creating Templates with Artisteer

By: Jakub Sanecki

Overview of 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.
Table of Contents (12 chapters)

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.