Posted by: Peter Andrease

Posted on: September 11, 2012 9:06 am

-

Sliders can be a good way of showing multiple news stories while saving space but done incorrectly they can be an eyesore. Heavy animations or overuse of graphics can really make damage the rest of the content on the page.

Sliders have been around in web design for a long time, first it was flash animation sliders and then jquery sliders. Done right users will enjoy cycling through a slider to find a story. Done wrong a user will be overwhelmed with information and leave or find themselves clicked into a page they did not intend to be thus getting frustrated and eventually leaving.

Slider

Do:

  • Use a slider if you think you’re desperate to get more news near the top of the page and don’t want to lose space on the page.
  • Use a slider if you’ve got relevant information you think a user will want to cycle through, not just because everyone else is one.
  • Use a discreet transition, recommended is a fade or simple slide effect. Unless you are a selling your jquery or animation skills don’t overkill it.
  • Use pagination or arrows. It’s good to show the user how far they are through the slider, how many stories are left. Try to have numbered pagination if they’re stories or if they’re less text heavy then bullet points will suffice. Arrows can look nice too but I recommend using them when the slider is hovered over, if you’ve already got a click here button in the slider, pagination bullet points at the bottom and a left and right arrow the user has 3 calls to action in a small space. Try to keep in minimal.

3d Slider

Don’t:

  • Have too many irrelevant slides, users can get distracted easily.
  • Use blinking illustrations and flashing text when you’ve already got an animated banner – this is a headache for the user.
  • Use click here or read more buttons in your slider, use buttons to your advantage by helping let the user know what they’re clicking on. If they skimmed the story, suddenly seeing a read more is not going to help, but if it says watch video or view experiment then that’s more effective.

Posted by: Peter Andrease

Posted on: September 4, 2012 1:26 pm

-

In this tutorial we’ll be using two resource files. You can download them for free at these two links:

Road
Sky

1) Open up the mountain image in photoshop and add a selection to the mountains in the background. I used the quick selection tool and a radius of 30px. You might want to use the pen tool or the polygonal if you want a finer selection.

Create a selection

2) Create a new layer and add a mask to it.

mask

3) Open up the sky image and add it to the landscape file. Clip it to the mask selection and resize it so it fits nicely into the background.

merge the layers

4) Use the patch tool to get rid of the car, I had to use a brush to get rid off a slight blur the patch tool created.

patch out the car

5) Add a color balance adjustment to the landscape using the below.

Add a a color adjustment

6) You should be left with the final image.

Final Image

Posted by: Peter Andrease

Posted on: August 28, 2012 2:33 pm

-

Let’s finish off last week’s tutorial with part 2. If you missed it click here to see part one.

We’re going to add two buttons either side and some text in the middle. The main part of understanding in this is adding layer styles, they may seem complex but the best way to learn is by playing around with them yourself.

Final

1) Open up the psd we were working on from last week. Add create a new layer. Grab the ellipsis tool and draw a circle that fits in the bottom part of the radio like the below. Fill it with colour: #707070.

First step

2) Now add the following layer styles.

Styles1

3) Duplicate the layer, reduce the fill and add the following styles:

Styles 2

Styles 3

Styles 4

Styles 5

Styles 6

4) After adding all the styles you should now have something like the below:

Second step

5) Duplicate the layer and move it slightly up then move it to the other side.

6) Add in the text “Volume” and “Tuning” underneath the controls. Also I’ve added a vague floral pattern to the face plate. I added it as white and took the opacity down to 30% so it was only just visible. Finally I added in the some text in a nice script in the middle and that’s it! Here’s the complete version below – good luck!

Final

Posted by: Peter Andrease

Posted on: August 21, 2012 12:41 pm

-

This week let’s create an fm tuner in photoshop from scratch. This tutorial shouldn’t take more than an hour and is probably aimed at the intermediate user. I’ll be using brushes, shapes and blends so if you need practice in any of these read on!

step four

1) Start by opening a new document in photoshop. I chose the size 1000 x 379 px. I filled it with a nice black background that sort of resembles a car dashboard from subtlepatterns.com.

2) Next draw a rectangle inside this leaving around 50px padding between the canvas and the rectangle all the way round. Fill it with a nice pattern, mine came from subtlepatterns.com again. Next add a #181818 stroke of 8px. Next draw a rectangle a little bit higher than half the height of the main rectangle and fill with #6f6f6f.

