#image		 { opacity: 0.8;}
	#image:hover { opacity: 1.0; }

Sorry for the lack of posts, I have been working on my new site, TheDesignersYard.com, which I will post screen shots and features very shortly!

Step 1

In your js folder make sure you have the two files: jquery.js which you can download here, and a blank tooltip.js which we will be adding our own javascript to.

Step 2

$(document).ready(function(){

		$(".rsstooltip a").hover(function() {
		$(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow");
		}, function() {
		$(this).next("em").animate({opacity: "hide", top: "-70"}, "fast");
		});

		});

$(document).ready(function(){

		$(".twittertooltip a").hover(function() {
		$(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow");
		}, function() {
		$(this).next("em").animate({opacity: "hide", top: "-70"}, "fast");
		});

		});

Inside your blank toolip.js file add this javascript. It may look like a lot, however the code is repeated twice with the variable of the RSS & Twitter logo is changed.

Step 3

		<link rel="stylesheet" href="css/style.css" type="text/css"/>
		<script src="js/jquery.js" type="text/javascript"></script>
		<script src="js/tooltip.js" type="text/javascript"></script>

Link your style.css, jquery.js and tooltip.js files to the index.html file in the head tags.

Step 4

	<!-- RSS -->
		<div class="rsstooltip">
			<a href="#" id="rss-icon"></a>
			<em>RSS/em>
		</div>
	<!-- RSS End -->

	<!-- Twitter -->
		<div class="twittertooltip">
			<a href="#" id="twitter-icon"></a>
			<em>Twitter</em>
		</div>
	<!-- Twitter End -->

In your html body add the following code. Give the social icon a wrapping div, within this have your icon div and then your em tag – this will be the bubble that appears on the mouse over. If you check our tooltip.js we coded earlier you will find the variables and divs/classes match this html code. Where the # appears in the anchor tag – replace with your required links.

Step 5

/* RSS */

.rsstooltip {
	   margin: 115px auto;
	   padding: 0;
	   width: 100px;
	   position: relative;
}

.rsstooltip em {
	   background: url(../images/rssbubble.jpg) no-repeat;
	   width: 109px;
	   height: 51px;
	   position: absolute;
	   top: -70px;
	   left: -110px;
	   text-align: center;
	   text-indent: -9999px;
	   z-index: 2;
	   display: none;
}

#rss-icon {
	   width: 72px;
	   height: 71px;
	   background: url(../images/rss.jpg) no-repeat 0 0;
	   text-indent: -9999px;
	   margin: 0 -90px;
	   display: block;
	   opacity: 0.85;
	   float: left;
}

#rss-icon:hover {
	   opacity: 1.0;
}

Now we need to style the html that was just coded. Set the following css to your stylesheet. For each social icon you have you will need to change the class/div names and background images of the icon and em tag. One little effect you can add is to the icons opacity/opacity hover which will work with webkit capable browsers – this will save on the sprites!

All Done

Thats all it takes to get super cool jQuery animated bubble tooltips! If you enjoyed this post, have a alternative way to gain the same effect or have an opinion be sure to comment below. Sharing of this post would also be appreciated.

#roundcorner {
             -moz-border-radius: 10px;
             -webkit-border-radius: 10px;
               border-radius: 10px;
}

#rotate {
        -webkit-transform: rotate(-10deg);
        -moz-transform: rotate(-10deg);
}

Please let me know what you think of this weeks top tips, or if you have any of your own please contact me with them and they will be included in next weeks issue!

Here is the finished 404 error page that this tutorial will take you through. As you can see there is an image to create and some PHP & CSS code to write. Just show me the inspiration already!

#s404  					{
						width: 455px;
						margin: 0 10px;
						font-size: 30px;
						border: 10px solid #eeeeee;
						-moz-border-radius: 5px;
						-webkit-border-radius: 5px;
						color: #af1d28;
}

