My Blog for your Knowledge

We'll make sure your website works for you...

The Road to Web designing

Art Illustrations

Do you want to look great?

24 June 2009

101 Hidden Tips & Secrets For Photoshop

Website Design

1. Press Tab will hide tool bar and palette, Shift+Tab will hide only palette.

2. Hold Shift + click the top blue bar for toolbar and palette will move them to the nearest edge.

3. Double click the top blue bar, on any palette window, to minimize it.

4. Double click the gray background will bring up open file option, Hold Shift+double click will open up the browser.

5. Sick of the default gray background around your image? Select paint bucket, hold shift and click on the gray background, it will change to whatever color you have in your foreground color box.

6. In Photoshop, all "Cancel" buttons in a window can be changed to a "Reset" button by holding Alt.

7. Caps lock will switch your cursor for accuracy.

8. Press F button, it will switch between 3 different screen modes and give you more working area.

9. To draw a straight line, click then move to the end point and hold shift + click.

10. Hold Ctrl will temporary make any tool into move tool until you release Ctrl.

11. Ctrl + Alt and click drag the image, it will make a duplication of the current image over lay on top.

12. Hold Space bar, it will make any tool into "Hand Tool" until you release Space bar.

13. While in Zoom Tool, Ctrl+space = zoom in, alt+space = zoom out.

14. Hold Ctrl and press "+" or "-" it will change the % for image in navigator window.

15. When Using eyedropper tool to capture foreground color, hold Alt and click, it will instantly capture the color for background.

16. With Measure Tool, draw a line then hold Alt and draw another line from the end of the first line, it will measure the angle.

17. Ctrl+Alt+Z and Ctrl+Shift+Z will go back and forth in the history.

18. Alt+Backspace and Ctrl+Backspace will fill in the whole screen with foreground color or background color, Shift+backspace will bring up option window, Alt+Shift+Backspace and Ctrl+Shift+Backspace, will fill the image with foreground or background color but will leave the alpha transparent area alone.

19. When free transforming with Ctrl+T, hold Alt to keep the original image and then to transform a duplicated layer of it. Ctrl+Shift+T to repeat whatever you did in the last transform.

20. To make sure your Crop is on the edge of the image, hold Ctrl while cropping.

21. Ctrl+J will duplicate the current layer.

22. Ctrl+Shift+E will merge all visible layers to one layer, Ctrl+Shift+Alt+E will make a copy of the original and merge all visible layers.

23. While using Marquee Tools, hold Alt it will make the starting point as a center of the selection.

24. Ctrl + D to deselect, Ctrl+Shift+D to reselect what you deselected.

25. While selecting with Marquee tool, pressing the space bar can allow you to move the selection.

26. Hold Shift and press "+" or "-" it will switch between the layer mode:

N = Normal
I = Dissolve
M = Multiply
S = Screen
O = Overlay
F = Soft Light
H = Hard Light
D = Color Dodge
B = Color Burn
K = Darken
G = Lighten
E = Difference
X = Exclusion
U = Hue
T = Saturation
C = Color
Y = Luminosity
Q = Behind 1
L = Threshold 2
R = Clear 3
W = Shadow 4
V = Midtones 4
Z = Highlights 4

***The shortcut works even for following situation:

***Alpha turned off, Indexed Mode, Line tool, Bucket Tools, Dodge and Burn Tools

27. While using Brush or any other tools, change the opacity by typing the number.

*** type one number for % of it's ten times [4=40%]

***type two number for exact % [press 7 then 2 will get 72%]

28. Hold Alt while clicking on the eye icon beside the layer, it will hide all other layers.

29. Hold Alt while clicking the pen icon beside the layer, it will unchain this layer from all layers.

30. Select a layer, hold Alt and click the top edge of another layer, it will group them.

31. Hold Alt and click the button "Create a new layer", it will create a new adjustment layer.

32. Select a layer and hold Alt, then click on the garbage can button. It will instantly delete the layer, marquee where you want alpha and Ctrl+click the "Create new channel" button, it will create an alpha only on the area you marquee.

33. File> Automate > Contact Sheet: this can create a small thumbnail for every file, this can save you some time from searching.

34. When Move Tool is selected, toolbox on top can be useful from time to time, these are "Auto select layer" and "Show bounding box".

35. While Move Tool is selected, hold Shift (Alt+Shift+Right click) and allow whether or not to make a current layer chain with your upper layer.

