Studio Editor: Animaties toevoegen aan knoppictogrammen
5 min
In dit artikel
- Een vooraf ontworpen pictogramanimatie toevoegen
- Aangepaste pictogram-animaties maken
- Het pictogram ontwerpen
- Vereisten en richtlijnen voor aangepaste pictogrammen
Gebruik je gestylede knoppen? Voeg pictogram-animaties toe om opvallende effecten te creëren, waardoor de websites van je klanten tot in het kleinste detail interactief zijn.
Kies uit de vele vooraf ontworpen geanimeerde pictogrammen van Wix Studio voor een kant-en-klaar effect, of combineer een begin- en eindpictogram om een eigen animatie te maken. Je kunt zelfs je eigen SVG-bestanden uploaden voor een persoonlijk tintje.
Hoe werken animaties voor knoppictogrammen?
Een vooraf ontworpen pictogramanimatie toevoegen
Kies een van onze opvallende pictogramanimaties voor snelle bewerking. Nadat je het gewenste effect hebt geselecteerd, kun je de duur instellen.
Om een vooraf ontworpen geanimeerd pictogram toe te voegen:
- Ga naar je editor.
- Klik op de relevante gestylede knop.
- Klik op Instellingen.
- Klik onder Type pictogram op Geanimeerd.
- Kies wat je dan wilt doen:
- Selecteer het gewenste pictogram onder Pictogram kiezen.
- Klik op het Toevoegen-pictogram
om ons volledige scala aan geanimeerde pictogrammen in de Media Manager te verkennen.
- (Optioneel) Sleep de schuifregelaar om de Duur van de animatie te wijzigen.
Tip:
Wijs onze vooraf ontworpen pictogrammen aan om een voorbeeld van hun animatie te bekijken.
Aangepaste pictogram-animaties maken
Maak je eigen pictogram-animaties voor knoppen op de website van je klant. Door zowel een beginpictogram als een eindpictogram te selecteren, kun je een naadloze animatie maken die uniek is voor de website van je klant. Combineer pictogrammen van Wix of gebruik 2 van je eigen SVG-bestanden.
Om aangepaste animaties te maken:
- Ga naar je editor.
- Klik op de relevante gestylede knop.
- Klik op Instellingen.
- Selecteer Geanimeerd onder Type pictogram.
- Klik op het Toevoegen-pictogram
en selecteer Nieuwe maken. - Stel je begin- en eindpictogrammen in:
- Klik op het Toevoegen-pictogram
onder Beginpictogram. - Selecteer een bestand op het Media van Wix-tabblad of upload / selecteer je eigen bestand in Websitebestanden.
- Klik op Bestanden kiezen.
- Herhaal stap a-c voor het Eindpictogram.
- Klik op het Toevoegen-pictogram
- (Optioneel) Klik bovenaan op Terug en gebruik de schuifregelaar om de Duur in te stellen.
Tips:
- Je kunt je eigen bestand combineren met een pictogram van Wix.
- Gebruik het voorbeeldvak om ervoor te zorgen dat het effect eruitziet zoals jij wilt.
Het pictogram ontwerpen
Pas het pictogram aan je ontwerpvisie, de unieke branding van je klant en de betreffende knop aan. Wijzig het formaat van het pictogram, wijzig de kleur en draai het om de knop dynamischer te laten voelen.
Je kunt de aanwijsstatus van de knop ontwerpen, zodat je de mogelijkheid hebt om een extra laag interactiviteit toe te voegen. Laat het pictogram bijvoorbeeld draaien of de kleuren verschuiven bij het aanwijzen.
Om het pictogram te ontwerpen:
- Ga naar je editor.
- Klik op de relevante gestylede knop.
- Klik rechtsboven in de editor op het Inspector openen-pictogram
.
- Selecteer de relevante Status onder Ontwerp: Standaard of Aanwijzen.
- Klik onder Ontwerp op Pictogram.
- Gebruik de beschikbare opties om het pictogram te ontwerpen:
- Wijzig het formaat van het pictogram.
- Wijzig de pictogramkleur en pas de dekking aan.
- Roteer het pictogram naar een andere hoek.
Vereisten en richtlijnen voor aangepaste pictogrammen
Gepersonaliseerde pictogrammen hebben enkele vereisten. Om je eigen bestanden te uploaden en te gebruiken, moeten ze:
- Alleen effen zwart zijn (#000000)
- In SVG-indeling zijn
- Niet groter zijn dan 250 KB
Let op:
Als je je SVG-bestanden hebt gemaakt in AdobeIllustrator of Figma, moeten ze worden geconverteerd naar een samengesteld pad voordat je ze exporteert.
Er zijn ook enkele praktische tips om in gedachten te houden bij het maken van pictogrammen. We raden aan de onderstaande richtlijnen te volgen om een zo soepel mogelijke animatie te garanderen.
- Zorg ervoor dat de begin- en eindpictogrammen dezelfde startpositie hebben.
- Controleer of beide pictogrammen hetzelfde aantal punten hebben.
- Gebruik gevulde pictogrammen (zonder uitsnijdingen).
- Gebruik meerdere kleinere shapes om een SVG-pictogram te maken, in plaats van 1 grotere vorm.
- Schaal shapes bij het wijzigen van het formaat om hun kwaliteit te behouden.
- Gebruik de pixelweergave van het programma om te zorgen voor uitlijning met de pixels op het artboard.
- Als je pictogrammen heel verschillende shapes hebben, kun je deze tips proberen voor een nog soepelere overgang:
- Gebruik omgevormde versies van de pictogrammen gebruiken (een beginpictogram dat enigszins is omgevormd in het eindpictogram en vice versa).
- Verberg shapes van het ene pictogram op het andere (bijvoorbeeld: om shapes te verbergen van het eindpictogram op het beginpictogram).
Belangrijk:
We kunnen geen ondersteuning of probleemoplossing bieden voor SVG-bestanden die je buiten Wix maakt.