Graphic and Web Design Blog -Resources And TutorialsTutorials

Create Surreal Photo Manipulation with A Man Without Face

Mohammad Jeprie — Mon, 15 Mar 2010 21:59:36 +0000

First, I’d like to thank Joubert Quentin a.k.a hybrid-creation for allowing me to create this tutorial based on his image, Your Skull is Red. You can see his portofolio in DeviantArt or his personal site. Before we start, take at look at the image we are about to create below.

In this tutorial we will learn how to create selection, adjusting color, and adding depth to image.

Source Needed

For this tutorial, we will need these images:

Water Tower from fairiegoodmother.
Premade Background from night-fate.
Brocade Victorian Gustov 3 from falln-stock.
Top Hat from luna-8.
Old Top Hat collection from azenor-stock.

Step 1: Selecting The Victorian Man

We’ll start by cutting this man from his background. For this type of selection, I prefer to use the manual way, path. From paths panel create new path then using pen tool draw path around the man. As you can see i don’t care much about his face because we will remove it later.

Step 2

Once we’re done creating path, hit ctrl+Enter to change it to a selection. Press ctrl+J to duplicate the selection to a new layer. You can also do this by selecting menu Layer > New > Layer via Copy. To help focus on the man, hide Background by clicking its eye icon.

Step 3: Removing Face

To remove his face we can just use an eraser.

Step 4: Fixing Floating Hat

Now, we need to create his bottom hat. To do this we must draw manually using clone tool. Activate clone tool and check Sample All Layers. This option allow us to clone on a separate layer and keep the original picture safe. Then create a new layer. With clone tool sample a similar color from his hat by alt+click it.

Step 5

With clone tool, draw his bottom hat. This might take a while, I spend 10-15 minutes for this. To keep it natural I suggest you to use different clone source every time you click.

Step 6

Using lasso tool, create ellipse selection underneath his hat and fill it with black.

Step 7

Add Gaussian Blur (Filter > Blur > Gaussian Blur) to give it a soft realistic shadow.

Step 8: Fixing Collar

We need to manually draw his back collar. The step is a bit similar to what we do when creating bottom part of his hat. Create a selection in collar shape, sample color from his front collar, then draw it directly with brush tool. To avoid flat color we must use many color source from his front collar.

Step 9

Draw shadow inside his collar and add another Gaussian Blur.

Step 10: Import Man Without Face To New Background.

Now we’re done with this man. Select all (ctrl+A), click Edit > Copy Merged (ctrl+shift+C). In our new background paste the man (ctrl+V) and resize it (ctrl+T). See image below for reference.

Step 11: Dodge and Burn

We still need to fix lighting on the man. To do this, we will use non-destructive burning and dodging. First, alt+click New Layer icon. In the dialog box select Use Previous, Mode: Overlay, and Fill with Overlay.

Step 12

See picture below! The light source is behind the man so his back must be lighter than his front. To fix this, paint with burn tool to make it darker and dodge tool to make it lighter.

Here’s what we see if the layer is in Normal blend mode.

Step 13: Add Shadow

Off course this man must have shadow. We know that the light source is behind him, so the shadow must be in front of him. Duplicate the man layer and hit ctrl+T. Hold ctrl and move its corner until it lies on the ground.

Step 14

We don’t want to see his twin lying on the ground right? We want his shadow.

So, here’s the trick. Hit D, this will change foreground color to black. Then hit shift+alt+delete, this will fill layer with foreground color (in our case, black).

Step 15

We still need to focus on the detail. As you can see below, cane’s shadow moves a little and there’s a hole between his feet. I fix this by doing minor transformation and painting with black.

Step 16

Add Gaussian blur to create a soft realistic shadow.

Step 17

Farthest shadow need to be more blurry. So, select those part, soften the selection with Feather (Select > Modify > Feather), and another Gaussian Blur. Here’s a tip: because we’ve just perform a Gaussian Blur we can just hit ctrl+F to repeat it again. If you want to use different radius use ctrl+alt+F.

Step 18

Add layer mask and add black to white linear gradient to make the shadow fades away.

Step 19: Add Water Tower

Selecting the water tower with path is not a good idea. You’ll get frustrated doing it. The easiest and smartest way is using color information in channel. Our image is in RGB, that’s Red, Green, and Blue. The water tower stands in front of a clear blue sky. So, the sky will be very visible in Blue channel. Now, I want you to duplicate Blue Channel by dragging it to the new channel icon.

Step 20

Add Levels (ctrl+L) with this setting.

You can see that the sky has magically disappear. Try that with pen tool!

Step 21

Some part of the water tower is turning white. We can fix it easily by painting it with black.

Step 22

Here’s the basic principle of masking: “White reveals, Black conceals.” We want to select the water tower, not the sky. So, the sky has to be black and the water tower has to be white. Wait! Our image is completely wrong. That’s easy, just hit ctrl+I to invert it.

Step 23

Ctrl+click blue copy channel to convert it to a selection. Copy the image and paste it behind our faceless man.

Step 24

You might notice that the there’s a small part of the sky in the water tower. Here’s one easy way to fix it. Ctrl+click water tank layer. Contract selection by 1 px (Select > Modify > Contract). Click add layer mask icon.

Here’s the result.

Step 25

Fix the lighting with non-destructive dodging and burning. We have done this in step 11.

Step 26: Adding Depth of Field

It’s time add depth to this image. Cut one of the hat collection from old top hat set. Paste it and place it near the edge of the canvas. Hit ctrl+T and rotate it to give a more dynamic movement.

Step 27

Give it a Gaussian Blur. Because this hat is near us, we’ll give it a big radius.

Step 28

Add another hat and give each different radius depends on its position.

Step 29: Add shadow

Dont forget to give shadow to the water tower. The step here is similar to what we did when creating the man’s shadow. Duplicate water tower layer, fill it with black, transformation, add Gaussian blur, and fading it with gradient mask layer.

Step 30

Again, don’t forget to add shadow for those hats.

Step 31: Final Adjustment

I want to add more blue to the sky. For this, I add adjustment layer Channel Mixer on top of all layers with these settings.

Step 32

Paint everything with black except the bright sky in top right. Now, only that part is affected by the Channel Mixer.

Step 33

To add more contrast add adjustment layer Levels with this setting.

Step 34

Paint everything with black except the faceless man.

Step 35

Finally, I want to make this picture warmer. Add an adjustment Layer Photo Filter with Warming Filter (85), Density 25%.

Conclusions

And here’s what we have now. I hope you like the final effect. If you have better tips about the technique used here I’d love to hear it.

Download FREE PSD File!!!

To help you learn this tutorial you can download the psd file here.

Create A Stylish And Sleek Play-Station Portable Icon

ES Productions — Thu, 11 Mar 2010 10:00:58 +0000

In this Photoshop tutorial we’ll learn how to create a stylish and sleek-looking play station portable. This is very detailed, but advanced tutorial, so if you have basic knowledge and understanding about Photoshop you should be able to easily keep up and let me guide you through this PSP creation process. Each step is followed by screenshots to give you a better understanding. Note that you can always improve and add more details to such designs – it’s hard to understand at first when to stop and when less is more, but I am sure you will get those skills automatically after you’ve done several tutorials and some tweaking by yourself!

This is what we’ll be creating today! Looks good? Great – let’s get started:

Step 1

So at first, let’s create a New Document with sizes – 900×600 px. We will starting by creating the background.

Create a new layer (press Ctrl + Shift + N) fill it (with any color).

Open the Layer Style window and apply this Gradient Overlay.

This kind of gradient you should get:

Step 2

I’m going to use guide lines to create the PSP shape, so let’s place all the lines that we’re going to need. (To activate the guidelines, you have to activate the rulers at first (CTRL + R) then what you do is click on the ruler, then hold and drag it into position).

For the Horizontal guidelines set: 250px, 280px, 510px, and 540px and for the Vertical guidelines: 120px, 200px, 660px and 740px.

TIPS:

CTRL + ; will hide or show the guidelines.
Use the move tool to move the guidelines around.
Slide the guidelines back to rulers to remove them.

Pick the Rounded Rectangle Tool (U), set radius to 10px and do the same like I did on the picture below:

Now do the same as I did in the next picture. I used another color so you could see better difference:

Step 3

Now create a new layer, set the Brush Tool to 411px and draw two rounded circles as seen in screenshot below:

Now set circled brush layer behind the other layer and erase the parts you don’t need:

Step 4

Create a new layer, make selection with Lasso tool(press L to get it) similar like in the screenshot below and fill it:

Duplicate it 3 times more and set the others to each corner of the shape. You can go to Edit, Transform, Flip Vertical and/or Edit, Transform, Flip Horizontal to help you rotate the shapes.

Now select all the (parts) layers (Hold Ctrl and click the layers), right click and select ”merge layers” and add these Blending options:

Step 5