36. With grid on, click the top left corner of the grid and drag to anywhere on the image to set the pivot, double clicking on the icon again reset the pivot.

37. After, draw a path on the image with pen tool, Ctrl+shift+H can hide/show it.

38. Control Navigator with keyboard sometimes can be more time efficient than mouse.


Home = move to top left corner
End = move to right bottom corner
PageUp = move up one page
PageDown = move down one page
Ctrl+PageUp = move left one page
Ctrl+PageDown = move right one page
Shift+PageUp = move up 10 pixel
Shift+PageDown = move down 10 pixel
Ctrl+Shift+PageUp = move left 10 pixel
Ctrl+Shift+PageDown = move right 10 pixel

39. Ctrl+Tab allows you to switch between different image files you are working on.

40. F12 = Revert to how the file was the last time you saved it.

41. Shortcuts for Channel: RGB, CMYK, indexed color...


Ctrl+"~" = RGB
Ctrl+1 = red
Ctrl+2 = green
Ctrl+3 = blue
Ctrl+4 = other path
Ctrl+9 = other path
Ctrl+"~" = CMYK
Ctrl+1 = light green
Ctrl+2 = pink red
Ctrl+3 = yellow
Ctrl+4 = black
Ctrl+5 = other path
Ctrl+9 = other path
Ctrl+1 = Indexed
Ctrl+2 = other path
Ctrl+9 = other path

42. hold Ctrl then you can draw a red box in the Navigator thumbnail for viewing.

43. Hold Alt and click on any of the history steps, that step will be copied and become the most recent one.

44. Alt drag a step from a serial action can copy it to another action.

45. Alt-click the flare preview thumb, and you can fill in numerical co-ordinates for lens flare.

46. Holding Shift + Alt while transforming an object will do it proportionally, from the center.

47. If you have the move tool selected and you want something duplicated just hold the alt key and move the image, holding the Shift + Alt while doing this, it will move it along one axis.

48. If you want to straighten an image that is crooked (maybe from scanning), click on the eyedropper tool or hit the I key 3 times to get the ruler. Click on the left side of the straight edge, then the right side of the straight (but crooked) edge. The choose Image> Rotate Canvas> Arbitrary, Photoshop will give you the degrees of rotation you just click ok.

49. If you create something in Illustrator, copy and paste it in Photoshop, it will ask you if you want this to be a pixel, path, or shape layer.

50. If you have a mask on a layer and you want to place a image in there and keep the mask. Simply open the image, say copy, and then Ctrl click on the layer to select the mask and use Shift + Ctrl + V to paste it into the mask which will also put it on a new layer as well.

51. To center an image, Ctrl + A , Ctrl + X, Ctrl + V, I think it also puts that image on a new layer.

52. Ctrl+E will merge the highlighted layer down to the next

53. When you have a brush selected, using [ or ] will scroll up or down that brush list.

54. Double clicking the zoom tool will make the image 100%, double clicking the hand tool will fit the image to your screen resolution.
55. Typing Content:

Ctrl + H will hide the highlight on your selected type.

If you click once while your type is selected on the font list, you can use your arrows to scroll up and down and see the fonts change on the fly!

Alt + Left or Right arrows will change your tracking in increments of 10
Ctrl + Alt + Left or Right arrows will change your tracking in increments of 100
Ctrl + Alt + Up or Down arrows will change your leading in increments of 10 pts
Shift + Ctrl with <> will change your font size in increments of 2 pts

56. Ctrl + Alt + T to make a copy of the layer in which you want to transform.

57. Ctrl + Alt + Right arrow. duplicates the layer you are on.

58. Change the active layer : Alt + [ or ].

59. Move the active layer up and down : Ctrl + [ or ].

60. Link 2 layers: with move tool click in the first layer hold Shift and click in the second one.

61. Ctrl+[plus key] will let you zoom in on an image anytime while Ctrl+[minus key] zooms out. Ctrl+Alt+[plus key] will zoom in AND RESIZE the window to fit the image size... same for Ctrl+Alt+[minus key] as well.

62. When using the Polygonal Lasso Tool, click backspace to undo a lasso step.

63. Pressing X will switch the selected foreground and background colors.

64. Pressing D will reset the foreground and backgrounds colors to black and white.

65. If your image has multiple layers, create a Marquee selection and press Ctrl+Shift+Cit won't work if you selected a hidden layer) will copy the image into memory as if they were flattened! Paste it on a new document to see the result.

