{"id":82738,"date":"2022-05-20T12:40:26","date_gmt":"2022-05-20T17:40:26","guid":{"rendered":"https:\/\/eshop.macsales.com\/blog\/?p=82738"},"modified":"2022-12-20T13:47:47","modified_gmt":"2022-12-20T19:47:47","slug":"how-to-header-image-collage","status":"publish","type":"post","link":"https:\/\/eshop.macsales.com\/blog\/82738-how-to-header-image-collage\/","title":{"rendered":"How to Quickly Create Header Image Collages with Pixlr"},"content":{"rendered":"\n
\"An<\/figure>\n\n\n\n

Do you need a banner, hero, or header image for a webpage? The typical ratio for the image at the top of a website landing page is 16:9, so it needs to be wide enough or at least croppable.<\/p>\n\n\n\n

Unless you stumble upon the perfect stock photo on a site like iStock, Pexels, or Unsplash, that shows each and every<\/em> subject you wish to discuss, you may have to put a few images together in a collage to make the final asset wide enough to be used on the web.\u00a0<\/p>\n\n\n\n

Or you may prefer to use one of your own original images, but it\u2019s just not sizing up and cropping in a way that preserves the balance the photograph. The solution to this is to choose three photos and create a triptych<\/strong>\u2014essentially a collage\u2014allowing your photos with portrait ratios to be used.<\/p>\n\n\n\n

There are many photo editing apps out there. Pixlr.com <\/a>is an easy-to-use app that allows you to make basic edits like cropping and resizing. It\u2019s easier to navigate than Photoshop, and it\u2019s got a free web-based version. Let\u2019s get started!<\/p>\n\n\n\n

Choose a template in Pixlr<\/h3>\n\n\n\n
  1. Go to Pixlr.com<\/a><\/li>
  2. Select Templates<\/em> from the left sidebar menu<\/li>
  3. Scroll through templates to find and select Simple collage<\/em><\/li>
  4. You will arrive a large selection of collage templates. Choose Simple 3 in a row<\/em> (when you pass your cursor over each one, the name is displayed)<\/li><\/ol>\n\n\n\n

    You are then brought to the Pixlr editor where you can insert images, change the aspect ratio of your header, and change the size of your header.<\/p>\n\n\n\n

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

    The simple three in a row template is already set at 16:9 which is standard for most web banner images. It loads automatically at 1280×720. <\/p>\n\n\n\n

    Check with the requirements or preferences of your website or blog where you will displaying the image\u2014you may need the image to be bigger. Here on the Rocket Yard blog, we use 1400×788. Other sites I\u2019ve worked with use 1920×1080.\u00a0<\/p>\n\n\n\n

    Resize a template in Pixlr<\/h3>\n\n\n\n
    1. Head over to Resize Page<\/em> (scale)<\/li>
    2. Change the size of one of the dimensions to your preference (the other dimension will change automatically, according to ratio, if \u201cconstrain proportions\u201d is selected)<\/li>
    3. All the layers of the template that contain each panel of the 3 in a row will be resized.<\/li><\/ol>\n\n\n\n

      Note:<\/strong> Changing the dimensions of Set page size<\/em> will only make the background bigger but it won\u2019t change the layers and their panels in the collage.<\/p>\n\n\n\n

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

      Insert images <\/h3>\n\n\n\n

      Now add your images to create a collage. Simply double-click\/double-tap on the plus sign or anywhere in the space of the image panel and you will be taken to your files.\u00a0<\/p>\n\n\n\n

      Once you have all three images selected and uploaded, change the border color or size of the border\u2014or eliminate it altogether.\u00a0<\/p>\n\n\n\n

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

      Pro tip:<\/strong> A collage without borders is a cleaner more professional look. <\/p>\n\n\n\n

      To eliminate the border, start with the center panel. Single tap it to select and drag it to line up with the top or bottom border of the background, Then stretch it at one corner to line up with the left panel, and stretch it again at the other corner to line it up with right panel. After that you can play around with the other two panels, but at least the middle is centered and within proportion.<\/p>\n\n\n\n

      Adjust each image in the collage<\/h3>\n\n\n\n

      When you upload an image to the template, the whole image is loaded to one layer, but you can only see a portion of it in the panel of the collage. Decide how you want your image to display in the collage by moving it around or resizing within the panel.  <\/p>\n\n\n\n

      1. Double-tap the image you want to adjust to access that layer only. The entire image should be outlined in green.<\/li>
      2. Tap and hold to drag the image around until it displays the way you like it in the panel. You can also grab a corner to resize the image.<\/li>
      3. Tap outside of the image to exit the layer.<\/li><\/ol>\n\n\n\n
        \"\"<\/figure>\n\n\n\n

        And there you have it. Once you are happy with the placement of each image you can save the file. You now have a wide banner, header, or hero image you can use at the top of your webpage.<\/p>\n","protected":false},"excerpt":{"rendered":"

        A simple photo collage makes a great header or hero image for web articles and social media. And Pixlr makes them easy to create. Here’s how.<\/p>\n","protected":false},"author":141,"featured_media":82739,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"spay_email":"","footnotes":""},"categories":[7190],"class_list":["post-82738","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to"],"yoast_head":"\nHow to Quickly Create Header Image Collages with Pixlr<\/title>\n<meta name=\"description\" content=\"A simple photo collage makes a great header or hero image for web articles and social media. And Pixlr makes them easy to create. Here's how.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/eshop.macsales.com\/blog\/82738-how-to-header-image-collage\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Quickly Create Header Image Collages with Pixlr\" \/>\n<meta property=\"og:description\" content=\"A simple photo collage makes a great header or hero image for web articles and social media. And Pixlr makes them easy to create. Here's how.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/eshop.macsales.com\/blog\/82738-how-to-header-image-collage\/\" \/>\n<meta property=\"og:site_name\" content=\"Rocket Yard\" \/>\n<meta property=\"article:published_time\" content=\"2022-05-20T17:40:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-12-20T19:47:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/eshop.macsales.com\/blog\/wp-content\/uploads\/2022\/05\/finalcollage-scaled.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1400\" \/>\n\t<meta property=\"og:image:height\" content=\"770\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Tara Purswani\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Tara Purswani\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/eshop.macsales.com\/blog\/82738-how-to-header-image-collage\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/eshop.macsales.com\/blog\/82738-how-to-header-image-collage\/\"},\"author\":{\"name\":\"Tara Purswani\",\"@id\":\"https:\/\/eshop.macsales.com\/blog\/#\/schema\/person\/c8544914056e1da26947afe16320d46e\"},\"headline\":\"How to Quickly Create Header Image Collages with Pixlr\",\"datePublished\":\"2022-05-20T17:40:26+00:00\",\"dateModified\":\"2022-12-20T19:47:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/eshop.macsales.com\/blog\/82738-how-to-header-image-collage\/\"},\"wordCount\":727,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/eshop.macsales.com\/blog\/#organization\"},\"keywords\":[\"#OWCblog\",\"collage\",\"header image\",\"hero image\",\"how to make a collage\",\"How to use Pixlr\",\"Photo Editing\",\"Pixlr\"],\"articleSection\":[\"How to\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/eshop.macsales.com\/blog\/82738-how-to-header-image-collage\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/eshop.macsales.com\/blog\/82738-how-to-header-image-collage\/\",\"url\":\"https:\/\/eshop.macsales.com\/blog\/82738-how-to-header-image-collage\/\",\"name\":\"How to Quickly Create Header Image Collages with Pixlr\",\"isPartOf\":{\"@id\":\"https:\/\/eshop.macsales.com\/blog\/#website\"},\"datePublished\":\"2022-05-20T17:40:26+00:00\",\"dateModified\":\"2022-12-20T19:47:47+00:00\",\"description\":\"A simple photo collage makes a great header or hero image for web articles and social media. And Pixlr makes them easy to create. Here's how.\",\"breadcrumb\":{\"@id\":\"https:\/\/eshop.macsales.com\/blog\/82738-how-to-header-image-collage\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/eshop.macsales.com\/blog\/82738-how-to-header-image-collage\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/eshop.macsales.com\/blog\/82738-how-to-header-image-collage\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/eshop.macsales.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Quickly Create Header Image Collages with Pixlr\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/eshop.macsales.com\/blog\/#website\",\"url\":\"https:\/\/eshop.macsales.com\/blog\/\",\"name\":\"Rocket Yard\",\"description\":\"Your source for expert tips, special deals, commentary, reviews, and the latest tech news.\",\"publisher\":{\"@id\":\"https:\/\/eshop.macsales.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/eshop.macsales.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/eshop.macsales.com\/blog\/#organization\",\"name\":\"OWC\",\"url\":\"https:\/\/eshop.macsales.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/eshop.macsales.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/eshop.macsales.com\/blog\/wp-content\/uploads\/2020\/06\/rocket-yard-logo-round.png\",\"contentUrl\":\"https:\/\/eshop.macsales.com\/blog\/wp-content\/uploads\/2020\/06\/rocket-yard-logo-round.png\",\"width\":1024,\"height\":1024,\"caption\":\"OWC\"},\"image\":{\"@id\":\"https:\/\/eshop.macsales.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/eshop.macsales.com\/blog\/#\/schema\/person\/c8544914056e1da26947afe16320d46e\",\"name\":\"Tara Purswani\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/eshop.macsales.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/40f3d48af57fa26e9ddabe931b38d78d864f9f5bd2f414c48215174fc04ffe89?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/40f3d48af57fa26e9ddabe931b38d78d864f9f5bd2f414c48215174fc04ffe89?s=96&d=mm&r=g\",\"caption\":\"Tara Purswani\"},\"description\":\"Tara is an accomplished content writer. She got her start at Gotham Writer\u2019s Workshop and continued to hone her craft at NYUSPS where she got certified in Copyediting, Proofreading, and Fact-checking. She is a part of the Blade Ronner Media writer's network.\",\"sameAs\":[\"https:\/\/linktr.ee\/tarapurswani\",\"https:\/\/www.linkedin.com\/in\/tara-purswani\/\"],\"url\":\"https:\/\/eshop.macsales.com\/blog\/author\/tarapurswani\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Quickly Create Header Image Collages with Pixlr","description":"A simple photo collage makes a great header or hero image for web articles and social media. And Pixlr makes them easy to create. Here's how.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/eshop.macsales.com\/blog\/82738-how-to-header-image-collage\/","og_locale":"en_US","og_type":"article","og_title":"How to Quickly Create Header Image Collages with Pixlr","og_description":"A simple photo collage makes a great header or hero image for web articles and social media. And Pixlr makes them easy to create. Here's how.","og_url":"https:\/\/eshop.macsales.com\/blog\/82738-how-to-header-image-collage\/","og_site_name":"Rocket Yard","article_published_time":"2022-05-20T17:40:26+00:00","article_modified_time":"2022-12-20T19:47:47+00:00","og_image":[{"width":1400,"height":770,"url":"https:\/\/eshop.macsales.com\/blog\/wp-content\/uploads\/2022\/05\/finalcollage-scaled.jpg","type":"image\/jpeg"}],"author":"Tara Purswani","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Tara Purswani","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/eshop.macsales.com\/blog\/82738-how-to-header-image-collage\/#article","isPartOf":{"@id":"https:\/\/eshop.macsales.com\/blog\/82738-how-to-header-image-collage\/"},"author":{"name":"Tara Purswani","@id":"https:\/\/eshop.macsales.com\/blog\/#\/schema\/person\/c8544914056e1da26947afe16320d46e"},"headline":"How to Quickly Create Header Image Collages with Pixlr","datePublished":"2022-05-20T17:40:26+00:00","dateModified":"2022-12-20T19:47:47+00:00","mainEntityOfPage":{"@id":"https:\/\/eshop.macsales.com\/blog\/82738-how-to-header-image-collage\/"},"wordCount":727,"commentCount":0,"publisher":{"@id":"https:\/\/eshop.macsales.com\/blog\/#organization"},"keywords":["#OWCblog","collage","header image","hero image","how to make a collage","How to use Pixlr","Photo Editing","Pixlr"],"articleSection":["How to"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/eshop.macsales.com\/blog\/82738-how-to-header-image-collage\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/eshop.macsales.com\/blog\/82738-how-to-header-image-collage\/","url":"https:\/\/eshop.macsales.com\/blog\/82738-how-to-header-image-collage\/","name":"How to Quickly Create Header Image Collages with Pixlr","isPartOf":{"@id":"https:\/\/eshop.macsales.com\/blog\/#website"},"datePublished":"2022-05-20T17:40:26+00:00","dateModified":"2022-12-20T19:47:47+00:00","description":"A simple photo collage makes a great header or hero image for web articles and social media. And Pixlr makes them easy to create. Here's how.","breadcrumb":{"@id":"https:\/\/eshop.macsales.com\/blog\/82738-how-to-header-image-collage\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/eshop.macsales.com\/blog\/82738-how-to-header-image-collage\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/eshop.macsales.com\/blog\/82738-how-to-header-image-collage\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/eshop.macsales.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Quickly Create Header Image Collages with Pixlr"}]},{"@type":"WebSite","@id":"https:\/\/eshop.macsales.com\/blog\/#website","url":"https:\/\/eshop.macsales.com\/blog\/","name":"Rocket Yard","description":"Your source for expert tips, special deals, commentary, reviews, and the latest tech news.","publisher":{"@id":"https:\/\/eshop.macsales.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/eshop.macsales.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/eshop.macsales.com\/blog\/#organization","name":"OWC","url":"https:\/\/eshop.macsales.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/eshop.macsales.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/eshop.macsales.com\/blog\/wp-content\/uploads\/2020\/06\/rocket-yard-logo-round.png","contentUrl":"https:\/\/eshop.macsales.com\/blog\/wp-content\/uploads\/2020\/06\/rocket-yard-logo-round.png","width":1024,"height":1024,"caption":"OWC"},"image":{"@id":"https:\/\/eshop.macsales.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/eshop.macsales.com\/blog\/#\/schema\/person\/c8544914056e1da26947afe16320d46e","name":"Tara Purswani","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/eshop.macsales.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/40f3d48af57fa26e9ddabe931b38d78d864f9f5bd2f414c48215174fc04ffe89?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/40f3d48af57fa26e9ddabe931b38d78d864f9f5bd2f414c48215174fc04ffe89?s=96&d=mm&r=g","caption":"Tara Purswani"},"description":"Tara is an accomplished content writer. She got her start at Gotham Writer\u2019s Workshop and continued to hone her craft at NYUSPS where she got certified in Copyediting, Proofreading, and Fact-checking. She is a part of the Blade Ronner Media writer's network.","sameAs":["https:\/\/linktr.ee\/tarapurswani","https:\/\/www.linkedin.com\/in\/tara-purswani\/"],"url":"https:\/\/eshop.macsales.com\/blog\/author\/tarapurswani\/"}]}},"jetpack_featured_media_url":"https:\/\/eshop.macsales.com\/blog\/wp-content\/uploads\/2022\/05\/finalcollage-scaled.jpg","jetpack_shortlink":"https:\/\/wp.me\/pmPaT-lwu","_links":{"self":[{"href":"https:\/\/eshop.macsales.com\/blog\/wp-json\/wp\/v2\/posts\/82738","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eshop.macsales.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eshop.macsales.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eshop.macsales.com\/blog\/wp-json\/wp\/v2\/users\/141"}],"replies":[{"embeddable":true,"href":"https:\/\/eshop.macsales.com\/blog\/wp-json\/wp\/v2\/comments?post=82738"}],"version-history":[{"count":1,"href":"https:\/\/eshop.macsales.com\/blog\/wp-json\/wp\/v2\/posts\/82738\/revisions"}],"predecessor-version":[{"id":82744,"href":"https:\/\/eshop.macsales.com\/blog\/wp-json\/wp\/v2\/posts\/82738\/revisions\/82744"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/eshop.macsales.com\/blog\/wp-json\/wp\/v2\/media\/82739"}],"wp:attachment":[{"href":"https:\/\/eshop.macsales.com\/blog\/wp-json\/wp\/v2\/media?parent=82738"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eshop.macsales.com\/blog\/wp-json\/wp\/v2\/categories?post=82738"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}