Now with your psp shape still selected let’s create a new layer, select the brush tool and choose white.

Set 35px for the brush tool and then select the Pen tool (P) and create a line like I did. then right-click and select “stroke path”, choose brush and hit OK.

After that click right click and click “delete path” and set the Opacity (of the layer) to 20%.

Create a new layer, set the brush tool to 16 px then select your Pen Tool and create something like this then right click and select “Stroke Path” – choose brush and click Ok. Right click again and click “Delete Path”.

Select the Eraser and erase the unnecessary parts:

Create a new layer, set the brush tool to 170 px and draw the left side to give it shining effect:

Then set the Opacity to 62% and erase the parts you don’t need.

Now select your Marque Tool (M) and move your selection using your arrow keys a bit to the right and inverse your selection (Ctrl + Shift + I) and press Delete. Finally press Ctrl + D to De-select your selection.

Step 6

Let’s create a new layer and create a circle using the Elliptical Marquee Tool (M) (hold down shift to draw a precise symmetrical circle) and fill it.

Open the Blending Options menu and adjust the settings like in image:

Create a new layer and create a smaller circle to fill it:

..and add these Blending Options:

Step 7

Create a new layer and add a create a small circle like this,fill it:

Add these Blending Options:

Step 8 – Adding text and details

Now select the Text Tool (T) and type SONY with a dark color. I used the font Engravers MT, type UMD with the color code: (#a8a8ad)

..then create something like this using your pen tool (P) to achieve little perspective:

Set your Brush Tool to 2 px, then select your Pen Tool again and stroke it with a gray color (mine is #404041).

(you can duplicate it and set a darker one in its side like i did) ..then duplicate it (Ctrl + J) and go to Edit, Transform, Horizontal Flip and set the duplicated layer on the other side of the circle.

Step 9 – PSP Text

Now create a new layer and using your Pen Tool (P) let’s create the PSP.

Lets begin with the “P” – make sure your Brush Tool is set to 2px, select your Pen Tool again and create something like in the screenshot below:

Stroke it with a white color (right click on selection), delete the path.

Follow the same steps to do letter “S” as well.

..create selection, stroke it… and do the same with the third letter “P”.

Now add these Blending Options to letters:

Step 10

Create a new layer and now we will add a little bit more details in design. Create selection like in the screenshot below with your Polygonal Lasso Tool (L):

Fill it with white and set it below the psp shape layer. DONT DESELECT THE SELECTION.

Select your Brush Tool, set it to 42px, and brush something like I did from the corners to get some shadowing and 3D effect.

Okay, we are done with bottom side, now let’s get to the top.

Create selection like in the screenshot and set it below the PSP shape:

..like this:

Now set these blending Options:

We need the same effect on the other top side of ou gadget right?

Just duplicate the layer and go to Edit, Transform, Flip Horizontal and set it on the other side of the PSP shape. Let’s compare our outcome which is petty much finished, but we will add some more details to make it look really good:

Step 11 – Final Tweaking

You can brush with a black color at the bottom of the PSP like i did in the next picture to achieve more 3D like effect:

Select all the layers EXCEPT THE BACKGROUND (Hold down Ctrl), right click and select merge layers. Hold down Ctrl and click the PSP layer to make a selection, you should get selection like this using your Pen Tool (P):

Right..now set your Foreground Color to white, right click, go to Fill path… and hit OK then set the Opacity to ~ 36%, set your brush tool to a soft brush of 200px, set the Opacity of the brush tool to 50% and erase the parts you don’t need anymore like screenshot below:

Now Duplicate the PSP layer (Ctrl + J) and go to Edit/Transform and select Rotate 180 degrees, set it below the other layer.

Now lets add some reflection, shall we?

With the Duplicated layer selected go to Filter, Blur, Gaussian blur and set the radius to 3.8px:

Now set the Duplicated layer’s Opacity to 60%. Select your eraser and set it to a soft brush of ~185% set the eraser’s Opacity to 50% and erase like i did to achieve natural reflection:

Congatulations – you’re done!

If you have any questions about any of the steps, don’t hesitate to ask!

How to Create a Nifty Dynamic Shadow with jQuery

Daniel Kurdoghlian — Mon, 08 Mar 2010 09:00:15 +0000

First I want to welcome you to my very first article for 1stwebdesigner. Today I’ll show you how to create a very nifty looking dynamic shadow with a few teaspoons of jQuery, a pinch of CSS and some transparent PNG’s as Base. I’ll explain every line of used code, so you can easily follow along and create your own awesome looking dynamic shadow powered by jQuery.

Introduction

When I first published my jQuery shadow experiment, I got a huge response from the community and a lot of people asked me, how I achieved this effect and if I’m going to write a tutorial for it – So here it is now!

If you want to follow along with the source files, you can download them by clicking here (*.zip archive). You can also take a look at the final demo here.

Step 1: Creating the transparent PNG’s

First we need to prepare all PNG files we’re going to use. We’ll need following image elements:

The on/off switch (needs two states)
The light source (in this case, a sexy light bulb – also with two states)
The object which is going to drop the shadow (here it’s going to be a logo)
and last but not least, the matching shadow of our logo

We’re going to use the CSS sprite technique for reducing HTTP requests. So we’ll need 3 images (otherwise we would need 6 separate images and twice as much HTTP requests).

1st PNG Image: The Light-Switch Sprite

2nd PNG Image: The Light-Bulb Sprite

3rd PNG Image: The Logo Sprite

I’m not going to explain how to create those images, as I’ll concentrate on the source code. If you want to use your own images, just make sure to save your images as PNG 24 , so your transparency gets saved too.

Step 2: Preparing our HTML, CSS & JS files

To make your files well-arranged, we’re going to create following folder structure for our files now:

The root folder (dynamicShadow) will contain our index.html with all layout containers inside of it. Inside of the img folder, you should put all three PNG image files you created or copied from step 1 above. Inside the css folder create a file named style.css. There we’ll style all layout elements we used in the html file. And the magic will happen inside of the js folder. There we’ll create a file named script.js. It will contain our jQuery JavaScript code.

If you have done those two steps above, we are now ready to go on and finally let the magic happen!

Step 3: Writing the HTML file with all containers we will use

First we need to include the files we created in the previous step, into the header part of our HTML.

First our stylesheet file:

Now we’ll attach the latest version of jQuery itself and jQuery UI from Google’s AJAX Libraries repository:

Last but not least we need to attach our JavaScript file (script.js):

Our header should look something like this now:

We can start with the body part of our HTML now:

We’re going to need following div’s with the same id’s for the next step, where we are going to style our containers.


	
	
	
	
	Please activate JavaScript!

For explanation:

“switch” will be our element, which is going to turn the light bulb on and off.
”light-bulb” and “light-bulb2” are our containers with the actual light bulb (I’ll explain later why we need it twice). Just make sure you don’t forget to add the “off” class to the outer light-bulb container.
”logo” is our element which is going to drop the shadow.
”logosh” will contain the appropriate shadow for the object.
”infobox” is just a bonus and not mandatory for our effect. It will contain some status messages. Additionally it contains a message for all (bad, bad) users, who are visiting your site with deactivated JavaScript. You can write them a message there. Take care at your diction, don’t be too evil to them ;).

Step 4: Let’s get some colors into our HTML file!

Now we’re ready to style our HTML with the CSS file we included into our header.

We will start with the info box. If you have chosen to include it, here is a styling suggestion:

body {
background:#3B4D61 url(../img/bg.jpg) repeat 0 0; }
#infobox {
	position:absolute;
	width:300px;
	bottom:20px;
	left:50%;
	margin-left:-150px;
	padding:0 20px;
	background:rgba(0,0,0,0.5);
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
	z-index:999;
}
#infobox p {
	display:block;
	color:#D1D8DF;
	font:bold 15px/10px Tahoma, Helvetica, Arial, Sans-Serif;
	text-align:center;
}

For body, an image is used to enhance the effect of shadow.For the #infobox we are using some CSS3 to make it prettier. The background is black and 50% transparent with the awesome rgba attribute and the corners are rounded with a 15px wide diameter through the Mozilla and WebKit specific attributes. The box will be 340 pixels wide (300 + 2 x 20) and placed centered on the bottom of our page. With the z-index set to 999 it will be the topmost element in our page so it does not get covered from our logo, the shadow or the light bulb.

Next is our switch:

#switch {
	position:absolute;
	bottom:50px;
	left:50px;
	width:80px;
	height:120px;
	background:url(../img/light-switch.png) -80px 0 no-repeat;
	cursor:pointer;
	z-index:100;
}

It will be absolute positioned to the bottom left corner of our page. The backgrounds X position is set to –80px. There we are using the CSS sprite technique the first time. The cursor is going to be a pointer, so the user knows that he can click it. z-index to 100. The logo, the shadow and the light bulb must get a higher z-index, so they don’t disappear behind the switch.

