New Look

The first thing we have up our sleeves is a new look. We’ve been hard at work designing a new look for the site. It is a design that focuses more on the content/tutorial then on other flashy elements.

New Focus

I am probably the most excited about this up coming change. The site is still going to be focused tutorials, but those tutorials will be focused on something more specific. All tutorials will be focused on Web Standards. We’ll show you how to set up XHTML Strict document templates, CSS resets, the proper way to use various elements, and of course we’ll give you tips/tricks/techniques on implementation. And that’s not all! We’ll likely cover many, many more things.

New Contributors

We are going to have new tutorial contributors, some have made current list and some will be added when the new site is launched. Each contributor will have their own bio and photo (if I can convince them to submit one) so we can all learn a bit about them.

Improved Frequency

Another very important update will be the frequency in which tutorials are posted. It is my goal to have several tutorials released every week. With the addition of some quality contributors this is a very achievable goal. I’ll do some arm twisting, threatening, and maybe even bribing if I have to. It is our feeling that the more standards-based tutorials & techniques available the better off Designers and Developers will be.

Added Advertising Opportunities

Now before you freak out and think this site is going to have ads all over the place - hear me out. These ads will not be obtrusive. There will be ads at the bottom of the site in the footer, text-link ads and small banner ads. This means there will be some advertising opportunities for designers and developers to advertise themselves. If you are interested in any of these spots send an email to ads(at)focusedtutorials(dot)com.

Hopefully, this gives you a taste of what is to come as well as a reason for why things seem to be at a stand still here. We have been diligently working as fast as we can, amid client work, to make all of the above reality. Thank you for your paitence and check back often and until then …Stay Focused!

Let’s get started.

Step 1:

Open the image you wish to isolate an area of. Then, in the layer palette, click the “Create new fill or adjustment layer” button (shown in the image), and click “Hue/Saturation…”. Alternatively, click Layer > New Adjustment Layer > Hue/Saturation… on the menus:

Step 2:

Drag the Saturation slider down to the bottom, -100. The whole image should appear desaturated. Click OK.

A new layer should appear above the image layer, called “Hue/Saturation 1″. You will notice that this layer has two icons. The first: means it’s an adjustment layer. You can double click this to bring up the Hue/Saturation dialog box once again to edit the settings of the layer. The second: is the layer mask. Anything white on this mask lets the adjustment layer do it’s work on the layers below. Anything black on this mask stops the adjustment layer from working.

Step 3:

So here’s how we do the actual highlighting. Notice, the whole image is desaturated, and the whole of the layer mask is white. Click on the layer mask on the Hue/Saturation layer ( this image) and select a black brush. Zoom in nice and tight to the area you wish to bring back to colour, and start painting with black! Make sure that the layer mask is selected, otherwise it will not work. Anything you paint black you should see that the colour comes through once again:

If you make a mistake - don’t worry! Just paint anything you wish to become desaturated again with white, instead of black, and it will return to the way it was. And that is it. Just delete the Hue/Saturation layer anytime you want your original image back!

If you decide that you wish everything to be a different colour, rather than black and white, you can of course just double click that Adjustment icon (), slide the Saturation back to 0 and change Hue, for example:

Have fun

Let’s get started.

Step 1:

Duplicate the layer. You can do this by hitting cmd+J (ctrl+J on the PC) or go to Layer > Duplicate Layer.

Step 2:

With the new layer selected zoom into the area or areas you’d like to eventually have the color. Hit Q on your keyboard to enter quick mask mode. Now grab your paint brush and start painting in the area you want. You should get a pinkish looking color in this area, don’t worry this isn’t ruining your photo. Once you have the area completely painted in, its time to go back to standard editing mode. To do this just hit the Q on your keyboard again. You should now have a selection around the area you just painted in. If you see parts of it are not quite in the selection just go back into quick mask mode and paint those areas in.

Outlining:

Filling in my outline:

After done and back in standard editing mode:

Step 3:

Now just invert your selection by pressing cmd+shift+I (ctrl+shift+I on the PC) or Select > Inverse.

Step 4:

It’s time for the magic now, just desaturate the current selection by pressing cmd+shift+U (ctrl+shift+U on the PC) or Image > Adjustments > Desaturate. See our final photograph, with the before and after below.

Before:

After:

That’s it. At any time you can always just delete this new layer and you still have your original photo untouched. Hopefully you’ll find a method that works for you and feel free to share it with everyone. Until next time, stay focused!

Firstly you’ll need to create the users table you will be using. Below is the statement I usually use to create the most basic table.
create table users (
  user_id int not null primary key auto_increment,
  user_name varchar(30) not null,
  user_pass varchar(100) not null
)

