All posts in Tutorials

Create A Web Design Portfolio Layout In PhotoShop

by The Web Squeeze on July 20, 2010 in Tutorials with 15 Comments

Portfolios can be very hard to create when you don’t have inspiration or are just beginning in the web design field. In this tutorial you will be exposed to simple techniques as well as a few more complex skills. When you’ve completed the tutorial your new layout will look like this:
portfoliolayout
Enjoy!

Step 1

Create a new document (w)1360px x (h)1900px background #ffffff
Note: To turn on your ruler and guide lines you must first go to View>>ruler and that turns on your ruler. To turn on your guide lines press CTRL + ; or CMD + ;
Create New doc

Step 2

Now drag the left guide line to the 200px line and on right drag it to the 1160px mark. There should be 200px of space on both sides leaving 960px in between.

Space 200px

Step 3

Select the rectangle tool color #00000 and create a rectangle box about 50px in height at the top of your canvas.
Note: The blue lines that are horizontal are 1px solid #00cef3.

top background

Step 4

Now Select the type tool color:#00cef3, font: steiner, size: 54px, and create a name for your website. I’ve chosen Abstrolio.

choose name

Step 5

Select the custom shape tool panel and choose any symbol for your logo. I’ve chosen the seal custom shape. After you’ve gotten your custom shape, right click on the shape layer>>blending options. Select gradient and double click on the gradient bar. Left color:#00cef3, right color:#7cf4ff then press ok. Now select the type tool and add one letter to your logo symbol.

Step 6

Select the type tool font: veranda, size:14px, color:#fff and create your menu links. The most common portfolio links are Home, About, Services, Portfolio and Contact. After you have your menu links created select the rounded rectangle tool color:#00cef3 and create a rectangle behind the home word (for hover purposes). Then highlight just the home text and change the color to #000000.

menu links

Step 7

Next we will be creating our full width page slider. Grab any image you would like and create a full width slider for your portfolio layout. The height of the image should be 400px x 1360px wide.
full page slider

Step 8

Select the type tool font: steiner, size: 24px, and align text center, then create a brief description about your company or service.

Step 9

Now we’re going to create a press effect with the line tool. Select the line tool 1px color:#eaeaea and create a 1px line across the document right under your brief description. Then create a new 1px line color:#fffff right directly under your first line and that should give you a press effect.

Step 10

Select the type tool font: steiner, size: 24px, and create one of the headings for your portfolio. Then select the type tool again. Change the font to arial and the size to 13px and create
dummy text for your paragraph. I usually just use lorem ispum.
text box 1

Step 11

Now select the rounded rectangle tool color:#00cef3 and create a small rectangle. Then create a read more text color:#ffffff over your button.
button

Step 12

Now add your heading, paragraph and button to a group and duplicate the group 2 times. Then change the other 2 headings.
Duplicate paragraph

Step 13

Earlier in this tutorial we created a 2px press effect. Copy and duplicate that layer and drag it under your headings. It will all be one line but if you select the eraser tool and erase the space in
between, each heading press effect will be separated.
Seprated

Step 14

Now select the rectangle tool color:#000000 and create a rectangle box; height 850px to hold our portfolio items and text. There should be white space below the portfolio container.
portfolio background

Step 15

Select the type tool font: steiner, size: 24px, color:#ffffff and create the portfolio title and then create a another brief description that describes your service.
describes service

Step 16

Next we’re going to create our portfolio items. We’re going to have 3 items per row with 10px to the left and between each item. The height of the box is 300px and the width of it is 310px.
box background

Step 17

Now add some portfolio items to your portfolio section.
Add to Portfolio

Step 18

Select the type tool (Click and hold to bring up single line text) font:arial, size:13px, and create your copyright text. Then hit your spacebar and to the right create the top text. Now you’re finished
and should have a nice portfolio layout.
Finish
If you would like to download the .psd file for this tutorial, click here.

Sequential Fade In – JQuery Plug-in

by The Web Squeeze on July 7, 2010 in Tutorials with 17 Comments