66. Ctrl+Alt+Z will do multiple undo, versus just one.

67. Ctrl+click a layer thumbnail to select the layer transparency

68. To see what your layer mask looks like (and edit it), Alt+click its thumbnail in the layers palette

69. Press and hold Ctrl+Alt and click the Help bar with your mouse, drag it down and highlight "About Photoshop" and let go of the left mouse button for a different About Photoshop splash/screen.

70. When using Polygon lasso tool hold Shift to make a perfect line, it goes every 30 degrees

71.Photoshop CS2: Group many layers by clicking the layers you want to group by clicking it while holding the Shift key down, and then press Ctrl+G to group them into a folder for means of better organization.

72. Ctrl+Shift+N creates a new layer with a dialog box; Ctrl+Shift+Alt+N gets you a new layer without the hassle.

73. Back to brush, [ and ] will increase/decrease your brush size, Shift + [ or ] will soften or harden your brush edge.

74. Still in [ and ], Ctrl + [ or ] will move your currently selected layer up and down the hierarchy and Shift + [ or ] will select upper layer or lower layer.

75. Stamp Tool (s) is used to copy an area of image (defined by alt+clicking and area) and paint it somewhere else (cloning). It also works when you have multiple images open at the same time. Alt click an area of any opened file image and paint it anywhere else.

76. After you created a text you can click on font type tab and tap "down" key over and over to scroll through the font list and see the changes in (relatively) real time. A feature that I am tired of waiting to happen in illustrator.

77. Still in text mode, a trick from Microsoft word to apply hi-light to your text hit Ctrl+Shift+ <> to resize your text, to your preferred font size. Pressing Ctrl key while you are typing also gives you a free transform box temporarily and will go if you release it. Resizing text also works by pressing Ctrl+T (on selected layer, not when you are typing). It still retains as an editable text layer after.

78. And remember, pressing enter when you type will take you to a new line just like typing a letter but pressing Ctrl+Enter or Enter on numeric key will finish what you type.

79. You can drag a layer on to any other opened images in Photoshop and it will copy it as a layer (better than copy and paste image). Holding down Shift while moving it will snap the image right on the center of the other opened image

80. If you are working with sets....

Click on the set, in the blending mode it shows pass through by default... if you have an adjustment layer within a set and you want that adjustment layer to effect those layers underneath it within the set only, set the blending mode of the set to "normal" instead.


Mentioned before with more explanation:

- Pressed F to switch to 3 different viewing mode... when I first try it I said "wtf? what it's for?" Well, if you are sick of painting your image on the corners just to find yourself resizing your current image window, with F you can pan way outside your image. Happy corner painting!!

- Create a new file, 500x500 px, create a new layer, get a standard brush and paint a dot on the top center of your image (like the number 12 position on a clock). Press Ctrl+Alt+T, it will duplicate your original layer and free transform the new one. Move the pivot point (the circle with little dot in it found when you are free transforming something) to the center of your image, rotate your image 30 degrees to the right and hit OK to confirm the transform


Be excited..........

Hit Ctrl+Shift+Alt+T 10 times and see what happens!

81. When using the "move tool" you can select any layer by holding down the CTL key(CMD on a Mac) and clicking on the part of the layer on the canvas with your mouse. This way you won't have to go to the Layers palette every time and you don't have to keep checking on or off the auto select options for the move tool.

82. You can link up layers without going into the layers palette, by selecting the layer (how I just mentioned above) and holding down CTL + Shift(CMD + SHIT on a Mac) for each additional layer you want to link up. You can unlink them by clicking on the layer again.

83. You can delete more than one layer at a linking up all the layer you want to delete, and holding down CTL(CMD on a Mac) while you click on the garbage icon to delete the layer.

84. When using the type tool you can ok it by pressing CTL + Enter(CMD + Enter on a Mac) instead of clicking on the check mark on the options.

85. If you have more than one type layer, and want to make any of the following changes color/font/size/alignment/initializing to all of the type layers at the same time.....All you have to do is link up the type layer, hold down the Shift key and in the options for the type tool make your change i.e. color, size, etc.

86. You can use your number pad to change opacity for a layer.... I.e. type 5 and the opacity will be 50; type 55 and the opacity will be 55. You can use the number pad for any tool that uses the airbrush tool, stamp tool, brush, gradient, etc.