Now let’s style our two light bulb containers:

#light-bulb {
	position:absolute;
	top:20%;
	left:70%;
	width:150px;
	height:150px;
	background:url(../img/lightbulb.png) -150px 0 no-repeat;
	cursor:move;
	z-index:800;
}
#light-bulb2 {
	width:150px;
	height:150px;
	display:none;
	background:url(../img/lightbulb.png) 0 0 no-repeat;
}

The backgrounds X position of the main light bulb container is set to –150px. This is the “turned off” state of our sprite-image. The “inner light bulb” (light-bulb2) is set to “top left” (0 0), so it is the “turned on” state of the sprite. Later we will animate the opacity of it from 0% to 100% and create a smooth blend effect from the on to the off state and reverse. z-index to 800: It will be above the switch, above the logo and above the shadow but behind the info box. The cursor attribute is set to “move”. This way the user will get a nice, OS-based cursor which tells him he can move this object around.

Our last two containers are the logo with his shadow:

#logo {
	position:absolute;
	top:40%;
	left:20%;
	width:450px;
	height:150px;
	background:url(../img/logo.png) 0 0 no-repeat;
	cursor:move;
	z-index:700;
}
#logosh {
	position:absolute;
	width:450px;
	height:150px;
	display:none;
	background:url(../img/logo.png) 0 -150px no-repeat;
	z-index:600;
}

The main logo containers gets also the “move” cursor and the background position is set to “top left” again. This will show the main part of our logo sprite. z-index to 700. It’ll be above the shadow and above the switch, but behind the light bulb and the info box.

The shadow container gets z-index of 600 and the backgrounds Y position is set to –150px. It’s the shadow part of our logo sprite-image.

If you came this wide, your index.html file should look something like this in your browser (of course only, if you used the same image files of this tutorial):

Now let’s get this party started and add some spice to our page. We will write some JavaScript now!

Step 5: The magic starts to happen now!

Ok now let’s go with the interesting part of this whole tutorial. First we start with the jQuery’s main function:

$(function(){

});

This is the short hand code for jQuery’s document.ready(). Our whole script needs to be inside of this function, so it gets loaded, as soon as the DOM is ready.

Next we’ll define some variables and set the default text of our info box. The descriptions are inline as comments:

// shadow offset
var shadowOffset	=	1.08;

// the light switch
var lightswitch		=	$("#switch");

// outer light bulb
var lightbulb		=	$("#light-bulb");

// inner light bulb
var lightbulb2		=	$("#light-bulb2");

// center of light - X-axis
var lightCenterX	=	parseInt(lightbulb.width()/2);

// center of light - Y-axis
var lightCenterY	=	parseInt(lightbulb.height()/2);

// logo container
var logo			=	$("#logo");

// light and logo containers
var lightAlogo		=	$("#light-bulb, #logo");

// center of logo - X-axis
var logoCenterX		=	parseInt(logo.width()/2);

// center of logo - Y-axis
var logoCenterY		=	parseInt(logo.height()/2);

// shadow container
var logoshadow		=	$("#logosh");

// center of shadow - X-axis
var logoShdwCenterX	=	parseInt(logoshadow.width()/2);

// center of shadow - Y-axis
var logoShdwCenterY	=	parseInt(logoshadow.height()/2);

// info-box text container
var statustext		=	$("#infobox p");

// info-box default text
var defaulttxt		=	"Drag the light-bulb or the logo!";

// info-box text for hovering switch while state is "off"
var ontxt			=	"Let there be light!";

// info-box text for hovering switch while state is "on"
var offtxt			=	"Switch off the light!";

// set info-box text to default text
statustext.text(defaulttxt);

// start our main function (will be used later)
moveShadow();

For now, you can comment the last line out. moveShadow(); will be our main function which will change the position of the shadow.

Now let’s get dynamic and let us make the light bulb and the logo draggable. We’re going to use jQuery UI’s draggable interaction element to keep things easy.

// making the light and the logo draggable
lightAlogo.draggable({
	drag: function(event, ui){

		// change the statustext to "dragging + element id" state
		statustext.text("dragging " + $(this).attr("id"));

		// our main function which will move the shadow
		moveShadow();

	},
	stop: function(event, ui){

		// switching to default text when stopped dragging
		statustext.text(defaulttxt);

	}
});

While dragging, we’re going to set the status text of our info box to “dragging” + the id of the current element. So in our case it will be logo or light-bulb. When we release the mouse and stop dragging the current object, we revert the text to our default value.

Our two objects should now be draggable! Isn’t it easy with jQuery UI? :)
(There comes the “write less, do more” from, which is jQuery’s slogan.)

Again you can comment out the moveShadow(); function for now, if you want to try your code in the browser. This will be the main function which makes the dynamic shadow moving, while you drag either the light bulb or the logo.

With the following function, we’re going to change the default text of the info box to our on or off text when hovering:

// changing the info text when hovering the switch
lightswitch.hover(function(){

	if(lightbulb.hasClass("off")){

		// when lightbulb has the class "off" show this text
		statustext.text(ontxt);

	}else{

		// otherwise show this text
		statustext.text(offtxt);

	}
},function(){

	// hovering out will show the default text again
	statustext.text(defaulttxt);

});

If the light bulb has the class “off”, then show the “on text”, else show the “off text”. When hovering out, the default text will be shown again. Still easy, right?

Next is our function for calculating the opacity of our logo shadow, according to the distance of the light source. In our case the light bulb:

// calculating the shadow opacity according to the light bulb distance
function setOpacity(getDistance){

	if(lightbulb.hasClass("off")){

		// if the lightbulb has the class "off", opacity = 0 (no shadow)
		return 0;

	}else{

		// otherwise we calculate a suitable shadow opacity with this formula
		return (1.2 - getDistance /1000);

	}
}

If our light bulb has the class “off”, we’ll return “0″, which stands for zero opacity. No light, no shadow. Sounds logical, right? More interesting is the “else” part, where we’re going to use this formula “1.2 – getDistance / 1000” to calculate a shadow which will look quite good. getDistance /1000 will just move the decimal point 3 points to the left, giving us a usable number for the next calculation, where we are going to subtract it from 1.2 (which would be 120% theoretically).You can experiment with this value, if you are not satisfied with the results.

The next what we are going to do is to assign the things which should happen, when the user clicks on our light switch:

// assign the things, which should happen, when clicking the light switch
lightswitch.click(function(){

	// when the light bulb has the class "off" do following:
	if(lightbulb.hasClass("off")){

		// first remove the class "off"
		lightbulb.removeClass("off");

		// change the background position of the CSS sprite
		lightswitch.css("backgroundPosition","0 0");

		// showing the shadow of the logo with a fading animation
		logoshadow.stop().fadeTo(750,setOpacity(shadowDistance));

		// fade in the inner light bulb container (light is turned on!)
		lightbulb2.stop().fadeTo(750,1);

		// changing the status text to the "off text"
		statustext.text(offtxt);

	// else do following:
	}else{

		// adding the class "off"
		lightbulb.addClass("off");

		// move the background position of the switch back to original position
		lightswitch.css("backgroundPosition","-80px 0");

		// fade out the logo shadow
		logoshadow.stop().fadeTo(750,0);

		// fade out the turned on light (no more lights now)
		lightbulb2.stop().fadeTo(750,0);

		// changing the status text to the "on text"
		statustext.text(ontxt);

	}
});

A few things are happening now. Let’s get through it line by line.

First we need to differentiate if the lights should be turned on or off. For this we will check once again if the light bulb has the class “off” or not. If it has it, we’ll do following:

We will remove it right again.
Then we make use of our sprite image of the light switch and move it to the “on” position, which is “0 0″ / “top left”.
After this we are going to fade in the shadow of the logo. We are doing this with the setOpacity function, described before. For now you have to change “shadowDistance” to “1”, if you want to try it. We will get the variable “shadowDistance” in the next function.
Last things to do is to fade in our inner light bulb which is positioned via our CSS to get the “energized” part of the sprite image
and change the status text to the “off state”.

If the light bulb has not a class named “off”, we will do the opposite of above which is following:

add class “off” to our light bulb
move the image of the light switch up by 80 pixels, so it is turned off again
fade out the shadow
fade out the inner light bulb (the lighten up one)
and changing the status text to the “on state”

The last function we need is finally the one, which will move our shadow (and probably the most interesting one):

