How to Resize & Crop Images Without Using Photoshop

You’re responsible for the website content and you want to swap in a new image. You’ve found the image, you know where you want it to go, yet you need to crop and resize it. There’s no budget for a designer, you don’t know how to use Photoshop and this problem is really annoying.

So is there a way to crop and resize images without needing Photoshop or a similar application? Of course. And it’s free.

Let’s take the WPF Therapy site as an example.

It’s time to update this right hand image (highlighted in red).

WPF Therapy Screenshot

How to resize your image

1. Find out what size your image needs to be.

Click and drag the image onto your desktop. Left click on it and ‘Get Info’ on the pop that appears.

Image information pop up

Right Click on the image to bring up this screen. Then click on ‘Get Info’.

Get Info pop up

The information you need here is the ‘Dimension’.

This gives you all the information you need. The section you need to look at specifically is the ‘More Info’ section where it tells you the dimension.

In this case, dimension is 200 x 110.

This means it is 200 pixels wide and 110 pixels high.

 

2. Click here to open up PicResize in your browser. This is a free online application.

PicResize Screenshot

 

3. Click on Load a Picture

 Load a Picture

4. Follow the instructions and when you have chosen your image, click on ‘Load Picture’.

 Load Picture

5. Your image will load. You will be able to see in the top right hand corner the following:

Selection – what size of image you choose

Size – the size of the image uploaded

Position – the position of your cursor over the image

Information area

 

In this instance, the image is 1024px x 1024px large which means it is best to make this smaller first before you crop it to the right shape. Otherwise, you will only see a part of the image when you crop it.

 

6. Click on the Resize button on the left and choose your dimensions. Click on the percentages in the pop up, or make it a custom size. Ensure that the ‘Lock Aspect Ratio’ button it ticked. Then click on ‘Apply’.  Remove the pop up by clicking on the small cross in the corner of it.

 Resize Button

7. Now to resize your image. Click and drag on your image. This will bring up a bounding box. Keep an eye on the top right hand information area as this will tell you when you’ve when you’ve got your size correct.

 Crop Image

You can click and drag on any of the corners of the bounding box to adjust the size. You can also click and drag the whole box (position the cursor inside the bounding box) to position it over another area of the image.

When you have the bounding box positioned and sized properly, click on the Crop button on the left to finalise this.

The screen will show you the finished product. You can also add ‘extras’ such as text to this image.

 

8. Save it. When you’re happy with your image, choose from the options on the bottom left.

Save Image

 

Choose Format: Select JPG if it’s a photo or image with a lot of gradients. Select GIF if it is an image made up of block clour.

Save to :Choose ‘Save to Disk’ to save it onto your computer. This will most likely be saved in your Downloads Folder.

 

And there you have it. Your image resized and cropped and ready to be uploaded!

 

 

How to train your website: LESSON FIVE: Accessories for your website

When you have an animal as a pet, you will also find that you need accessories for it. For example, a water bowl, a food bowl, a collar, a lead, a couple of toys, even perhaps, a dog house. The amount of accessories out there are seemingly infinite and it can be hard to work out which would be best for your animal. Here are just some of the basic accessories and tools that will help your website grow strong and healthy when used in the right way. The Digital Bandit - Accessories for your Website

Google Analytics

It is imperative to have some kind of tracking tool collecting data from your website. Google Analytics is free and relatively easy to install and use. If you have more than one tracking platform that you use, be aware that you will get varied results, as each will use a slightly different way of recording data. For a more accurate view of your website’s data, ensure you use one consistently. Ensuring you have analytics for your website means you can better judge what’s working and what’s not on your website. Is one section of your website getting considerably more traffic than the other? Why? Has your traffic suddenly dropped off? You need to know about it and why. According to Google’s Penguin and Panda algorithms, your site is likely to be judged by (and not exclusively on):

  • The amount of content above the fold – the fold is the point at which a user has to scroll to see the content further down the page.
  • The bounce rate for a page – this is the percentage of people who enter your site and ‘bounce’, ie, they leave straight away without looking through other pages.
  • The click-through rate of the page – this is the number of pages that a user clicks through before leaving your website. It is important to ensure that users don’t just stop at a ‘dead end’ when they reach the bottom of your page.
  • The number of clicks a page gets in results – the more a user clicks through from a page through to other internal pages, the higher Google rates it. This can be particularly effectively where one page acts as a ‘landing page’ to other areas of your site.