87. Pressing Tab key will hide the Tools palette and any other palette that you have on the stage. Pressing "F" will change between Full Screen modes. Using these two tips you can view your work Full Screen without any palettes.(You can press CTL+Alt+0 to fit your work to the screen, or you can press CTL+0 to zoom to 100%)

88. Pressing the "+" and "-" keys while holding down CTL+Alt will resize the whole document window, not just the work area.

89. You can delete a layer by holding down the "Alt" key and pressing "L" twice......actually now with Photoshop 7 you got to press "L" three times. It's not actually a keyboard shortcut, but it's a quick way to do it....don't know if it works on a MAC.

90. Pan documents with the space bar.

91. Ctrl+click a layer (in layers palette) to select it's transparency.

92. Ctrl+Alt+click between 2 layers in the palette to group them.

93. Alt + click in “add layer mask” button to add a black layer mask (instead of a white one).

94. When you select something, pressing Ctrl+J will copy the selected area and add another layer with the copied area - opposing copying the layer, making a new layer, and pasting it.

95. To glue the palettes together (all palettes combined into one strip), you just drag & drop a palette onto the end of another palette (watch the rectangle that indicates where the palette will get attached to).

96. Hold down Alt while Burning to Dodge instead, and vice versa.

97. Ctrl-click a layer to select an objects; alternatively, you may select more than one object/s in more than 1 layer by holding Shift while using the method just mentioned (Ctrl-click). To deselect, just press Ctrl+D.

98. If you have a mini scroll on your mouse, you may use that to zoom in (scroll up) or zoom out (scroll down).

99. Need to locate a layer quick? Use the Move Tool (V) and right click on the area the object lays. There should now be a “cursor-menu” with all the layers that is in that particular area. Now take a good guess and see which one of them fits the shoe; select a layer and Ctrl-Click the layer in the Layer Palette - see if the selection traces the object you desired to edit/find. Useful for those messy people (i.e. me!).

100. Need to get rid of a background quick? Assuming you at least know how to crop around an object, do so. Now press Ctrl+I or Shift+Ctrl+I for Inverse Selection. Press Ctrl+X to %@#!* that part out, and you should be left with the object!

101. Want to save the time from loading All your Photoshop brushes, when your Photoshop accidentally forgets to load them up (happens to me sometimes)? Select the brush tool, and click the little arrow pointing right (located at the top toolbar), next to the Master Diameter tick. Go down to Preset Manager and now there should be a menu of all the brushes currently loaded. Click on the first brush (top left) and scroll down to the bottom. Now hold Shift and click the last brush (bottom right). This should highlight all the brushes. See the “Save Set” to the right in the menu? Click that and name your brush set whatever you want, for this matter I just name it All (so I remember that this brush set contains all the brushes I currently have loaded, and is located near the top when loading the brushes up).

23 June 2009

50 Fresh JavaScript Tools That Will Improve Your Workflow

JavaScript is an integral part of the RIA revolution. JavaScript allows developers to create rich and interactive web interfaces and establish asynchronous communication with servers for constantly up-to-date data without a page refresh.

Many things that were once accomplished using Flash objects can now be built using JavaScript - with the added benefit that it is free, typically more web and mobile accessible under most circumstances using best practices for development techniques, and without the need to use proprietary software for development.

Though JavaScript has been around for a while, new tools, techniques, and information are constantly being pumped out to continually push the technology into greater heights. In this article, we wish to share with you a huge list of fresh and new tools and resources that JavaScript developers will find useful and informative.

Here are a few other posts that you might find interesting:

Useful JavaScript Tools

Unit testing is an integral part of building high-performance and efficient web applications. John Resig (creator of jQuery library) and Jan Odvarko have developed an excellent Firefox/Firebug extension called FireUnit which gives developers logging and testing capabilities via a simple JavaScript API. For those interested in the tool, you should also read Odvarko’s post detailing the usage of FireUnit.

Sugar Test
SugarTest makes it easy to write elegant and understandable JavaScript tests. Its API is inspired by both RSpec, Shoulda and jQuery. It works as a DSL running on top of JsUnitTest.

JS.Class: Ruby-style JavaScript

JS.Class is a library designed to facilitate object-oriented development in JavaScript. It implements Ruby’s core object, module and class system and some of its metaprogramming facilities, giving you a powerful base to build well-structured OO programs.

