bytegrafix
Your Ad Here

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.

CODE


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

now.........


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 time.......by 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 opacity...like 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).

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

FireUnit
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
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
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
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
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.











JSCharts
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
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.










JSSPec
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
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
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
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
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
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.

JavaScripTools
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.

Doodle.js
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
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
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
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.

jsPDF
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
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.






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

Tablecloth
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
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
Tipmage is a JavaScript class for handling tooltips and annotations on images, similar to annotated images on Flickr.










qGallery
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.

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 tinyurl.com/cax885; check out his website, photography.ranum.com 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.

Author

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

PayPal Donation Button Widget - Make Money


Here is a great way for your readers to reward you for all the hard work and effort you've put into your blog. A PayPal Donation button will allow your readers to easily send you money via PayPal.

PayPal Icons
These icons can be used as your donation button if you choose to customize.

Adding a Paypal Donation Button

Sign into your Paypal account and if you don’t have one you can get a free paypal account here.

  1. Login into your Paypal account with your paypal E-mail address and password:
  2. Click on ‘Merchant Services’ Tab available in the Top Menu
  3. When you scroll down your window, you will see a ‘Donations’ link in the ‘PayPal Website Payments Standard’ heading Section.
  4. Clicking on the ‘Donate’ link will take you a form where you are asked to fill some information’s like Organization name/service, Donation ID (optional).
  5. Click on 'Customize Appearance' in order to use your own image for the button. You may use one of the images above if you like.
  6. After Filing the required information click on ‘Create Button’ link.
  7. Now you will see some HTML Code, copy it

Adding HTML code into Blogger blog:
  1. Sign in into your Blogger Blog and Click on the ‘Layout’ link in your dashboard
  2. Click ‘Add a Gadget’ link and select ‘HTML/JavaScript’ option
  3. Now paste the HTML code that you copied from your Paypal account and save it.
  4. Now open your blog and you will see the ‘Paypal Donate’ button in your blogspot blog sidebar. You can display Donate button wherever you want on your blog like blog Header, footer or its sidebar

Adding HTML code into Wordpress blog:
  1. Login into your Wordpress blog and go to its Dashboard
  2. Click Presentation –> Widgets
  3. Click on the content area in front of ‘Text 1’ widget
  4. Paste your HTML code in the content area available and save changes
  5. Open your Wordpress blog and check donate button will be in your blog sidebar


Wordpress Donations Cloud
This widget is quite useful because it's more than just a button. It allows users to link to their own site when they make a donation. Therefore encouraging your readers to make a donation.


I hope you've found this article to be of great help and I wish all of you much success in your blogging

adventures!

Blogger Read More/Post Summaries - The Best News Yet!

One of the functions most voted for in Blogger's recent Product Ideas forum was the ability to summarize blog posts on non-item pages.

I've written about a few different approaches to this, but these methods were never so easy to implement.

Luckily I came across this tutorial from Quite Random which offers the simplest - and most useful - method of displaying post summaries automatically for our Blogger posts, complete with a thumbnail from images used in our posts.


This customization is very easy to implement (there are literally only two steps) with very little editing of the template required. I installed with immediate success on several templates to test it out, and with only a little tweaking on one of my most customized designs.

In short, this is a fabulous implementation of post summaries for Blogger. Be sure to pop over to Quite Random to check out this post and learn how to install this hack for your own Blogger blogs.

However... This is not my only source of good news regarding post summaries for Blogger!

The Blogger team are in the process of implementing this function in Blogger! Or at least, I'm pretty certain they are.

Take a look at this screenshot which was taken from a clean installation of Minima (a default Blogger template) on a new blog (click the image for a larger version):

These tags look suspiciously like tags which could be used for implementation of post summaries. What's more, it seems we can choose whether or not to summarize our posts, and also the text used for the link to read the full article.

I can't say for sure when this implementation will become available, though I believe this will first be rolled out into Blogger in Draft so any issues can be resolved before the summaries become available to us all.

There's not yet been any mention about this on the Blogger in Draft blog, Blogger Buzz or even by the team on Twitter, but since this code is now appearing in new templates I'd guess this will become available in the very near future.

Stay tuned, I'll get more news about this as it happens and will (of course) explain how to use summaries in customized templates too.

This is a feature I'm very excited to know is in progress, so if anyone does have any news to share, please let me know!

Save as PDF

TweetLater Provides Great Automated Twitter Tools

http://1.bp.blogspot.com/_cNpXRtRph18/Sjq8UT_n-1I/AAAAAAAADx4/MHLc357CwAE/s400/tweetlater_logo