#searchsubmit404        {
						background: transparent;
						height: 23px;
						color:#af1d28;
						border: white solid 1px;
						font-family: arial;
						font-size: 30px;
						height:40px ;
}
#searchsubmit404:hover  {
						color: #666666;
						background: white;
}

There you have it, a nice simple tutorial and some great inspiration to get you started! Let me know what you think of the tutorial and if you have any inspiration you’d like to share drop a comment below!

10. Are My Sites Up?

So you’ve done work for a client, once you’ve done that work after a few weeks it’s very likely that you will stop checking the site, making sure its okay unless you are asked or paid to? Well here is a nifty little web service that allows you to make sure your sites are up. If one of your sites were to go down you would recieve an email notifying you – this is much better than an angry client blaming you for something you had no control over. The service is free to signup to however you are limited to 5 sites only. You can then upgrade to a Standard, Plus or Pro account. With these you will get more sites to keep track of and a bunch of other features for very cheap yearly costs! Its well worth the money upgrading yourself from the free account. Check it out yourself here.

There you have my 10 tips on making your experience as a designer easier and increasing your productivity and skills as one! I’d love to know how you feel about my tips and if you have some of your own you’d like to share! Please feel free to let us know by commenting below.

The Tutorial

Lets get started, download the Twitter PSD Background Template courtesy of Chris Spooner. This PSD has all the different screen resolutions and where the twitter section will be in relation.

Grab your websites header and place it in the top right corner. Then shut the visibility of the template group off.

Using this Hi-Res Spray Brush Set start to erase the right end of the header, the reason behind this is that we want to make the head fade of to the background colour seamlessly with a nice effect spray grunge effect, rather than a straight edge.

Using some of your own brushes really start to personalize the end result whilst blending from the header to the background. You can also use a white brush to spray some texture at the center of the header.

Next, get your logo and place it on the canvas, scale it to size, rotate it to make the design more free and fit with the fading edges.

Download a blank polaroid photo frame, scale it to size and rotate it the opposite way to the logo.

With the polaroid layer select go to Edit>Transform>Warp.

Warp the polaroids image at the bottom left up, this will create the effect that the edge is slightly curled.

Next to add more depth and realism add yourself a drop shadow with an angle of 35, opacity of 50% and a distance of 3px.

Now just turn the visibility of the PSD Template back on just to check that everything is aligned okay at the standard screen res.

Make your twitter page personal to you and grab a photo of yourself and rescale and rotate it in position, then give it the same Warp we did with the polaroid frame.

Add your name to the bottom space of the polaroid frame, the font I have used here is called Dear Joe.

Get yourself a Mug Stain Brush and place it over the polaroid photo, set the blending mode to Multiply.

Download Free Hand Drawn Doodle Icon Set bring the icons that you want or you are part of and desaturate them (SHIFT+CMD+U), rotate and scale them to your preference.

Next, take the desaturated social icons and nudge them into position behind the polaroid photo.

Using the same spray brush set as earlier bump the resolution up and set the colour to black, then spray some where over the header

Next, change the opacity of this layer down to 25%, this will add more of a textured feeling to the header.

Now find yourself some nice doodle brushes and place some around the design, then drop the opacity down to 35% so they aren’t too intrusive to the design – yet making it more ‘personal’.

That’s pretty much the design side of it done, you want to keep your websites theme, make it more personal however you don’t want to clutter it as it’s only the top left corner you have to work with. Now crop the design to the smallest area possible and save for web and devices (OPT+CMD+SHIFT+S) – save it as a JPEG and tweak the file size so you get high quality with the smallest file size.

Login to your Twitter account and navigate to your settings page, click the tab that says design. Change the background image by uploading your new design remember not tile the background.

Next, change the colour scheme of the design so that it matches the overall colours used in the design. Use the eye dropper tool in Photoshop to get the hex colour and simply apply it to the desired section.

Final Image

With the design complete head over to your profile and check out your new design! If you enjoyed this don’t forget to follow me on Twitter.

View Live Demo