// the main function - our shadow mover
function moveShadow(){

	// save the current X position of the light bulb
	lightX			=	parseInt(lightbulb.offset().left) + lightCenterX;

	// save the current Y position of the light bulb
	lightY			=	parseInt(lightbulb.offset().top) + lightCenterY;

	// save the current X position of the logo
	logoX			=	parseInt(logo.offset().left) + logoCenterX;

	// save the current Y position of the logo
	logoY			=	parseInt(logo.offset().top) + logoCenterY;

	// save the value how far the logo is away from the light bulb on the X-axis
	distanceX		=	logoX - lightX;

	// save the value how far the logo is away from the light bulb on the Y-axis
	distanceY		=	logoY - lightY;

	// calculating and saving the value of the square root of those two distance values
	distance		=	Math.sqrt(Math.pow(distanceX, 2) + Math.pow(distanceY, 2));

	// calculating and saving the shadow distance with the offset we defined in our variables
	shadowDistance	=	distance * shadowOffset;

	// preparing the CSS value to put into the "left" attribute of the shadow container
	shadowPosLeft	=	(distanceX / distance * shadowDistance + lightX - logoShdwCenterX) + "px";

	// preparing the CSS value to put into the "top" attribute of the shadow container
	shadowPosTop	=	(distanceY / distance * shadowDistance + lightY - logoShdwCenterY) + "px";

	// finaly using the results of all above calculations to position our shadow and set the opacity
	logoshadow.css({ "left": shadowPosLeft, "top": shadowPosTop, "opacity": setOpacity(shadowDistance) });

}

This may looks a little bit weird and strange to you on the first sight, but it’s really not so difficult to understand and I used only some basic math formula for the calculations which I will describe you now.

Let’s get through it, line by line again:

lightX: Getting the current X position of our light bulb
lightY: Getting the current Y position of our light bulb
logoX: Same like 1. only with the logo container
logoY: Same like 2. only with the logo container
distanceX: Calculating how far the logo is away from the light bulb on the X-axis
distanceY: Calculating how far the logo is away from the light bulb on the Y-axis
distance: Calculating the square root of distanceX and distanceY using the Math.sqrt(); function and for the two values the Math.pow(); function, which stands for exponential power. The first parameter, in our case distanceX or distanceY is the parameter for the base and the second parameter stands for the power. For making it clear: On the paper you would write: distanceX² and distanceY²
shadowDistance: Multiplying the actual distance with the offset we defined at the top of our script where the variables are defined. We used this variable on click function of the light switch. So if you changed “shadowDistance” to “1”, you can now change it back to this variable.
shadowPosLeft: Making the left offset of the shadow ready, to use it in our last line.
shadowPosTop: Making the top offset of the shadow ready, to use it in our last line.
logoshadow.css(): finally we are changing the CSS of our shadow container so it gets correct positioned and has the proper opacity

That’s it!

The last thing you need to do is to uncomment the moveShadow(); function twice (only if you have commented it out). At first at the variables section and at last in the jQuery UI’s draggable function.

Your shadow is now dynamic positioned and also has a cool looking dynamic opacity, depending on the distance and position of both: The light bulb and the logo.

I hope you liked this tutorial and could follow it step by step. If you’ve done everything correctly, you should have ended up with something like this: DEMO.

If you had some troubles with any step or need further instructions or help, feel free to write your question into the comments section of this post so I can take a look at your question and help you out!

Thanks for reading and have fun trying and using it in your next project!

7 Very Useful Websites to Get Practical Fireworks Tutorials

Darren — Thu, 25 Feb 2010 10:00:17 +0000

Fireworks is the best software around for editing vector and bitmap and vector graphic. It helps you to rapidly prototype websites and application interfaces. Compared to Photoshop, there aren’t any decent online alternatives for Fireworks. There are a lot of new features in fireworks like CSS export and style effects and you should must give it a try.

Here’s how I came up with this list:

I’ve collected around 50 sites using the following criteria: all of them need to have practical and easy-to-follow tutorials on how to do something in Fireworks.
Then I sorted them and took the 7 most useful ones. I figured it might be better to do this and focus on quality (small number of sites, useful), then quantity (big number of sites, average.)

1. SmartWebby

What does it offers: SmartWebby offers 38 unique Fireworks tutorials. The most useful tutorials they have are below, under “Graphic design: Tutorials on Vector Graphics”. Under each of the sites I present, I’ll give you 2 sample tutorials there with a screen shot of the end result. So here are some of the tutorials on SmartWebby:

Cloud effect

Sunflower atwork

2. SixThings RapidFire Tutorials

What does it offers: SixThings gives you 11 amazing tutorials plus some other tips on how to be more effective in Fireworks. They named their tutorials “Rapid Fire” and I have no idea why, but I’m sure it has to do with them helping you learn this application very rapidly. Here are 2 of their best tutorials:

Extracting logos (Rapid Fire #8)

Dot Matrix Effect (Rapid Fire #11)

3. Imajine

What does it offers: They have 13 tutorials, and the end results they’re able to produce are fantastic. I found Imajine featured on many tutorial directory sites like Pixel2Life, and now, for the first time, they are also featured on 1stwebdesigner! :) Some of their tutorial include:

- Old paper effect in Fireworks

- Beautiful rainbow pattern

4. Fireworks Zone

What does it offers: Well…they have 340 tutorials and resources on that blog. It’s the biggest resource I found on this topic (next to Adobe Fireworks Support Center.) Here are some neat tutorials they have:

Create a human iris

Create Coca Cola Glass Text

5. Fireworks Support Center

What does it offers: You have over 100 tutorials there. Really neat. This is the official page by Adobe for supporting Fireworks, so it better be good. Most of the tutorials there are videos, so I’ve decided to provide you with some TV shows Adobe has on their site.

Learn Fireworks CS4

Fireworks Tips and Tricks

6. Blue2x Blog

What does it offers: They have 10+ Fireworks tutorials. I really liked the tutorials on creating logo and fancy buttons. Here are some examples:

Simple Orbs Tutorial

Create a fancy text effect in Adobe Fireworks

7. Enthesoweb

What does it offers: This is the first page you’ll get if you write “Fireworks tutorials” into Google. However, I haven’t found them to be that good in quality (their quantity is good, they have 20 tutorials on Fireworks there.) Some of them are:

Create a twist and fade image

Add textures to text

I’m not perfect so maybe I’ve missed some awesome Fireworks websites. That’s why you have the comment section :) Hope you enjoyed this article.

http://www.itmdesign.co.uk/blog/category/tutorials/4

Integrate SexyBookmarks into any HTML page with JavaScript

Phong Thai Cao — Fri, 19 Feb 2010 11:10:40 +0000

SexyBookmarks is a handy plugin for sharing the useful & helpful links on the famous social bookmark services just like AddThis Wordpress plugin. (if you still don’t know about it or you want to learn more, please go to its homepage).

This tutorial and article will teach you how to actually use this plugin in any website, not just Wordpress – implement it wherever you want it! Portfolio page? – no problem! :)

The advantages of this plug-in are:

super easy to install and use, just upload necessary files then setup
very beautiful design & icons
easy to custom the layout
50+ social sites to choose
Admin Control Panel

Sample of a working SexyBookmarks

Now, SexyBookmarks only supports some popular flatforms, and you only use this plug-in if you’re using Wordpress, Joomla, bbPress and further more is Firefox (information from SexyBookmarks’s homepage).

In this post, I’ll show you how to add SexyBookmarks into your personal page, only with HTML, CSS and JavaScript; no server-side requirement. Obviously, you (and your visitors) can have some little limits without PHP; but this release still satisfy most of the circumstances. With different platforms, please query the search engines for the installation guides.

1. Preparation

a) Download the lastest package at the homepage of SexyBookmarks if you want. In this package, we need the files:

js/sexy-bookmarks-public.js
css/style.css
images/sexy-sprite.png

b) Download the core file of jQuery framework, then place it into js directory

2. Programming some JavaScript code lines

Open your js/sexy-bookmarks-public.js file, place JavaScript code lines below after autocentering feature