Sequential fade ins (the action of fading in elements one after the other) have the ability to draw the user’s attention to a certain portion of your content. They can also give a professional touch to your jQuery photo galleries. I have created a jQuery plug-in that makes the process of sequentially fading elements extremely simple.

Code + Documentation

(function(jQuery) {
jQuery.fn.fadeInSequence = function(fadeInTime, timeBetween)
{
	//Default Values
	timeBetween = typeof(timeBetween) == 'undefined' ? 0 : timeBetween;
	 fadeInTime = typeof(fadeInTime) == 'undefined' ? 500 : fadeInTime;

	//The amount of remaining time until the animation is complete.
	//Initially set to the value of the entire animation duration.
	var remainingTime = jQuery(this).size() * (fadeInTime+timeBetween);

	var i=0; //Counter
	return jQuery(this).each(function()
	{
		//Wait until previous element has finished fading and timeBetween has elapsed
		jQuery(this).delay(i++*(fadeInTime+timeBetween));

		//Decrement remainingTime
		remainingTime -= (fadeInTime+timeBetween);

		if(jQuery(this).css('display') == 'none')
		{
			jQuery(this).fadeIn(fadeInTime);
		}
		else //If hidden by other means such as opacity: 0
		{
			jQuery(this).animate({'opacity' : 1}, fadeInTime);
		}

		//Delay until the animation is over to fill up the queue.
		jQuery(this).delay(remainingTime+timeBetween);

	});	

};

})(jQuery);

.fadeInSequence( [ fadeInTime ], [ timeBetween ] )
fadeInTime: How long each element takes to fade in (in milliseconds)
timeBetween: How much time to wait before the next element fades in (in milliseconds)

The .fadeInSequence() method animates the opacity of the matched elements one element at a time.

The default value for fadeInTime is 500ms, and the default value for timeBetween is 0ms. The method is overloaded, so the following are all valid function calls.

$("wrapper p").fadeInSequence();             //Elements will each fade in over a duration of 500ms with no pause between each element
$("wrapper p").fadeInSequence(1000);       //Elements will each fade in over a duration of 1000ms with no pause between each element
$("wrapper p").fadeInSequence(300, 500);  //Elements will each fade in over a duration of 300ms with a 500ms pause between each element

Demo

</p> <p>Your browser does not support iframes.</p> <p>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sequential Fade In</title>
<style type="text/css">
	#fadeIn{position: absolute;top: 10px;left: 10px;}
	#fadeInFadeOut{position: absolute;top: 10px;left: 100px;}

	#wrapper{margin-top: 50px; width: 330px;
			 height: 150px; border: 1px solid #000000;}

	#wrapper > *{margin-right: 10px; width: 100px; height: 100px;
				float: left; display: none;}

	#box1{background-color: #CCCCCC; left: 0px;}
	#box2{background-color: #FF0000; left: 110px;}
	#box3{background-color: #0000FF; left: 220px;}

</style>

<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.min.js'></script>
<script type="text/javascript" src="fadeinsequence.js"></script>

<script type='text/javascript'>
$(function(){ 

$("#fadeIn").click(function() {
	$("#wrapper").children().hide().fadeInSequence();
	});

$("#fadeInFadeOut").click(function() {
	$("#wrapper").children().hide().fadeInSequence().fadeOut();
	});

});
</script>

</head>
<body>
<div id="wrapper">
	<div id="box1">Box1</div>
    <div id="box2">Box2</div>

    <div id="box3">Box3</div>
</div>
<button type="button" id="fadeIn">Fade In</button>
<button type="button" id="fadeInFadeOut">Fade In+Fade Out</button>
</body>
</html>

The Fade In + Fade Out demonstrates that the queue is maintained for each element until the end of the entire .fadeInSequence() animation. This helps retain the “chainability” that we’ve grown to love with jQuery.

The plug-in was created with some simple math. In order to keep the queue equal between all animated elements, a varying delay was placed at the end of the fadeIn’s. This visual representation demonstrates how the plugin operates. In this example, the fadeInTime is set to 500 and timeBetween is also set to 500.
fadein

Questions? Comments? Bugs to Report? Give us your feedback in the comment section below.

Improve your jQuery Selectors: 5 Quick Tips

