Silhouettes art had tremendous popularity which has grown over years and is now associated more with images depicting fashion and fitness. Traditional ways of making Silhouettes are somewhat complex which involve cardboard and paints, but thanks to two wonderful inventions of mankind – Photoshop and Wacom things are much simpler now.

In this tutorial I will take you through some beautiful examples for inspiration and then we will proceed to make a silhouette from scratch.

Step 1: Inspiration

Silhouettes in movies

The famous silhouetted image of Elliot and E.T. encircled by the moon depicted in Steven Spielberg’s E.T. It is now a part of the logo of his film and television company Amblin Entertainment.

The second one is of Alfred Hitchcock in American television series Alfred Hitchcock Presents in which he himself appears in a silhouette form in the opening screen and in a number of scenes as well.

Silhouettes as traffic symbols

The first one is a Japanese railroad crossing signal which uses a silhouette of a steam engine. The second one is from Canada which warns drivers for speeding cameras. The third one is a Swedish moose warning signal, portraying silhouette of a moose, a typical encounter you might experience while driving in Sweden!

Silhouettes of public figures

The first one is of English novelist Jane Austen, author of famous titles like Pride and Prejudice (1813) and Sense and Sensibility (1811) . Her silhouette is attributed to 19th century artist Mrs. Collins and is displayed at the National Portrait Gallery, London. The second one is of silhouette depiction of Queen Victoria used as decoration in the London Underground. The third one is artwork of designer Jonathan Mak depicting Steve Jobs on the apple logo, which went viral on the internet few days ago.

Step 2: Sketch

Grab a pencil and a sheet of paper and start sketching your ideas. No need to sketch in detail as we are going to use only the outline for making the silhouette, but make sure that the dimensions and/or anatomy is correct. In my case my client wanted something like a person using a phone. I made a few sketches, and drew a dark outline around them.

The first idea depicts a lady walking a dog, looking at her phone. I imagined a background with neighborhood depiction like houses etc. which I can add to the silhouette later on. The second idea is of a guy standing and looking at his phone. In this case I imagined a park or similar setting with street lights etc. as background.

Step 3: Scan

Draw a thicker outline on your sketch and scan it. After scanning I found that the silhouette of the lady with dog appeared better on-screen, so I went ahead with it.

Step 4: Digitally Enhance

Open up the scanned image in Photoshop (or similar editor) and plug-in your Wacom (or similar device).

a. Outline

Create a new layer, select brush tool 2-3px, and set a contrasting foreground color (like red, so that it visible) and using the Wacom pen outline the image.

b. Fill the outline with the same color.

c. Duplicate the silhouette in a new layer, use the select tool to select the entire silhouette and fill it with #00000. In this step you can zoom into the image and edit minor flaws and smooth the outline with careful movements of the brush.

If your silhouette consists of two or more elements, it’s easier if you handle them one by one. In my case I divided the task into three – the lady, the leash and the dog. So I repeated step a to c two more times and here is what the silhouette looks now.

So now the silhouette is done, you can save it as a vector and then proceed to using it in a banner or an image as required.

d. As I said before, I imagined the entire picture to be some sort of neighborhood, so created an apartment block and duplicated to make a couple of them for the background.

e. Now add the silhouette to the background

f. Once the silhouettes and the background is ready, its time to work on the layout of the banner or the final image as required. Since this project was a banner for website I kept width as 900px and height as 357px. The elements that I added in this stage are speech bubbles which contains a specially designed Facebook button for the app and text.

The final banner looks like this. The banner depicts a Facebook enabled e-commerce app (www.dragdropshop.com), and will be a part of a sliding js carousel on client’s new homepage.

Our starting point will be a cool sliding tags design made by Thomas Bosée. Then we’ll learn how to use WordPress wp_list_categories function, how to edit its result, how to code CSS and finally a little of jQuery “Black Magic”.

So, let’s rock!

Demo first, please

So our goal is to achieve the effect seen on this demo. As usual you can download our sample files and edit as you want!

Wp_list_categories()

Wp_list_categories is a function that gets all categories and has a few useful parameters. We’ll be using a few of them:

• echo – whether the results should or shouldn’t be displayed. This is quite useful because we’ll have to adjust results a little bit
• show_count – this one toggles the display of current post count in each category
• title_li – since the default value is a big <h2>Categories</h2> we’ll change it
• depth – It’ll be better not to have children categories this time. But if you want it just put it as zero and change ‘hierarchical’ to false

Our php will be like this:

<ul>
<?php
	$args = array (
		'echo' => 0,
		'show_count' => 1,
		'title_li' => '',
		'depth' => 1
	);
	$variable = wp_list_categories($args);
	echo $variable;
?>
</ul>

And this PHP outputs this HTML:

<ul id="category">
	<li class="cat-item cat-item-8"><a href="#design">design</a> (17)</li>
	<li class="cat-item cat-item-6"><a href="#icon">icon</a> (9)</li>
	<li class="cat-item cat-item-7"><a href="#grid">grid</a> (3)</li>
	<li class="cat-item cat-item-9"><a href="#clean">clean</a> (25)</li>
	<li class="cat-item cat-item-1"><a href="#typography">typography</a> (8)</li>
	<li class="cat-item cat-item-5"><a href="#minimal">minimal</a> (12)</li>
	<li class="cat-item cat-item-5"><a href="#illustration">illustration</a> (1)</li>
	<li class="cat-item cat-item-5"><a href="#high-resolution">high resolution</a> (6)</li>
	<li class="cat-item cat-item-5"><a href="#iphone">iphone</a> (15)</li>
	<li class="cat-item cat-item-5"><a href="#interface">interface</a> (21)</li>
	<li class="cat-item cat-item-5"><a href="#grunge">grunge</a> (10)</li>
</ul>

Oops, HTML is not quite right yet

As you may notice, the default post count is simple text with parenthesis. Well, in our original design we have count as a separate element, so we’ll need to change this default behavior. A simple way of doing this is with str_replace, we’ll search for “(“, replace with “<span>” and then search for “)” e replace with “</span>”.

This is how your category listing function will be:

<ul>
<?php
	$args = array (
		'echo' => 0,
		'show_count' => 1,
		'title_li' => '',
		'depth' => 1
	);
	$variable = wp_list_categories($args);
	$variable = str_replace ( "(" , "<span>", $variable );
	$variable = str_replace ( ")" , "</span>", $variable );
	echo $variable;
?>
</ul>

And now we’ll have right HTML, as follows:

<ul id="category">
	<li class="cat-item cat-item-8"><a href="#design">design</a> <span>17</span></li>
	<li class="cat-item cat-item-6"><a href="#icon">icon</a> <span>9</span></li>
	<li class="cat-item cat-item-7"><a href="#grid">grid</a> <span>3</span></li>
	<li class="cat-item cat-item-9"><a href="#clean">clean</a> <span>25</span></li>
	<li class="cat-item cat-item-1"><a href="#typography">typography</a> <span>8</span></li>
	<li class="cat-item cat-item-5"><a href="#minimal">minimal</a> <span>12</span></li>
	<li class="cat-item cat-item-5"><a href="#illustration">illustration</a> <span>1</span></li>
	<li class="cat-item cat-item-5"><a href="#high-resolution">high resolution</a> <span>6</span></li>
	<li class="cat-item cat-item-5"><a href="#iphone">iphone</a> <span>15</span></li>
	<li class="cat-item cat-item-5"><a href="#interface">interface</a> <span>21</span></li>
	<li class="cat-item cat-item-5"><a href="#grunge">grunge</a> <span>10</span></li>
</ul>

CSS, CSS, CSS

(A.K.A. CSS3. Yeah, a really bad joke)

Now we’ll do this with a few cool CSS3 implementations. This is what will help us:

• Before and after pseudo elements – instead of putting a lot of additional spans we’ll just use them to create pretty effects
• Border-radius - we’ll need slightly rounded corners
• Content - this CSS property will be especially useful because we’ll insert an image as content of before count and after count
• Element positioning - we’ll have to be aware of positioning since before and after have to always be with our main span element

Let’s go step by step. Basic CSS for background and main div positioning. Nothing really major in here:

body {
	background: url(bg.png);
}
	#container {
		position: relative;
		width: 500px;
		margin: 50px auto 0;
		padding: 10px 0 20px;
	}

With #category and li rules we’ll achieve that side-by-side listing.

#category {
	margin: 0;
	padding: 0;
	list-style-type: none;
	overflow: hidden;
}
	#category li {
		float: left;
		position: relative;
		padding: 0 10px;
		margin: 0 15px 10px 0;
	}

Our link styling will create that “white” part of our little tag. Background is a 1px wide soft gradient:

#category li a {
	float: left;
	padding: 4px 10px 0;
	height: 18px;
	font-family: "arial";
	font-size: 10px;
	color: #3f3f3f;
	text-decoration: none;
	border-top: 1px solid #d3d0cf;
	border-left: 1px solid #cac7c7;
	border-bottom: 1px solid #aeadad;
	background: url(bgTag.png) repeat-x;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
}

Now we need to create the orange part of our tag. Since we’ll animate just the “middle”, we’ll have to do it in a way that our before and after elements will be “inside” of span but will go to right / left as our main element expands. So this will do the trick:

#category li span {
	position: relative;
	float: left;
	width: 35px;
	padding: 5px 0 0;
	margin-top: 1px;
	height: 18px;
	font-family: "arial";
	font-size: 10px;
	color: #3f3f3f;
	text-align: center;
	background: url(bgCount.png);
	overflow: hidden;
}
	#category li span:before, #category li span:after {
		position: absolute;
		top: 0;
		left: 0;
		width: 3px;
		height: 30px;
		content: url(bgBeforeCount.png);
		overflow: hidden;
	}
	#category li span:after {
		left: auto;
		right: 0;
		content: url(bgAfterCount.png);
	}

jQuery Black Magic

First of all, we need to include jQuery, right? So we’ll do it with a really cool technique that I’ve seen at jQuery boilerplate:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js" type="text/javascript"></script>
<script type="text/javascript">window.jQuery || document.write("\x3Cscript src='js/jquery-1.7.1.min.js' type='text/javascript'>\x3C/script>")</script>

We’ll try to get it from Google. Since almost everybody visits Google often we have a good chance of getting this right from the users cache. But if for any crazy reason Google is down (for instance, if we have been hit by a giant meteor just like our dino friends) it’ll get jQuery from our local file :)

Now we need to show / hide post counts when hovering over them, so our basic logic will be:

FIND all "#category span" tags
	animate their width to 0px
FIND all "#category li" tags
	WHEN mouseenter
		animate this.children("span") width to 35px
	WHEN mouseleave
		animate this.children("span") width to 0px

When translating this to jQuery what you need to be aware of is:

• When you animate item to zero jQuery will add ‘display: none’ to it (will hide our before and after tags), so we’ll animate it to 5px instead
• You have to chain selectors to get better performance, so we’ll find #category, then get each span, then go up a level (to li’s)
• When you animate several elements it’s good to “stop” them before animating so we won’t have a lot of “dancing” tags if user moves randomly mouse over elements

Our final jQuery code will be this crazy thing:

$(function(){
	$("#category")
		.find("span")
		.each(function(){
			$(this).animate({"width": "5px"});
		})
		.parent()
		.hover(
			function(){
				$(this).find("span").stop().animate({"width": "35px"});
			}, function() {
				$(this).find("span").stop().animate({"width": "5px"});
			}
		);
});

So, what do you think?

Hope you enjoyed reading. Don’t be shy and share your thoughts with us!

Have you ever come across a website with such a great design or effects that your inner voice screams wow, making you wonder how it would be possible for you to recreate the effect? The purpose of this article is to provide you with resources and insights about how you can learn from your favourite websites, learning and taking advantage from real implemented effects and functionalities.

So let’s get started!

1. Parallax Effect

Click the image above to visit the Nike website and scroll-down the page. Cool isn’t it? The illusion is called a Parallax Effect. This effect is relatively recent in web design but you can see dozens and dozens of websites using it already. This is not the only illusion you can get with a Parallax effect, actually the most common illusion is the one used on the Silverback website (resize the browser window to see the effect in action). Basically you are seeing several elements (in this case backgrounds) moving at different speeds with the posterior element going over the previous one.

How to recreate

Ian Lunn wrote an amazing tutorial on how to recreate the Nike’s Parallax Effect. Check it here Nikebetterworld Parallax Effect Demo.

2. Mouse Drag

Yess BMX uses one of my favourite functionalities on a website which is mouse drag. These days it is still relatively rare to find a website where you can drag elements with your mouse. Nevertheless, that doesn’t mean you can’t easily have it on your page.

Dragdealer is a drag-based JavaScript component that embraces endless front-end solutions. Elegantly crafted for JavaScript-aware coders.

How to recreate

The solution is called Dragdealer. Check the link for more information.

3. Sliding Panel

I’ve decided to include this jQuery sliding effect since it’s widely used these days and it looks great almost everywhere. Building a sliding panel it’s relatively simple and you have tons of ways to do it. Check one way to do it below.

How to recreate

Connor Zwick from Nettuts wrote a fantastic tutorial on how to build a login form using a sliding panel. Check it here Build An Incredible Login Form With jQuery.