/*
	click handler for SexyBookmarks
	Credit: Phong Thai Cao - http://www.JavaScriptBank.com
	Please keep this creadit when you use this code
*/
jQuery('.sexy-bookmarks a.external').click(function() {
	// get the current URL & encode it into the standard URI
	var url = encodeURIComponent(window.location.href), desc = '';

	// parse the description for the above URL by the text() method of jQuery
	// the text must be placed in the P tag with ID="sexy-bookmarks-content"
	// so you can change the container of description with another tag and/or another ID
	if( jQuery('p.sexy-bookmarks-content').length ) {
		desc = encodeURIComponent(jQuery('p.sexy-bookmarks-content').text());
	}

	// detect the social bookmark site user want to share your URL
	// by checking the className of site that we'll declare in the HTML code
	// and assign the URL & description we got into the current anchor
	// then redirect to the clicked bookmark site, you can use window.open() method for opening the new window
	switch(this.parentNode.className) {
		case 'sexy-twittley':
			this.href += '?title=' + document.title + '&url=' + url + '&desc=' + desc + '&pcat=Internet&tags=';
			break;
		case 'sexy-digg':
			this.href += '?phase=2&title=' + document.title + '&url=' + url + '&desc=' + desc;
			break;
		case 'sexy-twitter':
			this.href += '?status=RT+@your_twitter_id:+' + document.title + '+-+' + url;
			break;
		case 'sexy-scriptstyle':
			this.href += '?title=' + document.title + '&url=' + url;
			break;
		case 'sexy-reddit':
			this.href += '?title=' + document.title + '&url=' + url;
			break;
		case 'sexy-delicious':
			this.href += '?title=' + document.title + '&url=' + url;
			break;
		case 'sexy-stumbleupon':
			this.href += '?title=' + document.title + '&url=' + url;
			break;
		case 'sexy-mixx':
			this.href += '?title=' + document.title + '&page_url=' + url + '&desc=' + desc;
			break;
		case 'sexy-technorati':
			this.href += '?add=' + url;
			break;
		case 'sexy-blinklist':
			this.href += '?Action=Blink/addblink.php&Title=' + document.title + '&Url=' + url;
			break;
		case 'sexy-diigo':
			this.href += '?title=' + document.title + '&url=' + url + '&desc=' + desc;
			break;
		case 'sexy-yahoobuzz':
			this.href += '?submitHeadline=' + document.title + '&submitUrl=' + url + '&submitSummary=' + desc + '&submitCategory=science&submitAssetType=text';
			break;
		case 'sexy-myspace':
			this.href += '?t=' + document.title + '&u=' + url;
			break;
		case 'sexy-facebook':
			this.href += '?t=' + document.title + '&u=' + url;
			break;
		case 'sexy-designfloat':
			this.href += '?title=' + document.title + '&url=' + url;
			break;
		case 'sexy-devmarks':
			this.href += '?posttitle=' + document.title + '&posturl=' + url + '&posttext=' + desc;
			break;
		case 'sexy-newsvine':
			this.href += '?h=' + document.title + '&u=' + url;
			break;
		case 'sexy-google':
			this.href += '?op=add&title=' + document.title + '&bkmk=' + url;
			break;
	}
})

3. Declaring

Open your web page then place the 3 code lines below into HEAD section; the SexyBookmarks needs these files to work properly.

4. Setup HTML code

Go to position you want to show SexyBookmarks, then copy & paste the HTML code below, you can change the titles and anchor text as you want, but you must keep the class names of LI and Anchor tags.


     
    	Submit this to Twittley
    	Digg this!
    	Tweet This!
    	Submit this to Script & Style
    	Share this on Reddit
    	Share this on del.icio.us
    	Stumble upon something good? Share it on StumbleUpon
    	Share this on Mixx
    	Share this on Technorati
    	Share this on Blinklist
    	Post this on Diigo
    	Buzz up!
    	Post this to MySpace
    	Share this on Facebook
    	Submit this to DesignFloat
    	Share this on Devmarks
    	Seed this on Newsvine
    	Add this to Google Bookmarks

5. Done

Please try a live demo here.

Conclusion

With this JavaScript code, you’ll able to change/update SexyBookmarks easily by editing codes above.
Easy to change the slogan of SexyBookmarks: Sharing is Caring, Sharing is Sexy, Share the Love, Share the Wealth, Share and Enjoy. Just edit the CSS style, or you can make it appear randomly by using JavaScript.

Hope you like this post and find some helpful things in this. Feel free to ask anything about the article in comments section.

30 Best Written And Explained Logo Design Tutorials

Kannan Sanjeevan — Fri, 12 Feb 2010 10:02:32 +0000

Anyone who is interested or just started designing would love to design a logo for his/her website or blog but the question is where to find and how to find them. In order to reduce their research and learning time I have compiled 30 stunning logo design tutorials, which not only will help you to design a logo but also inspire you greatly. This roundup tutorials contains some very famous websites and companies logo designs, which should be really exciting and interesting to recreate.

1. Green Type Treatment

Learn a step by step procedure on how to create a environmental friendly logo.

2. Crazy Logo

Crazy and yet creative logo.

3. Vivid Ways Logo

Design walkthrough of vivid ways.

4. How to create a kick ass wordpress

Learn how to create the logo of famous blogging software ( Word Press ).

5. Google Chrome Logo

This tutorial will guide you to create a beautiful google chrome logo.

6. Volkswagen Logo

Create the famous car manufacturer logo

7. Amazing Nike Logo

Learn how to create a nike like logo ( Nike Fire )

8. Colorful Mac Logo

Create a colorful mac logo.

9. Green Apple Style Logo

Learn how to create a green Apple style logo.

10. Spiderman Logo

If you are a spider man fan then you would definitely love this tutorial.

11. Sikbox Logo Design Process

Sikbox design walk through by abduzeedo.

12. Purple Lemon Logo Design Process

Purple lemon logo design process by Chris Spooner.

13. Firefish Mascot

Learn how to create a firefish mascot.

14. Logo Presentation

This will help you to present a logo.

15. Logo Design Process By Dry Icons

Logo Design process by Dryicons.

16. Origami Logo

Create an awesome origami logo.

17. Firefox Logo

This tutorial will help you to create the logo of famous browser ( Firefox ).

18. Sony Ericsson Logo

Learn how to create a Sony Ericsson logo.

19. Blue Laguna Logo

Blue Laguna logo design process by Gary Simon.

20. Jelly Remake

Learn how to create jelly remake.

21. Skype Logo

This tutorial will help you to create the best messenger as far as voice conference / voice chat is concerned ( Skype ).

22. Flash Logo

Learn how to create flash logo.

23. Adobe Acrobat Reader

How to create Adobe Acrobat reader logo.

24. Ubuntu Logo

How to create a Ubuntu logo.

25. EURO 2008

How to create Euro 2008 logo.

26. Crystal Type Logo

Create a glossy 3d arrow.

27. 3D Glossy Box Logo

How to create a 3d glossy box logo.

28. Web Mynds Logo

Logo design process of Web Mynds

29. Umbrella Corporation

How to create Umbrella corporation logo.

30. Brainstorm Logo Design Process

Logo design process of Brainstorm.

40 Fundamental Illustrator Tutorials You Must Know

Yanuar Prisantoso — Thu, 11 Feb 2010 10:12:43 +0000

Learning a new software application can be a difficult task, especially when there is an application that is as deep as Adobe Illustrator! Fortunately, Teresa illustrator colection veterans who are generous enough time to take the basic document, so that new users of the first activities to capture and gain knowledge of tools and basic techniques. This collection of tutorials covering various dialer tools and provides many useful tips and advice. Together, they constitute a very useful tool for all beginners who work with their heads, put up in Adobe Illustrator.

1. How to Create a Gearbox Settings Icon Using Simple Shapes

Many things can be in Illustrator need not be the tool Pen, as evidenced by the recent Hourglass tutorial. Using only simple predefined types, and tools such as Pathfinder and the conversions can be created all the images from scratch. In this tutorial we will create the right image for display options, settings, preferences, etc., similar to OS X System Preferences icon.

2. How to Create an Abstract Vector Design in Illustrator

A great looking abstract designs can be created from the simplest form. You can take a look at the creation of geometric shapes and objects to form a dynamic composition of Illustrator, then all shine with some effects of transparency in a picture body tends to be created.

3. How to Create a Smokin’ Western Type Treatment in Illustrator

This tutorial will show you how a Western-style primary treatment with Illustrator to achieve results. The impact of these guidelines, you can simply use the appropriate settings in otherwise treatment and logos

4. Create a Bright Retro Grunge Vector Illustration

Follow these steps to create in Adobe Illustrator and Photoshop to create a range of body shapes and graphics that are combined into one large collage have body image. Well, then end the show with some differences in depth and detail so that a polished image, with a touch of retro-grunge style.

5.Illustrator Tutorial: Surprise Gift

There are times when you need to make a gift box and effects for special occasions. This tutorial gives you an idea of how this can be achieved with brushes and some other techniques. I will not go into detail how each step is feasible, but I’m sure techniques to emphasize the creation of this presentation.

6. How to Create an Open Book with Illustrator’s 3D Extrude & Bevel Tool

In this tutorial, we will explain how to create an open book, especially the illustrator 3D Extrude and Bevel Tool. We open the pages with graphics and a corrugated bottom.

7. Super Cool Abstract Vectors in Illustrator and Photoshop

This tutorial will show you how an abstract type of flowers to blend tool in Illustrator, then played with this Photoshop to produce a colorful wallpaper created.

8.Create a cool water effect

In this tutorial you will learn how to use the mesh tool to create water drops, the Symbol Sprayer tool-use icon with the help of water droplets and dispersion.

9. 3D lighted text effect

This tutorial shows you how to add 3D text, then we have some brushes for art in order to create an efficient, clean futuristic spacey.

10. Swirl Mania in Illustrator & Photoshop

In this tutorial, show you 4 ways to turbulence and mixing of very powerful techniques that you can easily tonnes of various types of bodies and vertebrate sperm crazy to see the learning.

