#FLINTO TO IOS TRIAL#
#FLINTO TO IOS PLUS#
#FLINTO TO IOS DOWNLOAD#

With both layers selected, use Align Horizontally, and Align Vertically to align them correctly to each other. Quick Note: Remember to hold the Shift key when drawing out the circle, to keep proportions. Then increase it’s size to 70 x 70px, add a 2px white border, and remove the Fill Color. Then, for the shutter button, select the Oval tool (O), draw out a circle 58 x 58px, change the Fill Color to #FFFFFF, and remove the border.ĭuplicate that shape by holding down Alt, and dragging it to duplicate. Give it a Fill Color of #303030 and reduce the Opacity to 95%.įirstly, drop in the folder icon from IconJar, and give it the colour #FFFFFF. Now onto the Control Bar for our Viewfinder screen.ĭraw a Rectangle (R) 375 x 120px and place this at the bottom of the screen. Quick Note: You can pull in any random photo from the Unsplash site, but for the next few screens, and just to keep a little uniformity, you will see I have chosen one of the categories (‘Nature’) this time. Like we did with the Welcome screen, draw out a Rectangle (R) to cover the Artboard, and then from the Craft panel on the right choose the Photos tool.

One screen down, five to go! ViewfinderĬreate a new Artboard (A), and again, choose the iPhone 6 option from the Inspector panel on the right. Group the icon, and text layers together (Cmd + G), and then use the Alignment Tools to center this new group on the Artboard. One for the app title, and the other for the subtitle.įor the title, I used the following settings: Make sure you have the shape layers selected, and not the actual folder.Īdd in a couple of Text Layers (T). Boom!ĭrag the shutter icon into Sketch, keep it at the same size, but change the colour of the icon to #FFFFFF. You will now see your icon set inside of IconJar, from where you can easily select an icon, and simply drag & drop it into your Sketch project. Give the set a name, and then browse to the (unzipped) folder where the icons are.

#FLINTO TO IOS PLUS#

Open up IconJar, and click the plus (+) icon at the top of the app to add a new set. If you haven’t downloaded the icon set yet, you can grab it here. Click on the Gradient in the Inspector Panel, and then click the plus (+) icon in the Document Gradients section to add it. Quick Note: As we will be using this gradient again on other screens in this tutorial, it would make sense to add it to the Document Gradients in the Fills panel. And add the following colour values:Īnd select Smooth Opacity in the Fills panel. Make the Gradient go from Top Left, to Bottom Right. Draw out a Rectangle (R) the same dimensions as the image, and then choose a Gradient Fill from the Inspector panel. Let’s add a gradient overlay to sit over our image. Quick Note: You can toggle the Craft panel on/off with Cmd + P, and if you want to quickly cycle through (random) Unsplash images use Shift + Ctrl + 3.

Select the Unsplash option, and click the Place Photos button. Let’s make a start on the first of those screens: Welcome ScreenĬreate a new Artboard (A), and choose the iPhone 6 option from the Inspector panel on the right.ĭraw out a Rectangle (R) to cover the Artboard (375×667), and then from the Craft panel on the right choose the Photos tool. He deserves an iOS photo app named after him, don’t you think?Īs I mentioned, we’ll be creating just 6 screens (It’s the ‘Lite’ version after all) for various parts of the app: Carl Zeiss invented the modern day camera lens. We’ll keep it simple, with 6 screens for a fictional Photo Editor iOS App called ‘ Zeiss‘. In the 1st part of this tutorial we’ll be creating the screens for our application.

#FLINTO TO IOS DOWNLOAD#

Zeiss (Lite) Icon Set: Feel free to download the icon set.Īll cool? Everything installed? Sweet! Let’s get to it!Įxplore 11,000+ Sketch Templates Designing our Screens in Sketch.Google Fonts: Download Raleway and Open Sans.One of the now, essential plugins for using with Sketch. Craft Plugin by InVision LABS: The perfect plugin to enable the use of real-data in your projects, and more.A must have, and one that we can put to good use with the icon set below. It’s perfect for storing, and referencing your icons. Iconjar: I have raved about this app before.There are a few things that you may want to grab for this tutorial (if you haven’t already) first:

#FLINTO TO IOS TRIAL#

Fire up Sketch! Don’t have a copy to hand? You can download the free trial here. Let’s put these two apps to the test shall we, as we design, and prototype an app for iOS. An application that has grown in strength in recent times. One of my favourites is Flinto (for Mac). Sketch has a plethora of companion applications to share the top table with, and there is, especially, no shortage of Prototyping applications out there to wine and dine our favourite design application.

Flinto to ios