Photoshop button importeren (Photoshop Button)

uit de cursus Responsive websites maken met Adobe Muse

Leuk dat je onze site bezoekt,

Ben jij leergierig?. Jij abonnee en dan ik geef jou 5% korting op de eerste maand! Wat vind je daar van? gebruik als kortingscode: DIEHARD

Volgende video: Werken met Widgets

Geef een reactie of stel een vraag

Geef een reactie

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Responsive websites maken met Adobe Muse

perm_identity Belinda | video_library 71 video's | query_builder 06:00:26

Makkelijk websites maken met Adobe Muse

Leer hoe je met Adobe Muse websites maakt en publiceert. Dankzij de eenvoudige interface kan iedereen zonder voorkennis van HTML-code, CSS en/of JavaScript toch vrij eenvoudig een responsive website creëren en online publiceren. Jammer genoeg is Adobe gestopt met de verdere ontwikkeling van Muse maar het programma is nog steeds te downloaden en te gebruiken.

Doelgroep van deze cursus

Iedereen die websites wil leren maken zonder kennis te willen hebben van broncode, html, css en javascript.

Wat ga je leren

In deze online cursus leer je de verschillen tussen een statische, vloeiende en responsive website. Alle meest gebruikte vensters, gereedschappen en instellingen komen aan bod.  Direct vanaf de eerste instructievideo’s besteden we aandacht aan de meest snelle en efficiënte manier waarop je webpagina’s en -sites zou moeten maken. Dus werken met master pages en stijlen.

Interactieve media met JavaScript Widgets

Je leert de widgets van het programma toe te passen. Dit zijn voorgebakken JavaScript toepassingen waarmee je in een handomdraai bijvoorbeeld een fotogallerij, formulier en interactieve kaarten kunt maken.

Om ervoor te zorgen dat de website er goed uitziet op elk apparaat. Van mobiel, tablet tot desktop besteden we een volledig hoofdstuk aan Responsive Webdesign.

Vereiste voorkennis en vaardigheden

Dit progamma kan iedereen leren, het is laagdrempelig en werkt met het WYSIWYG-principe. Jij creëert prachtige webpagina’s met behulp van de gereedschappen, opties en instelvensters en Adobe Muse schrijft de benodigde code voor jou op de achtergrond weg.

Als het gaat om het vormgeven van knoppen en buttons.

Dan geven velen er de voorkeur aan om dit te maken in een tekenprogramma als Adobe Photoshop.

Op zich niet vreemd.

Want de illustratieve mogelijkheden hierin zijn groter dan die van Adobe Muse.

Goed nieuws voor Photoshop-fanaten.

Je kunt in Adobe Muse ook een Photoshop-button plaatsen.

Ik activeer Adobe Photoshop.

Zoals je ziet heb ik hierin een button voorbereid.

Belangrijk is dat je je bestand opbouwt in lagen en uiteindelijk aparte lagen overhoud.

Elke laag vertegenwoordigd dan een staat.

Geef de lagen in Photoshop alvast een herkenbare naam.

Ik heb de lagen al genoemd naar de staten waaraan ik ze wil verbinden.

Bewaar het bestand als een .psd bestand en ik keer weer terug naar Adobe Muse.

Ga naar File > Place Photoshop Button.

Alleen dan krijg je de beschikking om de verschillende lagen aan de staten te verbinden.

Navigeer in de oefenmap in de map Assets naar het bestand button.psd en klik op Open.

In dit venster kun je elke laag toewijzen aan een specifieke staat.

De volgorde waarin je de photoshop-lagen hebt bewaard.

Is verantwoordelijk voor de standaard volgorde waarop ze nu aan de staten worden toegewezen.

Klik op de uitklapmenu’s om een andere laag toe te wijzen aan de staat.

Klik op OK als je tevreden bent.

De Photoshop-button hangt nu onder de cursor.

En ik plaats de button onder de brochure-button.

Kijk uit dat je niet per ongeluk in de button 'Download Brochure' gaat staan.

Dan wordt deze in die button bijgeplaatst. Dus zorg dat je er buiten gaat staan.

Klik en sleep een kader en met de lengte van het kader duw ik nog even de footer iets naar beneden.

Het is altijd aan te raden om het liefst afbeeldingen en illustraties op ware grootte voor te bereiden.

Dat levert de mooiste voorvertoning op.

Ik link deze button naar de pagina ‘Locatie’.

Puur even om de werking van de button te controleren.

In het Control-venster en in het venster States zie de verschillende staten terugkomen.

Vanuit hier kun je ze ook activeren en bekijken.

Je kunt ze alleen niet meer wijzigen of aanpassen.

Bekijk het eindresultaat. Ga naar File > Preview Site in Browser.

Ik scroll naar beneden en controleer de werking.

Met de muis op de button wordt deze licht. Klik ik in wordt deze oranje.

Laat ik los activeer ik de pagina 'locatie'.

En ik kan weer terugkeren naar de vorige pagina.