Friday, June 18, 2010

10 Amazing Avatar movie Photoshop Tutorials

3D computer graphic adventure Avatar is the most expensive film in history, it took $500 million and 10 years to make. The James Cameron film, uses pioneering 3-D technology and computer graphics.
Here is a compilation of some great Photoshop tutorials which will help you to create your own Na’vi Avatar from a picture of yourself.

This is a Photoshop tutorial showing you all the steps you need to take in order to photo-manipulate yourself into a Na’vi (based on the characters in James Cameron’s movie “Avatar”).
Na'vi Photo Manipulation Tutorial

Tuhin is the founder of Inspiring Pixel, and in his first tutorial for the year 2010, he shows you how to create the Avatar movie poster in Photoshop.
Avatar Movie Poster in Photoshop

It’s Johnny Depp’s turn to be avatarized in this french tutorial (screenshots for every step). You can translate the whole page into english with Google Translator for exemple.
Photoshop turn into Na'vi from Avatar

Peter Ammentorp Lund (an art director based in Copenhagen), has made a video showing the step by step process of transformation.
Birth of an Avatar Photoshop

In this tutorial you will learn how to make your own Avatar movie poster from a portrait picture of yourself, using some simple but efficient techniques.
Photoshop Avatar Movie Poster

Here is an interesting tutorial how to create Avatar movie wallpaper in Photoshop.
Creating Avatar Movie Wallpaper

This tutorial is designed to guide you through through the precess of creating your own Na’vi Avatar in Photoshop CS4.
Na'vi Avatar Tutorial

This is an Avatar photomanipulation done in Photoshop CS3. This tutorial is not for “experimented” persons i think, you just have not to fear and you can still erase and try new things.
Avatar Photoshop photomanipulation

Anybody with medium photoshop skills, will have no problem following this Avatar Movie tutorial.
Avatar Movie Photoshop Tutorial

Sasha H. Muradali, like a lot of other Photoshop addicts, was awed by the graphics in James Cameron’s ‘Avatar.’ In this tutorial that she made, you can learn how to transform yourself into a Na’vi.

Photoshop Yourself Into an AVATAR Na’vi

Thursday, June 17, 2010

Web Developer ann UI designer Interview Questions

The main technologies required for a web developer are CSS, HTML and JavaScript. A good web developer also needs to have a grasp of and interest in both web standards and accessibility. While most web developer roles require other technologies such as Unix, Apache and server management, MySQL & PHP or SQL & ColdFusion or other dB and programming technologies, CVS, Perforce, or other source control management interfaces, I am only going to cover the technologies that span all Web Developer job descriptions: HTML, Web Standards and Accessibility, CSS and JavaScript.

The main skill I look for in a web developer is intelligence*, a desire to learn and an adoration of web standards. These questions target knowledge rather than capacity to learn. So, for each question remove 2 points if the answer, whether correct or not, sounded like it was quoted from a text book or this blog entry (unless, of course, you are interviewing me). Add points for interviewee efficient thought processes: if they didn’t know the answer to start with but figured it out in the end.

Please have a look at Web Developer Resume Screening for thought on how to filter through resumes to find good Web Developer applicants.

* Note: Intelligence ≠ Education. A Masters or PhD may just mean that they had the time and money to delay getting a job. Look for people who can think, not ones who regurgitate text books.
Please note that these questions are two years old.
… and … quoting @seldo: “I am adding ‘Can you use the men’s room without peeing all over the floor?’ to my list of phone screen interview questions.” Generally not necessary if interviewing women.

XHTML, CSS & JavaScript Web Developer Applicant Questions

XHTML Web Standards Interview Question

What is a DTD? What DTD do you generally use? Why? Pros and cons.

See the bottom half of DTD: the Document Type Declaration

Answer Rating:
Completely wrong answer though pretends to know it
I don’t know (I give points for honesty), trying unsuccessfully but honestly to give the right answer
Knowledge of the definition, but doesn’t know why they are used.
Knowledge of which one to use and why
Explanation of Quirks mode versus Regular mode and analysis of which one is best for different media
Accessibility Interview Question
Tell me some considerations in selecting font size?

Font sizes should be declared using relative measurement values, such as ems, via a style sheet, without the use of the term !important. There are issues with browser font size enlarging which can be rectified via CSS.

