Page 1 of 6 123 ... LastLast
Results 1 to 10 of 54
Like Tree3Likes

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

  1. #1
    ScorchinBeats's Avatar
    ScorchinBeats is offline Registered User
    Join Date
    Mar 2010
    Location
    T.Dot
    Posts
    2,514

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

    Sign in to disable this ad
    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:

    http://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:



    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
    and like this.
    www.soundcloud.com/flexmuzik
    Need live guitars for your beats? PM me for info!

  2. #2
    b-town bombs is offline Registered User
    Join Date
    Jan 2011
    Posts
    23
    does it work? anybody know?

  3. #3
    ScorchinBeats's Avatar
    ScorchinBeats is offline Registered User
    Join Date
    Mar 2010
    Location
    T.Dot
    Posts
    2,514
    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.
    www.soundcloud.com/flexmuzik
    Need live guitars for your beats? PM me for info!

  4. #4
    itsosman is offline Registered User
    Join Date
    Sep 2009
    Posts
    483
    dude this is amazing. Thank you soooooooooooo much. I'm going to quote this on the getting started forum.
    http://img8.imageshack.us/img8/9131/tronikbanner.jpg
    15 Year old DMV area music producer

  5. #5
    Xabiton's Avatar
    Xabiton is offline Belly Flop King
    Join Date
    Jun 2003
    Location
    Seattle
    Posts
    37,817

  6. #6
    americanbadstar is offline Registered User
    Join Date
    Oct 2009
    Posts
    21
    thanks i will try soon ..

  7. #7
    Beatz Apollon is offline Registered User
    Join Date
    Jan 2011
    Posts
    1

    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 by Beatz Apollon; 01-26-2011 at 12:01 AM.

  8. #8
    ScorchinBeats's Avatar
    ScorchinBeats is offline Registered User
    Join Date
    Mar 2010
    Location
    T.Dot
    Posts
    2,514
    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:


    Now it should work.
    Last edited by ScorchinBeats; 01-26-2011 at 01:30 PM.
    www.soundcloud.com/flexmuzik
    Need live guitars for your beats? PM me for info!

  9. #9
    FeloneusSupremeProd is offline FP Official Threadkiller
    Join Date
    Feb 2011
    Posts
    998
    Thanks for sharing. I have GIMP and need to spend some time learning it.

  10. #10
    Mysterious's Avatar
    Mysterious is offline Registered User
    Join Date
    Oct 2005
    Location
    PITTSBURGH, PA
    Posts
    1,228
    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.

Page 1 of 6 123 ... LastLast

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Special 93% Offer

Got beats? Samples? Mixing and mastering services? Get a head start with this 93% OFF special offer!