Workshop 21
MicDigital
Curven tekenen. Logo’s en webkop ontwerpen Voor je website heb je een kop, een header nodig. Dit kan je makkelijk in Photoshop aanmaken. We gaan zo’n webkop maken en leren een curve, een boog te tekenen. Dit is een vraag die telkens terugkomt: “ hoe maak ik een mooie vloeiende curve of golf?” Met een tekentablet is ’t misschien iets makkelijker, maar met de muis is het niet zo evident om vloeiend te tekenen. Met het penseel of potlood in Photoshop kan je een golf tekenen, maar deze is zeker niet vloeiend, te hakerig. We gaan dit doen met het Pentool. We maken een simpel pad, dat we dan omlijnen. Dit willen we bekomen.
Een mooie vloeiende golf, die we dan in een logo of website-hoofd kunnen gebruiken. Het lijkt moeilijker dan ’t is… We gaan een webkop maken, dus een figuur dit bovenaan onze website staat en op alle pagina’s zichtbaar is. Deze moet zo breed zijn als onze webpagina.
1. Nieuw bestand aanmaken. Open Photoshop Dus we maken hem bv 760 breed en 160 hoog Klik op Bestand, Nieuw… Geef in Breedte 760 Hoogte: 160 pixels Resolutie: 72 pixels (voor het internet) Kleurmodus: RGB 8bits Achtergrondinhoud: Wit Klik op OK Je hebt nu een nieuwe lege figuur die juist in je website gaat passen. Nu willen we daarin een golf tekenen. Dan kunnen we met deze curve een scheiding maken van de webpagina en bv het logogedeelte. Zo lijkt onze webpagina van boven niet rechthoekig maar golvend.
2. Pen tool Klik in je Toolbox op het Pentool of P op je toetsenbord. In de pen optiebalk selecteer je het tweede icoontje Paden , niet vormlagen. We gaan een pad tekenen geen vorm. Stel je optiebalk in zoals hieronder.
2 Nu klik je met je pen in je figuur om een startpunt te maken, ongeveer in het onderaan links.
Je kan ook slepen.. maar dan is je eindpunt een ruitje en moet je klikken om te bevestigen.
Je eindpunt is nu een ruitje (zie fig.) Klik op het eindpunt dan wordt ’t een vierkantje. Je moet klikken om ’t pad te bevestigen, het moet dus een vierkantje zijn.(Zie fig.)
3. Direct Selecteren tool
Selecteer nu het Direct selecteren tool, dat zit onder Padselectie. Je moet dus op het driehoekje klikken in ’t icoon en het direct selecteren tool aanklikken.
Dan heb je het Witte pijltje, dus niet het zwarte. Klik met je rechter muisknop ongeveer in het midden van je padlijn. Kies voor Ankerpunt toevoegen. Je krijgt nu een nieuw ankerpunt op deze plaats. Je kan met het direct selecteren tool nu je akerpunt verplaatsen door te slepen. Dit is de basis van alle pen gerelateerde handelingen. Je hebt een akerpunt aangemaakt dat twee handels heeft… Je kan het ankerpunt verslepen als ook de handels. Speel er eens mee om je te oefenen in curven te maken. Je kan op dezelfde manier bv een akerpunt bijplaatsen.
3 Sleep je eerste anke erpunt naar links. Plaats een e ankerpunt rechts bij. Duw hett eerste anke erpunt naar beneden b en het tw weede, rechttse iets naar boven. Door de Handels verrder of korterr bij het ankerpunt te slepen kan je een mooie m curve maken. Speel wat met de ha andels om ee en vloeiend de golf te verrkrijgen. (Zie fig.) Je kan zoveel z ankerp punten toevo oegen als je wil. Dit hangt af van wat je wil bekom men als curve e of golf.
4. Nieu uwe laag maken m Je hebt nu n een pad getekend, g ma aar dit is nog g geen zichtb bare lijn. We gaan dit pad d nu zichtbaa ar maken, kleuren… k Klik in je lag genpalet op het h icoontje onderaan o Nieuwe laag maken. m
Je kriijgt een nieuw we laag1. Zorg dat deze laa ag1 geselecte eerd is. In dezze nieuwe la aag1 gaan we e onze curve e zetten, dan n is ze gescheiden van de d achtergron nd en kan je ze nog altijd d los verplaattsen achteraf.
5. Pens seel bepalen Nu gaan we het penseell instellen. Dus de kleur en e lijndikte va an de curve. Klik, in je to oolbox op hett Penseel ge ereedschap.. Kies voor ee en penseel van ongeveerr zes pixels met harde rand r en 100% % dekking. Kies je pensseelkleur. Stel je voorg grondkleur in n door erop te e klikken en kies voor een Bordeaux kleur. Of kies een kleur van je website of Logo…
6. Pad omlijnen e Lagenpalet op het tabblad Paden. Klik in je
p van de curve die je zo ojuist geteke end hebt. Je ziet nu het pad
Klikk met je rech htermuiskno op in dit tijd delijk pad in het lagenpallet. Je krijgt een rollmenu. Kie es in dit menu u voor Pad omlijnen. o
Je krijgt een po op up venster Pad omlijne en. Hie er kan je kiezzen wat voorr soort omlijning je wil ma aken. Je kan bv met potlood p omlijjnen of met de d gom om b bv een foto tran nsparanter te e maken op de curve, en nz… We e willen echte er een lijn tek kenen, daaro om kiezen we voor Penseel. Klikk op OK.
4 Je pad wordt nu omlijnd door een lijn van 6 pixels in een bordeaux kleur.
Om dit pad te Deselecteren klik je gewoon ergens in het lagenpalet onder ’t tijdelijk pad. (Zie fig.)
Je hebt nu je curve getekend in een aparte laag. Merk wel dat je nu door bv terug het pad aan te passen deze Bordeauxlijn niet meer kan veranderen. Zorg er dus voor dat je pad juist en goed is voor je gaat omlijnen. Is ’t niet naar je zin, delete dan de laag, maak een nieuwe laag aan en pas je pad aan… Let ook op dat het omlijnen is. Dus als je een penseel kiest van bv 6 pixels je een lijn krijgt van 12 pixels breed. Op deze manier kan je alle golven of curven maken. Het lijkt moeilijker dan ’t eruitziet. In feite kan je op een paar seconden een golvende pad maken en daarna omlijnen. Zo maak je allerlei figuren en curven mooi vloeiend aan. Je kan dit pad meermaals gebruiken om nieuwe curven te maken.
7. Curve verschalen. Klik in je Lagenpalet op het tabblad Lagen en selecteer Laag 1
Selecteer je Verplaatsgereedschap in de Toolbox. Pas deze laag aan door te slepen als ze niet juist tot tegen de randen komt. Sleep het midden handvat rechts naar rechts tot de lijn net buiten de figuur komt.
Doe dit ook links indien nodig. Druk op Enter om je verschaling te bevestigen.
5 8. Tweede curve e aanmake en met hettzelfde pad.
Klik in je lag genpalet op het h icoontje onderaan o Nieuwe laag maken. m Maak een tweede laag aan Laag2 Dubbelklik op deze laagtekst en no oem deze gele lijn Dubbelklik op laag1tek kst en noem deze d rode lijjn. Selecteer de d laag gele e lijn.
Verander je j voorgrondkleur in een gele kleur. Geen citroen ngeel maar w warm geel. Of kies een e tweede kleur k van je Site, S Logo… Kies voor kleuren die sa amengaan, b bij elkaar passen. Doe nu n net hetzelfde als voor de rode lijn. Klik in n je Lagenpa alet op het ta abblad Paden n.
Klik met m je rechte ermuisknop in het pad in n het lagenpa alet. . Kies in dit menu voor v Pad om mlijnen.
Dese electeer ’t pa ad door ergen ns eronder te e klikken. Klik nu in n je lagenpallet op Lagen n en selectee er de laag ge ele lijn.
Selecteer in n de toolbox je j Verplaats sgereedscha ap. ok deze lijn zo z dat ze buitten de rande en van de figu uur komt, door te slepen als ze niet ju uist tot Maak oo tegen de e randen kom mt. Sleep hett midden han ndvat rechts naar rechts tot t de lijn nett buiten de figuur komt, ne et zoals de ro ode lijn. Juistt even groot als de vorige e dus. Druk nu op je toetsen nbord op de pijltjestoets s omhoog om de lijn hog ger te brenge en. Zet ze ne et boven de rode lijn. Als ’t mo oet jan je de rode lijn ietsjje zakken zo odat het een geheel vorm mt van een we eekleurige lijn. Druk op Enter om te e bevestigen..
Sla je fig guur op onde er webkop.psd
9. Pad verwijderren Als de curve c goed is i moet je het tijdelijk pad p verwijde eren. Klik in je e Lagenpalet op Paden. Klik met je rechtermu uisknop op ’tt tijdelijk pad.. Klik in he et rolmenu op Pad verwiijderen. Doe dit pas p als je zeker bent van n je curve en je geen curv ve meer wil bijmaken b of vveranderen.
6 Je moet ’t pad verwijjderen om de e volgende la agen en figurren te kunne en bewerken.. Nu kan je de bovenkkant van de golf g een kleur geven. De onderkant de ezelfde kleurr als je webp pagina’s. Als je da at doet lijkt he et alsof je pa agina doorloo opt tot tegen de golf, wat een mooi efffect geeft.
10. Sellectie vulle en, deel selecteren
Klik in je lag genpalet op het h icoontje onderaan o Nieuwe laag maken. m Noem m deze laag vulling v Laat de d laag gese electeerd.
Klik in n je Toolbox op de Lasso o en selectee er de Veelh hoeklasso.
Trek nu een selec ctie, door herrhaaldelijk te e klikken, ron nd de figuurr, begin onde eraan in de curve c en volg g de curve to ot rechts buiten n de figuur. Ga bu uiten de figuur naar bove en, dan naar links en wee er naar bened den , altijd buiten de figuur;Als je aan n ’t begin gek komen bent klik je op hett beginpunt en e de lasso ssluit zich. (Zie e fig.) Zorg dat je juist binnen de currve blijft. Blijff dus op de ro oodgele lijn.
7 11. Kle eur kiezen met pipett Klik in je e Toolbox op het pipetje en pipeteer de d bordeaux x kleur van je e curve. Dit o om dezelfde kleur k van vulling te e hebben. Je e voorgrondkkleur wordt nu u bordeaux. Gebruik je pipet om altijd a dezelfd de kleur te vin nden en je Lo ogo of Webssite in enkele e bij elkaar pa assende kleuren in i te vullen. Herhaal H deze e kleuren door heel je sitte maar maak er geen bo onte bedoening van.
12. Sellectie vulle en n je Toolbox op o het Emmertje. Klik in Dit zit onder het Verloop geree edschap.
Klik met je emmertje boven de cu urve op de witte w achtergrrond. (Zie fig.)
De se electie vult zich met rood.. Klik in je e Menublak op o Selectere en, Deselecte eren om de selectie op te heffen. Maar nu ligt de kleurrvulling op je curve. We gaan ze erach hter plaatsen n. Sleep p in je Lagen npalet de laag g vulling naa ar beneden to ot onder de be eide lijnen (ziie fig.)
13. Laa agmasker toevoege en. g geselectee erd. Laat dezze vullinglaag Klik in je Lag genpalet ond deraan op he et icoontje La aagmasker toevoegen. t
Klik in dit laagmaske er zodat ’t ge eselecteerd iss.
8 14. Verloop aanmaken Klik in je Toolbox op het Verloopgereedschap om ’t te selecteren. (Achter ’t Emmertje) Klik nu in je Verloop optiebalk in het verloopkeuze vakje om het verloop te bewerken.
Je krijgt een nieuw venster, Verloopbewerker.
Als je het nog niet hebt maak je een zwart wit verloop aan. Normaal staat ’t er nog van de vorige workshop.. Als dat niet zo is maak je ’t aan. Klik op een verloop van wit naar zwart… BV Glazen bol. Klik dan op Nieuw om een nieuw verloop aan te maken.
Klik op de groene kleurstop om hem te selecteren. Klik op verwijderen. (verwijder eventuele andere kleuren die teveel zijn) Je moet een zwart wit verloop aanmaken. Geef dit verloop een naam, bv zwart wit. Zo kan je ’t later altijd terug gebruiken.
Klik OK. Ga nu naar je figuur. Zorg er zeker voor dat je Laagmasker van de laag vulling geselecteerd is. Trek een lijn van boven naar beneden. Je bordeaux kleur verloopt naar wit. Dit geeft een mooi effect.
Je kan ook je verlooplijn schuin trekken. Met wat oefening en herhalen kan je ze zo maken dat ze verloopt naar de curve toe (Zie fig.) Sla je figuur op door op Bestand, Opslaan te klikken.
15. Figuur invoegen We gaan nu andere foto’s en afbeeldingen invoegen. Als je ze zelf niet hebt, kan je ze zoeken op het Internet met Google afbeeldingen. Open het bestand grijsgrid.jpg
9
Selecteer je e Verplaatsg gereedschap p. Zet de beide werkvensters zo dat je beide figuren ziet. Sleep de e figuur Grijs sgrid naar je figuur Webko op. Sluit de figuur grijsgrrid.jpg
Hernoem m deze nieuw we laag in je Lagenpalet naar grijsgrrid en sleep ze e onder de vu ullinglaag. (Z Zie fig.)
Je grijsg grid zit nu ach hter de curve en en achter de bordeaux x transparrantie.
16. Perrspectief invoegen. i Klik in je e Menubalk op o Bewerken n, Transform matie, Persp pectief. Sleep nu een e van de bovenste b hoe ekhandvatten n van de laag g grijsgrind naar n binnen om m perspectief toe te voege en aan deze figuur. Je ziet als je één van de d hoeken sleept de ande er hoek auto omatisch mee ekomt. Laat los als ’t goed is. Druk op En nter om te bevestigen.
17. Verrschalen. Neem het midden m handv vat beneden vast en slee ep naar bove en om de figuur lager te maken. Sleep het zo o dat het bijn na tot tegen de d curven ko omt. (Zie fig.) Druk op Entter om te bevestigen.
18. Tw weede figuu ur invoege en. Open de e figuur konin ng.jpg Selecteer in n je Toolbox het Toversttafje. Stel in je op ptiebalk van het toverstaffje een tolera antie in van 10 1 pixels
10 Klik met je toverstafje op de witte achtergrond. De witte achtergrond wordt geselecteerd. Klik in je Menubalk op Selecteren, Selectie omkeren. Nu is je schaakstuk geselecteerd ipv de achtergrond. Klik in je Menubalk op Selecteren, Bewerken, slinken… Geef een Selectie slinken in van 1 pixel (dit hangt af van de grote van je figuur) Klik OK.
Selecteer je Verplaatsgereedschap in je Toolbox
Zet de beide werkvensters zo dat je beide figuren ziet. Sleep de selectie naar je figuur Webkop. Sluit je figuur Koning.jpg
Hernoem deze laag tot koning in het lagenpalet. Sleep de laag naar boven, als ze daar al niet stond. Plaats de figuur ongeveer in het midden van de figuur webkop, net tegen het grijsgrid… (Zie fig.)
Sla je figuur op door op Bestand, Opslaan te klikken.
19. Schaduw toevoegen.
Klik in het Lagenpalet onderaan op het icoontje Laagstijl toevoegen. Selecteer Slagschaduw uit het rolmenu. Geef in: Hoek: 180° Afstand: 20 pixels Spreiden: 23 pixels Grootte: 10 pixels Klik op OK.
Je figuur krijgt een schaduw. Zorg ervoor dat al je schaduwen hetzelfde zijn, dat ze dezelfde waarden hebben. Let erop dat ze bv aan dezelfde zijde van ’t object of tekst liggen. Geef dus voor alle figuren en teksten dezelfde waarden in… noteer ze desnoods op een blaadje papier.
20. Derde figuur PSD invoegen. Open het bestand paard21.psd
11
Dit is een PSD bestand , dus een Adobe Photoshop bestand. Daar zit al een schaduw op en je kan de figuur zo, zonder selecteren, loskoppelen en verslepen van z’n achtergrond. Sleep het paard naar je figuur webkop.
Sluit de figuur met ’t paard paard21.psd
Zet de laag met ’t paard bovenaan in je lagenpalet. Hernoem deze laag naar paard. (Zie fig)
Merk dat alle lagen nu een naam hebben, zo kan je makkelijk een laag terugvinden.
21. Lay-out bepalen. Het moet een mooi website hoofdding worden. Denk daarom na over de plaatsing van de figuren. Gebruik de fotografische derden regel. Zet de figuren niet in het midden. Plaats je paard en koning zo, zodat ’t een mooi geheel vormt. Pas ook de grootte van het grijsgrid aan, maak ’t wat breder en zet de koning links op de rand. Plaats het paard rechts maar niet op de rand (Zie fig.)
22. Tekst invoegen. Nu kan je de website naam invoegen aan de linkerzijde bovenaan. Je kan het logo daar plaatsen, als er een logo bestaat. Of gewoon tekst plaatsen.
Klik in je Toolbox op het Tekstgereedschap. Kies een mooi en goed leesbaar lettertype, bv: Arial, Bold met 36 pt, Tekst Centreren.
Voor de kleur neem je hetzelfde geel als je in de gele lijn gebruikt hebt. Klik op het pipet en pipeteer de gele curve. Klik in je figuur links bovenaan en typ: SchaakClub (Enter) Limburg
12
Klik in je Te ekst optieballk op het Verrdraaide tek kst maken iccoon. Kie es voor Stijl: Omhoog Bu uigen: +30 % Ho orizontale ve ervorming: +26% + Verticale vervo orming: -6% % Deze ingaven kunnen k veran nderen, pas deze vervorm ming aan aa an je currve, zodat de e tekst de curve ongevee er volgt.
Klikk op OK.
Pla aats je tekst ongeveer o op p de curve lijn n. (Zie figuur) Ge eef je tekst oo ok schaduw w net als de figuren.
23. Kno oppen aan nmaken. K in het Too Klik olbox op je Afgeronde A re echthoek to ool. Dit zit on nder het Rech hthoek tool. Kies een mooie stijl.. Maar ze et natuurlijk eerst e je eigen nschap terug g op vormlag gen in de opttiebalk van vormen, v anders zie je de stijle en niet. Voeg stijjlen toe doo or op het eige enschappijltje e te klikken en e bv Glazen knoppen k of ro olloverknopp pen te laden. (Zie fig.)
Je kan ve erschillende stijlen laden. Je kan ze e ook allema aal laden… maar m bedenk dan wel, dat je dit alles moe et laden bij de d opstart van PS, en ’t trrager gaat we erken… Dus laad alleen de sttijlen en lettertypen die je e ook daadwe erkelijk gaat gebruiken.
Trek een rechthoek op het einde e van de Grijssgrid (Zie fig) Hierin kan je knoppe en zetten bv Home, H Conttact, enz… Je kan ze e dan met ho otspots active eren in je We ebbuilder.
n figuren of tekst toevo oegen.. Maarr maak ’t niett te druk, het moet een ovverzichtelijke e kop Je kan nog blijven. En E herhaal in n geen geval je Web naam op je pagiina. Dit is je logo, l dit is de e kop… MicDigital 2007
