I got my copy of the Adobe Design Suite 5! Check out the unboxing video!!!

I’ve been getting requests through my email recently for tutorials. People want to know how to make web designs in Photoshop or how to make a Web form email with PHP. Every Saturday evening around 12am I’m going to be posting tutorials on web design and web development. I’ll cover languages from PHP to JavaScript to HTML and CSS, up to and including the newest technologies like CSS3 and HTML5. I’ll cover how to make web layouts in Photoshop CS5 and eventually Flash Catalyst CS5. The reason they’ll be on Saturday is because I need the evening to use my microphone. There will be a youtube channel dedicated to the tutorials, I’ll decide the name later, and it’ll be featured on this website. If you want to keep up with the tutorials and when they come out, check @Bill_Macomber on twitter for more information.

Adobe Suites

Artisteer

I don’t post reviews on here often, and usually when I do it’s for Adobe products I use. I was told today to design a layout for a website being run with Joomla, an incredibly difficult CMS I now know how to use. I was a little bit wary when I was told to use Joomla because I had tried once and failed to use it, but this time I picked right up on it; perhaps it’s the WordPress experience that’s helped. Well back to my point, I created two designs at once, one in Artisteer and one in Photoshop. I’m still learning how to place my PSD files in Artisteer but I have to admit, the Artisteer design is just as impressive, and it exports as a template for whatever CMS you tell it to. I would say I give Artisteer four stars out of five. The only thing holding back the five star decision is the limited number of effects and combinations it has built in, if you don’t have Photoshop experience then your designs start to look repetitive.

This is a cool trick I had to figure out for the new portfolio site debuting May 5, 2010 at LukemDesigns. Hope you enjoy, tell me what you think!

We’re going to look at the HTML structure first:

<div class=”boxgrid”>
<a class=”view” href=”#”>View This Project</a>
<a class=”imglink” href=”#”><img src=”http://fc05.deviantart.net/fs70/i/2010/092/d/c/NEWAGE_by_LukemDesigns.jpg” width=”480″ height=”283″ alt=”Grunge Design” /></a>
</div><!– end boxgrid –>

Okay so our image is going to be in the boxgrid division, the link that’ll take the visitor to the website being displayed is called view, and the link holding the image is called imglink.

Now for the CSS:

a.view {
background-color: #242f33;
padding-left: 30px;
font-weight: bold;
text-transform: uppercase;
color: #fff;
line-height: 40px;
height: 40px;
text-shadow: 1px 1px 0 #131a1c;
width: 454px;
opacity: .8;
display: none;
position: absolute;
border-bottom: 1px solid #000;
}

The real magic in the CSS code is the display: none because it will hide the .view link until the jQuery slides it down. Position: absolute sticks it at the top so the image won’t slide down. The opacity: .8 will make it have an 80% opacity so it looks cool. The rest of this code is just to set widths and add some nice looking effects so it’s as wide as the image

a.view:hover {
text-shadow: 2px 1px 16px #fff;
}

.boxgrid {
margin-left: 200px;
width: 485px;
height: 288px;
}

.boxgrid a {
float: right;
}

.imglink {
border: none;
}

.imglink:hover {
border: none;
}

.boxgrid img {
border: 2px solid #333;
}

Now for the surprisingly complicated jQuery script. Though it’s short, it took me a little over a day to figure out how to get it working correctly:

$(document).ready(function(){
$(‘.boxgrid, .boxgrid2′).hover(function(){
$(“.view”, this).slideDown(500);
}, function() {
$(“.view”, this).slideUp(500);
});
});

