First make your shape however you want, I will be using a star for this tutorial, like below.

Next take the pen tool, make it so theres no fill, and draw the shape you wish you would like the shine to take, through your shape, so something like below:

Now select the star, Copy it, and paste it(Cntrl+F).

Select the line you drew and the star copy.

Goto Window > PathFinder and press Divide.

Your star should look something like this,

Double click the star, click the bottom half and delete it. It should look like this when selected:

Now remove the stroke, and change the fill to white.

Goto Object > Path > Offset Path, and enter -2 pt in the offset box.

Select the outer offset and delete it. (If needed you may need to double click the white to allow the selection of the outer offset.)

Set the opacity to about 30% and thats it Simple enough. My results are below.

To start off you must know that we are using the C++ that uses the Win32 Console, not graphical interface.

Table of Contents:
1. Variable types
2. Library headers
3. input/output

Variable Types

Here is a list of the most common variable types, you will learn more as you improve, also you will learn how to use each more effectively.

int
short
long
string
char
float
double
long double
bool

each variable type takes a certain amount of memory which is listed below
ints and floats - 32-bit
short - 16-bit
chars - 8-bit
doubles and long - 64-bit
bools - 8-bit

depending on the program you may need to use one or the other, but also because computers have so much memory you could most likely just use the maximum memory usage of each type. But the problem with doing so, some people may still be running low end computers and may run out of memory.

int/short/long

int is any integer, anyone with basic math skills would know that integers are all whole numbers such as …-5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5…and so on. int short and long are all used for integers only, it just depends on how much space is needed for each type. short can only hold -128 to 127. int can only hold -32,768 to 32,767, and long int -2,147,483,648 to 2,147,483,647. Also remembre that this is for most computers, though as computers advance the larger these numbers get. If you try adding a number such as 2.5 to an integer type, it will just drop the numbers after the decimal. example: 2.5 + 3 = 5

–

float/double/long double

floating point numbers(float) can be any number, from integers to floats. Then why not just use float for everything and never use integers? Floating points numbers are not that accurate, there are often times when a number lets say “3.1445″ may be the answer on one computer, but on another it may be “3.1446″, even if you say do not show decimal places, it may still use the decimal places to add the so called “integers” and you may come out with inaccurate answers. The maximum number for each type of float datatype are listed below:
float: 3.4 * 10^(-38) to 3.4 * 10^(38)
double: 1.7 * 10^(-308) to 1.7 * 10^(308)
long double: 3.4 * 10^(-4392) to 3.4 * 10^(4392)

Each set also has a number of precision after the decimal place before it starts to become inaccurate which is also listed below.

float - 7-decimal places
double - 15-decimal places
long double - 19-decimal places

–

boolean

booleans are very easy to use, all they say is True or False, if you want to do a program which checks to see if a value is correct, if it is you may say continue the program, or goto another section of the program, or in alot of cases maybe even quit program. Boolean can only hold two different values, “True” or “False”.

string/char

Chars can become very complicated, but I will just tell you the basics, you will learn how to use them alot better, and learn more functionality with it. Char is just keeps one letter in storage, so if you have a char variable and lets say you enter “Hello” to store into the char, the only thing the char will store is the “H”. Chars only take up 4-bytes.

Strings do more than char, they can store whole sentences, or more, I do not thing I have ever run into a memory limit for strings except for the computers limit. If you enter a whole sentence such as “Hello world, this is a p2l tutorial” the string will store that whole thing.

————–

Library Headers

Headers are the statements that call in a library so you may use certain functions in that library. The library that is used in almost every single program is called iostream, and to use this library you must put this at the top of your code:

#include <iostream>

This library holds all the common commands in C++ such as cin, cout, int, float, double, long int…etc. Although iostream has alot more functions that I dont know either, you can easily goto the microsoft website and look it up in their Library. Although iostream contains alot of commands you would think it would allow you to use strings, but it doesnt. To include strings into your program you need to use the library called “string”, obvious eh?
To include this file you would do the same thing, and this is the style for all libraries:

