tag:computers.tutsplus.com,2005:/categories/skala-previewEnvato Tuts+ Computer Skills - Skala Preview2013-07-24T12:00:36Ztag:computers.tutsplus.com,2005:PostPresenter/mac-52266Use Skala Preview to Beam Images From Photoshop to iOS <p>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.</p>
<p><!--more--></p>
<hr>
<h2>Why It's Useful</h2>
<p>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.</p>
<figure class="tutorial_image"><a href="https://mac.tutsplus.com/?attachment_id=52275" rel="attachment wp-att-52275"><img class="alignnone size-full wp-image-52275" alt="Skala Mac iOS" data-src="https://cdn.tutsplus.com/mac/uploads/2013/07/skala_preview_in_action.jpg" data-original-url="http://cdn.tutsplus.com/mac.tutsplus.com/uploads/2013/07/skala_preview_in_action.jpg" width="600" height="400"></a><br>
<figcaption>Using Skala Preview allows for screenshots to be automatically sent from Photoshop to iOS devices. This makes designing for iOS much more streamlined.</figcaption>
</figure>
<p><strong>Skala Preview </strong>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.</p>
<p>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.</p>
<hr>
<h2>Installing Skala Preview</h2>
<p>To use Skala Preview, you must install both the Mac application and the iOS app. To install the Mac application, visit <a href="http://bjango.com/mac/skalapreview/" target="_blank">Bjango's site</a> to jump to the App Store page for Skala Preview, or search from within the App Store.</p>
<p>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.</p>
<p>Go ahead and open Photoshop as well. To get started with setting up Photoshop, choose <strong>Edit &gt; Remote Connections</strong><em>. </em>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 <em>Enable Remote Connections </em>box is checked and press okay.</p>
<figure class="tutorial_image"><a href="https://mac.tutsplus.com/?attachment_id=52277" rel="attachment wp-att-52277"><img class="alignnone size-full wp-image-52277" alt="Photoshop Remote Connection" data-src="https://cdn.tutsplus.com/mac/uploads/2013/07/Remote_Connections_and_Adobe_Photoshop_CS6.jpg" data-original-url="http://cdn.tutsplus.com/mac.tutsplus.com/uploads/2013/07/Remote_Connections_and_Adobe_Photoshop_CS6.jpg" width="584" height="303"></a><br>
<figcaption>To setup the Photoshop Remote Connection in Photoshop, choose any name and password and ensure that the box is checked below it.</figcaption>
</figure>
<p>Now, return to the Skala Preview app on your Mac. Choose <strong>Settings &gt; Photoshop Settings</strong><em> </em>and input the same details you created above in Photoshop. All that's left is to setup the iOS app.</p>
<figure class="tutorial_image"><a href="https://mac.tutsplus.com/?attachment_id=52279" rel="attachment wp-att-52279"><img class="alignnone size-full wp-image-52279" alt="Skala Preview Setup Mac" data-src="https://cdn.tutsplus.com/mac/uploads/2013/07/skala_preview_setup.jpg" data-original-url="http://cdn.tutsplus.com/mac.tutsplus.com/uploads/2013/07/skala_preview_setup.jpg" width="600" height="271"></a><br>
<figcaption>After setting up the Remote Connection Photoshop, return to the Skala Preview app on your Mac and choose <strong>Settings &gt; Photoshop Settings</strong> to input the same details you chose in Photoshop.</figcaption>
</figure>
<hr>
<h2>Setup on iOS</h2>
<p>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.</p>
<p>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.</p>
<figure class="tutorial_image"><a href="https://mac.tutsplus.com/?attachment_id=52281" rel="attachment wp-att-52281"><img class="alignnone size-full wp-image-52281" alt="Choose Connection" data-src="https://cdn.tutsplus.com/mac/uploads/2013/07/choose_connection.jpg" data-original-url="http://cdn.tutsplus.com/mac.tutsplus.com/uploads/2013/07/choose_connection.jpg" width="303" height="455"></a><br>
<figcaption>To connect to your Mac, make sure to click the monitor icon at far right and choose the name of your Mac. It's essential that both devices are on the same Wi-Fi connection</figcaption>
</figure>
<figure class="tutorial_image"><a href="https://mac.tutsplus.com/?attachment_id=52282" rel="attachment wp-att-52282"><img class="alignnone size-full wp-image-52282" alt="Allow Connection Skala" data-src="https://cdn.tutsplus.com/mac/uploads/2013/07/allow_connection_skala.jpg" data-original-url="http://cdn.tutsplus.com/mac.tutsplus.com/uploads/2013/07/allow_connection_skala.jpg" width="600" height="160"></a><br>
<figcaption>On your Mac, Skala will prompt you to accept the connection.</figcaption>
</figure>
<p>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.</p>
<hr>
<h2>Using Skala</h2>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<figure class="tutorial_image"><a href="https://mac.tutsplus.com/?attachment_id=52283" rel="attachment wp-att-52283"><img class="alignnone size-full wp-image-52283" alt="Color Accessibility" data-src="https://cdn.tutsplus.com/mac/uploads/2013/07/color_accessibility.jpg" data-original-url="http://cdn.tutsplus.com/mac.tutsplus.com/uploads/2013/07/color_accessibility.jpg" width="303" height="454"></a><br>
<figcaption>One of my favorite features of the iOS app is the ability to simulate the screen under different color conditions. These options allow you to simulate the view of those with color limitations, including various types of colorblindness.</figcaption>
</figure>
<p>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.</p>
<figure class="tutorial_image"><a href="https://mac.tutsplus.com/?attachment_id=52285" rel="attachment wp-att-52285"><img class="alignnone size-full wp-image-52285" alt="iPad Testing" data-src="https://cdn.tutsplus.com/mac/uploads/2013/07/ipad_testing.jpg" data-original-url="http://cdn.tutsplus.com/mac.tutsplus.com/uploads/2013/07/ipad_testing.jpg" width="600" height="400"></a><br>
<figcaption>Keeping my mobile devices around my MacBook while designing helps me ensure that my mobile designs look great without hours of revisions. Skala Preview is the best tool that I've found for this.</figcaption>
</figure>
<p>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.</p>
<hr>
<h2>Wrapping Up</h2>
<p>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.</p>
2013-07-24T12:00:36.000Z2013-07-24T12:00:36.000ZAndrew Childress