Adobe Photoshop CS6 – Background Eraser Tool

Remove a background with Photoshop Background Eraser Tool


Sometimes you take a photo that is great – minus the background.  The background just ruins your picture.  Photoshop’s Background Eraser Tool is awesome. Here is an image that I would like to do something with, but the background has to go.  Here are the steps I used to fix my awesome cowgirl’s photograph, while keeping her hair realistic:

  1. Cmd or Ctrl J to create a new layer.
  2. Go into the drop down for the Eraser Tool (E), and choose Background Eraser Tool.
  3. Up in the Options Bar, go into the brush presets and bring to brush hardness level to about 95% to soften it just a little.
  4. Choose the second option (out of three) to Once for the Sampling method.  The first one is for Continuous, the third is Background Swatch. The Sampling controls how often Photoshop looks at the color and decides what to erase.  Once makes the erasing color one time and will erase pixels that match it.
  5. The Limits menu default is always set to Contiguous, but we want to choose Discontiguous, which works the best to erase similar color through hair.
  6. Turn on Protect Foreground Color and then Option-click or Alt-click a strand of hair.
  7. Now start to erase the background by moving the mouse’s crosshairs to touch only the pixels you want to erase.  Use a really big brush for soft areas, where the background peeks through strands of hair, and a small brush for hard edges around clothes and shoes.  Of course, use the bracket keys to increase or decrease your brushes size.  Keep Sampling the foreground colors to ensure Photoshop knows what areas of the background you want to erase.
  8. Adjust the Tolerance levels in the Options Bar if you aren’t getting the proper results.  Lower it if it erasing too much.
  9. Release the mouse often.  Cmd or Ctrl Z will undo a spot.
  10. Once you get a clean outline around the subject, just use the Normal Eraser Tool to get rid of the rest of the image, or use a Selection Tool around the subject, Inverse it, and delete what is left of the image.
  11. Have fun adding your subject to another image.

I have always wanted to say, “this isn’t my first rodeo”, however, I have never been to a rodeo, and neither has my little cowgirl, but we can always pretend.

Credit for the background image goes to which I found on Flickr.



CSS3 – Design with Color Control and Opacity

CSS3 has the ability to control color opacity.

There are many degrees of translucence between total transparency and total opacity.  Web Designers often use opacity for visual appeal in conjunction with mouseover events for pop-up photo galleries as well as drop-down and flyout menus.

hex_colorsColor is a big part of a website, and you can color anything and everything using CSS.

There are 16 valid color names:

black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, and aqua.

Hex Codes

Virtually all modern screens can show at least 16.7 million colors, and CSS provides several ways to define all those colors.  The most common method of defining colors is to use a hex code.  This allows you to define a color using three pairs of hexadecimal numbers representing red, green and blue.  A zero indicates none of that color.  An ff indicates that color at full strength.  Example: #000000 is black – none of any color; #ffffff is full white – full strength of every color; #ff0000 is red – full strength, no other color; #00ff00 is green – no red, full strength green, no blue.

You can also use a three-digit shorthand syntax to express colors where each pair of digits has matching characters.  The browser actually doubles each of the digits to translate to six digits.  Example:  #000 is short for #000000; #0f0 is short for #00ff00.  The letters aren’t case-sensitive, so you can use uppercase or lowercase.

RGB Codes

rgbRGB is another way to express any of the 16.7 million colors.  Like hex, you define a color using a combination of red, green, and blue, but you use the 255 decimal range of 0 to 255, and you don’t need the # character.  The syntax used is rgb(red,green,blue).  You replace the red, green, and blue each with a whole number in the range of 0-255 to indicate the amount of that color.  Or, optionally, each number can be a percent in the range of 0% to 100%.  You can’t mix percent and numbers though.  Example:  rgb(0,0,0) is black, and it is the same as saying rgb(0%,0%,0%) or hex code #000!  There is no technical advantage or disadvantage to any particular method, it’s your call.

HSL Color

hslAnother way to express any of the 16.7 million colors available to you is Hue, Saturation, and Lightness (HSL) which is based on the concept of a hypothetical color cylinder.  The syntax for expressing color using HSL is hsl(hue, saturation, brightness).