View How To Create The Logo

The Tutorial

Create yourself a mock-up in Photoshop of how you want you landing page to be. As you can see I have added some contact links and a section to display my latest tweet. This will be later cutomized via jQuery. Learn how to create the logo Click Here

Firstly you want to crop the appropriate images from your PSD and save them for the web (SHIFT+ALT+CMD+S). Tweak the settings of your selected file type (.jpg) to reduce the size of the images, this will result in the images loading faster in the browser.

Export the images into an images folder, also create youself two new folders – CSS in here create a blank style sheets. JS in here put the latest version of jQuery. Finally create a new blank index.html file, open this and the style.css file you created.

<html>

	<head>

		<title>The Designers Yard - Coming Soon</title>

		<META name="keywords" content="design, web design, design tutorial, graphic design, tutorials, design round-ups, design, freebies">

		<link rel="stylesheet" href="css/style.css" type="text/css">
		<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>

	</head>

	<body>
	</body>

</html>

With your index.html file open make the DOCTYPE XHTML 1.0 Strict and throw in some basic html code, be sure to link to your Style.css and jQuery.js files.

	Resets
*/

*		{
		margin: 0;
		padding: 0;
}

img a	{
		border: none;
}

p		{
		font-family: Georgia;
		font-size: 14px;
		color: #0074AE;
}

Open up your Style.css file and set yourself some basic resets, make sure you set your margin and padding to 0.

	<div id="topsoil"></div>
	<div id="content">
		<div id="logo"></div>
	</div>

Back in your index.html file start to fill out your body tags with the topsoil, content and logo divs.

/*
	Top Section
*/

#topsoil	{
			height: 152px;
			width: auto;
			background: url(/images/topsoil.jpg) repeat-x;
}
#content	{
			width: auto;
			height: auto;
			background: white;
}
#logo 		{
			width: 592px;
			height: 191px;
			background: url(/images/TheDesignersYard.jpg) no-repeat;
			margin: 0 auto;
}

Now go back to your style sheet and start to style the divs we just put in. Setting the width and height to auto will let the div expand depending on what content is in the div – this is just what we need as we will be using some jQuery slide effects later on. Set the background images with appropriate repeats. Then Set the logo margin to 0 auto; this will keep it centered in the browser.

Check that your code is how we want it in your default browser – this is exactly what it should be.

<div id="logo"></div>
	 		<div id="social">
				<a href="#" class="click"><div id="twitter"></div></a>
				<a href="mailto:henrydurdan@thedesignersyard.com"><div id="mail"></div></a>
			</div>

Inside the content div under the logo div set yourself up a div with an ID of social, inside of this add yourself two HTML links, one with a dummy link (#) with a class of click – this will be used when we throw in some jQuery later, the other with a mailto: link. Inside of these links add two divs with the ID’s of twitter & mail.

/*
	SOCIAL
*/

#social		{
			width: 170px;
			height: 60px;
			background: transparent;
			margin: -10px auto 0;
}
#twitter	{
			width: 77px;
			height: 60px;
			background: url(/images/twitter.jpg) no-repeat;
			float: left;
}
#mail		{
			width: 74px;
			height: 60px;
			background: url(/images/mail.jpg) no-repeat;
			float: left;
}

Next, head back to the style sheet to add some CSS to the new DIV’s. The social div will be the wrapper for the twitter and mail icons. Set the margin for this to -10px auto 0; this will ensure the div stays central at all times, the -10px is just to move the div more towards the logo. Give the twitter and social icons their dimensions and background images – remember to float them to the left so they stay in the social div side by side.

Now check that the code we’ve just done is behaving as we want it to.

<div id="tweet">
	<div id="twitterfeed">
		<div id="twitterul"
			<ul id="twitter_update_list"></ul>
			<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
			<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/HenryDurdan.json?callback=twitterCallback2&amp;amp;count=1"></script>
	</div>
</div>

