Jump to content
Geplaatst:
comment_1545190

Signature met een Linkenbalk

Op verzoek maak ik hier een tutorial over. Het originele idee komt niet van mij, maar ik hoop wel dat jullie hier wat aan hebben.

Jullie kennen het vast wel. Je ziet Remi-x met zo'n onwijs coole sig, en het mooiste is,
de balk
eronder (met links erin). Toen ik dat zag moest ik er natuurlijk ook eentje hebben, maar ik hoor dat niet iedereen weet hoe je zo eentje moet maken. Je hebt in ieder geval Photoshop nodig (dat gebruik ik in ieder geval). Verder moet je de stappen alvorens de vragen goed lezen, en kijk ook naar de afbeeldingen (die zet ik er niet voor niets bij). Veel meer dan Photoshop alleen zul je niet nodig hebben, basiskennis is amper verreist (voor de balk opzich).

Hier de benodigdheden nog even op een rij:

  • Photoshop
  • Gezond verstand (zit standaard bij Windows 7 :7)

Begin!

1. Begin maar met het maken van een normale sig. Remi-x heeft gewoon een foto genomen met een paar kleine aanpassingen, en ook dat voldoet prima voor deze tut! Het kan zelfs zijn dat de outcome minder mooi wordt met overbodige toeters en bellen.

(plaatjes lijken mij niet interessant, gewoon een plaatje dat de regels qua afmetingen e.d. niet overtreedt.)

2. Nu beginnen we met de balk. Het is niet moeilijk, en zo leer je meteen wat andere handige dingen in Photoshop! Maak met de vierkante selectie tool een vierkant, waar jij je balk wilt hebben (ik doe onderaan).

do322a.png

Als je niet blij bent met je selectie doe je rechter muisknop en dan Transform Selection. Dan kun je hem scalen, wat dan ook.

3. Maak dan een nieuwe layer, maar doe je selectie niet weg! Met de selectie nog bij de hand pak je de verfpot (sneltoets: G). Dan vul je de balk met een kleur (ik kies voor zwart). Als je hem hebt gevuld doe je de selectie weer weg met Ctrl + D. Dan doe je de opacity/fill iets lager zodat de balk doorzichtig wordt zoals bij het volgende plaatje:

2qs83k1.png

4. Nu gaan we de tekst erin zetten. Het font en andere eventuele opmaak, mag allemaal. Ik hou het gewoon simpel zodat ook de nieuwelingen hun weg vinden. Je haalt de "rulers" erbij met ctrl + R (die kun je bij mij al zien bij het eerste plaatje geloof ik). Je doet rechtermuisknop op het witte vak en drukt pixels. Nu kunnen we de sig mooi in meerdere stukken verdelen.

5. Het volgende hangt vooral af aan hoeveel tekst je erin wil. Als je 5 woorden erin wil die kunnen linken, dan doe je in mijn geval (500x150) 500:5 is 100. Je pakt dan de move tool en schuift lijnen uit de Rulers, naar iedere 100 px:

16c7zbk.png

6. Nu maak je tekst die in de balk gaat, dit spreekt voor zich. Als je dit niet weet, begin dan gewoon niet aan Photoshop. Het maakt niet uit overigens of de tekst er recht in zit of niet, daar zorgen we wel voor met de volgende stap. Zorg wel dat elk woord een aparte layer is! :puh:

7. Voor dat we verder gaan, rechter muisknop op de text layers, en dan Rasterize (zie plaatje hieronder)!We gaan nu alles mooi recht tussen de lijnen maken die we net met de Rulers hebben gemaakt (don't worry, die blauwe lijnen kunnen je later wegslepen met de move tool, bovendien zie je ze niet als je je plaatje opslaat! ;)) gaan we de tekst goed positioneren. Je maakt een vierkante selectie in de balk, tussen de lijnen. Zo:

nfs2hd.pngfc5l35.png

8. Dan pak je (je hebt de tekst layer geselecteerd die in je selectie moet komen) de Move tool (lijkt me niet moeilijk te vinden) en dan druk je op dit knopje:

2d0mbmb.png

9. Nu zal hij tussen de 2 blauwe lijnen staan. Doe dit voor elke tekst opnieuw.

10. Nu staan ze natuurlijk allemaal verkeerd qua hoogte. Dus we selecteren alle text layers en met één druk op de knop hebben we ze ook allemaal verticaal goed staan:

1zz6jvt.png

En vervolgens (eerst de balk selecteren):

347jxo1.png

Slicen:

We gaan nu de sig in stukjes verdelen. Je pakt de slice tool en je begint gewoon alles in vakken in te delen op deze manier:

4okms.png

Tenslotte, druk je op File --> Save for Web and Devices --> Op JPEG zetten en maximale quality (doe ik tenminste) en dan ergens opslaan:

2ch6qv.png

En nu?

Nu ga alle aparte afbeeldingen uploaden. Je doet eerst de afbeeldingen die niet deel vd balk uitmaakt, en dan doe je een enter en dan plak je alle img's zonder enter. Dan moet je gewoon nog op sommige plekken een URL tag erbij toevoegen zodat je erop kunt klikken, maar dat lijkt me wel vanzelfsprekend.

DAT WAS HET!

Vragen mogen altijd worden gesteld, ik ben niet aanspraakbaar voor eventueel letsel. :7

Featured Replies

Geplaatst:
comment_1545796

Nog begrijp ik het niet, save for web device, en is het dan al een link?

En nu?

Nu ga alle aparte afbeeldingen uploaden. Je doet eerst de afbeeldingen die niet deel vd balk uitmaakt, en dan doe je een enter en dan plak je alle img's zonder enter. Dan moet je gewoon nog op sommige plekken een URL tag erbij toevoegen zodat je erop kunt klikken, maar dat lijkt me wel vanzelfsprekend.

Dit begrijp ik niet

Same problem here!

Geplaatst:
  • Auteur
comment_1545830

Je hebt als het goed is een map waar alle aparte afbeeldingen die samen één vormen in staan. Die afbeeldingen daarin die load je gewoon up. En dan plak je allem IMG-tags aan een stuk door in je handtekeningen-venster. Later kun je er nog links bij proppen met:

[url=http://hierkomtjeurl.nl/][img=http://www.urlvanjeupgeloadeafbeelding/nl][/url]

Je kunt plaatjes uploaden met imageschack, photobucket en tinypic e.d. Ik gebruik tinypic.

PS:


[center]
[img=http://i50.tinypic.com/nnv638.jpg]
[url=http://nl.wikigta.org/wiki/Main_Page][img=http://i48.tinypic.com/mhypsw.jpg][/url][img=http://i47.tinypic.com/316ud1k.jpg][url=http://www.gtaforum.nl/user/117905-ghosty/][img=http://i46.tinypic.com/358qkv8.jpg][/url][url=http://www.gtaforum.nl/index.php?app=core&module=help&do=01&HID=23][img=http://i46.tinypic.com/iqvozs.jpg][/url][img=http://i48.tinypic.com/2qtbuvm.jpg]
[/center]


Dit is dat van mij.

Bewerkt: door Ghosty

Geplaatst:
comment_1545964

Je hebt als het goed is een map waar alle aparte afbeeldingen die samen één vormen in staan. Die afbeeldingen daarin die load je gewoon up. En dan plak je allem IMG-tags aan een stuk door in je handtekeningen-venster. Later kun je er nog links bij proppen met:

[url=http://hierkomtjeurl.nl/][img=http://www.urlvanjeupgeloadeafbeelding/nl][/url]

Je kunt plaatjes uploaden met imageschack, photobucket en tinypic e.d. Ik gebruik tinypic.

PS:


[center]
[img=http://i50.tinypic.com/nnv638.jpg]
[url=http://nl.wikigta.org/wiki/Main_Page][img=http://i48.tinypic.com/mhypsw.jpg][/url][img=http://i47.tinypic.com/316ud1k.jpg][url=http://www.gtaforum.nl/user/117905-ghosty/][img=http://i46.tinypic.com/358qkv8.jpg][/url][url=http://www.gtaforum.nl/index.php?app=core&module=help&do=01&HID=23][img=http://i46.tinypic.com/iqvozs.jpg][/url][img=http://i48.tinypic.com/2qtbuvm.jpg]
[/center]


Dit is dat van mij.

I will try, I will try when I am back from school :puh:

Geplaatst:
  • Auteur
comment_1546216

Al progress gemaakt, Snowleopard? ;) Ik ben best benieuwd wat jullie ervan maken.

Zoals ik al zei: vragen mogen worden gesteld, geen vraag is te gek! ;)

Zolang het maar over de tut gaat...

Geplaatst:
  • Auteur
comment_1546694

@Snowleopard:

Als je het niet snapt, zeggen! :puh: Ik help je altijd.

@Icecube:

Inderdaad, met deze instellingen heb je weinig kwaliteitsverlies en toch weinig kb's. ;) Deze gebruikt bijna iedereen hier omdat de grens ergens bij de 100kb ligt hier, en daar ga je snel overheen met een PNG'tje.

Een reactie plaatsen

Je kan nu een reactie plaatsen en pas achteraf registreren. Als je al lid bent, log eerst in om met je eigen account een reactie te plaatsen.

Gast
Op dit onderwerp reageren...

Recent actief 0

  • Er zijn hier geen geregistreerde gebruikers aanwezig.