Tags: actions

12

sparkline

Wednesday, April 24th, 2019

Interview with Kyle Simpson (O’Reilly Fluent Conference 2016) - YouTube

I missed this when it was first posted three years ago, but now I think I’ll be revisiting this 12 minute interview every few months.

Everything that Kyle says here is spot on, nuanced, and thoughtful. He talks about abstraction, maintainability, learning, and complexity.

I want a transcript of the whole thing.

Tuesday, November 27th, 2018

Front-end development is not a problem to be solved | CSS-Tricks

The sentiment is that front-end development is a problem to be solved: “if we just have the right tools and frameworks, then we might never have to write another line of HTML or CSS ever again!” And oh boy what a dream that would be, right?

Well, no, actually. I certainly don’t think that front-end development is a problem at all.

What Robin said.

I reckon HTML and CSS deserve better than to be processed, compiled, and spat out into the browser, whether that’s through some build process, app export, or gigantic framework library of stuff that we half understand. HTML and CSS are two languages that deserve our care and attention to detail. Writing them is a skill.

Friday, July 20th, 2018

Fractional. — Ethan Marcotte

Ethan’s ode to the fr unit in CSS grid.

Tuesday, April 26th, 2016

OOUX: A Foundation for Interaction Design · An A List Apart Article

I really, really like this approach. I’ve used something similar in my responsive design workshops, where I get people to break things down into nouns and verbs (objects and actions). I think there’s a lot of crossover with good URL design here too—this is kind of like REST for UX designers.

Saturday, January 28th, 2012

An introduction to Web Intents – an interview with Glenn Jones

Harry interviews Glenn about web intents (web actions). Glenn gives a good clear explanation of what they are.

Thursday, January 12th, 2012

Web Intents - Design Push

This looks like it’s going to be a great event on February 25th right here in Brighton: a gathering of minds to brainstorm around web intents. Get there if you can.

Wednesday, October 5th, 2011

Choosing the Right Words – Web Intents — Glenn Jones

Glenn has written up the discussion that followed his UXCampBrighton talk on web actions.

Monday, August 8th, 2011

Web Actions: Identifying A New Building Block For The Web - Tantek

Tantek’s braindump of research he and Erin have been doing on web actions—verbs for the web, specifically interactions across sites: sharing, liking, and so on. I agree with him that this terminology feels better than “web intents.”

Button Sluts and Web Actions

Erin documents the next step after web intents.

Wednesday, July 15th, 2009

Code Poetry: Blake’s Jerusalem | actionscripter.co.uk

foreach (tyger in night.forests) { burn(bright); }

Monday, September 17th, 2007

jQuery UI: Widgets, Components, and Interactions

From the people who brought you jQuery comes a set of widgets built using jQuery complete with documentation and tutorials.

Sunday, November 9th, 2003

Photoshop Actions

I’d like to share some of my Photoshop actions with you. I use these when I want to “touch up” photographs and add some extra effects.

I’d like to share some of my Photoshop actions with you. I use these when I want to “touch up” photographs and add some extra effects.

You can download a set of these actions.

For each of the actions, I’m going to use a photograph that started life as a 1600 x 1200 photograph shot on a Fuji Finexpix A201. I’ve reduced this down to 960 x 720 pixels to make it a more manageable download.

If you’d like to walk through all the steps of the actions described in this article, you can download this photograph and compare your results on a step by step basis.

A photograph of Jessica

To illustrate each action, I’ll be using 320 x 240 sized snapshots like this.

The first action is a straightforward “soft focus”.

Soft Focus

This action involves duplicating the original layer, making adjustments to that duplicate and then merging it back down. It works best on close-up portraits rather than distant landscapes.

Here’s the original picture.

The original photograph of Jessica.

The first step is duplicating this original layer.

Layer > Duplicate Layer

I’m going to blur this duplicated layer using the Gaussian Blur filter. I use a radius of about 7 pixels for a medium sized image.

The photograph of Jessica with gaussian blur applied.

The blur effect by itself is obviously too extreme so I’m going to change the style of the layer.

Layer > Layer Style > Blending Options

I set the Blend Mode to Lighten. I can then merge the duplicated layer back down with its original.

Layer > Merge Down

