With all of the resources you have to cope with when managing your business – email, website administration, twitter, social media etc. – there will always come a point when one of them stops working the way you expect it to. Whether your e-mails aren’t coming in or you’re seeing an error page when you try to do an action online – you’ll suddenly get stomped by a problem stopping you from completing your day to day tasks. When this happens I have small phrase for you to hold on to: “don’t panic”.

Definitions

Firstly I’ll make some quick definitions so that we’re all on the same playing field. There’s no need to confuse matters by calling something X when it’s Y.

• Operating System - Generally Windows or Mac. You will know this by a loading screen or the layout of your computer screen. Based on a lot of assumptions I would say if your bar at the bottom is a fixed straight line you’re on Windows and if it’s a selection of icons that pop up as you hover over them you’re on a Mac.
• Operating System Version - All operating systems come in different versions. For example, Windows has been released in 3.1, 95, 98, 2000, ME, XP, Vista and 7. Mac versions have been in numeric form (e.g. 10.1) and then with a ‘cover name’ for the release (e.g. Leopard, Snow Leopard, Lion). If in doubt: Windows = Start -> My Computer -> Right-click -> Properties and it should tell you; Mac = Apple Icon (top left hand corner) -> About this Mac.
• Software - Software is a program on your computer that you’ll generally use to do an action (e.g. e-mail software, browser software, accounting software).
• Software Version - All software comes in different versions (depending on when it was created). Generally you can get the version by: Windows = Help -> About [Name of product]; Mac = Toolbar -> [Name of Product] -> About [Name of Product].
• E-Mail Software - Software that you use to read, receive and send your e-mails (typically Microsoft Outlook).  E-mail software versions (see software versions) are very important to know.
• Browser - Software that you use to view internet pages. Examples include Internet Explorer, Google Chrome, Firefox, Safari and Opera. Browser versions (see software versions) are very important to know.
• Server - A big computer somewhere on the internet. You would connect to one to either view a website or receive your e-mails. We’ll call these Web Servers and E-mail Servers respectively. This can also be referred to as Web Hosting and E-mail Hosting.
• Cache - Anything you view online your computer will ‘cache’ (store a copy of) on to your computer for faster loading in the future. For example images on a blog.
• Uncache - To uncache (remove the stored copy and load everything fresh) while visiting the web page press: Windows = ctrl+f5; Mac = Apple+Shift+r. You may need to press these a few times. This can also be called a Hard Refresh.
• Content Management System - Also known as a CMS, a Web Administration Panel; this is online software (so not running off your computer) that you can use to edit your web site. Examples include WordPress, Drupal and our own Nourish. These can also have version numbers that will be found at the top of bottom of a loaded page.
• Web Address - Also known as URL (Uniform Resource Location), Link etc. This is the address that you are visiting a web page at. For example http://www.bbc.co.uk is the Web Address of the bbc homepage and http://www.bbc.co.uk/news/ is the Web Address of its news page.
• Internet Service Provider - the company that gives you access to the internet. This will not, in general, be the same company that provides your web and e-mail hosting. For example: Sky, BT, TalkTalk.
• Screen Shot - A stored image of your computer screen at a certain time. This website explains how to take and store screen shots. http://take-a-screenshot.org/

Sanity Checks

It’s always good to make a few sanity checks first. Firstly,

• Am I getting an error message that I could interpret its meaning?

As an example, if your e-mails aren’t coming through properly, you’re likely to get an error message in your e-mails software telling you that there has been a problem. There may be some funny language amongst the meaning of the error but see if you can interpret the problem it is having. Can it not connect to the E-mail Server? Does it say your login details are incorrect?

A few other sanity checks to make whenever you’re having an issue with software or the web:

• Am I visiting the correct web address? Have I filled in all the details correctly?
• Am I connected to the internet? If you’re trying to access your e-mails, try going to a web page that you haven’t been to for a while. Your computer may have cached the web page or error message so try uncaching it.
• Try closing and re-opening the program.
• Sometimes your computer can get itself in a little bit of a muddle and can be returned to its usual sane self by restarting it and trying again from there. Give it a go and see if the problem persists.
• Have you tried another computer? Or another piece of software that does the same job (e.g. you could try using a different Web Browser for web site related issues).
• Have you tried from another location? It could be your Internet Service Provider causing the problem so ring up a friend and get them to try from their house.

When all else fails

When you’ve tried what you can it’s OK to drop an e-mail or phone call to somebody who provides support for the product/service you’re using (for example you could contact me about your e-mail/web hosting if we provide those services to you). They’re there to make sure that you can use the services they’re providing.

However I would advise following the layout below to best interact with your support service. The general key to coming to a resolution quickly is to give your support service as much information as possible – they’re not mind readers.

What is the problem in relation to?

E-mails / Web Hosting / Content Management System etc.

What operating system and software are being used?

Detail Operating System Name and Version.

Detail all software being used and their respective version numbers.

What would you normally expect to happen?

When I do X on [insert Software name and version], Y happens.

What is happening now?

When I do X on [insert Software name and version], Z happens.

Are you getting any error messages?

I get the following error message: [insert error message] from the program [insert Software name and Version]

Include a screen shot

It’s easiest for a support engineer to help you if they can directly see what’s happening.

And with that I’ll leave you all to it hopefully knowing that all issues can be resolved without hitting the panic button. Getting a larger picture of what is happening and what is going wrong will not only help your support engineer but can potentially turn small problems into fixable ones that you can do and learn from yourself.

Tagged as in Tutorials, web development, Websites