11. Design with Flair from Start to Finish in Illustrator CS4

Weve all seen some courses with outrageous designs, where shows you how to make a game technology. In this article, and start from scratch with a basic photo and create a full effect in all Designin no time.

12. Use Adobe Illustrator to Create a Clean Website Layout

This tutorial is ideal for beginners and advanced beginners artists Adobe Illustrator. We will, as the coverage and development of a site and prepare it for usage.

13. Illustrate Image into Vector

Basically, it’s easy to present a lively and not a real object. Tuna is easy to apply and easily. It is a great way to practice for beginners

14. Creating trees in Illustrator

In this tutorial, I will begin by presenting an image of a tree, then draw the physical form and add your own creative ideas into a hub for the production of contemporary illustrations. You can use a variety of tools, Illustrator, Freehand, including tools, instruments, and the shape of the pallet Layers.

15. Craft a Dramatic Vector Landscape Environment

This tutorial shows the average capacity Adobe Illustrator artist how a spectacular environment.

16. Figure Shading

In this tutorial I will, however, simply and quickly in figure drawing your shadow seem credible and the establishment of the amount so it can be easy to Adobe Flash Cartoon Series. To become more attractive, I will try to do everything, the simplest way possible and with less effort

17. Learn Illustrator CS3 in 30 Days

This depth of 30 days during the registration Vector is one of the most useful lessons there. It is free!

18. Illustrator Beginner’s Series

Illustration of the information contained Illustrator beginners series, the tools used most often with an overview of their use.

19. Adobe Illustrator Guides and Tutorials

The collection of tutorials and guides klethegr8 include various hints and tips on all types of tools.

20. Beginner Adobe Illustrator Tutorials

Comments received during the coming days to a few ShapeShed Illustrator import much more than the basic tools and techniques, including mixtures, rounded edges and scouts.

21. Illustrator CS4 Blob Brush

The new addition to Illustrator CS4 Blob Brush opens the door to new opportunities. Magazine sections explain more with this helpful video tutorial.

22. Illustrator CS4 Gradients

Another new feature in CS4 is a new package processed. Heres to give an overview of some of the new opportunities and optimize color gradients in Illustrator.

23. Working with Illustrator Art Brushes

Brushes are an important tool in Illustrator, and come in different styles. This tutorial covers the kind of brush BittBox, with great examples of how it can be used.

24. Illustrator Opacity Mask Basics

Illustrator Opacity Masks are a function that can be really useful, especially for people with older versions of CS4, which now have greatly expanded access to a new state of opacity.

25. The Power and Ease of Patterns in Illustrator

The base model in Adobe Illustrator is something we are very happy, but as an illustrator combined with other instruments may be some surprising results.

26. Wacom Settings in Illustrator

Not surprisingly, Adobe Illustrator seems, if used in the preparation of illustrations, Illustrator and there is not complete without a tablet Wacom. Heres some tips to improve your settings.

27. Quickly Change Fills and Strokes

Illustrators often fills strokes confusing and designers no Photoshop. This option tips and shortcuts Vectips gives a clear understanding of the speed used.

28. Illustrator’s Pen Tool: The Comprehensive Guide

The pen is the most important control tool with Adobe Illustrator, and is unable to cope with a lot of exercise. Arm yourself with this great knowledge and understanding of how it works.

29. A Comprehensive Guide to the Pathfinder Panel

The Pathfinder master is also an important tool in Illustrator. The illustrator used in almost all the projects you work, so useful to know how it works.

30. Tips for Working with the Gradient Mesh Tool In Illustrator

Gradient Mesh is actually one tool I still need to wrap my head around, but once mastered, can significantly reduce your artwork to the next level with the ability to create photo-realistic graphics.

31.Illustrator’s Blend Tool: A Comprehensive Guide

The mixing tool is one of the illustrators of the most powerful features. The incoming mail fully focused on its use in a wide range of examples and diagrams.

32. Illustrator’s Type Tool: A Comprehensive Introduction

The tool can not text because it requires a lot of words, an illustrator, but also offers some options related dramatically. Heres a practical overview.

33. A Comprehensive Guide: Illustrator’s Paintbrush Tool and Brush Panel

Heres an overview of four types of brushes in Illustrator covered with a detailed explanation of how to use each.

34. The Basics of Clipping Paths and Opacity Masks

Just to show how masks in Photoshop, Illustrator uses masks to hide and various parts of the project. Here is an overview of clipping masks and opacity, and its use in a real world project.

35. Adobe Illustrator Shortcuts

These shortcuts aren’t only keyboard alternatives to popular menu items, they will also create new opportunities that otherwise aren’t available.

36. Beginner Illustrator Tutorial – Create a Vector RSS Icon

If learning by doing is more your thing, why not try the tutorial icon RSS ?covers the most basic commands plus some key advanced tools such as Pathfinder and offset the creation of roads.

37. Blueprint-Style Text in Adobe Illustrator

This technical project has shown that everywhere even to cover Photoshop Help Desk Book by Dave Cross. This is a brief demo with a mixture of live effects, filters and even a little gradient mesh objects to a seemingly complex treatment to create the logo.

38. Create a Themed Repeating Pattern in Illustrator

Follow this Adobe Illustrator tutorial to create a series of simple objects around the body based on lifestyle designer, then the tiles to form a repetitive pattern look cool. The creation of objects based on the basic shape, is an illustrator for a good tutorial for beginners and is an impressive performance, to be introduced, using a variety of design projects.

39. Translucent IM Style Illustrator Icon Tutorial

The shiny and glossy image of Web 2.0 is comfortable when it comes to images. Follow this Adobe Illustrator tutorial, a Scalable Vector Graphic Instant Messaging style icon with the impression that creating a brilliant and translucent surface.

40. Create a Vector Pirate Cartoon Character from a Hand Drawn Sketch

As originally created by the power of pen and paper is a draft version, which is then scanned the computer for use as a basis for identifying with Adobe Illustrator. The end result is an animated character in the color vector format!

Learn How To Create A Clean Layout In Photoshop [Very Detailed]

Mkhaled — Mon, 08 Feb 2010 10:10:49 +0000

In this Photoshop tutorial we’ll learn how to create a clean looking website layout, we’ll also be using 960s grid system to keep everything aligned. This is very detailed tutorial, so if you have basic knowledge about Photoshop you should be able to easily keep up and let me guide you through this layout creation process. I am explaining all small steps and every step is shown by visuals as well, good luck!!

Final Outcome

Here’s a preview image of what we’ll be creating together, Click the image to enlarge.

Creating New Document

We’ll be using 960s Grid system (Download here ) once downloaded open up the file 960_grid_12_col.psd; then right click on the “Background” layer >> Layer from Background. and call it “bg”.

Creating the background

Let’s starting creating our background, select the Gradient Tool (G) in the Gradient Editor panel set your colors from #dcdcdc to #ffffff:

Now with a Linear Gradient drag from down to top. Use the image below for reference:

You should have something like this:

Creating the logo area

Before we start creating our logo we need to set upper borders for our design, so we’ll drag a new Horizontal Guide after 50px. to do that go to View >> New Guide and follow with the image below:

It’s time to create the logo tag; we’ll start by creating a selection – I personally have use Polygonal Lasso Tool (L) – make about it 280×40px try making something similar to this:

Now click Shift+Backspace to fill it (with any color just in case).

We’ll give this tag a smooth gradient; from #efe352 to #db1b47 – check the image below:

Write your name with the following settings:

Font: Rockwell (it’s famous just Google it!)
Size: 46px
Type: Regular
Color: #1e1e1c
Anti-aliasing: Strong

Here’s how it should look!

Now create another selection for the catch tag, about 270×40px, something like this:

Fill it, and give it the same smooth gradient – that we’ve given to the name tag – and we’ll just add a Drop Shadow:

Now add your kickass catch with the following settings:

Font: Rockwell
Size: 33px
Type: Regular
Color: #1e1e1c
Anti-aliasing: Strong

Here’s how it should looks!

Before we move forward to the next step, make sure that all your layers are well-organized, and grouped. Here’s how mine looks:

Creating the navigation

We’ll start by creating a small rectangle, select the Rounded Rectangle Tool (U) and create a rectangle of about 65×30px – Radius: 5px.

Now let’s give it Inner Glow, Gradient Overlay, and Stroke. see the image below!

Add some navigation text, with these colors: #ffffff – #1e1e1c:

Select the navigation text layer and the small rectangle layer, then click on Align Vertical Centers in the control bar.

Before we move to the next step, group your layers!

Creating the featured designs area

First off let’s set our borders; drag a new guide at the end of the catch tag, leave 50px and drag a new one!

Writing welcome text

Write some text, with the following settings:

Font: Rockwell
Size: 30px
Type: Regular
Color: #e8204e – #676666
Anti-aliasing: Strong