4. Konami Code

To be honest I haven’t heard about this one until very recently and I was amazed and spent a good time having fun with every page I have found using the Konami Code. The author was inspired by the cheat code that appeared in many of Konami’s video games going all the way back to 1986. Now imagine using a similar concept on a website and… magic happens! Visit the website above and use the combination provided in the end of this paragraph. You can also visit konamicodesites.com and prepare yourself for some fun. Unfortunately Facebook is not using Konami Code anymore but many others are.

To enter use the following combination with your arrow keys: up up down down left right left right B A

How to recreate

Matt Kirman has an old but still efficient short script on how to recreate the Konami code on his webpage. Check it here How to recreate the Konami code in Javascript

5. Hover Effect

You probably have seen this effect a million times but since you’ve been a bit lazy and still aren’t using it, I decided to include it so you can stop making excuses. Now seriously, this sliding effect is losing its status as trendy since it is so massively used, but the point is that you can change the hover effect at will. Apply for instance a fade effect with a border color change – It will look good and modern.

How to recreate

Noura Yehia wrote another great tutorial on how to achieve this so go over DevSnippets and take a look. Panel slides on hover effect

6. Loading Page

Vivascom website has a simple but nice jQuery loading script working. The script can load a part or an entire page, it includes a nice looking animation and works in all browsers except IE6 (but you don’t need that one do you?).

This preloader has it all. Loading bar, custom animations and getting all images included in the web page.

How to recreate

Go over Gayadesign for more information, download and demo. Preload your website in style

7. Scrollbar

At Sapphire Sound’s What We Do section you can see they have a good looking scrollbar to scroll the content inside the div on the right side. In order to do that, they make use of a great jQuery plugin called jScrollPane.

jScrollPane is a cross-browser jQuery plugin by Kelvin Luck which converts a browser’s default scrollbars (on elements with a relevant overflow property) into an HTML structure which can be easily skinned with CSS.

How to recreate

On their site you can find more information including the download link and some demos. Check jScrollPane.

8. Mouse Wheel

One thing I love when I visit a website is to check that someone cared about usability and user experience. That’s the case of the agency Creative People. Their website is awesome and I loved the fact that they’ve implemented mouse wheel support on some of their sub-pages. Click the Web, Brand or Social buttons and use your mouse wheel. These days there is absolutely no reason to limit the user to a left and right arrow in order to navigate through a list of elements. Small details like these increase the overall quality of a page.

How to recreate

Brandon Aaron has a great and simple to use jQuery mouse-wheel support plugin. Check his page for more information.

9. Slide Navigation

Spoon Juice website design is incredible and the same applies to its navigation. Again one of my favourite aspects in this kind of navigation is the usability and efficiency it offers. Spoon Juice built its own script but you can easily build an equally awesome navigation of your own following the tutorial below.

How to recreate

Visit Tympanus website and check their amazing tutorial.

1. How to Create Inset Text With CSS3

In this tutorial you are going to use the text-shadow property that is currently supported by most of the major browsers to create the appearance of inset text. Inset text being text that has been pushed into the background, almost like a reverse embossed effect.

2. 3D Text

This is an example of 3D text created merely with CSS3. Use multiple text-shadows to create 3D text on any HTML element.
No extra HTML, no extra headaches, just awesomesauce.

3. Cool Text Effects Using CSS3 Text-Shadow

This tutorial shows you how to create some really cool and inspiring text effects using text shadows in CSS3.

4. Letterpress Effect with CSS Text-Shadow

The letterpress effect is becoming hugely popular in web design, and with a couple of modern browsers now showing support for the text-shadow CSS3 property it’s now simple and easy to create the effect with pure CSS.

5. Letterpress Text Effect Using Photoshop and CSS

Letterpress effect looks good in modern websites, letterpress effect can be gain using Photoshop and also using text-shadow property of CSS. This tutorial will show you how to achieve letterpress effect with Photoshop and also with pure CSS.

6. Text Embossing Technique With CSS

Text embossing has become a huge trend in last couple of years. This tutorial describes how to implement this effect with CSS.

7. Subtle CSS3 Typography that you’d Swear was Made in Photoshop

Learn to use CSS3 text shadows, outlines, transitions, and even text gradients to create cool typography that you’d swear had to be made with a program like Photoshop.

8. Outline Your Text Using the CSS3 text-stroke Property

This tutorial shows you how to add an outline, or stroke, to your text using the CSS3 text-stroke property.

9. How to Create a Cool Anaglyphic Text Effect with CSS

In this tutorial you’ll create a cool transparency overlay effect that closely resembles anaglyph stereoscopic 3D images. To use the effect in  web designs you’ll of course build it with CSS, but the main consideration is to keep everything neat and true in our markup.

10. CSS3 Tutorial: How To Change Default Text Selection Colour

Whilst this CSS3 declaration might not be crucial to your project or design and is not supported by all browsers, it’s a fantastic effect that really takes your design one step further.

11. 8 CSS3 Text Shadow Effects

This post covers eight cool text effects you can achieve using CSS3 text-shadow property only .

12. Text Rotation with CSS

In this tutorial you’ll learn to rotate text without images using the transform property.

13. CSS3 Shining Text, CSS2 Flaming Text

Create a fun flaming text effect simply by using some JavaScript and the good old CSS2 property text-shadow and shining text using CSS3 properties and animation.

14. Create Beautiful CSS3 Typography

This tutorial will teach you how to take basic markup and transform it into an attractive and beautiful typographical design through pure CSS3. There are no images or other external resources, just pure CSS magic.

15. CSS3 Cookbook: 7 Super Easy CSS Recipes to Copy and Paste

In this tutorial you’ll find seven fun and attractive CSS tricks that you can grab and insert right into your own projects and customize at will. Keep in mind that since this stuff is still cutting edge, older browsers won’t support most of it.

16. 3D Text Hover

Learn how to create multiple text shadows using CSS3 text shadow property.

17. Adding Stroke to Web Text

Replace programs like Adobe Illustrator and learn how to add stroke to web texts using WebKit.

18. CSS3 Text-Shadow – Can It Be Done in IE Without JavaScript?

IE9 does support the majority of the CSS3 properties, however it doesn’t support image-border and text-shadow properties. This article will deal with text-shadow: how it works in browsers that support it, and strategies developers can use today to emulate some of its functionality in IE.

19. I Heart Blur

It ain’t exactly a tutorial, however you should check out the code used to create this stunning effect to learn how to add blur to text without using bunch of text-shadow properties.

20. How to Create Inset Typography with CSS3

In this tutorial, you’ll learn to create inset type, a popular text treatment, using only CSS.

21. Quick Tip: Pure CSS Text Gradients