TweetLater is a great Twitter Service which automates some of the dull parts of managing your Twitter Account. Such as filtering spam, scheduling tweets, shortening URLs and more.
Here are some of the free features on TweetLater.
Schedule tweets — Plan, set & forget
Schedule tweets and keep your Twitter stream ticking over with new tweets even when you're not in front of your computer. Publish tweets when your international followers are online and you're asleep.


Bulk upload & schedule tweets — Save time
If you have many tweets to schedule, prepare them offline, put them in a simple text file, and upload them in bulk. Save time by not having to enter and schedule them by hand in the system.


Track keywords on Twitter — Empower yourself
Set up alerts and track keywords in the public Twitter stream. We will monitor the Twitter tweet stream and periodically email you a digest of the tweets that contain those keywords. You can also use this to track your @replies.


Save and reuse drafts — Save hours of typing
Save draft tweets, frequently used text snippets and URLs and reuse them in your scheduled tweets. Save tons of time by avoiding repetitive typing.


Send welcome DMs to new followers — Automate
Send a nice non-promotional DM to new followers that focus on them and your future interaction with them, or simply to thank them for choosing to follow you.


Bit.ly URL shortening — Track those clicks
Add your bit.ly URL shortening account details to your TweetLater profile, and we will shorten your links with it so that you can track the clicks on all your links.


Follow those who follow you — Automate
Automatically follow people who follow you and save a ton of time while your Friends list builds itself.


Unfollow those who unfollow you — Automate
Automatically unfollow someone when they unfollow you if that is how you prefer to manage your Friends list.


Vet new followers — Semi-automation
Even though you've selected to auto follow new followers, we will interrupt the process for 72 hours and give you an opportunity to manually review new followers and decide if you want to follow, ignore, or block each new follower.


Purge your DM Inbox — Keep it tidy
You will probably agree that it's a bit of a pain to manually delete DMs from your Inbox, especially since they accumulate so quickly. You can run a purge on your Inbox to delete everything, or DMs older than 7 days, or DMs older than 30 days.


Personal status feed — Your own tweet engine
Grab your own personal 140-character tweet scheduling engine and RSS feed. You can schedule and publish tweets that don't go to Twitter, they go to your personal tweet stream, which is available in RSS, XML and Javascript formats.


Unlimited Twitter accounts — No charge
Add and manage as many Twitter accounts as you want. We don't charge you a dime.

Build a fantasy castle in Photoshop

Pick up incredible photo-montage and texturing tricks with this tutorial from Jeff Huang.


Fantasy art is a genre all of its own: just like any other art form, it has its own rules and conventions. Slick, polished finishes are central to fantasy art. To achieve these slick finishes, you’ll need razor-sharp compositing skills and a neat way with color – you’re aiming for something that looks as though it could be real, but that nonetheless has a faraway, dreamlike feel.

In this tutorial, Jeff Huang shows how to use blending modes, textures, shadows and colour to create this hilltop castle – which makes the perfect backdrop to any fantasy composition, and will teach you a few of the tricks you’ll need on your way. The Masterclass is also great for anyone seeking to brush up their compositing skills in general.


01. Open GreenHill.jpg from the cover disc in Photoshop, and rename the background layer as ‘BG’. Renaming the layer helps us to be better organized, and also unlocks the layer. Next, we’ll need to dream up the atmosphere of our image, and the environment the castle will sit in.



02. Create a new layer and name it ‘Atmosphere’. In this layer, click on the primary colour picker in your toolbar and enter reference number #ffd258 in the bar at the bottom, to bring up a yellow hue. Fill the Atmosphere layer with this colour (Cmd/Ctrl + Delete). Your entire canvas will now be yellow – don’t panic, just change the blending mode to Multiply to get a mysterious, yellowtoned atmosphere.



03. Now let’s enhance the atmosphere. Create an empty layer and name it ‘SkyDarken’. As the name indicates, we’re going to darken the sky to make it more dramatic. As in the previous step, go to the colour picker, and enter #4d320c to bring up a brown hue. Use the gradient tool (being sure to set the preset to Foreground to Transparent) and create a gradient going from the top of the canvas to about halfway down the canvas. Now set the blending mode to Multiply.