JSON Formatter and Validator
The JSON Formatter was created to help with debugging. As data expressed as JSON is often written without line breaks to save space, it became extremely difficult to actually read it. This tool hopes to solve the problem by formatting the JSON into data that is easily readable by human beings.

Faux Console: Simulating a Firebug, Safari or Opera debugging in IE
Browsers like Safari, Opera and Firefox use the Firebug extension that offers a developer a comfortable way to output debugging information using the console.log() command. Microsoft Internet Explorer does not support this though – Faux Console is a small JavaScript that you can embed in the document to have a basic debugging console in IE.

JS Bin
JS Bin is a web application for testing and debugging JavaScript and CSS collaboratively. You input your source code and save it to a publicly-accessible URL which you can then share to your fellow developers or in social networking outlets like Twitter or Facebook groups. Be sure to check out the

video introduction to see JS Bin in action.

PHP.JS is an open source project in which we try to port PHP functions to JavaScript. By including the PHP.JS library in your own projects, you can use your favorite PHP functions client-side.

Page Speed
Page Speed, released by Google, is a Firefox/Firebug extension very similar to YSlow that evaluates your web pages for performance. Read more about Page Speed best practices to see what aspects of a web page are being evaluated. YSlow and Page Speed are based off Steve Souder’s work (who worked for Yahoo! and now works for Google).

prettyPrint is an in-browser JavaScript utility for dumping variable information, inspired by ColdFusion’s built-in cfdump utility function. Using prettyPrint on JS objects, variables, and arrays will give you a large array of information about them, which you can then use for debugging purposes or simply for gathering data about them for documentation.

Spket IDE
Spket is an excellent toolkit for JavaScript and XML development. It has a robust and intuitive GUI, and integrates with popular and powerful JavaScript/Ajax libraries such as Y!UI and jQuery. Its JavaScript Formatter feature gives you unparalleled control and standardization for you or your team’s JavaScript code formatting standards.

Obtrusive JavaScript Checker
Obtrusive JavaScript Checker, created by Robert Nyman, is a tool for finding inline JavaScript on web pages. It highlights elements that have inline JavaScript properties and provides a summary report when you mouse over them. The tool is available as a Firefox extension or a Greasemonkey script.

Highlight.js highlights syntax in code examples on blogs, forums and other web pages. The tool works automatically: it finds blocks of code, detects a language and highlights it accordingly.

Javascript Compressor
Javascript Compressor is a web-based tool for compressing your JavaScript to reduce their file sizes. It works by removing unnecessary characters (such as extra tabs and spaces). Developers who use the tool to compress their code can also use the decoding feature to uncompress their source code. It also obfuscates your code, making it harder to read - which can be desirable if you want to delay prying eyes from analyzing your publicly-available code base.

Firediff is a Firefox/Firebug extension that allows you to track changes in the DOM and CSS. By logging these changes, you can gain information about how web applications work, and what elements (and what properties) are being altered by way of DOM manipulation.

RockStar Web Profiler
RockStar Web Profiler (aka Razor) logs and profiles information about client-side performance. It provides developers with a console for analyzing the data gathered by the tool. Check out the RockStar Web Profiler presentation to get an overview of its many awesome features.

bookmarklet maker
This plain and simple web tool allows you to create JavaScript-based bookmarklets. Usage is simple: simply copy and paste your source code into it and it will output the processed code in the lower pane.

Tiny JS
Tiny JS is an online directory of small but powerful plugins for popular JavaScript/Ajax libraries (MooTools, jQuery, and YUI at the moment). Its aim is to hunt down and feature lightweight plugins that give you a lot of bang for the buck.

JS Charts is a free JavaScript based chart generator that requires little or no coding. With JS Charts drawing charts is a simple and easy task, since you only have to use client-side scripting (i.e. performed by your web browser). No additional plugins or server modules are required. It’s enough to include the scripts, prepare your chart data in XML or JavaScript Array and your chart is ready.

Glimmer is an interactive design tool for incorporating slick JavaScript-based animation effects using the jQuery library. Glimmer comes with a wizard-style user interface which can reduce the amount of coding that you have to write manually.

A testing environment for JavaScript that runs on IE 6+, Firefox 2+ and Safari 3+. The tool shows differences between expected value and actual value, displays the failed line exactly and supports conditional execution. Released under GNU and available for free download.

CodeRun Code Search
CodeRun’s Code Search tool lets you search and view user-submitted Ajax, PHP, and .NET source code. Once you’ve found a script or project that you’re interested in, you can edit it via their web-based IDE without having to download the project locally.