In this short video tutorial you’ll learn how to apply gradients to texts using webkit.

22. CSS3 Background-Clip: Text

Learn to apply CSS transition on a selectable text.

23. How to Use Text Shadow /w CSS3

CSS3 presents many new possibilities when it comes to text effects on websites. The text-shadow property is one of these awesome abilities. This article covers 5 great effects you can achieve using CSS3 text-shadow.

24. CSS3 Poster With No Images

An experiment showing the power of CSS3 techniques. This one uses lovely bits like box-shadow, border-radius, @font-face, transform, box-sizing, text-shadow, RGBa. You can check out the code to discover these impressive features.

25. Creating a True Inset Text Effect Using CSS3

This inset text tutorial differs from others because besides default text-shadow it also uses inner shadow property.

26. 3D CSS Shadow Text Tutorial

This easy CSS text shadow tutorial will show you step by step how to create 3D font with multiple css shadows by stacking multiple CSS3 text shadow properties, then go a step further and use the CSS text transform and CSS transition properties to make the 3D text pop out / zoom on hover.

27. How To Create 3D Text Using CSS3

Learn how we create 3D text using CSS3 text-shadow to heading and paragraph tags.

28. Font Sizing With Rem

CSS3 introduces a few new units in font sizing, including the rem unit, which stands for “root em”. Take a look at it’s features and learn how to create resizable text in all major browsers.

29. Create Attractive Web Typography with CSS3 and Lettering.js

In this tutorial, you’ll look at how to take basic markup and transform it into an attractive typographical design using only minimum images, pure CSS3 magic and we will spice things up with lettering.js – a jQuery plugin for radical web typography.

30. CSS Text Shadow

Another tutorial taking you through all the advantages CSS3 text-shadow can give.

Photography students and enthusiasts must educate themselves with many technical terms such as aperture, shutter speed, focus and exposure. You’ve probably read enough about that elsewhere, so how about a few photography effects? In this post I will share some photography tips and effects. They can enhance the beauty of your photos and they can be very fun to do, too.

1. Bokeh

Bokeh refers to the aesthetic quality of blur, the out of focus area of the image. It’s how the light renders lighted areas that are out of focus. The difference in lens aberrations and aperture shape causes the area to blur, creating the look that’s aesthetically pleasing. Many photographers deliberately use the shallow-focus technique to create images with prominent bokeh areas. The term comes from Japanese ‘boke’, which literally means haze or blur.

There’s good bokeh, but there’s also bad bokeh when the blur is so distracting or harsh that it takes the focus away from the subject. Thus, good bokeh can enhance an image while bad bokeh can ruin it.

Example of bad bokeh.

Use of Creative Bokeh

by Jean Fan

You can also create other shapes of bokeh, such as the heart and star bokeh photos shown below. This can be done by using a filter with the desired shape. You can even create your own. Tutorial can be found here.

by CT Pham

Photo by Astig

2. Panning

Panning refers to the horizontal, vertical or rotational movement of an image still or video. It’s an age-old technique. To achieve panning, you must have a moving subject that you must ‘stay with’ whilst framing the shot before and after you press the shutter. This will create an interesting effect, with your subject being sharp amid a blurred background. Great for shooting moving subjects or racing and sports events.

by Sofia Duarte

Panning will take a lot of practice, but you’ll get used to it and the effort is all worth it. Of course, it is easier to ‘follow’ a human subject than faster subjects like a dog, a motorcycle or a car.

by Statesman

3. Rule of Thirds

The rule of thirds is one of the most basic principles of composition. It has been used for many centuries by artists, painters and now, photographers.

With the Rule of Thirds, the photographer breaks down the photo into thirds, horizontally & vertically so that you have nine equal parts. The main subject is not placed in the middle of the frame, thus it looks dynamic, moving and interesting.

When you are taking a picture you must mentally divide your viewfinder or LCD display into three to frame your shot. With the grid in mind, identify the important points of interest and frame. For some photographers, this comes naturally but for others, it will require practice.

by Rachel Arandilla

Effective use of the rule of thirds create movement and interest in any photograph.

Photo by Majoy Chua

Keep in mind the rule of thirds for post production. If you find an image’s composition boring, you can always post process it by using the cropping and reframing tools of Photoshop. Experiment with the tools at hand to improve your photos.

4. The Golden Hour

The Golden Hour, also referred to as the Magic Hour, refers to the first hour the sun rises and the last hour the sun sets. It creates a different quality of light; it adds interest and drama to the scene. It’s the perfect time of the day for creating magnificent photos–but be quick, because lighting quickly changes and fades away.

by Torontoist

What really happens during the golden hour? During sunrise and sunset, the sun is near the horizon so the daylight is of the indirect light from the sky, reducing intensity of the sun’s bright light. There is softer lighting, warmer hues and longer shadows. In other times of the day, the sun’s light can be too bright and harsh. The sun’s harsh light is particularly a problem in portrait photography, for the light can create unwanted strong shadows around the face and body.

by David Giral

With landscape photography, photographing landscape during the golden hours enhances the colors of the scene.

by Karen Bangcot

5. Golden Rectangle

The Golden Rectangle, (also the Golden Mean or the Golden Ratio) is another guideline for composition and a variation of the Rule of Thirds, but more intricate. The Golden Rectangle is the mean of the ratio of numbers on the Fibonacci Sequence: 1, 1, 2, 3, 5, 8, 13, 21, 34 and so on). The ratio creates a golden rectangle, which is comprised of a square and half of the square in the same dimension.

Again, the concept goes back to several centuries. The Golden Rectangle is even used to frame Leonardo da Vinci’s Mona Lisa. Paintings, artworks and photos following the Golden Rectangle tend to be stunning and pleasing to the eye. It’s because it’s an aesthetic proportion that can be found naturally: flowers, shells, butterflies and even the human body.

Photo by Rachel Arandilla

It is very hard to frame the image to the Golden Rectangle means directly from the LCD or viewfinder. Thankfully, there are now several programs that you can use to crop your photos to the Golden Rectangle dimensions during post-production.

by Chris Ganes

6. Fill Flash

Fill Flash is a technique in photography where the photographer uses flash to ‘fill in’ dark areas of the image. It’s perfect for backlit environments. The background is usually a lot brighter than the subject. To create fill flash, adjust the aperture and shutter speed correctly to expose the background, use flash to lighten the foreground but still retain the qualities of the background.

You can use flash when: the subject is in a shadow, when there is more light on the background than on the foreground, and when you are close enough to the subject for flash. Remember that your built-in flash is only powerful enough to reach up to 9 feet only. Fill Flash can brighten deeply shadowed areas, improving the image without overexposing the other areas of the image.

by Mike Baird

