Extract Photograph with Wispy Hair for Accurate Background Replacement

original image: teal background conflicted with mauve background of business card template. Challenges: wispy hair, left-side shadow, earring glare)

First extraction with mauve background. Note, it has a slightly lighter halo around image. I also increased saturation to enrichen the brown complexion of the original.

Used techniques from second video tutorial to darken the halo around image so that darker background could be used.

The final image has transparent backgound. I thought it looked best on the template which had a slightly gradient background though it appeared solid.

Brainstorming ENP logo: Playing with Inkscape Tiled Clones

I was looking for a plain vector black arrow when I came across this arrow collage. Still inspired by the two main visual concepts of "people" and "arrow" to represent a slogan "Moving Forward and Up Together" as well as the stock photo below I thought of doing a collage of people in the shape of an arrow. Remembering an Inkscape tutorial, I used Tiled Clones and perspective to attempt the idea. The original tiling of people had to much uneven "negative" space which I couldn't figure out how to resolve with the Tiled Clone settings so I ended up having to hand tweek the placement of each clone.

Although I think my final graphic is a decent design, I don't think it functions well as a logo. Its too complex to translate to an avatar and may not show up well printed, etc. But at least I finally had a chance to test Inkscape cloning technique. My "people arrow" might be great graphic elsewhere.

Translating ENP logo sketches in Inkscape

Brainstorming for ENP logo and slogan

After discussing the success of my online community for lupus survivors during my vocational rehabilitaion classes, I was asked to create a social networking website for the Employment Networking Program (ENP). This group currently meets weekly to network with fellow members who have gone through the TN Vocational Rehabilitation process and are now ready to get a job. The group has a VR facilitator that provides helpful exercises and presentations for job readiness. The ENP group is a program and has no formal mission statement, slogan or logo, so in addition to developing the SN website, I am working on a logo and slogan to use when I customize the graphics on Socialgo.com the free social networking platform I have chosen for them.

I had an idea of representing the members not only networking with each other but being a support to each other move forward as they get past their disabilities which may have been holding them back. The ENP group is an eclectic group of people of different backgrounds, but as the facilitator constantly reminds them they have one thing in common, "You all want to work!" From this I came up with "Moving Forward and Up Together" as the beginnings of a slogan. I began doodling figures inspired by key words," group" "people" "networking" "forward" "up" and "together" in mind. My final concept is an abstract group of people with an arrow representing movement forward and up.

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.

Error Fix | Adjust DIV dimensions for Padding

Can't figure out why dimensions aren't working out. Check your padding! adding padding adds to the overall dimensions of your DIV. For example you have set div width to 900 to match an image width of 900px, but the DIV comes out wider. It could because your set your padding: 30 (that 30 for all sides). This means that the left and right padding = 30 each. This adds 60px to the overall width of the DIV (360px).

Resolve by removing padding or add 60 px to the DIV width to adjust for the right and left padding.

Errot Fix | Zero Padding to Rid Unwanted Space

Working on subpages for the NS project, I decided to build my own html page with divs instead of a Photoshop generated table layout. But I couldn't get rid of this unwanted top space, even after setting the margins to zero. (didn't have this problem with table layout)

Padding the body at zero solved my problem. To be on safe side by default zero your margins & padding to avoid undesirable spaces that you didn't specify. The following code sets my layout to "zero" by getting rid of any unwanted spaces brought about by the browser. Note the auto margin in the outer div also centers the layout (see previous post). Need to start every new web page with this basic code to avoid headaches!

body {
padding: 0; 

margin: 0;
background-color: #D66D29;
}
#wrapper {
padding: 0;
margin: 0 auto;
width: 1200px;
}