step-one

3) Next control click on the mask for the smaller rectangle and add a new layer. Choose a soft brush and create a shadow around the edge of the rectangle to give it some depth.

4) Lets add a white stroke to the bottom of the tuner to give it even more depth. Duplicate the rectangle then lower the fill to 0%. First add a stroke of 3px inside and color #ffffff and then rasterize the layer so we can delete some of the line. Grab the eraser and drop the opacity to about 30-40% making sure the hardness is 0% proceed to erase the whole of the top line and fade the side lines. Lower the opacity to about 50%. After that you’re done with the background for the moment so group it up and lets move on.

step two

5) Next let’s create the lines for the tuner. Add 3 2px lines of the same length and same spacing on the right of the tuner. Then add a rectangle of 80px high at the bottom spanning the whole width of the tuner, this is going to be used in the next part of the tutorial for the knobs.. Make the smaller lines #898989 and the rectangle. Add in all the numbers and “FM Stereo”, I used Helvetica Neue, try a nice sans-serif font to gain the same style

step three

6) Lets then create the red button on the left of the tuner. Create a new layer and using the ellipsis tool draw a small circle. Fill it with red and the give it a stroke of 5px # 7d7d7d outside. Next add bevel and emboss. Choose Inner Bevel, smooth, depth 1000%, direction down, size 6px, soften 5px, angle -90 degress. Highlight opacity 87% and shadow opacity 15%. Add a grainy pattern overlay and reduce the opacity to make it slightly duller.

7) Create a 2px blue line to use for the tune location and place it somewhere nice and balanced.

step four

8 ) Let’s give some gloss to the face of the tuner and then we’re done on that part. Using the pen tool draw a curvy line to opposite corners of the tuner. Make the selection and then using a soft white brush colour the selection from the center. This will give the illusion of a reflection.

step four

9) Save it and then come back next week to see part two where we’ll be adding the knobs to the bottom of the tuner.

Posted by: Peter Andrease

Posted on: August 15, 2012 9:02 am

-

In this tutorial we’re going to create a red ball from scratch adding light and shadows to give it the illusion of being 3d. This is a basic tutorial helping you get to know a few tools in photoshop a bit better and learning how shadows and light are the most important thing in creating a realistic drawing in anything.

final

1) First of all draw a perfect circle using the eliipsis tool, give yourself enough room on the canvas for the shadow we’re going to be adding in a minute.

first

2) Add a gradient overlay style to the circle we just created. I kept the blend mode normal changed the opacity to 34% and the gradient from white to transparent. Change the style to radial and the angle to 90 degrees. Next change the scale to 75% and you’ve created the illusion of a light shining directly down onto the ball.

second

3)  Next lets add some shadow underneath the ball so it looks like its sitting on something. Create a new layer underneath the ball. Draw an oval the same width of the ball and a third of the height. Fill it with black and choose Gaussian blur. For radius slide it up to about 18 pixels and you should have a shadow forming. Play around with the opacity until it looks the right sort of shade, mine was about 34%. Duplicate the layer and transform it to about half the size so it’s darker near the base of the ball.

third

4) Next lets create the shadow at the bottom of the ball, this will give it depth and realism. Add a new layer above the circle and creat a clipping mask. Grab a soft brush with black selected and change the opacity down to about 30%. Carefully stroke along the bottom of the ball making it darker near the bottom gradually getting lighter further up the ball.

forth

5) There you have it a realistic looking ball created in under 15 minutes!

Posted by: Peter Andrease

Posted on: August 7, 2012 3:18 pm

-

First open up you image in Photoshop. I’ve chosen the below image and I’m going to focus on changing the colors in the tie and shirt.

first

Once the picture is open pick the select tool that favours it the best. I’ve chosen the Polygonal Lasso Tool as it’s going to be the quickest and easiest in my opinion. Here’s the selection below.

second

Next create a new layer in the layers panel. Open up the adjustments panel if you haven’t already and click on Hue/Saturation. Once clicked on the selection will be immediately turned into a layer and ready to work on.

