tag:blogger.com,1999:blog-10761041044954846322024-03-18T19:02:38.880-04:00Chip O'Toole's BlogA collection of stuff I'm into, some design, some home improvement, some t-shirt posts, and other stuff. I don't post often, but always try to make it worth reading.Chiphttp://www.blogger.com/profile/02471368211164711230noreply@blogger.comBlogger86125tag:blogger.com,1999:blog-1076104104495484632.post-33402932339151375762012-04-02T21:01:00.001-04:002012-04-09T11:11:06.470-04:00The Browser is DeadWell, maybe not dead. Disappearing perhaps?<br />
<br />
In a recent Buzzfeed post entitled "<a href="http://www.buzzfeed.com/jwherrman/remember-the-browser-wars">Remember The Browser Wars?</a>", author <a href="https://twitter.com/#!/jwherrman">John Herrman</a> points out that not only are the browser wars over, but that as browsers increase in simplicity, then begin to disappear entirely. He writes, "The next versions of the operating systems will write the discreet 'browser' out of existance."<br />
<br />
So I wondered. What would that look like?<br />
<br />
I took the latest version of Google's Chrome UI (thank you <a href="https://twitter.com/#!/getjoypad/">Todd</a>) and made it essentially disappear. In the same vain as Apple's minimalist QuickTime 10 design, Chrome's navigation elements, tabs, and address bar only appear when you need them and vanish when you don't.<br />
<br />
Interface elements appear as the user mouses towards the top of the page and disappear as the user mouses away. It presents the user with the cleanest possible slate to interact with, focusing on content and eliminating clutter.<br />
<div style="text-align: left;">
<a href="http://www.chipotoole.com/images/Google_Chrome.gif" target="_blank" imageanchor="1" style="clear: left; margin-bottom: 1em;"><img border="0" height="225" src="http://www.chipotoole.com/images/Google_Chrome.gif" width="400" /></a></div>
<div style="text-align: left;">
Google, I'll be expecting my offer letter in gmail.</div>Chiphttp://www.blogger.com/profile/02471368211164711230noreply@blogger.com76tag:blogger.com,1999:blog-1076104104495484632.post-80461692871404912862011-12-28T17:55:00.000-05:002011-12-28T20:20:57.138-05:00Boston's WBZ Makeover Enters a Cold Sea of Blue<br />
<br />
<br />
Boston's local channel 4 news station, WBZ recently underwent a $750,000 makeover that includes a new set design and revised logo, reports the <a href="http://www.bostonglobe.com/business/2011/12/28/wbz-news-gets-new-look-competitors-pick-viewers/SCLSNZEuICciIzYwm24joO/story.html">Boston Globe</a>. The changes were made in an effort to better compete in a market where other stations are gaining viewership. In addition, the station is continuing to solidify their brand evolution from NBC to CBS in an affiliate change in 1995.<br />
<br />
WBZ general manager Ed Piette says, "How do you contemporize a legacy television station? What we have here is no different than Cadillac, which was born in the 1920s, which is still very 21st century. Our look and our feel was getting a little long in the tooth."<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-dZAbdJ4gDyU/TvucngdEtyI/AAAAAAAAK8c/AlMvposHd4A/s1600/WBZ_Sets.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-dZAbdJ4gDyU/TvucngdEtyI/AAAAAAAAK8c/AlMvposHd4A/s1600/WBZ_Sets.jpg" /></a></div>
<br />
<br />
At first glance, the set's new look – a slick, blue, purple, and metallic grey palette feels clean and contemporary. The logo, which looks to be the same art, just converted to a one color semi-transparent white knockout treatment, compliments the set nicely and pops off the dark blue backgrounds. All in all, a fine execution.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-Svl3GZbxT24/Tvucwp-yBEI/AAAAAAAAK8o/I1iUG09CcPU/s1600/WBZ_CBS_Old_Logo.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-Svl3GZbxT24/Tvucwp-yBEI/AAAAAAAAK8o/I1iUG09CcPU/s1600/WBZ_CBS_Old_Logo.jpg" /></a></div>
<br />
<br />
But after looking at the sea of blue competitive landscape, it begs one to ask, why change from a warm, inviting color palette to an undifferentiated cold metallic look. The set may have needed some updating, e.g. the dated wood veneer, riveted paneling, and lighting, but this feels like a change for change's sake, as Piette says, it "…was getting a little long in the tooth."<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-DHVO0Al9Sfc/Tvuc_9mkJxI/AAAAAAAAK80/xlxsVpHlW3Y/s1600/Competitors.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-DHVO0Al9Sfc/Tvuc_9mkJxI/AAAAAAAAK80/xlxsVpHlW3Y/s1600/Competitors.jpg" /></a></div>
<br />
<br />
What set WBZ apart (visually) from competitors, is it's friendly and bright color palette including a vibrant yellow and cyan. The same warm tones were also reflected in the set that used wood accents and warm lighting. And although becoming a bit dated, the old set felt more inviting and human while this new set feels more like a 21st century version of the game battleship or a scene from the next Bourne flic – cold and mechanical. And what looks like an effort to "contemporize" the station ends up feeling like a half-step back in time, just with better technology.<br />
<br />
I would have loved to see the same technological steps taken to update the set, i.e. the HD monitors and smart lighting, but with the bright color palette. Here's to hopes that viewers enjoy the new set, and don't jump ship just because of the look and feel.<br />
<br />
<br />Chiphttp://www.blogger.com/profile/02471368211164711230noreply@blogger.com92tag:blogger.com,1999:blog-1076104104495484632.post-61267493604499514402011-10-21T12:35:00.000-04:002011-10-21T12:36:18.138-04:00Wikipedia Redesign<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://www.chipotoole.com/wikipedia.html" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="http://www.chipotoole.com/images/wikipedia_redesign.jpg" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><br /></td></tr>
</tbody></table>
<span class="Apple-style-span" style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;">Although Wikipedia was not officially looking to redesign their site, a social search web startup, Greplin, was. Greplin hosted a Wikipedia redesign contest in an effort to get designers and devs to help them design their own search functionality. The goal - rethink Wikipedia's search results with an interactive visual solution. Here was my submission.</span><br />
<span class="Apple-style-span" style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;"><br /></span><br />
<span class="Apple-style-span" style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px;"><a href="http://www.chipotoole.com/wikipedia.html">Check out the full project on my website here</a>.</span>Chiphttp://www.blogger.com/profile/02471368211164711230noreply@blogger.com21tag:blogger.com,1999:blog-1076104104495484632.post-8378306892037318652011-08-24T16:48:00.005-04:002013-03-26T08:11:32.025-04:00YouTube Player PSD<a href="http://www.chipotoole.com/images/YouTube_Player_640x385.zip"><img alt="" border="0" src="http://www.chipotoole.com/images/YouTube_Player_640x385_Blog.jpg" style="cursor: hand; cursor: pointer; height: 241px; width: 400px;" /></a><br />
<div>
<a href="http://chipotoole.wordpress.com/2013/03/18/youtube-player-gui-psd-2013-free-download/">UPDATE: Download my new 2013 YouTube Player here</a><br />
<br />
<span class="Apple-style-span"><a href="http://www.chipotoole.com/images/YouTube_Player_640x385.zip">Download the 2012 YouTube Player Photoshop file (1.8MB)</a></span></div>
<div>
<br /></div>
Hello my fellow intertubers. In many of the designs I create, I often have to show an embedded YouTube player. For each project, I end up going to YouTube, screenshotting the player, then crudely chopping it up in Photoshop to fit the video size I want. Welp, I've HAD it. So I took some time and recreated the player from scratch and I'm making it available in cyberspace.<br />
<div>
<br /></div>
<div>
I chose the 640 x 385 size, but the file is easily scalable since all of the objects are vectors within Photoshop. I've included a couple nice extras like the large play button overlay, a pause button, and the reduced progress bar.</div>
<div>
<br /></div>
<div>
Hope this helps. Enjoy!</div>
<div>
<br /></div>
Chiphttp://www.blogger.com/profile/02471368211164711230noreply@blogger.com30tag:blogger.com,1999:blog-1076104104495484632.post-25518584734285783762011-03-21T16:33:00.011-04:002011-03-21T17:22:01.829-04:00How to Eliminate Gradient Banding in Photoshop CS5<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.chipotoole.com/blog/gradient_banding.gif"><img style="cursor:pointer; cursor:hand;width: 400px; height: 270px;" src="http://www.chipotoole.com/blog/gradient_banding.gif" border="0" alt="" /></a><br /><br />Ever create a large gradient in Photoshop and notice the banding as it transitions from one color to the next? This is a common occurrence when you have a very large area that you're covering like a desktop background or TV frame in 1080p. Since it's so large, the eye begins to detect each step of gradation in single color bands.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.chipotoole.com/blog/gradient_banding.jpg"><img style="cursor:pointer; cursor:hand;width: 400px; height: 300px;" src="http://www.chipotoole.com/blog/gradient_banding.jpg" border="0" alt="" /></a><br /><br />By default if you're using the Gradient Tool in a layer or using the Shape Tool and applying a Gradient Overlay Layer Effect, Photoshop will not prevent any gradient banding. There are a few ways to eliminate banding, but the quickest that I've found is by making sure Dither is checked while using the Gradient Tool. Voilà! This will add noise to the gradient, undetectable to the eye, that eliminates the those distinct banding lines.<br /><br />The obvious drawback to this technique is that it's not easily editable. Once you've created that gradient, it's set in stone. Adobe does not give us the Dither option in the Gradient Overlay Layer Effect. Very unfortunate for when you just want to tweak the gradient by a value or two. The best option may be just saving a Gradient Preset in the Gradient Editor and making changes from there.<br /><br />Happy dithering.Chiphttp://www.blogger.com/profile/02471368211164711230noreply@blogger.com46tag:blogger.com,1999:blog-1076104104495484632.post-85466097969878931052011-03-21T11:23:00.004-04:002011-03-21T17:26:47.579-04:00The Photoshop Etiquette for Web Designers<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photoshopetiquette.com/"><img style="cursor:pointer; cursor:hand;width: 400px; height: 271px;" src="http://www.chipotoole.com/blog/photoshop_etiquette.jpg" border="0" alt="" /></a><br />One of the best guidelines for web designers and art directors I've seen out there. Dan Rose did a great job with a simple "Do this, don't do this" way of presenting the many ways designers can execute their artwork and get it ready for handoff to dev teams. Cheers Dan, art directors across the globe thank you.<br /><br /><a href="http://photoshopetiquette.com/"></a>Chiphttp://www.blogger.com/profile/02471368211164711230noreply@blogger.com15tag:blogger.com,1999:blog-1076104104495484632.post-55967390320836701752011-02-01T18:12:00.005-05:002011-02-02T09:09:46.798-05:00InDesign Object Effect Shortcut - No Drop Shadow<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.chipotoole.com/blog/indesign_icon_shortcut.jpg"><img style="cursor:pointer; cursor:hand;width: 400px; height: 145px;" src="http://www.chipotoole.com/blog/indesign_icon_shortcut.jpg" border="0" alt="" /></a>
<br /><meta equiv="Content-Type" content="text/html; charset=UTF-8"> <meta equiv="Content-Style-Type" content="text/css"> <title></title> <meta name="Generator" content="Cocoa HTML Writer"> <meta name="CocoaVersion" content="1038.35"> <style type="text/css"> p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica} p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; min-height: 14.0px} </style> <p class="p1">
<br /></p> <p class="p1">Ever apply an effect in InDesign like a drop shadow, inner shadow, or glow by using a keyboard shortcut? Well, then you're probably familiar with this common problem Adobe has never addressed in any version of InDesign, even before CS1!</p> <p class="p2">
<br /></p> <p class="p1">For some reason, the default shortcut for an object effect is the Drop Shadow property by hitting command option M. Did Adobe assume that everyone would want drop shadows on everything therefore making it the default? Or was it that engineer's life long dream to force drop shadows upon every designer who's just looking for quick access to an effect menu? Or is it just simply that the drop shadow effect is the most popular and therefore deserves the default setting?</p> <p class="p2">
<br /></p> <p class="p1"><meta charset="utf-8"><span class="Apple-style-span" style="font-family: Georgia, serif; font-size: 16px; "><a href="http://4.bp.blogspot.com/_d3PeWLNnL_A/TUiUArpHWBI/AAAAAAAAKIQ/2Ef6sQ6rrZU/s1600/indesign_effects_menu_ds.jpg"><img src="http://4.bp.blogspot.com/_d3PeWLNnL_A/TUiUArpHWBI/AAAAAAAAKIQ/2Ef6sQ6rrZU/s400/indesign_effects_menu_ds.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5568863678679701522" style="cursor: pointer; width: 400px; height: 243px; " /></a></span></p><p class="p1">The answer is none of the above. The problem with the current state of the shortcut is that it automatically applies the drop shadow effect to the object. If the user wants any other effect, they have to first turn off the drop shadow, then turn on the desired effect. It's always a two step process (god forbid we have 1 extra click right?).</p> <p class="p2">
<br /></p> <p class="p1">But what happens when you want a different effect than a drop shadow, and still want to use a shortcut? Well, if you were to change the shortcut, Adobe gives you a list of effects to choose from, in turn, just changing your default effect to let's say an outer glow instead of a drop shadow, but still automatically applying the effect. Obviously, this doesn't change the root issue.</p> <p class="p2">
<br /></p> <p class="p1">The solution is a shortcut that opens up the Effects dialog box without automatically applying any effect at all. In a perfect world, it would be a button or menu item that opens up the dialog box, e.g. "Effects…". This solution would provide the user with all the effect options without forcing automatic application. Adobe does not provide this for the user.</p> <p class="p2">
<br /></p> <p class="p1"><b>But there is a workaround!</b></p> <p class="p1">For the Effects dialog box to appear without automatically applying any effects to the object, assign the keyboard shortcut to the top item, Transparency. This will allow the user to choose which effect they desire and it eliminates the turn off, turn on process. So there you go! Of course you can customize this shortcut to whatever you want, it doesn't have to be the command option M, hell, you could keep the default drop shadow shortcut and just add your own to the transparency setting, go nuts.</p><p class="p1">
<br /></p> <p class="p2"><meta charset="utf-8"><span class="Apple-style-span" style="font-family: Georgia, serif; font-size: 16px; "><a href="http://3.bp.blogspot.com/_d3PeWLNnL_A/TUiUPwlVaLI/AAAAAAAAKIY/0EX2fLpR1pw/s1600/indesign_effects_menu_trans.jpg"><img src="http://3.bp.blogspot.com/_d3PeWLNnL_A/TUiUPwlVaLI/AAAAAAAAKIY/0EX2fLpR1pw/s400/indesign_effects_menu_trans.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5568863937704061106" style="cursor: pointer; width: 400px; height: 243px; " /></a></span></p> <p class="p1">Hope this helps anyone in their quest for InDesign keyboard shortcut domination. Enjoy!</p>Chiphttp://www.blogger.com/profile/02471368211164711230noreply@blogger.com6tag:blogger.com,1999:blog-1076104104495484632.post-16701676648615239342011-02-01T13:47:00.002-05:002011-02-01T14:04:36.440-05:00We're in Boston!<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_d3PeWLNnL_A/TUhZJEdO63I/AAAAAAAAKII/wMXVDxPi6Gw/s1600/FORGE_Bar_1.JPG"><img style="cursor:pointer; cursor:hand;width: 400px; height: 299px;" src="http://1.bp.blogspot.com/_d3PeWLNnL_A/TUhZJEdO63I/AAAAAAAAKII/wMXVDxPi6Gw/s400/FORGE_Bar_1.JPG" border="0" alt="" id="BLOGGER_PHOTO_ID_5568798951593667442" /></a><br /><div>Forge has made the move to beanville from Waltham! (Nevermind the windex and moving bins). Big changes going on that's for sure. Good tings, good tings. The space is pretty sick, thanks to the people who were here before us who put a ton of cash into making it look amazing - nevermind putting in a massive bar including kegerator. The creative room's pretty tight, but cozy (I think). Joined the gym downstairs and I'm hoping to bike into the office once we unbury ourselves from 1000 ft. of snow. My commute has gone from 12 minutes to 45, but I can't complain (except for the MBTA's shotty service). Overall I'm pumped for the space and everyone here at Forge. Stop by for a beer on the house.</div><div><br /></div><div><br /></div>Chiphttp://www.blogger.com/profile/02471368211164711230noreply@blogger.com7tag:blogger.com,1999:blog-1076104104495484632.post-46380087267900261982010-11-24T15:33:00.008-05:002010-12-28T12:46:16.082-05:00Rounded Rectangles in PhotoshopAh, the rounded rectangle. Beloved by designers loathed by developers. This is not a post to delve into that age old debate, but an informational guide to understanding the how and why.<div><br /></div><div>The rounded rectangle tool in photoshop is one of the most heavily used tools in a digital designers toolbox. Many designs require this tool to produce call-to-action buttons, content buckets, navigation elements, the list goes on. True that rounded rectangles may soon be replaced by CSS3 to achieve this effect in the browser and eliminate the need for images to construct them, but designers will always need the tool for visual comps and final pixel perfect designs.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.chipotoole.com/blog/Rounded_Rectangle_Tool.jpg"><img style="cursor:pointer; cursor:hand;width: 214px; height: 213px;" src="http://www.chipotoole.com/blog/Rounded_Rectangle_Tool.jpg" border="0" alt="" /></a><br /><br />Before I go into how these are constructed, I want to answer the why first (skip this if you know the answer). In many cases, rounded elements in digital design represent buttons. Designers create buttons with rounded corners to mirror the real life physical objects that we have come to know: buttons on vending machines, dashboards in cars, kitchen appliances, remote controls, etc. This is also the reason designers often use gradients, highlights, and reflections to show dimension. If industrial designers created most of those physical buttons with hard corners, you'd see that correlation in visual design. Rounded corners also allow users to differentiate elements on the page. Content blocks can be treated with hard corners and buttons with rounded corners to clearly communicate to the user "look, this element is a button, it looks like a real button, and it has an action, click it!"<br /><br />So how does Photoshop construct these manipulatable miniature marvels of bitmapped beauty? Photoshop's Rounded Rectangle Tool uses the Radius setting to determine how "rounded" your rectangle will be. The amount can be defined by pixels, inches, centimeters, millimeters, points, or picas. If you're a digital designer you'd be using pixels mostly likely. Adobe uses their proprietary software to calculate the proper anti-aliasing (extra pixels with varying levels of transparency to show soft edges) for each corner radius setting.</div><div><br /></div><div><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.chipotoole.com/blog/Rounded_Rectangle_Toolbar.jpg"><img style="cursor:pointer; cursor:hand;width: 309px; height: 35px;" src="http://www.chipotoole.com/blog/Rounded_Rectangle_Toolbar.jpg" border="0" alt="" /></a><br /><br />Below is an example of the differences between a 1 pixel to a 6 pixel corner radius zoomed in at 1200% and at actual size (72ppi). You can see how photoshop uses anti-aliasing to create the rounded corner. The radius setting (distance from the center of an imaginary circle in this case) is the amount of anti-aliased pixels it takes for the corner to get to the first solid pixel (including that solid pixel). Of course, you can enter in any radius number you choose, but if the number is larger than half the height of your rectangle, the ends will become circular. If the radius is equal to the half the height of your rectangle it will be a pill shaped element (often, a desired effect).<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.chipotoole.com/blog/Corner_Radius_Comparison.jpg"><img style="cursor:pointer; cursor:hand;width: 399px; height: 581px;" src="http://www.chipotoole.com/blog/Corner_Radius_Comparison.jpg" border="0" alt="" /></a><br /><br /><span style="font-weight: bold;">A Note About Pixel Perfect Design & Aligning to the Pixel Grid</span><br />In each of these examples, the rounded rectangle was created while aligning to the pixel grid. More specifically, snapping to a 1px x 1px grid with the grid visible. This will guarantee that each of the rectangles will have straight hard edges on the top, bottom, left, and right. This is a technique used in Pixel Perfect Design, a topic that I'll cover in detail in a later post. It ensures that the artwork being created eliminates "loose pixels", basically unwanted anti-aliasing that Photoshop often includes when designers don't align to the pixel grid.<br /><br />In addition, here is an example showing the rectangle with a stroke layer style in the various corner radius sizes. There are 3 options for positioning the stroke; inside, center, and outside. Photoshop uses the outside position and at a size of 3px as the default. In this example I'm showing the stroke size at 1px. The inside position places the stroke on the inside of the rectangle, obviously, and doesn't change the original dimensions of the rectangle (ideal in many cases). As you can see, the center position causes the stroke to not align to the grid, there is unwanted anti-aliasing, and the dimensions have increased by a visual half pixel. The outside stroke position adds 1px all around and changes the final dimensions to be 2 pixels wider and taller, in this case, 27px x 27px. Keeping this in mind is helpful when designing to a pixel perfect wireframe, e.g. if a button needs to be exactly 40px x 20px, then adding a stroke to the outside (default) would make the button 42px x 22px thus breaking the bounds of the design.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.chipotoole.com/blog/Corner_Radius_Strokes.jpg"><img style="cursor:pointer; cursor:hand;width: 399px; height: 574px;" src="http://www.chipotoole.com/blog/Corner_Radius_Strokes.jpg" border="0" alt="" /></a><br /><br />I hope this helps anyone in their quest for pixel perfect rounded rectangle creation. If you have corrections or additions to my post, please feel free to comment below.</div>Chiphttp://www.blogger.com/profile/02471368211164711230noreply@blogger.com6tag:blogger.com,1999:blog-1076104104495484632.post-23038140632480243612010-09-30T14:49:00.004-04:002011-08-09T15:42:37.085-04:00Number 10 Envelope USPS Guidelines<a href="http://3.bp.blogspot.com/_d3PeWLNnL_A/TKTt12zJukI/AAAAAAAAKDk/-Nu1h61QsMw/s1600/Envelope_10.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img style="cursor:pointer; cursor:hand;width: 400px; height: 231px;" src="http://3.bp.blogspot.com/_d3PeWLNnL_A/TKTt12zJukI/AAAAAAAAKDk/-Nu1h61QsMw/s400/Envelope_10.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5522800552561982018" /></a>
<br /><div><i>Click the image for enlarged view</i></div><div>
<br /></div>Finding specifications for such a common of a thing as a #10 envelope (normal letter size envelope) is harder than you think. I was able to track down the guidelines after visiting multiple sites and piecemealing the specs together to help me draw the guidelines you see above. Google was not good at finding relevant results either. As soon as you type in "envelope" you get thousands of results from printing vendors. Sorting though the results for the information I needed was taxing to say the least. So, I created this simple graphic to help anyone in their quest for number 10 envelope answers.<div>
<br /></div><div>A couple things to note: The Barcode Clear Zone is exactly that, a clear zone. No text or graphics can be in this 4.75" by 0.625" area. Also, in the OCR Read Area, OCR stands for Optical Character Recognition, a machine operated sorting process. Robots score another point against the humans. Nothing but essential addressee information should appear in this area.
<br /><div>
<br /></div><div>In addition, the US Postal Service has a website with all of it's guidelines, but the user interface and information architecture is down right atrocious. It's close to impossible to find anything especially if you don't speak "mail". Most everything has a specific term so nothing is easily searchable. How would someone guess that this information is in the "DMM 102 Elements on the Face of a Mailpiece" page? Their "Postal Explorer" needs a much overdue major overhaul. Good luck to the people who take on <b>that</b> task.</div></div>Chiphttp://www.blogger.com/profile/02471368211164711230noreply@blogger.com14tag:blogger.com,1999:blog-1076104104495484632.post-63283828512163824732010-09-08T19:58:00.009-04:002010-09-10T12:52:29.891-04:00iTunes 10 Icon Design<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_d3PeWLNnL_A/TIgkvs6c9qI/AAAAAAAAKDA/mhQZQtvkdVM/s1600/iTunes_10.png"><img style="cursor:pointer; cursor:hand;width: 400px; height: 400px;" src="http://1.bp.blogspot.com/_d3PeWLNnL_A/TIgkvs6c9qI/AAAAAAAAKDA/mhQZQtvkdVM/s400/iTunes_10.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5514698145643951778" /></a><br /><div><br /></div>Well, the uproar from the design community regarding Apple's redesigned logo for the new version of iTunes has inspired me to do one of my own. Also, Wired Magazine was running a photoshop contest on their Gadget Lab Blog and I could use a new iPod Shuffle. I've seen the outpour of self proclaimed designers take their stab at their own iTunes 10 logo, and most are mediocre at best. Why? It's because most designers don't or can't produce the level of sophistication that Apple does. Apple creates things at a high level of reality and detail which requires more time than the average designer will put into a project.<div><br /></div><div>Now, I wasn't going to spend more than an hour on this, so I'll call out myself on being hypocritical, but wanted to throw my hat in the ring to see if I had what it took to be an Apple icon designer or at least have this hold up against the icons in the family. And for the record, I happen to like the icon and don't see why players gotta hate (<a href="http://blogs.forbes.com/velocity/2010/09/09/new-apple-itunes-icon-no-big-deal-designers-say/">here's a Forbes article to back me up</a>). I take issue with the typographical treatments on the website more than anything, but that's another convo.</div><div><br /></div><div>I first started with what I thought iTunes was in the first place, and therein lied the challenge: iTunes no longer exclusively represents music (and hasn't for quite some time). With music, movies, tv shows, books, podcasts, radio, and of course apps, even the iTunes name doesn't make much sense anymore, let alone the icon with an eighth note over a CD (see below).</div><div><br /></div><div><a href="http://4.bp.blogspot.com/_d3PeWLNnL_A/TIhIDiynDBI/AAAAAAAAKDI/ieC9h6dLF40/s1600/iTunes_Before-After.jpg"><img src="http://4.bp.blogspot.com/_d3PeWLNnL_A/TIhIDiynDBI/AAAAAAAAKDI/ieC9h6dLF40/s400/iTunes_Before-After.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5514736969431059474" style="cursor: pointer; width: 400px; height: 160px; " /></a></div><div><span class="Apple-style-span">Before and After</span></div><div><br /></div><div>My attempt was to focus on iTunes' and media consumption in general's most basic function, the play button. I used Apple's signature OSX Aqua Human Interface Guidelines, the photo-illustrative style, as the foundation for the design by incorporating bevels, gradients, reflectivity, translucency, and bright color. Added a beveled play button, a burst effect in the center for some pop, a slight drop shadown, and viola! Hey, it's no cyberduck icon that's for sure, but I like it, maybe I'll hack into my system and use it who knows. And some may still scoff at the practice of the gloss, glass, and gradients of the Aqua style, but you must admit, it's worked just fine for Apple.</div>Chiphttp://www.blogger.com/profile/02471368211164711230noreply@blogger.com6tag:blogger.com,1999:blog-1076104104495484632.post-60415089051900654142010-08-20T14:56:00.014-04:002010-09-10T12:52:37.588-04:00Creating an Icon Set<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_d3PeWLNnL_A/TG7jM0LWWhI/AAAAAAAAKCc/jgSCJozxcas/s1600/Nuance_Iconography.jpg"><img style="cursor:pointer; cursor:hand;width: 400px; height: 275px;" src="http://2.bp.blogspot.com/_d3PeWLNnL_A/TG7jM0LWWhI/AAAAAAAAKCc/jgSCJozxcas/s400/Nuance_Iconography.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5507589203624876562" /></a><br /><br /><div>Here is a small group of icons that I'm currently developing for a software client. Although I've created hundreds of icons in my days as a designer, I've never really done a full fledged icon set for a client. The client gave us the choice to either just purchase a series of icons that would work with their existing site design, or create them from scratch. Instead of rushing to open a new tab in istock, I opted to push some pixels around, get my fingers dirty, and do them myself.<br /><div><div><i><span class="Apple-style-span" style="color:#666666;">Note: I typically do this for any artwork, I never buy stock web graphics, EVER.</span></i></div><div>As you can see they all follow a similar look and feel; the reflections, the gradients, the rounded corners, color palette, etc.* They match the aesthetic of the dark themed website quite well. Of course I also made sure to fit all graphics to the grid and have pixel perfect lines whenever possible. What do you think?</div></div><div><br /></div><div><span class="Apple-style-span" style="color:#666666;">*</span><i><span class="Apple-style-span" style="color:#666666;">(Disclaimer: I don't condone excessive use of reflections, the web 2.0 look, etc., I was just following the preexisting site design haha.)</span></i></div></div>Chiphttp://www.blogger.com/profile/02471368211164711230noreply@blogger.com6tag:blogger.com,1999:blog-1076104104495484632.post-38793607522280503142010-08-17T08:57:00.006-04:002010-09-10T12:52:44.713-04:00Dragon Billboard<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_d3PeWLNnL_A/TGqKekWdHUI/AAAAAAAAKBw/OEMzOVw7pto/s1600/Dragon_Billboard.jpg"><img style="cursor:pointer; cursor:hand;width: 400px; height: 300px;" src="http://4.bp.blogspot.com/_d3PeWLNnL_A/TGqKekWdHUI/AAAAAAAAKBw/OEMzOVw7pto/s400/Dragon_Billboard.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5506365752172420418" /></a><br /><br />So I drove past a billboard I designed here in the Boston area, and in my 7 or 8 years of designing, it's my first billboard! Well, there's actually 30 of them around Boston with 4 different variations. Obviously not a mind blowing concept or design, and I would've been happy with the copy being short enough to read in 3 seconds, but hey, it is what it is and I'm proud of it. These are the smaller "eco posters", short for economical (not ecological). I did one of the larger ones you'd see on the highway, it's up somewhere, and the software box breaks the top boundary of the billboard, no big deal. Just one more billboard and I'll achieve total design consciousness.Chiphttp://www.blogger.com/profile/02471368211164711230noreply@blogger.com4tag:blogger.com,1999:blog-1076104104495484632.post-55338152256626194132010-07-08T13:46:00.014-04:002010-11-24T09:37:59.470-05:00Email Signature Guidelines for the Peoples on Intertubes<img src="http://www.chipotoole.com/img/Email_Signature.jpg" width="400" height="600" alt="Don't do this" /><br /><br />Yes, it's been a while since I've posted (again), but I was designing two websites and whatever.<br /><br /><span style="font-weight:bold;">Email signatures</span><br />Email signatures are an issue, straight up. Most signatures cause some serious problems across the intertubes and the ever passive aggressive world of corporate america. So here are some do's and don't's, some best practices, and a quick guideline to making the best friggin email signature EVER!<br /><br /><span style="font-weight:bold;">Number 1 - No images, seriously</span><br />Yeah sorry, nope, no images. That means no image of your actual hand written signature, no company logos, no kitten pics, and no animated gifs (which I do love and are hilarious, but only in IM's). There are several reasons for this. First and foremost, you run the risk of having your email blocked by spam filters. Spam filters are just not that great and they see an image and freakout and will put your address on the junk list which is the modern day equivalent of being blacklisted. You don't want that. Second, images take up tons of space over time. A 2K image sent one time is no biggie, but thousands of times by thousands of employees can equal up to 2 gigs a day of transferred information, almost a terabyte a year just because of that little image.<br /><br /><b>Number 2 - K.I.S.S. (Keep it simple stupid)</b><br />Since now you can't have any images, all you're left with is text and special characters to style your signature. Don't take this an an opportunity to use a hundred asterisks to separate your name from everything else or taste the rainbow and OD on color to the max. Ideally you probably shouldn't use color at all. Any links you have may show up underlined in blue and if your name is in red, bam, you're halfway over the rainbow (not good in this case). Stick to using black and shades of grey to help establish visual hierarchy. And don't use more than one font. The typeface you use in the body should be the typeface used in the signature. Use bold or all caps to give weight, stay away from italics, they're bad, berry berry bad *finger pointing*.<br /><br /><b>Number 3 - Keep it short (stupid)</b><br />Eliminate every extraneous item of information that you can. If you don't fax things anymore, get rid of your fax number. If someone REALLY needs to fax you, they can call or email you. Get rid of your networking links, nobody cares really, and if they do, they'll ask. So that means your twitter account, linkedin profile, facebook url, skype name, aim name, etc. Quotes, delete those immediately, it's embarrassing just mentioning quotes, ewgh *shivers*. Really keep it to your name, title, company name, address, number(s), the url, and THAT'S IT. If you need certain information that pertinent to your profession like your twitter account cuz your're a social media expert (which is a fake job btw - UPDATE - ok, not a fake job, just a very new one ok?) then fine add it, but only if you really need to.<br /><br /><b>Number 4 - Follow the rules</b><br />If your company has specific instructions for how to create and use your signature, FOLLOW THEM. This is not your big chance to stick out in the world and make a stand against the unjust evils of corporate slavery. If the company signature is black, don't make yours blue. Don't bold your name if it's not supposed to be. Don't grey out your title, even if it IS Waste Allocation Technician (pretty sure garbage men don't have emails, nevermind). Just stick to the damn rules, even if it means that the email signature is long and has an image, there's plenty of time to showcase your unique and delicate personality in passive aggressive emails about refilling ice trays. More important that you and your company show consistency. It communicates that you're an organized, collaborative, responsible company that would never put their clients on mute in a conference call to bad mouth them.<br /><br /><b>Example of a great email signature</b><br /><br /><div><a href="http://4.bp.blogspot.com/_d3PeWLNnL_A/TDZDI-IQ5RI/AAAAAAAAJ40/EOxxqgI2hfI/s1600/Awesome_Signature.jpg"><img src="http://4.bp.blogspot.com/_d3PeWLNnL_A/TDZDI-IQ5RI/AAAAAAAAJ40/EOxxqgI2hfI/s400/Awesome_Signature.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5491650617020572946" style="cursor: pointer; width: 249px; height: 112px; " /></a><br /><br /><span style="font-weight:bold;">Other little tip nugglers:</span><br />Don't use a VCard, that's just lame, nobody does that anyway. HTML, don't do it, half the time it won't be read and you don't want your emails to look like 100 lines of code. Use web safe fonts. You really only have the choice of these fonts: Arial, Georgia, Lucida, Tahoma, Times, Trebuchet, and Verdana. Don't use Times, it looks like crap, and don't even joke about Comic Sans, he'll git cha.<br /><br />So, if you follow these guidelines it'll make for probably the most BORING email signature in the world, but if you're using an email signature to express really anything, you've got much bigger problems. Hopefully this helped you create your email signature, and if in the future, if we're allowed to have supertastic swirling video exploding email signatures while avoiding seizures and spam filters, then nevermind.<br /></div><div><br /></div><div>P.S. If you've got extra time, read the email in the image above, I wrote it, pretty sweet crazy cat lady story imo.</div>Chiphttp://www.blogger.com/profile/02471368211164711230noreply@blogger.com15tag:blogger.com,1999:blog-1076104104495484632.post-44300886695456815602010-04-26T11:47:00.007-04:002010-09-10T12:53:15.184-04:00Setting up a "real" subdomain with Go Daddy<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_d3PeWLNnL_A/S9XeZ2OzjEI/AAAAAAAAJ1E/mqHA3revYvI/s1600/Go_Daddy_Subdomains.jpg"><img style="cursor:pointer; cursor:hand;width: 400px; height: 317px;" src="http://2.bp.blogspot.com/_d3PeWLNnL_A/S9XeZ2OzjEI/AAAAAAAAJ1E/mqHA3revYvI/s400/Go_Daddy_Subdomains.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5464518258519673922" /></a><br />If you've searched online for this, you won't really find a clear answer. At least that was my experience. After a few days of searching and speaking with 4 different techs at Go Daddy, I was finally able to get my subdomain up and running.<div><i><span class="Apple-style-span" style="color:#666666;">Disclaimer: I'm not a developer and some of this info may be a little off, take it with a grain of salt haha. Plus, this is more helpful if you have both your domain and your hosting with Go Daddy.</span></i></div><div><b>How Go Daddy treats subdomains:</b></div><div>If you go into your hosting manager on Go Daddy, and Add a Subdomain, this really doesn't create, what I refer to, as a "real subdomain". It's really a faux subdomain that just forwards users to a folder of your main site, e.g. www.mobile.example.com will take you to www.example.com/mobile, not keep you at www.mobile.example.com. Technically, I guess it's a subdomain, but this is not what I wanted.</div><div><br /></div><div>Go Daddy's <a href="http://help.godaddy.com/article/4652">help pages</a> on setting up your subdomain don't really tell you this. They say, go to your hosting control center, click domain management, choose your domain, click Add Subdomain, and you're done, hooray!</div><div><br /></div><div>Not really. At least not if you want people to stay on that particular subdomain, like www.mobile.example.com. If you're fine with having it forward to the /mobile folder of your main site, then fine, you're good. I wanted to track my subdomain as it's own unique url or domain. Plus, I wanted a dedicated google analytics page set up for this domain (which I'm sure I could set up a condition on there to track). This was more just a personal preference thing.<b> I wanted people to stay at the subdomain address.</b></div><div><br /></div><div>Go Daddy can't do this with an ECONOMY plan, you must have a DELUXE hosting plan. It took 4 of their techs to realize why my subdomain wasn't working right. One of their more knowledgeable guys finally found the problem and walked me through, setting up a "real subdomain". </div><div><br /></div><div><b>Setting up your "real subdomain" with Go Daddy:</b></div><div><ul><li>First, make sure you have deluxe hosting account. Even though they say that you can have up to 25 subdomains with a economy plan, those are the "faux" ones I'm talking about. According to them, I wanted "multiple web sites" on the same hosting account and I needed to have the deluxe plan for that. Cost me $20 more a year and they gave me 20% discount.</li><li>Go to your Hosting Control Center. Click Domain Managment, click Add Domain, enter the address (without the http://www), e.g. mobile.example.com and the folder name, e.g. /mobile, click Ok.</li><li>After that's set-up, go back to the Go Daddy account homepage, click <b>Domain Manager</b>, click your domain, then click <b>Total DNS Control </b>in the lower center column.</li><li>Here you'll set up a new A Record for your subdomain. Click the <b>Add New A Record</b> button in the top right.</li><li>Under <b>Host Name</b>, enter in the name you want for your subdomain, e.g. for www.mobile.example.com, just enter, <b>mobile</b>.</li><li>Under <b>Points to IP Address</b>, enter the same IP address you have for your main site.</li><li>Bam, your done! Now just wait 4-6 hours (possibly up to 24 hrs) to propagate, and you should be live.</li></ul>Another dumb thing I couldn't find online either was: </div><div><b>Where do I put the html, css, and image files for my subdomain?!</b> </div><div>And what do I call the html pages?</div><div><ul><li>Create a sub folder on your root level of your site.</li><li>Name it the same name as your subdomain, e.g. /mobile</li><li>Put an index.html file in this folder, that will be your "homepage" for the subdomain.</li><li>Create a images folder within this folder hold your images for the subdomain.</li><li>Create a stylesheets folder as well if you'd like to put your css there too.</li></ul>So, now when someone visits your subdomain, they'll STAY at that address, it'll look for the files in your e.g. /mobile folder, and they should see your site! I hope this helped you. If anyone has corrections to my post, please, by all means put it in the comments. Good luck.</div>Chiphttp://www.blogger.com/profile/02471368211164711230noreply@blogger.com82tag:blogger.com,1999:blog-1076104104495484632.post-44917200231085744532010-04-13T09:49:00.005-04:002010-09-10T12:53:22.498-04:00My website is live wha whaaa!<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_d3PeWLNnL_A/S8R42WIJpFI/AAAAAAAAJjk/k7P9eVJVeJs/s1600/Blog_Website.jpg"><img style="cursor:pointer; cursor:hand;width: 400px; height: 317px;" src="http://1.bp.blogspot.com/_d3PeWLNnL_A/S8R42WIJpFI/AAAAAAAAJjk/k7P9eVJVeJs/s400/Blog_Website.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5459621523327919186" /></a><br /><div>Yes! Finally. Feels so good to have this up and running at last. I was up until 1 last night working out the last couple pages. It was an insanely long design process, as any designer knows when putting together their own portfolio site.</div><div>I was able to teach myself an intro level of xhtml and css to code the site and make sure everything is up to web standards and googleable. Overall, I'm pretty pumped about it and I feel a great sense of accomplishment knowing I created the site from scratch and without the help of any template or web program or anything. Just my noggin and some keystrokes.</div><div><div>So, check it out. If you find a bug, ignore it, that's nothing sir.</div><div><a href="http://www.chipotoole.com/">www.chipotoole.com</a><br /><div>Next, my mobile site :D (as my wife's sighs)</div></div></div>Chiphttp://www.blogger.com/profile/02471368211164711230noreply@blogger.com4tag:blogger.com,1999:blog-1076104104495484632.post-12365409989957436372010-02-23T10:35:00.007-05:002010-09-10T12:53:32.583-04:00Firefox 3 Elements Template (Minimal) PSD<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_d3PeWLNnL_A/S4P7ldNCHOI/AAAAAAAAJb8/7wQK5LVdl8U/s1600-h/Firefox_3_Template_Minimal.jpg"><img style="cursor:pointer; cursor:hand;width: 400px; height: 316px;" src="http://1.bp.blogspot.com/_d3PeWLNnL_A/S4P7ldNCHOI/AAAAAAAAJb8/7wQK5LVdl8U/s400/Firefox_3_Template_Minimal.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5441469395706715362" /></a><br /><div>Hey guys, here is a template I created for showing sites using the Firefox 3 elements, but keeping it minimalistic, getting rid of the bookmarks, navigational toobars, and the status bar. This is to show the most of your site without using up valuable pixel real estate while still giving the impression of a browser window. I based the frame off a site dimension of 1000 x 768, but you can move the elements around to customize that if you want.</div><div><br /></div><div>Feel free to download the PSD from my site here:</div><div><a href="http://www.chipotoole.com/Firefox_3_Template_Minimal.zip">Firefox_3_Elements_Minimal.zip</a></div><div><br /></div><div>Word.</div>Chiphttp://www.blogger.com/profile/02471368211164711230noreply@blogger.com4tag:blogger.com,1999:blog-1076104104495484632.post-50365481240303767202010-01-20T10:44:00.005-05:002010-01-20T15:39:30.368-05:00Lemonparty T-ShirtYes, it's a lemonparty t-shirt. Printed exclusively for our boston volleyball team. When the other team serves you lemons . . . have a party. If you don't get the joke, I'm not going to explain it here, that's what urban dictionary is for haha.<br /><br />It's been a while since I've burnt a screen, so my first try was BACKWARDS! I was pretty pissed at myself. No biggie though, washed it out, burnt another one, and voila the pollo.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_d3PeWLNnL_A/S1dSkuevUSI/AAAAAAAAJMk/_5LIt82TkJA/s1600-h/LP.jpg"><img style="cursor: pointer; width: 300px; height: 400px;" src="http://3.bp.blogspot.com/_d3PeWLNnL_A/S1dSkuevUSI/AAAAAAAAJMk/_5LIt82TkJA/s400/LP.jpg" alt="" id="BLOGGER_PHOTO_ID_5428898666724151586" border="0" /></a><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_d3PeWLNnL_A/S1dSkuHssgI/AAAAAAAAJMc/nFwVwalG9Z4/s1600-h/LP_FAIL.jpg"><img style="cursor: pointer; width: 300px; height: 400px;" src="http://4.bp.blogspot.com/_d3PeWLNnL_A/S1dSkuHssgI/AAAAAAAAJMc/nFwVwalG9Z4/s400/LP_FAIL.jpg" alt="" id="BLOGGER_PHOTO_ID_5428898666627510786" border="0" /></a><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_d3PeWLNnL_A/S1dSkUUI4XI/AAAAAAAAJMU/7SMyY_G-8qM/s1600-h/photo.jpg"><img style="cursor: pointer; width: 300px; height: 400px;" src="http://3.bp.blogspot.com/_d3PeWLNnL_A/S1dSkUUI4XI/AAAAAAAAJMU/7SMyY_G-8qM/s400/photo.jpg" alt="" id="BLOGGER_PHOTO_ID_5428898659700367730" border="0" /></a><br /><br />I've destroyed the screen, but it you'd like you own you can always order it from my zazzle page at <a href="http://www.zazzle.com/chipotoole">http://www.zazzle.com/chipotoole</a><br /><br />Go Lemonparty!Chiphttp://www.blogger.com/profile/02471368211164711230noreply@blogger.com7tag:blogger.com,1999:blog-1076104104495484632.post-7175162816751863632010-01-05T21:43:00.005-05:002010-09-10T12:53:46.140-04:00Energy Efficient Light Bulb Vector Art EPS PDF<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_d3PeWLNnL_A/S0P7Bdx_cQI/AAAAAAAAJLQ/l8ZB_CCSvW8/s1600-h/Energy_Efficient_Light_Bulb.jpg"><img style="cursor: pointer; width: 173px; height: 400px;" src="http://2.bp.blogspot.com/_d3PeWLNnL_A/S0P7Bdx_cQI/AAAAAAAAJLQ/l8ZB_CCSvW8/s400/Energy_Efficient_Light_Bulb.jpg" alt="" id="BLOGGER_PHOTO_ID_5423454378876956930" border="0" /></a><br /><br /><br />I needed some vector art of an energy efficient light bulb for an icon on my new website, and couldn't really find a good one out there. And plus I didn't want to use an istock icon or some clip art off the web.<br /><br /><span style="font-weight: bold;">When you want something done right, do it yourself.</span><br /><br />So I did. If anyone needs it, it's here on my website, free to download to the masses. It's not perfect curves or anything, I didn't spend to much time on it since it was going to be using at about 20px wide.<br /><br />It's in a pdf form, but with the vectors intact. You can grab the eps if you want too.<br /><br /><a href="http://www.chipotoole.com/blog/Energy_Efficient_Light_Bulb.pdf">Energy Efficient Light Bulb PDF</a><br /><a href="http://www.chipotoole.com/blog/Energy_Efficient_Light_Bulb.eps">Energy Efficient Light Bulb EPS</a>Chiphttp://www.blogger.com/profile/02471368211164711230noreply@blogger.com9tag:blogger.com,1999:blog-1076104104495484632.post-67809409128883882172010-01-05T17:57:00.004-05:002010-09-10T12:54:24.912-04:002010 for Chip<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_d3PeWLNnL_A/S0PD5BQ_I2I/AAAAAAAAJLI/4ilV8SWhWA4/s1600-h/2010_Blog.jpg"><img style="cursor: pointer; width: 400px; height: 154px;" src="http://1.bp.blogspot.com/_d3PeWLNnL_A/S0PD5BQ_I2I/AAAAAAAAJLI/4ilV8SWhWA4/s400/2010_Blog.jpg" alt="" id="BLOGGER_PHOTO_ID_5423393760643851106" border="0" /></a><br />One of many new year resolutions, blog more. I was doing well there for a while and like many personal bloggers, got lazy and stopped posting. Hell, we all know there are like 2 people following me, so what's the point? Just tweet? It HAS been proven in the past to be useful for tips people are searching for on google, like my polaroid dimensions post :) So I'm gonna try to write stuff up like that.<br /><br />Couple posts com'n up - my patio installation story and my website launch. More to come peoples . . .Chiphttp://www.blogger.com/profile/02471368211164711230noreply@blogger.com1tag:blogger.com,1999:blog-1076104104495484632.post-47578505404090863262009-08-21T14:52:00.006-04:002009-09-30T10:13:03.835-04:00The Funk Old Gregg T-Shirt<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://3.bp.blogspot.com/_d3PeWLNnL_A/So7vj7jTYeI/AAAAAAAAI3U/51A914ZTXP4/s1600-h/The_Funk_T-Shirt.jpg"><img style="cursor: pointer; width: 300px; height: 400px;" src="http://3.bp.blogspot.com/_d3PeWLNnL_A/So7vj7jTYeI/AAAAAAAAI3U/51A914ZTXP4/s400/The_Funk_T-Shirt.jpg" alt="" id="BLOGGER_PHOTO_ID_5372494806059803106" border="0" /></a><br /><br />I'm old greeeeeeeegggggg!<br /><br />Ah, the classic legend of Old Gregg. If you haven't seen it, block off an hour of your day, plop yourself down and watch. Keep an open mind and enjoy :D<br /><br /><a href="http://www.youtube.com/watch?v=5dp1qrUt6Ps">http://www.youtube.com/watch?v=5dp1qrUt6Ps</a><br /><br />Anyway, I loved that episode of the Mighty Boosh so much I ended up making a t-shirt featuring one of the key characters - The Funk. If you want to know the story of the Funk, click ahead to about minute 7:45. I did a one color print, hand drawn from starring at a screen shot for an hour, and added a backside (not seen here yet) that reads, "Never forget, June 2nd, 1979 the day the Funk died".<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_d3PeWLNnL_A/So7vppoxkvI/AAAAAAAAI3c/ejV3gB-MMU8/s1600-h/The+_Funk_Screen_Shot.png"><img style="cursor: pointer; width: 400px; height: 303px;" src="http://4.bp.blogspot.com/_d3PeWLNnL_A/So7vppoxkvI/AAAAAAAAI3c/ejV3gB-MMU8/s400/The+_Funk_Screen_Shot.png" alt="" id="BLOGGER_PHOTO_ID_5372494904330130162" border="0" /></a><br /><br />I did an extra one if anyone wants it. If you'd like to custom order one, I'd be happy to print and send one to you, just lemmie know at chipotoole@gmail.com<br /><br />UPDATE: I've washed out this screen (which I shouldn't have), BUT since I've had so many requests for The Funk t-shirt, I've created a zazzle page so that people can order it online. Here is the link:<br /><a href="http://www.zazzle.com/chipotoole"><br />http://www.zazzle.com/chipotoole</a><br /><br />You can pick the size, color, style of t-shirt, etc. I'm not a professional screen printer, so it takes a while for me to print these in my bathroom haha. Now you can order it and have it within days. Not a bad deal, enjoy guys!Chiphttp://www.blogger.com/profile/02471368211164711230noreply@blogger.com4tag:blogger.com,1999:blog-1076104104495484632.post-37743207452146344912009-06-05T15:08:00.003-04:002009-06-05T15:15:40.463-04:00Megaman Shoots a Lacrosse Ball<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.chipotoole.com/images/MegaMan_Lacrosse_Shot.gif"><img style="cursor: pointer; width: 239px; height: 52px;" src="http://www.chipotoole.com/images/MegaMan_Lacrosse_Shot.gif" alt="" border="0" /></a><br /><br />Ok, so I've been a little obsessed with 8-bit graphics lately (nintendo look'n stuff), and in particular, Megaman. I just think he's cool, whatever.<br /><br />Anyway, I play lacrosse here in NE, and there's a team that we play against called the Megamen. They use megaman on their helmets and shorts and stuff. So I thought I'd be funny to have him playing lacrosse against a couple of his enemies in the game.<br /><br />This is also just opening a big can of worms for me too, cuz I can just see myself getting addicted to these animated 8-bit gifs. Hmm, what can I do next with megaman?Chiphttp://www.blogger.com/profile/02471368211164711230noreply@blogger.com1tag:blogger.com,1999:blog-1076104104495484632.post-66984966311140864612009-05-07T16:17:00.004-04:002009-05-07T16:26:36.207-04:00My Abacus Computer<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_d3PeWLNnL_A/SgND9WDLfxI/AAAAAAAAGS4/v17uqnXxW9M/s1600-h/Abacus_Computer.jpg"><img style="cursor: pointer; width: 300px; height: 400px;" src="http://2.bp.blogspot.com/_d3PeWLNnL_A/SgND9WDLfxI/AAAAAAAAGS4/v17uqnXxW9M/s400/Abacus_Computer.jpg" alt="" id="BLOGGER_PHOTO_ID_5333181104906796818" border="0" /></a><br /><br />This is how fast my computer at work feels sometimes. Multiple times a day, I sit there for minutes on end waiting and waiting for things to process. Sometimes I just get up and go get coffee or go to the bathroom to pass the time. Sometimes it's not done when I get back! So sick of this. It's been almost 6 months, the time has come.<br /><br />It's a Mac G5 tower, and you would THINK, that would be enough, but no, it's not. A few years ago, yes, but today with the Adobe products I use for work and websites that use flash 9 and 10, this just doesn't cut it. We can still repurpose it for account managers though - they just use office and the intertubes 98% of the time.<br /><br /><span style="font-weight: bold;">UPDATE:</span> I recently got the nod to spec out a brand new iMac here at work. I'm looking at the 24" 2.93GHz. I have the same one at home and it flies. I've worked from home a couple times and it's night and day, the speed difference. Can't wait.Chiphttp://www.blogger.com/profile/02471368211164711230noreply@blogger.com2tag:blogger.com,1999:blog-1076104104495484632.post-9670429447325543942009-04-24T14:39:00.005-04:002009-04-24T15:31:31.397-04:002009 Boston Marathon<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_d3PeWLNnL_A/SfISu6puwEI/AAAAAAAAGOc/SQk8GlmeUio/s1600-h/Boston_Marathon_Chip.jpg"><img style="cursor: pointer; width: 400px; height: 266px;" src="http://2.bp.blogspot.com/_d3PeWLNnL_A/SfISu6puwEI/AAAAAAAAGOc/SQk8GlmeUio/s400/Boston_Marathon_Chip.jpg" alt="" id="BLOGGER_PHOTO_ID_5328341906360287298" border="0" /></a><br /><br />Welp, its over, finally. This year, I finished the 113th running of the Boston Marathon in 3:29:31. Not the 3:10 I was going for, but I've got plenty of excuses for that, see the quick list below. But, it was for a great cause, I raised over $3000 for people with liver disease and I completed a marathon, not bad in anybody's book I say. Can't wait to get back to seeing people though, jeez.<br /><br /><span style="font-weight: bold;">Excuse List:</span><br />1 - I was injured during training with shin splints and some tendonitis in my feet (which originated from me ramping up my training too fast in December - mistake 1)<br /><br />2 - The injuries forced me to do 75% of my training on the elliptical machine and 25% on the roads. The elliptical can not prepare you enough to qualify. And I didn't have access to water jogging. Basically, I wasn't in shape to run a 3:10, period, but I lied to myself and told myself I could do it. High hopes.<br /><br />3 - The crowd was too thick to get out of. This year, the field was it's largest since the 100th running of Boston which in turn made it very difficult to break free of 6 or 7 thousand slow charity runners across just two lanes of road. It was a constant fight, lots of stop and starts, sidewalk/front yard running to finally get to a comfortable pace without other runners cutting you off. This killed my time.<br /><br />4 - There was a 10mph headwind that just pushed you back, just enough to feel it and pick away at your spirit.<br /><br />5 - I had the sophmore blues a little bit. There is just something completely amazing and heart bursting about running your first marathon, especially Boston, and especially in the sun with hundreds of thousands of people screaming your name. I just didn't have the fire in my belly like last year.<br /><br />Whaaaaa, cry baby, right? RIGHT. I'm actually pretty pumped I ran another Boston, and hope to maybe qualify in the future. I wanted to thank all my super generous friends and family who donated to make this goal possible, you guys rock, thank you so much.Chiphttp://www.blogger.com/profile/02471368211164711230noreply@blogger.com1tag:blogger.com,1999:blog-1076104104495484632.post-86614491998032453412009-04-15T14:03:00.002-04:002009-04-15T14:07:36.208-04:003:10:00 Boston Marathon Goal<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_d3PeWLNnL_A/SeYhq_5J8VI/AAAAAAAAGJc/1mjoQcW9nrE/s1600-h/Boston_Marathon_3-10.jpg"><img style="cursor: pointer; width: 271px; height: 400px;" src="http://1.bp.blogspot.com/_d3PeWLNnL_A/SeYhq_5J8VI/AAAAAAAAGJc/1mjoQcW9nrE/s400/Boston_Marathon_3-10.jpg" alt="" id="BLOGGER_PHOTO_ID_5324980632001573202" border="0" /></a><br />Ok, I'm do'n this. Gonna start slow, keep a solid pace, end strong and run a solid 3:10. Not gonna think too much about it, even though I already have, and try to remind myself that running 26.2 is NOT A BIG DEAL, so relax. *Chest pound with fist*Chiphttp://www.blogger.com/profile/02471368211164711230noreply@blogger.com1