In my last post we looked at how using colour blocks alongside an image can be incredibly inspiring and bring your blog to life. Now I want to show you how to do it. The tutorial below uses Photoshop but I’m pretty sure that the steps will be very similar if you have Photoshop Elements.

I’d love to know how you get on and please do comment with links back to your own blog so that we can see your lovely work!

Here’s what we’re making.

Step One: Create some space

Open your image in Photoshop and make your canvas a couple of cm/ 150 pixels or so bigger than the image at the bottom. You do this by going to Image> Canvas Size. To avoid space all around the image change the blocks at the bottom as I have and then the extra space will sit on the bottom only.

Step Two: Create your blocks

Remember drawing a rectangular block from our last tutorial? Well we’re going to do the same again. Depending on your preference you can make these blocks any shape or size. I’m going to go for landscape blocks.

I’ve also switched on the grid (by going to View> Show> Guides). When I’m designing normally I find these guides annoying, but for something like the blocks it really helps me be precise.

Create a new layer and draw yourself a rectangular marquee. Fill the block with your foreground colour. It doesn’t really matter at this stage what the colour is as we’ll do the precise colour picking later.

Step Three: Duplicate your colour blocks

So that we don’t need to mess about getting the blocks precisely the same size we’re going to duplicate them a few times. Ready? Here goes.

Create a duplicate layer by dragging your layer with the block on it (I’ve named mine block 1) over the Create a New Layer tool. This will duplicate your layer so that you have two blocks on top of eachother. Take the new block and move it to the right, a neat distance (I choose one square away) from the first block.

Select both layers and Merge together (I use “Apple E” command). The next job is to duplicate that layer twice so that you end up with six blocks.

It’s not looking inspiring yet but it is looking neat!

Step Four: Add some colour

The next bit involves a bit of creative license. My image is an Autumnal Colour Psychology mood board that we’ve created to illustrate our new website. I want the colours to represent the warmth and vibrancy of the Autumn colour personality so I need to be sure that the colours I end up with are warm, intense and muted. When you colour pick from a photograph, you often end up with quite distorted colours because the shadows add a lot of grey into the colour tones, so you may need a few stabs to get exactly what you’re looking for.

Use the Eyedropper tool to pick colours from your image. On my tools palette – left hand side of my screen it’s 6th down and looks like a pipette (remember those from science?!).

Once you have a colour you’re happy with use the paint bucket tool to drop your colour onto one of your blocks. For this to work remember you’ll need to select the right layer. If you flood the entire screen with colour you’re on the wrong layer! Now that I’ve done my pixel work you’ll notice I’ve turned off my grid so I can see what I’m doing.

How’s that? Delicious I think!

Step Five: Finishing off

It’s looking gorgeous, but I just need to do a couple more things before I use my image on the blog.

That chunk of white at the bottom is annoying me so I need to use the crop tool to cut it down to size. On second glance that teal on the left hand side is feeling slightly disharmonious for the Autumn palette. It’s a bit cool, so I’m going to adjust the colour and warm it up a bit. I wouldn’t expect you to do this, but for a colour psychology freak like me it’s a bit of a must…

Finally I need to save my image for web and try and keep the file size down to about 70-80kb so that it doesn’t take an age to load. This doesn’t always work, but on a file of these dimensions it should be fine.

Over to you

I’d love to know how you get on with these tutorials. If you find them useful, then I’ll keep going Do let me know, and please do post links to your handiwork!

Tagged as , Photoshop tutorial in Blogging, Graphic Design, Tutorials

Most blogging packages have a “caption” tool, but if you want to add a beautiful caption then you need to get creative and use an image editing programme.

Now for my creative work I tend to use Adobe Photoshop (for web and creatively editing images) or Adobe InDesign for the print work. I’m going to show you how to add a gorgeous caption using Photoshop. If you have Photoshop Elements (which is a great non-pro tool at just £50ish) then the workflow is likely to be very similar.

Here’s what we’re creating.

Step One: Pick your font

I like to pick a font that works with the image and with my brand. If you have a strong brand identity you’ll probably have a range of fonts that you know work for your business. It’s a good idea not to go ballistic, especially with the really fancy fonts. Hundreds of fonts peppering your blog posts can get a bit overwhelming if you’re not careful, so go steady, but don’t be afraid to mix it up.

These deer are very elegant creatures and I shot the image in Royal Richmond Park so I’m going to go with something that feels a bit elegant without being prissy.

2. Add the opaque band to help the text stand out

Create a new layer in Photoshop and draw a rectangular marquee about the shape you want (don’t worry about perfection, we can fiddle about with it later). Add some colour using the paint bucket tool and deselect your marquee.

Excuse the vile shading – I wanted to highlight the important area to you (the un-shaded bit). Let me know if it’s helpful or not as I’ll take a view in the next tutorial.

3. Move the shape beneath your text

Move the rectangular shape layer beneath the text layer (see image below) so that you can see your text again. To do this simply click on the relevant layer and drag down below your text layer. At this point your shape will still be a solid colour. You can choose any colour you like – I’ve gone for white.

Then knock back the shape to an opacity you’re happy with. To do this simply move the slider in the appropriate layer until you have a look that you like. It’s a bit of a personal thing and often depends on the colours used and the image that sits behind it.

The finished article. Over to you now.

And that really is it! Easy when you know how. Let me know how you get on, and please do post links to your own experiments on your blog. I’d love to take a look!

Tagged as , Photoshop tutorial in Blogging, Graphic Design, Tutorials