#include <string>

For your refrence this is how you call libraries

#include <libraryname>

Where libraryname is the library name. Often there are libraries that may need a “.h” at the end, you must include that in the library name for it to compile, some libraries that have the .h at the end may be exchanged and instead put the c in the front. Here is an example, the library math which includes math functions such as power, and log, and other things. But to call this you need to use this code

#include <math.h>

You may also call this library by this way also:

#include <cmath>

Although this works for this library, it may not work for all libraries, so dont hold me to this if you have to keep the .h =)

if($comment->comment_author ==$userdata->display_name) ?>

You would put

if($comment->comment_author_email == "admin@email.com") { ?>

And thats it Just choose an e-mail that other users cannot guess, like a personal e-mail that you do not use on your website, and you should be safe.

These are quite simple actually all you need to do is create a class for each one.

So create the class and style as you wish. Heres the class I use for my codebox:

.codebox {
font-family:"Lucida Console";
font-size:11px;
color:#455d71;
width:90%;
margin-left:10px;
border-left:4px solid #7ea0b6;
border-right:1px dashed #7ea0b6;
border-bottom:1px dashed #7ea0b6;
border-top:1px dashed #7ea0b6;
padding:5px;
padding-top:30px;
background:url(images/codebox.jpg) no-repeat #d3e5f1;
overflow: auto;
}

The padding-top30px is so the text does not overlay the top image, if you do not have an image to represent the type of box you do not need to have such a huge padding. Be sure to also add overflow: auto, so when needed the box will scroll to accommodate text that may overflow.

Now all you need to do is when posting, type the code you want in your post and then go into the Code tab of your post and type

<pre class="yourclassname">Code here</pre>

If you are making an image label at the top like I did, be sure
not to set a fixed height, doing so will result in the text going
above the background when scrolling.

Also be sure to put all tags such as < should be in their html equivelant inside of codeboxes, the best way to do this is type the code in the ‘visual’ tab, and then later go into the code tab and add the codebox tags around it.

A disadvantage to wordpress is if you keep switching between visual and code tab it will add more and more space between your lines of code which gets quite annoying, So I suggest adding the tags around everything after you are completely done with your post.

Have your code/warning/tip boxes fixed width so they do not
overflow outside the borders of your post.

For tip/warning boxes you may want to format the text a bit so they do not need to scroll to read the text, Code scrolling sideways should be fine to keep the code clean and not have split lines, but scrolling sideways to read warnings/tips can be annoying so I suggest to format code yourself so no scrolling is involved for those.

I haven’t quite figured out how to do numbered line, when I do I will be sure to update with the solution

About time for another tutorial! This tutorial will teach you how to make a nice vortex type image in Photoshop. For this tutorial you may want a stylus unless you are good at drawing almost full circles with the mouse.

Alright to begin, Start with a canvas size 550px by 550px and black Background.

This part is pretty easy, Just take the brush tool, grab the “leaf” brush and draw a few leaves in the center like below.

Now goto Filter > Blur > Radial Blur and use the settings below:

Next goto Filter > Blur Radial Blur again except use the settings below:

Of course this depends on how many leaves you added, you can always go back and add more if needed, also Mess around with the blurs to get best results. These are my results so far:

Alright now for the fun stuff!

Take your brush tool, Create a new layer, select the leaf brush again(or try others see if it changes the look). I choose the leaf tool because it has a different points to give rather than circles. Goto the brush settings, Scatter and use the settings below:

Now draw some swirls around the center like below. This is the part you may want the stylus to get smooth curves unless you are good with the mouse, or you could just use the pen tool

When you are done drawing the swirls, Goto the layer settings and set an outer glow, change the color to white, everything else can remain default. Next draw some lines around the center and try to diversify the sizes of the lines and the distance between them, like below.

Now merge the layers for the lines and on the layer goto Filter > Blur > Radial Blur and use the settings below:

Then goto Filter > Blur > Radial Blur again and use these settings:

Again depends on the lines and how much blur you think looks best.

Now repeat the last 3 steps except instead of drawing lines use the brush scatter tool, same scatter settings, and brush less lines toward the center then what you did with the lines, add an outer glow, and use the same blur settings, you should get something similar to below:

Now all you need to do is Layer > New Layer, grab the Rainbow Gradient make it gradient on the layer you just created, and set it to Overlay and Opacity 35%. Looks cool?

Now you can just grab a star map or make your own splatters etc in the background and make it look like it’s in space or similar. Here are my results:(Click for full view).

**Extra, Try adding a Surface blur to the layer with the streaks that you just created, may make it look a bit more realistic

For this tutorial I assume you have basic knowledge of HTML. We will be making the website as previewed here.

To Download the template images for this tutorial click here.

This tutorial will take about an hour to complete if you are completely new to CSS and read every detail.

To start of make a folder for your website, inside of it create a file called index.html and stylesheet.css, also create a folder called images which is where you should put all your images for your template now.

Inside index.html have the basic html code setup ready so we can begin.
In the head of index.html put this code

<link href="stylesheet.css" rel="stylesheet" type="text/css" />

This line of code links to the stylesheet so we can use the styles inside of it, if your stylesheet was in a different folder we would put instead:

<link href="example/stylesheet.css" rel="stylesheet" type="text/css" />

Now we will add the first classes to the CSS File.

body {font-family:verdana, arial, helvetica, sans-serif;

text-align: center;margin:0;

}

#containerborder {

margin: 0 auto;

text-align: left;

width: 1028px;

background-color:#8ab5d3;

overflow:hidden;

}#container {

