Workshop 21. Curven tekenen.

Transcriptie

1 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 2. Pen tool 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. 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 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 3 Sleep je eerste ankerpunt naar links. Plaats een ankerpunt rechts bij. Duw het eerste ankerpunt naar beneden en het tweede, rechtse iets naar boven. Door de Handels verder of korterr bij het ankerpunt te slepen kan je een mooie curve maken. Speel wat met de handels om een vloeiende golf te verkrijgen. (Zie fig.) Je kan zoveel ankerpunten toevoegen als je wil. Dit hangt af van wat je wil bekomen als curve of golf. 4. Nieuwe laag maken Je hebt nu een pad getekend, maar dit is nog geen zichtbare lijn. We gaan dit pad nu zichtbaar maken, kleuren Klik in je lagenpalet op het icoontje onderaan Nieuwe laag maken. Je krijgt een nieuwe laag1. Zorg dat deze laag1 geselecteerd is. In deze nieuwe laag1 gaan we onze curve zetten, dan is ze gescheiden van de achtergrond en kan je ze nog altijd los verplaatsen achteraf. 5. Penseel bepalen Nu gaan we het penseel instellen. Dus de kleur en lijndikte van de curve. Klik, in je toolbox op het Penseel gereedschap.. Kies voor een penseel van ongeveer zes pixels met harde rand en 100% dekking. Kies je penseelkleur. Stel je voorgrondkleur in door erop te klikken en kies voor een Bordeaux kleur. Of kies een kleur van je website of Logo 6. Pad omlijnen Klik in je Lagenpalet op het tabblad Paden. Je ziet nu het pad van de curve die je zojuist getekend hebt. Klik met je rechtermuisknop in dit tijdelijk pad in het lagenpalet. Je krijgt een rolmenu. Kies in dit menu voor Pad omlijnen. Je krijgt een pop up venster Pad omlijnen. Hier kan je kiezen wat voor soort omlijning je wil maken. Je kan bv met potlood omlijnen of met de gom om bv een foto transparanter te maken op de curve, enz We willen echter een lijn tekenen, daarom kiezen we voor Penseel. Klik op OK.

4 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 5 8. Tweede curve aanmaken met hetzelfde pad. Klik in je lagenpalet op het icoontje onderaan Nieuwe laag maken. Maak een tweede laag aan Laag2 Dubbelklik Dubbelklik op deze laagtekst en noem deze gele lijn op laag1tekst en noem deze rode lijn. Selecteer de laag gelee lijn. Verander je voorgrondkleur in een gele kleur. Geen citroengeel maar warm geel. Of kies een tweede kleur van je Site, Logo Kies voor kleuren die samengaan, bij elkaar passen. Doe nu net hetzelfde als voor de rode lijn. Klik in je Lagenpalet op het tabblad Paden. Klik met je rechtermuisknop in het pad in het lagenpalet.. Kies in dit menu voor Pad omlijnen. Deselecteer t pad door ergens eronder te klikken. Klik nu in je lagenpalet op Lagen en selecteer de laag gele lijn. Selecteer in de toolbox je Verplaatsgereedschap. Maak ook deze lijn zo dat ze buiten de randen van de figuur komt, 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, net zoals de rode lijn. Juist even groot als de vorige dus. Druk nu op je toetsenbord op de pijltjestoetss omhoog om de lijn hoger te brengen. Zet ze net boven de rode lijn. Als t moet jan je de rode lijn ietsje zakken zodat het een geheel vormt van een weekleurige lijn. Druk op Enter om te bevestigen. Sla je figuur op onder webkop.psd 9. Pad verwijderen Als de curve goed is moet je het tijdelijk pad verwijderen. Klik in je Lagenpalet op Paden. Klik met je rechtermuisknop op t tijdelijk pad. Klik in het rolmenu op Pad verwijderen. Doe dit pas als je zeker bent van je curve en je geen curve meer wil bijmaken of veranderen.

6 6 Je moet t pad verwijderen om de volgende lagen en figuren te kunnen bewerken. Nu kan je de bovenkant van de golf een kleur geven. De onderkant dezelfde kleur als je webpagina s. Als je dat doet lijkt het alsof je pagina doorloopt tot tegen de golf, wat een mooi effect geeft. 10. Selectie vullen, deel selecteren Klik in je lagenpalet op het icoontje onderaan Nieuwe laag maken. Noem deze laag vulling Laat de laag geselecteerd. Klik in je Toolbox op de Lasso en selecteer de Veelhoeklasso. Trek nu een selectie, door herhaaldelijk te klikken, rond de figuur, begin onderaan in de curve en volg de curve tot rechts buiten de figuur. Ga buiten de figuur naar boven, dan naar links en weer naar beneden, altijd buiten de figuur;als je aan t begin gekomen bent klik je op het beginpunt en de lasso sluit zich. (Zie fig.) Zorg dat je juist binnen de curve blijft. Blijf dus op de roodgele lijn.

