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.

Designables Web Site Uploaded

FINALLY! This week was spent finalizing a design I could live with. The site was designed & spliced in Photoshop, coded in Dreamweaver. Uploaded to directly to GoDaddy from Dreamweaver. It was my first time publishing from Dreamweaver. What a breeze! I want to give credit to the six revisions tutorial that inspired me.

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.

Removing artifacts from Client's compressed jpeg copy of vector art unsuccesful

New client's only graphic asset, currently being used for signage, business cards and flyers. Unfortunately, they don't have the vector original. So I am working around this compressed jpeg which they cut out some of the silhouette along with the text. I tried using Photoshop (filter>noise) to remove artifacts but it just doesn't help sharpen a jpeg copy of vector art.

Learn Photoshop - How to Remove JPEG Artifacts