Kennismaking met Adobe Creative Cloud

Samenwerken


Webdesign met gebruik van verschillende applicaties


We maakten al kennis met CSS exporteren uit Illustrator, en met het openen van een Photoshopbestand in Dreamweaver. Nu gaan we eerst het exporteren voor webdesign uit Photoshop bekijken, van afbeeldingen en van CCS. Dat is vooral nuttig voor het werken met responsive webdesign, websites die zich aanpassen aan het formaat van het gebruikte scherm van desktop tot smartphone.

Begint u eens met het bestand vorm.psd (uit de eerste oefening) te openen in Photoshop. Selecteer in het deelvenster Lagen de laag 'Afgeronde rechthoek 1'. Rechtsklik er op en kies voor 'CSS kopiĆ«ren'. Open Dreamweaver en doe Bestand › Nieuw › CSS › Maken. Plaats de cursor in regel 3, klik rechts en kies Plakken. U ziet het, een CSS uit Photoshop, net zoals we die eerder exporteerden uit Illustrator. Maar er staan wat zaken in die moeten worden gecorrigeerd. Op de eerste plaats maakt u van
.Afgeronde_rechthoek_1
het in dit geval meer correcte
#afgerondeRechthoek_1
wat u ook kunt doen door de laag in Photoshop te hernoemen (op de naam klikken) naar afgerondeRechthoek_1, opnieuw de CSS te exporteren en dan de punt te vervangen door een hekje. Daarnaast haalt u alles aangaande de positionering weg, dus de regels 8 tot en met 13. Die positionering regelen we zelf wel in ons webdocument. Met wat u nu hebt, kunt u aan de slag op dezelfde manier als met de Illustrator CSS. De CSS van Illustrator is wat beter (er zitten browser hacks in, net als in de CSS van Fireworks) maar in Photoshop kunt u makkelijker vormen maken en de CSS eenvoudiger exporteren.

Sluit het bestand in Photoshop en heropen het. Sla het bestand op in een nieuw mapje. Doe Bestand › Genereren en vink Afbeeldingselementen aan. U gaat nu de Adobe Generatortechniek gebruiken. Controleer even onder Bewerken › Voorkeuren › Plug-ins of 'Generator inschakelen' aangevinkt staat. Zo niet, vink het aan en herstart Photoshop. Verander de naam van de tekstlaag (dubbelklik op de naam) in tekst.png (of.jpg of .gif, dat maakt niet uit). Verander de naam van de vormlaag in vorm.png (of...). Dubbelklik op de achtergrondlaag (niet op de naam), klik op OK om de laag te ontgrendelen en noem deze nu achtergrond.jpg. Sla het bestand onder dezelfde naam op. Ga nu naar het mapje waar het bestand in staat, en zie dat u daar een extra map hebt nu, met de lagen als afbeeldingsbestanden. Die kunt u gebruiken in webdesign of waar dan ook.

Bekijk nu de afbeelding hieronder. In Photoshop (maar ook in Illustrator) kunnen we werken met Tekengebieden. Ik maak er een voor desktop, een voor tablet en een voor smartphone. Met de Generatortechniek kan ik ze dan mooi exporteren voor gebruik in Dreamweaver; niet alleen de afbeeldingen maar ook hele tekengebieden. Zie ook links de verschillende voorinstellingen voor het maken van tekengebieden.



Tekengebieden in Photoshop


Tekengebieden (Art Boards) in Photoshop.
U vindt het bestand hier.



Op de volgende pagina behandel ik webdesign met Muse, ook voor mobiel webdesign, en hier bespreek ik nu de applicaties Experience Design (XD) en Spark. Met Spark maakt u simpele websites, vooral voor gebruik op sociale media, terwijl u met XD ontwerpen voor websites maakt. De vormgever werkt met XD en stuurt zijn XD 'script' naar de webdesigner.

XD eerst. Het is ontwikkeld nadat Windows 10 was verschenen, en het draait daarom niet op Windows 7. U gebruikt assets, onderdelen, uit verschillende applicaties die u via de Cloud naar XD stuurt. U ontwerpt er interactieve webpagina's mee. Ik noemde het al eerder: u maakt geen websites, u ontwerpt ze enkel, alhoewel u ze wel online kunt zetten op een server van Adobe.

XD lijkt een applicatie, maar het is een service met een eigen 'browser'. Het staat niet op uw harde schijf. De zaken die u ermee maakt natuurlijk wel. Als u het opent vanuit de Application Manager kunt u kiezen voor desktop, tablet of smartphone. Met het gereedschap Artboard voegt u, klikkend in het werkgebied, tekengebieden toe, webpagina's in feite. Als u dat gereedschap kiest, dan kunt u kiezen uit dezelfde formaten als u zag op de afbeelding met die Photoshop tekengebieden. Deze kunt u vervormen en bijvoorbeeld relatief hoog maken, zodat er verticaal doorheen gescrollt kan gaan worden.

Als u een tekengereedschap selecteert, of het gereedschap Text, dan kunt u rechts van het werkgebied het object of de tekst vormgeven en effecten zoals slagschaduw toevoegen. Van een object kunt u een symbool maken, om elders te kunnen gebruiken. Selecteert u een object en klikt u op 'Repeat Grid' dan kunt u slepend gelijke objecten toevoegen, en zo bijvoorbeeld de knoppen van een menu maken (zie dit plaatje). Tussen zo'n knop en een andere webpagina (tekengebied) kunt u dan een link maken; u ziet hoe dat gebeurt als u linksboven de werkruimte Prototype kiest. Rechtsboven kunt u klikken op Browser Preview. Klikt u daar op Share, dan plaatst u het op een Adobe-server en krijgt u de link daarheen; zie hier.



Werken met Adobe XD.


De Prototype modus van XD.



Spark nu. In Spark bouwt u aan een websiteproject met de drie onderdelen van het programma: Post (afbeeldingen, kleuren en tekst), Page (wat ik hier behandel) en video. Zie hier voor algemene informatie. Behalve voor gebruik op sociale media worden Spark-producties gebruikt via links in e-mailcampagnes. Ook Spark is een service. Ga hier naar Spark Page. Klik op 'Get started now' en log in. U ziet dat u de beschikking hebt over verschillende templates; u kunt die gebruiken en ook aanpassen, maar u kunt ook from scratch werken. U selecteert wat, u kiest rechtsboven een categorie, en u bewerkt. Klik na elke bewerking, ook na wissen (met Delete) op de plusknop Add. Alles wat u met Spark maakt is responsive. U kunt een productie als afbeelding downloaden, mailen, weer op de Adobe-server publiceren (zie hier) of naar Twitter of Facebook sturen.




Responsive webdesign, maar nu middels verschillende CSS-bestanden.
Die verschillende bestanden leert u maken op de volgende pagina.