I’ve been taking photos for maybe 3 years. iPhone only. For editing I’ve been using Instagram or occasionally Snapseed. Which means my workflow to date has been limited to mobile.
“Limited” is the word to note. Having never used Photoshop for photo editing I wondered was I limiting myself somehow. Curious to find out I listed out the steps I typically take when editing a photo on my phone:
1. Crop & straighten
3. Edit contrast
4. Colour correct
5. Highlight the focal point
Then I went about repeating these steps with Photoshop. Here’s the tools and techniques I ended up using:
Crop & straighten
Easy one. Photoshop has a tool for this. The crop tool. It’s intuitive and easy to work with.
A little research and I found a technique for this using the High Pass filter. I found it helpful to work non-destructively using a smart object. This meant I could easily update the filter settings throughout the editing process.
For this I used a Levels Adjustment Layer. Then experimented with the sliders until it felt right. I’ve a tendency to apply too much contrast. So it’s helpful, as with all edits, to take a break by looking away for a second or two then evaluate the image again. If you’ve gone too far you’ll notice it.
I found two methods of doing this and ended up using both:
1. A Colour Balance Adjustment Layer
2. A Selective Colour Adjustment Layer
This step is really intuitive. I experiment with the tonal ranges and sliders until it looks good to my eye. Then stop. I’m sure there’s more to it. But I’m learning as I go.
Highlight the focal point
For this, I used a new layer filled with middle grey (#777777). And set it’s blending mode to Overlay. This darkens the image. Then using a large soft brush I burn (darken) or dodge (lighten) specific areas.
So, that’s a summary of the techniques I’ve been experimenting with. I’m working intuitively and having fun just trying to improve the image. The hardest part is knowing when to stop with the editing.
So do I think there’s a benefit to using Photoshop for image editing over mobile apps? Absolutely. The level of control and flexibility Photoshop provides over details is wonderful.
I’ve added the results of this experiment below. The photos are random shots I’ve taken during October in and around Dublin.
I’ve been working as a digital product designer for a little over a year now. It’s been a positive experience for sure. There’s nothing like a career shift to get you out of your comfort zone. Which is a good thing. But it has resulted in my software of choice becoming Sketch.
This is relatively new for me. Photoshop was my go-to design tool for many years. Since it had been over a year, I was curious to learn if any new features had been added.
One such feature is the Select and Mask Taskspace. I wanted to try this. And after stumbling across a post by Anton Repponen I decided to figure out how to create something similar.
I’ve added the end result below. This project was a reminder for me that these small practice exercises are important. And that there’s nothing wrong with learning by copying the work of others. Here’s a list of the things I figured out how to do:
Create a seamless repeating pattern from a sourced image
Quickly and accurately mask using a new feature of Photoshop
Realistically apply a pattern to a product. In this case a Nike shoe.
So here’s to personal projects as a way to continue learning.
This is a great example of how stutter-stepped animations that build-in one element at a time can really draw a user’s eye.
The wave like effect is created by adjusting the animation start times so that each element moves onto the screen a fraction of a second after the previous one.
In this article I’m going to explain how to create something similar using Keynote. Which incidentally I think is a great tool for prototyping animation. Let’s get started.
First we need a UI design. Here’s the song listing screen which we’ll be animating.
I created this using Photoshop. You can download the PSD if you’d like a closer look and see exactly how I put it together.
Now, if we refer back to Jakub’s animation and analyse closely what’s going on there are 8 UI elements that are animated separately.
The back arrow and label
The “Add a Song” button
Each of the 5 song items
Each of these elements is stutter-stepped onto the screen by varying it’s animation start time. And this is exactly what we’ll be doing inside of Keynote.
Fire up Keynote and set the slide size to 640 x 1136. Next add each of the exported image assets to the slide. Take care to position each element so that it matches the design. You can use Keynote’s position attributes to punch in coordinates so everything is aligned perfectly.
Next we’re going to animate the UI. For this job we’ll use a “Move In” animation effect as our intention is to move each UI element onto the screen. In Keynote select “The back arrow and label” graphic and add a “Move In”. Set it’s duration to .4s, direction to “Right to Left” and set it to bounce.
Next, copy this animation effect and apply it to all the remaining UI elements, then open the build order palette. It’s important to make sure the order of elements in this palette matches the screen order from top to bottom. Now, starting at the second item in the palette set each to “Start with Build 1” and add a delay of .2s. The delay is the important part. This creates the wave effect we are trying to replicate. If you preview the animation at this point each UI element should move onto the screen a split-second after the previous one. Here’s a video of the final animation.
Hover + hold to play and loop the video
Pretty cool right? And it’s easy to create. If we compare this to the original it’s obviously not as slick. But it’s 80% there, and that’s enough to communicate a UI animation idea clearly to a developer or even a client.
The first Break Conference is over. All done until next year (fingers crossed). Was it good? yes it was. Very good in fact. Was it eclectic? again, yes. But this, I felt, was a good thing. Every day I’m neck deep designing and building for the web, so it was a refreshing break to spend a day listening to insights from speakers on product and print design. If you were there, you know what I mean. If you weren’t I’ve added my notes below. I hope they make sense.
Simpler, clearer and faster. These are the guiding design principles for Gov.uk.
Start with needs. User needs not government needs.
Creatively respond to people’s needs. Design is about solving people’s problems.
You don’t need to be an expert. Learn as you go. Jane had a good product idea but had to figure out how to make it real. She needed to learn about business and science.
Nobody else will care as much as you about your idea.
Don’t plan to be huge straight away. Start small and make it good.
Social proof. You need real world examples of your work. You can’t just say you’re great, you need to prove it.
How do your customers feel about you? This is branding.
Sugru epitomise start-up culture. As a company they really believe in what they are doing.
New branding evolved as product has evolved. Iterate. Design is never finished.
The best way to learn is through play and experimentation.
You don’t have to be an expert. Learn as you go.
Regarding client driven work it’s hard to have full control and create really great work. This led Adrian to reflect on what other things he could do with his skills. Which led to writing. Which led to Unit Editions.
All design begins with research.
The nature of graphic design is changing hugely.
Social media is hugely important to Unit Editions. The ability to communicate directly with a market is a huge advantage.
FHK Henrion first graphic designer to really understand publicity and how to use it to his advantage.
Driven by innovation through user-centered design.
Worth remembering that we’re in the first minutes of the first day of the internet revolution.
The future of the web is tangible. Haptics will be used to improve communication.
The future of the web is connected devices which can communicate with each other.
I’ve often felt envious of designers who could bring life to their interface designs using animation. Examples are all over sites like Dribbble. I wanted to create something similar, but how? The problem I initially faced was the steep learning curve associated with After Effects and Framer. I needed a simple solution. A tool I could pick up quickly. After some research and experimentation I discovered Keynote. Yes, that Keynote. Apple’s presentation tool.
Keynote’s not known as an animation tool but trust me with just default effects and some simple techniques it’s possible to create some pretty complex animations. Not convinced? watch this:
I watched this video and was impressed. I watched it again and again and then proceeded to pick apart the source file and recreate it. After a few hours I had the basics down and felt comfortable creating animation effects. And now, in this post, I want to share that knowledge. Admittedly the example I’m going to step through is a lot simpler, but you’ll get the idea and hopefully understand how easy it is to animate with Keynote.
So then, enough explaining, here’s what we’re going to recreate:
Hover + hold to play and loop the video
To get started launch Keynote and create a blank slideshow.
Select the document tab and set the slide size to 640px by 1136px (hi-res iPhone in portrait mode).
Make sure to switch the presentation type to self-playing and set delay to 0 for both transitions and builds.
Next, open the Build Order palette. You’ll be spending a lot of time working with this.
If you’ve followed those steps you now have your Keynote document primed and ready for building the animation. Before we get started we need to create our image assets. I prefer Sketch for this as it’s export tools are very efficient. But use whatever tool you feel comfortable with.
Make sure you create an image asset for each element you need to animate. Below you can see the list of Sketch artboards I created ( download available here ). One artboard for each scene. I’ve also listed out the individual graphic assets I exported from Sketch. Importing these to Keynote is very easy. Simply drag from the Finder to Keynote. Done. Now we’re ready to animate. Lets consider just the first part of the Lumosity example (a segmented circle animates into view).
Hover + hold to play and loop the video
Lets recreate this.
To set up the initial state take the segmented circle graphic and set it’s size to 2600pt and centre it. The centre of the circle should now be positioned outside the slide edges. Copy this slide and resize the segmented circle to 305pt. Centre it again. Toggle between the two slides. You now have your animation start and end states.
Select the first slide and activate the animate tab and choose the Magic Move effect, set duration to 0.5s and acceleration to Ease Out. Preview this. Magic!
Magic Move really is magic. It does all the heavy lifting. It works like this: once you have the same element on two slides with different properties or attributes Magic Move will work out their differences and animate them. Position, scale, opacity and colour can all be animated in this way.
Using just Magic Move it’s possible to recreate the first 3s of our example video. You can download the source file to see exactly how I did it.
Now that we have our intro animation sorted lets look at how the the second part of the animation flows.
Hover + hold to play and loop the video
It breaks down like this:
The scoreboard background fades in
A ribbon appears by scrolling onto the screen
A badge appears by popping onto the screen
Before we recreate this effect lets explain the details of Keynote’s Animate tab. The Animate tab is sub divided in to 3 more tabs. Build In, Action and Build Out. Each element you place on a slide can have one or all of these applied.
A Build In is how an element appears on a slide. An Action is what happens to an element while it’s there. And a Build Out is how the element exits a slide. Each animation type has an extensive list of effects which can be tweaked and previewed.
OK, back to our steps. To fade in the background I first added it to the slide and positioned it correctly then set it’s opacity to 0. Next I selected an Opacity animation from the Action tab and set Duration to .7s, Opacity to 100% and Acceleration to Ease Out. If you preview this effect the background graphic should gradually fade in to view.
Onwards. Copy this slide. Remove the actions and set the background graphic to 100% opacity. This is our initial state for out next animation. Add the ribbon graphic and position it correctly. Then using a Keynote Shape place a white rectangle over the ribbon so it’s completely hidden. Set the width and height of the rectangle to equal the ribbon. Now we are ready to add animation.
Select the rectangle and add a Move animation from the Action tab. Position the end state so as the left edge of the rectangle is butted against the right edge of the ribbon. Now set the Duration to .7s and Acceleration to Ease Out. Preview this effect and the ribbon should seem to appear on to the screen.
Our last animation to add is the popping badge. Drop the badge on to the slide and position it. Select a Build In animation and choose the Pop effect. Set the Duration to .75s. The timing of this animation is important. We want the Badge to pop on to the screen at the same time the ribbon appears. To do this active the Build Order palette. Select the Pop build and set it to start with Build 1. Add a slight delay of .2s. And that’s it.
Phew, that’s by far the longest article I’ve published but I hope it’s highlighted how Keynote can be used to prototype UI animation. I’ll wrap-up with this caveat: Keynote is not an animation tool so expect to find some shortcomings, but generally it’s good enough to test out an idea or demo UI animation to a developer. That’s how I’m using Keynote and with great success.