Hue is the basic colors of the rainbow, and all the colors circle the hypothetical cylinder.  The cylinder is round, so 360 degrees around.  Red is at 0 degrees, green is at 120 degrees, blue is at 240 degrees.  At exactly 360 degrees, it goes back full circle to red.

Saturation increases as you move out from the center of the cylinder.  It is how much of the color there is.  Picture a bottle of perfectly red ink.  That would be 100% saturation, near the outside of the cylinder.  Take a drop of that ink and drop it into a glass of clear water.  It’s red, but it is at a low saturation, maybe 1%, near the inside of the cylinder.

Lightness is how much light is hitting the color.  No light is 0 (zero) and would render it black near the bottom of the cylinder.  Too much light (100) would render white at the top of that imaginary cylinder.

So looking at hsl(hue, saturation, brightness), you replace hue with hue expressed as a number indicating degrees around the cylinder with red at 0 (zero), green at 120, and blue at 240.  You can use any number in the range of 0 to 360.  You can express saturation as a number the range of 0% (no saturation) to 100% (full saturation).  Lightness, too, ranges from 0% (totally dark) to 100% (totally light) with 50% being the standard lighting.

It is important to keep in mind that hex, RGB, and HSL are just different ways of expressing the same 16.7 million colors.  There is no right way or better way.  It is up to you, the developer.

Translucent color expression is made using rgb() or hsl() coloring methods and using a fourth value for opacity.

Opacity, or transparency, and translucency all describe how much you can see through something.   The syntax for transparency is rgba(red, green, blue, opacity) or hsla(hue, saturation, lightness, opacity).  The “a” stands for alpha transparency.  The opacity value is new to CSS3 so some older browsers won’t handle them correctly.  You will want to set a background color as the default for the older browsers followed by the hsla() or rgba() values, including the opacity value.  The newer browsers will read the second value in this statement:

#wrapper {
background: white;
background: rgba(255,255,255,.8);

The opacity value is a number between .01 to .99 – the larger the number, the more opaque the color.  Zero is no opacity (transparent) and 1 is opaque.

Opacity property

The opacity property also has the syntax opacity: value;.  The value can be any number in the range of 0 to 1 where 0 is totally transparent and 1 is opaque.  This property is great because is applies to images and entire containing elements!

<td style=”opacity: .1″>
<image src=”images/felix.jpg” alt=”felix the cat” />

You can give each cell its own opacity value using an inline style.  You can have elements on a page that are completely invisible by using the syntax visibility: value; with either hidden or visible for the value.  It still takes up the space although it is not visible.

Use the syntax display: none; if you want to remove an element from the flow entirely. Use display: block; to make it visible.

By default, block elements are however tall they need to be to contain their content.

So, this has been a great lesson for me and I hope it helps someone else down the road.

Christina Descalzo
Kennesaw State University – HTML5 & CSS3 Certified

HTML5 and CSS3 – Background Image Positions

It’s All Relative

ansley-1-25The viewport you view pages on comes in many sizes.  The viewport is not the page.  You have to scroll inside the viewport to see the entire page.   Setting up the clear difference is going to help understand how background images work.

Top left, top right, bottom left, bottom right and center center can apply to a div, or to the viewport.  You position things relative to either.  These positions apply to the viewport, or to the page.

Here are the values for background-image positions:

background-image: url(…), url(…);                 /* two images if you’d like */
background-attachment: value;                     /* scroll OR fixed which centers it in the viewport*/
background-position:  horizontal vertical;     /* replace horizontal with left, center or right – the vertical is optional – default is center, or specify top, center or bottom */
background-repeat: repeat or no-repeat or repeat-y or repeat-x;   /* default is top left for no-repeat */
background-size: width height; (unit of measure); OR auto; (maintain aspect ratio); OR cover; (no distortion sizes the image to fill the height and width, some clipping of the image will occur to avoid distorting the image); OR contain; (will have gaps around it to preserve proportion)  /* this is the file’s properties set in a unit of measure.  */

CSS3 multiple background images 

