Animations are great, when properly utilised they can be used for both usability and delightful reasons. I recently watched Jared Spool give a talk about Using the Kano Model to Build Delightful UX. In it, he raised some excellent points about a user’s satisfaction level and I drew a lot of parallels on how we, at Lukibear, feel about giving users delight through animations.

Interactions and Animations

There are many types of animations, but there are two main causes for animations to occur in a user interface: macro-interactions and micro-interactions.

What’s the difference?

Macro-interactions are when a user is performing key tasks or reaching the goals of the product; this often means navigation or screen to screen transitions. …


Introduction

In this article I’m going to talk about the awesomeness of what’s new and signs of what’s to come, specifically for UI design.

Image for post
Image for post

Artboards! Artboards! Artboards!

So as you may or may not know, Photoshop has multiple artboard support now. That means you can make your amazing new cat photo sharing app a lot quicker and have it all in the one document.

Image for post
Image for post

Library Linked Smart Objects

Yep, it’s a mouthful but it’s an awesome feature. I personally call them “Cloud Objects”, because they are linked to your library via the cloud and they are smart objects. It’s basically a way to keep all of your links with you no matter what, so that you can more easily deal with links in a collaborative environment or if you are a big spender and have 5 Macs hanging around. …


Intro

Sexy and succinct title, I know, but this is one of those things that have been annoying me for quite a while. And yes, you can do this with the latest version of PS CC using Library colours but I wanted another way if you don’t already have the colour chosen.

The Script

Download it here

The Installation

Follow the instructions here

How I Use It

I’ve set it up to ctrl + c (I’m using a Mac). The only problem with this script and with the Library colour method, is that you can’t change the colour of a text selection.

Feedback

Have anything that annoys the crap out of you in PS or wish you could automate something in PS? Hit me up and we can talk it out.

Like what you see? Get in touch!
Kieran Black

D&K


Intro

My University Life

At uni, I was a pretty standard student. Went to the lectures and tutorials that I loved, skipped the ones that I hated that weren’t mandatory. I was studying a double degree in IT and Multimedia. I didn’t live on campus but at the same time I pretty much lived in the computer lab on a healthy dieat of 2-minute noodles and energy drinks. Four years later, I completed my two bachelor degrees with majors in It marketing and management and graphic design.

What I did learn

I learned the tools (Adobe suite), I learned how to interact with other designers, I learned how to be on time and I learned how to pull all-nighters to get shit done. …


Introduction

First of all, this is somewhat of a rebound of what Marc Edwards from Bjango has written up for his app design workflow. This article will be a little bit more broad on UI design covering both web design and native app design. By the way, this is just my opinion on how to design for UIs, there are probably better ways to do all of these things. If you do have a better way, tell me in the comments below, I’m always interested in refining my workflow.

The Tools

I design with Photoshop

“Blasphemy!”, I hear you say. Look, I know there are specialised tools out there for UI design, but I’m of the opinion to use whatever works so long as the quality of the deliverable is not compromised. For me, Photoshop is the best tool. I can write scripts, create plugins, I know all of the keyboard shortcuts; in the end it gets shit done quicker and that’s what I need in a tool. Granted, if or when Photoshop gets beaten out by another tool I’ll gladly jump ship, but as of writing Photoshop is still king. …


It’s been a while but this is something that has been annoying me for a while and I finally found a work around for it.

The Preface

At the moment I’m creating two icon fonts for my day job, one for web and Android and one for iOS. You may be wondering, two? Why two? You’re crazy, an idiot even. …


Image for post
Image for post

Step 1: Install your scripts

First things first, get your newly found scripts and put them into Applications > Adobe Photoshop CC 2014 > Presets > Scripts.

Image for post
Image for post

Step 2: Open your keyboard shortcuts

Open up Photoshop CC 2014 and go to Edit > Keyboard Shortcuts.

Image for post
Image for post

Step 3: Find the scripts

Check that the “Shortcuts for:” selection box is set to “Application Menus” and open the “File” drop down to reveal the scripts you just put into the “Scripts>” menu item.

Image for post
Image for post

Step 4: Configure your keyboard shortcuts

Select the script and press the keys you want to use for the shortcut. For this specific script I have chosen to use cmd + ctrl + shift + W, A, S and D. For some reason, Photoshop doesn’t allow you to use arrow keys in shortcuts and because of conflicts with existing shortcuts it can become even harder to choose a shortcut. …


Hello again,

I’ve started a new repo on Github to show off some of my most used scripts.

Here’s the https://github.com/kieranpblack/photoshopScripts

If you have any script requests, hit me up in the comments or send me a request on Twitter

See you soon with some more updates ;)

Like what you see? Get in touch!
Kieran Black

D&K


Hey everyone,
This blog will (hopefully) be a one-stop-shop for Photoshop scripting and plugins. Please keep in mind that a lot of this article is personal opinion and there may be a better/faster/easier way of doing things. Below is a list of resources to get you started.

Tools You’ll Need:
1. Adobe ExtendScript Toolkit (comes with CC)
2. HTML, CSS and Javascript editor (Sublime is a good choice)
3. Photoshop CC ;)

Research/Reading Materials:
PS-Scripts
Adobe’s Photoshop Scripting Forum

Adobe’s Photoshop Development Centre (Documentation)
Davide Barranca’s Blog

Davide Barranca’s Github Repo
David Deraedt’s Github Repo
My Github Repo

Photoshop Scripting History:
So, just to catch everyone up, as of Photoshop CC 2014 Flash plugins or extensions are no longer supported. Everything is now based on HTML plugins. It plays nicely with JS frameworks such as Angular and Node but personally I don’t use these as the plugins I create can be achieved without these frameworks. …

About

Kieran Black

Product Designer, Australia

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store