Kennismaking met Adobe Creative Cloud

Werken met 3D


3D in verschillende applicaties


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. Met een object uit het 3D Warehouse deed ik hetzelfde. 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. 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 theekop gaan overtrekken. Daarna gooit u de laag van de tafel weg.

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. Abonnees van CC vinden Flash in de Application Manager onder Apps en daar onder 'Andere versies' als u op het pijltje rechts van Openen bij Animate klikt, iets wat voor proefversies niet beschikbaar is. Kies de versie 2015, niet 2015.1 of hoger; dat zijn oudere Animate CC versies.

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 Flash en 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 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 niet op Windows 10.



Werken met Adobe Fuse.


Adobe Fuse.



Adobe Fuse nu. Fuse is 3D-werk, maar dan voor animatie. 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. U kunt het bestand niet openen door erop te klikken zonder dat u het hebt gekoppeld, dat moet via File › Open.

U ziet op de afbeelding dat u het model kunt uploaden naar 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, 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. Vanuit Photoshop kunt u het naar Sketchfab sturen, wat ik hier besprak bij Photoshop. Maar kijk eens hier; zie al de componenten van de DAE ervan. Toen ik het de eerste keer stuurde waren enkel de kleren te zien en niet het lichaam erin.

Een wat omslachtige maar veel snellere en veel betrouwbaarder methode is de volgende. Doe 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.

U kunt het model exporteren uit Photoshop, als DAE, 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'.




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.



Werken met Adobe Dimension.


Adobe Dimension.