7 7 11. Kleur kiezen met pipet Klik in je Toolbox op het pipetje en pipeteer de bordeaux kleur van je curve. Dit om dezelfde kleur van vulling te hebben. Je voorgrondkleur wordt nu bordeaux. Gebruik je pipet om altijd dezelfde kleur te vinden en je Logo of Website in enkelee bij elkaar passende kleuren in te vullen. Herhaal dezee kleuren door heel je site maar maak er geen bonte bedoening van. 12. Selectie vullen Klik in je Toolbox op het Emmertje. Dit zit onder het Verloop gereedschap. Klik met je emmertje boven de curve op de witte achtergrond. (Zie fig.) De selectie vult zich met rood. Klik in je Menublak op Selecteren, Deselecteren om de selectie op te heffen. Maar nu ligt de kleurvulling op je curve. We gaan ze erachter plaatsen. Sleep in je Lagenpalet de laag vulling naar beneden tot onder de beide lijnen (zie fig.) 13. Laagmasker toevoegen. Laat deze vullinglaagg geselecteerd. Klik in je Lagenpalet onderaan op het icoontje Laagmasker toevoegen. Klik in dit laagmasker zodat t geselecteerd is.

8 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. Sla je figuur op door op Bestand, Opslaan te klikken. 15. Figuur invoegen 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.) 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 9 Selecteer je Verplaatsgereedschap. Zet de beide werkvensters zo dat je beide figuren ziet. Sleep de figuur Grijsgrid naar je figuur Webkop. Sluit de figuur grijsgrid.jpg Hernoem deze nieuwe laag in je Lagenpalet naar grijsgrid en sleep ze onder de vullinglaag. (Zie fig.) Je grijsgrid zit nu achter de curven en achter de bordeaux transparantie. 16. Perspectief invoegen. Klik in je Menubalk op Bewerken, Transformatie, Perspectief. Sleep nu een van de bovenste hoekhandvattenn van de laag grijsgrind naar binnen om perspectief toe te voegen aan deze figuur. Je ziet als je één van de hoeken sleept de ander hoek automatisch meekomt. Laat los als t goed is. Druk op Enter om te bevestigen. 17. Verschalen. Neem het midden handvat beneden vast en sleep naar boven om de figuur lager te maken. Sleep het zo dat het bijna tot tegen de curven komt. (Zie fig.) Druk op Enter om te bevestigen. 18. Tweede figuur invoegen. Open de figuur koning.jpg Selecteer in je Toolbox het Toverstafje. Stel in je optiebalk van het toverstafje een tolerantie in van 10 pixels

10 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 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 12 Klik in je Tekst optiebalk op het Verdraaide tekst maken icoon. Kies voor Stijl: Omhoog Buigen: +30 % Horizontale vervorming: +26% Verticale vervorming: -6% Deze ingaven kunnen veranderen, pas deze vervorming aan aan je curve, zodat de tekst de curve ongeveer volgt. Klik op OK. Plaats je tekst ongeveer op de curve lijn. (Zie figuur) Geef je tekst ook schaduw net als de figuren. 23. Knoppen aanmaken. Klik in het Toolbox op je Afgeronde rechthoek tool. Dit zit onder het Rechthoek tool. Kies een mooie stijl. Maar zet natuurlijk eerst je eigenschap terug op vormlagen in de optiebalk van vormen, anders zie je de stijlen niet. Voeg stijlen toe door op het eigenschappijltjee te klikken en bv Glazen knoppen of rolloverknoppen te laden. (Zie fig.) Je kan verschillende stijlen laden. Je kan ze ook allemaal laden maar bedenk dan wel, dat je dit alles moet laden bij de opstart van PS, en t trager gaat werken Dus laad alleen de stijlen en lettertypen die je ook daadwerkelijk gaat gebruiken. Trek een rechthoek op het eindee van de Grijsgrid (Zie fig) Hierin kan je knoppen zetten bv Home, Contact, enz Je kan ze dan met hotspots activeren in je Webbuilder. Je kan nog figuren of tekst toevoegen.. Maar maak t niet te druk, het moet een overzichtelijkee kop blijven. En herhaal in geen geval je Web naam op je pagina. Dit is je logo, dit is de kop MicDigital 2007