body {        /* Four corner images and one background image repeated */
url (thefile/imagecorner1.png),
url (thefile/imagecorner2.png),
url (thefile/imagecorner3.png),
url (thefile/imagecorner4.png),
url (thefile/background.png);
/* Their positions followed by a comma */
top left,
top right,
bottom left,
bottom right,
top left;
/* How each repeats */
background-attachment: fixed;
background-color: #ff0072;
It all happens in the CSS….

The shorthand property – easy on the code, but doesn’t work in older browsers:

The syntax for the shorthand property to specify the different stylistic values on a single line using spaces to separate the values:

background: url (path) position / size repeat-style attachment color;   /* the syntax */

background: url (path) center / contain no-repeat fixed black;      /* an example */


1.  the default size of an image is the actual size of the image as defined by the dimension in the image file.
2.  Default tiling is set to repeat in all directions.
3.  If you don’t specify the background-attachment file or have no content yet (which means the page has no height), center will put it at the top of the viewport in the center.
4.  You position images relative to the page OR to the viewport.  Background-attachment: fixed; along with background-position: center and no-repeat will contain the image in the center of the viewport – even if the page is empty.
5.  Get the perfect image background when you say background-position: left top; when used with background-size: cover, and the image size you’d like (ie., 1024 x 729) set in pixels at 72  pixels per inch (dpi).  You can set your styling and positioning anyway you’d like.  You can also set the opacity for images and I have covered that in my article Design with Color Control and Opacity.

Play with the different positions – that is how you will get good at it.

Christina Descalzo
Web Design and Development

The future of design at IxDA Atlanta

The Future of Design

Future of Design

Future of Design

I had the pleasure of listening to experienced designers speak about their thoughts on the future of web design at an IxDA Atlanta meetup held at Georgia Tech Conference Center, showcasing local design thought leaders giving their take on what the future holds for the role of design in business and our daily lives. Each presenter was given five minutes to convey their design future to the crowd.

The speakers were representatives from interaction design, user experience, information architecture and industrial design. Diane DeSeta – User Experience Strategist; Sean Gerety – Senior Engineer – User Experience Integrator; Kevin Shankwiler – Assistant Professor in Industrial Design/Digital Fabrication Lab, Georgia Tech and Vice Chair, IDSA Atlanta; Wengert Klemens – Senior User Experience Architect, Turner Broadcasting; Adam Bloom – Entrepeneur and Software Product Marketer; Joseph Dickson – User Experience Consultant and Author; Chris Livaudais – Senior Industrial Designer and Chair IDSA Atlanta; Ralph Lord – Senior UX Practitioner; Terry Allen – Director, Marketing and Design and UX Consultant.

Understanding how design works and its impact on people will allow you to think outside the box, if you want. Innovation is born there, at the moment you start thinking about making something. We have at our disposal endless feedback information to be used to better the user experience.

The speakers all had 5 minutes to give their opinion about design and the future of design. They covered such topics as:

Understanding people, understand our users
Design for variability (not just displays)
Businesses are designed
Design applies to everything
Self-expressed, artisanship, DIY – ie, the Harlem Shake
Humanization of things
Big Data, Big Feedback
Convergence of Art and Science
Brain Science and Decisioning
“Do not fear mistakes – there are none”, Miles Davis
Design and gratitude
Interaction with computers
We are designing the future
Displays will be everywhere
Bio Printing – Scotland’s stem cell secret and the ability to replicate any cell
How long can we live?
Design for the elderly
What if life was designed so that no one had to work?

It was a quick talk with great insight from professional designers. I hope to see more of this type of get together which allows the experts to offer their thoughts and ideas about the future of web design.

Images on the Web

Every picture tells a story – or does it?

You might think that using a lot of images is great – I know I do, however, you need to add imagery in an accessible way so people with visual impairments still get the information.

People surfing on mobile devices might still have images turned off because of small screens and the cost of downloading data.

Great_Seal_of_the_United_States_(obverse).svgVisitors of your site might be blind or visually impaired to such a degree that they cannot see our images properly.

Other visitors might be from another culture and they don’t understand the icons you use.

Search engines only index text – they don’t analyze images (yet), which means that information stored in images cannot be found and indexed.

It is very important to choose images wisely and use them when appropriate and always offer a fallback for those who cannot see your images.  Navigation and menu issues can arise with images.

You have content images and background images.  Content images (<img> element) always get an alt tag and are relevant to the paragraph or other section.  If, however, an image is only being shown as eye candy, no alt tag is required, so alt=”” is appropriate.  CSS control offers many design options as well.

The alt attribute of image elements – your image fallback – may be necessary due to several reasons, such as the image not being available because it could not be found, loaded, or because a browser (or other user agent) does not support images.  Assistive technologies read web pages out loud to their users.  It is sometimes called “alt tag”, when it is actually an attribute of the <img> element.

Use the title attribute if you have a lot to say about an image which, if the user has mouse capabilities and the browser is capable, acts as a tooltip popup.

The longdesc attribute allows you to link to complex data like charts and graphs.  There is no visual clue that this attribute is there, but assistive technologies will let their users know there is an alternative available.

The are several image element attributes such as, width, height, src, md, units, align, alt, ismap, id, lang, and class.

HTML5 introduces the figcaption and summary elements.  Figcaption acts as the optional caption or legend for any content within its parent figure element.  A figcaption element must be the first or last child of the figure element.

The figure element is used to mark up any self-contained content that may be referenced from the main flow of a document but could also be removed from the primary content (for example, to an appendix) without affecting its flow.  This makes it suitable for various types of content raging from graphs and data tables to photographs and code blocks.  Example:

<p>This is one of the most interesting places on earth</p>
<audio src=”where-are-we-going.mp3″ controls></audio>
<figcaption><cite>Where are we going?</cite>by Jamie Lee Jones</figcaption>

The creation of the figcaption element is an important step forward for HTML5 because it reliably markups the caption for content that is best marked up as a figure.

The summary element represents a summary, caption, or legend for any content contained within its parent details element.  The summary element must be the first child of a details element and if there is no summary element present then the user agent should provide its own.  This is because the details element has a specific function – to markup additional information and allow the user to toggle the visibility of the additional information.  Although it is not specified in the spec, it is expected that the summary element will act as the control that toggles the open-closed status of the contents of the parent details elements.  Example:

<summary>Technical details</summary>
<dt>Bit rate:</dt><dd>190KB/s</dd>
<dt>File size:</dt><dd>78.9MB</dd>

The introduction of the summary element seems to secure the future of the details element and the new behavior for now.  When user agents begin to add support for the details element you won’t need JavaScript, or even CSS, to have expanding or collapsing sections in an HTML document.  When and how it is implemented is still being worked on.


Best bet?  Use different sized images.  Unfortunately, this comes with a slight hit on load but you use them dynamically with JavaScript.  You can have two images with different sizes and serve up the correct one for a specific device using Media Queries. It’s not the resolution that is important, it is the size of the image.

There are many tutorials out there that explain how to use Media Queries to target specific browsers and devices and apply special rules to them.  It is really painless.

Right now, most images on the web are served up as 72 pixels per inch (ppi), which is the standard.  Ppi is really only relevant to print.  An image sized at 200px x 200px will display the same regardless of resolution at the same dpi, but what does matter is width and height.  If you change an image 200px x 200px unconstrained except by it’s resolution, to say 96 from 72, the dpi would automatically increase and make the image larger.  I didn’t say better, I said larger.  This is why you need to know how to manipulate images for the web.  Always start big and work your way down.  Don’t go the other way when it comes to image sizes for the web.

We have been getting prepared for High Definition.  CSS3 renders user interface elements with borders, shadows much the same way vector graphics do.  They are completely resolution independent and will display crisp and smooth no matter how much you zoom into them.


Utilize web font icons.  @font-face CSS allows you to embed a custom font which has been specifically designed with simple pictographs in place of normal characters.  This allows you to have a arsenal of re-useable vector icons at your disposal on the web.


So, while I was researching this post, I learned that the way to go right now – if you care about how your images appear to all visitors, all the time, on every type of device, is to build a responsive site, and using media queries, serve up a higher res image via your stylesheets and media queries based on these situations, use proper HTML practices for captions and alternative text elements for your image elements & use vector icons via sprites for some navigation or menu items if your design allows for it.  Watch your load times and do everything you can to eliminate unnecessary file sizes.

I always say you have 3 seconds for your page to load. That’s it.  If it takes longer than that, there might be a defect in your design.

Gallagher, Nicolas. New HTML5 elements summary & figcaption, 2010
Heilmann, Christoper. Images in HTML, dev.opera 2012

Startup Georgia at Hypepotamus – Jermaine Dupri tells how So So Def got its start…..

Startup Rally 2013

One part startup exposition, one part summer internship fair, and one part launch of Startup Georgia – startup led, statewide initiative to raise the profile of Georgia startups as part of the national network Startup America Partnership.

Featuring – Jermaine Dupri, CEO of So So Def Recordings, Scott Case, co-founder & CTO of Priceline, and over 100 startups exhibiting.

What are the odds that a Georgia street/country kid would use college students from Emory University to start his company?  Although he started his tremendous success story by finding the best party thrower at Emory, he admits it was a lot of hard work, a lot of hit and miss.  The party thrower is now manager to many artists, including, Justin Bieber.

He spoke about his $200,000 website that had a lot of moving parts, but was virtually invisible in search engines.  He started a free blog and received more hits than his official website!  He enjoyed the ability to communicate with his fans, so his new venture, Global is his personal social networking site.  He is into tech now, and his new site is very nice – another one of his visions.

Jermaine Dupri is celebrating the 20th Anniversary of So So Def Recordings at the Fabulous Fox Theatre in Atlanta.  The All-Star Anniversary concert is on Saturday, February 23, 2013.  Tickets at

A number of soon-to-be well known entrepreneurs spoke about their vision.  Students met with startups from multiple sectors and industries to find out about summer internships.  Developers, computer science, designers, business students, and all majors are encouraged to explore the opportunities available to them right here in Atlanta.

Some of these ventures include:

startup-rally_0007_MrArlo startup-rally_0006_TripLingostartup-rally_0033_GoLocalstartup-rally_0028_Keep-Dreaminstartup-rally_0019_Pindrop

Check out the lineup of next generation companies blossoming in Atlanta at Hypepotamus Startup Rally.


11111-1-2When you convert your PNG files, your meta data and keywords are stored inside. The Portable Network Graphic format was created in 1995 when Unisys and CompuServe officially announced that programs using GIFs would require royalties because of the patent on the LZW compression method using GIF.

The best thing about PNG files for digital photographers is that they can be smaller in file size and preserve transparency.  PNG’s have proven to be the best for gradients. You can categorize and add keywords.  The danger is that there is a problem with the loss of your meta data when the image is opened with indifferent software. Your information can easily get lost.

Comparison to JPEG

JPEG (Joint Photographic Experts Group) format can produce a smaller file than PNG for photographic (and photo-like) images, since JPEG uses a lossy encoding method specifically designed for photographic image data, which is typically dominated by soft, low-contrast transitions, and an amount of noise or similar irregular structures. Using PNG instead of a high-quality JPEG for such images would result in a large increase in filesize with negligible gain in quality. By contrast, when storing images that contain text, line art, or graphics – images with sharp transitions and large areas of solid color – the PNG format can compress image data more than JPEG can, and without the noticeable visual artifacts which JPEG produces around high-contrast areas. Where an image contains both sharp transitions and photographic parts, a choice must be made between the two effects. JPEG does not support transparency.

Because JPEG uses lossy compression, it suffers from generation loss, where repeatedly encoding and decoding an image progressively loses information and degrades the image. Because PNG is lossless, it is a suitable format for storing images to be edited. While PNG is reasonably efficient when compressing photographic images, there are lossless compression formats designed specifically for photographic images, lossless JPEG 2000 and Adobe DNG (Digital negative) for example. However these formats are either not widely supported or proprietary. An image can be saved into JPEG format for distribution so that the single pass of JPEG encoding will not noticeably degrade the image.
The PNG specification does not include a standard for embedded Exif image data from sources such as digital cameras. TIFF, JPEG 2000, and DNG support EXIF data.
Early web browsers did not support PNG images; JPEG and GIF were the main image formats. JPEG was commonly used when exporting images containing gradients for web pages, because of GIF’s limited color depth. However, JPEG compression causes a gradient to blur slightly. A PNG file will reproduce a gradient as accurately as possible for a given bit depth, while keeping the file size small. PNG became the optimal choice for small gradient images as web browser support for the format improved.


JPEG-LS is a “near-lossless” image format far less widely known and supported than the other lossy JPEG format discussed above. It is directly comparable with PNG.  On the Waterloo Repertoire ColorSet, a standard set of test images (unrelated to the JPEG-LS conformance test set), JPEG-LS generally performs better than PNG, by 10–15%, but on some images, PNG performs substantially better, on the order of 50–75%.  Thus, if both of these formats are options and file size is an important criterion, they should both be considered, depending on the image.


Tagged Image File Format (TIFF) is a format that incorporates an extremely wide range of options. While this makes TIFF useful as a generic format for interchange between professional image editing applications, it makes adding support for it to applications a much bigger task and so it has little support in applications not concerned with image manipulation (such as web browsers). It also means that many applications can read only a subset of TIFF types, creating more potential user confusion.

There is a TIFF variant that uses the same compression algorithm as PNG uses, but it is not supported by many proprietary programs. TIFF also offers special-purpose lossless compression algorithms  which can compress bilevel images (e.g., faxes or black-and-white text) better than PNG’s compression algorithm.  I need to find out more about why we would use TIFF files and plan to find out in an upcoming class.


The PNG format is widely supported by graphics programs, including Adobe Photoshop Corel ‘s Photo-Paint and Paint Shop Pro, the GIMPGraphicConverterHelicon FilterInkscape,IrfanViewPixel image editorPaint.NET and Xara Photo & Graphic Designer and many others. Some programs bundled with popular operating systems which support PNG include Microsoft’s Paint and Apple’s iPhoto and Preview, with the GIMP also often being bundled with popular distributions.

Adobe Fireworks (formerly Macromedia) uses PNG as its native file format, allowing other image editors and preview utilities to view the flattened image. However, Fireworks by default also stores meta data for layers, animation, vector data, text and effects. Such files should not be distributed directly. Fireworks can instead export the image as an optimized PNG without the extra meta data for use on web pages, etc.

File size and optimization software

PNG file size can vary significantly depending on how it is encoded and compressed; this is discussed and a number of tips are given in PNG: The Definitive Guide.


Compared to GIF files, a PNG file with the same information (256 colors, no ancillary chunks/metadata), compressed by an effective compressor will normally be smaller than GIF. Depending on the file and the compressor, PNG may range from somewhat smaller (10%) to significantly smaller (50%) to somewhat larger (5%), but is rarely significantly larger for large images. This is attributed to the performance of PNG’s DEFLATE compared to GIF’s LZW, and because the added precompression layer of PNG’s predictive filters take account of the 2-dimensional image structure to further compress files; as filtered data encodes differences between pixels, they will tend to cluster closer to 0, rather than being spread across all possible values, and thus be more easily compressed by DEFLATE. However, some versions of Adobe Photoshop, CorelDRAW and MS Paint provide poor PNG compression, creating the impression that GIF is more efficient.

What is GIMP?

The (GNU Image Manipulation Program) is an image retouching and editing tool and is released under the GPLv3 license as free and open-source software. There are versions of GIMP tailored for most operating systems including Microsoft Windows, Mac OS X and Linux.
GIMP has tools used for image retouching and editing, free-form drawing, resizing, cropping, photo-montages, converting between different image formats, and more specialised tasks. Animated images such as GIF and MPEG files can be created using an animation plugin.
The developers and maintainers of GIMP have a product vision for GIMP to strive to be a high end free software graphics application for the editing and creation of original images, photos, icons, graphical elements of web pages and art for user interface elements.
GIMP’s fitness for use in professional environments is regularly reviewed; as such, GIMP is often cited as a possible replacement for Adobe Photoshop. The maintainers of GIMP state that GIMP seeks to fulfill GIMP’s product vision rather than seek to replicate the interface of Adobe Photoshop.
The user interface of GIMP is designed by a dedicated design and usability team. This team was formed after the developers of GIMP signed up to join the OpenUsability project. A user interface brainstorming group has since been created for GIMP, where users of GIMP can send in their suggestions as to how they think the GIMP user interface could be improved.

Sounds interesting, but I am a complete Photoshopper now, and can do just about anything from there.
I hope you learned something! I know I did….

Reference: Wikipedia – Image File Types