When you're designing for iOS devices, it can be cumbersome to constantly transfer screenshots to the device. Enter Skala Preview, a super easy to use application for sending your designs to mobile devices. In this tutorial, we'll get started with Skala Preview, an app designed to send screenshots from Photoshop to your iOS device.
Why It's Useful
Designing for iOS is radically different than designing for computers. When you are designing for these devices, it's critical to test your designs on mobile devices to ensure that your users will find the interface easy to use. My previous method to try this out was to save images in Dropbox and then load them up in the iPhone app. Although this worked great, it took too many steps and wasn't an efficient workflow.
Skala Preview for Mac and iOS is a great way to automate this process. By setting up the Mac and iOS applications, you can automatically send your Photoshop canvas to your iOS device in realtime. This is truly a great workflow for mobile designers looking to visualize their designs on real devices.
Testing on iOS devices is essential for any type of mobile design. In designing for iOS devices, testing live helps you to visualize how your mock-ups will appear on real devices. Colors can differ according to display type, and you also have a much better impression of the size of elements. Designing strictly within Photoshop without testing on devices will ensure that you'll have to make a number of adjustments later.
Installing Skala Preview
To use Skala Preview, you must install both the Mac application and the iOS app. To install the Mac application, visit Bjango's site to jump to the App Store page for Skala Preview, or search from within the App Store.
After running the installation, start the Skala Preview Mac application. The first time that you run the application, you'll be greeted with a splash screen with brief instructions on getting started. Go ahead and close it, as we'll be covering the complete installation in this tutorial.
Go ahead and open Photoshop as well. To get started with setting up Photoshop, choose Edit > Remote Connections. You'll see a box pop up that allows for remote connections. Choose any name and a password for the remote service and make sure the Enable Remote Connections box is checked and press okay.
Now, return to the Skala Preview app on your Mac. Choose Settings > Photoshop Settings and input the same details you created above in Photoshop. All that's left is to setup the iOS app.
Setup on iOS
Whether you have an iPad or iPhone, the "Skala View" app is built to receive screenshots from your Mac. Go ahead and install the "Skala View" app from the App store and launch it.
After launching the iOS app, click the monitor icon at bottom left and choose the name of your Mac. Make sure that your devices are on the same Wi-Fi network and you should be able to easily connect to the Mac running Skala Preview.
Once you've accepted the iOS device's connection on your Mac, all of the setup steps are now complete. Note that there is also an iPad app available that works identically to the iPhone app used in this tutorial.
Using Skala
Once you've completed the setup steps above, using Skala is a breeze. The app will automatically send the up to date design from your active Photoshop tab or window to the iOS device. In my experience, there is only a slight lag in sending up to date screenshots to the iOS device.
When opening Skala View, the image sent from Photoshop may be too large to display on your screen. If this is the case, you have all of the standard iOS photo navigation conventions like pinching to zoom or swiping to move around the view.
The bottom of the screen also features a variety of interesting options for changing how the image is displayed. You can adjust the brightness of your screen, and also choose from a variety of sharing options. By clicking the arrow on the toolbar, you also have the option to export images to the camera library, or share via email or tweet.
Clicking the eyeglasses icon has some great options to simulate the various types of color blindness. Running through your screenshots with this will help you visualize your interface for those with visual impairments, and that's a great way to ensure accessibility.
An alternate option is to simply drop images into the Skala Preview Mac app window. With this setup, Photoshop isn't even required to view your mobile designs live on an iOS client.
Wrapping Up
In this tutorial, I showed you how to automate the process of sending Photoshop documents to iOS. Whether you're dabbling with iOS app design or testing mobile websites, using an app like Skala is a huge help to the design workflow. The power of automatically sending up to date screenshots of your development can help you to visualize your design on mobile devices.
