Completed button

1.) The Metal Ring

1. Start by selecting the Ellipse Tool and draw a circle with a diameter of roughly 65px. Color doesn’t particularly matter because we’ll be using Layer Styles to change the appearance.
2. In Layer Styles, we’ll be using Drop Shadow, Bevel and Emboss, Satin, Color Overlay and Stroke. Use the following settings for each of the styles:
   

   Drop Shadow Settings

   

   Bevel and Emboss Settings

   

   Color Overlay Settings

   

   Satin Settings

   

   Stroke Settings

3. Now, you should have something that resembles this:
   
4. Make sure that you are on the same layer path, and using the ellipse tool again, create a circle that is 10px smaller than the first one and then center it inside the other circle. While the new path is selected, press the - key to subtract from the outer shape area. Now, you should have a ring that looks like this:
   

2.) The Button

1. Start a new circle path layer above the one we just created. Make sure that the new path is slightly bigger than the inner circle of the ring without showing on the outside.
   
2. Once again, we’ll use Layer Styles to adjust the appearance:
   

   Inner Shadow Settings

   

   Inner Glow

   

   Bevel and Emboss Settings

   

   Bevel and Emboss Contour Settings

3. Once you’re through all of that, your button should now look like this
   

3.) The Icon

1. The icon can be anything you want it to be. If you want, you can do a quick search on Google, Bing or Yahoo for the vector logos of your favorite social networking sites to use. For the example, we’ll just use the envelop custom shape that comes with Adobe Photoshop CS4.
2. To add more depth to the shape, place a rectangle of the same size as the envelope custom shape behind the envelope, then apply a Gradient Layer Style to the rectangle and adjust the gradient accordingly.
   

4.) Finishing Touches

Now, we can stop with what we have, or you can continue on and add the reflections. The reflections use a combination of paths and gradient layers.

Button Closeup

Once again, it’s up to you to decide how the reflections should look. Yes, the buttons can be any color you choose. You can see finished examples here.

Have fun!

Freebies. I’ve been working on a set of scrap book-influenced freebies that contain some of the design elements that have gone into my current Dumpster-fairy.com layout. I really don’t have a set release date for the set, though I’m quietly gunning for a June release. While I’m on that subject, I am also working on a free WordPress theme. I’m looking at a July release for the WordPress theme; it still has to be cut up from Photoshop and the theme has to be coded.

Finally, I’ve been thinking about selling my design skills. I feel that I’m pretty good at what I do and I could use both the money and the experience since I am set to graduate next June. I also have a few other commercial ventures planned that will probably start in the next few months. I don’t want to say what just  yet, though

Till next time!

$xmldoc = new DOMDocument(); // create a new DOMDocument object.

Yep, it’s that simple. Now here comes the fun part. This scenario is going to assume that we’re just creating a new XML object.

$xmldoc->formatOutput = true; //Nicely formats output with indentation and extra space.
 
$root = $xmldoc->createElement( 'xml' ); //create a root element for your XML output
$xmldoc->appendChild( $root );
 
// Now, we're going to create a few child elements to go with it
$child1 = $xmldoc->createElement( 'child_one', 'Child One' );
$root->appendChild( $child1 );
 
$child2 = $xmldoc->createElement( 'child_two', 'Child Two' );
$root->appendChild( $child2 );
 
echo $xmldoc->saveXML(); //output to screen...

Pretty simple and straightforward. Now, if we want to save to a file, we do this:

$xmldoc->save( 'my-xml-file.xml' );

If we want to open and write to a file:

$xmldoc = new DOMDocument(); // create a new DOMDocument object.
$xmldoc->load( 'my-xml-file.xml' );
$xmldoc->formatOutput = true;
$root = $xmldoc->documentElement; // Conviently allows direct access to the root element.
 
$b = $xmldoc->createElement( 'another_one', 'another child' );
$root->appendChild( $b );
 
$xmldoc->save( 'my-xml-file.xml' );

Very quick and straightforward. I hope this helps anyone who was wondering how to use XML and PHP together.

For more information see:

• PHP Manual: XML Manipulation
• Kirupa.com: PHP and XML
• IBM.com: XML for PHP Developers, Part 1 (three-part series)
• DynamicDrive Forums: Read and Write XML with PHP (forum-post, this is what got me started)