margin: 0 auto;text-align: left;

width: 1024px;background-color:#FFFFFF;

overflow:hidden;padding-bottom:20px;

}

Now, the body is the body tag class. Margin:0; makes it so there isn’t any margin in between the borders of the browser and your website. Text-align will make the div centered in the website.

We have containerborder which will be the side border of the website, its width is 1028px so we have 4px extra on each side from the container. The background color will be the border color which we will use #8ab5d3.

Container is the div which all the website content will be contained inside of, hence the name ‘container.’ text-align aligns the text to the left side. And overflow:hidden makes it so the div stretches with the content whether the div is being floated or not (Will be explained more later in this tutorial).

Now in index.html add this code inside the body tag:

<div id="containerborder"> <div id="container">

</div>

</div>

So whats the difference between class and id?. ID is more of the identification of the div, and Class is he class. When in the CSS style sheet if you see a # then that class can only be used for an objects id, while if the class starts with a . then its a class and can be used for anything. The problem with using ID is the w3 Validator will bring up errors if you have multiple items with the same id name so be sure to only use the # for items you know will only show up ONCE in your page, and use . for everything else!

Moving on, inside the container div add the header, so you should have this code now inside of index.html’s body tag.

<div id="containerborder"> <div id="container">

<div id="header"></div>

</div>

</div>

Like I said the id is just the identification of the tag, for this div we do not need to make a class inside of the css file because this one will just contain the header image, so we can put this in now.

<div id="containerborder"> <div id="container">

<div id="header"><img src="images/header.jpg" alt="Header" /></div>

</div>

</div>

This is pretty simple understanding, and the alt tag IS required in every image if you wish to be valid by the w3 validator standards.

Now before we move on, you need to know how div’s work. Div’s are like boxes that push each other around, and it does get quite annoying to fix them if you don’t know what you are doing. So for example. The header stretches along the whole length of the container (because the image is 1024px wide), so the next div we put in will automatically be pushed to right below the header, this is pretty basic logic. One thing you need to watch out for is 1px off div’s. Sometimes a div is set 1px too wide and it pushes everything else around, these are some of the most annoying cases on website building especially with lots of classes it can be pretty hard to find if you don’t know what you are looking for. So be sure to always calculate the widths of everything when you place them so you can avoid small mistakes.

