ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

Cropping and resizing images for the web

Updated on June 10, 2015
Source

Today, a fellow-writer here on this site asked me how to create uniform square images such as the ones you see on the right. In fact, it's very easy following a few simple steps.

I often use Photoshop but don't worry if you don't have that program on your computer. The steps are the same on any drawing program, even the free ones you can find on the internet. For the purposes of this step-by-step demonstration I've used a free web-based service, Pixlr. (www.pixlr.com)

The first thing you need to do is to save the images you want to crop. If I'm making them for a specific article, such as the one you see on the right, I create a new folder and save them there.

Then it's simply a a case of proceeding like this. See the step by step instructions.

Materials:

  • Computer

Tools:

  • Simple drawing program

Source

Instructions:

1. On the right, you'll see the image I want to crop. I simply add it to the drawing program (file > open > new). I like the idea of cropping Churchill and the word 'Britain' into a square.

Source

2. I'm going to use the cropping tool which is the one you see in the image - the square which is located top left on the tool pane.

It might a in a different location depending on the program you use, but just look for the square with the overlapping edges.

Click that icon to use the tool. You can see in the image above how I have dragged the tool to form a square. As you drag, keep your finger on the SHIFT key and that will ensure that the proportions are correct and the square is ensured.

If this doesn't work in your drawing program, don't worry and simply create the square by eye. The important thing is that all your images are the same WIDTH in order to get the uniform look you see above; slight variations in height won't matter.

If you're using Pixlr,set the constraints (you'll see them at the top when you select the cropping tool) to 'width 1' and 'height 1' - this will ensure a square.

Source

3. Once you have the square outlined,as shown in the first image, click the crop tool icon again. You'll find that the image is instantly cropped to square. See the image on the right.

If you find that the image isn't exactly right, hold down the CTRL key and then press the Z key.This will undo the crop and you can try again.Now we just need to resize the image.

Source

4. t the top of your screen, you'll see the word 'image'. Click on that and a drop down list will appear. As you can see there are several options but the one we need here is IMAGE SIZE.For this demonstration, I am saving all images to 90 pixels square. Remember, don't worry if the height is slightly different - 89 or 92 - it's getting the widths correct that makes the images on the page look uniform.

Source

5. This box - or something similar depending on the program you're using - will now pop up. Originally the dimensions shown here were much larger but you can see that I have adjusted them both - width and height - to 90.In the next step, you'll see that I now have a tiny image of the right size.

6. Here you can see the final cropped and resized image. This is now the perfect icon to add to my page.Now it's simply a case of saving the image.

7. I think that everyone is familiar with file > save.

If you prefer, which I do because it means I can work faster, simply hold down the CTRL key and press the S key.

A dialog box will pop up and you can name your file and choose where it's going to be saved. I usually save them in the same folder as the originals but add 'crop'.

For example, the original may be 'churchill.jpg' and the new image 'churchillcrop.jpg'


Photoshop is incredibly expensive but if you're looking for the 'lite' version, take a look at the program below. For simple editing, such as cropping and resizing, plus other simple image manipulations, it's excellent.Have fun and if you have any questions, just ask.

Guestbook

    0 of 8192 characters used
    Post Comment

    • BritFlorida profile imageAUTHOR

      Jackie Jackson 

      4 years ago from Fort Lauderdale

      @David Stone1: Haha Dave :) Thank you for such lovely comment.

    • BritFlorida profile imageAUTHOR

      Jackie Jackson 

      4 years ago from Fort Lauderdale

      @Brite-Ideas: I hope so.Thank you!

    • David Stone1 profile image

      David Stone 

      4 years ago from New York City

      Excellent. If you can make Winston Churchill square, you've done something. Seriously, very nice, easy to follow instruction. Thanks.

    • Brite-Ideas profile image

      Barbara Tremblay Cipak 

      4 years ago from Toronto, Canada

      great instructions for people - I know so many will find this helpful

    • BritFlorida profile imageAUTHOR

      Jackie Jackson 

      4 years ago from Fort Lauderdale

      @Corrinna-Johnson: Thank you Corrinna!

    • Corrinna-Johnson profile image

      Corrinna Johnson 

      4 years ago from BC, Canada

      Love the look of your list! Thanks for the very helpful tips!

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)