Okay, we’re going to start by asking our script to start when the document is ready (document).ready(function(){

The syntax for this is fairly easy, slideUp makes it slide up and slideDown makes it slide down. slideDown(500) will make it slide down in 1/2 a second (1000) would be one second.

$(‘.boxgrid, .boxgrid2′).hover(function(){ opens up the portal for a new effect. When we hover over the boxgrid division (the one holding all the links and images) it makes the gray box slide down and when we mouse out it slides up. Getting the functions to open at the right time takes practice. If you’re interested in a jQuery course on this, check out WebBappers site.

One last thing in this script to cover is the word this.

$(‘.boxgrid, .boxgrid2′).hover(function(){

$(“.view”, this).slideDown(500);

Instead of writing .boxgrid, .boxgrid2 again and again we can say this and it’ll pull that from higher up in the script. In this script, it keeps both of the captions from sliding down when only one image is hovered over.

I’m still trying to improve on the tutorials, so I’m sure this one isn’t very easy to follow. I’ll also post a finished version later, I have it on my desktop, but I haven’t put it up on a server anywhere on the internet yet.

I coded the first page of the gray layout. Go and check it out! I haven’t added any cool effects yet, I don’t know what I should do with it yet.

I decided to take a one day break from designing stuff to design a simple, one line of code, PHP web app. Check out the final result at http://guitarcentral.macabreink.com/tutorials/index.html . Let’s start with the HTML, if you haven’t seen my HTML tutorials, check them out here.

Let’s break this down piece by piece. Starting with the block of code here:

HTML:

<form method=”post” action=”sqrt.php”>
<label>Enter number here</label>&nbsp;<input type=”text” id=”square” name=”square” />
<input type=”submit” value=”Submit” />
</form>

If you looked at the HTML tutorial you know we used the id of square to identify the text form element so we can grab it with our sleek and smexy PHP script you’ll see below. The submit just makes a submit button.

PHP:

<?php
echo sqrt($_POST['square']);
?>

The <?php ?> tags open and close blocks of PHP code. The echo block will print the line of code onto the screen. The big part of this code is the $_POST['square']. This snippet of code grabs the form field with the id of square and processes it in the PHP file. Sqrt squares the value that $_POST['square'] grabbed. So if you type 4 into the text field $_POST['square'] will grab the 4 and sqrt() will square the four and echo will print the value of 2 since 2 is the square root of 4.

That’s it, as I make more of these they’ll get easier to understand and follow but this is the beginning (even though you’ll find some other PHP tutorials on my website). Keep watch for tutorials on Javascript and PHP loops and how to use them without killing other people’s computers or your own.

I finished the layout for the home page of Guitar Central. I had to make a few changes due to the height and I haven’t input all of the content into the page yet. I’m going to cut up the code and make the cut portions into PHP includes, quicker to do it that way. Tell me what you think!

That’s a boiled down version of the html shell, the divisions are important because the jQuery I’m using will pull the divisions’ id’s and create CSS for them, as well as speeds for the caption’s movement.

<title>J-Query Sliding Caption</title>
<style type=”text/css”>
.boxgrid {
width: 325px;
height: 260px;
margin: 10px;
float: left;
backround: #161613;
border: solid 2px #899AF;
overflow: hidden;
position: relative;
}

.boxgrid img {
position: absolute;
top: 0;
left: 0;
border: 0;
}

.boxcaption {
float: left;
position: absolute;
background: #000;
height: 100px;
width: 100%;
opacity: .3;
/* for IE 5-7 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity-80);
/*For IE 8 */
-MS-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=80)”;
}

.captionfull .boxcaption {
top: 250;
left: 0;
}

.caption .boxcaption {
top: 220;
left: 0;
}

p {
color: #fff;
}

h3 {
color: #fff;
}

</style>
<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
<script type=”text/javascript” src=”slide.js”></script>
</head>

<body>
<div>
<img src=”backgrounds/me15.JPG” width=”350px” height=”300px” alt=”Me” />

<div>
<h3>Me</h3>

<p>It’s me</p>
</div>
</div>

</body>
</html>

This is the jQuery that will interact with the HTML:

$(document).ready (function(){
//To switch directions up/down and left/right just place a “-” in front of the top/left attribute
//Vertical Sliding
$(‘.boxgrid.slidedown’).hover(function(){
$(“.cover”, this).stop().animate({top:’-260px’},{queue:false,duration:300});
}, function() {
$(“.cover”, this).stop().animate({top:’0px’},{queue:false,duration:300});
});
//Horizontal Sliding
$(‘.boxgrid.slideright’).hover(function(){
$(“.cover”, this).stop().animate({left:’325px’},{queue:false,duration:300});
}, function() {
$(“.cover”, this).stop().animate({left:’0px’},{queue:false,duration:300});
});
//Diagnal Sliding
$(‘.boxgrid.thecombo’).hover(function(){
$(“.cover”, this).stop().animate({top:’260px’, left:’325px’},{queue:false,duration:300});
}, function() {
$(“.cover”, this).stop().animate({top:’0px’, left:’0px’},{queue:false,duration:300});
});
//Partial Sliding (Only show some of background)
$(‘.boxgrid.peek’).hover(function(){
$(“.cover”, this).stop().animate({top:’90px’},{queue:false,duration:160});
}, function() {
$(“.cover”, this).stop().animate({top:’0px’},{queue:false,duration:160});
});
//Full Caption Sliding (Hidden to Visible)
$(‘.boxgrid.captionfull’).hover(function(){
$(“.cover”, this).stop().animate({top:’160px’},{queue:false,duration:160});
}, function() {
$(“.cover”, this).stop().animate({top:’260px’},{queue:false,duration:160});
});
//Caption Sliding (Partially Hidden to Visible)
$(‘.boxgrid.caption’).hover(function(){
$(“.cover”, this).stop().animate({top:’160px’},{queue:false,duration:160});
}, function() {
$(“.cover”, this).stop().animate({top:’220px’},{queue:false,duration:160});
});
});

This isn’t a tutorial, this is just some free code for you to use.

This isn’t a tutorial, but it’s free code to make a beautiful tabbed navigation complete with fancy forms and amazing browser compatibility. There are no images to download, just copy and paste this code and save it as a .htm or .html file and then open it in your favorite browser. Here is the result.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Form Sheet</title>
<style type=”text/css”>
body {
font: .8em/1.8em veranda, arial, sans-serif;
background-color: #05357A;
margin-left: 50px;
margin-right: 100px;
}
#content {
border-left: 1px solid #711515;
border-right: 1px solid #711515;
border-bottom: 1px solid #711515;
padding: 10px 5px 6px 5px;
background-color: #fff;
height: 100%;
}
h1 {
font-size: 2.2em;
color: #fff;
margin: 0;
text-align: center;
}
ul#tabnav {
list-style-type: none;
margin: 0;
padding-left: 40px;
padding-bottom: 24px;
border-bottom: 1px solid #555;
font: bold 11px veranda, arial, sans-serif;
}
ul#tabnav li {
float: left;
height: 21px;
background-color: #666;
color: #FFFFFF;
margin: 2px 2px 0 2px;
border-left: 1px solid #111;
border-top: 1px solid #000;
border-right: 1px solid #444;
}
ul#tabnav a:link, ul#tabnav a:visited {
display: block;
background-color: transparent;
color: #000;
text-decoration: none;
padding: 4px;
width: 100px;
font-size: 1.3em;
}
ul#tabnav a:hover {
background-color: #999;
color: #fff;
}
body#form li.part1, body#content li.contact, body#articles li.articles, body#buy li.buy {
border-bottom: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
float: left;
margin-left: 10px;
display: inline;  /* <—Solution for bug IE6 */
}
body#form li.part1 a:link, body#part1 li.part1 a:visited, body#content li.part2 a:link, body#content li.part2 a:visited, body#part3 li.part3 a:link, body#part3 li.part3 a:visited, body#part4 li.part4 a:visited {
color: #000000;
background-color: #FFFFFF;
}
#content {
border: 1px solid #666;
border-top: none;
padding: 10px 5px 6px 5px;
}
body#form {
background-color: #036;
}
input {
border: 1px solid #009;
background-color: #999;
}
#search {
width: 55%;
padding: 0;
height: 30px;
float: right;
}