The photograph of Jessica with blending set to lighten.

I now have a “soft focus” version of the original photograph. If you find the effect too extreme or not extreme enough, try using lesser or greater values for the Gaussian Blur filter.

Varying the blending options can also produce some interesting effects. I want to show you just one of those variations. I use it to create a “drawing" effect on pictures.

Drawing

The first few steps of this are identical to the “soft focus” action.

Here’s the original picture again.

The original photograph of Jessica.

Again, I duplicate this original layer.

Layer > Duplicate Layer

Now I apply the Gaussian Blur filter with a radius of about 7 pixels.

The photograph of Jessica with gaussian blur applied.

Now I change the blending options on the layer.

Layer > Layer Style > Blending Options

This time, I set the Blend Mode to Darken. I merge the duplicated layer back down with its original.

Layer > Merge Down

The photograph of Jessica with blending set to lighten.

This action has the effect of making the lines in the photograph look hand-drawn while the areas of colour look inked-in. This pen and ink feel is reminiscent of some comics and graphic novels.

The next action is also a variation on the “soft focus”. I like to call it the “moody" action.

Moody

The idea with this action is to make a picture look more atmospheric.

I’m going to start with the same photograph. It has some strong colours like the red of the hair and the green of the jumper.

The original photograph of Jessica.

The first thing I do is reduce the saturation.

Image > Adjustments > Hue/Saturation

I put a figure of -70 in the Saturation field.

The photograph of Jessica with reduced saturation.

It’s already starting to look moodier although it’s quite flat. I increase the effect of the desaturation by increasing the brightness and decreasing the contrast.

Image > Adjustments > Brightness/Contrast

I put a figure of 15 into the Brightness field and -15 into the Contrast field.

Now I’m going to duplicate this layer. I do this because I want to mess with the settings of the duplicated layer and blend both layers together.

Layer > Duplicate Layer

From here, it’s quite similar to the “soft focus” action. Once again, I’m going to blur this duplicated layer using the Gaussian Blur filter with a radius of about 7 pixels.

The photograph of Jessica with gaussian blur applied.

Now I’m going to blend it with the layer below.

Layer > Layer Style > Blending Options

This time, I set the Blend Mode to Overlay. I then merge the duplicated layer back down with the original.

Layer > Merge Down

The photograph of Jessica with blending set to overlay.

That’s it. I now have a “moody" version of the original photograph.

There’s one last effect I want to show you.

Lomo

This action attempts to reproduce the kind of pictures you get from a Lomo camera. Unfortunately, part of this action is specific to the size of the picture (in this case, 960 x 720) so you’ll have to adjust it for different sizes.

I begin with the same photograph.

The original photograph of Jessica.

In many ways, this action is the opposite to the “moody" action because I want to increase the vividness of the colours. The first thing I do is up the brightness and contrast.

Image > Adjustments > Brightness/Contrast

I put a figure of 10 into both the Brightness and the Contrast fields.

The photograph of Jessica with increased brightness and contrast.

Next, I increase the saturation.

Image > Adjustments > Hue/Saturation

I put a figure of 15 in the Saturation field.

The photograph of Jessica with increased saturation.

Now I create a new, blank layer with the Blend Mode set to Soft Light.

Layer > New Layer

I’m going to fill this layer with a gradient. I set the foreground colour to white and the background colour to black. I then choose the Gradient tool and select a blend of the white going to black (the first option) and the radial pattern (the second pattern option). I drag the cursor from the centre of the image to one of the corners.

This is the part of the action that will have to vary depending on the size of the image because the centre will be in a different pixel position.

The photograph of Jessica with a gradient applied.

Now I merge this layer down.

Layer > Merge Down

It’s not quite the same as using a real Lomo camera but it’s a nice effect anyway.

So there you go: one photograph with four different effects.

The photograph of Jessica with the soft focus action applied. The photograph of Jessica with the drawing action applied. The photograph of Jessica with the moody action applied. The photograph of Jessica with the lomo action applied.

I hope you’ll find these actions useful. You can turn any of them into droplets by using Photoshop’s Automate option.

Automate > Create Droplet...

Have fun and don’t be afraid to play around with the settings I’ve given. You’ll be surprised at some of the great results you can get just by messing around.