Use Google Analytics for: understanding your website better and knowing where improvements can be made. http://www.google.com/analytics/ Free to use.

Google Keyword Tool

This will help you understand the best keyword to use for your web pages and blog posts. The Google Keyword Tool will allow you to understand which keywords are more competitive and which are more feasible to rank for. You can also use this to understand what else people may be searching for. This is definitely a tool to use before you start writing your blog post. Use Google Keyword Tool to: set the foundations for a blog post that’s optimized for search. https://adwords.google.com/o/KeywordTool Free to use.

Google Drive (formerly Google Docs)

Whilst this isn’t strictly speaking a tool that will help you run your website, it is one of my favourites for collaboration with others and for writing down inspiration as you come across it. You can choose from a Word document, PowerPoint Presentation, Excel Spreadsheet, an online Form (great for when you want user’s feedback) and Drawing (perfect for if you want to add captions to an existing image).  Each document can be shared with more than one person, either with as a Read-Only or with editing capabilities. You can even download the online document that you produce. This saves you the hassle of remembering your notebook as you can access this online from any computer. If for example, you are in charge of the company Twitter or Facebook account and others in your company want to add some of their own updates, they can share it with you there for you to approve and upload. Use Google Drive for: collaborating with others and keeping ideas or content in one place https://drive.google.com/#my-drive Free to use.

Google Alerts

If your To Do list is already piled high then make life that little bit easier for yourself by ensuring you’re keeping up to date with your industry news easily and conveniently. In Google Alerts, you can set a search query for whatever you like, choose what kind of results you want it to send you (e.g. everything, news, blogs, books etc), how often you want to receive these and voila!, you will receive updates to your chosen email address. This is especially great if you’re looking for inspiration for new blog posts, and even to keep up to date with any mentions of your company or product online. Use Google Alerts for: keeping up to date with industry news easily and quickly. http://www.google.com/alerts Free to use

Google Alerts Screenshot

Set up Google Alerts to keep up to date with industry news online.

Social Media Accessories

These are all specific platforms that will help you manage your social media platforms.

Bitly Link Shortener  

Bitly is most useful when posting links to Twitter. With only 140 characters, it’s important to use each character wisely. Whilst Twitter will automatically shorten links for you, however, with a tool like Bitly, you have the added bonus of stats. This allows you to understand how successful your tweet was as you can see how many people have clicked on your link. To use, just copy and paste your link into Bitly. It will then shorten it and you can copy and paste it back into Twitter or wherever you would like it to go. The only downside of shortening links is that users can’t tell where your link is going to. Sometimes, people use this inappropriately by telling a user one thing and linking to an entirely different site to get traffic. However, if you consistently link people to where they expect to go, you should build up trust with your followers. Use Bitly to: maximise characters in your tweets and track the click-throughs you’re getting from them. https://bitly.com   Free to use.

Bitly Screenshot

Use Bitly to shorten links and to find out how many click-throughs from them you receive.

HootSuite

Use HootSuite to schedule your tweets (perfect if you’ve got a busy week coming up and you want to write these in advance. Also very useful if you’re organizing an event – you can make sure it’s getting promoted right up until the day) and share them easily with social networks such as Facebook, Twitter, LinkedIn, Google Plus etc. By investing time with HootSuite, you can ensure that your social media networks are continually active months in advance, even if you’re busy on other things. Use HootSuite to: update your social media networks even when you’re not around. http://hootsuite.com/dashboard Free to use.