Masking Hair with Photoshop

Clients and friends alike regularly ask me to help them superimpose the image of a person onto another background.

 

The first problem is hair and the opacity between the hairs. Adobe Photoshop offers a tool called the “magic wand”. While this tool can get you a quick idea of the composition, you will soon realize the selection is rarely perfect, even if you “feather” the selection to soften the edges.

 

This tutorial will get you terrific results using alpha channels that have been available in Photoshop since it’s earliest days.

 

Thanks to Ed Layne for putting this together for me.

 

Good luck and good imaging!

 

1. Select the channel with the highest contrast (usually the blue channel).
2. Choose the magic wand tool and select the lightest area of the background.
mask01

3. Turn on the quick mask.
4. Use the pen tool to remove excess parts of the background from the extracted image.
mask02

5. Turn off the quick mask and select the inverse of your original selection (command+shift+i).
6. Choose the marquee tool and remove the edges of the hair from your selection.
Tip: Hold down the option key as you select with your marquee tool to subtract from the selection, hold the shift key to add to the selection.
mask03

7. Make a work path of the current selection.
mask04

8. With the marquee tool, select the outer edges that were removed from your path.
9. Turn off the work path leaving only the marquee area selected.
mask05

10. Create a new alpha channel.
11. Reselect the highest contrast channel (usually the blue channel) and copy the marquee area.
12. Paste your selection into the new alpha channel.
mask06
13. Choose the burn tool and select shadows in the adjustment palette with an exposure less than 18%.
14. Using the burn tool make the hair as close to solid black as possible.
mask07

15. Invert your selection of this area (command+i) and deselect (command+d).
mask08

16. Turn your work path back on and fill with white.
17. Paint areas of face and hair that were not burned to white.
mask09

18. Load your alpha channel as a selection.
mask10

19. Select your RGB channel and extract your image.
mask11

20. Once your image is placed into your new image temporarily turn on the stroke in your adjustment layers palette to find and erase any ghost pixels.
mask12

Special Characters in HTML

 

© Copy Right ©
® Registered ®
™ Trade Mark &amp#8482;
№ Number №
¼ Quarter ¼
½ Half ½
¾ Three Quarters ¾
¿ Inverted Question Mark ¿
¡ Inverted Exclamation Mark ¡
& Ampersand &
¢ Cent 162;
€ Euro €
£ Pound £
| Pipe |
¦ Broken Pipe ¦
― Horizontal Bar ―
[ Left Bracket [
] Right Bracket ]
‘ Single Quote &amp#39;
• Bullet •
° Degree Sign °
○ Hollow Bullet ○
· Middle Dot ·
← Left Arrow ←
→ Right Arrow →
↑ Up Arrow ↑
↓ Down Arrow ↓
◄ Left Delta ◄
► Right Delta ►
▲ Up Delta ▲
« Left Angle Double Quote «
» Right Angle Double Quote »
‹ Left Angle Quote ‹
› Right Angle Quote ›
#62; Greater Than >
#60; Less Than <
☺ Smiley ☺
☻ Grey Smiley ☻
♠ Spade ♠
♣ Club ♣
♥ Heart ♥
♦ Diamond ♦
♪ Eighth Note ♪
♫ Beamed Eighth Note ♫
π pi π
∞ Infinity ∞
√ Square Root √
☼ Sun ☼
♀ Female ♀
♂ Male ♂
◊ Hollow Diamond ◊
† Cross †
Ω Omega Ω
⌂ House ⌂

CSS / HTML Cheat Sheet

CSS class vs. ID

The ID selector specifies a style for a unique element, defined with a “#”. Do not start an ID with a number!
The Class selector specifies a style for a group of elements, defined with a “.”

Disable links

pointer-events: none !important;
cursor: default !important;

Make an .htaccess file with these parameters to display the entire file name of content in a directory without using an index file

Options +Indexes
IndexOptions FancyIndexing FoldersFirst NameWidth=* DescriptionWidth=*

Basic text link

