I have worked with Artisteer almost since the program came out. It is the first “what you see is what you get” program that actually writes pretty decent code. Since I learned HTML and CSS from the beginning I understand how clean code helped a website in a number of ways. I have tried several of these programs and none of them is satisfactory code wise for me. When Artisteer came along and it was a dream come true.
As time has gone by and new features are added the program gets a little more complicated. I had been away from design for about a year and when I returned with version 4 it was necessary to tackle the learning curve.
Like anything else there are usually a number of ways to do something this is my step by step process.
I first decided what my header image would be. It was a line drawing that I colored myself in Photoshop. Also I chose my color palette from that image with the help of Color schemes generator 2. A little program I have used as an artist for many years now.
If you do not have an image to inspire your colors this is a helping tool that you can grab for FREE from http://www.wellstyled.com/tools/
There is a method to this madness for those of you who have not studied art.
There are colors that work with one another and those that simply do not … to get a perfect color combination you simply choose a color … enter the hex RGB into the little generator and it will kick out a whole bunch of perfect combinations that you can choose from.
Take your hex colors into photoshop and make yourself a color grid. Save it as a png and import it into your basic design. Now you have your own perfect color chart from which you can use the eyedrop tool or hex code to design your page. Here is my selection of colors image that I import into the basic design.
Open Artisteer and choose the basic design. You will have several pages already created for you. The key ones that show you design are Topography and Controls. These 2 pages will show you how all of the elements will be displayed in your design.
Look at them often to see if what you have chosen suits you … if not change it until you like what you have. Once these 2 pages are as you like them the colors, fonts and a number of other details are set throughout your design.
Next on your main page add your image to the main image layer. Now you have easy access to your own color palette.
Now we are ready to begin … in Artisteer we will be starting with the tabs at the top and go from left to right.
First choose the colors and fonts tab.
Here you can either choose colors from the grid you brought into the design or you can select the from image … from file option and the program will make color combinations that you can then select from. the color combinations the program sets up for you. Try them all if you like … once selected check out the Typography and Control pages to see what you will end up with … if there is one you like well your work is pretty much set for you color wise.
Choose any one of them (I am starting with the first) … a drop down will open and go to more colors and a bigger color selection is available. Now you can use your eye dropper tool (simply move the mouse off the picker and you will notice it turns into the dropper) select any of your colors. Notice in this image I selected my green color and up in the color picker it changed from blue to green and at the same time it changes your design.
Once you have selected each color then take a look at your Topography and Control pages to see if you like the colors you have selected. For this design I decided to use my blue color in square 1 and 3 and the wine color for the middle square.
This is what I have so far and Artisteer has done most of the heavy lifting code for me … BRAVO!
Yes there are tweaks to be done to make it perfect but I have now saved hours of HTML and CSS code writing that is right up to date.
Here is what I have so far.
The first image is the Topography page and the second is the Controls page.
Next I will choose my font set. It is a good idea to use a webfont … for FREE you can use google fonts from: http://www.google.com/webfonts
When you land on their page you can scroll forever … look at what you want for your headings and the body or content of your page. It is a good idea not to choose more than 3 webfonts or it is likely your pages will load slower.
I am going to create my own from google webfonts … I already know I want Great Vibes for my headers and Georgia for my body/content text.
Here is how its done.
After you click on the fonts sets and go down to Edit Font Set and click it. A little window opens that allows you to select whatever webfont you want.
When you have made your selections click the preview and it will show you how your pages will look.
When you are satisfied click ok and your whole website is pretty much set for colors and fonts.
You can now leave it as is or tweak it more. I like these colors so I am finished with colors and fonts.
End of this tutorial … to be continued in part 2.