Fill Flash is great for illuminating the eyes, especially on bright days and the subject is wearing a cap.

by Don Giannatti

by Adrian Biondi

by Eduardo Muriedas

7. Long Exposure

Long exposure is another interesting photography effect which entails a narrow aperture and long duration shutter speed. This is done in order to create dreamy landscapes, capturing the stationary elements while blurring the moving elements of the image.

Long exposure can be tricky. It should be taken in low light situations, most often photos will be overexposed because having long exposure on sunny days can be a problem, as too much light will enter the lens.

It is often referred to as ‘night photography’. Interesting subjects to shoot are stars, moving cars and lights.

by Cretique

by Matthew Fang

by Tyler Westcott

However, there are many beautiful long exposure photographs taken during low light daytime. Shooting fog and water on long exposure is popular in photography.

by Dene Miles

by Stan Mason

8. Contre-jour

Contre-jour is a popular photography effect. It is French for ‘against daylight’, the camera is directly pointing towards the light source. Countre-jour is, basically, is the fancy speak of ‘silhouette photography’. The light source is located directly behind the subject.

The contre-jour effect produces high contrast photos between light and dark. It hides details yet emphasizes contour of the subject and shapes. Contre-jour is more popular in nature & landscape photography. The effect is often used to add a more dramatic mood and intense ambiance to the scene.

by ArtBible.net

by Karlos Portillo

Ironically though, contre-jour can enhance or reduce the quality of detail in the photo. Some recommend using a lens hood to enhance the effect of contre-jour in photographs, significantly reducing the glare coming into the lens. If too much light enters the lens, it will cause overexposure, causing the photo to lose definition.

Conclusion

You don’t need to follow these terms to the dot in order to create a beautiful and interesting image. In fact, rules are made to be broken! Art is about exploring yourself and your medium, after all. But to be an artist of your own you have to learn the basics first before you break them. That’s what Pablo Picasso and Van Gogh did.

Of course, these are not the only effects in photography. There are dozens more, and you can even create a photography effect through your own experimentation. Photography’s only limits is the photographer’s creativity.

You can add them to premade photos, or create whole new scenes from scratch. Photoshop gives you those abilities and allows you to express in all ways. In this post you’ll find 40 best tutorials around web to master abstract and lighting effects.

1. Super Slick Dusky Lighting Effects in Photoshop

In this tutorial you are going to put together a sunset image mixing some vector shapes and dusky lighting effects to produce a slick image that will make a nice album cover for a chillout mix.

2. Space Lighting Effects in 10 Steps

In this Photoshop tutorial you will be shown how to create a space scene with some nice lighting effects in 10 easy steps.

3. Advanced Glow Effects

In this tutorial, you’re going to create some really sharp-looking glow effects using a combination of layer styles, the Pen Tool and Color Blending. The end effect is quite stunning and you’ll pick up some tips effecting the tutorial.

4. A Cool Lighting Effect In Photoshop

In this tutorial, you will learn how to create that effect you was able to see on the screen at the Macworld San Francisco. It’s basically some lighting effects with blurs and blend modes, but the effect is awesome.

5. Windows Vista Aurora Effect Photoshop Tutorial

In this tutorial, you’re going to see how to create the Windows Vista wallpaper effect yourself. This Vista lighting effect, sometimes referred to as the Aurora effect, can really transform an ordinary wallpaper to something extraordinary.

6. Awesome Digital Bokeh Effect in Photoshop

This tutorial will show you how to create a digital bokeh effect in Photoshop. The process is very easy and we will be using the super powerful Brush Engine, one of the coolest things in Photoshop.

7. Make Abstract Wallpaper with Brushes

In this tutorial, you will try to mimic the nice abstract preview that Axeraider70 made for his Ultimate Brush Pack 3. This will give the beginners a better idea on how to use these great resources.

8. Space Environment

Learn how to create realistic space scene from scratch using Photoshop.

9. Light and Glow Effect In Photoshop

This Photoshop effect tutorial covers the creation of several different light and glow effects in Photoshop. The effects in outcome consist of smoke, light trails, sparkles, stars and bokeh effects. Luckily it’s pretty simple to create each of these effects in Photoshop.

10. Create an Amazing Ad in Photoshop

In this tutorial you will use some images and play with Blend Modes and Color Adjustments to create a really cool Nike Ad in Photoshop.

11. Create a Dark and Surreal Geometric Space Poster using Photoshop

This tutorial will show you how to create an abstract space poster using geometrical shapes, masks and apply some filters in Photoshop. Layered PSD file is included.

12. Make a Freezing Cold Snow-themed Abstract Piece

In this tutorial, you’ll learn how to create a snow-themed large piece. You’ll learn how to plan the composition of the piece, to add elements into the composition, how to recycle the piece itself to generate more elements for the piece, how to incorporate pen tools into a design and finally how to finish off and fine tune the piece to make it look great.

13. Use Lighting Effects to Make Photos Sparkle

This tutorial shows how to create a variety of light effects that can be applied to photography or illustration with equal impact. From sparkles, pixie dust effects, colored light spots and light beams, to using splatter effects as a form of lighting, it’s all here.

14. Sparkling Hot Girl in Photoshop

This tutorial will show you how to create an image using light effects and sparks technique. It basically mixes some techniques from different tutorials and takes the best from them.

15. Achieve Brilliant Lighting Effects in Photoshop

In this tutorial, you’ll learn the essential process of achieving brilliant lighting effects in Photoshop. Using default brushes, blending options and a few stock images, you’ll learn step by step a variety of techniques that you can use in your own digital artworks to achieve professional results.

16. Give a Photo a Complete Glamour Makeover With Stunning Light and 3D Effects

This tutorial teaches you how to transform a regular, every day photo into a real glamour shot. In this tutorial, you will learn how to retouch a model’s face and subtly manipulate her hair. In addition, you will enhance the canvas by adding attractive lighting and 3D effects. This tutorial requires considerable Pen Tool skills, but with perseverance and a passion for design, you will certainly be able to achieve great results.

17. Amazing Photoshop Light Effect in 10 Steps

Learn how to create beautiful “Buy me a coffee” wallpaper in Photoshop. You’ll be using basic brushes and some blending effects.

18. Incredibly Realistic Water Text in Cinema 4D and Photoshop

This tutorial will show you how to create a water text effect. Even though it might look complex it’s a very simple effect. You will need to use Illustrator for the text, then Cinema 4D to make it a 3D text and Photoshop to mix the 3D with some real photos to create a nice and realistic result.

19. How to Enhance Your Subjects With Striking Light Effects in Photoshop

This Photoshop tutorial will show you a simple technique that can be used to enhance any kind of subject with stunning light effects. You will use in particular selection tools, gradients and brushes to achieve the result.