Drag yet another guide after 50px:

Creating images of featured designs

We’ll start working on the images; create a selection of 250×150px and align it like the following:

Fill your selection with any color, and give it a Stroke with the following settings. the call it “pic_holder”.

Let’s add an image of a featured design, go to File >> Place and place an image from your computer.
Make sure that the layer of the image is right above the layer (“pic_holder”) of the rectangle we created
Now right click on the image layer >> Create Clipping Mask.

It’s time to create a shadow for our image! with the Elliptical Marquee Tool (M) create a selection like the one below; set your foreground to #1e1e1c then click Shift+Backspace to fill it.

Now go to Filter >> Blur >> Gaussian Blur – Radius: 2px.

Go ahead and make another copy of the image we’ve created and align it to the right.

We’ll make the center image a bit bigger; so create a selection of 340×200px and align it like this:

Repeat the same previous steps. finally you should have something like this:

Don’t forget to group all your layers!

Creating the sliding arrow

Now let’s create the sliding arrow, use Custom Shape Tool (U) to create an arrow with this color value #e8204e.

Now give it the following layer styles:

To align our arrow, we’ll select its layer and the layer “pic_holder” then click on Align Vertical Centers in the control bar.

Make a copy of the arrow and align it to the right.

Creating the upper content area

Start by dragging a new horizontal guide at the end of the featured area, leave 50px and then drag another one!

Add some text as a title (I’ve written “who we are”) use the image below for reference.

Drag two new horizontal guides according to the following image.

Add some text with these character settings.

Now drag yet another horizontal guide according to the following image.

Using the Rounded Rectangle Tool (U) create a rectangle of 100×30px – 5px radius. Give it the following layer styles.

Now create a circle and an arrow inside it.

Write the word “read more” with this color value #3e3e3e and give a Drop Shadow according to the following image.

Let’s create the separating line! create two lines next to each with the following color values: #ffffff – #979797:

Then align it according to the following image

Now write a title for the right part (I’ve written “featured services”):

Select the Ellipse Tool (U) and create a circle of 20×20px (fill it with any color) then give it the following layer styles:

Using the Custom Shape Tool (U) create a check shape and fill it with #dcdcdd:

Let’s give create a shadow for it! create a selection (like the one below) and fill it with #000000 then go to Filter >> Blur >> Gaussian Blur – Radius: 2px.

Add some text of a featured service, character settings goes according to the following image:

Make two copies of the featured service:

To align the three services, put each of them in a separate group, select the three groups and then click on Distribute top edges:

Creating the lower content area

We’ll start by dragging a new horizontal guide after 50px:

Write another title, and drag two guides, use the image below for reference:

Then drag another guide according to the following image:

Now write some text according to the following images:

Duplicate the text you’ve written, then align it like the following:

To create the separating line; create two lines on top of each other, fill them with #ffffff – #8d8d8d:

I think the best way to align the separating line is to do that visually. However, I have my own way of doing that! create a rectangle (like the pink one below) and while having the layer of the rectangle and the separating line selected; click on Align Vertical Centers in the control bar.

See how it works! ;)

Now repeat the same previous steps to get something like this!

Creating Social Media links

Now add the third title, Facebook icon, and write a link beside it. You can download the social media icons from deviantART – they’re called Aquaticus.Social by Junwei.

While having the link layer, and the icon layer selected click on Align Vertical Centers.

Make three copies of what we’ve created in the previous step. put each of them in a separate group, then select the four groups and click on Distribute Top Edges.

Creating the footer area

Drag a final guide after 50px.

We’ll start by creating another separating line, create two guides on top of each other and fill them with #ffffff – #8d8d8d.

Then align the separating line like following:

We’re almost there! add your sub navigation text according to the following image:

Finally add your copyrights text with the same character settings:

Conclusion

There we have it! We’ve created a clean and simple layout in Photoshop. Hope you enjoyed it!

You can download free, layered *.PSD version here!

30 AJAX Tutorials For Smart Web Developers

Yanuar Prisantoso — Thu, 04 Feb 2010 11:08:44 +0000

Here is a complete package of AJAX Tutorials Web Developer, Ajax is a short form Synchronous JavaScript and XML is a set of methods that are used by many modern and popular web sites. Ajax providing web developers with verbosity options, the practice of searching to improve and expand the presentation of their Web sites in recent years there have been more immersed in the development of rich Internet applications.

Web developers of new technologies that enrich the user is forced to vote the post with some examples of the functionality of Ajax, his voice can be recorded without reloading the page. Web designers can use a tool for further development, if we already know about JavaScript, HTML, CSS and XML, you have to spend a few coins to start learning AJAX.

1. Ajax Username Availability Checker Using MooTools 1.2

There are many examples of blatant use Ajax there, but over time, although you will find a great use of Ajax. A great use of the identifier is the availability checker. Why should the user submit the form if you can use Ajax to let them know when they will be available immediately; Heres how you can apply a correct user name comes with MooTools 1.2.

2. Ajax and XML: Ajax for tables

You will see many techniques with both Ajax and there is no evidence that the change to free access to the design of the user experience. Start with the simplest example of the Ajax user experience, the tabs down box.

3. Introducing the ASP.NET Ajax Frameworks

Ajax is a popular technique used in many ways the World Wide Web. It has become the technology of choice for creating user interfaces fast and responsive. This article gives a brief overview of the characteristics of some of the most common framework for ASP.NET AJAX.

4. How To: AJAXify WordPress Comment Posting

I’ll show you how to comments with AJAX client side JavaScript Form Validation, comments on your WordPress blog step by step, that the project should allow more versions of WordPress

5. Ajax and XML: Ajax for chat

The developers talk a lot about the community will come when the term Web 2.0. And if you think it is or is not hype, the idea of involving customers or your readers in a conversation about current issues at hand or the products they sell are quite convincing. But how we get there? Is a chat window on the same page with a list of your products so that your customers can install any software or even the Adobe Flash Player; Sure! It showed you can make with all free, off-the-standard tools such as PHP, MySQL, DHTML (Dynamic HTML), Ajax, Prototype.js and added.

6. How To Create An Amazing jQuery Style Switcher

This tutorial will show you how to create a style switcher using jQuery and PHP. The end result is a discrete switcher and degradable dynamic style applied quickly and easily.

7. Introduction to the Raphael JS Library

It will introduce some key design features, a look at the animation, DOM and eventually allow access by creating a cool widget for your site

8. Creating a Dynamic Poll with jQuery and PHP

When you combine a specific functionality courtesy of PHP with the cleverness of jQuery you can get some pretty cool results. In this tutorial, we’ll make a poll using PHP and XHTML, then use some jQuery Ajax effects to eliminate the need to refresh the page and give it a good piece of animation.

9. RSS Ajax JavaScript ticker

This tutorial will show you how to combine RSS, Ajax, JavaScript to create a live ticker RSS. Thank you for Ajax, the conventional roles of server side programming and client-side with the application as such as JavaScript, and not vice versa PHP is used to treat a large part of the project, including analysis of the RSS file

10. Create a Dynamic Scrolling Content Box Using AJAX

If you use Google Reader, so we could show the way data feed from Google Reader, its initial load when you click one and you scroll down the list until you have seen the light of other evidence, we More information dynamically and added to the list

11. Create a shoutbox using PHP and AJAX (with jQuery)

We learn how to build a momentum-based AJAX shoutbox with jQuery from scratch. It is very interesting to learn how to use the jQuery AJAX function and how it can be used to insert and retrieve data from a MySQL database with PHP asynchronous.

12. Building your first Ajax application with PHP

In this series of articles will focus on the development of the site, focusing primarily on the server using the language PHP, but I do not exclude the possibility that a crack in the Python and Ruby, ASP.NET / C # mono or as something else. This series is also available in JavaScript on the client side, and we will use XHTML labeling for all.

13. How To Build Quick and Simple AJAX Forms with JSON Responses

In this lesson we go through the steps to create a form of AJAX, which will return a response JSON is used to display the success / error messages. We use and JQuery Jquery form a plug to make this process quick and painless.

14. Vista-like Ajax Calendar version 2

Vista-like Ajax Calendar (vlaCalendar) version 2, unobtrusive web version of the working day and low taskbar Windows Vista, the Framework MooTools JavaScript, Ajax, XHTML, CSS and PHP.

15. Create an In-Place Editing System

In this lesson, learn how to create one found editing system in place, as in popular sites like Flickr.

16. How to Code a Fun To-Do List With PHP and AJAX

In this tutorial we will work with various technologies. In short, we create a list of tasks in asynchronous mode, allowing you or your users to create, update and delete. To fulfill our mission, we will work with PHP and JQuery functions AJAX. I think you can not find it as difficult as it may seem at first think. I’ll show you exactly how!

17. AJAX Multiple File Upload Form Using jQuery