by The Web Squeeze on June 28, 2010 in Tutorials with 17 Comments

jQuery is a wonderful way to make Javascript usable for everyone. For those not familiar with jQuery, I suggest you load up jquery.com and have a read through. I’ve and few other authors have also written a few jQuery articles on this very site in the past which you might have read. Here are a few that might interest you.
Build Fancy Tabs in JQuery that Fade Text
jQuery – Javascript Made Easy
Tips for jQuery Live Events
jQuery Plugin Tutorial

This post is about going through previously written code and looking at ways we can improve it, both the readability and the efficiency. Mostly these are little snippets of jQuery that perhaps don’t get noticed during a browse through the documents or are rarely useful. So, I’ll shut up and we’ll get started!

1. Don’t Select by Class if Possible.

Native Javascript contains two selectors: getElementById and getElementsbyTagName. You will notice there is no function to select elements by class. jQuery and most libraries do offer this function, and it’s not hard to write your own function to do it. However, due to it not existing natively, any custom function will be slower than using the two native functions above. So if you can avoid it, select elements by ID or by Tag Name over class where ever possible. Sometimes it is unavoidable of course, but if you can avoid it, do.

2. Save Selectors or chain ‘em up

See what’s wrong with this code?

$("div#elem").hide();
$("div#elem").css("width","200");
$("div#elem").show();

Nothing is exactly wrong. However a lot could be improved. Each time $(“div#elem”) appears, jQuery does a search through the DOM for it. In that snippet of code, jQuery has to search three times for the element. Why make it do all the work? Either chain the functions like so:

$("div#elem").hide().css("width","200").show();

Or save the element (also known as caching):

var myElement = $("div#elem");
myElement.hide();
myElement.css("width","200");
myElement.show();

Any element that you know you’re going to be referencing loads, save. However if you’re just using it in one block of code, I’d use chaining.

Caching also applies to the “this” keyword. Consider this loop:

$("div").each(function(i) {
$(this).addClass("myClass");
if($(this).hasClass("newClass") {
$(this).addClass("anotherClass");
}
});

While this might look all cosy, look how many times jQuery has to select the current element using $(this). This loop is much better:

$("div").each(function(i) {
var $this = $(this);
$this.addClass("myClass");
if($this.hasClass("newClass") {
$this.addClass("anotherClass");
}
});

When saving $(this) to a variable, I always name that variable $this, adding the dollar symbol at the beginning. This is because I can’t call a variable “this” as it’s a reserved word.

3. Contextual Information

If you can provide extra information about the location of an element in the DOM, do. For example:

$(".myElem")

Will work fine, however if you can do this:

$("div.myElem")

This tells jQuery that the item with the class “myElem” must be within a div. So jQuery can use getElementsByTagName first to narrow down the search.

If you’ve already cached an element (see Tip 2) then you can actually add it as a second parameter when selecting another element:

$(".myElem", elementYouCachedInAVariable);

This tells jQuery to search for items with a class of “myElem” from within the cached element, again shortening the amount of work jQuery has to do.

4. Avoid Extra Traversing

The most common example of this is as follows:

$("elem").find("p").hide().parent.find("h2").hide();

What happens here is we find paragraphs within an element, hide it, then select those paragraph’s parent again, then find any h2 elements within that element, then hide it. What’s wrong? We start at the parent level, then find paragraphs within it, but then go back up to parent level to find the h2s within the parent. Why not use the siblings function?

$("elem").find("p).hide().siblings("h2").hide()

But this can be even further improved, as the find() function can take multiple selectors:

$("elem").find("p, h2").hide();

Take a look at the original code and what we have now. Much nicer!

5. Make use of andSelf()

Rarely used as much as it should, andSelf() is useful for chaining the previous selection. For example, take code such as this:

$("div").find("p").addClass("myClass").parent().addClass("myClass");

That would seem the only logical way to do things. But no! Check this out:

$("div").find("p").andSelf().addClass("myClass");

Which again, saves us repeating the addClass() function and generally is nicer to look at.

If you have any questions, please leave a comment or grab me on Twitter: @Jack_Franklin.