BaseJS: A Mobile (Safari) Javascript Framework
a simple, lightweight framework created specifically for Mobile Safari (perfect for iPhone development).

MochaUI is a web-based tool for building web application interfaces built on top of the MooTools JavaScript framework. Jump right in by taking MochaUI for a spin in their demo page.

Utility Libraries and Components for JavaScript

narwhal is a server-side JavaScript library following the ServerJS standard. Developers can create and share “packages” for website widgets, site features, programming patterns, in a similar fashion as PEAR for PHP.

uploadify is a useful jQuery plugin for dealing with file uploads. It’s powered by a simple PHP script for handling the server-side stuff. Be sure to check out the uploadify demos to see the plugin in action.

Blackbird lets you log messages in JavaScript using a simple and intuitive JS-based API. The library also provides you with an attractive console GUI for viewing and analyzing messages. No more annoying alert() functions to see your objects’ contents (which can be frustrating for printing out array values) and for setting breakpoints.

Booklaylet is a JS library for letting you easily deploy your bookmarklet applications. The implementation is dead simple: take the Booklaylet source and modify it to point to your app’s URL.

JavaScipTools is a collection of useful JS components, functions, and classes with the aim of addressing some of the more common web developer tasks such as parsing and formatting of data types (i.e. date and time). It also comes with a dynamic table function for creating sortable HTML tables.

HTML 5’s Canvas element gives developers a way to draw stuff on web pages programmatically. Doodle.js is a utility library/framework for working with more complex and robust Canvas drawing processes. Check out Spiral Pattern demo and the Marbles in Space (3D simulation) demo in a browser that already supports Canvas to get a feel for how Doodle.js works.

liteAJaX is a lightweight JavaScript class for working with AJAX. This library is perfect for projects that don’t use a JavaScript/Ajax framework or projects that don’t need a more robust and fully-featured framework.

Burst is a vector animation engine for HTML 5’s Canvas element. With it, you can create smooth, Flash-like animation effects for browsers that support Canvas.

JSTestDriver is a Java-based framework for creating unit test following Test-Driven Development philosophies and best practices. Be sure to check out this video demonstration of JSTestDriver in action.

This library allows you to create PDF’s using nothing else but JavaScript. See the jsPDF demo page to see the library in action.

Useful JavaScript Libraries

GlassBox is a beautiful and refreshing take on modal windows that creates an interesting feeling of transparency as if you were looking through a glass. Check out the example page to see different types of GlassBox implementations.

jQuery TOOLS
jQuery TOOLS is a toolbox that gives developers some of the most popular UI design patterns at their disposal in an easy-to-use manner. View some of the things you can do with jQuery TOOLS in the project’s demo page.

Moosture is a JavaScript library for dealing with mouse gestures, written on top of the MooTools framework.

Tablecloth is a lightweight and unobtrusive JavaScript library for styling and adding dynamic user interaction to HTML tables.

Unobtrusive Table Actions Script
This simple and lightweight library brings together a set of common and useful functions for dealing with HTML tables, such as zebra-striping rows, highlighting rows on mouse over, and column highlighting.

LivePipe is a set of widgets and controls for adding common user interaction components to web applications using the Prototype JavaScript framework.

JavaScript Graphical / Virtual Keyboard Interface
This JavaScript package adds a virtual keyboard interface into web pages.

Tipmage is a JavaScript class for handling tooltips and annotations on images, similar to annotated images on Flickr.

qGallery is a simple but beautiful JavaScript for creating image galleries with smooth and slick animation effects.

Educational JavaScript Resources and Tutorials

Ajax Frameworks Decision Center
For large companies, committing to a JavaScript/Ajax framework such as Prototype, MooTools, or jQuery is a big decision because it affects a large amount of employees and will dictate the direction of the company’s client-side interaction and RIA development philosophies. Using the Ajax Frameworks Decision Center gives you an organized, quantitative, and thorough method for making a solid decision.

jQuery vs MooTools
This single-page site by MooTools Dev Team member Aaron Newton is a comparative look into jQuery versus MooTools.

Ajax Framework Analysis Results
This analysis of popular JavaScript/Ajax frameworks (Dojo, Ext JS, GWT, YUI) is a great resource for gathering research data for your own frameworks: the analysis matrix factors in criteria such as scalability, extensibility, quality and quantity of documentation, and much more. You can adapt this matrix, tweak their weights, and modify criterions to help you decide which JS framework to go with.

