articles on

iOS7 UI Effects in Photoshop and After Effects

iOS7 UI Effects in Photoshop and After Effects

With the announcement of iOS7, Apple revealed a completely new UI for their mobile OS. With the super flat design and thin fonts, Apple said that the design would be adaptable to apps by making some of the basic UI elements transparent, therefore, some of the colors of your apps content would bleed through and define how iOS7 basic components would influence the overall appearance. Another important detail of the UI was that with the transparency a blur effect was applied, similar to Windows Vista and their Aero design. With that in mind, I decided to see how to create and share a super simple workflow to achieve this effect using Photoshop and After Effects. So for this tutorial I will show you how to achieve the blur effect of iOS7 using Photoshop and After Effects. The cool thing about this workflow is that it clearly showcases how Adobe apps work together in a seamless way. Step 1 The first thing I did was to download the iOS7 iPhone PSD from teehanlax ( to use the basic iOS7 UI. Step 2 Here I created a new document in Photoshop with the dimensions of the iPhone 5, 640x1136 pixels. Then using the basic iOS7 UI I started designing the screen of my app. In this case I designed what would be the home screen of the Abduzeedo App. Step 3 If you scroll up you can see that the iOS7 has a bunch of seethrough areas, sort of Windows Vista. For my design I just made sure that the action bar had some transparency going. The blur effect will be add in After Effects. After you finish your design, save the PSD file so we can import it in After Effects. Step 4 Time to open After Effects. In After Effects, drag the PSD file to the Project panel. Once you do that you will be prompt with the dialog box. For the Import Kind use Composition - Retain Layer Sizes. For the Layer Options use Editable Layer Styles. Step 5 Here is what you will have in After Effects. Noticed that when importing a PSD file you will get alread a composition with the name of the file and a folder with all layers and objects. Double click on the composition to open the home screen we created in Photoshop. You will have then all layers that you have in Photoshop. I deleted the background and other unecessary layers. Another important thing to do is to change the composition background color from the default black to white. Step 6 Now to make the blur effect in After Effects is pretty simple. Go to Layer>New>Adjustment Layer. Position this adjustment layer below the Navigation bar. The adjustment layer will apply the blur effect to all layers below it in the timeline. Right now we just have the layer, so let's apply some blur. Step 7 With the Adjustment Layer 1 selected go to Effect>Blur & Sharpen>Gaussian Blur. I don't know exactly how many blur Apple applies in iOS7, but for this little demo I used 20 for the Blurriness. Note that the whole Group 1 layer is blurry and the action bar is not. Our goal is to make the blurr visible only when the screen goes underneath the Navigation bar. To do that we will apply a mask to the Adjustment Layer. Step 8 With the Adjustment Layer 1 selected, click on the Rectangle Tool Q, then create a rectlange over the area you want to show. In this case, from the Navigation bar to the bottom of the page. Also make the width way larger and off the screen, that will make the blur more uniform when passing underneath the Navigation bar. Step 9 Try to move the Group 1 layer (the home screen) up and down to see the blur being applied underneath the Navigation bar. You can increase the blur of the Adjustment Layer 1 or you can make the Navigation Bar more transparent. Conclusion The whole process is pretty simple and straightforward. You can use this tutorial as a base for a template file and then reuse for future projects. You can also improve upon this or come up with your own process which I'd love to hear about. One thing to keep in mind is that in this day and age it is extremely important to start going beyond static mocks. After Effects is an amazing tool for this such work and it seems to be a smooth transition for UI designers using Photoshop. Download After Effects file Click here to download the After Effects file used for this tutorial

Reader Tutorial: Starting with After Effects

Hi, my name is Pascal Verstegen, aka Enkera from Noa Studios. In this tutorial i'm going to explain how easy it is for any photoshop users out there that create a lot of effects-added branding to transform their work into a great and simple animation using After Effects, presumably to spice up your client presentation or intro to your website. Step 1 First, let's take a look at what the kind of work would be that would fit this purpose greatly! This image is great for use because it’s primarily build up out of pen tool shapes, rasters are ok as well, but will greatly increase the loading rendering and wait in After Effects later on. As you can see you can leave any layer styles on, because it’s the miracle of Creative Suite, and these styles will all import directly into After Effects. Step 2 Now, after you have saved your image as a .PSD, we’re going to open After Effects, if you’ve never opened this app before, now is a good time to get familiar with the interface. On top is the toolbar, similar to photoshop’s, on the left you can see the info about your currently opened project and the files you have loaded into AE for easy-access. In the center is the screen that’s going to show previews of your movie. On the right is info about your cursor’s whereabouts and what colour it’s touching. Under that is a preview pane, then it shows Effects & Presents, the latter also holds all the photoshop effects and the AE animation effects. On the bottom is the layer menu and the timeline, the most important part of AE in this tut. Step 3 We’ll now open up a new file, this isn't done in the traditional fashion (file>new), rather we have to open up a new composition. On top of the screen press Composition and choose New Composition. This will pop up a screen with settings for your new composition, if your in America you’ll be wanting to choose a pre-made NTSC format, and for Europeans it’ll be a PAL format, these are video settings supported by your localized DVD player and television set. To see what setting you have to use if your outside of these areas goto: This shows a map of regions. After you’ve picked the correct setting, adjust the size of the composition to the one of your PSD file, or whatever size you’ll be working in. I normally choose 1920x1080 as this is full HD and most of my presentations are on an HD screen. Remember that the higher your resolution the longer the render time will eventually be, rendering an HD movie with all these photoshop effects will take around 3 hours on the highest-end iMac. You might want to judge what your machine can handle too. You can just leave it on the standard settings if your not sure. Make sure it’s set to something above 24 frames per second (fps). Press OK. Step 4 You now see an empty presentation in the size you choose, it’s time to import your .PSD. Goto File > Import > File... Find and open your .PSD Another settings window will pop up, check if Editable Layer Styles and Live Photoshop 3D are marked (if you used 3D in PS). Hit OK. In the Project window left of your preview you can now see an image of your PSD on top. Double Click this. Your screen should now look like this: The timeline now shows each of your Photoshop layers individually, you should play around with it by pressing the white arrows in each layer, under Transform you can find the ways to edit the layer you selected. Step 5 We’re now going to animate something simple, using this method you can also edit the other transformation settings. Select any part of your image that’s small yet easy to see, i picked one of the starts on the ball. By pressing the white arrows in the timeline you can drop-down all the available options, layer styles like in my case Outer Glow, can be animated to pulse subtly etc in the same way the location, shape, rotation and transparency can be animated. First step I’m going to take is I’m going to bounce this little star into view. Step 6 (important, stay focused) This is the hardest part, once you know how this works you’ll have the all-clear in your brain to edit anything you like. The timeline works with the Time-Vary Stopwatch, which is the little stopwatch in front of any given option. On top of the timeline is a yellow slider, this manages where you are on the timeline. If you would press the stopwatch it will save the current state of the selected option onto the timeline where the yellow slider points towards. We will leave the slider at the start for now. Press the Stopwatch icon before Opacity, a yellow point will appear on the timeline marking the 100% visibility at the start of the movie. We’ll want the star to slowly become visible over about a 2 second period. Move the slider over to 02s (2 seconds), and press the tilted square icon in front of the stopwatch icon: This will mark another spot in time that we will insert an option, using the arrows in front and behind the tilted square we can quickly travel to the next and previous assigned options. Press the arrow pointing left to go back to the previous 100% visibility we created. Now, press and hold your left mouse button while holding your mouse above the 100% next to Opacity. Slide your mouse to the left to get a 0%. You can also click on the 100% once and type 0. Now, by pressing the spacebar, After effects will slowly render every image to reveal your star in 2 seconds. The green bar on top of the timeline indicates what frames have been rendered, you can put the slider back on 00s and press space again to see the animation’s result. Step 7 We’re now going to make the star or whatever object you’ve selected “bounce” into view. This will go in the same manner as with the Opacity, first put the slider back to 0 seconds, now press the stopwatch icon in front of Scale, slide the timer to 01s, and adjust the scale value to 120%, slide it to 02s and adjust the scale value to 80%, 03s on 110%, 04s on 90%, 05s on 100%, now press space to see the star or whatever you’ve used bounce into view. Step 8 You should really play around with the time bar in order to get to know how it works a little better, by expanding the Layer Effects portion of a layer you can also adjust the magnitude or visibility of Bevel, Outer Glow, Inner Glow, or whatever you used in photoshop. You can also click on one of the yellow squares and hold shift to select multiple of them, then press Cmd+C (Ctrl+C on PC) and slide the slider to where you want the copies to go to, then press Cmd+V (Ctrl+V on PC). This will duplicate the values, making it more easy to make animations run longer. Extra Step, Motion Blur, 3D. To turn on motion blur on a layer, click this symbol: In order to make a layer 3D press this symbol: A 3D layer can be moved using the X,Y and Z axis which will be added to the properties of the layer in Transform, this works the same as other options do. My Final Result: Thank you for reading and i hope you understood the tutorial! Next time you do a presentation you'll blast those bastards away! Quick holler @ my boys Julien Kraal & Emin Sinani!

Awe Inspiring Motion Graphics

Ok, I admit my work is hugely inspired by motion graphics and I wanted to share with you some of my greatest influences in this field. It amazes me how each single frame is a super piece of illustrative work, and to think how many frames it takes to make a ‘piece’ is truly mind boggling. MK12 To start with is a superb studio from the USA called MK12. I first seen their work in the Dos Logos book a few years ago and their clean vectors really stood out. I checked out their website and realised they also do motion graphics and incorporate all kinds of crazy visual motifs. You have to check out ‘History of America’ which is a psychedelic western space opera that you can view via YouTube now! The Ronin Next up with have a British designer/director who goes by the name of Rob Chiu but you may know him as The Ronin. He has such an original approach to motion graphics, combing 2D illustrations with flowing camera movements which was one of the very first influences on me. His work for ‘Black Day to Freedom’ was truly outstanding and incorporated themes such as asylum and displacement of the peoples. Critica Next up we are flying VIP to Singapore to visit the all mighty Critica. These guys and gals truly know how to diversify. They seemingly blend motion graphics, live action, typography and 3D work into one hell of a creative melting pot. After appearing on the likes of MTV and working fro people like Tiger Beer you really must have at some point stumbled upon their work. If not, now’s your chance: Prologue We are now going to sprinkle a little magic over the preceding with a studio from the City of Angels (Los Angeles) named Prologue. These people sum up to me what a motion graphics studio can achieve. There portfolio of movie title sequences is truly staggering. I cannot say anything else about them apart from check their work now. Dstrukt Dstrukt is somebody who really does push boundaries. He has worked with the likes of The Ronin and Hydro74 to name just a few. Just check out his showreel for cool punchy motion graphics. And there it is, just a sample of some of the awesome motion designer that I have come across. If you know of any other please feel free to send me an email and let me know. You can contact me through my website: Official SA3S