Natural Solutions: Designing And Generating Favicon

Created a 256 pixel square image for Natural Solutions for various iconic uses. The first purpose I had in mind was the website's favicon. The flowing hair does not show up against the background colors in the original icon when sized down to 16 pixels. So I created another favicon with a transparent background because the flowing hair is the more important visual to my client. AS I have already encountered, the flowing tresses just do not lend themselves to square layouts. Its chose to clip them rather than reduce the overall size to squeeze into a square. The original can be use as a social networking avatar.

NOTE: Favicon have to be 16 pixel square image in the .ico format. The original image may be created larger then scaled down by an online favicon generator; but original size must be a multiple of 16. I chose 256 as a manageable size to design in photoshop. Watch this TutVid for complete instruction on creation and code placement in web pages.

Natural Solutions: Detailing the Welcome Page

Although the client was satisfied with the previous design solution, I was not. I moved the owners quote from the header to the body where its more readible. I added some rounded corners to feature text and images on the welcome page. In addition, I added some standard buttons to link to sub pages. A "continue" button will link welcome text to the About Us page. Each featured product has a "details" button to link to its section on the Products page. I colorized some gray-scale social networking icons to match. I hope I won't regret when I begin to slice & code this. live website

Natural Solutions: Final Design Solution

After feeling a bit more confident with the pen tool I added some waves to the header background, reminiscent of the original artwork. Some subtle drop shading completes the artsy textured look and feel I was after.

Natural Solutions: Design Solution with product spotlight

Working on body now that header is about complete. After reviewing the clients product inventory list, I decided to feature each of the vendors top sellers on the home page. I offered to provide copy for the client who has been to busy to contribute much. I chose a quote by the owner from a local newspaper article to use for the slogan text. She was very pleased. I'll use the article and brochure text I was given for the Welcome / About Us pages. Still waiting on content for services and FAQs.

Natural Solutions: Second Design Solution with new graphics for artwork

As I explained in previous post, I have render a layered vector image almost exactly the same as the original artwork from which I could select and re-size any element of the drawing. I decided to select just the "flowing hair lady silhouette" and re-size it...


I also created a new version of the florets which has more detail and dimension than the original...



I put various sizes of the florets with the resized lady to recreate the artwork for the web page. I also intend to use the florets as a continuing motif in the design: as part decoration, navigaton & rollovers;


This is still a preliminary rendering of the second design solution. Once more of the content has been established, I will determine the layout and arrangement of flourishes. I may also add the background orange "waves" like the original once the other elements have been established. Must choose font and style the text for site name, etc. Plan to adjust the dimensions and fix the browser display dimensions to display the artwork-header to fit the entire browser window.

Natural Solutions improved artwork helps web design, but rectangular shape still has constraints.

My first design solution was limited by inability to resize the original 437 pixels with even more destruction of the image. In this mockup the image was transformed to 600 pixels wide.

The new clean image provides a decent quality for a design solution; how ever there are some constraints to the possible compositions due to its rectangular shape. If I break up the primary elements of the artwork, the lady from the stripes I will have more possibilities for design solutions.

Natural Solution's poor quality jpeg artwork to a clean vector image

Original image submitted by client has jpeg artifacts.


My first attempt at improvement was to smooth out the artifacts with photoshop brush.


I finally, decided to import the image into Inkscape and trace it creating a clean new layered SVG file that I can resize...


...as well as select the specific elements from its layers.

Natural Solutions initial layouts centered on artwork.

Two examples of comparable natural hair salon websites used for initial consultation with Natural Solutions owner lead to first mock ups to illustrate possible layouts incorporating clients artwork & color scheme. She was very pleased with my proposal and accepted my terms. I am drawing up the contract. I like using Inkscape in its simplicity to brainsorm preliminary layouts and design ideas. The vector tools are easy to manipulate and move around element than photoshop.