04. Next, we’re going to create a light source for our scene so that it’s not so neutral. Create a new layer and name it LightSource. Go to the colour picker and enter #fff5dd to bring up a light peach hue. We’re going to use the gradient tool again, but this time instead of a Linear Gradient, we’re going to use the Diamond Gradient. Before using the gradient, set the blending mode of our LightSource layer to Overlay. Now, with the Diamond Gradient, create a light source from where the dark clouds meet the light clouds on the right side of the canvas.


05. Because this is not a complete startto- finish tutorial, we are going to skip a few steps so that we can focus on more technical aspects. In order to save time, I’ve prepared a modified version of the green hill, which we will be plotting onto our canvas. Open ModifiedHill.psd from the CD, and hold Shift while dragging the image layer onto your working canvas. It should now be neatly plotted onto the canvas with no flaws. I have also pre-modified the lighting and shape of the hill, as we will not cover that in this tutorial.

06. Next, we’ll plot a pre-painted castle onto our canvas. Open CastleBase. psd from the CD. While holding Shift, drag the CastleBase image onto our tutorial’s canvas. This is the painted base of our Castle, which we will begin to texture in the steps to come.


07. Next, we’ll create a stone texture for the castle. Download a flat stone-wall image or texture – you can download the one I’ve used from http:// tinyurl.com/3wf8d2. Fiddle with it until you’re happy with the texture, and drop that into our tutorial’s canvas on a layer named ‘StoneTexture’. Don’t worry about exact placement at this point.


08. We’ll start texturing our castle now. Duplicate the ‘StoneTexture’ layer and hide the original. With the duplicated texture, first set the blending mode to Multiply, then hit Cmd/Ctrl + T to free-transform the texture. Resize and move the texture accordingly, then right-click (Ctrl + click) on the bounding box and choose Distort. Drag the corner points of the bounding box to fit the perspective of the castle wall.


09. In the layer stack, we’re going to move the distorted stone texture layer to be above our castle layer. Once that’s done, hold Alt/Opt and click on the space between the ‘StoneTexture’ layer and the ‘Castle’ layer. You’ll notice a symbol that resembles an inverted lock showing up if you’re doing this correctly. Click on the symbol to make a clipping layer between the texture and the castle layer. Your texture layer should now be stacked on top of the castle layer.

10. Although clipping layers help tremendously and save you from needing to mask precisely in all areas of the castle, minor masking will still be needed. Create a layer mask on the texture and mask out all of the castle’s light sides, so that you’re just texturing the dark sides of the castle walls with the Multiply mode. We will be texturing the light sides of the castle later on with another blending mode.


11. Repeat Steps 08-10 for the rest of the castle’s dark walls. This should give you at least five layers of textures. Duplicate the original ‘StoneTexture’ layer and begin the process again. Pay close attention when distorting the texture – matching the perspective of the castle walls is key. Also, make sure that you’re using Multiply as the blending mode, that you have a consistent size ratio of the stone textures. Do not scale the walls to different sizes, or it will harm the image’s realism. When you’ve finished texturing and masking, merge the layers to one single layer and rename it ‘Darks’. Also, if the blending mode resets from being merged, change the mode back to Multiply.


12. Now that we have finished the dark sides of the castle, we will need to work on the light sides. Repeat Steps 08-10 on these sides, except this time use Overlay as your blending mode. Once you’ve done this, merge the layers like before, and change the mode to Overlay if it has reset to Normal. Clip this layer on top of the castle layer.


13. It’s all about details from here. The castle is looking convincing now, but it’s missing shadows. Create an empty layer, name it ‘Shadow’, and clip it on top of our ‘Castle’ layer. Set the blending mode to Multiply, and using the colour picker, enter the reference #2b190f to get a brownish hue. Using a soft brush with a low opacity, begin brushing in the shadows for our castle, observing the light source.



14. Let’s add some highlights to the castle. Create a new layer, name it ‘Highlights’, and clip it on top of the Castle layer. In the colour picker, enter reference #fef993 to select a light yellow. Now paint in some highlights where you feel they would occur. The light source is from the right of the sky, so highlights should be on the outer right edges of the castle. If the highlights become too strong, simply lower the opacity of that layer to a comfortable level.


15. It’s time to add final adjustments to our castle. You can create your own elements from your imagination, or use the ones included on the cover disc. Open up BridgeAndGrass.psd, hold Shift, and drag the layer into our canvas. Make sure it is our top layer. If done correctly, your image should now have grass, a bridge, and minor details, tweaks and adjustments on the canvas.


16. Finally, let’s plot some more fun elements onto our canvas to complete our piece. Also on the CD are Birds. psd and LensFlare.psd; open them and Shiftdrag them onto your canvas. Again, make sure they are at the top of the layers hierarchy. You should now be able to create imaginative scenery and convincing texture elements with no problem.

