Energy Beams - Photoshop

Hey

Energy beams are rather cool, and very popular for the sci-fi theme (or any theme) picture. This tutorial is going to show you a simple way to do these energy beams. The principle is very simple and can be used for nearly anything. For this tutorial I am going to use the Kill Bill image poster that I found here. I've changed it slightly to remove the text on the image. I love Kill Bill, and was great when it was re-ran on TV this Christmas. Click any of the images for the full versions.

Step 1) To begin, open up your image you can use the one below. It is a bit clear when the original text was but this image is only going to serve as a demonstration for this technique.


Step 2) Create a new layer above the image, this will serve as the energy beam layer.

Step 3) Select the pen tool (P) and in the toolbar at the top of the page select the 2nd option. This will enable you to draw the pen path and nothing else.

Step 4) Draw a wavy path around the sword. Imagine the path going around the sword, this will be tidied up later on.


Step 5) Select the Brush (B) from the toolbox. Set the thickness to about 6px, add a little bit of blur (hardness) on the edges.

Step 6) Set the colour of the brush to #ffd400, this is the yellow used in the image.

Step 7) Go to the Paths palette (Window > Paths) select work path. Right click on the path and select Stroke Path. Simulate brush pressure, this will make the path thin out at the ends.


Through out this tutorial you may need to hide and unhide the path. This is done by pressing the key combination Cmd/Ctrl + Shift + H. Sometime the path gets in the way and needs to be hidden.


Step 8) In the paths window drag the work path onto the new path button. This will change the state of the path to a new path shape. We need to work with the path a couple of times and we don't want it to disappear, this safe guards this.

Step 9) Use the Eraser (E) tool to remove some of the path that is behind the sword.

Step 10) Double click on the layer and set the outer glow. It really doesn't matter what you select, change the values so your image looks good.


Step 11) Do the same with the inner glow.


Step 12) Create a new layer, stroke the path using the same settings, this will be used for a slight blur.

Step 13) Go to Filters > Blur > Gaussian Blur increase the value so the path is blurred. Reduce the opacity ever so slightly.


Step 14) Create a new layer once again. These are all on different layers so you can adjust the values if you need to later on.

Step 15) Select the Brush tool and select the advance brush options (Window > Brushes). Set the size to 4px. Spacing to 450%. In Shape Dynamics set size jitter to 100%. In Scattering set the Scatter to 1000%, Count and Counter Jitter to the Lowest possible.

Step 16) Stroke the path once again from the path palette. This will produce small dots around the edges. Repeat this step if you think there needs to be more small dots. If you want to find out more about particles check out this tutorial.


Step 17) Create a new layer and a new smaller path around the base of the sword. Reduce the brush size down to 3px, reset the brush so that it is normal and stroke this small path.

Step 18) Copy the layer effects for the first path onto the new smaller path. This is done by right clicking on the layer and selecting "Copy Layer Style". Right click on the new layer and select "Paste Layer Style".

Step 19) Repeat step 17 and 18 with different paths. Reduce the opacities on the layers to get the wispy effect.


Option Step 20) If you find that the blurred layer looks to yellow, you can make it white by changing the layer properties. If you add a colour overlay of white, or off white you can adjust how it looks.

When you are done you can export the image (File > Save As). Its a pretty neat effect that can be used for nearly anything.

About This New Design

Hey There and A Happy New Year

If you haven't noticed a new design has been uploaded and put into the site. It has taken me a long while to get it like this and it went through many design phases. This post is going to be all about what is new, and how it came to be like it is today. I can then get back to posting some series posts on design related topics.

The Design

The design took a long while to do, I wanted a design that was well executed, looked good and was interesting to use and look at. I had in my mind a general feeling of what I wanted it to look like. It took 3 iterations to get it look like it is today.

The first design ended up as red, it contained a lot of black and was very dark in appearance. Overall it was a very dark and "sad" piece. Nearing the end of completion I decided that I didn't like it at all. It didn't have the right feel to it. You can click on the image for the full version.


The next one used more lighter colours. This was more along the lines that I wanted. Some of the background Graphics, including the circles, were from Go Media set I bought. Like the previous design it didn't feel right. The graphics didn't seem sharp and just didn't have the "thing" I wanted it to have. As you can see in the image below I didn't get very far into the design.


The final design was then created over a couple of small design sketches of how I wanted it to look. I finally went for the paper options, since a lot of design is on paper. I use paper a lot. As well as this, as I was building it up it just seemed to work.


Whats In The New Design?

I spent a lot of time fiddling about with blogger and the CSS to get the design correct. There are a couple of stupid errors that seem to pop up in Internet Explorer, I have tried to fix them as much as possible but they still seem to persist. Anyway. I will work down the page and try to explain each concept.

The Blog

The main blog has had a couple of upgrades and features added. For example there is a search box at the top of the page. This is provided by Google, you can search both the website and the web from the same box.

Moving down the small date images have been removed and replaced by just text. Each of the image you saw I had to upload individually. The text is easier to manage and of course means you can search by a date if you want a specific blog post.


Finally at the bottom you have a small footer which contains small links. The back to the top link will send you all the way back to the top. Especially useful if you are all the way down at the bottom of a long post. As mentioned previously a better advert spot has been added.

Sidebar

The sidebar of the blog contains one or two minor upgrades. At the very top is a Tag Cloud, a lot of websites have tag clouds. The tags are generated from every time I label a post. It is kind of cool I like it. Below it are the usual Adverts, General Links, and the Blog Archive.


Footer

The final part of the new layout is the footer. There wasn't one of these before, It took me a long while to get this looking perfect. The left hand box shows top posts for the previous week. This is updated weekly by me. The latest comments is a small widget feed that will show you all of the latest comments. Finally there is an about me element. This I think is quite important since you get to know a little bit about me. It is also used to fill up the last remaining box.


To conclude, I hope you like the design. I'll once again resume posting, since Christmas and New Year are over. Over and out.