20. Create an Electrifying Light Guitar

In this tutorial, Pawel Kiec will take you though the steps of extracting an image, creating a background, and then making an electrifying glowing guitar that resembles pure neon light. You’ll learn how to manipulate blending modes to achieve color and light, and you’ll also learn how to extract images with the pen tool, and even create flowing lines in Illustrator to compliment the Photoshop work.

21. Energize Your Graphics with Abstract Energy Lines

In this tutorial, you will learn how to create some energetic lines you can use to create more lively digital creations. Effects such as this are great for enhancing abstract compositions.

22. Recreating The Aurora Borealis

In this tutorial, you are going to recreate the northern lights effect, otherwise known as “Aurora Borealis”. Using a combination of filters such as Render Clouds and Motion Blur, you then transform the combined effect to form the shape of an aurora, with a touch of perspective.

23. How to Create a Gorgeous Glassy Text Effect

This tutorial will show you how to create glassy text effect using a series of shapes with different transparency and color effects.

24. Create an Abstract Design with Patterns in Photoshop

Follow this walk through to recreate this detailed design with nothing more than gradient and pattern effects.

25. How To Design An Abstract Wallpaper In Photoshop and Illustrator

In this tutorial you will be creating abstract shapes using the Pen Tool and Shape Tools in Illustrator and then using those shapes to produce an abstract wallpaper in Photoshop using various color blending techniques, textures and transformation tools.

26. How to Create a Realistic IES Lighting Effect in Photoshop

This tutorial will show you how to create a realistic IES (photometric) lighting effect. Yoy’ll be using Photoshop CS4 as well as some free plugins and software.

27. Abduzeedo 2010 Light Effects in Photoshop

In this tutorial you will see how to create new Abduzeedo’s 2010 symbol. It’s a sort of monitor/halftone effect mixed with glows and other light effects. You will play with Blend Modes and Blurs. The whole process is quite simple and it won’t take more than 20 minutes to achieve the same result.

28. Drawing an Abstract Lightbulb

This tutorial covers a couple of simple techniques, which if used accordingly can help you attain great lighting effect.

29. Create Simple, Yet Elegant Abstract Spectrum Lines in Photoshop

This tutorial will show you the method used to design a simple, yet elegant abstract spectrum lines in Photoshop. You will see how easy it is to achieve this nice effect and you can use it a wide range of occasions including perhaps site header backgrounds, logos, or add extra flavor to your photo manipulations.

30. Create an Abstract Composition in Photoshop

In this Photoshop tutorial you will learn how to create an abstract composition using rendered images and light effects. As you can see from the final result preview you will create a mystical and magical effect. In this tutorial you will have to use plenty of Photoshop tools, and also Cinema 4D, but if you don’t have Cinema 4D that’s ok, you will be able do all rest steps of this tutorial.

31. The Making of “Constant Slip”

This tutorial takes you through the creative process of making intriguing light effects and applying them in your work. This is more a process description of making this illustration, than a detailed step by step how to. It will give you some good guidance on how to deal with an illustration like this and cover the overall workflow.

32. Create an Explosive Abstract in Cinema 4D and Photoshop

In this tutorial, you will be creating an explosive abstract piece called “What is Man?“. You will have to use Cinema 4D to create the explosive effects. You will then take the 3D elements over to Photoshop for the final composite and lighting.

33. Create a Vibrant Abstract Space Artwork

In this tutorial, Paul from ForCG.com will show you how to create a vibrant and colorful abstract space artwork using Photoshop, Illustrator, and stock images. You’ll learn techniques on blending modes, the use of the pen tool in Illustrator, and how to combine elements for a visually stunning effect.

34. Quick and Effective Planet, Star and Meteor Impact Creation in Photoshop

In this tutorial, you will learn how to make planet, star and meteor impact in Photoshop in a quick and effective manner. This is intermediate level tutorial so some steps can be a little tricky, but the outcome is worth it.

35. How to Create Great Abstract Artwork via Custom Brushsets and Particle Effect

In this tutorial, you will be able to follow the steps needed to create this cool abstract artwork via custom brushes and particle effect in Photoshop. You will be demonstrated how to create your own brushes and use them to add particle effect to the image to spice it up.

36. Create a Fantastic Abstract Fan Poster

In this tutorial, you are going to get creative with layering, lighting, and texture to build fantastic abstract piece. More specifically, you’re going to employ some unusual techniques to make a fan poster for the band Omega Code, but you’ll quickly see many different applications for what is taught here.

37. Calculations and Colorization

This Photoshop tutorial will show you how to create an Alpha Channel using the Calculations dialog and you’ll use it to get a really great abstract colorized photo effect.

38. Create a Trendy Galactic Poster Design in Photoshop

Galactic space scenes are a popular theme for digital art, they’re packed full of texture and vibrant colour, which are two ingredients of an awesome design. Using Photoshop’s blending modes along with a mix of textures and brushes, you’ll get lost in space and create an abstract cosmos poster design.

39. Colorful Glowing Text Effect in Photoshop

This tutorial will teach you how to achieve great looking light text effect with some simple techniques.

40. Create an Abstract Cloud Jumper in Photoshop

In this tutorial, you’ll manipulate a photo with abstract elements to make it more interesting and active.

Did you ever wonder how the pros make it look so easy when they remake movie-effects? No need to wonder anymore. These 35 tutorials will help you in making it happen! Not only will you learn how to make the mentioned effects, but you will most likely learn some new tricks that you can use for other projects as well :)

Click the headlines/images to open up the tutorials in a new window.

1. Star wars text effect

Learn how to make a Star Wars text effect here. You can even download the authors finished .psd if you want.

2.  Sin City Style Poster

Learn how to recreate this visually inspiring movies “feeling” – using Illustrator to create the text and perspectives, then finishing it off in Photoshop. Try to play around a bit with the settings to make your own look.

3. X-men Logo

In this video tutorial, well-known Photoshop master Corey Barker shows you how to create your own X-men Logo in a matter of minutes.

4.  Indiana Jones

In this highly detailed and easy to follow tutorial you will learn how to create an Indiana Jones promotional logo.

5.  Pirates of the Caribbean

Another good video tutorial from Corey Barker. Converting text layers to paths and adding layer-styles are the key words here.

6. The Bee Movie

This CGI-animated movie from 2007, co-written and produced by Jerry Seinfeld, appealed to both adults and children. Here you will learn how to recreate that shiny text effect used in the promotion of the movie.

7.  Twilight

A very good tutorial from Tutvids. Twilight was the first movie to be released from the vampire-series written by Stephenie Meyer. Here you will learn how to recreate the characteristic text effect. Great practice!

8. Transformers 2 Wallpaper