To change the colors move the hue slider first to change the colours. The great thing about it is the two colors in the tie will keep their color balance and the image should keep it’s balance. The further you move the slider the further along the color spectrum you go so you may need to either increase or decrease the saturation underneath. Play around till you get the colors you were looking for. Here’s what I came up with below.

third

You can always revert back to the original image by deleting or hiding the layer.

In this one I’ve changed the color of his shirt too. By using the color selection tool and raising the fuzziness I managed to select most of the blue before adding the hue.

forth

 

Posted by: Peter Andrease

Posted on: July 31, 2012 3:25 pm

-

Photoshop is a program that can take a lifetime to learn. You’ll be doing one way for years and then may discover there’s actually a quicker way or more cleaner way do it. I’m going to go through a few keyboard shortcuts and some ways I like to work in such a great program.

The color range tool

So we all know the different types of selection tools:

  • Marquee
  • Lasso
  • Polygonal Lasso
  • Magnetic Lasso
  • Quick Selection and magic wand
  • Pen tool

You might not have heard of the Color range tool but it’s a good one to know in the right situation. Find it on the menu ‘Select’. Block colours that are scattered around an image can be quickly selected with the click of the button – rather than having to go around the image and click on each instance of the colour.

 

Some useful Photoshop Windows Keyboard Shortcuts

 

  • Transform: Ctrl + T
  • Hue/Saturation: Ctrl + U
  • New layer: Ctrl + Shift + N
  • Duplicate Layer: Ctrl  + J
  • Save: Ctrl + S
  • Copy all layers in a selection: Ctrl + Shift + A
  • Preferences: Ctrl + K
  • Change Document: Ctrl + Tab
  • Fill layer with background colour: Alt + Del

Posted by: Peter Andrease

Posted on: July 17, 2012 4:16 pm

-

When you’ve got a big project lined up its important to get the foundations down before you get to excited with jumping into the design or getting it live. You’re faced with a massive process that requires you to get it down as early as you can if you want to stop scope creep or complications later on in the design or the build or even after the site is live. Let’s begin.

Notes/sketches/resources

Hopefully you’ve had a lot of meetings and guidance from the all they key players in process. There might even be more along the line but the important thing here is to get as much information as you can about the purpose of the site, the audience and who’s signing it off! The third one is probably going to be the most important. Write or sketch down all your ideas about the site. Get as much down as you can as you can always refer back to them later. Once these are all down start with a wireframe.

It is important to start with a wireframe in a big design process. Here is a quick wireframe sketch below:

wireframe

This is a very basic one but you get the idea.

Posted by: Peter Andrease

Posted on: July 10, 2012 4:16 pm

-

Last week I talked you through the benefits of using Less.css in your next web project. If you missed part one click here to read it first. I’ll be rounding up the tutorial with info on “Nested Rules” and “Functions & Operations.”

Nested Rules
Nested rules allow you to specify child selectors to keep your stylesheet smaller and easy to navigate. It also forces you to keep your stylesheet much more organised. See below how it works:

Functions & Operations
With Functions and operations you can add and subtract numbers in your stylesheet. It’s complicated but can save you a lot of time and dramatically reduce the size of your less stylesheet. This just touches on what’s possible with functions and operations in the less css. See below:

As you can see less.css is a very useful css language and a lot of people are using it now. After a small learning curve you’ll find yourself using it often, it saves time and makes your css much more easy to go through when re-visiting.

Posted by: Peter Andrease

Posted on: July 6, 2012 2:00 pm

-

The benefits of Less are clear as soon as you understand it.

So what is it?

Less speeds up css development in several different ways. It can be used for the following:

  • Variables
  • Mixins
  • Operations
  • Functions

Variables

If you’re any kind of web designer you’ll know what a variable is. You specify something and then call it later somewhere else as many times as you like and once you’ve changed the variable all the calls will change too. So imagine having all your titles across a site in the colour black, the site is huge and you’ve used all the h’s and added special classes to target special circumstances. Imagine being able to change it one line of code! Well you can with less…

variables

Mixins

Mixins means you can put all of the properties of a class into a different one. This means instead of writing out the code or copying and pasting it again. You can use a mixin which works a lot like the variable. Mixins also allow you to add functions, see below….

mixins

Next week we’ll round up the tutorial with Nested Rules and Functions & Operations.

Authors
Categories
Archives
Blogroll