Once we have the basic table set up, we can go on to the actual PHP and XHTML. This is the code for the form used to login:
<form method="post" action="login.php">
  Username:<br />
  <br />
  Password:<br />
  <br />
  
</form>
This code basically creates a simple form which posts data to login.php, two input fields, one for the username and one for the password.

The following code is used on login.php which logs the user in:
session_start();
$connection_string = mysql_connect("localhost","username","password");
mysql_select_db("database_name");
if (isset($_POST['username'])) {
  $result = mysql_query("SELECT user_id, user_name, user_pass FROM users WHERE user_name = '".$_POST['username']."' AND user_pass = '".sha1($_POST['password'])."'", $connection_string);
  if (mysql_num_rows($result)) {
    $user_info = mysql_fetch_array($result);
    $_SESSION['user'] = $user_info['user_id'];
    $_SESSION['user_pass'] = sha1($_POST['password']);
    $_SESSION['ipaddress'] = $_SERVER['REMOTE_ADDR'];
    $error = 0;
  } else {
    $error = 1;
  }
} else {
  $error = 2;
}

There are two things this code assumes. The first is that you have set up the database table correctly as above, and the second is that the page is passed two variables from a form by the POST method, called username and password. These are obvious names for the fields of a login form. Lets step through the code line by line.

Line 1: This line initiates a session, enabling us to use the $_SESSION variables later on in the script.
Line 2: This line is the connection to the database, stored in the variable $connection_string. The values in the mysql_connect function must be changed to match your database.
Line 3: The database must be selected from within MySQL. This line must be changed to the name of the database you have stored your users table in.
Line 4: Checks if there has actually been any data posted to the page from a form.
Line 5: This line queries the database for any records in the database where the user_name is what was entered into the form, and the user_pass is the sha1 encryption of what was entered into the form. The returned results are put into the variable $result.
Line 6: Checks if there have been any rows returned by the query.
Line 7: If there is a match, this means the user has typed in the correct credentials. The data from the database is then stored in the array $user_info
Line 8: The session variable $_SESSION[’user’] is set to hold the id of the user that just logged in.
Line 9: The session variable $_SESSION[’user_pass’] is used to store the encrypted form of the user’s password.
Line 10: The session variable $_SESSION[’ipaddress’] is used to store the IP of the user logging in.
Line 11: The error flag is set to indicate no error.
Lines 12-14: If there were no results returned, the error flag is set to 1. This variable can then be used later on when returning an error to the user about their invalid login.
Lines 15-17: If there was no post data sent to the page, the error flag is set to 2. Again, this variable can be used later on.

Finally, we need the code to check that the user who is trying to access restricted pages is logged in, and therefore allowed access:
session_start();
$connection_string = mysql_connect("localhost","username","password");
mysql_select_db("database_name");
if (!$_SESSION['user']) {
  // Print error message or redirect elsewhere
}
  $result = mysql_query("SELECT user_id FROM users WHERE user_id = '".$_SESSION['user']."' AND user_pass = '".$_SESSION['user_pass']."'", $connection_string);
if (mysql_num_rows($result) == 0) {
  // Print error message or redirect elsewhere
}
if ($_SESSION['ipaddress'] != $_SERVER['REMOTE_ADDR']) {
  // Print error message or redirect elsewhere
}


Again, lets step through the code.

Line 1: Enable the $_SESSION variables.
Line 2-3: Connect to the database.
Line 4: If there is no $_SESSION variable set, then the user has not logged in.
Line 5: Therefore, you can either print an error message or redirect the user to a page that they are allowed to view.
Line 7: Query the database for the user details that are stored in the $_SESSION variables.
Line 8: If none are returned, then the user has not logged in correctly, or the $_SESSION variables have corrupted.
Line 9: See Line 5.
Line 11: If the IP address does not match the one in the $_SESSION variable, something has gone wrong.
Line 12: See Line 5.

And there you have it. Code to secure a section of your site! To add users, you can either create a registration form, or insert the data straight into the database.

There are three ways to make it happen. The first will allow you to sync your active milestones (by project) to a Google Calendar. The second will allow you to sync all of your milestones (regardless of project) to a Google Calendar. The third is a core “hack” which will allow you to sync all active milestones to a Google Calendar.

Active Project Method (non-core modifying):

