My guide to making a FREE VIP Soundclick Layout!!!

ScorchinBeats

New member
I recently made a soundclick account, upgraded to VIP, and designed it myself. You can check it out here:

www.spectralbeats.tk

The design isn't that great, but I figured out how to make a decent looking VIP layout easily. I thought I'd share this info for free.

What you need

-My stock files (see the download below)
-Photoshop
-At least basic photoshop designing skills
-A VIP soundclick account

How to do it

Note: Before I start with the tutorial, I have to give credits to THIS GUY:

https://www.youtube.com/watch?v=fIppdE3rQ1k

for giving out the CSS code. Without it, the layout would be nothing. So if this helped you, go ahead put a nice comment on his youtube vid or something.

1.
Download the stock files

Inside are these files:

-Content_Guide.psd This gives you an overlay of the main content image of your website. It tells you where to put certain features (logo, contact info, etc) and where certain soundclick features (paypal button, embedded player, etc) will be

-Background_guide.psd This is an overlay/guide image to help design your background

-Content_example.png This is the content image for some dudes website. DO NOT ACTUALLY USE THIS ON YOUR SITE IT'S NOT EVEN MY SH*T

-Background_example.jpg This is the background image for my soundclick page. You might have seen this pic used on a bunch of people's soundclicks. Again, DO NOT ACTUALLY USE THIS ON YOUR SITE

-CSS_Code.txt This is the most important file. It's the CSS code you'll have to use to position every element properly.

All of these files will be explained later on...

2. Design your site

This is the hard part. First of all, open up the Cotent_guide.psd file. Basically, make your design how ever you want. Only thing you have to do is to make sure you follow the layout. For example, where there's a box with text that says "LOGO" that's where your logo has to go. Where it says "EMBEDDED PLAYER" that's where the embedded player will show up so make sure no important info is in that spot or anything. Open up content_example.png to get an idea of how it should look. Notice how the background to the png (if opened in photoshop) is transparent. Make SURE when you export your design, that there is no background (ie. all you see is the designs and a white/grey checkered background). Also, make sure to export as a PNG file. Don't ask why, just do it.

Now, design the background. That is background_guide.psd Again, check the example to see what it should be like. Mine is just a solid black color with some text on the sides. Make sure there's not too much going on in the middle of this picture (the BLUE area). This should be exported as a JPG file, but it doesn't really matter.


OK, done? Good, that was the hard part. Moving on...

3. Upload the images to the internet.

Pretty simple. I use imageshack.us Make sure to save the URL's of the images.

4. Set up soundclick properly

Ok, log into soundclick. Go to the VIP page section of your band administration. Goto page layout and make sure that it looks like this:

80185000.png


5. Insert the CSS code

Goto the page design area on your band administration page. Once there, click the CSS (advanced) tab. Now, just copy everything from the CSS_Code.txt file and paste it in there.

6. Paypal button

Goto paypal.com and log in. The email you log in with is the one that people's money will goto. Click on merchant services. Click on "Buy now button". Follow the steps. For example, my settings were as follows:

Button type: Buy now

Item name: Instrumental lease

Item ID: Blank

Price: $20 or whatever

Customize button: Tick the "text field" option

Name of text field: "Name of desired instrumental"

Shipping: $0

Tax: $0

Merchant acc. ID: Use my current e-mail address youremail@whatever.com

Hit create button. You'll see a text box with some HTML code. Copy it to clipboard. Back to soundclick band administration. Goto edit page (not the vip section, the other one). Click on the interviews tab. In the very first text box, just type in the HTML code you got.

7. Donate to me!

Nah, just playin. But you're finally done. If you have problems, post below.



Download the stock files:
http://www.mediafire.com/?aua5vbh4d1i6maa
 
I made my soundclick with that exact method. The design isn't finished yet so it doesn't look perfect but it's gettin there.
 
Worked for me! Thx!

Hey thx it worked for me but you missed something at #5:
Edit the css!
You have to replace the .jpg and the .png URL's in the css file with your picture URL's!
 
Last edited:
Oh thanks for the heads ups Beatz Apollon forgot to add that step:

After pasting the CSS code, find the JPG background file (use ctrl+f if you need to) and replace it with the URL of your background. I used fileshack.us to upload but you can use whatever.

Like this:

72800050.png

Now it should work.
 
Last edited:
Good lookin out! This is on point so far. I keep chipping away at it, trying to perfect the placement of everything. Each time I work on it and hit preview, it looks more crisp. Only thing I need to find out is how to put my video box into the area under the production list area. Kinda how the content example was laid out.
 
Finally finished my layout. Turned out dope. Much props to ScorchinBeats for that original post! Saved me some dough. Thought I was gonna have to pay someone to design page. Thanx fam!
 
Finally finished my layout. Turned out dope. Much props to ScorchinBeats for that original post! Saved me some dough. Thought I was gonna have to pay someone to design page. Thanx fam!


mine shows up all black

---------- Post added 03-03-2011 at 07:01 AM ---------- Previous post was 03-02-2011 at 01:51 PM ----------

mine shows up all black


ok now its tiled instead of centered. is my image wrong or my code?
 
it had something to do with my images i guess. it kept wanting to tile it. i had to alter it quite a bit and remove some stuff but im ok for now. heres what it looks like now soundclick.com/beatmuziksquad
 
Preciate this a lot but im stuck at a crossroad
after I upload the imagez on ImageShack wutz next???

How do I get the image into css
 
Last edited:
Preciate this a lot but im stuck at a crossroad
after I upload the imagez on ImageShack wutz next???

How do I get the image into css

this CSS code is just a text file open it and replace the codes to his images with yours. then copy the whole text file into you vip account on soundclick.
 
im having a problem with my image "tiling" could use some assitance!!!!

---------- Post added 03-10-2011 at 07:36 AM ---------- Previous post was 03-09-2011 at 07:39 AM ----------

not my background, but my boxes and logo etc
 
it had something to do with my images i guess. it kept wanting to tile it. i had to alter it quite a bit and remove some stuff but im ok for now. heres what it looks like now soundclick.com/beatmuziksquad

I'm having the same tiling issue, how did you fix it.

---------- Post added at 02:58 PM ---------- Previous post was at 02:44 PM ----------

I took all the images off my page and just left the text and still my png file is wanting to tile.

ScorchinBeats, my page is soundclick.com/swaghouseentertainment
 
Back
Top