Author: Jeff Huang

Transform your doodles into art


Doodling is an everyday part of life for most creatives – it’s as natural as holding a pen. Whether you’re etching out little characters on the back of an envelope while you’re on the telephone, or creating a complex masterpiece in the back of a notebook, bus trip by bus trip, it’s an essential part of developing your own style and honing your imagination and artistic skills.

Many creatives, then, will have a bag full of doodle-filled notebooks, and a desk covered in messed-up envelopes and Post-It notes. But what do you do with them afterwards?

Much of the time they end up in the bin – we don’t see them as an important part of our creative work. This is a shame, as when you’re freed from commercial constraints and drawing for fun, your true style can shine through.

In this masterclass, Craig Shields shows you how to turn these little outbursts of creativity into artworks. You’ll learn how to spirit your doodles off the Post-It note and into a digital illustration, using them to add a very personal touch to an image. The masterclass makes use of several images that can be downloaded for a small fee or for free.


01. Find yourself a decent high-res stock image, or use an image of your own. For this illustration I’ve chosen a quirky futuristic image of a model, which you can download for a small cost from iStockphoto at this link: http://tinyurl.com/5j2jog. You can use any portrait that has a fairly clear background.


02. We’re going to insert some layers behind the figure later on, so we need to create a layer mask. First, select the Pen tool, and create a path around the edge of her face, hair and arms. Then right-click (Ctrl + click) your path, and pick Make Selection. Then go to Layer > Layer Mask > Reveal Selection to create your layer mask. Name this layer ‘Woman’.



03. To replace the background that we’ve just got rid of, create a new layer and call it ‘background’. Move this layer to the bottom of the layer stack. Choose a light purple and a dark purple, and fill the layer with a radial gradient, making sure the lighter shade is in the centre.


04. Right-click on the layer mask you created in Step 02 and select Apply Layer Mask. Next, cut out her left arm and paste it onto a new layer. The arm doesn’t look right where it is, so we’re going to rotate it towards her body slightly. After you’ve done that, merge the arm and woman layers together. Then select Image > Adjustments > Desaturate.


05. Grab a piece of paper, and something to draw with – this could be pencil, pen or inks. Sketch out some drips, similar to flowing blood. Be as messy and as rough as you want: the messier, the better. Use the photo of the woman as a reference point so that your drips will work with her body when you scan the drips into Photoshop.


06. Scan your drip drawings and open them Photoshop, dragging them onto a new layer named ‘drips’. Set the blending mode to Multiply. This gets rid of all the white and leaves you with only black. All you have to do now is move them around to see where they would fit best. I drew mine so that they would come from her fingertips and eye, but it’s up to you. Have as many drips as you like – have fun and experiment with markers, felt-tips and paint.


07. Open splat.psd from the cover disc and drag it onto a new layer called ’splat’. Make sure to put it behind the ‘woman’ layer. Next you need to desaturate it (as in Step 04) and set the blending mode to Multiply.

08. Next, have a hunt through your sketchbooks and anywhere else for doodles you’ve done, or grab a pen and get doodling, to create the materials for the next step. These can be as random as you like there are no rules here.


09. Next, scan in all of your doodles, drag them into your document, and stick them in a folder called ‘doodles’. Select a doodle’s layer, go to Image > Adjustments > Invert, set the blending mode to Screen, and play with its positioning. Repeat this for all your doodles.



10. Go to http://tinyurl.com/6sbbsp, download the image and drag it onto a new layer called ‘nebula1’. Drag the layer to the top of the layer stack, and set the blending mode to Screen. Select Image > Adjustments > Brightness/Contrast and enter a brightness of 5 and a contrast of 50 respectively. Then select Image > Adjustments > Hue/Saturation and drop the hue to -90. Leave the other controls alone.


11. Go to http://tinyurl.com/6jj2r4, download the image and drag it onto a new layer called ‘nebula2’. Change the blending mode to Screen and play with the colours. You can use any star field or space scene as a means of creating a bright and colourful textured overlay for your images. It’s just a matter of experimenting.

12. The background is looking a bit bland at the moment so let’s embellish it. Open bg_texture.psd from the cover CD and drag it onto a new layer above the ‘background’ layer. Set the blending mode to Overlay and select Image > Adjustments > Brightness/Contrast and enter –10; 100. Rename the layer ‘texture’.