Ability to upload multiple files simultaneously, which are necessary for Web applications, but the administration will increase with the number of input fields file is somewhat tedious and long. But thanks to JQuery, which we can simplify this task. Today I was Ajaxified multiple files upload form that uses less code on the server side, creating, and offers a very nice interface.

18. 8 Ajax Data Controls and Effects to Work with Tables

I was wandering around the various projects associated with HTML tables and data management. To achieve the proper table of the user for their web projects.

19. Ajax Forms with jQuery

There are so many different JavaScript frameworks out there, but in recent years with JQuery, and I like it. Not only the library significantly less than others, but it’s so easy to use. I wanted to show how easy it is on a regular basis in the form of “Ajax is a set.

20. Making an Ajax PHP Watermarker Script

In this article will show how to make scripts PHP AJAX Watermarker. So all must do what the user can select a file in folder, type your watermark in the watermark and text at once with Ajax.

21. Use jQuery and ASP.NET AJAX to build a client side Repeater

You can only send data to the client, a deep reduction in what you send and see significant performance gains. It is also possible to easily add features such as low birth weight sorting and paging on the client. This can not only improve the user experience, but reduce server load and bandwidth requirements.

22. Ajax for Java developers: Build dynamic Java applications

Refresh the page to cycle represents one of the biggest usability obstacles in Web application development and is a major challenge for developers of Java ™. In this series, author Philip McCarthy is an innovative approach to creating dynamic Web application experiences. AJAX (Asynchronous JavaScript and XML) technology is a programming language that allows you to integrate technology Java, XML, Java and JavaScript for Web applications that break the paradigm of reloading the page.

23.Using the Prototype JavaScript library and script.aculo.us

If you are developing Web applications these days, you are on the development of Ajax. Ajax is not something unusual, that you put in their application in specific cases. It has become an integral part of web development. For some proposals with Ajax is a sensitive issue. Cross-browser limitations to deal with writing a lot of complicated JavaScript, and learning about magic numeric codes in JavaScript, which were just some of the problems facing developers of Ajax. Fortunately, there are several open source JavaScript libraries now to make things much easier. In this first article of a three-part series, creating Ajax applications for managing songs using the Prototype JavaScript library and script.aculo.us.

24.Ajax security tools

Some vulnerabilities in Ajax applications so that hackers can cause damage to your applications odor. Identity theft, unauthorized access to confidential information are the browser crashes, a reduction in Web applications, and denial of service attacks are just some of the possible disasters Ajax applications can be vulnerable to the development and protection when creating Ajax capabilities into their applications. Regular DeveloperWorks author Judith Myerson suggests some wider use of tools, including Firefox and accessories, which are used to improve and fix security problems in applications, AJAX.

25. PHP components: Autosuggest

For all beginners Ajax (the easiest to implement only 8Kb) and all you need to do is change some settings. Check this post for more information.

26. Creating An Amazing jQuery Style Switcher with Ajax Techniques

This tutorial shows how to create a style Selector with JQuery and PHP. The end result is a discrete and fully biodegradable Switcher dynamic style that implement quickly and easily.

27. Easy Ajax with jQuery

Ajax is changing web applications, giving them an answer that goes beyond the desktop is not known. But behind all the hype was not a lot is not Ajax – (X) HTML, JavaScript and XML, new, and in this tutorial, I show how the process of adding Ajax to your application further with the simplification of JQuery, a popular library of JavaScript.

28. AutoCompleter Tutorial – jQuery(Ajax)/PHP/MySQL

I thought I’d write this tutorial because most of the applications I have seen a complete car, just dump the code in the Zip file and tell you how to use it instead of how and why this works, you know that it can adapt to much more (it was with other applications, which I wrote) found!

29. Auto-populating Select Boxes using jQuery & AJAX

If you are familiar with using the box to select the categories and subcategories, such as eBay is not selling any item, usually a large amount of JavaScript can help you choose the fields that are required, but JQuery can greatly simplify this task by the touch of AJAX.

30. Using Ajax to Validate Forms

Form of a general Internet, so we believe them without a mistake is much more about it. However, if your site has some nice touches added that this process easier, seeks to accelerate the process and avoid disappointment in the achievement of our users’ preferences (for example, try to get the name using Hotmail!).

30 Web-Design Related Photoshop Tips, Tutorial Screencasts

Dainis Graveris — Wed, 20 Jan 2010 10:32:21 +0000

Oh, this is a bit different collection I hope, because I couldn’t find really similar articles like this one. I did very big research through youtube, delicious, good-tutorials, vimeo, google and many more websites to find interesting Photoshop, little coding and tips video tutorials. What’s great with video tutorials? – you can see every mouse click and in the same time you hear author’s voice explaining things to you verbaly. In my opinion this is the fastest and the best way how to learn new techniques.

Actually I got this article idea, when I accidentaly found great video tutorial on Deviantart which by the way is the first video in this list as well. It is Photoshop tutorial, where author explains several of his great techniques while creating designs – what font to choose, how to think about spacing, wirefrime, colors, blending options and a lot more hidden tips.

1. Website design walkthrough from Derek Toigo

This video will walk you through Derek Toigo design process of a simple website template. He will explain and unreveal many hidden tips and techniques in his daily designing process.

2. Letterpress text tutorial from che mcpherson

In this tutorial you will learn how to create the trendy letterpress or emboss text affect thats flooding the web design scene at the moment.

3. How to slice a Photoshop image into a website

4. Fancy Frames Photoshop Tutorial

5. 3D Web Design Effect in Photoshop

6. Web 2.0 Footer in Photoshop

7. Vista Inspired Menu in Photoshop

8. Create a Watercolor-Themed Website Design with Photoshop

9. How to Make a Highly-Textured Site Layout in Photoshop

10. Web Text Box and HTML: Photoshop Tutorial

11. Photoshop Tutorial Text Mirror Effect

12. Web Design Tutorial – Apple Navigation in Photoshop

13. Spark Beam Photoshop Video Tutorial

This video tutorial will show you step by step how to create this really stunning spark beam effect which can be commonly seen in cell phone ads for example.

14. Creating a Website: From Start to Finish Part 1

15. iPhone icon design tutorial from SoftFacade

In this tutorial you will create iPhone application icon for address book in Adobe Illustrator with some Photoshop touches.

16. jQuery slider tutorial from Dimics DM

17. Wordpress theme tutorial Part 1 (PS) from Dimics DM

The first part of an Wordpress theme tutorial. This video will cover the Photoshop/design part of the Wordpress theme.

18. Frames and Peels in Photoshop from Navdeep

19. Style Techniques of Mantrastic by Mantrastic

Mantrastic is a great artist on Deviantart, you should view his photomanipulation works and you will understand what I mean and why you definitely should download and see this great video tutorial straight away!

20. Photoshop – Learn how to create an Apple iPod Shuffle from kakkuk

21. Web Development – Tutorial 1 – Basic Layout from Michael Daley

Basic Layout is now uploaded and ready to view and runs for around 36mins. This tutorial covers basic CSS/XHTML to get a simple design from Photoshop into a web page. This tutorial is aimed at beginners who are just starting out with CSS/XHTML and need a few tips on how to do simple layout.

22. J Taylor Design ~ Web Design from J Taylor

A little video on a typical outline working with a client on their website.

23. K-DESIGN Windows Blue – Your Choice Tutorial from
Mo4itajs

24. Photoshop Tutorial 1 from Alistair Rossini

Interesting Photoshop web design tutorial, explaining how to create simple but good looking layout.

25. How To: Gradient, Gloss, Shadow & Reflection Effects from Ryan

A Photoshop tutorial showing how to achieve a great effects you can use in your designs everywhere.

26. Web 2.0 Gloss Orb from Navdeep

This tutorial will walk you trough the creation of a Web 2.0 style gloss orb with lights and shadows in Photoshop.

27. Web 2.0 Menu Bar from Navdeep

In this video you will see how to design a Web 2.0 Style Menu Bar with lights and Shadows using Photoshop.

28. Web Design Tutorial Part One from andrew

This video covers the basics of web design, mainly composition design, and the process that I go through to create mockups. The video covers basic wireframing, grids, psd structure and general design techniques. This video is for people who are new to web design, and the techniques used are basic, more advance design tutorials in the future.

29. Web Design Tutorial Part 2 from andrew

Part 2 of my webdesign tutorial, covers building out the rest of the site, this video is intended for beginners only.

30. Integrating Lightbox 2.0 in to your web design projects from Psmeg

This 10 minute standalone video demonstrates how easy it is to install and use the popular Lightbox 2.0 javascript effect in your web design projects.

The tutorial takes you step-by-step through the whole process, from downloading to integration to testing.

If you know more of this type tutorials with unique webdesign techniques, please share! It was really hard to find something good out there from keywords, so I believe I should more listen to recommendations.