In this tutorial you will learn to draw the Transformers 2 logo, and how to create effects that can be applied to many other types of wallpapers you may want to make.

9. Terminator

Corey Barker is back to show you how to take a stock photo of a human skull and turning it into a terminator robot.

10. Iron Man (view interface)

If you have seen the Iron Man movie, there’s a good chance that you got impressed by some of the visual effects they used. Here is a tutorial that shows you how to recreate some of that cool stuff :)

11. X-Men movie poster

This tutorial takes you through the steps of creating your very own customized X-Men movie poster.

12. Lord of The Rings poster

Learn how to make your own epic fantasy movie poster with this tutorial.

13. James Bond logo

Yet another high quality video tutorial from Corey Barker. This time he is recreating the famous James Bond logo.

14. Rambo

The creation of a Rambo style poster has never been easier. Psd-files available for download aswell.

15. Transformers text

This Transformers text effect can be applied to many different designs. In this tutorial the author also gives you the option to download the final psd plus the font that was used. All to make it easier for you.

16. Land of the Lost

Recreate the 3D text effect from this action filled comedy using this video tutorial.

17. Scarface

When this bestselling movie from 1983 was released, everyone wanted to be Tony Montana. With some Photoshop magic you can now recreate the movie poster and put your own picture in it if you want ;)

18. Angels and Demons

Video tutorial that shows you how to recreate the title graphics of the movie Angels and Demons.

19. Ice Age acorn

In the Ice Age animated movies, poor Scrat keeps looking for enough acorns to survive the ice age. Too bad he didn’t have Photoshop as this can be done there following this high quality video tutorial ;)

20. G-Force logo

Learn how to recreate the logo of the awesome guinea pigs that star in this spy-fi comedy film. The effects in this video tutorial are also great for use in other projects.

21. G.I. Joe

Video tutorial recreating a G.I. Joe title effect.

22. 2012

Learn how to make the logo from this very popular sci-fi movie released in 2009.

23. New Moon

This video tutorial is very easy to follow and can definitely be tried out no matter what your current skills with Photoshop are. You will learn how to recreate the text effect from the New Moon movie that was the second movie in the Twilight series. Watch out for vampires.

24. The Matrix

When The Matrix was released back in 1999 it had some very groundbreaking effects. The code that is “the matrix” itself is frequently shown as falling green characters. Here you will learn how to make your own version of this very cool effect.

25. Harry Potter

The Harry Potter movies are the highest grossing film series of all times. Learn how to make your own version of the movie titles, and the good part is that you can write whatever you want ;)

26. I know what you did last summer

Make your own creepy horror movie poster with tricks learned from this tutorial.

27. Superman style text

This American iconic cartoon superhero, created back in the 1930s, has his own very characteristic text style. Now you can make it your own with this very easy tutorial!

28. Cars

Recreate your own chrome style logo inspired by the animated movie Cars, released back in 2006.

29. Spiderman 3 – metallic text

Only your own imagination will set the limitations for all the possible uses of this shiny metallic text inspired by the movie Spiderman 3. Easy to follow and usable for oh so many creative projects.

30. Na’vi Avatar Photo Manipulation

This great tutorial uses only basic Photoshop tools, making it very easy for you to follow. The result is fun and can be tweaked and used for many fun purposes. The movie Avatar probably doesn’t need much introduction, so we will leave it there.

31. Casino Royale (James Bond)

This tutorial shows you how to make a James Bond poster-like design inspired by the fighting vector characters in the intro to the movie. Looks good and can be used in many types of designs.

32. Batman – the dark knight

Make your own sparkly Batman logo with this tutorial. Easy and fun!

33. Kill Bill style poster

This Quentin Tarantino two-volume action thriller series has been inspired by several earlier film genres. Now you can be inspired to make your own poster highly influenced by this bloody revenge drama that captured movie lovers back in 2003-2004.

34. Wall-E wallpaper

Learn how to make your own cartoon-like wallpaper from the 2008 movie Wall-E.

35. Kung Fu Panda wallpaper

Make your own Kung Fu Panda wallpaper using a collage of graphic elements.

Those were the 35 tutorials, I hope you found some inspiration and learned a new trick or two.

Feel free to leave your own favorites in the comments section below :)

Typography takes also very important role in good web designs, so I strongly recommend to read articles I featured there as well! Enjoy and get inspired for your new, advanced web designs!

1. Create a Letterpress Effect with CSS Text-Shadow

View Demo

2. Text Rotation with CSS

3. Date Display Technique with Sprites

4. CSS Gradient Text Effect

View Demo

5. CSS Text Gradients

Yet another very similar tutorial about text gradients, but maybe you’ll like both variants trying to explain really how CSS text gradient effects work.

6. Add grunge effect to text using simple CSS

Article is based on the same technique as CSS text gradients using it to add grunge type effect to your typo!

View Demo

7. Two simple ways to create text embossing effect

8. Text Embossing Technique With CSS

Example from AlexBuga homepage.

9. Codename Rainbows

Beautiful CSS&Javascript code offered by DragonInteractive teaching how to get two-color gradient text effects, shadows and highlights.

View Demo

10. CSS Drop Shadows

11. Text-Shadow Exposed

Make cool and clever text effects with css text-shadow. Very detailed article teaching you a lot of hidden tips how to achieve text glowing, embossing,shadowing with just few steps.

12. Background gradients and CSS

Pretty cool CSS background effect, which can be applied on hover giving a lot of options use it in creative way!

13. CSS Text-Shadow in Safari, Opera, Firefox and more

14. Text-overflow

15. How To Implement sIFR3 Into Your Website

16. How To Use Any Font You Wish With FLIR

View Demo

For Further Reading – More Typography Tips In Sucessful Web Designs

17. How to use headings in HTML

18. Advanced Typography techniques using CSS

19. 10 Examples of Beautiful CSS Typography and how they did it…

Beautiful article explaining simple but very effective CSS tricks how to achieve beautiful typography effects with just a few lines of code.

20. Typographic Contrast and Flow

Nick La teaches how to apply right contrasts and flow in your webdesigns explaining why and what works and how to achieve that effect.

View Demo Overview

21. The Elements of Typographic Style applied in Webdesign

22. 5 Principles And Ideas Of Setting Type On The Web

I wish you good luck, while exploring and learning so you could spice up your own photos, impress friends and evolve your design skills! This list is a little bit shorter than other ones, but I thought I better focus on quality than quantity, because we already have many, many useless list tutorial articles around here repeating same stuff over and over again.

1. Water effect photo montage tutorial

Outstanding tutorial, you really must try this one and understand how to use this effect, giving you unlimited opportunities to express yourself.

2. How to Create a Sparkling Fantasy Photo Manipulation