Now to add the latest twitter feed. This looks like a lot of code, however its really not in fact most of it you can get through your twitter admin area. Add a tweet div this will wrap the entire area where the latest tweet will sit and the follow me link. Next, add another div with the ID of twitterfeed, this is where the latest tweet will sin inside of.

To get the Twitter HTML Code login to your Twitter Profile and head over to “Settings” and click the link that says “You can also add Twitter to your site here” Grab the HTML code and paste it in between the twitterfeed div.

/*
	TWEET
*/

#tweet					{
						width: 960px;
						height: 90px;
						margin: 0 auto;
}
#twitterfeed			{
						height: 90px;
						width: 682px;
						background: url(/images/twitterfeed.jpg) no-repeat;
						float: left;
}
#twitterul ul li        {
						list-style: none;
						width: 470px;
						float:right;
						height: 60px;
						margin-top:
						25px;
						font-family: georgia;
						font-size: 14px;
						padding: 5px 15px 0px 0px;
						color: #0074AE;
}
#twitterul ul a         {
						list-style: none;
						color: #784829;
}
#twitterul ul a:hover	{
						border-bottom: dotted 1px;
}

Back in the style sheet lets start to style all those ‘tweet’ divs we just put in. The CSS is really just basic stuff such as remove text decorations, list-styles, styling fonts and muscling it into shape with margins and paddings.

Again lets check to make sure all the code and CSS has worked as we want it to. Which it has so it’s all good.

	</div>
	<a href="http://twitter.com/henrydurdan"><div id="followme"></div></a>
	</div>

Next to add the followme div, outside of this add a HTML Link to your twitter profile. My Twitter.

#followme			    {
						height: 90px;
						width: 126px;
						background: url(/images/followme.jpg) no-repeat;
						float: left;
}

To finish off the latest tweet section style the followme div, set the height, width, background image and remember to float to the left.

Now the latest tweet section should look like this, my latest tweet in the bubble and the follow me bird to the right.

<div id="bottomsoil">
	<div id="comingsoonwrap">
		<div id="comingsoon"></div>
	</div>
</div>

Finally set yourself up three new divs at the bottom underneath our previous code, bottomsoil, comingsoonwrap and comingsoon.

/*
	BOTTOM SOIL
*/

#bottomsoil				{
						width: auto;
						height: 247px;
						background: url(/images/bottomsoil.jpg) repeat-x;
}
#comingsoonwrap			{
						width: 960px;
						height: 247px;
                                                margin: 0 auto;
                                                padding-top: 80px;
}
#comingsoon				{
						background: url(/images/comingsoon.jpg) no-repeat;
						width: 312px;
						height: 69px;
						margin: 0 auto;
}

Style the bottomsoil div with some basic background repeats, dimensions, margins and paddings.

Check that what we’ve done works and all the CSS styling has behaved exactly how we want it.

Add Some jQuery

Now to throw in some jQuery to make it more dynamic, what we want to achieve is simple javascript – when the page loads the latest tweet is hidden and when the twitter bird is toggled the latest tweet will slide down and up.

		<script type="text/javascript">
			$(document).ready(function() {
 			 $('#tweet').hide();

  			 $('.click').click(function() {
    		 $('#tweet').slideToggle('slow');
   			 return false;
 			 });
 			 });
		</script>

In the head tag add yourself some jQuery. When the document is ready we want to hide the tweet div, then when the twitter bird (with the class “click“) is clicked we want it to preform the function of slideToggle which will hide and show the tweet section at a slow speed.

With this javascript in place when the page loads now the tweet div will be hidden and the coming soon section will be at a higher position. When the twitter bird is toggled the coming soon section will slide to reveal or hide the latest tweet. This is just a really nice and easy feature that makes the page feel more dynamic than a static html page.

There you have it, a very simple step by step tutorial with some easy CSS and jQuery to create a nice looking landing page for new websites. What do you think of this tutorial? Don’t hesitate to tell me, any feedback or sharing of this post will be appreciated.

View Live Demo