a:link {text-decoration: none; color: #000;}
a:visited {text-decoration: none; color: #000;}
a:hover {text-decoration: none; color: #777;}
a:active {text-decoration: none; color: #777;}

For an alternate link style

a.alt:link {text-decoration: none; color: #000; font-weight:bold;}
a.alt:visited {text-decoration: none; color: #000; font-weight:bold;}
a.alt:hover {text-decoration: none; color: #777; font-weight:bold;}
a.alt:active {text-decoration: none; color: #777; font-weight:bold;}
and the HTML is:
<a href=”yourlink.html” class=”alt”>link</a>

Mailto

<a href=”mailto:johndoe@website.com”>Contact John</a>

Inline Style

<div style=”margin-left:50px;”></div>
or add a style to any tag
<p style=”margin-left:50px;”></p>

Text Styling

font-size: 12px;
font-weight: bold;
text-decoration: none;
color: #000;
letter-spacing: 0px;
line-height: 0px;
text-transform:uppercase;
text-transform:capitalize;
text-transform:lowercase;

No Break Space

&nbsp;
or
<p>&nbsp;</p>

Horizontal Rule

hr {background:#000; width:100px; height: 1px;}

Centering can be frustrating! Put this in your HTML

<div align=”center”></div>

Span

<span class=“xxx”></span>

Text Shadow

rgba is: red (0-255), green (0-255), blue (0-255), alpha (0.0-1)
The 3 positions (shown as px) are: X axis for centering left and right, Y axis for centering top and bottom, and the amount of blur. You can use negative numbers for the position and even apply multiple shadows at different positions and opacity for effect!
text-shadow: 1px 1px .5px rgba(0, 0, 0, 0.5);

Box Shadows – Make sure you cover all of the browsers!

-moz-box-shadow: 3px 3px 4px #444;
-webkit-box-shadow: 3px 3px 4px #444;
box-shadow: 3px 3px 4px #444;
-ms-filter: “progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=’#444444′)”;
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=’#444444′);

Box Shadows OFF!

-moz-box-shadow: 0px 0px 0px #444 !important;
-webkit-box-shadow: 0px 0px 0px #444 !important;
box-shadow: 0px 0px 0px #444 !important;
-ms-filter: “progid:DXImageTransform.Microsoft.Shadow(Strength=0, Direction=135, Color=’#444444′)” !important;
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=0, Direction=135, Color=’#444444′) !important;

Leave yourself notes in CSS

/* Enclosing a reminder about your CSS code within a /* */ comment is a great idea */

Leave yourself notes in HTML

<!– Enclosing a reminder about your CSS code within a <!– –> comment is a great idea –>

CSS Override (add this to the end of a CSS string to override any existing CSS)

!important

Want to turn an element off?

display: none;

Turn off that hyphenation!

-webkit-hyphens: none;
-moz-hyphens: none;
hyphens: none;
word-wrap: normal;

Gradient Backgrounds

background: rgb(110,0,0); /* Old browsers */
background: -moz-linear-gradient(top, rgba(110,0,0,1) 0%, rgba(176,0,16,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(110,0,0,1)), color-stop(100%,rgba(176,0,16,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(110,0,0,1) 0%,rgba(176,0,16,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(110,0,0,1) 0%,rgba(176,0,16,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(110,0,0,1) 0%,rgba(176,0,16,1) 100%); /* IE10+ */
background: linear-gradient(top bottom, rgba(110,0,0,1) 0%,rgba(176,0,16,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#6e0000′, endColorstr=’#b00010′,GradientType=0 ); /* IE6-9 */

Background Image No-Repeat

background-image: url(‘images/logo.png’);
background-repeat: no-repeat;

Float & Clear

If you float left or right you will generally want to clear the float so that text will wrap under the object you are floating. Unfortunately, there is still no float center.
<div style=”float:left;”>&nbsp;</div>
<div style=”float:right;”>&nbsp;</div>
<div style=”clear:left;”>&nbsp;</div>
<div style=”clear:right;”>&nbsp;</div>
<div style=”clear:both;”>&nbsp;</div>

Round Corners or Radius

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;
border:1px solid #fff;

Text Selection Color

::-moz-selection {
background: none repeat scroll 0% 0% #888888;
color: #fff;
}

::selection {
background: none repeat scroll 0% 0% #888888;
color: #fff;
}

Logic Pro X Tips

Takes Folder

Use Option Q to toggle between scissors and swipe on take folder

Time Stretch

  1. Get the 1 on the 1
  2. Open the Editor for the desired track
  3. Click on the Flex button and select a type. Start with rhythmic.
  4. Open Inspector column
  5. Under Region: MIDI Thru set Quantize to 1/8 notes. this is a good starting point.
  6. If anything sounds off open the track’s Editor window and adjust the Flex Hit Points by selecting and moving the Hit Point or turning the Hit Point off by clicking on the X at the top of the point.
Logic X Hit Point
Logic X Hit Point

 

Logic X Quantize Amount
Logic X Quantize Amount

Get Drummer to play along

Open Logic Pro>Preferences>Audio>General in the middle of the window is Plug-in Latency and confirm if Compensation is  enabled.
NOTE: This is a universal preference. If you have Drummer on other songs recorded without Latency Compensation this will effect them and therefore should be turned off until adjustments are made to the audio placement.

Logic X Plugin Latency
Logic X Plugin Latency

WordPress Essentials

Reset Admin Password through FTP

1. Log in to your site through FTP and open functions.php.
2. Add this code at the beginning, after the first <?php:

wp_set_password( 'password', 1 );

3. Enter a new password for the main admin user. “1” is the user ID number.
4.Remove this code or it will reset your password every time you try to log in.

Basic WordPress .htaccess

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ – [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

Robot.txt for WordPress

User-agent: *
Disallow: /cgi-bin/
Disallow: /wp-admin/
Disallow: /wp-includes/
Disallow: /wp-content/plugins/
Disallow: /wp-content/cache/
Disallow: /wp-content/themes/
Disallow: /wp-login.php
Disallow: /wp-register.php

Child Theme

Not quite shortcode but, do yourself right when working with WordPress and make a
child theme before you do anything to modify your WordPress CSS. This will keep your custom CSS in a separate folder that will not be affected when you update the theme. For this illustration we will reference the Twenty Eleven theme.

  1. Go into your installed WordPress and make a folder in /wp-content/themes/ and name it something that relates to your theme, maybe “childof2011theme” if you are using the Twenty Eleven Theme that comes with WordPress.
  2. Create a new text file and name it style.css, then copy and paste the following: /* Theme Name: Twenty Eleven Child Theme URI: http://your_url.com/ Description: Child theme for the Twenty Eleven theme Author: Your Name Author URI: http://your_url.com/ Template: twentyeleven Version: 0.1.0 */ @import url(“../twentyeleven/style.css”);
  3. The last line, @import url(“../your _theme/style.css”); is the most important part of making a child theme. Change “your _theme” to match the name of the theme that you are making a child.
  4. Log into your WordPress Dashboard and go to Appearance → Themes
  5. Activate your child theme, in this case named “Twenty Eleven Child”

Shortcode to display gallery images full size

If you need your WordPress gallery to display images full size use this shortcode. Change the xxx to the your desired image Attachment ID which can be found in the Media Library for each image. This works well if you have animated and / or transparent GIFs because as of WordPress 3.5 thumbnails of GIFs do not retain transparency nor will they animate.

 

 

 

 

 

Valid values include “thumbnail”, “medium”, “large”, “full”

CSS to turn off WordPress home page title

.home .entry-title { display: none; }

Parallax background for WordPress using Web-Features.net

  1. Go to Web-Features.net
  2. Choose the first option, Full Scale Animated Background.
  3. Choose a color from the Background Color panel.
  4. Click the “New Layer” icon at the bottom of the Layers panel and either specify the url to your image or select an image from the images gallery.
  5. Select to repeat on the x-axis, y-axis or repeat both X/Y option) and set alternate offset if needed.
  6. To turn off repeat just select the Image option (Pattern is selected by default).
  7. In the left-hand panel you define your image’s behavior. You can make it react to mouse cursor movements and/or scrolling.
  8. In Mouse Move options their are 3 settings: Direction, Move on and Speed. The Direction settings allow you to move with or opposite your mouse cursor. The Move on setting specify whether your image moves on the x-axis, y-axis or both. The Speed settings specify how fast you want the image to move.
  9. Once you’re done select Get Embed Code and Copy to Clipboard.
  10. FTP to header.php and paste the code above </head>.

Woocommerce Variations (Sizes, Colors, etc.)

Go to the Product

  1. Scroll to Product Data.
  2. Change drop-down menu to Variable product.

Attributes

  1. Select the Attributes tab on the left.
  2. Change drop-down menu to Custom product attributes and click the Add button.
  3. Name the attribute. In this case “Sizes”.
  4. Enter the Values separated by a “pipe” |. In this case “Small | Medium | Large”.
  5. Select Visible on the product page.
  6. Select Used for variations.
  7. Save Attributes.

 

Here are some vatriations you can copy and paste

  • Small | Medium | Large | XLarge | XXLarge
  • Red | White | Blue | Black

 

Attributes

Variations

You can have different information for each variation, i.e. price.
For this example I will assume all variations will share information.

  1. Select the Variations tab on the left.
  2. Change drop-down menu to Add variations and click the Go button.
  3. Select a Default Form Value. In this case “Small”.
  4. You can select specific variations. For the example “Any Sizes” is selected.
  5. Click on Expand variation or click on the down arrow when you rollover the “Any Sizes” variation.

Here are some vatriations you can copy and paste

  1. Small | Medium | Large | XLarge | XXLarge
  2. Red | White | Blue | Black

Woocommerce Variations window closed

 

 

Variations – expanded

  1. Regular Price is the only required field.
  2. If there is specific differences in variations, i.e. price, weight, stock, that will affect price or shipping select Add variation for each difference.

Woocommerce Variations window open

Woocommerce Products Step-by-Step

From the left side of your wp-admin page click on Products then choose Add Products or select the product you want to edit.

Center Column

  1. Add Product Name
  2. Ignore the main text widow
  3. Fill in Product Short Description

Center Column > Product Data – Simple Product

  1. Choose Simple Product from the drop-down menu
  2. Select the General tab
  3. SKU and Price must be filled in
  4. Select the Inventory tab
  5. Confirm Stock status is In stock
  6. Select the Shipping tab
  7. Input Weight and Dimensions
  8. Apply a Shipping class (I have defined this on Products > Shipping Classes and set the cost of each rate on Woocommerce > Settings)
  9. click on the Shipping tab then click the link Flat Rate below the tab.

Center Column > Product Data – Variable Product

Use this if the product has variations such as different sizes or colors.

All of the above Product Data for a simple product still applies.

  1. Choose Variable Product from the drop-down menu
  2. Select Attributes
  3. Click the Add button for Custom Product Attributes
  4. Name the attribute and give it values separated by pipes. i.e. Small|Medium|Large
  5. Check the Used for variations box
  6. Select Variations
  7. Choose Add Variations and click the Go button for each variation
  8. Choose a default variation
  9. From the drop-down select each variation
  10. On the right of the drop-down there are 3 options. The three bar icon is to arrange the variations. Up arrow is to expand the variation window to edit options. Remove should be clear.
  11. Click the expand icon
  12. Price is  the only required field

Right Column

  1. Select all applicable Product Categories. (These are defined under Products > Categories)
  2. Enter Product Tags. These are keywords that will help filter this product
  3. Upload your product image. Images should be at least 1000×1000 pixels. Square is easiest to manage.
  4. If there are multiple images add the remaining images to Product Gallery. You can move these images to rearrange.

Woocommerce Cheat Sheet

Add CSS only on the Shop page

change .xxx to the specific CSS element you want to change

.archive.post-type-archive-product.woocommerce .xxx {
background-color: pink;
}

Increase Your PHP Memory

Add this to wp-config.php

// Increase PHP Memory as recommended by Woocommerce
define( ‘WP_MEMORY_LIMIT’, ’64M’ );

Move WooCommerce Product Tabs under Product Summary

Add this to functions.php

// Remove tabs from the original location
remove_action( ‘woocommerce_after_single_product_summary’, ‘woocommerce_output_product_data_tabs’, 10 );

 

// Insert tabs under Product Summary
add_action( ‘woocommerce_single_product_summary’, ‘woocommerce_output_product_data_tabs’, 60 );

Remove sidebar from Woocommerce

Remove this from wp-content/plugins/woocommerce/single-product.php

<?php
/**
* woocommerce_sidebar hook
* @hooked woocommerce_get_sidebar – 10
*/
do_action(‘woocommerce_sidebar’);
?>

Remove this from wp-content/plugins/woocommerce/archive-product.php

<?php
/**
* woocommerce_sidebar hook
* @hooked woocommerce_get_sidebar – 10
*/
do_action(‘woocommerce_sidebar’);
?>

Add this to style.css

#content-woocommerce {
width:100%;
}

Change the number of Woocommerce related products and columns

Add this to functions.php

<?php
/**
* Change number of related products on product page
* Set your own value for ‘posts_per_page’
*/
function woo_related_products_limit() {
global $product;

$args[‘posts_per_page’] = 6;
return $args;
}
add_filter( ‘woocommerce_output_related_products_args’, ‘jk_related_products_args’ );
function jk_related_products_args( $args ) {
$args[‘posts_per_page’] = 3; // 3 related products
$args[‘columns’] = 3; // arranged in 3 columns
return $args;
}

Gmail Setup

This is information partial to siteground.com

Log-in to your Gmail Account

  1. Choose Settings (the cog icon on the top right)
  2. Select Accounts and Import
  3. Select ‘Add a POP3 mail account you own
  4. Enter your Email address ie. you@website.com
  5. Click the Next button
  6. Enter your full email address as the Username ie. you@website.com
  7. Enter Password for your email account.
  8. Enter the POP Server: secureus8.sgcpanel.com POP3 port 995 username: you@website.com
    password: the password for this email account Always use a secure connection
  9. Click the Add Account button.

Outgoing Mail (SMTP)

1. Choose “Yes, I want to be able to send mail as you@website.com
2. Choose if you will use this address as an Alias.
3. Choose to send “Send through example.com SMTP server
SMTP server: secureus8.sgcpanel.com
SMTP port 465 username: you@website.com
password: the password for this email account Secured connection using SSL
4. Click on Add account

Online CSS Generators & Mixers

Here is a link to an awesome CSS gradient generator

http://www.colorzilla.com/gradient-editor

Here is a link to an awesome CSS button generator

http://www.bestcssbuttongenerator.com

W3 Schools is a great assistant for HTML & CSS

HTML Color Names are funner!

http://www.w3schools.com/tags/ref_colornames.asp

HTML Color Picker is a great way to find similar colors

http://www.w3schools.com/tags/ref_colorpicker.asp

Robot.txt Generator

http://www.mcanerin.com/EN/search-engine/robots-txt.asp

Site Map Generator

http://www.xml-sitemaps.com/