Jump to content

[TUT] Signature + balk (links)


Ghosty

Recommended Posts

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

Link to comment
Delen op andere websites

Ik heb Photoshop CS3 voor MAC

Zit hier een verschil in?

Is er echt geen manier om dit makkelijker te doen?

Ik heb ook CS3 voor mac, ik zou niet weten hoe je het anders moet doen....

Ghosty, ik begrijp er niks van... Hoe moet je nou al die plaatjes apart opslaan, met de slice tool en dan? ik weet dat het uitgelegd staat, maar ik begrijp het niet

Link to comment
Delen op andere websites

Ghosty, ik begrijp er niks van... Hoe moet je nou al die plaatjes apart opslaan, met de slice tool en dan? ik weet dat het uitgelegd staat, maar ik begrijp het niet

File --> Save for Web and Devices --> Op JPEG zetten en maximale quality (doe ik tenminste)

Link to comment
Delen op andere websites

Ghosty, ik begrijp er niks van... Hoe moet je nou al die plaatjes apart opslaan, met de slice tool en dan? ik weet dat het uitgelegd staat, maar ik begrijp het niet

File --> Save for Web and Devices --> Op JPEG zetten en maximale quality (doe ik tenminste)

Ik had even het zelfde probleem, als je dat doet slaat het dan in verschillende afbeeldingen op?

EDIT :

Kun je er ook even bij zetten welke instellingen je met de ''Slice tool'' moet doen?

Mijn sig is af, nu nog slicen :bier:

Bewerkt: door woveriene
Link to comment
Delen op andere websites

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

Bewerkt: door Snowleopard
Link to comment
Delen op andere websites

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...

×   Je hebt text geplaatst met opmaak.   Opmaak verwijderen

  Only 75 emoji are allowed.

×   Je link is automatisch ingevoegd.   In plaats daarvan weergeven als link

×   Je vorige bewerkingen zijn hersteld.   Alles verwijderen

×   You cannot paste images directly. Upload or insert images from URL.

  • Recent actief   0 leden

    • Er zijn hier geen geregistreerde gebruikers aanwezig.
×
×
  • Create New...