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: 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 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.

Posted by: Peter Andrease

Posted on: June 22, 2012 9:45 am

-

Creating a vector character in Illustrator can be a tricky process but it all really revolves around the Pen Tool, mastering this tool with a little patience is all you need to create yourself a great detailed character based on a drawing or image you have already.

To start this process you need to create your character outside of Illustrator as it is far too difficult to come up with a detailed character design while still trying to master your Illustrator skills. So whatever way you find easiest to draw your character go for, the best option is to break out the pencil and pad. If you struggle to think of ideas for a character or can’t think how certain body parts look then simply research other characters or images online to get an idea and create a new one in your own way.

Once you have your character designed, scan your file in and get the image into Illustrator then lock the image as your background layer. Now you will need to select the Pen Tool and select a nice visible but small stroke with no colour on the fill. Now start drawing around your image, make sure to get your curves smooth by tweaking the Pen Tool as best you can. This is where practise with the Pen Tool is key.

Once you have the outline of your character created you can now fill the areas in with some colour and gradients and remove the stroke colour from all shapes.

Shadows are a necessity to add a final bit of detail, so choose the areas that need shadow and you can either go to Effect > Stylise > Drop Shadow and add very subtle shades to your image. Areas that usual need a drop shadow are under the fringe of any hair and any overlapping areas.

You can then add overall shadow to your image by using the Pen Tool and drawing black shapes with a light transparency to areas where shadows would appear. Once you are happy, feel free to add any other simple effects or amendments to get your character right. Just remember that simplicity is key so use simple colours with subtle effects to make a really effective character.

Posted by: Peter Andrease

Posted on: June 15, 2012 9:28 am

-

This tutorial will show you how to create a vector shape with smooth round corners. These shapes can then be taken into photoshop and used to smooth corners on an image or graphic – this would be alot smoother then any other options that photoshop give.

Firstly, if you just want a round cornered square, simply select the ‘Rounded Rectangle Tool’ and you can either click once on the canvas and manually enter your corner radius and shape size, or alternatively click and drag to create your shape and with the mouse button held down you can click the up and down arrows on the keyboard to increase the size of your curve (corner radius).

If however you require a more complex shape like a star or a hexgon to be rounded you will need to add the ‘Round Corners’ effect. Firstly, select your shape by clicking and holding the shape tool to reveal the following:

If you want a star or polygon to have more sides simply click on the relevant tool then click and hold in the canvas and hit the up and down arrows again to do so. With the star tool you can even increase the length of the points by holding down the Ctrl key and dragging the mouse.

Once you are happy with your shape, you can add the round corners by going to Effect > Stylize > Round Corners, then enter the size of the radius you want (click preview to get an idea of how it looks) and hit OK.

Posted by: Peter Andrease

Posted on: June 8, 2012 8:03 am

-
  1. Locate the FTP details of the website and download the entire contents of the current site through an FTP Program, e.g. Filezilla. This should include the wp-admin, wp-content, wp-includes folders and all loose files in the root.
  2. Access the database of the site via the current hosts CPanel or phpMyAdmin and save a copy of the entire database. The Hosts CPanel may have an option to simply backup the database or if using phpMyAdmin go to the ‘Export’ tab, select ‘Quick’ export method in Format ‘SQL’ and just hit ‘GO’ to save to your computer.
  3. Now you have the full contents of your wordpress site, so on the new hosting you will need to create a new database. Again this would need to be done in your new hosts CPanel or hosting panel. When you create your new database make a note of the database name, username and password set.
  4. Once the database is created, you will need to add your downloaded database file. If using phpMyAdmin, select ‘Import’, browse for your database file and hit ‘GO’.
  5. Your database will now be in place, if you are transferring to a different domain name you will need to change the name in two locations on the database. So while in phpMyAdmin go to the wp_options table and the first row item should be ‘siteurl’, click ‘Edit’ and change this to your new domain name. Now go to Page 2 and near the top there will be a ‘home’ row with the site name in again, change this also.
  6. With your database ready you can now get the site in place. Go to your downloaded site and first open the wp-config.phpfile in the root and change the following in red to your new database settings:

    define(‘DB_NAME’, DATABASE NAME);

    define(‘DB_USER’, USERNAME);

    define(‘DB_PASSWORD’, PASSWORD);

    define(‘DB_HOST’, ‘localhost’);

    The MySQL hostname should always be ‘localhost’, unless your new hosting has a specific host type.

  7. Now access the FTP of your new site and remove or backup any files currently there, then upload your entire site to the root.
  8. The website will now be in place so if you need to change nameservers or IPS Tag then you can do this now. Once any transfers are complete, your site will show in the new location, so test the site and subpages in a browser and you should be all done! If any problems occur during this process then contact the hosting company who would be able to provide specific details.

Posted by: Peter Andrease

Posted on: May 24, 2012 1:50 pm

-

There are 3 ways of showing fonts on your website. Javascript, css and cufon, all have their advantages and disadvantages. I’m going to write off cufon straightaway as it uses flash which has the lowest support out of all three. Flash is unsupported on both iphone and ipad – I’d avoid it.

CSS

The quickest and easiest way I think is to use google web fonts, it’s not the best but it is free. At the moment there are over 500 font families on there and 90% of them aren’t great. So you’re going to have to do a lot of sifting through to find the right font. Here’s 10 I like….

  • Open sans
  • Josefin sans
  • Abril fatface
  • Dosis
  • Pt sans
  • Droid
  • Arvo
  • Gravitas
  • Jura
  • Yanone Kaffeesatz

You’ll have to watch out for what they look like especially if you’re going to use it in body text, I would recommend only using them as display and captions for some of them.

Okay another css font resource is font-squirrel. You’ll find some good fonts on here too, font-squirrel also has a generator on the site. So you can upload the font and get all the type that you need to work across browser, they even give you the html and css and even the cufon file (if you’re really want it). If you’re generating your own font be careful what you use because even if you’ve brought the font doesn’t mean you can go spreading it around the net, once it’s there and there’s a link to it anyone can download it.

Another one worth checking out is “The league of moveable type”.

JavaScript

JavaScript is a nice way off using fonts on your site too. I find the give a much cleaner look rather than the sharp edges you get with css fonts on some browsers. The only problem I find is that you get the default font load up before you see the javascript loaded font – the font-size could be wildly different and could cause the site to look bad before the javascript loads. Saying that there are work arounds for this and the speed of most peoples internet these days I don’t think it’s a problem. Two really nice font resources are Typekit recently acquired by adobe and Fontdeck. They both cost a various amount but there are free versions. I found that with Typekit you get an allowance of 2 fonts for 1 site plus a typekit badge in the bottom corner of the screen. The pricing structure is slightly different for both resources but both rely on amount of view per month.

I find the fontdeck site much nicer to use but both have really high-quality fonts like Din, Adelle, Futura, Freight Sans, Proxima Nova.

Both are CSS and JavaScript fonts are really easy to implement and both should be in a web designer’s toolkit.

Authors
Categories
Archives
Blogroll