1. Log into activeCollab
2. Select the project you want to sync.
3. Click on the Milestones tab.
4. Right click over the iCalendar link and copy the link/shortcut. (it should contain ?c=feed&a=project_ical&id={id}&token={token}).
5. Now head to your Google Calendar.
6. While viewing the Google Calendar, Click on the Manage calendars link on the left hand side below the listing of calendars.
7. Under the “Other Calendars” heading click on the Add calendar button.
8. Then you’ll want to click on the fourth tab titled “Public Calendar Address”.
9. Now enter your feed address. (remember you copied it so just paste it here.
10. Click on the Add button.

Congratulations, you now have your calendar synced with all your active milestones for that project.

Secondly, for those who want all of their active milestones synced.

Active User Method (non-core modifying):

1. Log into activeCollab
2. Click on the My tasks tab.
3. Right click over the iCalendar link and copy the link/shortcut. (it should contain ?c=feed&a=user_ical&id={id}&token={token})
4. Now head to your Google Calendar.
5. While viewing the Google Calendar, Click on the Manage calendars link on the left hand side below the listing of calendars.
6. Under the “Other Calendars” heading click on the Add calendar button.
7. Then you’ll want to click on the fourth tab titled “Public Calendar Address”.
8. Now enter your feed address. (remember you copied it so just paste it here.
9. Click on the Add button.

Yet again, congratulations you now have a synced calendar to all of your active milestones.

Now for the more adventurous or for those who want the sync to include all active milestones, here is your method.

All Active “Core Hack” Method (core editing necessary*):

1. Make Backups of the files and the data!
2. Open up language/en_us/general.php
3. Add the following line:
   'active milestones' => 'active milestones',
4. Open up application/controllers/feedcontroller.class.php
5. Add the following code:
   /**
* Show calendar for active milestones
*
* @param void
* @return null
*/
function active_ical() {
$this->setLayout('ical');
 
$user = $this->loginUserByToken();
if(!($user instanceof User)) {
header('HTTP/1.0 404 Not Found');
die();
} // if
 
$this->renderCalendar($user, lang('active milestones'), ProjectMilestones::getActiveMilestones());
} // active_ical
6. Log into activeCollab
7. Click on the My tasks tab.
8. Right click over the iCalendar link and copy the link/shortcut. (it should contain ?c=feed&a=user_ical&id={id}&token={token})
9. Now head to your Google Calendar.
10. While viewing the Google Calendar, Click on the Manage calendars link on the left hand side below the listing of calendars.
11. Under the “Other Calendars” heading click on the Add calendar button.
12. Then you’ll want to click on the fourth tab titled “Public Calendar Address”.
13. Now enter your feed address. (remember you copied it so just paste it here.
14. Replace the text user_ical with active_ical in that copied link before you add it to Google.
15. Click on the Add button.

With that method you will now have a calendar that is synced up with ALL active milestones for everyone.

Additional Notes:

• Quote from within activeCollab: “if you change your password the link to the calendar data will also change! You’ll need to resubscribe.”
• Special thanks to TJ Singleton from VantageStreet for the code, hack and technique.

*Edit at your own risk. FocusedTutorials nor this author share in any responsibliliy for losses encountered while using this method.

Feel free to download the images I am using for this tutorial or grab one of our own.

Step 1:

With the file open go to Image > Adjustments > Desaturate. This will remove all of the color from the image. Don’t panic it is supposed to! (note: do not change the image mode at all, it should remain RGB for this tutorial to work properly)

Step 2:

Select the History Brush and give it the following settings: Brush Size: 10px, Hardness: 100%.

Step 3:

With the History Brush selected all you need to do is “paint” over the areas you want to reveal the color.

Original Image:

Image In Progress:

Final Image:

Here are a few tips to remember when doing this:

• Take your time!
• Zoom as necessary, close for intricate spots
• Trace around the outside of the image first (if necessary reduce your brush size for those tight spots)
• Take your time!
• Make sure to unclick every now and then so that if you make any mistakes you do not have to start all over.
• When your outline is complete, increase the brush size so you can “paint” the inside faster.
• Did I mention to take your time?

That is all there is to it!

I did another one for the holiday season just to show the impact it can have on any photo.

Before:

After:

Have fun and enjoy this technique.

All images used for this tutorial were obtained at www.sxc.hu.

Update: This method is a good method, however it does alter the original image (which could be really bad especially if you haven’t kept a back up copy of it). In the coming days I will share with you the preferred way to create this effect.

See also: Just a Touch of Color - Method 2

You can do it in 2 easy steps.

Step 1:

Put something like this in your CSS file:
#preloadedImages {
       width: 0;
       height: 0;
       background-image: url(path/to/image1.png);
       background-image: url(path/to/image2.png);
       background-image: url(path/to/image3.png);
       background-image: url(path/to/image4.png);
}
Make sure you change, of course, the quantity of images and the paths to them. This step makes certain the mentioned images are loaded into your cache as the browser goes through your CSS file.

Step 2:

Then, simply load a <div> element with your ID high up in the (x)html page (directly under the opening <body> tag is recommended), and viola! For example:

<div id="preloadedImages"></div>

Note: This <div> doesn’t need to contain anything, or do anything more than I’ve already written. To use your pre-loaded images, simply call them into your code as you would normally. The above trick simply gets them loaded into your browser’s cache long before you call them in your code.

Let’s get started!

Step 1:

Insert the CD that you want to copy

Step 2:

• Open Finder
• Open the Applications folder
• Open the Utilities folder
• Now start the Disk Utility Program

Step 3:

Once Disk Utility is running:

• Click on the File Menu
• Choose New
• Now click on Disk Image from Folder

Step 4:

At this point the Finder window will appear.

• Select the CD you want to copy.
• Then click on the Image button

Step 5:

Now a dialog box will appear titled “New Image From Folder”. Make your settings like:

• In the Save As Box, name the CD what you wan’t
• In the Where Box, choose Desktop
• In the Image Format Box, choose DVD/CD Master
• Now click Save

Now a new file is being created and placed on your Desktop. It will have the name you gave it from the Save As Box from Step 5 and it will have a “.cdr” file extension. This procedure may take a few minutes to complete, so just sit tight as your Mac finishes creating the file. This file is a disk image of your CD. (example… New_CD.cdr)

(Note: keep the Disk Utility program open, as we will come back to it in Step 7.)

Step 6:

Now that the disk image of your CD is complete, eject the CD.

Step 7:

Go back to the Disk Utility program. You should now see in the listings at the left the disk image of your CD (usually at the bottom of the list). Click on it once.

Step 8:

Now in the upper left corner of the Disk Utility program click on the Burn button.

Step 9:

The rest is just a matter of following the directions by inserting a blank CD-R when prompted and then just waiting for it to complete.

Congratulations you now have a copy of your CD!

Update: My research at this point is that the same procedure will work for a DVD. Please correct me if I am wrong.

Disclaimer: Keep in mind FocusedTutorials.com in no way condones the pirating or unauthorized duplication of CD’s or DVD’s. Please use this tutorial responsibly.

FocusedTutorials.com > Blog Archive > {Page Title}

Suppose you are on a site for a long period of time, say a Stock Photo site, you will likely fill up the page history especially if you are doing searches. It becomes very difficult to see where you have been or to easily and quickly go back to your search results time after time. Personally, I have had to just do a new search, and advance through the pages till I find what I was looking for.

Depending on the site usuability should come first for things like page titles. Stock Photo sites should have a layout similar to:

{Page Title} < Section of Website < Name of Website

With a page title structure like this not only will it be beneficial for Search Engines, but also for users staying on your site for long periods of time.

(inspiration & source: Brand Spanking New)

Serving dynamic content to visitors is great for keeping your site fresh, and this example can be applied to any purpose. Using only “arrays”, it cuts out the need for a database.

So let’s get going.

Some prior knowledge of arrays is required, but it’s not too hard. We will be building a function to grab a random array values and build a link and print it. Simple.

Firstly we will look at our array values…

$link[0]['image'] = '/images/advert.jpg';
 
$link[0]['url'] = 'http://www.focusedtutorials.com';
 
$link[0]['desc'] = 'This is a test description';

We know our array is called $link. The first square bracket is our identifier, “[0]”. To add other links, we will increment this value – “[1] , [2] , [3]” etc. The second block is our value – in our case [‘image’] is the path to the image…

So hopefully, we will end up with a few entries in our array…

$link[0]['image'] = '/images/f_t_image.jpg';
 
$link[0]['url'] = 'http://www.focusedtutorials.com';
 
$link[0]['desc'] = 'focusedtutorials.com';
 
$link[1]['image'] = '/images/webradiance.png';
 
$link[1]['url'] = 'http://www.webradiance.com';
 
$link[1]['desc'] = 'Web Development forum';
 
$link[2]['image'] = '/images/affilate.jpg';
 
$link[2]['url'] = 'http://www.some-affiliate.com';
 
$link[2]['desc'] = 'This is a test description';

Its ok having this array with our links in, but we need to select a random entry from the array. To do this we will use the PHP function RND_ARRAY. This will allow us to pick one or more random entries out of an array. We only want the one though.

$random = array_rand($link);

We add our array into array_rand, basicly it finds a random entry in the array $link.We will call the random number $random.

To call our array entry normally we would type:


echo $link[1][ 'url'];

Where we specified we wanted entry one ( see the [1] bit) however, we want to change that for our random number.

So!


echo $link[$random]['url'];


Now we will get the ‘url’ value from a random entry in our array.

Use this method for the rest of the values, to build our link.
echo "<a href='".$link[$random]['url']."'><img src='".$link[$random]['image']."' alt='".$link[$random]['desc']."'/></a>";
Throw this in a function and HOORAY! We can call thos function when we wish! Download the source file to see it in action!

Source file for the ad roation using arrays