{"id":953,"date":"2012-08-29T14:01:52","date_gmt":"2012-08-29T12:01:52","guid":{"rendered":"http:\/\/chromatic.se\/?post_type=project&#038;p=953"},"modified":"2026-04-09T08:25:05","modified_gmt":"2026-04-09T06:25:05","slug":"portal-2-living-desktop-background","status":"publish","type":"post","link":"https:\/\/chromatic.se\/en\/portal-2-living-desktop-background\/","title":{"rendered":"Portal 2 living desktop background"},"content":{"rendered":"<div  class='flex_column av-av_two_third-2d22dc0500e159f2b39fe7a147caf14c av_two_third  avia-builder-el-0  el_before_av_one_third  avia-builder-el-first  first flex_column_div  '     ><div  class='avia-video av-mjbnef8h-d9baec949fe83722ee61bfcc5c81b9c0 avia-video-16-9 av-no-preview-image avia-video-load-always avia-video-html5'  itemprop=\"video\" itemtype=\"https:\/\/schema.org\/VideoObject\"  data-original_url='https:\/\/chromatic.se\/wp-content\/uploads\/portal-2-christmas-loop.mp4'><video class='avia_video'  autoplay playsinline loop preload=\"metadata\" muted  id='player_953_1393343645_806401002'><source src='https:\/\/chromatic.se\/wp-content\/uploads\/portal-2-christmas-loop.mp4' type='video\/mp4' \/><\/video><\/div><\/div><div  class='flex_column av-av_one_third-3b0d446bf9e6f7db91541aa567be4cdf av_one_third  avia-builder-el-2  el_after_av_two_third  el_before_av_hr  flex_column_div  '     ><p>\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-mnh6ca9h-d3cdcb3cce57e3f8372270570ea93134\">\n#top .av-special-heading.av-mnh6ca9h-d3cdcb3cce57e3f8372270570ea93134{\npadding-bottom:10px;\n}\nbody .av-special-heading.av-mnh6ca9h-d3cdcb3cce57e3f8372270570ea93134 .av-special-heading-tag .heading-char{\nfont-size:25px;\n}\n.av-special-heading.av-mnh6ca9h-d3cdcb3cce57e3f8372270570ea93134 .av-subheading{\nfont-size:15px;\n}\n<\/style>\n<div  class='av-special-heading av-mnh6ca9h-d3cdcb3cce57e3f8372270570ea93134 av-special-heading-h1 blockquote modern-quote modern-centered  avia-builder-el-3  el_before_av_hr  avia-builder-el-first '><h1 class='av-special-heading-tag '  itemprop=\"headline\"  >Portal 2<\/h1><div class='av-subheading av-subheading_below'><p>a living Mac OS background<\/p>\n<\/div><div class=\"special-heading-border\"><div class=\"special-heading-inner-border\"><\/div><\/div><\/div><br \/>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-mnh6bi2h-7d7a27ffa505be9494139cd6223075b8\">\n#top .hr.hr-invisible.av-mnh6bi2h-7d7a27ffa505be9494139cd6223075b8{\nheight:50px;\n}\n<\/style>\n<div  class='hr av-mnh6bi2h-7d7a27ffa505be9494139cd6223075b8 hr-invisible  avia-builder-el-4  el_after_av_heading  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><br \/>\n<section  class='av_textblock_section av-mjbnreqt-a868ee63d74e9ec41105f33144321cb3 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>This seemingly small project contains 3 parts:<\/p>\n<ol>\n<li>Geektools coding.<\/li>\n<li>background graphics.<\/li>\n<li>and a new font.<\/li>\n<\/ol>\n<\/div><\/section><\/p><\/div>\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-mjbo3l4m-b6af55f05a9b17e71d4d06f78e146355\">\n#top .hr.hr-invisible.av-mjbo3l4m-b6af55f05a9b17e71d4d06f78e146355{\nheight:50px;\n}\n<\/style>\n<div  class='hr av-mjbo3l4m-b6af55f05a9b17e71d4d06f78e146355 hr-invisible  avia-builder-el-6  el_after_av_one_third  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div><\/p>\n<section  class='av_textblock_section av-mjbnxizr-d017775d7e492fb918b936d64f3a3316 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h1>A brief story<\/h1>\n<p>It started a while back with me seeing a someone who made a <em>Portal 2<\/em> door poster. I was unable to get my hands on the vector graphics so I decided to make my own. I took photos of the game using a handheld camera, imported the photos into Illustrator and started tracing the outlines.<\/p>\n<p>After a while I had something that looked like a real poster and used a giant printer to produce this:<\/p>\n<\/div><\/section>\n<div  class='flex_column av-becc9-10d59e497b4297e4b78d5e73cdac3496 av_two_third  avia-builder-el-8  el_after_av_textblock  el_before_av_textblock  first flex_column_div  column-top-margin'     ><div id='av-masonry-1' class='av-masonry av-mjbns7ve-032c52364819780f8199060d2f0680bf noHover av-flex-size av-large-gap av-hover-overlay-active av-masonry-animation-active av-masonry-col-flexible av-caption-always av-caption-style- av-masonry-gallery ' data-post_id=\"953\"><div class=\"av-masonry-container isotope av-js-disabled\"><div class='av-masonry-entry isotope-item av-masonry-item-no-image '><\/div><a href=\"https:\/\/chromatic.se\/wp-content\/uploads\/portalkort-1-764x1024.jpg\" data-srcset=\"https:\/\/chromatic.se\/wp-content\/uploads\/portalkort-1-764x1024.jpg 764w, https:\/\/chromatic.se\/wp-content\/uploads\/portalkort-1-224x300.jpg 224w, https:\/\/chromatic.se\/wp-content\/uploads\/portalkort-1.jpg 1936w\" data-sizes=\"(max-width: 764px) 100vw, 764px\"  aria-label=\"image portalkort 1\"  id='av-masonry-1-item-955' data-av-masonry-item='955' class='av-masonry-entry isotope-item post-955 attachment type-attachment status-inherit hentry  av-masonry-item-with-image' title=\"portalkort 1\" alt=\"\"    itemprop=\"thumbnailUrl\" ><div class='av-inner-masonry-sizer'><\/div><figure class='av-inner-masonry main_color'><div class=\"av-masonry-outerimage-container\"><div class='av-masonry-image-container'  ><img decoding=\"async\" width=\"1936\" height=\"2592\" fetchpriority=\"high\" class=\"wp-image-955 avia-img-lazy-loading-not-955\"  src=\"https:\/\/chromatic.se\/wp-content\/uploads\/portalkort-1.jpg\" title=\"portalkort 1\" alt=\"\" srcset=\"https:\/\/chromatic.se\/wp-content\/uploads\/portalkort-1.jpg 1936w, https:\/\/chromatic.se\/wp-content\/uploads\/portalkort-1-224x300.jpg 224w, https:\/\/chromatic.se\/wp-content\/uploads\/portalkort-1-764x1024.jpg 764w\" sizes=\"(max-width: 1936px) 100vw, 1936px\" \/><\/div><\/div><\/figure><\/a><!--end av-masonry entry--><a href=\"https:\/\/chromatic.se\/wp-content\/uploads\/portalkort2-1024x764.jpg\" data-srcset=\"https:\/\/chromatic.se\/wp-content\/uploads\/portalkort2-1024x764.jpg 1024w, https:\/\/chromatic.se\/wp-content\/uploads\/portalkort2-300x224.jpg 300w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\"  aria-label=\"image portalkort2\"  id='av-masonry-1-item-954' data-av-masonry-item='954' class='av-masonry-entry isotope-item post-954 attachment type-attachment status-inherit hentry  av-masonry-item-with-image' title=\"portalkort2\" alt=\"\"    itemprop=\"thumbnailUrl\" ><div class='av-inner-masonry-sizer'><\/div><figure class='av-inner-masonry main_color'><div class=\"av-masonry-outerimage-container\"><div class='av-masonry-image-container'  ><img decoding=\"async\" width=\"2592\" height=\"1936\" fetchpriority=\"high\" class=\"wp-image-954 avia-img-lazy-loading-not-954\"  src=\"https:\/\/chromatic.se\/wp-content\/uploads\/portalkort2.jpg\" title=\"portalkort2\" alt=\"\" srcset=\"https:\/\/chromatic.se\/wp-content\/uploads\/portalkort2.jpg 2592w, https:\/\/chromatic.se\/wp-content\/uploads\/portalkort2-300x224.jpg 300w, https:\/\/chromatic.se\/wp-content\/uploads\/portalkort2-1024x764.jpg 1024w\" sizes=\"(max-width: 2592px) 100vw, 2592px\" \/><\/div><\/div><\/figure><\/a><!--end av-masonry entry--><a href=\"https:\/\/chromatic.se\/wp-content\/uploads\/portalposter-764x1024.jpg\" data-srcset=\"https:\/\/chromatic.se\/wp-content\/uploads\/portalposter-764x1024.jpg 764w, https:\/\/chromatic.se\/wp-content\/uploads\/portalposter-224x300.jpg 224w, https:\/\/chromatic.se\/wp-content\/uploads\/portalposter.jpg 1936w\" data-sizes=\"(max-width: 764px) 100vw, 764px\"  aria-label=\"image portalposter\"  id='av-masonry-1-item-956' data-av-masonry-item='956' class='av-masonry-entry isotope-item post-956 attachment type-attachment status-inherit hentry  av-masonry-item-with-image' title=\"portalposter\" alt=\"\"    itemprop=\"thumbnailUrl\" ><div class='av-inner-masonry-sizer'><\/div><figure class='av-inner-masonry main_color'><div class=\"av-masonry-outerimage-container\"><div class='av-masonry-image-container'  ><img decoding=\"async\" width=\"1936\" height=\"2592\" fetchpriority=\"high\" class=\"wp-image-956 avia-img-lazy-loading-not-956\"  src=\"https:\/\/chromatic.se\/wp-content\/uploads\/portalposter.jpg\" title=\"portalposter\" alt=\"\" srcset=\"https:\/\/chromatic.se\/wp-content\/uploads\/portalposter.jpg 1936w, https:\/\/chromatic.se\/wp-content\/uploads\/portalposter-224x300.jpg 224w, https:\/\/chromatic.se\/wp-content\/uploads\/portalposter-764x1024.jpg 764w\" sizes=\"(max-width: 1936px) 100vw, 1936px\" \/><\/div><\/div><\/figure><\/a><!--end av-masonry entry--><\/div><\/div><\/div>\n<section  class='av_textblock_section av-mjbnr3kl-f934133f80c68cb0db787cc53b0eaf3d '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Some time later I was getting into Geektool and looking for so called geeklets: finished snippets of code ready for download. I&#8217;m not really a programmer and quite like cool stuff that works with minimal effort. I stumbled across a geeklet by a guy called JimmyBollox (^^) at\u00a0<a href=\"http:\/\/www.macosxtips.co.uk\/geeklets\/system\/system-info-circular-graphics\/\">www.macosxtips.co.uk\/geeklets\/system\/system-info-circular-graphics<\/a><\/p>\n<p>As the link implies, he had made some circular graphics which were able to show things like your CPU and Memory usage. To accomplish this he had made his own circular graphics font which corresponded to a certain percentage with <em>a<\/em> being 0% and <em>Y<\/em> being 100%. I thought that was a really neat way to do, escpecially since I can&#8217;t code.<\/p>\n<p>I downloaded his code snippets and decided I&#8217;d make my own font that would look more like a standard progress bar and fit in with the Portal 2 theme.<\/p>\n<p>I made some really simple bars in Illustrator and got stuck when it was time to transform my graphics into a font.<\/p>\n<p>I tried so many different types of software: ScanFont, TypeTool, RoboFont, Inkscape, FontLab. I&#8217;m sure there were others but these are the ones I remember from the top of my head. All the fonts exported had errors I couldn&#8217;t figure out and were seemingly random. I put a lot of hours into this and even asked for external help, but to no avail.<\/p>\n<p>Then, suddenly, 6 months later, I discovered software previously unknown to me called Fontographer 5. I gave it a go and it worked out of the box. I simply copied and pasted my graphics into the corresponding letter, hit <em>generate font files<\/em> and that was it<em>.\u00a0<\/em>The new font worked exactly as it should and I was finally able to setup this sweet living desktop background.<\/p>\n<h1>Download font<\/h1>\n<p>Font 1 a:\u00a0<a href=\"http:\/\/chromatic.se\/UPLOAD\/Progress%20bar%20full%20steps.ttf\">progress bar with full steps<\/a> (this is the one I used)<br \/>\nFont 1 b:\u00a0<a href=\"http:\/\/chromatic.se\/UPLOAD\/Progress%20bar%20semi%20steps.ttf\">progress bar with semi steps<\/a> (if you prefer semi steps)<br \/>\nFont 2:\u00a0<a href=\"http:\/\/chromatic.se\/UPLOAD\/Zurich%20Light%20Extra%20Condensed%20BT.ttf\">Zurich Light<\/a> (for the date and time text and numbers)<\/p>\n<h1>Download background<\/h1>\n<p><a href=\"http:\/\/chromatic.se\/wp-content\/uploads\/portal2background.png\">2560 x 1440<\/a><br \/>\n<a href=\"http:\/\/chromatic.se\/wp-content\/uploads\/1920x1200.png\">1920 x 1200<\/a><br \/>\n<a href=\"http:\/\/chromatic.se\/wp-content\/uploads\/1920x1080.png\">1920 x 1080<\/a><br \/>\n<a href=\"http:\/\/chromatic.se\/wp-content\/uploads\/1680x1050.png\">1680 x 1050<\/a><br \/>\n<a href=\"http:\/\/chromatic.se\/wp-content\/uploads\/1600x1200.png\">1600 x 1200<\/a><br \/>\n<a href=\"http:\/\/chromatic.se\/wp-content\/uploads\/1600x900.png\">1600 x 900<\/a><br \/>\n<a href=\"http:\/\/chromatic.se\/wp-content\/uploads\/1344x756.png\">1344 x 756<\/a><br \/>\n<a href=\"http:\/\/chromatic.se\/wp-content\/uploads\/1280x1024.png\">1280 x 1024<\/a><br \/>\n<a href=\"http:\/\/chromatic.se\/wp-content\/uploads\/1280x720.png\">1280 x 720<\/a><br \/>\n<a href=\"http:\/\/chromatic.se\/wp-content\/uploads\/1024x768.png\">1024 x 768<\/a><br \/>\n<a href=\"http:\/\/chromatic.se\/wp-content\/uploads\/800x600.png\">800 x 600<\/a><\/p>\n<p>If you&#8217;d rather make adjustments to the background feel free to use my original\u00a0<a href=\"http:\/\/chromatic.se\/UPLOAD\/test%20chamber%20geektool.ai\">Illustrator vector graphics<\/a>.<\/p>\n<h1>Download geeklets<\/h1>\n<p><a href=\"http:\/\/chromatic.se\/UPLOAD\/Geeklets.zip\">Geeklets.zip<\/a>\u00a0(updated October 25th)<\/p>\n<h1>Tutorial (text)<\/h1>\n<p><strong>Step 1)<\/strong> Go get <a href=\"http:\/\/itunes.apple.com\/us\/app\/geektool\/id456877552?mt=12\">Geektool at the Mac App Store<\/a> if you haven&#8217;t already.<\/p>\n<p><strong>Step 2)\u00a0<\/strong>Download Font 1 and Font 2 from this page. Open Font Book on your Mac and click and drag the fonts into that program. The fonts are now installed and you can use them in all your software.<\/p>\n<p><strong>Step 3)\u00a0<\/strong>Download one of the backgrounds, whichever fits your screens resolution. If you have another settings or want to change the appearance, feel free to download the Illustrator file instead.<\/p>\n<p><strong>Step 4)\u00a0<\/strong>Save the background where ever it suits you. Right click the file and choose\u00a0<em>Set Desktop Picture.<\/em><\/p>\n<p><strong>Step 5)\u00a0<\/strong>Download all the geeklets by right clicking the Geekelts.zip file and select the equivalent of &#8220;save as&#8221;.<\/p>\n<p><strong>Step 6) <\/strong>Doubleclidk the ZIP-file to unarchive it. Install the geeklets by doubleclicking them and answering &#8220;yes&#8221; when you&#8217;re asked if you really want to open the files.<\/p>\n<p>If the popup window is so large that the YES and NO button is pushed outside of your screen, the follow Tucker Chapin&#8217;s instructions:<\/p>\n<p><em>Go to <strong>System Preferences<\/strong> &gt; <strong>Keyboard<\/strong> &gt; <strong>Keyboard Shortcuts Tab<\/strong> and select \u201c<strong>All controls<\/strong>\u201d rather than the default of \u201cText boxes and lists only.\u201d Then when the popup comes up hit TAB then Enter to select &#8220;YES&#8221;.<\/em><\/p>\n<p><strong>Step 7)\u00a0<\/strong>If you have installed the 2 fonts and used the same background as I (2560 x 1440), the geeklets will probably look fine. If not, you&#8217;ll have to adjust their position and possibly font. You have to first highlight Geektool if you want to change any of the geeklets, so click the app icon once, then the geeklet you want to change. You can now click and drag to move it around or enter a X and Y position manually. You can of course also change the font with the font button.<\/p>\n<p>That&#8217;s about it, I guess. You could open up Activity monitor and see if the readings match. The Memory meter is showing the value of Used memory which is (Wired + Active + Inactive) and the total is Used + Free.\u00a0When you&#8217;re all done you can delete the geeklets, but I suggest saving the desktop image somewhere.<\/p>\n<h1>Problems?<\/h1>\n<p><strong>Problem 1)<\/strong> I can&#8217;t open the geeklets after I&#8217;ve downloaded them. &#8220;I have GeekTool running but it says that it cannot open that type of file. However my icon for the Geeklets is just blank white unlike your in the video.&#8221;<\/p>\n<p><strong>Solution 1)<\/strong>\u00a0Max Pillong says: Simply open up GeekTool and create your own Script Geeklet (The content doesn&#8217;t matter) and save it. After this it should recognize the extension .glet to be opened with GeekTool.<\/p>\n<p><strong>Problem 2)<\/strong> The popup window is so large that the YES and NO button is pushed outside of your screen.<\/p>\n<p><strong>Solution 2)<\/strong> Tucker Chapin says:\u00a0Go to<strong> System Preferences<\/strong> &gt; <strong>Keyboard<\/strong> &gt; <strong>Keyboard Shortcuts Tab<\/strong> and select \u201c<strong>All controls<\/strong>\u201d rather than the default of \u201cText boxes and lists only.\u201d Then when the popup comes up hit TAB then Enter to select \u201cYES\u201d.<\/p>\n<h1>Variations on this theme<\/h1>\n<p>JordoTron\u00a0<a href=\"http:\/\/i.imgur.com\/if6T4.png\" target=\"_blank\" rel=\"noopener\">i.imgur.com\/if6T4.png<\/a><br \/>\nMatt Fairbrass\u00a0<a href=\"http:\/\/imgur.com\/gYBBv\" target=\"_blank\" rel=\"noopener\">imgur.com\/gYBBv<\/a><br \/>\n@CompendiaryMe\u00a0<a href=\"https:\/\/twitter.com\/CompendiaryMe\/status\/260452060833660928\/photo\/1\">twitter.com\/CompendiaryMe\/status\/260452060833660928\/photo\/1<\/a><br \/>\nSean Dohring\u00a0<a href=\"http:\/\/i.imgur.com\/6HapB.png\">i.imgur.com\/6HapB.png<\/a><\/p>\n<hr \/>\n<p><strong>Note 1<\/strong>: I only used 2 of the geeklets\u00a0<a href=\"http:\/\/www.macosxtips.co.uk\/geeklets\/system\/system-info-circular-graphics\/\">www.macosxtips.co.uk\/geeklets\/system\/system-info-circular-graphics<\/a>\u00a0provided. If you want you could simply go there and download the others and change the font to my <em>progress bar with full steps<\/em>.<\/p>\n<p><strong>Note 2<\/strong>: THANK YOU Max Pillong for fixing the code issue that showed incorrect readings when you have more than 10 GB RAM. You solved the final piece of the puzzle.<\/p>\n<\/div><\/section>\n<div  class='av-buildercomment av-av_comments_list-56c66b2695468e12d3120bc7169a9873  av-blog-meta-author-disabled av-blog-meta-comments-disabled av-blog-meta-category-disabled av-blog-meta-date-disabled av-blog-meta-html-info-disabled av-blog-meta-tag-disabled'><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":3,"featured_media":4675,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[102,105,103],"tags":[],"class_list":["post-953","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-games","category-portfolio-eng","category-social-wall"],"_links":{"self":[{"href":"https:\/\/chromatic.se\/en\/wp-json\/wp\/v2\/posts\/953","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chromatic.se\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/chromatic.se\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/chromatic.se\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/chromatic.se\/en\/wp-json\/wp\/v2\/comments?post=953"}],"version-history":[{"count":62,"href":"https:\/\/chromatic.se\/en\/wp-json\/wp\/v2\/posts\/953\/revisions"}],"predecessor-version":[{"id":4676,"href":"https:\/\/chromatic.se\/en\/wp-json\/wp\/v2\/posts\/953\/revisions\/4676"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/chromatic.se\/en\/wp-json\/wp\/v2\/media\/4675"}],"wp:attachment":[{"href":"https:\/\/chromatic.se\/en\/wp-json\/wp\/v2\/media?parent=953"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/chromatic.se\/en\/wp-json\/wp\/v2\/categories?post=953"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chromatic.se\/en\/wp-json\/wp\/v2\/tags?post=953"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}