Answer Rating
uses tag
Gives an answer using pixels using CSS
Explains that font size should be declared using relative font sizes
Explains that font size should be declared using ems or percentages
Gives the answer above
CSS Interview Question

a) What are the possible values for the display attribute that are supported by all browsers?
b) What is the default value for the display attribute for the image element? (what is the difference between inline and block level elements)
c)What does display: run-in do?
d) Difference between “visibility:hidden” and “display:none”? What are the pros and cons of using display:none?
main values: none, block, inline, list-item, run-in
all values: inline block list-item run-in compact marker table inline-table table-row-group table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption none inherit
default value: inline, block or list-item, depending on the element. The is an inline element.
Run-in should make the run-in element be the first line of the next sibling block level element, if it is before a block level element that is not floated or absolutely positioned. If the next sibling is positioned or floated, then the run-in element will be a block level element instead of appearing in-line.
PPK’s Quirksmode explains it well. The w3schools lists table display values.
When visibility is set to hidden, the element being hidden still occupies its same place in the layout of the page. If the display is set to none, the element does not occupy any space on the page — as if it didn’t exist..
Answer Rating
Doesn’t know
Knows the answer to A
Knows the answer to A and D
Knows the answer to A, B and D
Knows the answer to C too!
CSS Interview Question

a) What are the five possible values for “position”?
b) What is the default/initial value for “position”?
c) How does the browser determine where to place positioned elements
d) What are the pros and cons of using absolute positioning?
e) if they are really advanced, ask about IE z-index issues with positioned elements.

a) Values for position: static, relative, absolute, fixed, inherit
b) Static
c) They are placed relative to the next parent element that has absolute or relative value declared
d) Absolutely positioned elements are removed from the document flow. The positioned element does not flow around the content of other elements, nor does their content flow around the positioned element. An absolutely positioned element may overlap other elements, or be overlapped by them.
e) IE treats a position like a z-index reset, so you have to declare position of static on the parent element containing the z-indexed elements to have them responsd to z-index correctly.

Answer Rating
Doesn’t know
Knows 4 out of 5 answers in part A
Knows A & B
Knows A, B & C
Knows A-D
Knows E too
CSS Interview Question

Write a snippet of CSS that will display a paragraph in blue in older browsers, red in newer browsers, green in IE6 and black in IE7

Possible Answer:
#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:black;}

Answer Rating
Doesn’t know
Knows how to declare one color, but no hacks
knows the html>body hack and * html hack
Knows all the hacks, but doesn’t validate or uses conditional comments in the HTML
Gives you the right answer and explains why the CSS won’t validate, or, uses a valid hack, other than conditional IE comments, instead of the above answer.
Basic Javascript Interview Question

What is the correct way to include JavaScript into your HTML?

See Including Javascript in XHTML for answers.

Answer Rating:
and other incorrect answers
verbally explains the theory but doesn’t know how to do it
correct explanation using inline event handlers or inline code
discusses and knows how to implement javascript event listeners
Explainst how you include JS within an XHTML document and ensure it validates using CDATA, explains
Basic Javascript Array / XHTML Form Interview Question

Are the following all equal, and, if so, what would your code look like to make the following all equal the same thing:


Answer includes knowing that the form is the second form on the page, and that the field input element is the second element within that form.

Answer Rating
Doesn’t know how to code forms and doesn’t know that the first index of an array is 0.
Knows either how to code forms with valid XHTML or that array starts at 0, but not both.
Knows how to code forms but not correctly, but omits something like doesn’t know that the form needs to be the second one on the page, and the element is the second one in the form. Would know how to do it if they actually put thought into it.
Codes the form correctly, but uses ID instead of name
Codes everything correctly
JavaScript Interview Question

How do you dynamically add a paragraph with stylized content to a page?

