Share
Wat je gaat creërenOoit al eens een app-interface PSD willen veranderen in een volledig geanimeerde demo voor uw klanten of site? Blijkbaar kun je dat ook met Photoshop doen.
In deze zelfstudie ontwerpen we een iPhone-app met eenvoudig nieuws en animeren deze vervolgens voor de presentatie van de klant en exporteren deze als een GIF-bestand. Je leert alles wat je nodig hebt om van een idee tot een geanimeerde demo te gaan, allemaal in een recente versie van Photoshop.
We hebben Photoshop CC in deze zelfstudie gebruikt, maar CS5 of 6 zou ook goed kunnen werken. Je hebt ook de volgende stockfoto nodig om deze tutorial te voltooien. Download ze voordat je begint of vervang ze door een vergelijkbare afbeelding en pas de stappen dienovereenkomstig aan:
Eerst gaan we de interface van de app ontwerpen. Maak een nieuw bestand (Besturing N) met canvasgrootte 640 px door 1136 px, dan klikken OK.
Als u in plaats daarvan al een app-interface hebt ontworpen, kunt u deze openen in Photoshop en vervolgens naar de Tik deel van deze tutorial.
Klik Bekijken> Nieuwe gids om een nieuwe handleiding te maken, die ons helpt bij het nauwkeurig plaatsen van GUI-elementen. Zet het op Verticaal met positie 15 px.
Voeg aan elke zijde van het canvas nog een verticale hulplijn toe met een afstand van 15 px tussen elke hulplijn.
Teken een andere gids, deze keer horizontaal om 40 px, 128 px, en 220 px.
Voeg een statusbalk toe aan het bovenste deel van je canvas. Als je een gedetailleerde routebeschrijving nodig hebt, bekijk dan de statusbalk van onze eerdere tutorial. Hoe ontwerp ik een iOS 7 email-app in Photoshop?.
Maak vervolgens een nieuwe laag en selecteer vervolgens het tweede gedeelte en vul het dan in een grijze kleur, # 2c3137.
Voeg de titeltekst van de app toe aan het bovenste gedeelte van de interface.
Voeg een logo toe aan de titel. Ik heb gewoon een aantal eenvoudige rechthoeken voor het logo getekend, maar als je een bestaand app-pictogram hebt, kun je het gewoon in een nieuwe laag importeren.
Teken een vergrootglaspictogram met een combinatie van twee cirkelvormen en een afgeronde rechthoek met dezelfde kleur als het app-logo. Plaats deze aan de rechterkant van de app.
Teken aan de andere kant vier afgeronde rechthoeken voor het optiepictogram.
Maak een nieuwe laag met een rechthoekige sectie die past onder de titelbalk. Vul het volgende gedeelte met een grijze kleur, net als het vorige gedeelte.
Voeg een laagmasker toe aan de laag en voeg vervolgens een zwart-wit verloop toe totdat de onderkant vaag is.
Voeg een menu toe met behulp van de Type Tool, met de nieuwscategorieën. Stel het eerste menu in - in dit geval, de Allemaal optie - om vetgedrukt te zijn om aan te geven dat de categorie actief is. Dupliceer het (Besturing J) en stel vervolgens een ander menu in - in dit geval, Sport-om vet te zijn, nogmaals om aan te geven welke categorie is geselecteerd.
Nu, van de Lagen paneel, stel de Sport menu ondoorzichtigheid naar 0% om het te verbergen, zoals we het willen Allemaal categorie moet eerst vetgedrukt zijn.
Voeg een dunne pijl toe voor menunavigatie, gemaakt van afgeronde rechthoeken.
Voeg nog een pijl toe aan de andere kant.
Vul de rest van de interface met de grijze kleur. Zorg ervoor dat u deze achtergrond onder alle GUI-elementen plaatst.
Teken een lichtgrijze rechthoek voor de achtergrond van de afzonderlijke nieuwssectie.
Van toepassing zijn Beroerte, Inner Glau, en Outer Glow om meer contrast toe te voegen aan het nieuwsgebied. Dubbelklik op de laag en gebruik vervolgens de volgende instellingen van de onderstaande schermafbeeldingen:
Teken een witte afgeronde rechthoek op het bovenste gedeelte van de vorige vorm. We zullen hier een nieuw beeld plaatsen.
Van toepassing zijn Innerlijke gloed in de witte vorm met de volgende instellingen:
Selecteer een foto uit de Tuts + Stock Photo-set die u eerder hebt gedownload of een andere foto die u wilt gebruiken en plaats deze over de witte afgeronde rechthoekige vorm.
Raken Ctrl-Alt-G om de geselecteerde fotolaag in een uitknipmasker om te zetten. De foto gaat automatisch naar binnen laag erachter. En, hier is wat je ziet: een perfect geplaatste foto bovenop het individuele nieuwsgebied.
Voeg tekst toe voor de nieuwsinhoud. Zorg ervoor dat u contrast toevoegt aan de nieuwstekst voor een betere leeservaring door het lettertype, de kleur en de grootte te variëren.
Laten we pictogrammen toevoegen aan het nieuwselementontwerp. Teken twee kleine afgeronde rechthoeken zonder Vullen en 1 pt witte lijn.
Dubbelklik op de laag en voeg vervolgens de laagstijl toe Kleurbedekking. Gebruik # 708196 voor zijn kleur.
Herhaal het vorige proces, maar deze keer gebruikt een combinatie van een afgeronde rechthoek en een rechthoek.
Voeg een kleine cirkelvorm toe. Nu hebben we een tagpictogram. Zoet!
Tot dusverre is dit ons app-ontwerp met een vergroting van 100%.
Voeg andere afzonderlijke nieuwsartikelen toe aan de app door de lagen van nieuwselementen te dupliceren en ze op de juiste manier aan te passen.
Voeg groter nieuwsgebied toe. Dit wordt getoond wanneer een individueel nieuws is geselecteerd.
Zet alle individuele nieuwselementen en grote nieuwsverhalen in afzonderlijke laaggroepen. U wilt zeker weten dat elke laag zorgvuldig in een lagengroep wordt geplaatst, afhankelijk van het element.
U wilt bijvoorbeeld elke laag die de eerste afzonderlijke nieuwssectie samen in een lagengroep heeft geplaatst en de elementen voor nieuws-artikelen op volledig scherm in andere groepen. Dit zal je helpen gemakkelijker te werken tijdens het maken van de animatie.
Voorlopig zullen we deze grote nieuwssectie niet gebruiken. Zet de dekking dus op 0%.
We moeten nu de kraanindicator ontwerpen. Maak een nieuwe lagengroep en geef deze een naam tik. Teken vervolgens een witte cirkelvorm. Stel zijn ondoorzichtigheid naar 50%.
Dupliceer de cirkelvorm door op te drukken Besturing J. Maak het groter, stel in beroerte naar 3 pt met een witte kleur en verwijder de Vullen kleur.
Voeg nog een cirkelvorm toe, deze keer dunner. Stel de slag in op 2 pt.
Verberg alle lagen in de tiklaaggroep die we zojuist hebben gemaakt, omdat je niet wilt dat de tikken verschijnen wanneer de gebruikersinterface voor het eerst wordt geladen, maar in plaats daarvan alleen de lagen weergeeft wanneer de animatie een overgang naar een geselecteerd element maakt.
Nu zijn we eindelijk klaar om te beginnen met het bouwen van onze UI-animatie. Open de Tijdlijn paneel en maak vervolgens een nieuw kader.
Maak nog een nieuw frame.
Nu is het tijd om de groep met tapelagen te onthullen. Wanneer u een schuifscène weergeeft, verbergt u de twee gestreept cirkels en gaan we deze voorwaarde gebruiken om een scrolbeweging aan te geven. Het lijkt meer op een ononderbroken lijn, terwijl de buitenste streepcirkels een rimpelig uiterlijk geven dat meer overeenkomt met een enkele tik om een item te selecteren.
Wijzig de duur in 1 seconde voor eerste frame en 0,2 seconden voor tweede frame.
Voeg nog een frame toe.
Activeer de Tik laaggroep en alle lagen van het nieuwsraster. Gebruik Verplaats gereedschap om ze omhoog te verplaatsen in je lijst met lagen.
Als u automatisch een vloeiende animatie wilt maken tussen het huidige en het vorige frame, klikt u op Tween van Tijdlijn paneel menu.
Stel de tween in op 5 voor het toegevoegde frame.
Nu hebben we een animatie waarin het nieuwsraster op elk frame omhoog beweegt.
Als u denkt dat de animatie te snel is, kunt u deze langzamer maken door alle frames te selecteren en de duur in te stellen 0,2 seconden.
Test de animatie door op het pictogram Afspelen in de Tijdlijn paneel. Vergeet niet om de animatie in te stellen Voor altijd; op deze manier wordt de animatie gelust.
Onze huidige animatie bevat het nieuwsrooster dat omhoog gaat. In het volgende frame moeten we het terugzetten naar de vorige staat, zodat het naadloos aansluit op het eerste frame. Kopieer hiervoor het tweede frame en plak het op de laatste positie door te kiezen Plakken na selectie in het dialoogvenster.
Pas de Tween opdracht opnieuw om een nieuwe animatie te maken tussen de laatste en de voorlaatste frames.
Voeg een nieuw kader toe en verberg de tikindicator.
Tot dusverre is dit de animatie die we krijgen, wat ons een eenvoudige scrolinterface geeft.
Nu is het tijd om de selectie van een link in het menu te animeren. Maak eerst een nieuw frame. Stel in dit frame de ondoorzichtigheid tekstmenu met de geselecteerde vetgedrukte variant van Allemaal uit het menu ingesteld op 0% en Sport'sde geselecteerde transparantie van de variant is ingesteld op 100%.
Activeer de Tap-laaggroep en onthul alle lagen. Wijzig de frameduur in 0,2 seconden.
Maak een nieuw frame met een duur van 0,1 seconden. Deze keer verbergt de dunste gestreept cirkel.
Voeg nog een frame toe en verberg de volgende gestreept cirkel.
Voeg een nieuw frame toe en verberg de groep met tiklagen.
Maak een nieuw frame en stel de ondoorzichtigheid van elk nieuwsverhaal in het raster zonder het sportlabel 0%.
Sleep de afzonderlijke sportnieuwsverhalen, nog steeds in dit frame, omhoog in het raster en vul lege velden erboven.
Tween tussen huidige frame en de vorige. Voor snellere animatie, stel toegevoegde frames in 3.
Stel de duur in het laatste frame in 2 seconden.
Voor deze tik is dit de animatie die we hebben.
Vervolgens gaan we een van de nieuwsartikelen selecteren en deze op het volledige scherm weergeven. Maak eerst een nieuw frame met duur 0,2 seconden en onthul vervolgens alle lagen in de groep Taplaag.
Voeg een nieuw frame toe en stel de duur ervan in op 0,1 seconden. Verberg de dunste cirkelslag.
Voeg nog een frame toe en verberg vervolgens de volgende gestreept cirkel.
Voeg nog een frame toe met duur 0,1 seconden. Verberg de groep Tiklaag en maak een nieuw kader. Onthul het nieuwsgedeelte dat we eerder hebben gemaakt Deel 1 Stap 28 door zijn ondoorzichtigheid naar 100%. Verberg het kleine nieuwsraster door het in te stellen ondoorzichtigheid naar 0%.
Voeg tween-animatie toe tussen het huidige frame en de vorige.
Dit is wat we hebben voor deze animatie.
Van Tijdlijn paneel, klik Vlakkaders in lagen afvlakken.
Elk frame wordt omgezet in een vlakke laag. Als je 33 frames hebt, krijg je ook 33 platte lagen: laag Frame 1 overgenomen uit de inhoud van frame 1, laag Frame 2 genomen van frame 2, enzovoort.
Selecteer alle kaderlagen in Lagen paneel.
Sleep de lagen naar de iPhone-foto die u eerder hebt gedownload.
In Tijdlijn paneel, selecteer Maak kaderanimatie en klik vervolgens op Nieuw frame knop.
Zorg ervoor dat alle lagen nog steeds geselecteerd zijn. Raken Controle-T om een transformatie uit te voeren. Houden Controle en sleep vervolgens elke hoek en plaats ze in de hoek van het scherm.
Maak een nieuw frame voor elke laag. Zet laag Frame 1 in het eerste frame, laag Frame 2 in tweede frame, laag Frame 3 in derde frame, enzovoort. U wilt ook de duur van elk frame aanpassen. Zorg ervoor dat de lus wordt ingesteld op Voor altijd, zodat de animatie blijft doorlopen.
Kijk naar de afbeelding hieronder voor een voorbeeld. Laag Frame 23 wordt onthuld in frame 23. Laag Frame 25 wordt onthuld op frame 25, enzovoort. Ga door voor elk frame.
Het is tijd om het resultaat te exporteren als geanimeerd GIF-bestand. kiezen Bewaar voor web in het menu Bestand en selecteer GIF als bestandstype. Speel rond met beschikbare instellingen om de optimale bestandsgrootte te krijgen. Test het resultaat van de animatie door op de knop Afspelen te klikken. Zorg ervoor dat je het instelt Looping opties naar Voor altijd.
En dat is het: u hebt een gebruikersinterface voor een demo-app ontworpen, deze geanimeerd en de animatie in een iPhone-afbeelding geplaatst om de animatie eruit te laten zien alsof deze op een echt apparaat wordt uitgevoerd.
Ik hoop dat je deze tutorial nuttig hebt gevonden. U kunt de stappen aanpassen om te werken met elk type app dat u wilt demonstreren en u kunt een andere apparaatafbeelding gebruiken om bijvoorbeeld een tablet-app of website te laten zien. U kunt ook andere typen multi-touch-interactie proberen in de uiteindelijke presentatie, zoals tilt-scrolling of pinch-to-zoom, als u de animaties wijzigt.
Als u uw eigen demo-animaties maakt met deze zelfstudie, willen we ze graag in de onderstaande opmerkingen zien!
Accentsconagua