In this tutorial, we’re going to create a photo manipulation using different techniques. We’ll be adjusting each layer and element to make a compact final image. We’ll be using multiple photos and a handful of effects to create this work. Let’s get started!

3. Dance Photo Manipulation Part 1, Part2

I love this one, you can really learn several advanced techniques from this two part tutorial, amazing advanced level tutorial!

4. Create dynamic distortion effects

Extend feel of dynamics and create work, you cannot take eyes of! Really advanced techniques!

5. How to Create Super-Malleable Effects with Colorful Lines

Very trendy tutorial, teaching you how to create beautiful artwork out of almost nothing!

6. Create a Sleek Illustration that Fades from Line Art to Color

Combine reality with line art in beautiful poster and learn advanced techniques from this high quality tutorial!

7. How to Turn Humdrum Photos into Cinematic Portraits

In this tutorial you’ll learn how to transform usual photo into regular, humdrum portrait, even faking HDR effects a little bit.

8. The RoboHorse Turn Ordinary Animal to a Robot

In this tutorial I will show you with an example of horse how to turn an ordinary animal to a robot.

9. Design a Colorful Illustration Using Patterns and Shapes

This is really beautiful tutorial using patterns,coloring and 3D shapes to gain outstanding effect! Tutorial is easy to create and modify, so you should really enjoy it!

10. Awesome Snowboard Poster Tutorial

Simple tutorial, showing how to gain great effects using just few brushes and basic Photoshop skills.

11. Create a Funky Perspective of a Model Riding Digital Volume

Learn how to create photo manipulation using perspective achieving depth and motion in artwork. Easy to follow up – enjoy!

12. How to Create a Steampunk Style Illustration in Photoshop

Learn through simple steps how to montage many different elements in one picture and make it look really good with lightning, shadows and image grading.

13. Make your image look awesome with a few light effects

For every beginner – advance effects!

14. How To Create A Vibrant Image Using Photoshop

Explore how to add dynamics, energy to photo turning it into great artwork! Excellent learning piece!

15. Beautiful Lady Effect Photoshop Tutorial

Colorize and extend this great photo to look it even more beautiful and artistic!

16. Electrifying Energy Beam Photoshop Tutorial

Great and very easy to archieve effect I really love to use in many works I create as well!

17. Tutorial: Use lighting effects to make photos sparkle

Add some simple brushes,lightning and color to make your photo stand out!

18. Dazzling Dance Photo Manipulation Tutorial

Detailed and really well explained Photoshop tutorial, which will learn how to combine several photos, add special effects and get outstanding results!

19. Create A Glowing Extreme Wallpaper in Photoshop

In this tutorial, you’ll create a complex glowing wallpaper using Photoshop, which is really easy to follow up.

20. Stylish Light Effect in Photoshop

Yet one more stylish image effect achieved playing with blending modes and adjustment layers.

21. Super Fast – Speed Lighting Effect Tutorial

Add speed of light in your works!

22. How to Create an Abstract Photo Manipulation

Nasty photo manipulation, which can be used in really various ways. Lots of useful techniques included in this tutorial!

23. Fashion Shot Photo Manipulation Tutorial

Enhance your photos with simple effects and get unbelievable effects!

24. Make Photos More Suggestive Tutorial

Subtle effects, great outcome, easy to follow up steps! Enjoy!

25. Add Another Dimension Photo Effects Tutorial

Use brushes and colors to spice up your photos to really stand out!

26. The Making of Mystic Tutorial

In this tutorial Nik Ainley walks us through the process of making a spectacular image. Completely outstanding!

27. Expressive lighting effects tutorial

Learn how to combine several lightning techniques to achieve stunning outcome!

28. Displacement effects tutorial

You’ll learn here how to use several filters and techniques to show you the way how to experiment, use lightning effects and recreate those effects in your own style.

29. Seriously Cool Photoshop Explosion Effect Tutorial

Very cool explosion effect tutorial, teaching how to break apart a body, add lightning and glow!

30. Create a Powerful Mental Wave Explosion Effect

Crazy and very powerful work. This tutorial will teach you how to combine photos and filters to produce wave explosion effect.

At first I will show You technique, how to create effects and after that, I’ll show You my ideas and different ways how to implement them.

Step 1

At first I’ll teach You how to create curvy lines, how to differentiate them and later import them to Adobe Photoshop and convert to brushes for later use.

Open Adobe Illustrator and create a new document.

For the fill color use none color, and for stroke use 1px monochrome colors. If You will use them as brush, select black #000000 color.

Select Pen tool(P) and create two curves, there is no matter what Your shape will be, we will later change it anyway. If You want to modify Your curve later, deselect curve, select Direct Selection tool(A) and click on just one point, drag it later to fit curve Your needs.

Now again select all curve, holding ALT click and drag the curve to duplicate it. Then holding SHIFT+ALT resize it smaller to differentiate it.

Select the top curve, right click on it and send it to the back -  Arrange–>Send to back.

My result is like this now:

Step 2

Now Select both curves, and go Object–>Blend–>Blend Options..

I used Specified distance, 2px, You can try different settings using Specified distance or Specified steps.

Now with both curves still selected press CTRL+ALT+B or Object–>Blend–>Make to execute those steps.

Bonus Step 3

Select top curve and adjust transparency to 10% to get cooler and more realistic effect.

Press SHIFT+CTRL+F10, if You don’t see the Transparency.

Step 4

Now We will go to Adobe Photoshop and create our own brush!

Resize Your lines holding SHIFT+ALT and dragging them bigger, You must create ~2500x2500px size (it’s maximal allowed size for brush, if You are using Photoshop CS3). Copy and paste Your effect into Photoshop and hide background color.

Press CTRL+ALT+I and check Your document size – if it’s bigger then resize it proportionally with one one of the values 2500px, use Bicubic Sharper, which is better for document reduction.

Now we are ready to create our Photoshop brush:

Edit–>Define Brush Preset and name Your probably first Photoshop brush!

Different Techniques With Adobe Illustrator and Blending tools

Now I won’t be going in so much deep details, I’ll just give You more ideas, how to use the same technique to get different results.

3D text effect

Create text using just stroke color and bring up Stroke panel and check more details and create dashed line:

Now just go through the same steps as I described in previous example, to get this result:

And then just click with Convert to Anchor Point tool on the Anchor points, to get swirly effects.

After this, You can simply import effect in Photoshop and add some spice to it.

Using Spiral tool:

The same effect using dashed star strokes and simple coloring in Photoshop.

Feel free and experiment with different shapes, spirals, type-faces. You can get really technical and amazing effects doing just those simple steps! If You have any more suggestions, ideas – comments will be appreciated!