View How To Create The Logo

The Step By Step Tutorial

Create yourself a new document with the dimensions 600x315px, colour mode RGB Color – 8 Bit and set yourself a white background.

Download and Install the font HandVetica. Type out the text “TheDesignersYard” at 70pt in black with the anti-aliasing method of crisp.

Next, go and grab yourself a high res grungy paper texture from Bittbox, I have used the last one on the page. Drag the paper texture onto the canvas and shrink it vertically – this will add a little more ‘crinkle’ texture and lay the layer over the text.

With the paper texture over the text layer, head to the layers palette, make sure the text and paper texture are next to each other in the palette – hold down the “alt” key whilst clicking inbetween the two layers. This will now overlay the paper texture right into the text. Nice and easy with no fuss.

Go ahead and grab yourself another grunge paper texture from Bittbox this time I chose the first one. Bring the texture onto the canvas and again shrink it vertically however this time down to the same height as the text.

Once you’ve positioned the texture where you want it – shut the visibility of this layer off and lock it up. Switch to the magic wand tool (W) – on the text layer select the area outside of the text and the centers of the letters i.e. ‘e’ ‘d’.

Switch back to the second texture layer unlock it and turn the visibility back on, now cut the pixel that you have selected (CMD+X). Now you should be left with the text “TheDesignersYard” in the texture you had. Next, desaturate the layer (CMD+SHIFT+U).

Next, change the blending mode to overlay and whack the opacity down to around 70% – this just adds extra texture to the text.

Find yourself a cracked ‘ground’ texture or use the one I have from TextureVault. Duplicated the texture over the text or if the texture is high res shrink to fit. Next desaturate the layer (CMD+SHIFT+U).

With the layer desaturated set the blending mode to overlay and change the opacity down to 90%.

Open yourself up a new layer and select a soft edged brush, set the colour to white and paint over the top half of the text.

Select the outside of the text layer and delete this from the white overlay layer so you are left with just the top portion of the text in white.

Change the blending mode to overlay and drop the opacity all the way down to 15%, to give the effect of light coming from above.

Next, start to make the grass – use the file above by duplicating the different varieties of strands to make your layer of grass.

Now that you have perfected your grass and are happy with it, switch to the eraser tool (E) and select yourself a soft brush. Lightly soften the bottom edge of the grass, also erase some of the grass that covers the letters – for example you can see where I have made the ‘g’ visible, this will help add more depth.

Next, take my pre-made soil texture and position it under the grass. I achieved the soil look through a variety of different textures and colours. It’s just the way I want it, feel free to experiment with it.

Switch to the eraser tool (E), change to a soft brush with a texture and start to shape the soil – whilst doing this remember that the effect you are trying to achieve is soil, so make it look crumbly and realistic.

Now the soil is shaped and you’re happy with it duplicate the grass layer, flip it vertically and change the opacity down to 40%. Next shift the duplicated layer behind the soil leaving the tips showing. This will just finish the soil off and give it a more realistic feel.

Now to finish off that soft edge we left on the grass earlier. Duplicate the grass layer and again flip in vertically, erase the majority of the grass leaving the tips. Next, shift this layer up to the soft edge to really add realism to the grass.

Next, Grab yourself a bird and place it in the top right corner of the text and add a white 1px outside stroke to the layer effect.

Finally open up the layer style panel for the text layer and add yourself a #87a20e 1px stroke to help blend the grass and text together whilst added a definitive line between the background. You can also go around the layers with the burn and dodge tool to make the image have some depth.

There you have it, a step by step tutorial on how I created TheDesignersYard Logo, granted I’m not sure if this will be the final logo, therefore it’s open to suggestions. Let me know if you like it, hate it or have a suggestions. Any feedback will be appreciated.

**Please do not steal this as your own and if you do make one with your own text be sure to give a link to this tutorial as it maybe the final logo for The Designers Yard. Thanks.

Learn How To Make A Coming Soon Page – Including This Logo