<?php // begin calendar icon code
	$year = get_the_time('Y');
	list($y1,$y2,$y3,$y4) = str_split($year, 1);
?>
	<span class="cssCalendar book" title="<?php the_time('F jS, Y') ?>">
		<span class="spine"></span>
		<span class="year"><span><?=$y1?></span> <span><?=$y2?></span> <span><?=$y3?></span><span><?=$y4?></span> </span>
		<span class="cssCalInner">
			<span class="month"><? the_time('M')?></span>
			<span class="date"><? the_time('j')?></span>
		</span>
	</span>
<?php // end calendar icon code ?>

Here, we’re using the WordPress function get_the_time(), which works like the_time()—which means that it uses the same PHP Date and Time formatting characters as the_time(). Unlike the_time(), get_the_time() passes the result to a variable instead of echoing it, which is what we need here. We use get_the_date(‘Y’) to grab just the year-part of the date, then we use str_split() and list() to parse the individual numbers of the year into separate variables.
CSS Code:

/* Default Calendar Styles */
span.cssCalendar {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	background: white;
	text-align: center;
	display: block;
	float: left;
}
span.cssCalInner {
	display: block;
}
span.cssCalendar .day {
	text-transform: uppercase;
	display: block;
}
span.cssCalendar .month {
	text-transform: uppercase;
	display: block;
}
span.cssCalendar .date {
	display: block;
}
span.cssCalendar .year {
	display: block;
}
/* Book-Style */
.book {
	width: 57px;
	font-size: 12px;
	font-weight: normal;
}
.book .cssCalInner {
	width: 36px;
	margin-left: 10px;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #CCC;
	border-top: 1px solid #CCC;
}
.book .spine {
	background: url(images/calendar_book.png) no-repeat scroll left center;
	display: block;
	float: left;
	width: 14px;
	height: 38px;
	position: relative;
	z-index: 1;
}
.book .year {
	font-size: 75%;
	background: purple;
	color: white;
	height: 38px;
	width: 15px;
	float: left;
	margin-left: -10px;
	position: relative;
	z-index: 0;
}
.book .year span {
	display: block;
	float: right;
	width: 10px;
	height: 8px;
}
.book .month {
	background: none;
	color: black;
}
.book .date {
	font-weight: bold;
	font-size: 120%;
}

Seems pretty straightforward, right?

Using WordPress? Go to the next page for a WordPress add-on to use in your own WordPress themes.

Since I was going to be using a calendar icon in different places on my website, I obviously would want the icon to appear slightly different in each place; for instance, I use a larger calendar icon as part of the header for my blog posts, and a smaller event-like calendar for the side-bar. So, I start off specifying a series of default styles:

/* Default Calendar Styles */
span.cssCalendar {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	background: white;
	text-align: center;
	display: block;
	float: left;
}
span.cssCalInner {
	display: block;
}
span.cssCalendar .day {
	text-transform: uppercase;
	display: block;
}
span.cssCalendar .month {
	text-transform: uppercase;
	display: block;
}
span.cssCalendar .date {
	display: block;
}
span.cssCalendar .year {
	display: block;
}

HTML Code:

<span class="cssCalendar" title="Friday November 28th, 2008">
    <span class="day">Fri</span>
    <span class="cssCalInner">
    	<span class="date">28</span>
        <span class="month">Nov</span>
        <span class="year">2008</span>
    </span>
</span>

This is what you should have:

I’ve tested the base styles in Firefox 3, IE 7, Safari and Opera 9.5 and it appears pretty much the same across the board. But it’s a little boring, don’t you think? So we move on to adding some additional styles:

/* Medium Size */
.medium {
	width: 52px;
	font-size: 18px;
}
.medium .cssCalInner {
	border-left: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
}
.medium .day {
	font-size: 100%;
	font-weight: bold;
	color: white;
	background: red;
}
.medium .date {
	font-size: 120%;
	font-weight: bold;
}
.medium .month {
	font-size: 75%;
	font-weight: normal;
}
.medium .year {
	font-size: 50%;
	font-weight: normal;
}

So this is what we do now. Our HTML fragment above? Change the first line to this:

<span class="cssCalendar medium" title="Friday November 28th, 2008">

Didn’t know you could have more than one class for an html tag? Well, now you do. Your calendar—browser depending, of course—should look like this:

We could leave this tutorial here or, we can go on. You can check out the Last.fm-style calendar icons on the next page.