{"id":16749,"date":"2022-02-10T13:39:51","date_gmt":"2022-02-10T18:39:51","guid":{"rendered":"https:\/\/carleton.ca\/webservices\/?p=16749"},"modified":"2024-06-08T22:07:33","modified_gmt":"2024-06-09T02:07:33","slug":"a-pixlr-is-worth-a-thousand-words-basic-image-editing-with-pixlr","status":"publish","type":"post","link":"https:\/\/carleton.ca\/webservices\/2022\/a-pixlr-is-worth-a-thousand-words-basic-image-editing-with-pixlr\/","title":{"rendered":"A Pixlr is Worth a Thousand Words: Basic Image Editing with Pixlr"},"content":{"rendered":"\n
\n
\n\n
\n
\n
\n

\n A Pixlr is Worth a Thousand Words: Basic Image Editing with Pixlr\n <\/h1>\n \n \n <\/header>\n\n <\/div>\n\n <\/div>\n\n <\/div>\n<\/section>\n\n

So you have an image to add to your website but it\u2019s not the right size, shape, rotation, or a thousand other little things that keep it from being picture-perfect. Well, in the age of free image editing software, fixing your pixels has never been simpler.<\/p>\n\n\n\n

Of course, you\u2019re free to use the software of your choice, but if you\u2019re overwhelmed with the possibilities (or frustrated with your current editor of choice), this post will teach you the basics of image editing with the free, in-browser image editing platform, Pixlr<\/a>.<\/p>\n\n\n\n

Pixlr has two editing platforms: X \u2013 their \u201cQuick and Easy\u201d editor and E \u2013 their more advanced editor. This tutorial will cover the basics of Pixlr X and common edits that you may need to make in the course of working on a website.<\/p>\n\n\n\n

Uploading an Image<\/h2>\n\n\n\n

From the home page, you will have three options for uploading an image:<\/p>\n\n\n\n

    \n
  1. Click the blue Open Image<\/strong> button in the first box. This will let you upload an image for your device.<\/li>\n\n\n\n
  2. You may start a project without an image using the Create new<\/strong> button. After picking your dimensions, you can then upload an image to the canvas using\u00a0Add Element \/ Image\u00a0<\/em><\/strong>and then selecting the\u00a0Add Media<\/strong> button at the top.<\/li>\n\n\n\n
  3. You could also upload an image via its URL using Load url<\/strong>. However, the resolution is not always as high as if you were to download and open the image, using the first option.<\/li>\n<\/ol>\n\n\n\n

    If your image is large, Pixlr may ask if you want to resize it. Choose whichever option is appropriate for the amount of pixels your picture will need. For example, on 杏吧原创 websites, banners should be 1600px wide by 700px high, while thumbnails should be a minimum of 300px by 230px, or a maximum of 800px by 600px.<\/p>\n\n\n\n

    Cropping and Rotating<\/h2>\n\n\n\n

    One of the most common edits you\u2019ll likely have to make to an image is to change its size and\/or dimensions. You can do this easily using Pixlr.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    From the left-hand tool bar, click on the Crop & Rotate<\/strong> option.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    You will be shown a menu with the following options:<\/p>\n\n\n\n

      \n
    1. Using the Width<\/strong> and Height<\/strong> fields, you can adjust the size of the crop area in pixels.<\/li>\n\n\n\n
    2. Drag the Straighten<\/strong> slider to the left or right to rotate the image while keeping the aspect ratio and shape the same.<\/li>\n\n\n\n
    3. You can rotate the image clockwise or counter clockwise, as well as flip it horizontally or vertically using the four buttons under Rotate & flip<\/strong>.<\/li>\n\n\n\n
    4. Select aspect<\/strong> will be toggled off by default, but by opening it, you can crop by ratio or size using the Width<\/strong> and Height<\/strong> fields. Using the size option here will resize the image to the entered dimensions. This section also includes a list of pre-sets for different image uses such as social media posts, profile pictures, and banners.\"\"<\/li>\n<\/ol>\n\n\n\n

      Darkening an Image<\/h2>\n\n\n\n

      When creating an image that text will appear over top of (such as a banner), you might need to darken the image so that the text appears more clearly. Keep in mind that if you are adding this image as a banner to a 杏吧原创 website, there are options to darken the banner within the website itself.<\/p>\n\n\n\n

        \n
      1. Navigate to the Adjust<\/strong> menu, either by clicking the Adjust & filter<\/strong> icon or by clicking the Adjust<\/strong> button under the Arrange & style<\/strong> menu.\n
          \n
        1. You will need to have the layer both selected and unlocked.\"\"<\/li>\n<\/ol>\n<\/li>\n\n\n\n
        2. From this menu, open the Light<\/strong> dropdown and move the slider under Brightness<\/strong> to the left. 杏吧原创 -50 should be enough to have white text appear clearly over the image, depending on the original brightness.\n
            \n
          1. You can test this by adding text to the image (Add Text<\/strong> in the side menu, then add default text<\/strong>). Be sure to remove this text after you are done testing the brightness. \"\"<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n\n\n\n

            Saving an Image<\/h2>\n\n\n\n

            Once you\u2019ve completed your changes to the image, be sure to save it!<\/p>\n\n\n\n

              \n
            1. When you are finished editing your image, click the blue Save<\/strong> button in the bottom right corner.<\/li>\n\n\n\n
            2. The next screen will prompt you to select quality and file type. Pixlr will recommend saving as a JPG, as this type of file is best suited for loading quickly on web pages. However, you are free to choose any image type. Pixlr offers options to save as a JPG, PNG or WebP image or to save the entire project as a PXZ file.<\/li>\n\n\n\n
            3. Click Save As<\/strong> in the bottom right corner and save your file to your device. You can also name it from this screen.<\/li>\n<\/ol>\n\n\n\n

              Try It Out!<\/h2>\n\n\n\n

              Using the instructions above, you should be able to accomplish all the basics of image editing for the web. Let\u2019s put them to the test by making a banner for a 杏吧原创 website.<\/p>\n\n\n\n

                \n
              1. Upload your image. You can find a guide to finding copyright-free images here<\/a>.<\/li>\n\n\n\n
              2. Crop your image to the dimensions 1600px wide by 700px high.<\/li>\n\n\n\n
              3. Darken your image to -50.<\/li>\n\n\n\n
              4. Save your image.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"

                So you have an image to add to your website but it\u2019s not the right size, shape, rotation, or a thousand other little things that keep it from being picture-perfect. Well, in the age of free image editing software, fixing your pixels has never been simpler. Of course, you\u2019re free to use the software of […]<\/p>\n","protected":false},"author":2,"featured_media":16797,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":"","_links_to":"","_links_to_target":""},"categories":[276],"tags":[],"class_list":["post-16749","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tips-and-tricks"],"acf":{"cu_post_thumbnail":"learning-chalkboard"},"_links":{"self":[{"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/posts\/16749","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/comments?post=16749"}],"version-history":[{"count":0,"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/posts\/16749\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/media\/16797"}],"wp:attachment":[{"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/media?parent=16749"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/categories?post=16749"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/tags?post=16749"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}