13. We’re nearly there – just one more flourish of colour. Download the image from http://tinyurl.com/5kystq, drag it onto a new layer and set the blending mode to Screen. Mess around with the brightness and contrast, and the hue and saturation. Make sure you keep it bright and colourful.


14. For the finishing touches, create an adjustment layer. Go to Layer > New Adjustment Layer > Colour Balance and enter these values: 17; 1; 22. You can keep adding to this image as much as you like, throwing in any hand-drawn elements you have to hand, or whatever you dream up. Digital is good, but mixing it up with oldfashioned recycled doodles is better. Just to finish, select Layer > Flatten Image, then Filter > Sharpen > Sharpen. You may want to increase levels and saturation as well.

Author: Craig Shields


Easy Glass Effects in Two Minutes-Illustrator

Tutorial Gratification in Two Minutes

Illustrator Tutorial - Easy Glass Effects with Gradient Mesh

More About the Mesh

Change the color of a mesh point

Method 1 - Use Direct Selection Tool (The white arrow), select the mesh point, then choose your swatch

Method 2 – Drag the swatch to the mesh point

Remove unwanted mesh line segments

Method 1 - Using Mesh Tool holding down the Alt/Option key, click on a mesh line to deleteManipulate Mesh Select any point on your mesh with the Mesh tool and you’ll notice that directional lines appear. Grab a directional handle to move a directional line and you’ll alter the contour of the mesh line and, as a result, alter the direction in which the color of the selected point and the colors of the surrounding points blend into each other.Save Symbol LibraryUnzip and Save .ai file to: C:\Program Files\Adobe\Adobe Illustrator CS3\Presets\SymbolsSave From with Illustrator

  1. Open the file -> go to your symbol’s panel
  2. From the Symbol’s Fly-out Menu-> Choose Save Symbol Library
  3. Save the new library to the default Symbols folder. The library name will automatically appear in the Symbol Libraries submenu and the Open Symbol Library submenu.If you save the library to a different folder, you can open it by choosing Open Symbol Library > Other Library from the Symbols panel menu. Once you open it using this process, it will appear in the Symbol Libraries submenu with the other libraries.



Cool graffiti techniques

Mark Mayers shows you how to mix pixels and spray paint to create edgy urban art.


Graffiti has influenced many of today’s graphic designers and illustrators: skateboard graphics, clothing, and the music industry have all drawn on it heavily, while the distinctive graffiti style pops up in ads, magazines and elsewhere.

From modest beginnings in the 1970s as simple tags in New York subways, to the modern-day hip hop behemoth, graffiti art has gone global, as likely to crop up in chic art galleries as on the streets.

Here, you’ll learn how to add some chaotic, urban grit to your artwork using selection and layer blending techniques. You’ll also learn how to replicate a three-colour graffiti stencil using Photoshop’s filters and channels – then you’ll get the chance to get your hands dirty by adding some overspray and drip effects.

Finally, to pull off the effect, you’ll apply blending modes, as well as using Photoshop’s lesser-known Displace filter to map your graffiti to the contours of the wall.

The skater image for this tutorial is kindly provided by Paul Frost, www.theimageworkz.com. Some other images for the tutorial can be bought online for a small cost.


01. In Photoshop, create a new RGB landscape canvas measuring 29.7- x-21cm at 300dpi. Download the wall image from iStockphoto http://tinyurl.com/6k6x47, or use a similar image of your own. Import the wall image into your document as a new layer, then use the Clone tool set to All Layers to extend the plaster on the left-hand side plaster. You might also like to clone out the black paint area in the top right corner of the image. When you’re happy with your wall merge the layers (Cmd/Ctrl + E).


02. Save the image as Graffiti Tutorial. Next, desaturate it (Cmd/Ctrl + U), then give it a Gaussian blur of 2.5 pixels (Filter > Blur > Gaussian Blur). Now hit Shift + Cmd/Ctrl + S to Save As, check it’ll save in Photoshop format, and label it Bumpmap.psd. You can now close the image – we’ll be using it in the final step as a displacement map for the graffiti.



04. Continue adding layers, remembering to leave areas clear for the skater stencil and mural. Experiment with different blending modes: for this image I’ve used a combination of blending modes. Try filling selections with paler colours and dropping the opacity for a weathered look. You can also blend layers by doubleclicking their thumbnails and dragging the whitepoint Blend If slider to the left (hitting Opt/Alt and dragging to split the slider will refine the blend).