</style>
</head>
<body id=”form”>
<h1>Part 1</h1>
<ul id=”tabnav”>
<li><a href=”#”>Part 1</a></li>
<li><a href=”#”>Part 2</a></li>
<li><a href=”#”>Part 3</a></li>
<li><a href=”#”>Part 4</a></li>
</ul>
<div id=”content”>
<div id=”search”>
<form method=”get” action=”#” id=”search” />

<input type=”text” id=”search” name=”search” value=”search” />
<br />
<br />
</form>
</div>
<!– end search div –>
<form id=”checkbox” action=”#” method=”post” />

<label>Offer Letter Signed</label>
<input type=”checkbox” id=”lett_sign” name=”lett_sign” />
<br />
<label>Resume</label>
<input type=”checkbox” id=”resume” name=”resume”/>
<br />
<br />
<input type=”submit” name=”submit” value=”Submit” id=”submit” />
&nbsp;
&nbsp;
&nbsp;
<input type=”reset” name=”reset” value=”Reset” id=”reset” />
</form>
</div>
</body>
</html>

It took some time and work, a lot of work, but I finally got the thing up. It’s meant for my friends from school, and as soon as I graduate the rules will basically be gone, most of them. In the mean time, go check out the company site Luke and I are working on at Dream Design. Dude has skill.