Sexy Drop Down Menu w/ jQuery & CSS
In this tutorial, you’ll learn how to create a multi-tiered drop down menu with the use of the jQuery library.

Easy Display Switch with CSS and jQuery
This tutorial outlines a method for using jQuery to smoothly-transition into different viewing modes, which can be helpful in image galleries.

Create a Slick and Accessible Slideshow Using jQuery
This is a step-by-step jQuery tutorial that I wrote for creating a simple and slick slideshow that can be adapted to display different content types. Check out the demo page to see the slideshow in action.

Learning Advanced JavaScript
John Resig has a slideshow-style, web-based tutorial on advanced JavaScript development. It is a wonderful stepping-stone for JavaScript developers ready to make the leap into RIA development using JavaScript.

JavaScript tests & Compatibility tables
This resource is a well-organized cheatsheet for JavaScript methods cross-browser compatibility backed by sample tests that you can run to see how they work (or don’t work) in your browser.

Code Conventions for the JavaScript
On this page, you can find suggested coding conventions for JavaScript. It is important to note that there is no one correct convention, but this is a great place to start developing your own.

About the Author

Jacob Gube is a bilingual web developer (JavaScript and PHP), web designer, author, and the Founder/Chief Editor of Six Revisions: an online publication that shares useful development and design resources and tutorials for web professionals.

22 June 2009

Digitally paint portraits in Photoshop

Create digital paintings that look like high-end comics from photos with great Photoshop tips from David and Sarah Cousens.

One of the most important pieces of advice for painting a portrait is to draw what you see, rather than what you think you see.

It’s very easy as an artist to start drawing in details that you assume are there, altering the image without realizing it – however, this will leave you staring at a finished piece that bears no resemblance to your model, wondering why you can’t get a good likeness.

If you constantly analyze your reference throughout, you’ll have a much stronger piece at the end. Marcus J Ranum has given his permission for us to base this portrait on his photograph of Miss Mosh.

You can download this royalty-free stock image for free from; check out his website, for more royalty-free stock images. Before you start, download and install the custom brush set from the cover CD.

01. Open the reference photo alongside a new A4 300dpi file and create the layers named ‘skin’, ‘clothes’, ‘clothes2’, ‘hair’, ‘blends’, ‘roughs’, ‘lines’ and ‘above’. On the rough layer, use the brush ‘Dave C’s Pencil 7 Blue’ to sketch the rough layout before drawing your final lines on the ‘lines’ layer with the ‘ink’ brush. Don’t worry about your final lines being perfect – most of them will be painted over.

02. Still using the ‘ink’ brush, lay out the flat colours on the relevant layers (so paint the skin tones onto the ‘skin’ layer). Keeping the colours on separate layers allows us to make selections easily, so make sure there are no adjacent colours. Don’t flat-colour the hair, as we’ll deal with this in a separate stage.

03. Use the Linear Gradient tool to add some colour to the background layer, as painting against white skews your perceptions of colour. Add a shading layer for each existing flat colour layer (Cmd/Ctrl + Shift + N) and tick Use Previous Layer to Create Clipping Mask. This will allow you to add shading only on existing pixels so you don’t have to worry about keeping within the lines. Add shading on the face on the shading layer linked to ‘skin’.

04. On the ‘hair’ layer, use one of the custom hair brushes we’ve supplied at 60% opacity to start building a base for the hair. Start with darker colours first, because these will show through to the top layers of hair. Build up with a variety of colours including greys, purples and browns. Don’t get too concerned with detailing individual strands at this point – just focus on the general shape and form of the hair.

05. Hide the ‘rough’ layer and start rendering the eyes on the ‘above’ layer – they will start to bring your image together. Remember eyes are 3D objects; you need to shade not just the iris but also the whites of the eyes. The eyelid casts shadow onto the eye. Show light reflecting on her pupil and add a small light line just above the bottom lid to show where the eye’s water pools, and draw in the eye lashes.

06. Looking more closely at the photograph, you’ll notice that the eyes in our sketch look slightly too wide. If you need to tweak any aspects of your artwork and want to avoid redrawing from scratch and losing the work you’ve done already, go to Filter > Liquify and select the Forward Warp tool (W), using the cursor to push the pixels into place.

