Category Archives: Web Design

Why Should I Bother With Website Maintenance?

webmaintenance

It’s become a trend.

No longer content to bill you for the design of your website, web designers are now offering you ‘maintenance packages‘. This can seem strange and unnecessary when you’ve never had to maintain a site before, especially for the non tech savvy. Surely this is just another way to part you from your hard-earned cash! And besides, how intensive can it be? Surely you could handle your own without any difficulties.

With this email we’re going to take a quick look at what maintaining a website entails and who the best people to do so are.

Security Threats and Potential Hacking

Probably the most critical reason for keeping your website up to date is to prevent security issues like hacking. No matter what type of website you’re running chances are it has a few parts that need ‘updates’ each month or so. For WordPress (one of the largest website and content management systems around today) these components come in the form of themes (for your website’s appearance) and plugins (extra functionality for your website). Developers update these to stay in line with current security protocols and fix any loopholes they discover in the previous month.

Leaving this undone means that any exploits in the code can potentially be found by the less savory people on the internet and used to gain access to your site. From there they can lock you out (!), alter your content, or steal customer data.

The process of staying up to date is simple but cannot be ignored.

Performance Managing

Increasingly, the speed of your site will determine how many people stay on it once they visit. Each website now requires regular maintenance to keep the content running as smoothly and quickly as possible. Normally this entails clearing out the cache, removing any superfluous data, and repairing any site databases. Websites can also be monitored for any ‘performance’ bottlenecks such as an image file being too large, which can then be corrected by the designer.

Content Updates

These can include updating your About page to make more sense for potential customers or to bring it in line with where your business is currently. It can also mean making sure contact details are accurate, as are service details, FAQ pages, Footer Text, Logos- Basically any part of your website that has content can be updated. The reason this is important is clear; you don’t want to serve your clients out of date information.

Updating this usually involves changing the wording and images on each page, though it can also mean adding new pages as requested. This is also simple to do depending on the framework used for your website, though it can help to be shown the step by step process if you’re uncertain.

Adding New Articles / Products

If your website has either articles (also known as blog posts) or product lines then it can be helpful to have someone update these on a regular schedule. Often people will write the articles themselves though it can be requested that the web designer do it dependent on their skills, and then the web designer will format it for the site and post it to an agreed schedule. Products can be added, removed, stock managed, and edited if there are any changes.

Preventing Spam Comments

Can your customers comment on your website or articles? If so, you’re going to want to go through these comments every couple of weeks to weed out any spam that managed to get through and clear your comment cache. It’s also a good idea to respond to these comments as some customers and clients will use such forms to ask for assistance. A web designer can address simple technical problems if desired and forward any messages that require your attention.

Keep Design Current

Even if you keep your content up to date and your website running at peak efficiency, sometimes you just want a design change. Maybe your company’s branding has changed slightly; not enough to warrant a full site redesign but enough that you need some colors re-aligned to match the new style. Maybe your logo has been updated and you need your website to reflect that. Perhaps it’s fashionable in your industry to have a certain color combination and this changes each season. These are all things your web designer can help you with, usually for less than hiring them for that specific job would entail.

Who Should Handle the Work?

That depends on your level of comfort.

If you are tech-savvy yourself and have a good idea of what needs done, then there’s nothing stopping you handling these routine tasks yourself if your time and budget require it! However, if you don’t have the time to undertake these tasks frequently, or feel like you don’t want to get too bogged down in making your site ‘work’, it might be time to call in a specialist.

There are benefits to having the person that created your website handle these details; They already know the site inside out and have spent time getting to know you and your business. Further, by purchasing an inexpensive monthly maintenance package you can often get basic design tasks done as part of your agreement.

An alternative is to look into hiring a virtual assistant to handle the day to day details. After the initial time getting to know each other and managing expectations this can be one of the best solutions, especially if you don’t mind being charged per hour. Some even offer basic design services, though as with any hire you’re going to want to check out their portfolio first.

Want Help Right Now?

As a web designer and in addition to my normal services I also offer maintenance packages. Normally I’ll discuss these after working on a website for a client, but if you already have a website and just want the day to day details handled I’m more than happy to help out. Check out my services and rates.

This post was originally sent to my subscriber list (where they get more regular updates full of fantastic information like this) – Subscribe now for the most current updates!

How to Use Clipping Masks in Photoshop


Learning how to us clipping masks only takes a few minutes and it will be a skill you’ll use again and again.  When you create a clipping mask in one layer, it hides the contents of the layers above.  Your clipping mask can be whatever you like; it could be a shape or text.  I’m using text in this example and here’s what we’re going to achieve:

First thing you need is your background image.  In your finished product this is the image that will ‘shine through’ your text.  I’m using a tropical beach scene.

 