Possible Answer:
newParagraph = document.createElement('p');
newParagraph.setAttribute('class', 'myClass');
newText = document.createTextNode('this is a new paragraph');
myLocation = document.getElementById('parent_of_new_paragraph);
Answer Rating:
Wrong Answer (i.e. “you can’t”), I don’t know.
Use JavaScript, with no knowledge or incomplete knowledge of how that is done. Suggesting innerHTML, but not really knowing. Or explanation of accessibilty issues surrounding this.
Able to explain how you create a node, add content to the node, add a class attributes to that element, and then add that node as a child of the parent element (the above example)
Explanation of how to do it (worth 3 points) and explanation as to issues that arise when doing it, such as screen readers not knowing that text has changed, IE6 and IE7 not applying styles included with added content, not duplicating IDs, etc.
Has no clue how to do it to start, but can figure it out with guidance: extra points for the quick learner!
Other questions ideas:

Q: How do you organize your CSS? How do you come up with id and class names (what naming conventions do you use)?
A: While there are no right answers, there are best practices. Issues to look for are not having div mania, no inline CSS, no presentational markup, minimal use of classes, understanding the CSS cascade.

Q: What do you think of hacks? When should you use them? If you use them, how do you maintain them? What can be done to avoid needing to use box-model hacks? (if they aren’t pros, you can ask them what is the issue with x-browsers and the box model)

Q: What are the pros and cons of using tables for layout? Do you use tables? What are the pros and cons of tableless design? How do you generally layout your pages?
A: check for them NOT using tables

Q: Check to ensure that they separate structure and semantics first from presentation later? Do not ask about this during HTML, but do in webstandards.

Q: What are some deprecated elements and attributes that you use, and in what instances do you use them?
A: List of deprecated elements and attributes.

Q: What is involved in making a website accessible? What are arguments you use to convince others to invest in making their web site accessible.
A: See Making the web Accessible. Making sites accessible also makes them more search engine friendly (saves money), makes your pages accessible to the 20% of the population that has some type of disability (so you can make more money) and it’s the law in many places.

Q: Define what web standards mean to you? How do you implement web standards?

Q: In CSS, how can you make a form elments background-color change when the user is entering text? will this work in all browsers?

Q: How can you target an element in your HTML using the DOM?

Monday, June 14, 2010

5 Google Search Tricks for SEO

  1. “intitle:”/”allintitle:” Start your query with this tag and follow with your keywords to see who is using good SEO by targeting these keywords in their title tag. Using only “intitle” will show pages with title tags containing any of the keywords you search for, and “allintitle” will only show pages with title tags containing all the keywords. Doing your search with this tool will help you determine who is tightly targeting your keywords by using them in the title tag.
  2. “inanchor:”/”allinanchor:” When trying to find what backlinks any particular page has, there are several options. Google itself will not display every backlink, but using this tag can help you determine who is using the searched keyword in their anchor text for backlinks. This can be used to find both your own site’s anchor text use and how your competition is doing with anchor text.
  3. “intext:”/”allintext:” If you’re trying to determine which pages are using your searched keywords most effectively in the page content, this is your tag. Results here will display which pages are using the target keywords most in their visible content.
  4. “link:” This is another tag you can use when doing backlink research. When you use this tag with a domain or a full page URL you can see what pages Google has listed that are linking to this page. Again, Google will not list all backlinks, but this can give you a quick rundown of backlinks to specific pages.
  5. “site:” This is a tag that is often missed for its true value. When you use this tag and follow it with a domain name, it will display all pages that Google’s robots have crawled. If, in addition to this, you add keywords – it will display only pages inside that domain that match the keyword query. This is an easy way to determine if Google has cached a specific page, or for finding out relevant information within a particular domain. You can even do a partial search with this tag to find out all sites of a certain class that match your query. For example, typing “” will list all relevant results that only have domains with the “.edu” extension.

Using any (or all) of these tags can help you in your SEO research quite nicely. They are valuable tools to research competition or even measure your own levels of progress.

This guest post is by Eric Gesinski who does Tulsa website design and search engine optimization. You can also write a guest article and share your favorite tips. Read more articles by Eric.

Wednesday, June 2, 2010

Curved corner (border-radius) cross browser

This is a behavior htc file for Internet explorer to make CSS property " border-radius " work on all browsers. At present, all major browsers other than IE shows curved corner by adding 4 lines of csshe HTML:

.curved {
-moz-border-radius:10px; /*Firefox*/
-webkit-border-radius:10px; /*Safari and chrome*/
-khtml-border-radius:10px; /*Linux browsers*/
border-radius:10px; /*CSS3*/ }

<div class="curved">Curvd div</div>

For firefox, you can set border-radius by prefixing “-moz” to the css property. And ofcource for webkit use “-webkit” . Now IE ?? .. As IE is not a good browser to work with css, we need to make it so.

Here, you need to use a nice css hack. Some how I managed to have an htc file to make border-radius work in IE . Now adding the htc with one more line of css will make the curve work in IE browsers also behavior:url( You can download below source.

Download for file :

More details are on