SSH, OSX and Terminal

I’ll retrace my exact steps here, including hot-keys. First we need to open up the terminal – a basic prompt interface that lives beneath all the bling of OSX. Rather than digging around in your applications folder, just hit apple-spacebar to open spotlight. Type “terminal” and it should show up right away.

Inside the Matrix (Terminal)

Now you can start to feel like a hacker. Thankfully, OSX ships with SSH pre-installed, which makes this tutorial very easy. To connect using SSH you need to type:

“SSH username@www.yourwebsite.com”

After pressing enter you’ll be prompted for two things… a password and a yes/no question asking if you want to add a record of the SSH connection (or something like that). While typing your password you can’t actually see the characters, but it is really working. Also, you need to write a full “yes” or “no” in response to the question…

That’s It!

You should be connected and ready to go. There are many different SSH commands, so I won’t go through those right now, but here are a few to get you started:

• ls – Used to list the contents of a directory
• cd .. – Used to go back (or up) one directory
• cd directory/name – Used to navigate to a directory
• exit – Used to end the SSH session
• pwd – Prints the working directory

There is a neat little trick that most good web designers know and love, and it has to do with background textures and noise. I remember when I first started designing for the web, I would never use textures in my designs and was always left feeling like something was missing. A textured background, even when it’s very subtile, will give your site much more depth and feeling than a plan flat color or gradient. This quick example will use some simple noise to give a gradient background some extra depth. So let’s get started!

First Example – A Noisy Gradient

Step 1 – Create a New Document

Create a new web document that is 1200px by 1000px.

Step 2 – Choose a Nice Gradient Background

For this example I decided to do a nice bright-dark green gradient. Make sure it’s linear to make it easier to slice into HTML/CSS afterwards.

Step 3 – Add the Noise Layer

Next, add a new layer on top of your background layer. This will be our noise layer. Fill it in with total black and then go up to Filter > Noise > Add Noise. Use roughly the same settings that I use below:

You should end up with a really really noisy background.

Step 4 – Blending and Opacity

Next we need to change the blending mode and opacity to make our noise layer more palatable. First set the blending of the noise layer to Overlay. Next you need to bring the opacity down to somewhere between 1% and 20%, depending on how much noise you want. In my Example I used  5% opacity.

Your final background should end up looking something like this:

Click to See Full Size

Here is a quick way to produce a neat halftone effect in Photoshop that can be used to give your compositions a little more complexity.

Step One – Setup the Document

Start off by creating a new document with the dimensions of 800px by 800px.

Step Two – Black to White Gradient

Create a new layer and fill it with a blank-to-white gradient. Try and make the gradient fairly even across the entire document.

Step Three – Apply the Halftone Filter

Select the entire gradient layer and goto Filter > Pixelate > Color Halftone… and fill it in with the settings below.

Step Four – Rotate the Halftone Layer

Next we can rotate the halftone layer by around 45 degrees counter clockwise.

Step Five – Crop it Down

Next make a selection near the centre of the halftone and crop it – I ended up cropping a section of ~ 615px by 300px.

Step Six – Apply a Pleasing Gradient

Choose a nice two color gradient (I choose blue). You now have two options. The first is to create a new gradient layer above your halftone layer and then reduce the gradient layer’s opacity to a suitable level. Or, the second option is to put a gradient layer below the halftone layer, set the halftone layer’s blending option to “Darken“, and reduce the halftone layer’s opacity until you find a good level. Either way the effect will be similar!

And there you have it – a quick and easy halftone effect that you can use to make neat backgrounds!