Things we liked this week:
Liam (cor, he’s a bit late to this one, but I’ll let him off…) liked PhoneGap – an HTML5 app platform that lets you write native applications for the popular mobile phone app stores. You basically write your app in HTML5, throw it to their build platform, and get a submission ready iPhone app. Sexy.
He also reckons that Mootools is better than jQuery: “…and that is a scientific fact that I can’t back up with facts other than a promise and a picture of a kitten”. Mootools 1.4.1 is now available and there is also a rather sexy modal framework for it available this week too. Go have a play.
Paul’s regular weekly FailWatch found this rather disturbing report: apparently the network of machines responsible for controlling the US’s fleet of drones has been compromised by key logging viruses that appear to be immune to attempts to remove them. Only this morning Paul then came across this piece describing how the unit’s officials kept things to themselves, neglecting to tell the 24th Airforce, who are supposed to be responsible for info-security in the USAF. Which is nice.
Paul’s next Fail: the Blackberry network went down for extended periods over two days (and I’m seeing more stuff in my Twitter stream which implies things are still not 100% sorted..) – and more coverage from the excellent Daily Mash.
…and his Final Fail: In a demonstration that you can recover from major fail without losing too much of your dignity, Netflix announced that they were backing out of their planned spinning off of the DVD part of the business as Qwikster. It’s good to see a management team with the balls to admit when they’ve done something dumb, and back-pedal.
Adam dug up two interesting pieces on evaluating the effectiveness of a design for conversion and questions you should be asking yourself whilst designing: This from 37 Signals, and this from Cennydd Bowles.
Andrew pointed out that we’re noticing a significant rise in the number of requests for iphone apps from clients here at Storm. As such he was interested in this article that goes into detail about the common unknown user functions available in devices such as the iphone and ipad. Always good to step back for a moment and remember that not everybody using the device you’re designing for is as au fait as you are with it…
For me the bookmark of the week goes to this totally ridiculous demo video of some new (and without any doubt at all – entirely black magic) technology called Patch Match. If you thought Photoshop’s ”Content Aware Fill” was cool, just check this out…
The humble logo – small, pretty and simple. But nestled somewhere in those few pixels lies the power to make or break a business. That’s some heavy weight for such a little guy.
Having just finished working on an identity for a project my agency is involved with, I thought documenting the evolution of the logo from conception to completion along with how I personally go about designing logos would make a pretty sweet blog post. So without further ado, Designing a Logo- the Creative Process.
Grab a photo that requires airbrushing or touching up
The photo that I will be using for this tutorial is available at Stock Xchange. So if you want to download a copy and see the heal brush in action for yourself – please do!
For this tutorial I have set up a 550px x 550px canvas with a light gray background. The first stage is to select the rounded rectangle tool (shown below). Set the radius to 15px and draw yourself a square inside the canvas. You can make sure you draw only square shapes by holding the shift key.
Your first step will be to find a free stock image of some dry and broken ground. I found a perfect picture over at stock.xchng. This is the image I’ve selected – it’s been opened in Photoshop CS4 and resized for this tutorial to 550px x 368px.
Select a photo that you want to touch up. I have picked an image i took on Brownsea Island in. It isn’t a bad photo but the colours aren’t as vivid as I remember them in real life.
We start with a nice simple gradient. You can pick the colours – personally i used Hex #2fb8f3 to #355aae.
You can apply the gradient using the Gradient Tool (G) and dragging from top to bottom – or any which way you like to get your own effect.
Start by finding yourself a photo that you wish to use. I am using an image that i took at the Eden Project in Cornwall during Bulb Mania 2007 using a Nikon D40. Ive uploaded the original image for you to use for the purposes of the tutorial. If you wish to use the image on your website or in any other form please request permission before you do so.
The following Photoshop Tutorials describe some of my favourite techniques for creating and modifying both photos and graphics for web use.
During the series the Photoshop Tutorials will cover; Touching up photos, Use of light and shadows, The wonders of the Burn, Dodge and Saturate Tools, Warping, Blending and Liquefying. Along the way i hope you will pick up some useful ideas to help inspire your own Photoshop creations!
If you have a tutorial that you would like to share, or that you wish to feature on our blog, please get in touch.
The first thing to do is to locate yourself a photo that is in need of an airbrush. I have selected this – less than amazing – picture of Cameron Diaz.
The technique will work particularly well here because she has a good portion of her face showing to the camera.
You will likely want to duplicate the photo layer so that you can switch between them for a before/after effect.
What we need to do now that we have found our picture, is to select the targets face. There are a number of methods, but by far the easier is by using the quick mask tool.
Switch to Quick Mask mode, then select the brush tool and set the brush to a suitable size for your image (mine was 35px – 45px). Make sure the brush is set to soft (aprox 20% Hardness).
With your brush – paint in the face. It should appear as if you are painting in semi-transparent red. And should look similar to this (i’m only half way through in this image)
Exit the Quick Mask tool by pressing Q, or by selecting the normal mode from the left hand tool panel. You should be left with the face selected.
Quickly inverse the selection to grab the face: Selections > Inverse.
Now that we have selected Cameron’s face, we need to feather the selectionto give a gradual transition from normal to airbrushed face.
To do this we’re going to use: Select > Modify > Feather (Just Select > Feather in older versions of Photoshop) and set the feather to about 12px. (This may vary depending on image size)
To achieve the airbrush effect we are going to blur the selection using Filter > Blur > Guassian Blur | 3px radius.
This leaves the image looking a little too smooth, so to add some texture back in use Filter > Noise > Add Noise | 2.5%, Uniformed, Monochromatic.
Just to finish up my airbrush make over i have used the sponge tool to saturate the lips slightly and then the burn tool to bring out some of the colors in the hair and eyes.
Here is a side-by-side before and after!