05. Open Skater.jpg from the cover CD and crop the excess background. Now use the Pen tool (set to Paths) to isolate the skater. You don’t have to be 100% accurate plotting your points here because the final stencil result is fairly crude. When you’re done, save the path by double clicking its thumbnail.


06. Press Shift + Cmd/Ctrl + U to desaturate, generate a selection from your path by Cmd/Ctrl + clicking its thumbnail, then hit Shift + Cmd/Ctrl + I to invert the selection and fill with white. Now access the Levels (Cmd/Ctrl + L) and set the blackpoint to 71, the midpoint to 3.37 and the whitepoint to 187 to increase the contrast.

07. Intensify the contrast by selecting Image > Adjust > Posterize and entering a value of 3. We now need to simplify the level of detail to mimic the way a hand-cut stencil is produced. Paint within a selection from your path using a hard-edged brush on the black and white areas, then use the Eyedropper tool to sample the grey and paint on those areas. Now go Filter > Noise > Median and enter a radius of two pixels.


08. With the Magic Wand tool set to Contiguous and a tolerance of 2, select the black areas from the image. In the Channels palette, create a new channel. Now use the fly-out menu to access the Channel Options, and click the Selected Areas option. Changing the default channel settings will make the following steps clearer.


09. Label the new channel ‘Black’, then set your foreground colour to white and hit Delete to fill the active selection with black. Now the black is independent from the white and grey you can paint out areas using a white brush to simplify it further. Remember – you’re aiming for a hand-cut effect.


10. Select the grey areas from the image and fill with black in another new channel. Paint out any fine hairlines that appear and simplify as in the previous step, then label it ‘Grey’. Select the white areas and fill with black in another new channel, then generate a selection from your path, inverse and hit Opt/Alt + Delete to fill with white. Clean it up and label it ‘White’.


11. Add a new layer, then delete the Background layer. Generate a selection from your ‘Grey’ channel, and fill the active selection with a pale brown (R = 243; G = 165; B = 114). Use a selection from the ‘White’ channel, and fill with an off-white (R = 200; G = 240; B = 224) on a new layer. Repeat using a selection from the ‘Black’ channel, filling with black on another layer.




12. Select the Crop tool and expand the bottom of the canvas, before accepting the crop prompt. Rotate it anticlockwise as shown. Now for the overspray effects: open Paint_1.jpg from the cover CD and use the Magic Wand tool (with the Contiguous option unchecked) to select the image and Copy > Paste it above the ‘Black fill’ layer. Transform and position, then set the blending mode to Multiply. Now erase any excess areas, then continue using the remaining paint files to further the effect.


13. Now use the same off-white and pale brown to fill more overspray areas using default blending mode – we’re aiming for a fairly subtle effect, so don’t overdo it. Once you’re happy, Merge Visible (Shift+ Cmd/Ctrl + E) and name the layer ‘Skater’. Now access the brush presets and pick a medium, soft-edged brush with Noise selected. Add some gentle overspray using the same colours as well as black. Drag and drop this as a new layer into your working document above the group folder.


14. Download the graffiti image from http://tinyurl.com/6nt584 or use a similar graffiti photo of your own – it must be bright and bold enough to work as a centrepiece for the image. If you’re using the downloaded image, you’ll see the bottom left-hand graffiti is missing. To restore it, first use the Crop tool to extend that side of the canvas by approx 2cm. Now draw a path for the missing area, then using the Clone tool set to All Layers, paint within a selection from your path. Finally, invert the selection to fix the remaining area.


15. Hit Cmd/Ctrl + E to Merge Down and label it ‘Main graffiti’. Drag and drop it into your working document above the skater and position in the bottom right. Next, use the Eraser tool to blend out the hard edges. Change the ‘Main graffiti’ layer’s mode to Screen and the opacity to 60%. Duplicate the layer and set its mode to Linear Burn, then increase the opacity to 77%.


16. Set the skater to Screen and 75% opacity, duplicate it, setting its mode Linear Burn and opacity to 77%. Open ‘Tag.tif’ from the cover CD and drop it as a new layer at the top of the stack, transform, set the blending mode to Screen, at a 50% opacity. Target your top layer and apply the displacement map by going Filter > Distort > Displace, in the next window set the Horizontal and Vertical Scale to 5, check Stretch To Fit and Repeat Edge pixels, then click OK, navigate to your saved bumpmap. psd file and click Open. Finally, target all your remaining layers in turn and hit Cmd/Ctrl + F to repeat the filter. Your graffiti now matches the contours of the underlying wall.

Author: Mark Mayers