07. When rendering the lips, observe the form and shadows carefully. Notice as the lips get closer to the corners of the mouth, they lose a definite outline and become much softer. Use an airbrush to avoid any hard edges at this point.

08. Lock the transparency on the ‘skin’ layer (click the chessboard symbol in the layers palette) and use a very light pink with the spot gradient tool (G) on this layer to indicate the main light source on the skin. It’s easier to use a gradient to depict light rather than a brush; it’s much more subtle.

09. Back on the ‘above’ layer, start to render the hands and fingernails with the ‘inking opacity’ brush. Use plenty of different shades and pay attention to the shadows in the photo. I’ve made the fingernails longer, but this is personal choice. Vary the colour on the fingernails and remember, fingernails will be reflective in places.

10. Detail the collar on the relevant clipping mask layers, paying close attention to the reference image, before moving to the hair layer. On the ‘hair’ layer, add some dark shadows to the hair still using the ‘inking opacity’ brush. It’s OK if they look strong and out of place as they’ll be mostly obscured shortly; they’re needed to add depth so use them to imply large strands of hair, again focusing on overall form.

11. On the ‘above’ layer, add strands of lighter colour, placing some on top of the dark hair. This should be more detailed – move some strands in different directions and fray some edges. Vary the colours: the more you use, the more authentic it will look.

12. Paste in paint texture.jpg above the ‘clothes’ layer and set the layer to soft light. Cmd/Ctrl + click the ‘clothes’ layer thumbnail (this will highlight all the pixels on that layer) and then add a layer mask to the paint texture (click the circle in square icon in the Layers palette). On the clipping mask linked to the ‘clothes’ layer, use the inking opacity brush to add highlights and reflections to the clothes.

13. Lock the ‘clothes’ layer and on this layer use a light blue spot gradient to add radiosity underneath the clothes highlights. Hit Cmd/Ctrl + V again to paste in the paint texture, and Cmd/Ctrl + T to transform and drag the corners of the box to fill the canvas. Position the layer above the blue background layer and set the layer blending mode to Soft Light.

14. Drag the ‘blends’ layer to the top of the palette and set the blending mode to Overlay. Now add some gradients to enhance the colour in certain areas and make them pop. To avoid the gradients spilling over into surrounding areas, use the Lasso tool (L) to select the relevant areas and apply the gradients on the ‘blends’ layer.

15. Use a low-saturation red over the areas where there would be more natural blood flow such as the nose, cheeks and fingertips, and use purples and browns to make the hair more vibrant. Add some small texture details, such as variation in skin pigment and some small pores with the ‘speckle’ brush. Although the details are subtle, the viewer will pick them up; as a result the skin won’t read as artificial.

16. On the ‘clothes’ clipping mask layer, add some soft blue rim lighting on her clothes (use the ‘inking opacity’ brush) in the same areas as the brown rim lighting in the photo. To finish, paste in photo sheet.jpg above the ‘paint’ layer and set the blending mode to Soft Light. On the ‘above’ layer, add some white messy effects with the ‘Fire brush’. Make any final adjustments.


13. Lock the ‘clothes’ layer and on this layer use a light blue spot gradient to add radiosity underneath the clothes highlights. Hit Cmd/Ctrl + V again to paste in the paint texture, and Cmd/Ctrl + T to transform and drag the corners of the box to fill the canvas. Position the layer above the blue background layer and set the layer blending mode to Soft Light.

14. Drag the ‘blends’ layer to the top of the palette and set the blending mode to Overlay. Now add some gradients to enhance the colour in certain areas and make them pop. To avoid the gradients spilling over into surrounding areas, use the Lasso tool (L) to select the relevant areas and apply the gradients on the ‘blends’ layer.

15. Use a low-saturation red over the areas where there would be more natural blood flow such as the nose, cheeks and fingertips, and use purples and browns to make the hair more vibrant. Add some small texture details, such as variation in skin pigment and some small pores with the ‘speckle’ brush. Although the details are subtle, the viewer will pick them up; as a result the skin won’t read as artificial.

16. On the ‘clothes’ clipping mask layer, add some soft blue rim lighting on her clothes (use the ‘inking opacity’ brush) in the same areas as the brown rim lighting in the photo. To finish, paste in photo sheet.jpg above the ‘paint’ layer and set the blending mode to Soft Light. On the ‘above’ layer, add some white messy effects with the ‘Fire brush’. Make any final adjustments.

Author: David and Sarah Cousens

Follow on Buzz