{"id":785,"date":"2014-02-03T23:45:11","date_gmt":"2014-02-03T18:15:11","guid":{"rendered":"http:\/\/superdevresources.com\/?p=785"},"modified":"2017-07-21T12:16:19","modified_gmt":"2017-07-21T06:46:19","slug":"create-diagonal-grid-pattern-background-in-gimp","status":"publish","type":"post","link":"https:\/\/superdevresources.com\/create-diagonal-grid-pattern-background-in-gimp\/","title":{"rendered":"How to Create Diagonal Grid Pattern Backgrounds in Gimp"},"content":{"rendered":"

Last time, I\u00a0showed\u00a0how you can make\u00a0blurred background<\/a>\u00a0and use it in your apps. Using blurred image as app background\u00a0however\u00a0is not the only option that you have. Grid patterns\u00a0are also\u00a0quite popular among designers. You can use grid patterns\u00a0to create simple yet elegant\u00a0backgrounds for your app. In this tutorial I\u00a0will show how\u00a0you can\u00a0create a diagonal grid pattern background from scratch using free image editing tool,\u00a0Gimp<\/a>.<\/p>\n

\"diagoal
\nI have divided the tutorial in three parts. In first part<\/strong>\u00a0we will create a pattern file. In second part<\/strong>\u00a0we will see how to load this pattern file\u00a0in Gimp.\u00a0Finally in third<\/strong> part<\/strong> we’ll learn how to select the pattern and make it repeat across an entire layer to\u00a0create a background. I will be using Gimp 2.8.10 for this tutorial.<\/p>\n

In case\u00a0you don’t want to create\u00a0pattern file, you can\u00a0download the pattern file<\/a>\u00a0I created and skip to the second part of tutorial, where I will show how you can load it in Gimp and\u00a0then use it to create a background.<\/p>\n

Part 1: Create pattern file<\/h2>\n

Step 1<\/h4>\n

Launch\u00a0Gimp then\u00a0go to\u00a0File -> New <\/strong>and create a 20px<\/em> x 20px<\/em>\u00a0image.<\/p>\n

Go to Advanced Options<\/strong>, make sure you set the Fill with <\/strong>parameter to transparency<\/em>.<\/p>\n

\"NewImage\"<\/a><\/p>\n

Step 2<\/h4>\n

Zoom in to 1600%<\/em> so that we can see what we are doing.<\/p>\n

Step 3<\/h4>\n

Grab Paintbrush<\/strong> tool<\/strong>.\u00a0In the Brushes\u00a0dialog<\/strong>, choose Hardness 100<\/em> brush.\u00a0<\/em><\/p>\n

Set brush size<\/strong> to 1.<\/em><\/p>\n

\"PaintbrushToolOptions\"<\/a><\/p>\n

Step 4<\/h4>\n

Select\u00a0foreground color<\/strong>, I\u00a0chose black<\/em> (#000000)<\/em>.<\/p>\n

Using paintbrush click on top-left hand corner of the image\u00a0to mark the starting point.<\/p>\n

Now hold down the Shift<\/em> key and move your cursor to the bottom-right corner.<\/p>\n

Left click\u00a0on the mouse\u00a0or touch pad\u00a0and let it go\u00a0while keeping the Shift<\/em> key held down.<\/p>\n

Here you have drawn\u00a0the first\u00a0diagonal. Repeat the process\u00a0to draw\u00a0the other diagonal joining the\u00a0top-right and bottom-left corners.<\/p>\n

You should end up with a image resembling an \u201cX\u201d as shown below.<\/p>\n

\"ImageWithX\"<\/a><\/p>\n

Step 5<\/h4>\n

Go to File -> Export<\/strong> As<\/strong> and export your image as a\u00a0Gimp pattern (.pat)<\/em> file.<\/p>\n

I\u00a0exported\u00a0my\u00a0file to C:UsersPublicDocumentsGimp Patterns.<\/em><\/p>\n

Since GIMP 2.2 you can also use .png, .jpg, .bmp, .gif or .tiff files as patterns. As we are working on Gimp 2.8.10, we could also have\u00a0exported it as a .png file.<\/p>\n

\"ExportPattern\"<\/a><\/p>\n

Part 2: Load pattern in Gimp<\/h2>\n

Step 1<\/h4>\n

Go to Edit -> Preferences<\/strong>.<\/strong> <\/em>When the Preferences window<\/strong> shows up, navigate to Patterns<\/strong>\u00a0under Folders<\/strong>. Now add the folder where you saved the pattern file to the list of existing default folders.<\/p>\n

In my case I added C:UsersPublicDocumentsGimp Patterns<\/em>.<\/p>\n

\"PatternFolders\"<\/a><\/p>\n

Step 2<\/h4>\n

Close gimp and open it again.<\/p>\n

Your pattern should show up inside gimp’s Patterns dialog <\/strong>as shown below.<\/p>\n

\"Pattern\"<\/a><\/p>\n

Part 3: Create background<\/h2>\n

Step 1<\/h4>\n

Now we will use\u00a0the pattern that we loaded in Gimp in previous\u00a0step to create\u00a0the background.<\/p>\n

For this create a new image, I made mine\u00a0480 px by 800 px<\/em> for demonstration purpose. You may opt to create a higher resolution image to support different devices.<\/em><\/p>\n

After this step a\u00a0background layer<\/strong> will be created in the Layers dialog<\/strong>.<\/p>\n

Step 2<\/h4>\n

Select Bucket Fill<\/strong> tool<\/strong>.<\/em><\/p>\n

In tool options, set fill type<\/strong> to FG color fill. <\/em>Choose a\u00a0foreground color<\/strong>\u00a0of your choice (I selected #F0E7CA)<\/em> and fill background\u00a0layer<\/strong> with it.<\/p>\n

Step 3<\/h4>\n

Add a\u00a0new transparent<\/em> layer from menu\u00a0Layer -> New layer<\/strong>\u00a0or from\u00a0Layers dialog<\/strong>. Name it\u00a0Pattern<\/em>.<\/p>\n

\"NewLayer\"<\/a><\/p>\n

Step 4<\/h4>\n

Select <\/span>Bucket Fill<\/strong> tool<\/strong> and\u00a0set <\/span>fill type<\/strong> to <\/span>Pattern fill .<\/em><\/p>\n

Click on the pattern<\/strong> preview thumbnail<\/strong> in the tool options dialog. This will open\u00a0a pattern picker, <\/strong>select your pattern from the list.<\/p>\n

\"SelectPattern\"<\/a><\/p>\n

Step 5<\/h4>\n

Below is what the bucket fill tool<\/strong> option should look like after you have selected the pattern. Fill this pattern in the Pattern<\/strong> layer<\/strong>.<\/p>\n

\"BucketFill\"<\/a><\/p>\n

Step 6<\/h4>\n

Select Pattern layer<\/strong>.<\/p>\n

Change\u00a0its\u00a0mode<\/strong> to Overlay<\/em> and reduce opacity<\/strong> to blend the pattern with background. You can play around with the opacity value to get the desired result. I set it to 70<\/em>.<\/p>\n

\"FinalSettings\"<\/a><\/p>\n

Final image<\/h3>\n

Below is what your final image should look like.<\/p>\n

\"Diagonal<\/a><\/p>\n

In\u00a0following\u00a0screenshot\u00a0you can see\u00a0how the\u00a0background we created above\u00a0looks when used\u00a0in\u00a0a mock-up todo app<\/strong>.<\/p>\n

\"diagonal-grid-<\/a><\/p>\n

Experiment with colors and shapes<\/h3>\n

By using different colors in the background layer, you can create beautiful pattern backgrounds.<\/p>\n

\"diagonal-grid-<\/a><\/p>\n

Instead of drawing\u00a0diagonal lines\u00a0as shown in first part of this tutorial,\u00a0you can\u00a0also draw shapes like star or\u00a0heart and create backgrounds\u00a0similar to\u00a0Valentine’s day themed backgrounds<\/a>\u00a0from my\u00a0earlier post.<\/p>\n

\"featuredimagewatermark\"<\/a><\/p>\n

Download and Share<\/h3>\n

You can download the\u00a0pattern file and\u00a0backgrounds that I created for this tutorial below. And, if you found the tutorial useful then please share it with others :)<\/p>\n \r\n

\r\n

\n\n\tDownload “Diagonal Grid Pattern Backgrounds”\tDiagonal-Grid-Pattern-Backgrounds.zip\t\t– Downloaded 36207 times\t\t– 25.84 KB<\/small>\n<\/a>\n<\/p>\r\n <\/div>\r\n \r\n\r\n \n","protected":false},"excerpt":{"rendered":"

Last time, I\u00a0showed\u00a0how you can make\u00a0blurred background\u00a0and use it in your apps. Using blurred image as app background\u00a0however\u00a0is … <\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":7196,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[2],"tags":[46,54],"class_list":["post-785","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","tag-free-backgrounds","tag-free-resources","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-50","no-featured-image-padding","resize-featured-image"],"yoast_head":"\nHow to Create Diagonal Grid Pattern Backgrounds in Gimp - Super Dev Resources<\/title>\n<meta name=\"description\" content=\"Last time, I\u00a0showed\u00a0how you can make\u00a0blurred background\u00a0and use it in your apps. Using blurred image as app background\u00a0however\u00a0is not the only option that\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/superdevresources.com\/create-diagonal-grid-pattern-background-in-gimp\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create Diagonal Grid Pattern Backgrounds in Gimp - Super Dev Resources\" \/>\n<meta property=\"og:description\" content=\"Last time, I\u00a0showed\u00a0how you can make\u00a0blurred background\u00a0and use it in your apps. Using blurred image as app background\u00a0however\u00a0is not the only option that\" \/>\n<meta property=\"og:url\" content=\"https:\/\/superdevresources.com\/create-diagonal-grid-pattern-background-in-gimp\/\" \/>\n<meta property=\"og:site_name\" content=\"Super Dev Resources\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/superdevresources\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/monikaratan\/\" \/>\n<meta property=\"article:published_time\" content=\"2014-02-03T18:15:11+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-07-21T06:46:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/superdevresources.com\/wp-content\/uploads\/2014\/02\/grid-pattern-background.png\" \/>\n\t<meta property=\"og:image:width\" content=\"601\" \/>\n\t<meta property=\"og:image:height\" content=\"316\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Monika Ratan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@monikaratan\" \/>\n<meta name=\"twitter:site\" content=\"@superdevres42\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Monika Ratan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/superdevresources.com\\\/create-diagonal-grid-pattern-background-in-gimp\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/superdevresources.com\\\/create-diagonal-grid-pattern-background-in-gimp\\\/\"},\"author\":{\"name\":\"Monika Ratan\",\"@id\":\"https:\\\/\\\/45.32.231.40\\\/#\\\/schema\\\/person\\\/25dbf244b25f0add8d77725ff476d228\"},\"headline\":\"How to Create Diagonal Grid Pattern Backgrounds in Gimp\",\"datePublished\":\"2014-02-03T18:15:11+00:00\",\"dateModified\":\"2017-07-21T06:46:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/superdevresources.com\\\/create-diagonal-grid-pattern-background-in-gimp\\\/\"},\"wordCount\":802,\"commentCount\":6,\"publisher\":{\"@id\":\"https:\\\/\\\/45.32.231.40\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/superdevresources.com\\\/create-diagonal-grid-pattern-background-in-gimp\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/superdevresources.com\\\/wp-content\\\/uploads\\\/2014\\\/02\\\/grid-pattern-background.png\",\"keywords\":[\"Design Backgrounds\",\"Free Resources\"],\"articleSection\":[\"Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/superdevresources.com\\\/create-diagonal-grid-pattern-background-in-gimp\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/superdevresources.com\\\/create-diagonal-grid-pattern-background-in-gimp\\\/\",\"url\":\"https:\\\/\\\/superdevresources.com\\\/create-diagonal-grid-pattern-background-in-gimp\\\/\",\"name\":\"How to Create Diagonal Grid Pattern Backgrounds in Gimp - Super Dev Resources\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/45.32.231.40\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/superdevresources.com\\\/create-diagonal-grid-pattern-background-in-gimp\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/superdevresources.com\\\/create-diagonal-grid-pattern-background-in-gimp\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/superdevresources.com\\\/wp-content\\\/uploads\\\/2014\\\/02\\\/grid-pattern-background.png\",\"datePublished\":\"2014-02-03T18:15:11+00:00\",\"dateModified\":\"2017-07-21T06:46:19+00:00\",\"description\":\"Last time, I\u00a0showed\u00a0how you can make\u00a0blurred background\u00a0and use it in your apps. Using blurred image as app background\u00a0however\u00a0is not the only option that\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/superdevresources.com\\\/create-diagonal-grid-pattern-background-in-gimp\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/superdevresources.com\\\/create-diagonal-grid-pattern-background-in-gimp\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/superdevresources.com\\\/create-diagonal-grid-pattern-background-in-gimp\\\/#primaryimage\",\"url\":\"https:\\\/\\\/superdevresources.com\\\/wp-content\\\/uploads\\\/2014\\\/02\\\/grid-pattern-background.png\",\"contentUrl\":\"https:\\\/\\\/superdevresources.com\\\/wp-content\\\/uploads\\\/2014\\\/02\\\/grid-pattern-background.png\",\"width\":601,\"height\":316},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/superdevresources.com\\\/create-diagonal-grid-pattern-background-in-gimp\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/superdevresources.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Design\",\"item\":\"https:\\\/\\\/45.32.231.40\\\/category\\\/design\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Create Diagonal Grid Pattern Backgrounds in Gimp\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/45.32.231.40\\\/#website\",\"url\":\"https:\\\/\\\/45.32.231.40\\\/\",\"name\":\"Super Dev Resources\",\"description\":\"Design, Development, Business & Marketing Resources\",\"publisher\":{\"@id\":\"https:\\\/\\\/45.32.231.40\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/45.32.231.40\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/45.32.231.40\\\/#organization\",\"name\":\"Super Dev Resources\",\"url\":\"https:\\\/\\\/45.32.231.40\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/45.32.231.40\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/superdevresources.com\\\/wp-content\\\/uploads\\\/2016\\\/12\\\/sdr.png\",\"contentUrl\":\"https:\\\/\\\/superdevresources.com\\\/wp-content\\\/uploads\\\/2016\\\/12\\\/sdr.png\",\"width\":512,\"height\":512,\"caption\":\"Super Dev Resources\"},\"image\":{\"@id\":\"https:\\\/\\\/45.32.231.40\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/superdevresources\",\"https:\\\/\\\/x.com\\\/superdevres42\",\"https:\\\/\\\/www.pinterest.com\\\/superdevres42\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/45.32.231.40\\\/#\\\/schema\\\/person\\\/25dbf244b25f0add8d77725ff476d228\",\"name\":\"Monika Ratan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/47e0e37657497d38acb6dbd18a88390610cd6e4eac541089d57edd55143b8bc7?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/47e0e37657497d38acb6dbd18a88390610cd6e4eac541089d57edd55143b8bc7?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/47e0e37657497d38acb6dbd18a88390610cd6e4eac541089d57edd55143b8bc7?s=96&d=mm&r=g\",\"caption\":\"Monika Ratan\"},\"description\":\"Monika loves graphic design & other forms of creative art. When not found tinkering with her favorite graphic design tools, she is mostly reading or writing on wide array of topics. Follow her on Twitter @monikaratan\",\"sameAs\":[\"https:\\\/\\\/monikaratan.com\",\"https:\\\/\\\/www.facebook.com\\\/monikaratan\\\/\",\"https:\\\/\\\/www.instagram.com\\\/monika.ratan\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/monika-ratan-66207531\\\/\",\"https:\\\/\\\/in.pinterest.com\\\/monikaratan\\\/\",\"https:\\\/\\\/x.com\\\/monikaratan\",\"https:\\\/\\\/www.youtube.com\\\/user\\\/ratanmonika\"],\"url\":\"https:\\\/\\\/superdevresources.com\\\/author\\\/ratan-monika\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create Diagonal Grid Pattern Backgrounds in Gimp - Super Dev Resources","description":"Last time, I\u00a0showed\u00a0how you can make\u00a0blurred background\u00a0and use it in your apps. Using blurred image as app background\u00a0however\u00a0is not the only option that","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:\/\/superdevresources.com\/create-diagonal-grid-pattern-background-in-gimp\/","og_locale":"en_US","og_type":"article","og_title":"How to Create Diagonal Grid Pattern Backgrounds in Gimp - Super Dev Resources","og_description":"Last time, I\u00a0showed\u00a0how you can make\u00a0blurred background\u00a0and use it in your apps. Using blurred image as app background\u00a0however\u00a0is not the only option that","og_url":"https:\/\/superdevresources.com\/create-diagonal-grid-pattern-background-in-gimp\/","og_site_name":"Super Dev Resources","article_publisher":"https:\/\/www.facebook.com\/superdevresources","article_author":"https:\/\/www.facebook.com\/monikaratan\/","article_published_time":"2014-02-03T18:15:11+00:00","article_modified_time":"2017-07-21T06:46:19+00:00","og_image":[{"width":601,"height":316,"url":"https:\/\/superdevresources.com\/wp-content\/uploads\/2014\/02\/grid-pattern-background.png","type":"image\/png"}],"author":"Monika Ratan","twitter_card":"summary_large_image","twitter_creator":"@monikaratan","twitter_site":"@superdevres42","twitter_misc":{"Written by":"Monika Ratan","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/superdevresources.com\/create-diagonal-grid-pattern-background-in-gimp\/#article","isPartOf":{"@id":"https:\/\/superdevresources.com\/create-diagonal-grid-pattern-background-in-gimp\/"},"author":{"name":"Monika Ratan","@id":"https:\/\/45.32.231.40\/#\/schema\/person\/25dbf244b25f0add8d77725ff476d228"},"headline":"How to Create Diagonal Grid Pattern Backgrounds in Gimp","datePublished":"2014-02-03T18:15:11+00:00","dateModified":"2017-07-21T06:46:19+00:00","mainEntityOfPage":{"@id":"https:\/\/superdevresources.com\/create-diagonal-grid-pattern-background-in-gimp\/"},"wordCount":802,"commentCount":6,"publisher":{"@id":"https:\/\/45.32.231.40\/#organization"},"image":{"@id":"https:\/\/superdevresources.com\/create-diagonal-grid-pattern-background-in-gimp\/#primaryimage"},"thumbnailUrl":"https:\/\/superdevresources.com\/wp-content\/uploads\/2014\/02\/grid-pattern-background.png","keywords":["Design Backgrounds","Free Resources"],"articleSection":["Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/superdevresources.com\/create-diagonal-grid-pattern-background-in-gimp\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/superdevresources.com\/create-diagonal-grid-pattern-background-in-gimp\/","url":"https:\/\/superdevresources.com\/create-diagonal-grid-pattern-background-in-gimp\/","name":"How to Create Diagonal Grid Pattern Backgrounds in Gimp - Super Dev Resources","isPartOf":{"@id":"https:\/\/45.32.231.40\/#website"},"primaryImageOfPage":{"@id":"https:\/\/superdevresources.com\/create-diagonal-grid-pattern-background-in-gimp\/#primaryimage"},"image":{"@id":"https:\/\/superdevresources.com\/create-diagonal-grid-pattern-background-in-gimp\/#primaryimage"},"thumbnailUrl":"https:\/\/superdevresources.com\/wp-content\/uploads\/2014\/02\/grid-pattern-background.png","datePublished":"2014-02-03T18:15:11+00:00","dateModified":"2017-07-21T06:46:19+00:00","description":"Last time, I\u00a0showed\u00a0how you can make\u00a0blurred background\u00a0and use it in your apps. Using blurred image as app background\u00a0however\u00a0is not the only option that","breadcrumb":{"@id":"https:\/\/superdevresources.com\/create-diagonal-grid-pattern-background-in-gimp\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/superdevresources.com\/create-diagonal-grid-pattern-background-in-gimp\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/superdevresources.com\/create-diagonal-grid-pattern-background-in-gimp\/#primaryimage","url":"https:\/\/superdevresources.com\/wp-content\/uploads\/2014\/02\/grid-pattern-background.png","contentUrl":"https:\/\/superdevresources.com\/wp-content\/uploads\/2014\/02\/grid-pattern-background.png","width":601,"height":316},{"@type":"BreadcrumbList","@id":"https:\/\/superdevresources.com\/create-diagonal-grid-pattern-background-in-gimp\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/superdevresources.com\/"},{"@type":"ListItem","position":2,"name":"Design","item":"https:\/\/45.32.231.40\/category\/design\/"},{"@type":"ListItem","position":3,"name":"How to Create Diagonal Grid Pattern Backgrounds in Gimp"}]},{"@type":"WebSite","@id":"https:\/\/45.32.231.40\/#website","url":"https:\/\/45.32.231.40\/","name":"Super Dev Resources","description":"Design, Development, Business & Marketing Resources","publisher":{"@id":"https:\/\/45.32.231.40\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/45.32.231.40\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/45.32.231.40\/#organization","name":"Super Dev Resources","url":"https:\/\/45.32.231.40\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/45.32.231.40\/#\/schema\/logo\/image\/","url":"https:\/\/superdevresources.com\/wp-content\/uploads\/2016\/12\/sdr.png","contentUrl":"https:\/\/superdevresources.com\/wp-content\/uploads\/2016\/12\/sdr.png","width":512,"height":512,"caption":"Super Dev Resources"},"image":{"@id":"https:\/\/45.32.231.40\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/superdevresources","https:\/\/x.com\/superdevres42","https:\/\/www.pinterest.com\/superdevres42\/"]},{"@type":"Person","@id":"https:\/\/45.32.231.40\/#\/schema\/person\/25dbf244b25f0add8d77725ff476d228","name":"Monika Ratan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/47e0e37657497d38acb6dbd18a88390610cd6e4eac541089d57edd55143b8bc7?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/47e0e37657497d38acb6dbd18a88390610cd6e4eac541089d57edd55143b8bc7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/47e0e37657497d38acb6dbd18a88390610cd6e4eac541089d57edd55143b8bc7?s=96&d=mm&r=g","caption":"Monika Ratan"},"description":"Monika loves graphic design & other forms of creative art. When not found tinkering with her favorite graphic design tools, she is mostly reading or writing on wide array of topics. Follow her on Twitter @monikaratan","sameAs":["https:\/\/monikaratan.com","https:\/\/www.facebook.com\/monikaratan\/","https:\/\/www.instagram.com\/monika.ratan\/","https:\/\/www.linkedin.com\/in\/monika-ratan-66207531\/","https:\/\/in.pinterest.com\/monikaratan\/","https:\/\/x.com\/monikaratan","https:\/\/www.youtube.com\/user\/ratanmonika"],"url":"https:\/\/superdevresources.com\/author\/ratan-monika\/"}]}},"jetpack_featured_media_url":"https:\/\/superdevresources.com\/wp-content\/uploads\/2014\/02\/grid-pattern-background.png","jetpack-related-posts":[{"id":831,"url":"https:\/\/superdevresources.com\/5-free-valentines-day-themed-backgrounds\/","url_meta":{"origin":785,"position":0},"title":"5 Free Valentine’s day Backgrounds","author":"Monika Ratan","date":"January 24, 2014","format":false,"excerpt":"With Valentine's day around the corner, you might be busy working on an app ideated around it. And, to help you in designing your app,\u00a0I have created\u00a05 free\u00a0Valentine's day themed backgrounds. All the images are 1000px\u00a0x 800px in size. You can use them in your app, website, blog or in\u2026","rel":"","context":"In "Design"","block_context":{"text":"Design","link":"https:\/\/superdevresources.com\/category\/design\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2014\/01\/featuredimagewatermark.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2014\/01\/featuredimagewatermark.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2014\/01\/featuredimagewatermark.jpg?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":1335,"url":"https:\/\/superdevresources.com\/weekend-reading-free-courses-grid-pattern-backgrounds-and-more\/","url_meta":{"origin":785,"position":1},"title":"Weekend Reading – Free courses, Grid pattern backgrounds and More","author":"SDR Team","date":"February 9, 2014","format":false,"excerpt":"Welcome to this edition of Weekend Reading\u00a0for the week ending Feb 8. At SuperDevResources, we are\u00a0committed to\u00a0bring latest and greatest Design, Development, Marketing and Monetization resources for\u00a0Windows Phone and Windows developers. In case you missed\u00a0any of\u00a0our blog post or were on a tight schedule, we\u00a0bring Weekend Reading for you. In\u2026","rel":"","context":"In "News & Info"","block_context":{"text":"News & Info","link":"https:\/\/superdevresources.com\/category\/news-info\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2014\/02\/WeekendReading1.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2014\/02\/WeekendReading1.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2014\/02\/WeekendReading1.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":5265,"url":"https:\/\/superdevresources.com\/free-blurred-backgrounds\/","url_meta":{"origin":785,"position":2},"title":"10 Free High-Resolution Blurred Backgrounds","author":"Monika Ratan","date":"September 28, 2014","format":false,"excerpt":"Using blurred backgrounds in your app or website is an effective way of designing a minimal and aesthetically pleasing\u00a0UI\u00a0while keeping\u00a0focus on\u00a0the content, and making foreground elements like typography and graphics\u00a0pop out. Today we have brought\u00a0an exclusive\u00a0set of 10 free\u00a0blurred backgrounds for our readers.\u00a0These backgrounds can be used\u00a0in\u00a0personal as well as\u2026","rel":"","context":"In "Freebies"","block_context":{"text":"Freebies","link":"https:\/\/superdevresources.com\/category\/freebies\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2014\/09\/free-blurred-backgrounds.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2014\/09\/free-blurred-backgrounds.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2014\/09\/free-blurred-backgrounds.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2014\/09\/free-blurred-backgrounds.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":228,"url":"https:\/\/superdevresources.com\/make-blurred-background-use-apps\/","url_meta":{"origin":785,"position":3},"title":"How to make a Blurred Background for use in Apps","author":"Monika Ratan","date":"January 10, 2014","format":false,"excerpt":"In our earlier\u00a0post,\u00a0we\u00a0wrote about\u00a0some\u00a0free blurred background sets that you can use in your apps. This time, we will show how you can create a blurred background from your own set of photographs\u00a0in few simple steps and use it\u00a0in your apps. Image Editing Tool For this tutorial, we will be using\u2026","rel":"","context":"In "Design"","block_context":{"text":"Design","link":"https:\/\/superdevresources.com\/category\/design\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2014\/01\/WeatherApp.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2014\/01\/WeatherApp.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2014\/01\/WeatherApp.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":859,"url":"https:\/\/superdevresources.com\/weekend-reading-mp3-licensing-free-backgrounds-and-more\/","url_meta":{"origin":785,"position":4},"title":"Weekend Reading – MP3 licensing, Free Backgrounds and More","author":"SDR Team","date":"January 26, 2014","format":false,"excerpt":"Welcome to this edition of Weekend Reading for the week ending Jan 25. At SuperDevResources, we are\u00a0committed to\u00a0bring latest and greatest Design, Development, Marketing and Monetization resources for\u00a0Windows Phone and Windows developers. In case you missed\u00a0any of\u00a0our blog post or were on a tight schedule, we\u00a0bring Weekend Reading for you.\u2026","rel":"","context":"In "News & Info"","block_context":{"text":"News & Info","link":"https:\/\/superdevresources.com\/category\/news-info\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2014\/01\/WeekendReading1.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2014\/01\/WeekendReading1.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2014\/01\/WeekendReading1.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":1463,"url":"https:\/\/superdevresources.com\/free-abstract-grainy-pattern-backgrounds\/","url_meta":{"origin":785,"position":5},"title":"10 Free Abstract Grainy Pattern Backgrounds","author":"Monika Ratan","date":"February 14, 2014","format":false,"excerpt":"Hope you downloaded the\u00a0free Valentine's day themed backgrounds, that I gave earlier, and used them in your apps. Today I have a set of 10 free abstract grainy pattern backgrounds to share with you. I used\u00a0free vector graphics editor\u00a0Inkscape to create the abstract pattern. Then I used this pattern to\u2026","rel":"","context":"In "Design"","block_context":{"text":"Design","link":"https:\/\/superdevresources.com\/category\/design\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2014\/02\/Mauve-geometric-background.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2014\/02\/Mauve-geometric-background.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/superdevresources.com\/wp-content\/uploads\/2014\/02\/Mauve-geometric-background.jpg?resize=525%2C300&ssl=1 1.5x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/superdevresources.com\/wp-json\/wp\/v2\/posts\/785","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/superdevresources.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/superdevresources.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/superdevresources.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/superdevresources.com\/wp-json\/wp\/v2\/comments?post=785"}],"version-history":[{"count":0,"href":"https:\/\/superdevresources.com\/wp-json\/wp\/v2\/posts\/785\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/superdevresources.com\/wp-json\/wp\/v2\/media\/7196"}],"wp:attachment":[{"href":"https:\/\/superdevresources.com\/wp-json\/wp\/v2\/media?parent=785"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/superdevresources.com\/wp-json\/wp\/v2\/categories?post=785"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/superdevresources.com\/wp-json\/wp\/v2\/tags?post=785"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}