Now add this code to your index.html file

<div id="containerborder"> <div id="container">

<div id="header"><img src="images/header.jpg" alt="Header" /></div>

<div id="navigation">

</div>

</div>

</div>

And add this to stylesheet.css

#navigation {background:url(images/navigation.jpg) repeat-x;

height:40px;

width:100%;

}

Repeat-x repeats the background image along the x-axis, if you did repeat-y it would repeat along the y-axis, and no-repeat is obviously no repeat.

Width:100% is pretty self explanatory, it goes 100% of the width of the outside div, not the width of the browser. If you wanted something to go the width of the browser, the parameter would be width:100% and not contained inside any other div’s which are fixed width. If inside a fixed width div the 100% will be the width of that container div.
height:40px; is for the background image, because div’s don’t stretch the height for background images you need to state the height yourself.

Moving on, in index add this in between the navigation div, so you should have this:(from here on out I wont add the whole code, the top line and bottom line will be from the previous code entry only, so you can see where the new code should be placed. All code in between the top and bottom line will be new code.

index.html:

<div id="navigation">

 <div id="leftimg"></div>

 <div id="navlinks"></div>

 <div id="rightimg"></div>

</div>

and in stylesheet.css add:

#navlinks {

margin-top:12px;

text-align:center;

float:left;

width:596px;

}

#leftimg {

float:left;

}

#rightimg {

float:right;

}

Margin-top sets the margin between the top of the div using that class and the div its contained inside of.
Float basically says I’m on the right/left side of this div and thats that? The reason we use these because of the pushiness of div’s like I had said above. But I did say something wrong above, no matter how much space the div takes, it will always push the next div down. So the div could take up 1px width of a 6000px div, but any div below that 1px div will be pushed below it. Thats why we use float. Float left allows us to set multiple divs next to each other. Float:left will put this div right up to the leftside of the container, the very next div that has float:left will be put up next to that previous floated div. And the float right will be put on the rightside of the container div…confusing? Heres an example image.

Hopefully that makes sense? Now edit the code in index.html to include the navigation and side images.

<div id="leftimg"><img src="images/navleft.jpg" alt="kirbyleft" /></div><div id="navlinks">» Home » Games » Latest » News » Community » Downloads  » About » Contact </div><div id="rightimg"><img src="images/navright.jpg" alt="kirbyright" /></div>

Remember always add the alt tag to your images. Now add this div to your code (Make sure it’s inside the container div and nothing else. SO heres what you should have in index.html

<div id="containerborder">

 <div id="container">

  <div id="header">

   <img src="images/header.jpg" alt="Header" />

  </div>

  <div id="navigation">

   <div id="leftimg"><img src="images/navleft.jpg" alt="kirbyleft" /></div>

   <div id="navlinks">» Home » Games » Latest » News » Community » Downloads  » About » Contact </div>

   <div id="rightimg"><img src="images/navright.jpg" alt="kirbyright" /></div>

  </div>

  <div id="navleftside"></div>

  <div id="content">

  </div>

  <div id="rightnav">

  </div>

 </div>

</div>

And in stylesheet.css you should add:

#navleftside {width:273px;float:left;}#content {float:left;width:530px;margin-top:50px;}#rightnav {float:right;margin-top:65px;margin-right:5px;

width:200px;

padding-right:5px;

}

You should by now know what all these do, margin adds a margin to that side from the containing div. Padding however adds a type of margin except from the content inside itself. Not much difference except one sets space on the outside of itself, and the other sets space on the inside itself from the border of itself.

Now inside add this code inside of navleftside

 <div id="navleftside">  <div id="star"><img src="images/star.jpg" alt="starend" /></div></div>

This is the code for the last part of kirby’s star. We don’t need a class because the image is not the background, so the div stretches to the image width, and thats all we needed.

