Photoshop button importeren (Photoshop Button)

uit de cursus Responsive websites maken met Adobe Muse

Photoshop button importeren (Photoshop Button)
Geef een waardering

Hallo vreemdeling,

wat leuk dat je onze site bezoekt. Bekijk gerust een paar video's en als het je bevalt kun je altijd abonnee worden.

Automatisch afspelen
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

Iedereen kan een website 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.

What You See Is What You Get.
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.

Responsive webdesign voor smartphone, tablet en desktop.
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.

SEO en Website Publiceren.
Natuurlijk eindigen we met het optimaliseren van je website voor zoekmachines en het online zetten van de website. Een complete instructiecursus waarin je met nul kennis en ervaring uiteindelijk een professioneel ogende website leert maken.

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.