Next, create a new text layer and write the text that will form the object for the clipping mask.  It’s always a good idea to use a fat, bold font when creating clipping masks from text so you can really see the image behind.  I’m using a great, 100%-free font called Bevan (you can download it here for free: http://www.fontsquirrel.com/fonts/bevan).

 

Now we need to create the ‘mask’ layer.  Go to you your Layers Palette and click the “Create a New Layer” button.  You need to fill this layer with a solid color.  I chose white but you can choose any colour.

 

We now have the three layers we need to start the magic!  Go to your Layers Palette again and put your layers in this order:

  1. the beach image
  2. the text
  3. the new, blank layer

Your Layers Palette should look like this:

 

Now we need to Create a new Clipping Mask.  Make sure you’ve selected the beach photograph layer, then click on the Layers Palette menu button in the top-right of the Layers Palette Window.  Select “Create Clipping Mask”.  Alternatively, you can press ALT + CTRL + G.

 

Ta-da! It’s as easy as that!  Your clipping mask has magically appeared.

 

You can now make the final adjustments to the text to make it stand out.  I’m going to add a 3px stroke to the inside of the text.  Double-click on the text layer to bring up the Styles Palette and add a 3px Stroke:

 

That’s it, you’re done!  Here’s the finished product:

 

I guess the question that you are all wondering though is where can I use this skill? Well, there are a number of different places that creating beautiful text can assist you. These include:

  • Creating bold and noticeable headlines for pamphlets or leaflets that you plan to deliver.
  • Making a website really stand out from the rest with an attractive and professional design.
  • Using them in emails, so that people are immediately drawn to the design and don’t simply disregard the message as spam or yet another offer for them.
  • Making attractive cards or other handicrafts, either for sale or to send to someone on their birthday or at Christmas.

As can be seen, the use of this technique is only hampered by your own creativity. So, be original and get experimenting – the results can be totally spectacular!

Remove Some Tedium with the Photoshop Actions Panel

Here’s the first of our guest tutorials, starting with a rundown of the Photoshop Actions Panel with Jamie:

Using the Photoshop Actions Panel

Ever found yourself needing to carry out the same repetitive, mundane tasks on lots of different images?  For example, you might have a whole bunch of images that need to be resized before various colour adjustments need to be made.  Doing this for each image individually can take an age.  The Photoshop Actions Panel allows you to record and save these commands enabling you to process a large batch of images in seconds.

Find your way around the Actions Panel

If the Actions Panel is not visible, open it up (Windows > Actions or press ALT + F9).  Let’s familiarise ourselves with the panel.

  1. Action Set (This is like a folder, where you can store similar Actions in groups.)
  2. Action.  In this example, you can see some default Actions that are preinstalled with Photoshop.
  3. Recorded Commands. These are the different steps that make up your Action.
  4. Modal Control.  When some commands are run, a dialog box will pop up.  You can choose to toggle dialogs on or off for your Actions.  Turning off dialogs will mean your Action will use the value for the command that were set when the Action was recorded.
  5. Included Command. You can deselect or select a command from an Action, choosing whether or not it is performed.  If the checkbox is empty, that command will be skipped when the Action is run.
  6. Stop button.  Hitting the Stop button stops Action recording or stops an Action while it is running.
  7. Record button. This button starts recording of a new Action.  You can also append new commands to an existing Action by selecting a pre-existing Action.
  8. Play button.  Pressing play whilst an Action is selected will perform each command in the Action in turn.  If a command is selected within an Action, the playback will continue from that point onwards.
  9. Create New Action Set. A new Set will be created.  You’ll need to give your new Set a name.
  10. Create New Action. This will create a new Action.  You can colour code your Actions and even set up a keyboard shortcut for later use.
  11. Delete button. This deletes the selected Action Set, Action or Command. If you delete an Action from your Actions Panel, this cannot be undone!

Creating a new Action

Now you know your way around, let’s try using the Actions panel using a photograph.  We’re going to do several things:

 

  1. Sharpen the photograph
  2. Add a warming Photo Filter
  3. Resize the image
  4. Save it for web

 

So go ahead and open your image.  I’m using a photo of Dr. House:

Create a new Action Set by clicking on the Create New Action Set Button.  You’ll be asked to give the new Set a name.  Pick something descriptive.  Remember the Action Set is like a folder where you can store lots of different Actions.

Once the Action Set is created, hit the Create Action button to begin creating your Action.  Again, you’ll get a popup asking you to name your new Action, plus a few options.

Name your new Action.  It can be whatever you like, but I find it helps to be descriptive to jolt my memory when I see it again in the future.  You can also set up a keyboard shortcut at this point.  If you want to do this, simply select the key you’d like to use from the dropdown marked Function Key.  If you want to colour code your Actions to keep them organised, select a colour from the list.  Once you’re ready, hit record – this is where the magic starts!

 

You’ll notice the Record button is red, meaning that you are now recording.  Every command you run will be saved as a step within your new Action.

So, let’s start applying some changes to our photograph.  Firstly, sharpen your image: Filter > Sharpen > Sharpen.

Notice how this command has been added to your Action Set.

Now run through the other tasks:

Add Warming Photo Filter: Image > Adjustments > Photo Filter… Select Warming Filter (85) and leave Density at 25.

Resize the image: Image > Image Size… Reduce the image to 80%

Finally, let’s save the image.  File > Save for Web & Devices… save your file into the desired location.

 

Now you’ll see you have four commands under your new Action.  Hit the Stop button to stop the recording.

That’s it! You have now finished recording your first Action.

 

To run this Action on other photographs, simply open a new image, highlight your Action and hit play.

If you know how to do something in Photoshop, chances are you’ll be able to add it as a step in an Action.  Play around with the Actions Panel and you’ll soon find it’s one of the most useful tools in Photoshop.

Practical Graphics Tip #1: Easiest way to save time in Photoshop

Have you ever shown a client a design or layout (perhaps for an illustration or website) near the end of a project and had them ask to see a version with one or two elements changed?

Was this after hours of work polishing and perfecting each part, and did you have to re-do most of it to compensate?

If so, I’m probably preaching to the converted. If you’ve already discovered the benefits of using layers then this tip isn’t for you (stop reading!).

Still here? Excellent, we’re about to make your life a whole lot easier.

“Using layers within your projects can give you back hours of time normally swallowed by tweaks and changes.”

Design; The Time-Intensive Way

When we hear about people taking days or hours to re-design and accomodate slight tweaks from clients digitally, I wouldn’t be surprised if we thought their process looked something like this:

After reviewing the project brief (in this example, its a website) they gather as much information as possible about their requirements, becoming confident that they understand the client’s needs. They then hurry off and spend a lot of time getting the layout right, making button appearances and polishing the design – gaining client approval all the way. There may be different variations of the same file showing the buttons in hover or click states as well as the main file showing everything laid out perfectly in place.

The client asks for a slightly different layout. Our poor freelancer rushes off to re-make the main file, moving things around, re-doing parts and polishing it again until it looks ‘right’. It’s presented again, maybe another change is needed, the cycle repeats. This time with a more resentful freelancer.

On the sunnier side…

I can’t give you the magical telepathic ability to see straight into the minds of your clients and produce the project 100% correctly the first time. Using this simple technique I can, however, make alterations less painful (if no less annoying). Wouldn’t it be much nicer to take an hour (at the very most, simple tweaks usually take far less time) instead of a day?

You could be doing something more useful than re-shuffling a design; reading, learning something new, playing video-games, spending time with your family… maybe even (getting a little crazy here) working on a project meaningful to you.

5 Steps to Freedom

Having discovered we love extra time the following steps will show you a really simple way to save some.

1 – Open your project in Photoshop (or your graphics program). From looking at it, decide what the different elements of the design are and make a mental note of them.

2 – Heading down to the layers section, create a new layer for each of the different elements you’ve just identified.

3 – Name your layers! On its own this will save roughly five minutes (depending on the amount of layers) each time you need to make a change. Say what’s on that layer in one or two words.

4 – Cut each of your elements from the main layer, then paste them in place on their own layer. If you happen to have a background to your design, you can patch it up after everything’s been taken off of it.

5 – With your newly split project you can re-design, tweak, and play at your leisure.

Conclusion

Having everything on its own layer makes it easy to tweak layouts, colours, and effects without the need to edit everything else. It also means that you can create alternate layouts within the same file and compare them without constantly moving everything.

Very simple. Terribly appealing.

GP: Website in a Weekend; Hacking and Stuff

I completely forgot I said I’d link you!

Over the last couple of days my full story on what happened with our recent hacking has been posted on Website in a Weekend.  Since it was so long Dave kindly split it into two posts;

  1. Silence is Golden?  Not according to Heather
  2. After the Hack, Restore or Start Fresh? (Heather got Hacked!)

Stop by and leave a comment, all ‘secrets’ revealed. 😉

First Guest Post – Website in a Weekend

Hey everyone!

Just a quick post to let you know that my first guest post went live earlier today; it’s over at Dave’s site ‘Website in a Weekend’. You should check it out, there’s my usual level of hilarity but this time it’s directed towards CommentLuv and all the things we love about it.

Here’s your link through, but before you leave; for the rest of the bloggers out there – do you remember your first guest post? Where was it and why?

Have a great day everyone, and don’t forget to check out Dave’s site!

Three Sites that Play with Colour

Colour Wheel

Image hosted by Warmland Calligraphers

Today I’ve been playing about a bit with different colour tools and some colour theory (related to my college project) and I found these three gems.  Each is worth a look for totally different reasons, and they’re fun to use too. I don’t want to beat about the bush and have a really long, really serious post (or review) today so this is really just a bit of fun.  Non-graphics people should find it fairly interesting too I think, particularly from a blog/web design point of view.

Contrast-A

Assesses accessibility for font colour vs background colour.  But it does it in SUCH a cool way that it deserves a mention; interface is beautiful, and there’s so many useful features.  Worth a quick look and slaying at least five minutes.

Daily Color Scheme

Each day you get a new colour scheme to look at and/or use.  I keep thinking I should combine this with pieces of artwork each day…  seems perfect for challenges like that.  Exposes you to new and interesting colour combinations, though not likely to take more than a minute of your time.

The Sessions.edu Color Calculator

Lets you select hue, saturation, and lightness then see what other colours are directly compatible using various ‘types’ (Complement, Triad, Rectangle, etc) on the wheel.  Also provides you with the values for the colours and a quirky design to display the colours together.  Interesting and useful, though not quite as fun as the accessibility site.