Design WordPress Themes With Custom Background Images Using Artisteer 4 (How-to Video)

Artisteer 4 Themes With Custom Background Images

Welcome to this Artisteer 4 video lesson where I will be showing you how to design themes with custom background images.

Artisteer Overview

A quick word for those who don’t know what Artisteer is. Artisteer gives you the ability to produce your own professional, customised theme templates without the need to learn CSS, PHP, HTML, etc. It’s an Automated CMS, WYSIWIG design tool (Theme Generator) by Extensoft for creating Content Management System (CMS) themes and templates for WordPress, Blogger, Drupal, Joomla, and HTML

• It is the first web design automation product that instantly creates fantastic looking, unique CMS website templates and blog themes.

Artisteer is a unique template generator which enables almost anyone with a reasonable artistic talent, to design and create awesome blogs and cool CMS web templates in minutes without the need to learn Photoshop, Dreamweaver, CSS, PHP, HTML or other related technologies.

• For further details see my, Artisteer Review,
• or visit the official Artisteer web site.

Customising Backgrounds with Artisteer

To customise the background with Artisteer you select the Background Tab and then do one of two things.

1.        You can start by hitting the suggest background button to see a random selection of backgrounds from the background image library. This is great if you’re not sure what you really need and would like some ideas.

2.        Alternatively if you’ve already decided on your background style, you can select from the various options available or upload your own.

Artisteer has a very large selection of library images, glares, textures and many other elements that you can layer on top of background colours and images to give a unique, customised appeal and look.

Background Tab

The Background Tab manages the design of the area outside the active content of the web page (the Sheet). As you know, backgrounds are usually filled with colours, and often decorated with effects and images. In Artisteer this is all controlled from the Background Toolbar which consists of four groups:

• Ideas,
• Background,
• Texture or Image, and
• Light Effect.

Each group has an additional dialog box for advanced customization. These options provide a great deal of flexibility in designing your background.

Background Gallery

To begin, lets presume we don’t want to use a background image. What can be done with just a plain colour?

Fill Colour

Well, you can customise the background colour that will show if a background image is not displayed. You can apply theme colours, or custom colours, or pick a colour from any spot on the template and add it to your custom colour palette using the colour picker.

You can apply theme colours, custom colours, or pick up a colour from any spot on the template and add it to your custom colour palette using the colour picker.

• Your colour selection can then be enhanced with a gradient, texture or light effect.

Background Gradient

Gradient produces smooth colour transitions. The gallery offers different gradients arranged according to the position, direction and character of the colour transition. You can adjust the extent of the transition and the colour contrast using the Gradient Options ‘ selection.

Background Texture or Image Gallery

The Texture and Image Gallery offers different design patterns based on the style, material, theme and position of images and textures.

Texture refers to a special graphic that represents a type of design. In the gallery, there are many textures you can select from that are colourless’. These are displayed in different shades of blue. Colourless textures acquire the colour of the background fill colour. For example, if your background is Red, when the texture is applied, the design will also appear in Red with the same saturation as the original thumbnail in the gallery.

In the gallery, there are also several images and textures in colour; some are designs and some are picture images. The colour weight and saturation for coloured images and textures may be modified in the Page Background Options (using the custom value dialog icon).

From File…

Use this option to insert custom images or textures. Before pasting the image, specify the image position and Blend Mode.

Background Effects

Use this option to select different colour effects for the textured background. The effects you can apply depend on the texture or image.

If you are using a coloured image, you can apply a colour effect to change or offset the pattern of colours in the image: e.g. tint, recolor, greyscale

If you are using a non-coloured texture, you may or may not be able to change the colour effects. For example, if you select the palm trees’ in the Horizontal Floral group, you can invert the colours in the texture (you are not really inverting the colours, as much as changing which shade of colour should be assigned to each area). But if you choose the second horizontal bottom texture in the gallery, the effects’ option is disabled; you cannot invert colours for this texture.

With non-coloured textures, you can invert the colours, or you choose a two colour layout. E.g. if you select the first Flowers texture, you can choose what colour the flowers should be and what colour the background should be. The first colour is the fill’ colour for the background, and the second colour is the one you select with the Colour option from the effects’ menu.

Background Light Effect Gallery

The Light Effect Gallery offers various glares you can use to enhance your design. You can further customize the Light Effect by selecting Options’ (see Glare in the Page Background Options below). You can visualize this better if you select no gradient and texture for the background, use a lighter colour, and set the transparency to 0 for the background and glare.

From File

Use this to insert a custom light effect from a file. The light effect may also be an image, which may be useful if you want to overlay another image on the page background.

Scrolling

The Scrolling option determines whether a background image is fixed or scrolls with the rest of the page.

• Scroll – When you resize the browser window, or scroll the window, the Sheet and the background texture appear to move together.
• Fixed When you resize the browser window, or scroll the window, the Sheet appears to move over a fixed background.

Glare Transparency

The Transparency option, sets the glare transparency relative to the Page background. The supported values are 0% to 100% where 0% means “without transparency” and 100% means fully transparent.

Glare Scale

The Scale option, increases or reduces the size of the graphic effect.

A glare’ is a special type of texture pattern that emulates a lighting effect like the rays of the sun, or light reflected from a surface. Scale simply reduces the size of the graphic relative to the page background.

Glare Alignment

The Align option, aligns the glare effect relative to the page margins. Available options are Left, Center, and Right.

Glare Flip

The Flip option, creates a mirror reflection of the glare in vertical or horizontal directions.

Artisteer 4 Themes with Custom Background Images Conclusion

With Artisteer YOU immediately become a Web design expert, editing and slicing graphics, coding XHTML and CSS, and creating CMS templates and WordPress themes – all in minutes, without expensive software like Photoshop or Dreamweaver, and with little or no technical training required.

Use Artisteer to generate cool Web design ideas, adjust the generated designs using many included elements, backgrounds, photo objects and buttons, create professional, tableless, cross browser compatible and fully compliant HTML and CSS code, and export your design to create great looking Web and Blog templates. Creating great designs has never been easier!

• Visit the official Artisteer web site and download the software for free.

Well, I hope you found something useful and enjoyed this article, Artisteer 4 Themes With Custom Background Images.