Cocoa and Swift make a great team for building Mac desktop apps. Cocoa is the framework in which macOS is written, and Swift is the language that makes working with Cocoa classes and APIs easier than ever before. Their compatibility makes Swift a convenient and powerful tool to integrate into your Cocoa app development workflow.
Here Todd Perkins walks you through the steps to creating macOS applications with this powerhouse combo. He'll take you through the basic concepts behind Cocoa, Swift 3, and the development environment known as Xcode, and some important concepts, such as the Model-View-Controller design pattern, interaction, and delegation.
Then you'll go straight into development. Learn how to create user interface elements and connect them to code, work with Cocoa bindings and key-value coding, and debug your applications and submit them to the Apple Store for distribution.
Instructor. Todd Perkins is a developer who specializes in iOS. He's developed over a dozen popular apps and games. He has published over 50 books and video courses that cover topics such as programming for nonprogrammers and game development. He is also a Sun Certified Java Developer (SCJD), and holds a bachelor's degree in software development from Western Governors University. When he's not building applications or courses, he hosts the podcast Try, Try Again - a Movie Club, and plays a healthy amount of video games.
Todd lives in California with his family. By: Todd Perkins course. 1h 45m 34s. 11,027 viewers.
Nov 15, 2011 - Since Xcode 4.4 Icon Composer is no longer the recommended way to create icons and is no longer included in the standard install of Xcode.
Course Transcript - Setting an icon three application is actually a fairly straight forward process. To do it, select Assets.xcassets in your main group folder, in your project. From there, click on app icon, and you should see little squares that represent your icon images.
Here we have one x and two x squares for every point size. The two x squares are for retina displays that have a more dense pixel distribution. Those sizes must be twice the point width and twice the point height of what we see in the root size. For example, it says 16 point right here and at one x or at standard resolution, 16 points is the same as 16 pixels. But, on a retina display, that has twice the pixels horizontally and vertically, that would be twice 16 points wide and high, so it would be 32 pixels wide by 32 pixels high. So for 32 points, the one x is 32 by 32, and a two x is going to be 64 by 64. So really all you need are images that are the right size.
You also, don't have to, but you can save quite a bit of time, if you name them appropriately. I'll tab over to finder where I have some icon images. For those of you who don't have access to the exercise files, you can create as many or as few of these as you want to see this exercise in action. The way that I name these files is icon under score 16 x 16, and then for the two x version, same name with @ two x at the end. That's the naming convention I followed for all of these.
The great thing about following the convention is that you can actually select all of these, and then just drag and drop them into app icon. Now when you do that, a lot of the time it works pretty well. It looks like just about all of the images went to the right locations, except for this unassigned one, icon 512 by 512. So for that, I can simply click and drag that into the one x slot for Mac 512 points. You can also drag images from finder one by one into these squares if you want, as well. So the reason why I gave these icons these numbers is because I want you to see on my screen where the different icons apply.
Normally when you develop an application, your going to want a similar, or even the same icon for each size. Just a better high quality version of the icon as the icons are at higher sizes. Let's build this project, So, command, B to build.
And then under products, I should see distributing.app. You'll notice that the icon has actually changed to my icon here, it's actually showing 512. Let's show this in finder by right clicking it and choosing show in finder. So here's my application.
In my finder window I can see right now it's using the 16 point icon. But in this preview window, I see the 256 point icon. I can click and drag this and see if that changes anything, and right now it doesn't. Well, what happens if I choose a different way to view the files?
Change the window size, go all the way to the right, and then I'm going to view this as icons. So I click the icon button, and now I am seeing the 128 version. Then if I go to cover flow, I'm seeing 256. But I can actually expand it, to go to 512, if I make it bigger. So when you are creating an application, you want to provide all of these image files. If you only provide a low resolution file, your going to see the ugly low resolution one, when you scale it up, and it's going to look fuzzy. So remember to create image icons that are the right size, so that you can control how your icons look, at every size and every possible view in Mac OS.
And to set the icons, simply find your image files and then click and drag them into your app icon section in Next Code. Practice while you learn with exercise files. Watch this course anytime, anywhere. Course Contents. Introduction Introduction.
1. Get Started 1. Get Started. 2. Core Cocoa Skills 2. Core Cocoa Skills. 3.
Delegation 3. Delegation. 4.
Create User Interfaces 4. Create User Interfaces. 5. Arrange User Interfaces 5.
Arrange User Interfaces. 6.
Use Data Controls 6. Use Data Controls.
7. Debug and Troubleshoot 7. Debug and Troubleshoot. 8.
Distribute an Application 8. Distribute an Application. 9. Finishing Touches 9. Finishing Touches.
Conclusion Conclusion.
In this tutorial, I’m creating an icon for a message/chat application, I’m using a “postman” bird as starting point. This tutorial gives you a insight in the steps to take from a initial sketch to a vectorized icon that is ready to be used. Resources and articles that are useful are listed at the end in References. Start sketching While sketching an idea for an app, you need to have a little concept in your head.
Try to analyze this concept to the bare elements so you can start sketching with a minimal set of elements. The less elements, the better you can focus on the primary idea.
It’s a drawing process I try to focus on. Another important thing is trying in being original in your first concept. This is not easy as their are so many ideas and good sketches around us (think of the excellent quality platforms like are offering us).
While there are many good sketches and icons around, you’re not seeing them in the applications stores. It’s becoming a rare symptom to find good, illustrative application icons. The main reason is that it takes time to go from a simple, good idea and sketch to a ready-to-use application icon and the process of that is quickly overlooked. To be original in your ideas and sketches, one advice i keep following is not looking at other sketches before or while I’m drawing myself. It’s not helping me in accomplishing the idea in my head so I don’t do this anymore.
For this tutorial, I want to sketch a beak of a bird because the focus of a message application is what i want to accomplish when people give it a quick look. Not the full bird, but just the part that is important to convey the message. I want to keep the sketch as simple as I can, so I’m not going to sketch much detail.
Once you have enough sketches and you have one sketch that’s best representing the idea, I stop the sketch phase and go on with doing research. Impress your audience with animated websites and web presentations. With, we don’t make you start from an empty slate. All you have to do is to pick the elements you like best and combine them.
Each slide has been carefully crafted to satisfy three key criteria: aesthetic, function and usability. That way you know every element works together seamlessly while enhancing the impact of your content. Collect your sketches and pick one sketch to start from. Doing research Doing research means collecting ideas and documents to start from (with templates, sometimes PS or AI actions can come in handy, read the device guidelines (iOS, Android, Windows, ), define your target devices: this is usually defined in the project briefing, next create a mood-board to collect all the images and references that inspire you, read books and articles about the subject) – I’m creating my moodboards with (desktop + mobile), it’s a great app to collect screenshots in your mood-board. Creating a mood board for inspiration on color use, line use, shape and illustrative direction. Starting to vectorize in Illustrator Step by step instructions on how to vectorize your imported sketch.
Step 1: setting up your workspace Create your workspace in Adobe Illustrator Start Illustrator (CS6) and choose New Document cmd + N. For this tutorial I’m setting the dimensions to 1024 x 1024 pixels, the highest number for the icon dimensions. For this tutorial, I’m targeting the iOS apps, so I’ll stick to the. Start by selecting 1 art board , later on in this tutorial, we can add art boards for different dimensions of the icon.
We will now set the grid to pixels. Go to Preferences Guides and Grids and set the Gridline to be 10px with 10 subdivisions then go to View Show Grid then View Snap to Grid. Arrange your workspace by selecting Window Workspace Essentials to make sure all panels are closed and you can use the maximal screen view to draw the shapes. Create a new document, set the dimensions and colorspace. Step 2: importing your sketch Analyze your sketch Go to File Place and select your sketch to import it.
Choose Embed in the Linked File panel on top to embed the artwork in your Illustrator file. You can eventually reduce the opacity of the layer to 50%.
Rename the layer to “sketch” and lock it by clicking the lock icon next to the eye icon. Create a new layer on top of the “sketch” layer that you will use to draw the shapes. Select a red color swatch that stands out so you can see clearly what you are drawing.
It’s a good idea to analyze your sketch for a couple of minutes and think of the basic geometrical shapes you can use to outline the artwork and then decide whither using the pen tool or combining shapes (circles, rectangles, triangles, curves, etc.). Look at the following scheme: Analyze your sketch for a couple of minutes and split it into geometrical shapes. Step 3: place each element on it’s own layer Organize your file Once you are ready to start drawing, organize your file and place every element on a separate layer and name each layer to the element. You should have following layers in stacking order:. The Cap layer;.
The Hair layer;. The Eyes layer;. The Beak layer;. The Neck layer;.
The Head layer;. The background layer;. The Sketch layer.
Every element on its layer in stacking order. Step 4: combining shapes Using the Shape Builder Tool To combine certain shapes, there’s a handy tool in Illustrator to replace the Pathfinder tool, it’s called the “Shape Builder Tool” Shift + M, it lets you combine, subtract and divide shapes but more intuitive. In case you want to combine the left and the right shape, select the shape and the Shape Builder tool from the tool palette and click and drag to the other part, you see a plus sign indicating that the shape will be added to the current shape, pressing the Alt key will show a minus sign, indicating the shape will be subtracted from the current selected one. Combining shapes with the Shape Builder Tool. Step 5: coloring your artwork Limit the amount of colors Once the basic shapes are ready, choose a color palette to color the figure. I was inspired by the iOS 7 color palette and distilled a few colors from it and combined them with a few other colors I liked. Try to limit your palette as much as possible for clarity.
Inspired by the iOS 7 color palette. This is what the basic colored figure looks like once you color the shapes. In this case, I kept the left and right part, and gave the left part a tint of 75% of the color I used 100% in the right part. This way you can give your artwork some depth without having to use drop shadows.
Use the Color Guide Window Color Guide Shift + F3 to experiment with different tints of a color. In the Color Guide palette, click the upper right icon to “Show Options” to expand and see the different tints. Coloring your artwork with limited color set. Step 6: adding details Giving character to the bird Take the illustration to the next level by adding more detail to the bird: think of the eyebrows, subtle shadows in the eyes to give some depth, play with different colors to see what gives the best results. Adding detail is always a bit dangerous because you can add so much that you loose track of the “whole picture” and because it takes a lot of time to do (at least for me). In this example, I will limit the amount of detail, I’m going to stick to the more flat style of the icon which I think is perfect for the application style. To let the character pop out a bit more, use the Appearance palette Windows Appearance.
Make a shape of the whole figure by combining the shapes and put this shape in the background on top of the circle. Give this a white fill via the Appearance Palette and a dark red Stroke of 6pt. Eventually give the shape a slightly light drop shadow by selecting the shape and going to the Effect menu under in the Palette and choose Stylize Drop Shadow.
Fill in the values as shown in the figure. Adding details with color tints. Adding a drop shadow to the figure with effects.
Assembling all elements Step 7: open a template or make one The iOS icon template I’m using the iOS 7 App Icon Template by Michael Flarup, a great template btw, you can find the link in “References” at the end of this tutorial. Watch a good tutorial on how to use this template on or on the website. Simply put: all icon formats are automatically generated for you by Photoshop actions.
Isn’t that great!? The only thing we have to do, is make sure the illustration is well placed on the correct layer in the Photoshop and off we go! Open the icon iOS template and place your artwork. Delivering the icon Step 8: automating the icon generating process Using iOS icon template Use the Photoshop actions coming with the template to generate all the different icon formats. Click the “Export Icons (Squared)”, you’ll see the preview pane and hit “Save”.
This will save all the icons in a folder. These are now ready to use. Use the Photoshop action to generate the icons from iOS template. It’s always a good idea to read the device/OS guidelines before starting to submit your app to the store. References.
iOS 7 colors.