My journey as a designer and developer.Altered Focus Tumblr (3.0; @alteredfocus)http://alteredfoc.us/Gradient Creation Within The Browser <p><a href="http://colrd.com/create/gradient/"><img src="http://media.tumblr.com/tumblr_ltl5b41BRh1ql5wbp.png"/></a></p> <p>Last week, <a href="http://mudcu.be/">Michael</a> and I released a web app for <a href="http://colrd.com/create/gradient/">creating gradients</a> from within the web browser. Anyone that has spent much time on digital arts has experienced the headache of creating a gradient within an Adobe product — Illustrator being the worst offender.</p> <p>Adobe has set the standard for graphics creations for many years, and rightfully so. I would never compete with them for a whole graphics suite, but that’s not to say that we shouldn’t try to leap over their bar whenever possible.</p> <p>This app represents our dream of what creating the perfect gradient could be like. Much labor was put into marrying ease of use with power that can come from a singularly focused piece of software like this.</p> <p>Key features:</p> <ul><li>Drag & Drop GIMP Gradient (.GGR) files into the browser for an easy import</li> <li>Similar colors: suggested colors that are similar the one you’re choosing</li> <li>Multiple color models for fine tuning the <em>perfect </em>colors: HSL, RGB, and HEX</li> <li>Preview:  See your gradient in full-screen mode before you save it</li> <li>Randomize gradient: roll the dice to find inspiration for new creations</li> <li>Flip:  Flip your gradient, so:  first is last, and last is first</li> <li>Drag and drop color stop points for easy rearrangement of colors</li> </ul><p><a href="http://colrd.com/create/gradient/">Give it a shot</a>, and let me know what you think!</p>http://alteredfoc.us/post/11873275792http://alteredfoc.us/post/11873275792Mon, 24 Oct 2011 12:40:00 -0700dbchristopher"Design is the fundamental soul of a man-made creation…" “Design is the fundamental soul of a man-made creation…”<br/><br/> - <em><blockquote> <p>In most people’s vocabularies, design means veneer. It’s interior decorating. It’s the fabric of the curtains and the sofa. But to me, nothing could be further from the meaning of design. Design is the fundamental soul of a man-made creation that ends up expressing itself in successive outer layers of the product or service.</p> </blockquote> <p>—Steve Jobs (1955-2011)</p></em>http://alteredfoc.us/post/11184910412http://alteredfoc.us/post/11184910412Sat, 08 Oct 2011 09:11:00 -0700designinspirationdbchristopherHere’s a preview of the new promotional logo/graphic for... <img src="http://25.media.tumblr.com/tumblr_lspjja6ABV1r28o2co1_r1_500.png"/><br/> <br/><img src="http://25.media.tumblr.com/tumblr_lspjja6ABV1r28o2co2_r1_500.png"/><br/> <br/><p>Here’s a preview of the new promotional logo/graphic for <a href="http://www.imagodeicommunity.com">Imago Dei</a>’s upcoming DIY Fair to support <a href="http://www.adventconspiracy.org/">Advent Conspiracy</a>. This was a fun project to work on, and even though it’s not quite finalized I was excited to share it with you! The one in all green is more the direction we will be going. I’m still attached to the original multi-colored pencil design though, so I wanted to share it as well.</p> <p>Which one do you prefer?</p>http://alteredfoc.us/post/11145930435http://alteredfoc.us/post/11145930435Fri, 07 Oct 2011 11:04:00 -0700logodesignimago deidiyNeutra Display TitlingdbchristopherHere’s a quick image that I did for my church.... <img src="http://24.media.tumblr.com/tumblr_lspj6xBkEr1r28o2co1_500.png"/><br/><br/><p>Here’s a quick image that I did for <a href="http://www.imagodeicommunity.com">my church</a>. “Stories From Vietnam” is an event to hear from long term missionaries. I’ve been pretty swamped with work lately, but I still wanted to help out, so I gave myself about 45 minutes to come up with something for it. All in all I’m pretty happy with the results!</p>http://alteredfoc.us/post/11145718876http://alteredfoc.us/post/11145718876Fri, 07 Oct 2011 10:56:00 -0700typographydesignleague gothicdbchristopherBanishing Your Inner Critic <a href="http://www.alistapart.com/articles/banishing-your-inner-critic/">Banishing Your Inner Critic</a>: <p>I was very encouraged by this article on A List Apart, about banishing your inner critic. I know it’s something that plagues all of us as designers and artists. I wanted to share it with you and hope you would be encouraged too; the ideas in this article were a much needed breath of fresh air for me.</p> <p>Especially intriguing to me was the thought that your inner critic actually intends to protect you rather than tear you down. While it is obviously a fear response and incredibly misguided, this simple thought was enough to disarm the inner critic for me.</p> <p>Check out the article and I would love to hear more of your thoughts on it as well.</p>http://alteredfoc.us/post/10690803927http://alteredfoc.us/post/10690803927Mon, 26 Sep 2011 10:08:05 -0700inspirationcreativitydesigndbchristopherColrd V2 Preview <p>As some of you may know, <a href="http://mudcu.be">Michael Deal</a> and I have been working for months on a site for designers to learn about color theory and find <a href="http://colrd.com">color palette inspiration</a>. We recently released our first version to the public, and we are already hard at work on the next round of upgrades and features! I’m so excited about the new direction that I couldn’t wait to share a preview with you.</p> <p>Soon we will be adding a 5th content type: images. You will be able to upload images for the inspiration of your fellow designers, and extract color palettes from those images to help show the colors you love about it. This will add depth to the site and a deeper way for you to engage with the colors. Seeing a palette in action is the best way to realize the possibilities. And with a new content type comes an entirely re-imagined browsing experience. Attached is design comp that should give you a good idea of what’s to come.</p> <p>I would love to hear what you think!</p> <p><a href="http://colrd.com/blog/discover-v2.png"><img src="http://media.tumblr.com/tumblr_lrzh2cMQ6G1ql5wbp.png"/></a></p>http://alteredfoc.us/post/10559291892http://alteredfoc.us/post/10559291892Fri, 23 Sep 2011 09:22:00 -0700web designdbchristopherAnother in my series of quotes 80’s pop stars. This time... <img src="http://25.media.tumblr.com/tumblr_lrs3shw8if1r28o2co1_500.png"/><br/><br/><p>Another in my series of quotes 80’s pop stars. This time from Michael Jackson. Ok, technically, Don’t Stop Till You Get Enough was a song from the 70’s, but I’d say it still fits the spirit of the project in my mind.</p>http://alteredfoc.us/post/10405892647http://alteredfoc.us/post/10405892647Mon, 19 Sep 2011 09:43:00 -0700ChampionDon't StopMichael JacksonPhontPhreak's HandwritingWisdom Of The 80sQuotedbchristopherDon’t ask me why, but this graphic popped in my head... <img src="http://28.media.tumblr.com/tumblr_lrmjzvjLS81r28o2co1_500.png"/><br/><br/><p>Don’t ask me why, but this graphic popped in my head during my regular morning shower. I’ve never listened to Journey, and I didn’t even have “Don’t Stop Believin” stuck in my head at the moment! But either way, I have to admit they were on to something :) And seeing as<a href="http://www.youtube.com/watch?v=KlyXNRrsk4A"> all things 80s</a> are currently roaring back into style, I figured I’d throw one more shout-out into the mix.</p>http://alteredfoc.us/post/10280055420http://alteredfoc.us/post/10280055420Fri, 16 Sep 2011 09:51:02 -0700ChampionJourneyWisdom Of The 80sQuotedbchristopherJSLint From The Command Line <p>I have to give a shout out to Paul Venuti for a great and easy tutorial on running JSLint through a shell command. It was a real lifesaver, after wasting time with other approaches that weren’t working for me.</p> <p><a href="http://echodittolabs.org/blog/2011/01/running-jslint-command-line"><a href="http://echodittolabs.org/blog/2011/01/running-jslint-command-line">http://echodittolabs.org/blog/2011/01/running-jslint-command-line</a></a></p>http://alteredfoc.us/post/10203300187http://alteredfoc.us/post/10203300187Wed, 14 Sep 2011 08:31:05 -0700codingjavascriptdbchristopherThis is hardcore. Not design related, but good motivation for... <iframe src="http://player.vimeo.com/video/27933991" width="400" height="225" frameborder="0"></iframe><br/><br/><p>This is hardcore. Not design related, but good motivation for anyone with dreams.</p> <blockquote> <p>When you wanna succeed as bad as you wanna breathe, then you’ll be successful.</p> <p>- <a href="http://www.youtube.com/watch?v=5fsm-QbN9r8">Eric the Hip Hop Preacher</a> (Via <a href="http://blog.wanken.com/9950/how-bad-do-you-want-success/">Wanken</a>)</p> </blockquote> <p>Better get to work!</p> <p>* Bonus points go to the video creator for using Explosions In The Sky for the soundtrack.</p>http://alteredfoc.us/post/9791131523http://alteredfoc.us/post/9791131523Sun, 04 Sep 2011 08:31:05 -0700dbchristopher The early bird get’s the worm, but the 2nd mouse... <img src="http://29.media.tumblr.com/tumblr_lqus05SYv41r28o2co1_500.png"/><br/><br/><blockquote> <p>The early bird get’s the worm, but the 2nd mouse get’s the cheese.</p> <p>- Author Unknown</p> </blockquote> <p>Here’s some love for you procrastinators!</p> <p>This is another in my series of typographic studies, where I create type treatment based on my favorite quotes. This one made me laugh and I had to share it with you. My main trouble designing this was that I just wanted to fit too much imagery in there. It was a good lesson in ruthlessly editing yourself, which I probably should have taken a few steps further.</p> <p>I also wish I had a lot more time spend working on the mouse trap illustration, but my goal is to only spend 1-2 hours on each of these, so I had to call it quits. Enjoy :)</p>http://alteredfoc.us/post/9707468954http://alteredfoc.us/post/9707468954Fri, 02 Sep 2011 08:31:05 -0700quotefuturabrush script mtnoteworthydbchristopherHere’s a great video of John Jay, Weiden + Kennedy’s... <object width="400" height="231"><param name="movie" value="http://www.youtube.com/v/EpfYPVzJohc&rel=0&egm=0&showinfo=0&fs=1"></param><param name="wmode" value="transparent"></param><param name="allowFullScreen" value="true"></param><embed src="http://www.youtube.com/v/EpfYPVzJohc&rel=0&egm=0&showinfo=0&fs=1" type="application/x-shockwave-flash" width="400" height="231" allowFullScreen="true" wmode="transparent"></embed></object><br/><br/><p>Here’s a great video of John Jay, <a href="http://wk.com">Weiden + Kennedy</a>’s creative director. W+K is one of the greatest advertising agencies in the world, who have created many <a href="http://www.youtube.com/watch?v=lSggaxXUS8k">innovative</a>, <a href="http://www.youtube.com/watch?v=owGykVbfgUE">beloved</a>, and <a href="http://www.youtube.com/watch?v=ekL3Nm4VD0M">legendary</a> advertising campaigns. It’s great to hear more about life in creative services from such a distinguished perspective.</p> <p>There were a lot of wonderful quotes in this. Here a few that really stood out to me:</p> <blockquote> <p>The greatest thing we can offer [in creative services] is be great listeners… to understand what is the truth.</p> </blockquote> <blockquote> <p>Our job is to never let anyone define who we are by their terms.</p> </blockquote>http://alteredfoc.us/post/9667828204http://alteredfoc.us/post/9667828204Thu, 01 Sep 2011 08:31:05 -0700dbchristopher"Your [good taste] is why your work disappoints you." “Your [good taste] is why your work disappoints you.”<br/><br/> - <em><blockquote> <p>“What nobody tells people who are beginners — and I really wish someone had told this to me … is that all of us who do creative work, we get into it because we have good taste. But there is this gap. For the first couple years you make stuff, and it’s just not that good. It’s trying to be good, it has ambition to be good, but it’s not that good. But your taste, the thing that got you into the game, is still killer. And your taste is good enough that you can tell what your making is kind of a disappointment.</p> <p>A lot of people never get past this phase. They quit. Most people I know who do interesting, creative work went through years of this. We know our work doesn’t have this special thing that we want it to have. We all go through this. And if you are just starting out or you are still in this phase, you gotta know it’s normal and the most important thing you can do is do a lot of work. Do a huge volume of work.</p> <p>Put yourself on a deadline so that every week you will finish one story. It is only by going through a volume of work that you will close that gap, and your work will be as good as your ambitions. And I took longer to figure out how to do this than anyone I’ve ever met. It’s gonna take awhile. It’s normal to take awhile. You’ve just gotta fight your way through.”</p> </blockquote> <p>A fantastically encouraging word from <a href="http://www.thisamericanlife.org/">Ira Glass</a>. You gotta hang in there to let your skills catch up with your good taste. A paraphrase from his series <a href="http://www.youtube.com/watch?v=BI23U7U2aUY">on storytelling</a>.</p> <p>—Ira Glass (via <a href="http://www.mcwade.com/DesignTalk/2011/04/nobody-tells-this-to-beginners/">John McWade</a>).</p></em>http://alteredfoc.us/post/9588524321http://alteredfoc.us/post/9588524321Tue, 30 Aug 2011 08:31:00 -0700inspirationdbchristopher Fairy tales are more than true. Not because they tell us that... <img src="http://26.media.tumblr.com/tumblr_lqg1eoZ4sV1r28o2co1_500.png"/><br/><br/><blockquote> <p>Fairy tales are more than true. Not because they tell us that dragons exist, but because they tell us that dragons can be beaten.</p> </blockquote> <p>I love this thought from GK Chesterton about the value of myth and story in our modern lives. All too often we are obsessed with facts as the only vehicle for truth. But myth can communicate truths deeper than what we experience in our daily lives. CS Lewis actually said it better:</p> <blockquote> <p>The value of myth is that it takes all the things we know and restores to them the rich significance which has been hidden by ‘the veil of familiarity’…</p> </blockquote>http://alteredfoc.us/post/9586752830http://alteredfoc.us/post/9586752830Tue, 30 Aug 2011 07:10:06 -0700BlackmooreIM Fellquotecs lewischestertondbchristopher“The Art of Logotype,” a documentary about Doyald... <object width="400" height="231"><param name="movie" value="http://www.youtube.com/v/PSSztlMjZtM&rel=0&egm=0&showinfo=0&fs=1"></param><param name="wmode" value="transparent"></param><param name="allowFullScreen" value="true"></param><embed src="http://www.youtube.com/v/PSSztlMjZtM&rel=0&egm=0&showinfo=0&fs=1" type="application/x-shockwave-flash" width="400" height="231" allowFullScreen="true" wmode="transparent"></embed></object><br/><br/><p>“The Art of Logotype,” a documentary about Doyald Young. If this preview get’s you excited, you can <a href="http://www.lynda.com/Print-Design-tutorials/doyaldyounglogotypedesigner/62371-2.html">watch the documentary in it’s entirety at lynda.com</a>.</p> <p>I don’t know how I haven’t thought of this, but drawing individual letters would be a great way to study typography and grow as a designer. I’m gonna go home and get started!</p>http://alteredfoc.us/post/9547183150http://alteredfoc.us/post/9547183150Mon, 29 Aug 2011 08:31:06 -0700dbchristopherThe first time we heard my child’s heartbeat in utero. Not... <embed type="application/x-shockwave-flash" src="http://assets.tumblr.com/swf/audio_player_black.swf?audio_file=http://www.tumblr.com/audio_file/9503192666/tumblr_lqgbd5zfZ51r28o2c&color=FFFFFF&logo=soundcloud" height="27" width="207" quality="best"></embed><br/><br/><p>The first time we heard my child’s heartbeat in utero. Not design or dev related, but it was a big moment for me and I still wanted to share it! You can hear both my wife’s heartbeat and the baby’s, which comes out a lot more towards the end.</p>http://alteredfoc.us/post/9503192666http://alteredfoc.us/post/9503192666Sun, 28 Aug 2011 08:31:06 -0700dbchristopherCross browser full-page background image <p>Here’s my response to the <a href="http://css-tricks.com/3458-perfect-full-page-background-image/">perfect full page background image</a>, jquery solution. To use a full page background, that scales and keeps it’s aspect ratio is nigh-impossible in CSS for anything less than the most modern browsers. I found this JQuery solution on CSS-Tricks, but it was lacking in ability to keep the image centered. Originally created by <a href="http://www.bitsquad.nl/">Koen Haarbosch</a>, here’s my updated code:</p> <p><em>UPDATE: I removed the css sizing (width:100%, height:100%) due to a difference in opinion as to what “height:100%” means. Safari thinks it means content height, while other browsers think it means viewport height. Now all sizing is calculated in js</em>.</p> <p>HTML:</p> <pre class="prettyprint"><code class="lang-html prettyprint"><img src="/rss/images/bg.jpg" id="bg" /></code></pre> <p>CSS:</p> <pre class="prettyprint"><code class="lang-css prettyprint">#bg { position: fixed; top: 0; left: 0; } </code></pre> <p>JQUERY:</p> <pre class="prettyprint"><code class="lang-js prettyprint">$(window).load(function() { // TOGGLE BACKGROUND SIZE function resizeBg() { // INIT VARS var $bg = $(".fullBG"), aspectRatio = $bg.width() / $bg.height(), adjust = 0, windowWidth = window.innerWidth, windowHeight = window.innerHeight; if ( (windowWidth / windowHeight) < aspectRatio ) { $bg.css('width','auto') $bg.css('height',windowHeight+'px'); adjust = Math.ceil(($bg.width()-windowWidth)/2)*-1; } else { $bg.css('width',windowWidth+'px') $bg.css('height','auto'); adjust = '0'; } // CENTER BACKGROUND $bg.css('left',adjust+'px'); } // CALLBACK ON WINDOW RESIZE theWindow.resize(function() { resizeBg(); }).trigger("resize"); });</code></pre>http://alteredfoc.us/post/9457342044http://alteredfoc.us/post/9457342044Sat, 27 Aug 2011 08:31:00 -0700cssjqueryjavascriptcode snippetdbchristopherOne of my all time favorite quotes, from the great jazz bass... <img src="http://30.media.tumblr.com/tumblr_lqg165JgkE1r28o2co1_500.png"/><br/><br/><p>One of my all time favorite quotes, from the great jazz bass player and composer Charles Mingus.</p> <blockquote> <p>Making the simple complicated is commonplace. Making the complicated simple, awesomely simple, that’s creativity.</p> </blockquote> <p>I used one of my favorite typefaces, <a href="http://www.typography.com/fonts/font_overview.php?productLineID=100008">Gotham</a>. I probably should have approached this in a more modern, simplistic way, but I had fun playing with textures and shapes in with the fonts.</p>http://alteredfoc.us/post/9427278848http://alteredfoc.us/post/9427278848Fri, 26 Aug 2011 14:36:54 -0700gothamBordeaux Romanquotemingusdbchristopher"Becoming a good designer is, in my mind, directly related to one’s curiosity and willingness to..." “Becoming a good designer is, in my mind, directly related to one’s curiosity and willingness to work.”<br/><br/> - <em><blockquote> <p>“If you keep asking questions and deliberately practicing your craft, you get better. It’s that simple. So when it feels difficult and you want to scream, grab a pencil and a big blank sheet of paper, and just start drawing. With each iteration you’re closer.”</p> </blockquote> <p>-ERIC KARJALUOTO, SMASHLAB (via <a href="http://www.logodesignlove.com/we-all-get-stuck">LogoDesignLove</a>)</p></em>http://alteredfoc.us/post/9376453941http://alteredfoc.us/post/9376453941Thu, 25 Aug 2011 08:31:00 -0700inspirationdbchristopherColRD - Color Inspiration <a href="http://colrd.com">ColRD - Color Inspiration</a>: <p>After months of work, I’m super excited to announce the release of my newest web project! ColRD is a place to find and share color inspiration for your design projects. Try starting out on the <a href="http://colrd.com/discover">Discover</a> page, where you can quickly narrow down on the perfect palette. Take it for a spin and let me know what you think.</p>http://alteredfoc.us/post/9338238053http://alteredfoc.us/post/9338238053Wed, 24 Aug 2011 10:08:00 -0700projectsdbchristopher