Back to this tutorial. I realized that sneak previews of upcoming websites can be very useful and drive a lot of traffic to your site, because visitors get excited to see the whole design and will check out your blog for new updates. This was the main reason why I wrote this article. But I don’t want to talk to much so I just continue with the tutorial.

Step 1

First, create a new document with the screenshot of your design, which you want to create a cool preview of. I decided to use Pacifica, a very professional wordpress template from themeforest ( link )

Step 2

Copy this layer and name it “blur”. This will be the blurred layer. Then go to Filters -> Blur -> Gaussian Blur and apply this filter with the settings below.

Step 3

Create a layer mask to the previous created layer “blur”. Be sure to have black as your foreground color selected. Then selecte the Elliptical Marquee Tool and create a small small circle of the screenshot you want to keept the attention and fill it with black. Now this circle isn’t blurred. After that don’t deselect your selection. We will need it in the next step.

Step 4

Now create a new layer and call it “Border”. Then go to Edit -> Stroke…
Add a stroke to the selection with the settings below, but you can change the color of the border in the way you like. Then deselect it with STRG -> D . That’s it. You can even add more such circles to your blurred screenshot to make your visitors more excited.

My Final Version

selector:pseudo-class { property:  value }

CSS Pseudo Selectors can also be used with classes

Selector.class:pseudo-class { property: value }

Common Pseudo Selectors

We often use pseudo selectors on our websites and they are really important. I am talking about the link states.

