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

Cubase Tips

Clear Recent Projects List

In OS X 10.7 and higher the Library folder is hidden.
1. In the Finder select the Go menu while holding the Option key.
2. Select Library, this will appear in the menu between Home and Computer.
3. Locate the Preferences folder.
4. Open the Cubase folder.
5. Open Defaults.xml
6. Highlight and Delete this code for each song in the list you want removed:
<item>
<string name=”Name” value=”Song Name.cpr” wide=”true”/>
<string name=”Path” value=”/file/path/” wide=”true”/>
<member name=”FileType”>
<int name=”MacType” value=”1313099858″/>
<string name=”DosType” value=”cpr” wide=”true”/>
<string name=”UnixType” value=”cpr” wide=”true”/>
<string name=”Name” value=”Cubase Project File” wide=”true”/>
</member>
<int name=”PathType” value=”2″/>
</item>

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>.

Object Code for Flash

After going through a few options I have come up with some Flash object code that will replace your Flash with an image and a link to download if you do not have the FlashPlayer install or if you are using a browser that is not compatible with Flash i.e. iPhone/iPad.

<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ width=”100″ height=”100″ id=”FlashID” title=”Name of Flash Thing”>
<param name=”movie” value=”flash_thing.swf”>
<param name=”quality” value=”high”>
<param name=”wmode” value=”opaque”>
<param name=”swfversion” value=”6.0.65.0″>

<!– The next object tag is for non-IE browsers. So hide it from IE using IECC. –>
<!–[if !IE]>–>
<object type=”application/x-shockwave-flash” data=”flash_thing.swf” width=”100″ height=”100″>
<!–<![endif]–>
<param name=”quality” value=”high”>
<param name=”wmode” value=”opaque”>
<param name=”swfversion” value=”6.0.65.0″>
<!– The browser displays the following alternative content for users with Flash Player 6.0 and older. –>
<div>
<img src=”images/flash_thing.png” width=”100″ height=”100″>
</div>
<!–[if !IE]>–>
</object>
<!–<![endif]–>
</object>

Meta Information

<meta name=”Title” content=”Name it”>
<meta name=”Subject” content=”Title it”>
<meta name=”Description” content=”Describe it”>
<meta name=”Keywords” content=”Graphic Design, Web Design, Sound Design, Damion Wagner, Damion Wagner Graphic Design, “>
<meta name=”Language” content=”EN”>
<meta name=”Author” content=”Damion Wagner”>
<meta name=”Abstract” content=”Describe it”>
<meta name=”Copyright” content=”© Damion Wagner 2014″>
<meta name=”Designer” content=”Damion Wagner”>
<meta name=”Publisher” content=”Damion Wagner”>
<meta name=”Revisit-after” content=”20 days”>
<meta name=”Distribution” content=”Global”>
<meta name=”Robots” content=”All”>
<meta name=”Rating” content=”General”>

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/