3D kwam al ter sprake toen we Photoshop behandelden. We maakten een 3D-object en we plaatsten dat op Sketchfab. Daarna, toen we Dreamweaver behandelden, plaatsten we het in Photoshop gemaakte 3D-object uit Sketchfab in een webpagina. Hieronder ga ik de andere vormen van 3D behandelen, waarmee we in Adobe-applicaties kunnen werken. Dat doe ik nadat ik eerst freeware SketchUp heb besproken, een programma waarin we 3D-objecten uit Photoshop maar ook omgekeerd kunnen bewerken.
Zie hoe eenvoudig ik een huis kan bouwen in SketchUp.
Een kind kan de was doen, en het meubilair haalt u in het 3D Warehouse.
De video is jaren oud, maar de basisprincipes bleven dezelfde!
Met SketchUp werken is enorm leuk, maar het is ook een programma dat voor designers bijzonder handig is. Ik geef u daarvan hieronder een simpel voorbeeld, nadat ik u nog even iets over de installatie van SketchUp heb verteld. U installeert SketchUp; zoek op sketchup + "all downloads". U ziet welke mogelijkheden u hebt, nadat u een account hebt aangemaakt, of ingelogd bent met uw Google ID. NB U kunt enkel installeren op een 64 bits computer.
Installeert u de Pro-versie dan mag u die een maand gebruiken met daarin naast SketchUp de programma's Layout en Style Builder. Afhankelijk van de versie die u koos wordt het na een maand de freeware versie Make, of moet u Pro verwijderen en Make installeren. Make mag u niet commercieel gebruiken.
Stel u moet een tafel tekenen, in een bepaalde stand. Dat is bepaald niet eenvoudig. Hebt u als designer ooit eens zo'n tafel (of wat dan ook voor object in een bepaalde stand) nodig dan kunt u als volgt te werk gaan. Open SketchUp. Doe File › '3D Warehouse' › 'Get Models'. Schrijf table in het zoekvenster en klik op Search. Zoek er één die u bevalt. Klik op het gewenste model en klik dan op Download. U kunt kiezen tussen opslaan of direct in SketchUp plaatsen. Indien u het opsloeg, kunt u het openen in SketchUp via File › Import; kies dan rechtsonder voor het openen van SKP-files.
U ziet die groene SketchUpachtergrond.
Voor export als 2D of 3D van het object maakt dat niets uit, maar het kan ook anders.
Start SketchUp, klik op Template en kies een architectonische of een constructie-achtergrond.
U ziet nu hetzelfde als op de afbeelding hierboven. Zet de tafel in de door u gewenste stand, slepend met de muis met het gereedschap waar de lijn naar wijst. Doe File › Export › '2D Graphic' en kies JPG of PNG. Open het bestand in Photoshop of open een nieuw bestand in Illustrator en doe Bestand › Plaatsen enzovoorts. Doe Venster › Lagen en kies daarna in het menu van het deelvenster Lagen voor 'Nieuwe laag' (kies in Photoshop in het dialoogvenster bij Kleur voor Geen; in Illustrator betekent Kleur hier de kleur waarmee de laagsoort wordt aangegeven). Nu kunt u, met welk tekengereedschap dan ook, de tafel gaan overtrekken. Daarna gooit u de laag van de tafel weg.
Even tussendoor: in plaats van dat gereedschap waar de pijl naar wijst (Orbit) te gebruiken, kunt u ook het muiswieltje indrukken en dan de muis bewegen. Met Shift erbij is dat pannen, en het muiswieltje ingedrukt draaien is zoomen.
Probeert u trouwens ook eens de tafel te exporteren om in Photoshop te gebruiken. Doe File › Export › '3D Model' en kies voor 'Collada file', een DAE-bestand. U vindt het hier (als ZIP omdat een DAE in een browser opent als XML bestand). Ga nu in Photoshop als volgt te werk. Bestand › Nieuw, kies 1000 x 1000 pixels en een transparante achtergrond. Doe 3D › 'Nieuwe 3D-laag uit bestand' en kies het DAE-file. U ziet, dat werkt niet. Maar probeer het eens met een wat simpeler object (het heeft ook geen skin). Open dit bestand (een ZIP waar ook de skin in zit) in SketchUp en bekijk het. Exporteer als DAE en open in Photoshop. Dat gaat prima. Zie het Photoshopbestand hier. Kijk trouwens voor informatie over de wisselwerking tussen Photoshop en SketchUp hier.
In Illustrator kunt u ook in 3D werken, maar op een geheel andere manier dan in Photoshop. We kennen in Illustrator de 3D-effecten. U tekent een object, bijvoorbeeld deze driehoek. Open het bestand in Illustrator, selecteer het met het zwarte pijltje als dat niet al is gebeurd en doe Effect › 3D › 'Diepte geven en voorzien van schuine kanten'. Vink eerst in het dialoogvenster Voorvertoning aan, en laat dan het kubusje draaien. U ziet het. Maar één ding: als u op OK klikt dan krijgt u een mooi plaatje, maar een 3D-bestand is het niet meer.
U kunt in Illustrator ook werken met Perspectief, dat natuurlijk nauw verwant is aan 3D.
Zie voor een video daarover hierboven.
Het is wat ouder, maar dat maakt niets uit.
3D-effecten kunt u ook toepassen in Flash, Edge Animate en dus natuurlijk ook in de opvolger van beide, Animate CC.
Maak in Animate CC een nieuw bestand (kies 'ActionScript 3.0'), teken een rechthoek, maak er via Wijzigen een symbool van, selecteer het en werk met Wijzigen › Transformeren › 'Roteren en scheeftrekken'. Als u met de muiswijzer een hoekpunt nadert en erover heen gaat, dan ziet u vier gedaantes van de muiswijzer: een krom pijltje, een tweepuntig pijltje, een S-vormige haak (heel eventjes, tussen de vorige en de volgende) en een dubbele pijl. Ze hebben allemaal verschillende functies; probeer ze uit! Zie hier.
Precies zoals u in Photoshop met het gereedschap Verplaatsen een 3D-object in de ruimte kunt laten wentelen, zo kan dat met elk object in Animate CC. Doe in Animate CC Bestand › Nieuw › 'ActionScript 3.0' › OK en teken een gekleurde rechthoek. Selecteer deze met het zwarte pijltje en doe Wijzigen › 'Omzetten in symbool', kies als Type voor Filmclip, › OK. Kies nu het gereedschap 3D-rotatie (het bolletje) en met de muis slepend kunt u nu het object in de ruimte laten kantelen.
Edge Animate werkt simpeler dan Flash en Animate CC. Open het (als u het al hebt geïnstelleerd; u kunt het niet meer downloaden) en open een nieuw bestand. Klik linksboven op het 'Rectangle Tool' en teken een rechthoek. Maak deze rood onder Color, links. Doe Modify › 'Convert to Symbol'. Ga nu aan het werk met de bovenste vier opties onder Transform, links. Zie hier, mocht u Edge Animate niet kunnen installeren; het draait ook niet op Windows 10 trouwens.
Adobe Fuse.
Adobe Fuse nu. Fuse is 3D-werk, maar dan voor animatie, om te kúnnen animeren, iets wat u niet in Fuse doet maar in Mixamo of in Photoshop. In Fuse maakt u het 3D-model, zoals u bijvoorbeeld op de
afbeelding hierboven ziet. U kiest een hoofd, lijf, armen en benen, kleding enzovoorts. Daarna kunt u details aanpassen (het formaat van de spierballen of de borsten, ogen open of dicht, soort tanden enzovoort), u kunt het aanzien van weefsels aanpassen (ruwer, meer contrast...) en u kunt ook eigen skins gebruiken. Het bestand zonder aanpassingen vindt u hier, overigens gemaakt door een meisje van zeven. Het is niet erg groot omdat het, geopend in Fuse, alle te gebruiken onderdelen online oproept.
In de nu volgende tekst geef ik aan hoe u kunt werken in Fuse als u het vóór september 2020 hebt geïnstalleerd. Hebt u dat niet, dan zal u moeten werken met het (sedertdien wel flink uitgebreide) Mixamo. U ziet op de afbeelding dat u het model kunt uploaden naar Mixamo (in de nieuwste versie doet u File › 'Animate with Mixamo'). Daar wordt dan een 'skelet' aangebracht, te vergelijken met de Bone-functie in Animate CC, en de functie 'Marionet verdraaien' in Photoshop en Illustrator; ik noemde dat al. Dat skelet is instelbaar in fijnheid; u kunt bijvoorbeeld kiezen voor één, twee of drie gewrichten per vinger; hoe fijner u instelt, hoe zwaarder het bestand natuurlijk. Op basis van dat skelet, of beter: de gewrichten daarvan, kunt u animaties gaan maken. Zie hier en hier. Het bestand kunt u uploaden naar uw Cloud (dat kan niet meer), het daar als openbaar markeren of naar een derde sturen. Wat ook kan, is het in uw Bibliotheek plaatsen, dan in een bestand zetten en opslaan, zie hier. We kunnen het naar Sketchfab sturen, maar kijk eens hier; zie al de componenten van de DAE ervan (in de nieuwe versie werkt u als volgt: File › Export › OBJ).
Een wat omslachtige maar veel snellere en veel betrouwbaarder methode is de volgende. Doe zoals eerder aangegeven in Fuse File › 'Animate with Mixamo'. De upload is te volgen en opent in Mixamo. Klik (scroll eventueel wat naar beneden) Finish en klik dan op Download. Kies FBX en rechts 'Original pose'. Klik op Download.
Het FBX-file wat u dan krijgt (zie hier) kunt u uploaden naar Sketchfab. Klik daar op Upload, kies het FBX-bestand, klik op Continue, en vul eventueel tekst in. Klik weer op Continue. Wacht op het uploaden en de processing (verwerken). U kunt eventueel het venster en/of de computer sluiten en later teruggaan. Of klik na even op 'Go to uploads'. Als het uploaden klaar is, klik dan op Publish. U krijgt een verkorte URL, zie de mijne hier.
Ook dit model kunt u natuurlijk weer embedden in HTML, zoals we eerder leerden. En u kunt het model animeren in Photoshop. Zie een voorproefje hier.
Mixamo nu. U opent het in de Application Manager in de sectie Web. U moet eerst inloggen met uw Adobe ID. U ziet dat u linksboven Characters kunt kiezen. Kies er een. Het kan zijn dat u ook even op de verversknop in uw browser moet klikken. U ziet dan dat u rechtsboven kunt kiezen voor downloaden, het model naar Aero sturen (de virtual reality app van Adobe), u kunt zelf characters uploaden, en u kunt animaties toepassen. Klik daarvoor op 'Find animations' of boven op Animations. Door op een animatie te dubbelklikken past u deze toe, warna u rechts verschillende zaken kunt fine tunen.
U kunt het gedownloade model exporteren uit Photoshop, als DAE (zie hieronder), en dat importeren in een SketchUpbestand. Dat werkt goed, al moet je het TIN (het wireframe oftewel draadmodel) weghalen via selecteren, rechts klikken en dan kiezen voor 'Soften Edges'.
Als u een DAE exporteert uit Photoshop dan gaat er soms wat mis, bijvoorbeeld als u het wilt gebruiken op Sketchfab, en u mist daar de skin. Werk als volgt.
1 Maak een nieuw leeg mapje.
2 Maak daarin twee submapjes.
3 Sla het bestand op als PSD in het hoofdmapje. Doe 3D > 'UV's genereren' (dit kan even duren), en sla het bestand opnieuw op.
4 Doe 3D > '3D laag exporteren', kies in het dialoogvenster Exporteigenschappen voor Collada, en exporteer naar het eerste submapje. U krijgt daarin PSD's die u kunt bewerken, maar niet uploaden.
5 Doe hetzelfde, maar kies bij Exporteigenschappen onder Structuurindeling nu voor PNG. Sla op in het tweede submapje, en gebruik dit voor het uploaden naar Sketchfab, en voor het probleemloos openen in SketchUp.
Adobe Fuse en Photoshop.
Nóg een vorm van 3D-werk, in Photoshop, Illustrator, InDesign en Fireworks. Ik geef u een voorbeeld van wat in alle vier de applicaties als Stijl kan worden toegepast. Open dit bestand in Photoshop. Kijk even hier. Dubbelklik bij A en zie wat u allemaal voor mogelijkheden hebt in het dialoogvenster.
Tot slot Adobe Dimension. Zoek op adobe + dimension en ga naar Video's. U kunt het programma installeren, ook als u een proefversie van CC hebt, maar op een PC enkel op Windows 10. U hebt een behoorlijk goede videokaart nodig.
Het principe is als volgt: u maakt in Dimension of in Photoshop een 3D-object of u koopt er een op Adobe Stock. U past het aan zodat er uitziet als het product wat u gaat promoten; u hebt daarvoor heel erg veel mogelijkheden. U plaatst het voor een achtergrond, u zet het in een bepaalde 3D positie en u maakt een 2D afbeelding daarvan voor uw advertenties.
Ook de skins en de belichtingseffecten maakt u zelf in Photoshop, of u haalt ze uit Adobe Stock in de afdeling 3D. Een en ander is daar trouwens niet gratis. Maar: veel goedkoper dan een fotograaf inhuren, stelt Adobe.
Zie de afbeelding hieronder. Ik maakte die fles in Photoshop. Ik had die natuurlijk veel beter kunnen afwerken, maar ik wilde oefenen met de mogelijkheden die Dimension biedt. Links ziet u materialen die ik kan toepassen, op de verschillende onderdelen van de fles die ik rechtsboven kan selecteren. Selecteer ik de hele fles dan kan ik die schalen, verplaatsen en correct voor het achtergrondvlak zetten. Rechtsonder ziet u wat ik allemaal met de achtergrond, een wijngaard bij Bordeaux, kan doen.
Adobe Dimension.
Als we het hebben over 3D dan hebben we het over 3D scannen en 3D printen. Kijkt u daarvoor eens bij Replicad.