a:link {color:#FF0000} /* unvisited link */
a:visited {color:#00FF00} /* visited link */
a:hover {color:#FF00FF} /* mouse over link */
a:active {color:#0000FF} /* selected link */

Take care of the right order, otherwise they will not work.
You can also combine the Pseudo-Classes with CSS Classes

a.red:visited {color:#FF0000}

The :first-child Pseudo-Class

A really useful but most people do not know that it exists, is the :first-child selector. It matches the first child of another element. To make sure, that it is also working in Internet Explorer, a doctype must be declared
In the example below, the selector matches the first “p” element and changes the text color to blue.

Blue colored paragraph

Normal styled paragraph

Now we are going to select every “i” element in the first “p” element of the document. It is really easy, we only have to write p:first-child i { }

I am italic. I am italic

I am italic. I am italic

In this example, the selector mathes the first “i” element in every “p” element.

I am bold. I am bold

I am bold. I am bold

That’s it. In the next article I’ll write about Pseudo elements in CSS, like :first-letter.

Step 1

First create a new document and a new layer, call it “Background” and fill it with a radial gradient from #224897 to #417fba.

Step 2

Now grab the Rounded Rectangle Tool with 10px, draw a Rounded Rectangle and fill it with white. Then duplicate this layer, drag it under the other Rectangle and fill it with black. This will be the shadow for this window.

Step 3

Select the layer with the black shadow and apply the gausian blur with a radius of 5px. After this make a selection of the white rectangle, by holding down the Control Key and clicking on the Form layer. Now press the delete key. Last we also reduce the opacity of the white rectangle to 6% and the opacity of the Shadow layer to 60%.

Step 4

To create the white border, make a selection of the white rectangle again, create a new layer and fill it with a 1px white stroke with clicking on Edit -> Stroke… Choose “inside” for location. Because the border is too bright, we also reduce the opacity of the layer to 30%.

Step 5

Select the rectangle tool and create a white rectangle. Rotate it and rasterize it. Then make again a selection of the transparent rounded rectangle, invert it by pressing Control + Shift + I and press the delete key.

Step 6

Apply a gausian blur to the new made layer with 10px and also reduce the opacity to 8%.

Conclusion

I hope you had fun while doing this tutorial and subscript to my rss feed for future tutorials and articles.

Download the .psd file

So, let’s start.

Step 1

First we create a html markup like this one.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>First Ajax Request</title>

</head>

<body>
<a href="test.txt">Get File</a>
</body>
</html>

Later, when we click on the “Get File” link, the file should be loaded into the browser.

Step 2

Next we have to import our javascript file.

<script type="text/javascript" src="ajax.js"></script>

Then we also add a click event handler on the link.

<a href="test.txt" onclick="getFile(this.href); return false;">Get File</a>

Whenever the user clicks on that link, the method “getFile” get called with a parameter, which represents the path to the file we want to load. The “return false” is required, if the browser successfully loaded the file, to deactivate the link and the browser doesn’t redirect us.

Step 3

Now create the file which you want to load in the browser, eg. text.txt and write something in it like “Hello World!”

Step 4

Create a new file and call it “ajax.js”. This will contain our functios for the request. First we’ll write a function to get the XMLHttp object. Start with creating a new instance of an XMLHttpRequest object

var xhr = new XMLHttpRequest();

But it isn’t that simple in Internet Explorer. There you need to create a new instance of an ActiveX object.

var xhr = new ActiveXObject("Microsoft.XMLHTTP");

Before creating the new instance, we have to test for the exisctence of the object.

if (window.XMLHttpRequest){
  xhr = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
  try {
    xhr = new ActiveXObject("Msxml2.XMLHTTP");
  }
  catch(e) {
    try {
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
    } catch(e) {
      xhr = false;
    }
  }
}

Last we return the xhr object. Then the final function should look like this.

function getHTTPObject(){
  var xhr = false;

  if (window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
  }
  else if (window.ActiveXObject) {
    try {
      xhr = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch(e) {
      try {
         xhr = new ActiveXObject("Microsoft.XMLHTTP");
      } catch(e) {
        xhr = false;
      }
    }
  }
  return xhr;
}

Step 5

The next step is to send the request and receive the file. So we write a function “getFile” with one parameter, which expects the path of the file we want to load in the browser. Then we create the first time a instance of the XMLHttpObject.

function getFile(file){
  var request = getHTTPObject();
}

The getHTTPObject function could has returned a value of false, which means that the browser does not have Ajax capabilities. So we have to check this with an easy if condition.

if (request){
  //Do some Ajax
}

Now we have created an instance of XMLHttpRequest and we are ready to send a request to the server.

Step 6

To do this, there are three components.

1. The onreadystatechange event handler
2. The open method
3. The send method

ONREADYSTATECHANGE

This is an event that is triggered by the server, not by the user. During an Ajax operation, the server sends updates to the client about the current status of the communication. This is done by updating a property of the XMLHttpRequest object. It’s called readyState. Every time the readyState property is changed, the readystatechange event is triggered. If you register a function to this event handler, the function will be executed every time the server pings the client with an update.

if (request){
  request.onreadystatechange = DoSomething;
}

In the next step, we have to specify the details of the Ajax request.

Step 7

To specify the details of the Ajax request, such as the url of the file you want to request, “GET” or “POST” and a boolean which indicated whether the request should occour asynchronously or not. For our example we use “GET” and true, because we want an asynchronous request.

function getFile(file){
  var request = getHTTPObject();

  if (request){
    request.onreadystatechange = DoSomething;
    request.open("GET", file, true);
    request.send(null);
  }
}

Step 8

Now we have a succesfull request, the only thing we have to do now, is to receive the response and display it. We can do this, with checking two propertys.

READYSTATE

It indicates the current state of an Ajax request.

0 Uninitialized. The open methond hasn’t been called yet.
1 Loading. The open method has been called, but the send method hasn’t.
2 Loaded. The send method has been called. The request has started.
3 Interactive. The server is in the process of sending a response.
4 Complete. The server has finished sending a response.

So we have to check the status of this object and wait until it’s value reached 4.

function displayResponse(request){
  if (request.readyState == 4){
    //Do something with the response
  }
}

The other property we have to check now it the status property. It’s a three-digit numerical value. The most common status code is 200, which means “OK”. Other codes are 403 for “forbidden”, 404 for “Not Found” and 500 for “Internal Server Error”. By comparing this property to a value of 200, you can be sure that the server has sent a successful response.

if (request.readyState == 4){
  if (request.status == 200 || request.status == 304){
    //Display the response
  }
}

The last thing is to display the received response in the browser and register this function to the onreadystatechange property.

var node = document.createElement("p");
var text = document.createTextNode(request.responseText);
node.appendChild(text);
document.getElementsByTagName("a")[0].parentNode.insertBefore(node, document.getElementsByTagName("a")[0]);

The request.responseText property contains the data sent from the server. Depending on what the server is sending, this might be a string of HTML, XML or just a string of text.

And now register this function to the onreadystatechange property.

request.onreadystatechange = function(){ displayResponse(request) };

That’s it. It’s the basic of Ajax and now you are able to learn more details of Ajax and how to improve Usability with Ajax.

Download source files

Today I want to show you, how to create the Letterpress effect. It’s a very cool looking effect and it’s used on lots of new designed websites, because it’s also a design trend for 2009. A list of more cool design trends for 2009 can be visited on http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/

So, let’s start

Step 1

First create a new document with a size of 800×600px and fill it with a gradient from #b8b8b8 to #f0f0f0

Step 2

Grab the text tool and write some words. I wrote my name “Bernd Artmüller” but you can write anything you want.

Step 3

Now we’re making the cool Letterpress effect with some simple layer styles. Double click on the layer with the text to open the Layer styles panel. Apply a Inner shadow effect with opacity of 60%, distance 1px, choke 0px and size of 4px

Now fill it with a gradient from #6f6f6f to #b0b0b0

That’s it. You created the Letterpress effect.

Now you can play with it and apply this style to other shapes like i did.

Download the .psd for practicing

Today I want to show you a way to create an amazing 3D depth effect. I have seen this effect on http://dragoninteractive.com/ and I think, this is a really great way to give your website a 3D feeling.

Step 1

Create a new document 800×600px. Then create also a new layer and call it “Right Side”. Take the Pen Tool and make a shape, similar to this one and fill it with #464646. After this rasterize it.

Step 2

Create a new Layer, call it “Left Side”, fill it with #626262 and put the layer below the layer “Right Side”.

Step 3

Create a new Layer and grab the brush tool. Set it to a size of 35px, a hardness of 0 and the foreground color to white. Then draw a line from left to right with an opacity of 40%.

Step 4

Set the brush to a size of 12px and the opacity to 50 and draw another line above the previous made line. Then change the opacity of the layer to 20%. Now we have to cut out a little bit of the line on the left side. To do this, make a selection of the “Right Side” layer by pressing the Control Key and clicking on the small Thumbnail of the layer in the layers panel. Now invert the selection with pressing Control + Shift + I and press the delete button.

Step 5

We have to make this again, to create the 3D effect. It very similar to the two previous steps. Create a new layer, grab the brush tool, set the size to 40px, the foreground color to black and the opacity to 50%. Draw a line from right to left with a brush size of 15px and a opacity of 60%. Now make a selection of the “Right Side” layer, invert it and press delete.

Step 6

Repeat this steps, until it looks like the same as the picture below and try to make the lines a little bit different than the others.

Step 7

Now create a new layer, draw a rectangle at the top of the picture and fill it with a gradient from grey to a darker grey.

Step 8

Create a new layer. Grab the brush tool again and set the foreground color to black. Draw with the brush until it looks like the image below.

THATS IT. It’s a simple tutorial, you can change a lot when using on a webdesign.

]]> http://berndartmueller.at/2009/04/13/tutorial-create-a-nice-3d-effect/feed/ 1 http://berndartmueller.at/2009/04/12/tutorial-create-your-own-custom-photoshop-cs4-panel/ http://berndartmueller.at/2009/04/12/tutorial-create-your-own-custom-photoshop-cs4-panel/#comments Sun, 12 Apr 2009 12:03:01 +0000 Bernd http://berndartmueller.at/?p=26 In the new Photoshop version CS4, there is the possibility to create your own custom panel with your favourite and most used tools to improve your workflow.

To get started, you have to download the tool from http://labs.adobe.com/technologies/configurator/. Then install it and follow the instructions step by step. For me it was really easy to understand, how to create my own panel. It’s just drag & drop. The only requirement is that you must have Adobe AIR installed on your system.

A short guide to create your first custom panel:

1) Start the Adobe Configurator and choose File -> New Panel, then it should look like this screenshot

2) Drag & Drop your favourite tools or filters on the empty panel on the right. You can also change the tooltip of the tool and the position

3) When you’re finished, click File -> Save Panel into the plugin folder from photoshop (in most case it will be the Plug-ins/Panels directory)

4) Now restart Photoshop and activate it by clicking on Window -> Extensions -> Panel name

It’s a really usefull tool to improve the workflow and I don’t have to search for the needed tools everytime