Pimp MySpace
Vaardigheid: basis Photoshop, basis HTML, gezond verstand
Programma's: Photoshop (Ik gebruik Photoshop CS2), webhost (je eigen webhost of een gratis imagehost zoals Photobucket.com - latere uitleg volgt)
Word je ook zo moe van die MySpace-pagina's die er allemaal hetzelfde uitzien? Dan wordt het tijd dat je eens écht leert pimpen! We gaan een complete DIV-OVERLAY plaatsen. Let op! MySpace kan je account deleten zodra je advertenties weghaalt. Doe dit dus niet! Hoe je pagina er ook uitziet, er zal altijd een advertentie opstaan. Het is niet anders…
Een div-overlay is niet zo moeilijk als het lijkt. Het moeilijkste gedeelte zit 'm in het ontwerpen van je eigen look. De enige limiet aan creativiteit zit tussen je oren. De oorspronkelijke schrijver van deze tutorial heeft wat voorbeeldpagina's online gezet waar je inspiratie kan opdoen:
- http://www.myspace.com/backslide
- http://www.calviniscool.com/myspace/calvin/v1/
- http://www.calviniscool.com/myspace/jake/
Om het simpel te houden is het voorbeel in deze handleiding niet al te complex. Tevens is deze handleiding gemaakt voor een ontwerp waarbij de comments niet meer zichtbaar zullen zijn op je frontpage van MySpace. Zouden we dit wel willen laten zien zou er een hele andere vaardigheid in programmeren van je verlangd worden waardoor een hoop mensen zouden afhaken.
We beginnen met de basis. Het plaatje dat je wilt laten fungeren als achtergrond voor je ontwerp: 
Voeg nu de links toe die je wilt gebruiken. Nogmaals: voor de makkelijkheid gebruiken we in deze tutorial alleen maar tekst-links. Je mag plaatjes gebruiken uiteraard. Voeg toe of laat de links weg die je niet wilt gebruiken. Zelf heb ik geprobeerd het zo simpel mogelijk te maken door links als Latest Blog Entry en People I'd Like To Meet weg te laten:
In Photoshop, selecteer de Slice Tool. Dat ziet er uit als een chirurgenmes. Hiermee snijden we straks het ontwerp in stukken:
Met deze Slice tool geef je aan waar straks de links moeten komen. Klik met je muis op het plaatje en sleep een rechthoek van linksboven naar rechtsonder:
Zodra je loslaat heb je een slice gemaakt. Mocht je nog iets willen wijzigen qua groote kan je op de puntjes in het blokje klikken en slepen:
Snij de rest van de links op maat en je hebt een hele verzameling slices met blauwe blokjes:
Als je de Slice Select Tool gebruikt, zie je rechtsboven een optie om de Auto Slices te laten zien:
Als je dit klikt zie je wat Photoshop automatisch voor jou heeft gesliced. Jouw eigen slices zijn die met de blauwe blokjes en de grijze van Photoshop. Persoonlijk houd ik niet van die optie omdat het het geheel erg onoverzichtelijk maakt om dingen te wijzigen.
Als je alsnog besluit om een link te verplaatsen hoef je het geheel niet opnieuw te slicen. Je gebruikt dan gewoon de Slice Select Tool, en sleep de slice naar de nieuwe lokatie.
Okee, je ontwerp is af, tijd om het zooitje op MySpace te plaatsen!
Ga (in Photoshop) naar het File menu, en selecteer Save for Web:
Je zit nu in het Save for Web scherm. Je ziet dat Photoshop jouw eigen slices aangeeft door ze iets donkerder te kleuren. Je kan het plaatje eventueel verplaatsen door de Spatiebalk ingedrukt te houden en te slepen met je muis:
Nu gaan we de links toevoegen. Dubbelklik op een slice. Je komt nu in het Slice Options scherm:
De snelste manier om je MySpace links te achterhalen is door naar deze pagina te gaan:
Deze pagina is een goedbewaard geheim voor ons gebleven, tot deze handleiding. MySpace heeft er alles aan gedaan om zo min mogelijk ruchtbaarheid te geven aan het bestaan van deze website. Hij is populair, dus het kan voorkomen dat 'ie een beetje traag laadt. Heb geduld: het werkt en je links verschijnen vanzelf. Bij mij had ik geen last van traagheid, dus doe je best!
Rechtsboven zie je een menu, klik op Div Overlay Model. Bijna onderaan die pagina zie je een Essential Links & Codes for Overlays gedeelte. Het enige wat je nu hoeft te doen is je MySpace-adres invullen, bijvoorbeeld: http://myspace.com/cargawar.
Vul nu in Photoshop de links in die je met je slices wilt aangeven.
Save nu alles als JPEG en een aan te raden kwaliteitsgetal is 90.
Klik Save en sla alles op in een folder (op je buroblad bijvoorbeeld). Photoshop maakt automatisch een HTML aan met de bijbehorende plaatjes. Je kan nu je ontwerp testen door dat HTML-bestand te openen.
De volgende stap is het uploaden van je plaatjes. Als je je eigen serverruimte hebt kan je ze daarnaartoe sturen. Het laatste wat je wilt is je pics uploaden naar een gratis host die ze na verloop van tijd weer verwijdert! Een aanrader is Photobucket.
Ga naar de folder van zojuist en open de map Images. Je ziet dat de plaatjes allemaal stukjes zijn van het ontwerp dat je net hebt gemaakt. Het is de bedoeling dat je ALLE plaatjes upload.
Na het uploaden van je plaatjes gaan we de HTML-pagina aanpassen. Open dit bestand in Kladblok. Gebruik de Vervang-optie, je gaat alle links vervangen. In Zoeken Naar, typ "images/" en vervang het met de URL van je Photobucketobucket account of het adres van de folder op je eigen website als je gebruik maakt van je eigen server. Klik op Vervang Alles. Let even goed op dat je de aanhalingstekens niet vergeet: alle links beginnen en eindigen met ".
Sla dit bestand op als HTML-bestand. Je kan nu weer testen of het werkt: alle links zijn vervangen door links die je niet van je harde schijf haalt maar van het web. Tevens is het handig om te zien of je wel alle plaatjes hebt geupload. Photobucket laat je er 19 tegelijk uploaden maar als je er eentje vergeet zie je een blanko stukje op je pagina.
We zijn nu klaar om je MySpace pagina aan te passen!. Log in op Myspace en ga naar Edit Profile. Aan te raden is om dit in Safe Mode te doen. Maak eventueel in Kladblok een backup van je huidige template. Verwijder alle gegevens die in je profile staan. Zorg dat je een blanko pagina hebt om mee te werken.
Ga terug naar http://www.bbzspace.com en ga naar de Div Overlay Model pagina. Selecteer full screen. Kies je Background Color en Div Background Color. Uiteraard wil je dat deze kleuren aansluiten bij je ontwerp, houd daar rekening mee dus! In Photoshop kan je een mooie kleur uitkiezen door op de Color Picker te klikken en in je design een kleur uit te kiezen. Kopieer het hexidecimale nummer:
Of je gebruikt zwart of wit. Zwart is 000000 (zes nullen) en wit is ffffff.
Kies voor "None" bij Div Border Width en je hoeft je geen zorgen meer te maken over randen, grootte of stijl. Laat ook Text, Link, en (Comment) Header Colors blanko. Vink "Hide Top Links" aan als je de bovenste MySpace-links wilt verbergen. Ik raad je aan dit te doen. Vink ook "Hide Comments" aan. Doe je dit niet, dan zal je pagina er vreemd uitzien. Het kán wel maar dan moeten we een hele andere handleiding schrijven.
Genereer de code.
Je bent nu bijna klaar. Kopieer het eerste blok van de code in het Interests & Personality gedeelte van MySpace. Je kan alle tekst tussen de eerste <style></style> tags verwijderen (inclusief de tags). Het heeft geen verdere gevolgen voor je template.
Dit eerste blok code vertelt MySpace om bepaalde dingen te laten zien en andere juist weer niet. Kijk even naar de code. In het ".div1" gedeelte zie je een width en height staan. Verander dit naar de juiste maten van je ontwerp. Wil je op veilig spelen kan je eventueel 2 pixels erbij tellen. Bij margin-left vul je het getal is dat helft van de wijdte van je ontwerp is. Heb je een ontwerp dat 1024 pixels wijd is? Vul dan -512px in! Dit zorgt ervoor dat je ontwerp in het midden komt te staan. Bij overflow verander je auto in inherit. Sla alles op.
Het tweede blok is het stukje waar je de HTML-code van je ontwerp gaat plaatsen. Kopieer dit tweede blok en plak het in het Music gedeelte van je MySpace-pagina. Verwijder alles tussen <div class="div1"> en de eerste </div> tags.
Open je HTML pagina in Kladblok. Bovenaan selecteer je vanaf "<table id=" tot aan de laatste </table> tag:
Kopieer dit gedeelte en plak het tussen <div class="div1"> en de eerste </div> tag.
Sla alles op.
Klaar! Klik op View Profile en je hebt een retevette MySpace-pagina!!
Voor wie benieuwd is naar mijn eigen ontwerp: KLIK!
Propz & Cheers go out to the one that wrote this tut in english in the first place: whoUthinkIam77 (sorry for stealing your bandwith maybe…)
haha