Now we can add our Game list below the star, so add this code below the star div.

  <div id="star"><img src="images/star.jpg" alt="starend" /></div>  <div class="nav"></nav>

And you can add this to stylesheets.css.

.nav {margin-left:10px;background:#fff url(images/sidenav.jpg) no-repeat;width:187px;padding-left:5px;padding-bottom:10px;}

The margin-left sets the navigation away from the edge of the website by 10px so it’s not right up against the border. Background image is the navigation image, and the padding forces the text inside the div to be pushed away from the borders, this helps keep the text inside the background image ‘limits’.

So you can add your navigation inside of the nav div. So your code should be as below.

<div class="nav"><h2>Game List</h2><div class="navcont"><a href="index.html">Kirby's Dream Land</a><br />Kirby's Adventure<br />Kirby's Pinball Land<br />Kirby's Dream Course<br />Kirby's Avalanche<br />Kirby's Dream Land 2<br />Kirby's Block Ball<br />

Kirby Super Star<br />

Kirby's Star Stacker<br />

Kirby's Dream Land 3<br />

Kirby The Crystal Shards<br />

Kirby Tilt 'n' Tumble<br />

Kirby: Nightmare in Dream Land<br />

Kirby Air Ride<br />

Kirby & the Amazing Mirror<br />

Kirby: Canvas Curse<br />

Kirby: Squeak Squad<br />

Kirby Wii</div>

</div>

I snuck another div in there, which styles the text for the game list. Add this to your stylesheets.css code.

.navcont {color:#529dc0;font-size:10px;font-family:Verdana;}

Now what about the h2? It’s ugly, and when I link the games its just going to be the ugly default dark blue font underlined and all. Well, heres how to do it. If you wish to style an h2 tag for a certain div all you need to do is this.

.nav h2 {padding-top:13px;font-family:Verdana;color:#e3819a;font-size:14px;margin-bottom:5px;}

put the div class and the h2 right after it with the styles you want. Notice that nav and navcont have the . instead of the # key, that’s because I know eventually these classes will be used again on the same page, and this could lead to XHTML validator errors. So my div’s now are

<div class="nav"> instead of <div id="nav">

Now you wish to style your links? Same idea as the h2, except with a:link and a:hover etc.

.navcont a:link {color:#529dc0;text-decoration:none;}.navcont  a:active {color:#529dc0;text-decoration:none;}

.navcont a:visited {

color:#529dc0;

text-decoration:none;

}

.navcont a:hover {

color:#295f79;

text-decoration:none;

}

Put this in your code. this styles the link, a:link is just a..link, a active is an active link, a visited is the link style of the link has been visited before, and a:hover is when you hover your mouse over the link. text-decoration basically is the decoration of the link, you can say text-decoration underline, hightlight, and then you can change the style of the highlight/underline etc. If you look at the preview page which I gave a link at the top of this tutorial, the top link on the navigation is linked so you can see what it looks like.

Now the rest of the page is pretty much a copy of what we just did but different modifications. So onto the news section. Add this code inside the content div we added earlier.

<div id=content"><div class="newsbox"></div></div>

And add this to your stylesheet.css.

.newsbox {width:455px;margin-bottom:20px;background:url(images/news.jpg) no-repeat;margin-left:20px;padding-left:14px;padding-right:14px;

color:#999999;

font-size:11px;

}

.newsbox h2 {

padding-top:20px;

font-family:Verdana;

color:#e3819a;

font-size:16px;

}

You should know everything that is going on here, padding, color is the text color inside the text, font-family is the font family, you can add more than one font, so you could have font-family:Verdana, Arial, Times New Roman; etc…What is the point? If the users computer doesn’t have Verdana it moves to the next one which would be arial and so on. Margin-bottom is so we have a bit of space between each news box.

Now you can add some content to your news and add some other content.

Once you add some text to your content area(I added a bunch of lipsum text). You can add this below your text:

<div class="readmore"><a href="#">Read More...</a></div><div class="comments">Comments(14)</div>

And add this to stylesheet.css.

.readmore {float:left;padding-top:10px;font-size:11px;color:#999999;}

.comments {

float:right;

padding-top:10px;

font-size:10px;

color:#999;

}

I styled my comments for read more, you can use the example above to do the same. Now if you wish you can copy the whole codebox div and put it below/above the previous codebox div and change the words so you can see what the page looks like with multiple news elements on it.

Now that we have finished the news boxes, we will finish the right navigation.

The great thing about classes is instead of making the same class again for a different area of the page you can use it again, which is why I said make sure you know whether you will be using a class again or not so you know when to use the # or the . if you want to be safe you can just use the . all the time, but I prefer not to.

So all you really need to do is copy this from the left navigation:

<div class="nav"><h2>Game List</h2><div class="navcont"></div></div>

And change the words/add content. So my right navigation looks like the code below:

<div class="nav"><h2>Forum Stats</h2><div class="navcont">1,648,483Posts<br />4,583 Members<br />Newest Member: Atly<br />

<p>Latest Posts:<br />

OMG NEW SECRET!<br />

Hi, I'm New..<br />

I need help</p>

<p>Login   / Register</p></div></div><div class="nav"><h2>Affiliates</h2>

<div class="navcont">kirbyD<br />

Kirby Official Site<br />

Kirby Nintendo<br />

Kirby IGN<br />

Kirby File Planet<br />

Kirby Anime</div></div>

If you look at the rightnav class you will see instead of margin-left we have margin-right to give it space from the right side border of the website.

Now the footer, Add it right above the very last </div> tag, so you should have this for the footer in index.html:

<div id="footer">Copyright Kirby's Lair 2007 Created by MicoHono.com</div></div>

And in stylesheet.css you should have:

#footer {width:100%;height:30px;color:#0a3244;

font-size:10px;

text-align:center;

padding-top:3px;

}

padding-top so the text isn’t right along the top edge, and if you look at the container class it has a padding of 20px so all content inside of it is away from it’s edge by 20px so the footer isn’t too close.
</body>

Thats all, preview your website and it should look similar to this, if theres any questions feel free to ask

Now in this tutorial I will show you have to make it so your post automatically puts the icon next to each title and with the correct icon for that category. This is a really simple technique.

Goto your mainIndex Template page and find the line

<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">

<?php the_title(); ?>

Right above it put this code.

<?php if ( in_category('27') || in_category('47')): ?>

<img src="URL of image" alt="description" />

<?php elseif( in_category('46')): ?>

<img src="URL of image" alt="description" />

<?php endif; ?>

What this does is if the post is in category 27 or 47 it will put the image of the icon next to the title, if it is not, then it will check, if it is in category 46 and put that icon etc. You can add as many elseif statements, and you can add as many or’s inside of the if statement, so you can have something like

<?php if ( in_category('1') || in_category('2') ||  in_category('3') || in_category('4') ||  in_category('5') || in_category('6')): ?>

If you wish to do the same for ’singlepost’ pages just add the same code into the singlepost template page.

Very simple code and effective. Good luck, any questions please ask

This tutorial we will learn to make an abstract/glassy equalizer in Photoshop. Begin with a canvas size 700×360 and black background.
I assume you know the interface to Photoshop in this tutorial and most of the basic functions.

We will start off with the easy stuff, Begin with using the rectangular tool and selecting the whole canvas. Now select the Elliptical Marquee tool, and While holding Alt draw an ellipse on the bottom half so you should have something like below:

Now create a new layer, name it “shine”, fill it with white and set the opacity to 10%.
Onto the next step, this may take a few minutes. Grab the Rectangular Marquee tool and set it to Fixed Size. Make the Width 30px. And make the height any height you wish. Just don’t go more than half the canvas if possible, and keep fluctuating the size each time you set marquee tool. Hold shift while placing the rectangles such that the previous do not disappear. I suggest placing them no more than 2px apart. I set mine 1px apart, you should get something like below.

Once you are complete, create a new layer called Equalizer and Fill it with a gradient. The colors I used were #194255 and #70c5cf respectively. Make sure when you fill the darker color is on the bottom. You should now have something similar to below:

Now without deselecting, Grab the Rectangular Marquee tool. Set the feather to around 10px, and while holding Alt Draw on the bottom half of the equalizer. This will keep the top half only. Now create a new layer, Call it EqualizerGrad, and fill it with white. Because of the feather you should get a gradient, on your layer, if you do not try setting the feather higher. Once complete set the layer style to Overlay.
Moving on…Deselect everything by pressing Cntrl+D, and reselect the layer again, this time with the rectangular tool set the feather to 0 and do the same as above, remove the bottom half of the selection. Now go to Select > Modify > Contract and contract by 2px. Create a new Layer, name it barShine and fill it with white. Set the layer opacity to 13%.
You should now have something like Below:

Just to make sure you are up to speed on everything, you should have 5 layers, Background, Equalizer, EqualizerGrad, barShine, and shine. If you have all these and your image looks something similar to above(except your equalizer looking different, continue).
Now Copy layers Equalizer, EqualizerGrad, and barShine, Merge the copies and flip them vertically. Move them to be approx 1px below the original and set the opacity to 28%.

Now grabbing the Elliptical tool, draw a thin ellipse underneath the original equalizer across the whole canvas, create a layer called ‘surface’, fill it with white and set the opacity to 16%.

Alright onto the fun stuff, Download this brush set, and brush!

Do not brush like crazy, use the softer brushes, Like Brush 2, 8 and 9. A couple times here and there on their own layer behind the equalizer.(this is really up to you how you wish to brush it, I suggest only using a couple brushes on each side of the canvas.

Once you are completed with that, grab the rectangular tool…again And draw a rectangle along the whole width of the bottom of the canvas going to the bottom edge of the equalizer. Having the brush layer selected press delete, and deselect (Cntrl+D). This is so the brushing you did does not get into the reflection area of the canvas. Now Cntrl + Click the Equalizer layer to get the selection. Going back to your brush layer press delete again. This will make it so whether your brush layer is above or below the equalizer layer it does not overlap.

Wait what? My brushes overlap in the final image you saw? =) We are going to do that now, use the more defined brushes (that aren’t as soft) such as 3 and 7. And brush on the same brushing layer you just did until satisfied. Repeat the step to remove the brushing from the reflection area of the canvas. DO NOT delete the equalizer area of this new brushing. Bring this layer above the equalizer, Cntrl+ Click, Grab the rainbow gradient, set the brush settings to overlay and draw it across the diagonal of the canvas, if needed do so again for brighter colors. Now your image should look something like below!Now do with the brushed layer copy it, flip it vertical, and put it below the equalizer so it also has a reflection. Set the opacity to 11%.

Now grab the Elliptical Marquee Tool, set the feather to 30px and draw an ellipse on the bottom of the canvas. Now select the brush reflection layer and press delete a few times until you are happy with the fade. The feather helps make it more ‘faded’ away rather than sharp edges. Once you are done with the brush reflections do the same with the equalizer reflection.

Now before we continue, I forgot a step with the equalizer. Cntrl+Click the equalizer layer, grab a nice feathered brush quite large, I’d say around 60px in size. Choose the color #366d86, set the brush mode to Color dodge and draw across the bottom of the equalizer about 3 times across. Once complete, set the layer style to Luminosity.

Now go to the equalizer layer again, make a stroke, with these settings.

**This part on is optional. Create a new layer, and using the gradient tool with the rainbow gradient selected draw across the whole canvas, put this layer above everything else and set the layer style to Soft Light with Opacity 50%.

Lastly using the text tool write a song name, the artist, and the song length, put it below the equalizer in pretty big font size, Add an outer glow that is white, and you are done! Hope you enjoyed this tutorial, if you have any questions about any of the steps please ask!

Click here for Full View