Share
Laten we een geanimeerde preloader-gif maken voor uw volgende UI-project. U hebt de Extended-versie Photoshop CS3 of hoger nodig.
We gaan een kleine geanimeerde gif maken die kan worden gebruikt voor een veelheid aan widgets, op elk moment dat ajax-inhoud wordt aangevraagd, bestanden worden geüpload, wat je maar wilt. Voel je vrij om je eigen stijlen en variaties naar de loader te mixen terwijl we verder gaan. Er zijn drie belangrijke secties die we gaan ondernemen:
Klaar. Set. Gaan…
Begin met het instellen van de canvasgrootte en voeg een snelle achtergrond toe om te beginnen.
Alleen voor de kicks voegen we een gevoerde patroon toe aan onze achtergrond en beginnen we aan de loader.
Maak een nieuw transparant document: (7px bij 7px). Teken een diagonale lijn met een 1px zwart potloodtool (klik op de pixel linksboven, houd shift ingedrukt en klik op de pixel rechtsonder)
Definieer en benoem het patroon (Wijzig menu> Patroon definiëren).
Als dat is gebeurd, springt u terug naar het originele document en maakt u een laagstijl van 'Patroonoverlay' op onze grijze achtergrondlaag: (Laagmenu> Laagstijl> Patroonoverlay). Kies je patroon uit het patroonvak en verlaag de dekking (ik heb 20% gebruikt).
We gaan een paar markeringen maken die als leidraad zullen dienen om ons te helpen - we zullen het "Transform Again" -commando gebruiken om de dingen te versnellen.
Teken een verticale witte lijn van 1 px met de lijntool op uw document:
Om ervoor te zorgen dat het in het midden is uitgelijnd, selecteert u zowel de laag als de achtergrondlaag, pakt u het gereedschap Verplaatsen en klikt u op de optie 'Horizontale vlakken uitlijnen', zoals:
Draai de lijn 45 ° (selecteer de regel Wijzig menu> Vrije transformatie || Bediening / Opdracht + T)
Selecteer Wijzig menu> Transformeren> "Transformeer opnieuw" terwijl u de "Optie / Alt" -toets ingedrukt houdt (Command / Control + Option / Alt + Shift + T)
Voer die opdracht meerdere keren uit totdat de lijn helemaal rond is gedraaid, zoals:
Met dezelfde techniek als hierboven uitgelegd, gaan we een paar kleine maatstreepjes toevoegen op elke rasterlijn om de loader rond te laten draaien ... Hier gaat.
Voeg enkele hulplijnen toe waar u wilt dat uw eerste "vinkje" verschijnt (zorg ervoor dat uw hulplijnen op hele pixels staan, splits geen pixels).
Maak een afgeronde rechthoek met een straal van 1 px in onze richtlijnen (zorg dat u de muisaanwijzer hebt ingeschakeld voor hulplijnen: menu Weergave> Uitlijnen)
Gebruik het gereedschap Direct selecteren om de onderste hoeken (knopen) van onze rechthoekige vorm naar binnen te verplaatsen, zodat de vorm smaller wordt.
Gebruik dezelfde 'Transform Again'-truc als hierboven, om de vorm helemaal rondom onze maatstreepjes te dupliceren (zorg dat bij het draaien van de 45 ° het transformatiepunt in het midden van ons raster staat, niet in het midden van de rechthoekteken vorm, waar het standaard wordt gebruikt).
Selecteer Wijzig menu> Transformeren> "Transformeer opnieuw" terwijl u de "Optie / Alt" -toets (Command / Control + Option / Alt + Shift + T) ingedrukt houdt totdat het vinkje helemaal is gekopieerd. Het zou er zo uit moeten zien:
Laagcontrole: zorg ervoor dat uw lagenpaneel er zo uitziet:
Oef. We hebben de pre-belader-vormen allemaal gemaakt, nu gaan we een aantal laagstijlen toevoegen om de dingen wat op te fleuren. Zoals gewoonlijk, zout naar smaak. We gaan laagstijlen toevoegen die allemaal te vinden zijn in "Laagmenu> Laagstijlen".
Voeg een "Color Overlay" -laagstijl toe aan de maatstreeplaag (ik gebruikte # 242424).
Voeg een "Drop Shadow" -laagstijl toe aan de tekenlaag:
Voeg een "Inner Shadow" -laagstijl toe aan de tekenlaag:
Je loader zou er nu als volgt uit moeten zien:
Er zijn een paar manieren waarop we dit volgende stuk kunnen aanpakken, maar om het eenvoudiger te maken, gaan we onze vinkje vijf keer dupliceren en vervolgens alle teken uit de vorm verwijderen die niet tot die specifieke vormlagen behoren. We willen geen overlappende tiktekens van lagen hieronder, omdat de laagstijlen die we zullen toevoegen, worden gestapeld, waardoor overbelichte effecten worden veroorzaakt.
Dupliceer viermaal je basistekenlaag en begin met het verwijderen van vinkjes op elk van de lagen totdat je uiteindelijk het volgende ziet:
U kunt het gereedschap Direct selecteren gebruiken om de vinkjes uit elk van de lagen te verwijderen.
Nu voegen we een aantal stijlen toe aan elk van de afzonderlijke vinkje-lagen die we hebben gescheiden. Ik verwijs naar mijn eigen laagnamen.
Voeg de laagstijl 'Outer Glow' toe aan de laag met de naam 'Shine-Active':
Voeg aan dezelfde laag de laagstijl "Inner Glow" toe / wijzig deze:
Voeg vervolgens de laagstijl 'Kleuroverlay' toe / wijzig deze (ik gebruikte # 0087c6):
Aan de laag met de naam "Shine-Fading1" voegt u exact dezelfde stijlen hierboven toe, waarbij u de laagstijl "Outter Glow" weglaat:
Aan de laag met de naam "Shine-Fading2", voegt u de laagstijl "Inner Shadow" toe of wijzigt u deze:
Voeg aan dezelfde laag de laagstijl "Inner Shadow" toe / wijzig deze (ik gebruikte # 0087c6).
Voeg vervolgens aan de laag met de naam "Shine-Fading3" de laagstijl "Inner Shadow" toe / wijzig deze (let ook op de wijziging in dekking):
Je loader zou er nu ongeveer zo uit moeten zien (tweak layer-stijlen naar wens):
Oké, we hebben de basisstijlen ingesteld, nu is het tijd om de lagen een hele stapel te dupliceren (wat het animeren in een handomdraai zal maken) en ons animale .gif te maken
Groepeer alle lagen waaruit ons vinkje bestaat (markeer ze allemaal + Laag-menu> Groepslagen)
Dupliceer de hele groep en draai deze vervolgens 45 ° (Wijzig menu> Vrije transformatie). Herhaal stap 2 totdat je het vinkje helemaal hebt rondgedraaid (je hebt in totaal acht groepen).
Je loader zou er ongeveer zo uit moeten zien:
Oke, onze lagen zijn allemaal ingesteld en we zijn klaar om te animeren. We houden vast aan regelmatige beeld-voor-beeld-animatie, hoewel we dezelfde dingen zouden kunnen bereiken met de tijdlijn-gebaseerde animatie.
Open het animatiescherm: (Venster> Animatie). Schakel alle selectiegroeplagen uit behalve de eerste en klik vervolgens op de knop "Geselecteerde frames dupliceren" in het animatiescherm.
Schakel de eerste gegroepeerde laag uit en schakel de tweede gegroepeerde laag in.
Herhaal de vorige stap voor elk van de groepslagen. Markeer alle frames in uw animatielaag (Shift + klik op elk frame) en stel de frameduur in op 0,1 sec
Kies Bestand> Opslaan voor web en apparaten en gebruik de volgende instellingen voor uw geanimeerde .gif
Open uw .gif in een webbrowser en bewonder uw nieuwe fancy loader! En als laatste een ijsje.
Dat is het. Ik hoop dat je het leuk vond om de loader te maken! Het was leuk om op te zetten. Upload en link naar enkele van je creaties in de comments en stel je eventuele vragen.
Accentsconagua