Använd Skala Förhandsvisning till strålbilder från Photoshop till iOS

När du utformar för iOS-enheter kan det vara svårt att ständigt överföra skärmdumpar till enheten. Ange Skala Preview, en super lättanvänd applikation för att skicka dina mönster till mobila enheter. I denna handledning kommer vi igång med Skala Preview, en app som är utformad för att skicka skärmdumpar från Photoshop till din iOS-enhet.


Varför det är användbart

Att designa för iOS är radikalt annorlunda än att designa för datorer. När du utformar för dessa enheter är det viktigt att testa dina mönster på mobila enheter för att se till att användarna hittar gränssnittet enkelt att använda. Min tidigare metod för att prova detta var att spara bilder i Dropbox och ladda dem sedan i iPhone-appen. Även om detta fungerade bra tog det för många steg och var inte ett effektivt arbetsflöde.


Med Skala Preview kan skärmdumpar skickas automatiskt från Photoshop till iOS-enheter. Detta gör utformningen för iOS mycket mer strömlinjeformad.

Skala Förhandsvisning för Mac och iOS är ett utmärkt sätt att automatisera denna process. Genom att konfigurera Mac och IOS-applikationer kan du automatiskt skicka din Photoshop-duk till din iOS-enhet i realtid. Det här är verkligen ett bra arbetsflöde för mobildesigners som vill visualisera sina mönster på riktiga enheter.

Att testa på iOS-enheter är avgörande för vilken typ av mobildesign som helst. Vid utformning för iOS-enheter kan testning live hjälpa dig att visualisera hur dina mock-ups kommer att visas på riktiga enheter. Färger kan skilja sig beroende på visningstyp, och du har också ett mycket bättre intryck av storleken på element. Att utforma strikt inom Photoshop utan att testa på enheter kommer att se till att du måste göra ett antal justeringar senare.


Installera Skala Förhandsgranskning

För att kunna använda Skala Preview måste du installera både Mac-programmet och iOS-appen. För att installera Mac-programmet, besök Bjango hemsida för att hoppa till App Store-sidan för Skala Preview, eller sök från App Store.

När du har kört installationen startar du Skala Preview Mac-programmet. Första gången du kör programmet, kommer du att hälsas med en stänkskärm med korta instruktioner om att komma igång. Fortsätt och stäng den, eftersom vi kommer att täcka hela installationen i denna handledning.

Gå vidare och öppna Photoshop också. För att komma igång med att konfigurera Photoshop, välj Redigera> FjärranslutningarDu får se en ruta som dyker upp som möjliggör fjärranslutningar. Välj ett namn och ett lösenord för fjärrtjänsten och se till att Aktivera fjärranslutningar rutan är markerad och tryck okej.


För att konfigurera Photoshop Remote Connection i Photoshop, välj något namn och lösenord och se till att rutan är markerad under den.

Återgå nu till Skala Preview-appen på din Mac. Välja Inställningar> Photoshop-inställningaroch skriv in samma detaljer som du skapade ovan i Photoshop. Allt som är kvar är att installera iOS-appen.


När du har installerat Photoshop för fjärranslutning, återgår du till Skala Preview-appen på din Mac och väljer Inställningar> Photoshop-inställningar att mata in samma detaljer som du valde i Photoshop.

Inställning på IOS

Oavsett om du har en iPad eller iPhone, är "Skala View" -programmet byggt för att ta emot skärmdumpar från din Mac. Gå vidare och installera appen "Skala View" från App Store och starta den.

När du har startat iOS-appen klickar du på bildskärmsikonen längst ned till vänster och väljer namnet på din Mac. Se till att dina enheter finns på samma Wi-Fi-nätverk och du ska enkelt kunna ansluta till Mac som kör Skala Preview.


För att ansluta till din Mac, se till att klicka på skärmikonet längst till höger och välj namnet på din Mac. Det är viktigt att båda enheterna har samma Wi-Fi-anslutning
På din Mac uppmanar Skala dig att acceptera anslutningen.

När du väl har godkänt iOS-enhetens anslutning på din Mac är alla installationssteg nu färdiga. Observera att det också finns en iPad-app tillgänglig som fungerar identiskt med iPhone-appen som används i denna handledning.


Använda Skala

När du har slutfört installationsstegen ovan är Skala en bris. Appen skickar automatiskt den uppdaterade designen från din aktiva Photoshop-flik eller -fönster till iOS-enheten. Enligt min erfarenhet är det bara en liten fördröjning när det gäller att skicka uppdaterade skärmdumpar till iOS-enheten.

När du öppnar Skala View kan bilden som skickas från Photoshop vara för stor för att visas på skärmen. Om så är fallet har du alla vanliga iOS-bildnavigeringskonventioner som klämmer för att zooma eller svepa för att flytta runt vyn.

I botten av skärmen finns också en mängd intressanta alternativ för att ändra hur bilden visas. Du kan justera skärmens ljusstyrka och välja mellan olika delningsalternativ. Genom att klicka på pilen på verktygsfältet har du också möjlighet att exportera bilder till kamerabiblioteket, eller dela via e-post eller tweet.


En av mina favoritfunktioner i iOS-appen är möjligheten att simulera skärmen under olika färgförhållanden. Med dessa alternativ kan du simulera visningen av de med färgbegränsningar, inklusive olika typer av färgblindhet.

Att klicka på glasögonikonen har några bra alternativ för att simulera olika typer av färgblindhet. Att köra igenom dina skärmdumpar med det här hjälper dig att visualisera ditt gränssnitt för personer med nedsatt syn, och det är ett utmärkt sätt att garantera tillgänglighet.


Att hålla mina mobila enheter kring min MacBook under designen hjälper mig att se till att mina mobila mönster ser bra ut utan några timmars revisioner. Skala Preview är det bästa verktyget jag hittat för detta.

Ett alternativ är att helt enkelt släppa bilder i Skala Preview Mac appfönstret. Med denna inställning behöver Photoshop inte ens se din mobildesign live på en iOS-klient.


Avslutar

I denna handledning visade jag dig hur man automatiserar processen att skicka Photoshop-dokument till IOS. Oavsett om du dabblar med iOS-appdesign eller testa mobila webbplatser, använder en app som Skala en stor hjälp till designprocessen. Kraften att automatiskt skicka uppdaterade skärmdumpar av din utveckling kan hjälpa dig att visualisera din design på mobila enheter.