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

Vector freebie inspire quick header to customize social network template

Free vector art of butterfly makes good avatar and used for a custom header for Lupus Support Network on Socialgo.com free template. http://lupussurvivors.socialgo.com/

designables rectangular logo is poor avatar

As you can see the logo for designables does not make a good avatar. If your logo is a shape that fits nicely into a square it may make a good avatar.  longitudinal images do not. If I had used my original choices pinkturtle or 153fish, I would have created mascots like the @twitter birdie to be my avatar. No worry, as I was designing the logo I was already considering the avatar. The first initials of text logos are often used for abbreviated versions of the logo that can also serve as avatars. See @google, @wired. That's my plan too.  I made a perfectly square avatar. 48x48 pixels is the optimum size for twitter.