<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Wrayco Design</title>
	<atom:link href="http://www.wraycodesign.com/feed" rel="self" type="application/rss+xml" />
	<link>http://www.wraycodesign.com</link>
	<description>Graphic Design &#38; Web Design</description>
	<lastBuildDate>Thu, 10 May 2012 19:14:30 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<xhtml:meta xmlns:xhtml="http://www.w3.org/1999/xhtml" name="robots" content="noindex" />
		<item>
		<title>Move Over WordPress, Meet C5</title>
		<link>http://www.wraycodesign.com/archives/1127</link>
		<comments>http://www.wraycodesign.com/archives/1127#comments</comments>
		<pubDate>Sat, 17 Mar 2012 06:36:36 +0000</pubDate>
		<dc:creator>MLAW</dc:creator>
				<category><![CDATA[Blog]]></category>

		<guid isPermaLink="false">http://www.wraycodesign.com/?p=1127</guid>
		<description><![CDATA[The king is dead; long live the king! Well, actually that&#8217;s not entirely true. Some might say the king of easy website management is …]]></description>
			<content:encoded><![CDATA[<p><em><strong><a href="http://www.wraycodesign.com/wp-content/uploads/2012/03/king-drawing-flip.jpg"><img class="alignright size-full wp-image-1161" title="king-drawing-flip" src="http://www.wraycodesign.com/wp-content/uploads/2012/03/king-drawing-flip.jpg" alt="" width="250" height="260" /></a>The king is dead; long live the king!</strong></em> Well, actually that&#8217;s not entirely true. Some might say the king of easy website management is still WordPress, but there are some princes out there worthy of note.</p>
<p>WordPress leads the pack and with good reason. <strong>It&#8217;s very easy to learn, there are scads of plug-ins that can transform it into nearly any type of website you could possibly want, and there is a tremendous amount of support and training content available online.</strong> It&#8217;s a celebrity in the online world, with loads of templates in tow, thousands of them available at no charge.</p>
<p>It&#8217;s a seductive celebrity, but WordPress has its dark side, and for that reason I eventually decided to explore other options. On the flip side of this shiny, glossy, ever-transforming entity is the baggage that comes with popularity: <em>mean</em> <em>people trying to take advantage</em>.</p>
<p><strong>Because it is used by millions worldwide, it is the most popular CMS in existence today, according to <a href="http://w3techs.com/technologies/overview/content_management/all" target="_blank" onclick="pageTracker._trackPageview('/outgoing/w3techs.com/technologies/overview/content_management/all?referer=');">W3 Techs</a>, and the #1 target for hackers</strong>. As a result, the onus is on WordPress developers to constantly monitor and keep up with the latest security holes. This is why it is imperative to keep updating the WordPress software, as updates are released, which can sometimes happen multiple times in a month.</p>
<p>With every update there is the possibility of incompatibilities with plugins, and the change that the site will break. One must backup the site, and be prepared to take quick action should something go wrong. This means that if you are managing multiple sites, you must put a system in place to make this process go as smoothly as possible. If you are a regular joe learning how to manage your own website, it adds stress to the process, or requires a call to the web designer to do it an an opening of the wallet.</p>
<p><strong>I have two other beefs with WordPress that have also caused me to play the field a little bit, one of which is their sidebar/widgets system, which I find inflexible and clients find confusing.</strong> Why can&#8217;t they just edit it like the rest of the site? It requires explanation and remembering on their part that you have to go somewhere else in the admin pages to edit them. Also, if you want unique content on your sidebar from page to page, it requires making exceptions via plugins that is even more confusing for clients. I&#8217;m hoping someday they will re-think the current sidebar setup.</p>
<p>Lastly, the core installation of WordPress still doesn&#8217;t have a good photo gallery or slideshow option, and I haven&#8217;t had much luck with plugins to get a consistent result, and I have tried plenty of them. I have spent days and days testing various plugins only to give up in frustration. I have hard-coded my own, but my skills in this area only go so far.</p>
<p><strong><a href="http://www.wraycodesign.com/wp-content/uploads/2012/03/C5_logo1.png"><img class="alignleft size-full wp-image-1148" title="C5_logo" src="http://www.wraycodesign.com/wp-content/uploads/2012/03/C5_logo1.png" alt="" width="253" height="49" /></a>Now for the trumpets and choral voices: then I discovered a handsome prince called &#8220;<a href="http://www.concrete5.org/" target="_blank" onclick="pageTracker._trackPageview('/outgoing/www.concrete5.org/?referer=');">Concrete 5</a>,&#8221; or C5 for short.</strong> It was built be a group of geniuses in San Francisco, and I&#8217;m really happy about it. According to some it&#8217;s not a content management system, but more of a website builder, but I might argue that point.</p>
<p>Concrete 5 came to my rescue on bended knee. It is extremely easy for clients to use, as they can login and then just start editing their pages from the &#8220;front&#8221; without having to wade through an admin dashboard. For more complex operations, this is required, however.</p>
<p>C5 also has a built in Slideshow/Photo Gallery option that works like a charm. In addition, there are several very sturdy photo gallery or slideshow &#8220;add-ons&#8221; that you can obtain for very little money. <em>I&#8217;m a believer in paying for what you use, as this gives the developer an incentive to actually create a better product.</em> And in the end, I&#8217;d much rather pay someone $15 for a good product than tear my hair out in frustration by using an inferior &#8220;free&#8221; plug-in.</p>
<p>Speaking of &#8220;free&#8221; plug-ins, I would also like to warn against &#8220;free&#8221; WordPress templates, which I have found can contain tracking or other revenue generating malicious code from the get go. I have personal experience with this, and discovered it when the site that was being called by the code got too much traffic, and I received an error message on my page. You may not entirely understand what this means if you are not a web designer, but suffice it to say I would advise against using free templates and instead pay a small fee for a premium template. The peace of mind is worth it.</p>
<p><img class="alignright  wp-image-1153" title="add-block" src="http://www.wraycodesign.com/wp-content/uploads/2012/03/add-block.jpg" alt="" width="279" height="338" />Concrete 5, on the other hand, doesn&#8217;t have nearly as many templates available, having only .1 percent of the market share compared to WordPress&#8217;s 54% (as of this writing), but that is of no consequence to me since I code my own anyway. Concrete 5 may not have celebrity status, but it&#8217;s a fine little system, and is not much of a target for hackers, which gives me a bit more peace of mind.</p>
<p><strong>I also like C5&#8242;s &#8220;block&#8221; system, which enables you to save sections of content and re-use them anywhere on the site.</strong> You can assign them to be either &#8220;global&#8221; or &#8220;personal.&#8221; If they are global, when you edit one, they all change. If they are personal, your edits only change that block and the others stay the same. This frees up sidebars so that you can have both repeating and one time content, and there is no need for a cumbersome widget system.</p>
<p>Ok, so why use WordPress at all? As I said before, you can make it into almost any type of site you want, and there are tons of resources and support for it out there, and it&#8217;s a fantastic blogging platform, which is what it was created for in the first place. But for me, Concrete 5 is the way to go for regular basic websites, as it&#8217;s so easy to use, and well thought out by the developers. Hurrah! I was looking for so long and now I found you, my prince!</p>
<p><strong>Honorable Mentions</strong>: <a href="http://www.verbcms.com" target="_blank" onclick="pageTracker._trackPageview('/outgoing/www.verbcms.com?referer=');">VerbCMS</a> (for managing and cross-referencing data) and <a href="http://www.squarespace.com" target="_blank" onclick="pageTracker._trackPageview('/outgoing/www.squarespace.com?referer=');">SquareSpace</a> (for clients that like to fiddle with their own website colors, fonts and structure).</p>
<p><strong>Up and Comers</strong>: Adobe&#8217;s <a href="http://muse.adobe.com" target="_blank" onclick="pageTracker._trackPageview('/outgoing/muse.adobe.com?referer=');">Muse</a>. I have only tried it out for a limited time, and it gave me an error early on, so I thought I&#8217;d wait awhile and try again in a few months to see if the rough spots have been smoothed over. This promises to be a game-changer for designers who don&#8217;t know much about coding, as you can build a whole site without it, and it&#8217;s designed like a graphics program (Adobe being the leader in these), familiar ground for any creative.</p>
<p>A similar hosted site system, <a href="http://www.imcreator.com" target="_blank" onclick="pageTracker._trackPageview('/outgoing/www.imcreator.com?referer=');">IMCreator</a>, seduced me into creating a quickie 3-page client site with it, and it worked like a graphics program and was super easy for layout, but when it came time to assign the domain name, frustration ensued. They had a number of steps modifying CNAME and A Records, then you had to set up Google Apps and use their App, but unfortunately it didn&#8217;t work for me, even after 4 weeks of going back and forth with tech support (email only, unfortunately).</p>
<p><strong>Other Heavy Hitters</strong>: I have not yet discussed some robust and popular CMS&#8217;s, namely biggies like Drupal, Joomla, and Expression Engine, all of whom have a large and dedicated following. I have dabbled in these systems and found them to be more powerful than what I was needing most of the time, but Drupal is currently front and center in my radar, and I have a feeling we are going to have a long romance.</p>
<p><strong>In Conclusion:</strong> I still use WordPress but Concrete 5 has turned my pretty head for building small to medium websites. Bottom line: What I have found is that every client has unique needs and desires, and no one system is going to be a &#8220;one size fits all.&#8221; And, with the changing landscape of the web and all the myriad notebooks, tablets, and smartphones out there, it&#8217;s anybody&#8217;s guess what is going to take the lead around the next bend. Whatever it is, it&#8217;s going to be fun and exciting, and I can&#8217;t wait to meet it.</p>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
<div id="atxx_Marker" style="display: none;" align="center">0</div>
]]></content:encoded>
			<wfw:commentRss>http://www.wraycodesign.com/archives/1127/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Aerofoam Industries</title>
		<link>http://www.wraycodesign.com/archives/1061</link>
		<comments>http://www.wraycodesign.com/archives/1061#comments</comments>
		<pubDate>Wed, 05 Jan 2011 22:05:28 +0000</pubDate>
		<dc:creator>MLAW</dc:creator>
				<category><![CDATA[Featured Articles]]></category>
		<category><![CDATA[Logo Design]]></category>
		<category><![CDATA[Print Graphics]]></category>
		<category><![CDATA[corporate]]></category>
		<category><![CDATA[logo]]></category>
		<category><![CDATA[proposed]]></category>

		<guid isPermaLink="false">http://www.wraycodesign.com/?p=1061</guid>
		<description><![CDATA[Aerofoam Industries makes cushions for the airline seating industry, and they wanted to update or redo their logo in advance of a tradeshow just …]]></description>
			<content:encoded><![CDATA[<p><strong>Aerofoam Industries makes cushions for the airline seating industry, and they wanted to update or redo their logo in advance of a tradeshow just a couple of weeks away.</strong> I knew it wouldn&#8217;t be enough time to re-do their logo, and made a couple of alignment adjustments to their current logo just so they could get through their crunch.</p>
<p><a href="http://www.wraycodesign.com/wp-content/uploads/2011/01/AF-old-logo.jpg"><img class="alignleft size-full wp-image-1092" title="AF-old-logo" src="http://www.wraycodesign.com/wp-content/uploads/2011/01/AF-old-logo.jpg" alt="" width="143" height="140" /></a>Fortunately, they were happy with the minor touchups I made while they sat and watched over my shoulder.<em> I should have never agreed to this, but I wanted to help in the 10 minutes or so I was allotted.</em> Unfortunately, they liked it enough that it took off the pressure for re-doing a more thought out logo, despite the fact that my creative side had been mulling it over at first mention. I suppose there is a lesson in there somewhere, because I basically helped them out of urgently needing to re-design their identity, which I really wanted to do.</p>
<p>I had no way to shut off my creative brain from wanting to &#8220;solve&#8221; this for them, however, so I decided to create a logo anyway, since I liked the direction it was going, and here it is.</p>
<p><a href="http://www.wraycodesign.com/wp-content/uploads/2011/01/AF-logo.jpg"><img class="aligncenter size-full wp-image-1066" title="AF-logo" src="http://www.wraycodesign.com/wp-content/uploads/2011/01/AF-logo.jpg" alt="" width="622" height="162" /></a></p>
<p>My enthusiasm for this mark continued, so I created a basic ID system for it, along with a spec sheet. One of the goals of designing a logo, besides simplicity, elegance, and versatility, is giving it more than one &#8220;read.&#8221; What I mean by this when you can see more than one meaning in the logo.</p>
<p><a href="http://www.wraycodesign.com/wp-content/uploads/2011/01/bofa-bird-logo.jpg"><img class="alignleft size-full wp-image-1078" title="bofa-bird-logo" src="http://www.wraycodesign.com/wp-content/uploads/2011/01/bofa-bird-logo.jpg" alt="b of a bird logo" width="101" height="80" /></a>Case in point, the old Bank of America logo with the flying bird that could be made out in the joining of the letterforms. I&#8217;m not comparing the level of my Aerofoam logo design to the elegance of this Bank of America mark, but mind does have multiple reads, which is one of the goals of most logo designers.</p>
<p>The identity system utilizes screened back airplane blueprints for texture, and a larger watermark of the logotype on all three elements.</p>
<p style="text-align: left;"><a href="http://www.wraycodesign.com/wp-content/uploads/2011/01/AF-letterhead.jpg"><img class="aligncenter size-full wp-image-1067" title="AF-letterhead" src="http://www.wraycodesign.com/wp-content/uploads/2011/01/AF-letterhead.jpg" alt="" width="612" height="793" /></a><a href="http://www.wraycodesign.com/wp-content/uploads/2011/01/AF-envelope.jpg"><img class="aligncenter size-full wp-image-1068" title="AF-envelope" src="http://www.wraycodesign.com/wp-content/uploads/2011/01/AF-envelope.jpg" alt="" width="620" height="293" /></a><a href="http://www.wraycodesign.com/wp-content/uploads/2011/01/AF-envelope-bk.jpg"><img class="aligncenter size-full wp-image-1069" title="AF-envelope-bk" src="http://www.wraycodesign.com/wp-content/uploads/2011/01/AF-envelope-bk.jpg" alt="" width="620" height="293" /></a><br />
I made this image of the  business card out-of-scale to the other elements so it would be easier to see for the purposes of this page.<br />
<a href="http://www.wraycodesign.com/wp-content/uploads/2011/01/AF-bizcard.jpg"><img class="size-full wp-image-1070 aligncenter" title="AF-bizcard" src="http://www.wraycodesign.com/wp-content/uploads/2011/01/AF-bizcard.jpg" alt="" width="420" height="222" /></a></p>
<p>The spec sheet is a bit more fanciful, and in real life a client probably wouldn&#8217;t want to &#8220;waste&#8221; all the space at the top with a repeating logo, despite the pleasing effect.</p>
<p>Oftentimes clients feel an overwhelming urge to fill every last bit of space with text, since they are paying for the printing, after all.</p>
<p><a href="http://www.wraycodesign.com/wp-content/uploads/2011/01/AF-specsheet.jpg"><img class="aligncenter size-full wp-image-1071" title="AF-specsheet" src="http://www.wraycodesign.com/wp-content/uploads/2011/01/AF-specsheet.jpg" alt="" width="620" height="796" /></a></p>
<p>I suppose if I wanted to get really ambitious I&#8217;d create an annual report, but it&#8217;s time to get back to my paying projects now. <img src='http://www.wraycodesign.com/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://www.wraycodesign.com/archives/1061/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Steve Brooks K9U</title>
		<link>http://www.wraycodesign.com/archives/1045</link>
		<comments>http://www.wraycodesign.com/archives/1045#comments</comments>
		<pubDate>Wed, 22 Dec 2010 23:57:07 +0000</pubDate>
		<dc:creator>MLAW</dc:creator>
				<category><![CDATA[Logo Design]]></category>

		<guid isPermaLink="false">http://www.wraycodesign.com/?p=1045</guid>
		<description><![CDATA[Dog Trainer Steve Brooks initially approached me to help improve his website search engine rankings, but one thing led to another, and I ended …]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.wraycodesign.com/wp-content/uploads/2010/12/SBK-logo.jpg"><img class="aligncenter size-full wp-image-1046" title="SBK-logo" src="http://www.wraycodesign.com/wp-content/uploads/2010/12/SBK-logo.jpg" alt="Steve Brooks K9U Logo" width="630" height="159" /></a>Dog Trainer Steve Brooks initially approached me to help improve his website search engine rankings, but one thing led to another, and I ended up revising his hard-to-read logo. He showed me his business cards and brochure and I knew I could improve on what he had.</p>
<p>For one thing, his current logo showed type that had numerous outlines on it, which didn&#8217;t work well when reduced in size on a business card. It also didn&#8217;t read well on a T-Shirt. I kept the same type of &#8220;collegiate&#8221; font, and it seemed a natural to give him a dog with a university cap, since he had photos of dogs in university caps on his website and he said that was what people wanted to see the most. It also didn&#8217;t hurt that this image perfectly illustrated his company name.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.wraycodesign.com/archives/1045/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>S3, how do I love thee&#8230;</title>
		<link>http://www.wraycodesign.com/archives/935</link>
		<comments>http://www.wraycodesign.com/archives/935#comments</comments>
		<pubDate>Sat, 07 Aug 2010 04:21:09 +0000</pubDate>
		<dc:creator>MLAW</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[backups]]></category>
		<category><![CDATA[cloud]]></category>
		<category><![CDATA[storage]]></category>

		<guid isPermaLink="false">http://www.wraycodesign.com/?p=935</guid>
		<description><![CDATA[Ahh, new love, you remember what it felt like, don't you? I do, because I'm in love again, or at least I think I am. It's so new and fresh ...]]></description>
			<content:encoded><![CDATA[<p>Ahh, new love, you remember what it felt like, don&#8217;t you? I do, because I&#8217;m in love again, or at least I think I am. It&#8217;s so new and fresh and it&#8217;s making me happy and it&#8217;s called &#8220;S3.&#8221;</p>
<p>I know, sounds like the name for a spy or a prisoner. S3 is new in town, people have started whispering, and many have outright declared their intentions. Luckily, there is room for all of us, because the amount of space is massive.</p>
<p>Just look up. There you  have it. Sky and clouds. What is this &#8220;cloud&#8221; thing that people are taking about? I&#8217;m not really sure myself, but I do know that it seems rather limitless and it&#8217;s very inexpensive. Feels kind of like infinity, or staring out in space. What&#8217;s on the other side? I don&#8217;t pretend to know, but then, again, I&#8217;m in lurv.</p>
<p><img class="alignright size-medium wp-image-949" title="Screen shot 2010-08-06 at 9.31.40 PM" src="http://www.wraycodesign.com/wp-content/uploads/2010/08/Screen-shot-2010-08-06-at-9.31.40-PM-300x254.jpg" alt="" width="300" height="254" />It&#8217;s like I&#8217;ve had everyone&#8217;s extra luggage stuffed in my bedroom (having to keep a close eye on it) and now S3 is going to take care of it all for me. It will be safe, secure, and untouchable, and in a place so massive no one will be able to find it but me. I can get at it whenever I want to. My house can burn down and it will still be there, floating above me, out there somewhere, protected and content.</p>
<p>It&#8217;s another word for freedom, cause people, I&#8217;ve been hanging on to your luggage for years, and I want my own space back! Everytime I get a new client, I&#8217;m responsible for not only their files, but their usernames and passwords, and backups of backups. Sometimes they disappear for years only to show up on my porch and ask me if their favorite pair of purple socks is still in that duffel bag they gave me for safekeeping.</p>
<p>Heck, I&#8217;m a designer, not the keymaster, but there it is. You can&#8217;t very well get rid of that stuff in case someone comes back and needs it desperately. I can write in any contract that I&#8217;m not responsible for keeping stuff more than 2 years after a project is completed, but I keep it anyway, or try to.</p>
<p>Sometimes my extra hard drives will just give out one day, with hardly any notice, leaving me scrambling to move the data over before the last whizzy gasp and dimming of the light. Sometimes I don&#8217;t make it in time, and have to take the boxy cadaver to the specialist, who will do his best to retrive the lost items. But they are never the same, nor am I.</p>
<p>I&#8217;m sick with worry for hours. Will I get back the results of late night creative burst I haven&#8217;t yet had a chance to use? Will all my college coursework be lost in the burned out wires, never to be retrieved? But do I really want to? Doesn&#8217;t matter. I still gnash my teeth about it.</p>
<p>So back to S3, who rides up on his white horse. He hands me a rose, proposes, and I accept. I&#8217;m going to back up my website data to <a href="https://s3.amazonaws.com/" target="_blank" onclick="pageTracker._trackPageview('/outgoing/s3.amazonaws.com/?referer=');">Amazon&#8217;s S3</a> storage service, and it&#8217;s going to happen automatically with the help of his new friend, <a href="http://pluginbuddy.com/purchase/backupbuddy/" target="_blank" onclick="pageTracker._trackPageview('/outgoing/pluginbuddy.com/purchase/backupbuddy/?referer=');">Backup Buddy</a>. The operant word here is <em>automatically</em>.</p>
<p>Backup Buddy will do scheduled backups and automatically upload them to your S3 account, so I don&#8217;t have to. My shoulder muscles are relaxing just thinking about it. I have yet to get all my sites up and running with S3 and Backup Buddy, but I&#8217;m on my way.</p>
<p>This will make upgrading WordPress that much less of a hassle. Yes, when you are in the admin window and see the upgrade announcement, it&#8217;s tempting just to press the button without backing up first and without turning off your plugins, but to avoid the white screen of death, it must be done in this order.</p>
<p>Now, at least, I&#8217;m one step closer to automatic nirvana.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.wraycodesign.com/archives/935/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>You want to edit your website?</title>
		<link>http://www.wraycodesign.com/archives/915</link>
		<comments>http://www.wraycodesign.com/archives/915#comments</comments>
		<pubDate>Sat, 07 Aug 2010 01:02:32 +0000</pubDate>
		<dc:creator>MLAW</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[cms]]></category>
		<category><![CDATA[web]]></category>

		<guid isPermaLink="false">http://www.wraycodesign.com/?p=915</guid>
		<description><![CDATA[When I first started out creating websites in the mid-90s, few people really thought they needed one, let alone needed to edit one. ...]]></description>
			<content:encoded><![CDATA[<p>When I first started out creating websites in the mid-90s, few people really thought they needed one, let alone needed to edit one. Times have changed.</p>
<p>These days nearly everybody wants, and even expects, to be able to make their own edits. I&#8217;m in full agreement. You shouldn&#8217;t have to call a web designer just to correct a typo in on your &#8220;about&#8221; page or anywhere else. That is why I have embraced the &#8220;content management system,&#8221; or CMS, as they are most often called.</p>
<p>In the past people who wanted to edit their own sites would have to have something custom programmed, or purchase software like Adobe&#8217;s Contribute to enable them to access their pages. Seems like now, every other month, I hear about a new CMS, or a a hosted CMS service, that gives people more options and flexility than ever when it comes to maintaining their website.</p>
<p><img class="alignleft size-full wp-image-923" title="hats-drawn" src="http://www.wraycodesign.com/wp-content/uploads/2010/08/hats-drawn.jpg" alt="" width="376" height="372" />To be a &#8220;web designer&#8221; you need to wear several different hats, some of which don&#8217;t fit very well, and there is nary a party hat amongst &#8216;em. Yes, I do the graphic design of a page, but I&#8217;m also called upon to help clients figure out what they need to put on their pages, write content, edit photos, build the design in HTML/CSS, set up a content management system, make sure everything works together, and test out the system on a variety of operating systems and browsers.</p>
<p>Following site launch, there is a period of training clients on how to use their CMS, so they can make small changes to the site themselves. Some clients find the process intimidating, while others find it intoxicating, and end up getting drunk on the power it offers them over the appearance of the site.</p>
<p>Despite controls that will prevent clients from getting in over their heads, inevitably they will run up against something they want to do but can&#8217;t and I will have to give them more access. Flash forward to 3 months later and visiting the site can sometimes yield some unpleasant surprises.</p>
<p>A carefully crafted color palette may end up marred by a client wanting to creating some really eye catching headline for their text, and they somehow managed to make it bright blue on an otherwise neutral color palette. &#8220;Bigger&#8221; and &#8220;more colorful&#8221; are the two requests clients can get caught up with.</p>
<p>It can be a slippery slope, as one of my favorite YouTube videos, &#8220;<a href="http://www.youtube.com/watch?v=qgcX0y1Nzhs" onclick="pageTracker._trackPageview('/outgoing/www.youtube.com/watch?v=qgcX0y1Nzhs&amp;referer=');">Make My Logo Bigger Cream</a>,&#8221; points out. When a client becomes particularly adamant, I ask them, &#8220;If you make everything super colorful and huge, then what is going to stand out?&#8221;</p>
<p>This usually gives them pause, and they generally back-off a little bit. But I digress. I was talking about content management systems, right? Yes, which is about giving clients control, because ultimately they are the ones who care the most about their own content. They are paying the closest attention to detail (one hopes).</p>
<p>I really like to give clients control of their own content, despite the risks of things breaking or looking funny sometimes. After all, I&#8217;m in the business of designing, rather than tinkering. I really don&#8217;t want to get paid to fix your typo. If I happen to be on your site and find it, yes, of course I will fix it.</p>
<p>For me the growth and popularity of content management systems is a godsend, and I&#8217;ve just found a service called <a href="http://www.page.ly" target="_blank" onclick="pageTracker._trackPageview('/outgoing/www.page.ly?referer=');">Page.ly </a> that will also maintain nightly backups of your site and keep the software updated, if you are on WordPress. I will likely recommend it to some of my clients that would be suited to it.</p>
<p>So this brings up the next point, which CMS do I choose? Well, that depends. Do a quick Google search, and you will come up with maybe 10 that are popular, and more than a hundred all told. I have touted WordPress on my own site and use it myself, but it&#8217;s not the only one out there, nor is it appropriate for everyone. For a small business, it can be very easy to learn and have lots of flexibility for those on small budgets.</p>
<p>It can be a pain in the ass to keep WordPress sites and their respective plugins updated all the time. So when you multiply one site with, say 10 plugins, by 30 sites, and WordPress gives you an update every few weeks, that&#8217;s a lot of updating. And, if you are someone like me, you&#8217;d rather be designing.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.wraycodesign.com/archives/915/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>High Profile Media</title>
		<link>http://www.wraycodesign.com/archives/845</link>
		<comments>http://www.wraycodesign.com/archives/845#comments</comments>
		<pubDate>Fri, 06 Aug 2010 21:44:31 +0000</pubDate>
		<dc:creator>MLAW</dc:creator>
				<category><![CDATA[Featured Articles]]></category>
		<category><![CDATA[Illustration & More]]></category>
		<category><![CDATA[Logo Design]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[Illustration]]></category>
		<category><![CDATA[retro]]></category>
		<category><![CDATA[website]]></category>

		<guid isPermaLink="false">http://www.wraycodesign.com/?p=845</guid>
		<description><![CDATA[High Profile Media approached me wanting a whole new look for a somewhat generic website and identity. Owner Janie Van Halen was seeking something …]]></description>
			<content:encoded><![CDATA[<p style="text-align: left;"><strong>High Profile Media approached me wanting a whole new look for a somewhat generic website and identity.</strong> Owner Janie Van Halen was seeking something with more impact that reflected both her personality and access to high profile clients.</p>
<p><img class="size-full wp-image-854 alignleft" title="Screen shot 2010-08-06 at 2.13.11 PM" src="http://www.wraycodesign.com/wp-content/uploads/2010/08/Screen-shot-2010-08-06-at-2.13.11-PM.jpg" alt="" width="384" height="141" />We started her project by looking at lots of imagery, which I posted on the online interactive whiteboard  service <a href="http://www.stixy.com" target="_blank" onclick="pageTracker._trackPageview('/outgoing/www.stixy.com?referer=');">Stixy.com</a>. She told me she liked blues and greens, and gave me exmples of a few other sites she liked that had both a retro/cute factor and a certain sex appeal. This gave me enough direction to get started and what emerged was the desire for a nostaligic feel with a modern twist.<br />
<img class="alignright size-thumbnail wp-image-857" title="Screen shot 2010-08-06 at 2.11.48 PM" src="http://www.wraycodesign.com/wp-content/uploads/2010/08/Screen-shot-2010-08-06-at-2.11.48-PM-124x150.jpg" alt="" width="124" height="150" /></p>
<p>The above image caught her eye for a number of reasons, mainly because of color, but also for the imaginary fuzzy memories it seems to evoke. The ones that followed were from photos of found graffiti along with pinups and airplane bomber girls.</p>
<p><img class="alignleft size-thumbnail wp-image-858" title="Screen shot 2010-08-06 at 2.11.21 PM" src="http://www.wraycodesign.com/wp-content/uploads/2010/08/Screen-shot-2010-08-06-at-2.11.21-PM1-150x150.jpg" alt="" width="150" height="150" />She definitely wanted to have a woman as part of her logo, so my job was to find a perfect pose and create the logo from it. From this point on it became a game of cutting and pasting pinup girls, turning them into digital &#8220;paper&#8221; dolls, with me manipulating their limbs this way and that until I got the perfect pose.</p>
<p><img class="size-thumbnail wp-image-859 alignright" title="Screen shot 2010-08-06 at 2.14.18 PM" src="http://www.wraycodesign.com/wp-content/uploads/2010/08/Screen-shot-2010-08-06-at-2.14.18-PM-150x150.jpg" alt="" width="150" height="150" /></p>
<p style="text-align: left;">From here, however, I would need to get a model to put in this pose as plagarism is not my strong suit. I didn&#8217;t want to rip off anyone else&#8217;s work, so I set to finding a model.</p>
<p style="text-align: left;">Since I don&#8217;t have a lot of female friends who are pin-up models, the simplest thing to do was get on Flickr and contact a girl that might be interested in posing.</p>
<p><img class="alignleft size-thumbnail wp-image-860" title="Screen shot 2010-08-06 at 2.11.39 PM" src="http://www.wraycodesign.com/wp-content/uploads/2010/08/Screen-shot-2010-08-06-at-2.11.39-PM-150x150.jpg" alt="" width="150" height="150" />Turns out the perfect girl lived in Sweden, but she will willing to do the job remotely for a fair price, so I hired her to do the pose. Incredibly, she took her own photos and posed from her living room, and was able to make the necessary changes to get the perfect angles.</p>
<p style="text-align: left;">Once I had the reference photo, I set to work on adjusting contrast and some slight figure adjustments, and had my girl.</p>
<p style="text-align: left;">I put her in illustrator and once I got her looking the way I wanted, added some type. I used a font called &#8220;B-Movie&#8221; as the basis for the logotype, and made changes to the letterforms here and there to give them a more rounded feel. I left them alone for the &#8220;Served Hot&#8221; bit.</p>
<p style="text-align: left;"><img class="aligncenter size-full wp-image-851" title="HPM-Logo" src="http://www.wraycodesign.com/wp-content/uploads/2010/08/HPM-Logo.jpg" alt="" width="523" height="307" /></p>
<p style="text-align: left;">Now a theme was emerging and I discussed the idea of creating an identity that harkened back to old diner menus, which was well-received. This would also translate well for a webpage. I wanted to create a sense of playfulness on the page, and came up with some restaurant terms for the navigation, such as &#8220;Daily Specials,&#8221; &#8220;Our Entrées&#8221; and &#8220;Hot Plates.&#8221; Spinning off of this was a &#8220;Motto,&#8221; which was sometimes put on family diner menus, and &#8220;Hot off the Grill,&#8221; for press releases.</p>
<p style="text-align: center;">
<p style="text-align: center;"><a href="http://www.highprofilemedia.com" onclick="pageTracker._trackPageview('/outgoing/www.highprofilemedia.com?referer=');"><img class="size-full wp-image-849 aligncenter" title="HPM-web" src="http://www.wraycodesign.com/wp-content/uploads/2010/08/HPM-web.jpg" alt="" width="620" height="517" /></a></p>
<p style="text-align: left;">I built the site on the ExpressionEngine CMS platform, which to non-web people means that she can edit the website herself with the help of a fairly sophisticated framework that allows for password protected photo galleries, automatic press-release formatting, and fancy magazine flipbooks. Visit <a href="http://www.highprofilemedia.com" target="_blank" onclick="pageTracker._trackPageview('/outgoing/www.highprofilemedia.com?referer=');">High Profile Media</a> online.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.wraycodesign.com/archives/845/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Understanding Image Formats</title>
		<link>http://www.wraycodesign.com/archives/783</link>
		<comments>http://www.wraycodesign.com/archives/783#comments</comments>
		<pubDate>Sun, 07 Mar 2010 01:19:29 +0000</pubDate>
		<dc:creator>MLAW</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[editing]]></category>
		<category><![CDATA[formats]]></category>
		<category><![CDATA[images]]></category>
		<category><![CDATA[photography]]></category>
		<category><![CDATA[tools]]></category>

		<guid isPermaLink="false">http://www.wraycodesign.com/?p=783</guid>
		<description><![CDATA[One of  jobs of being a designer is helping clients understand the mysteries of file formats. Anyone who has spent any time around a …]]></description>
			<content:encoded><![CDATA[<p><strong>One of  jobs of being a designer is helping clients understand the mysteries of file formats.</strong> Anyone who has spent any time around a digital camera probably has heard the term &#8220;jpeg&#8221; (pronounced jay-peg) and some have also mastered the ability to email said jpeg to someone else. Beyond this, for many, the understanding gets a bit murky.</p>
<p>Take this daisy, for example. It&#8217;s a nice crisp image with clearly defined detail and bright, saturated color. Nothing much to complain about.</p>
<p><a href="http://www.wraycodesign.com/wp-content/uploads/2010/03/daisy1.jpg"><img class="size-full wp-image-785 alignleft" title="daisy1" src="http://www.wraycodesign.com/wp-content/uploads/2010/03/daisy1.jpg" alt="sharp focused image of a daisy flower" width="248" height="288" /></a>If, however, you decided you wanted to enlarge the image of the daisy to 3 or 4 times its size, you would be dismayed to see that it looks somewhat like the next picture of the daisy. It&#8217;s what those used to working with images called &#8220;pixelated&#8221; or having &#8220;jaggy&#8221; edges. Not good.</p>
<p><strong>On many occasions I have had frustrated phone calls from clients demanding to know why this happens, thinking I will be able to tell them which key to press on their keyboard to make it look pretty again.</strong></p>
<p>Alas, it&#8217;s not so simple, and the answer can end up getting very long-winded and eyes glaze over if I sneak the explanation upon someone without warning. The quickest answer is: You cannot enlarge photographic, or &#8220;raster&#8221; images without losing resolution. It&#8217;s a one-way street. You can only reduce them. But people don&#8217;t often like to hear the word &#8220;cannot&#8221; because they are sure there is a way around if they look hard enough.</p>
<p><a href="http://www.wraycodesign.com/wp-content/uploads/2010/03/Daisy2.jpg"><img class="size-full wp-image-786 alignright" title="Daisy2" src="http://www.wraycodesign.com/wp-content/uploads/2010/03/Daisy2.jpg" alt="" width="250" height="290" /></a>Yes, Photoshop does have sharpening tools, but these are really meant for situations where the image is barely out of focus. <strong>One of my clients called me in desperation recently wondering why the images she took off the web didn&#8217;t look good when printed out poster size.</strong> I launched into my explanation and could feel her eyes glazing over.</p>
<p>&#8220;But there must be a way to do it,&#8221; she pleaded. &#8220;There isn&#8217;t, unfortunately,&#8221; I replied. &#8220;Unless you can get a hold of the original images at a high resolution.&#8221; She was in a time crunch and seemed to have promised one of her higher-ups that she would deliver nice crisp images on a poster. Alas all she had was low resolution files. What to do?</p>
<p>I ended up helping her get the poster done by using the images at a smaller size and making them part of a larger design on the poster. She was relieved. There is nothing like a hands-on project to get the point across.</p>
<h2>Image Resolution</h2>
<p>Okay, now for some numbers. I hate memorizing numbers or facts, but in this case it must be done, and the numbers never change. The laws are immutable on this one. I guarantee these will be the only numbers you will have to remember. Commit them to memory.</p>
<p>When it comes to photographic or &#8220;raster&#8221; images, you are dealing in &#8220;pixels&#8221; (what you see on your monitor screen), or &#8220;dots&#8221; if you come from the printing world. First know that<strong> &#8220;resolution&#8221; is explained by how many pixels that can fit into one square inch</strong>. When it comes to contemporary monitors, that number is 72. No matter which monitor you are using the number is always 72.</p>
<p><a href="http://www.wraycodesign.com/wp-content/uploads/2010/03/Picture-25.jpg"><img class="alignright size-full wp-image-814" title="Picture 25" src="http://www.wraycodesign.com/wp-content/uploads/2010/03/Picture-25.jpg" alt="" width="260" height="240" /></a>If you were to print this image, which looks great on the monitor (72 pixels per inch), it will look like puke, pucky, shiat, whatever term you like&#8230;when printed out. <strong>That is because the printer speaks in &#8220;dots&#8221; now, and these dots look nice and crisp when you have 300 or more per inch.</strong> If you only have 72 dots per inch, the image won&#8217;t be tight and crisp. Might be acceptable in certain situations just to see what is on the page, but not for anything important.</p>
<p>If you really want to impress your friends, you will create your printed piece with images that are saved at 650 dpi (dots per inch), which is closer to museum quality. The conundrum comes in when you try to do a lot of fancy stuff in Photoshop with a large image saved at 650 dpi. You need quite a bit of RAM to be able to crank that out in any reasonable amount of time.</p>
<p>All right, now repeat after me: <strong>images for the web are 72 dpi, and images for print are at least 300 dpi.</strong> That&#8217;s it. Two numbers. Web, 72. Print, 300. Got it?</p>
<h2>File Formats</h2>
<p>We&#8217;ve already talked about jpeg images. What about the others? <strong>For the most part, jpegs will suffice in a myriad of situations.</strong> There are, however, times when someone may give you a different format.</p>
<p>Some of the more common file formats are .gif, .jpg, .png, .eps, ai, .pdf, .tif</p>
<p>Why do you need to know this? Well, let&#8217;s say you need an image for a project due at the end of the day. Your contact emails you the image, and you don&#8217;t get to it until 4 p.m., and then realize that the file won&#8217;t open in your image editing software because it&#8217;s the wrong kind of file. You call your contact back and he or she has already left for the day!</p>
<p>Here&#8217;s a quick rundown of the formats and what they are used for:</p>
<ul>
<li><strong>GIF</strong> (Graphic Interchange Format): can be a static or animated image, used on the web for basic graphic images when really small image sizes are needed. It doesn&#8217;t render gradients or photographic images well.</li>
<li><strong>JPG/JPEG </strong>(Joint Photography Experts Group): most commonly used photographic/raster image format used on the web and in low-end digital photography.</li>
<li><strong>PNG</strong> (Portable Network Graphics): newer image format that allows for transparency in an image on the web.</li>
<li><strong>EPS</strong> (Encapsulated Post Script): image format that contains information useful to printers when outputting high-end graphics.</li>
<li><strong>AI</strong> (Adobe Illustrator): A proprietary document format for vector illustrations and graphics.</li>
<li><strong>PDF</strong> (Portable Document Format): that enables viewing of multi-page documents on a variety of platforms.</li>
<li><strong>TIF/TIFF</strong> (Tagged Image File Format): High-end photographic image format that contains more information for fine-grained editing and printing.</li>
</ul>
<p>If you are dealing with <strong>image files for a logo</strong>, you will want to get it in an .eps or .ai or .pdf format, which will enable it to be scaled up or down easily without affecting resolution. If you are having it professionally printed, the printer will want your logo in one of these formats.</p>
<p>For situations where you need a <strong>high-resolution photographic image for print</strong> or editing, you should ask for a .tiff file. If you are working with smaller size images for the web, a .jpeg will do just fine.</p>
<p>If you need to <strong>email a multipage document </strong>or series of images, converting it to a PDF file will make it easy to email and also for people to view it. They will not need any particular software to view your content, except for the free Acrobat Reader, which most people have already. More and more printers like to receive materials in PDF format as well.</p>
<p>Unless you are a web designer or developer, you will likely not find yourself dealing much with creating .png files, but if you ever download or print out images from the web you may come across this format. It is used when transparency is needed, but if you print it out on its own you will likely get a plain white background.</p>
<h2>Vector Images</h2>
<p><a href="http://www.wraycodesign.com/wp-content/uploads/2010/03/vector.jpg"><img class="alignleft size-medium wp-image-811" title="vector" src="http://www.wraycodesign.com/wp-content/uploads/2010/03/vector-202x300.jpg" alt="" width="202" height="300" /></a>You&#8217;re heard the term &#8220;vector&#8221; but aren&#8217;t really sure what it means. The quick explanation is this: vector images differ from raster images in that you are not dealing with a field of pixels or dots, but a series of dots and lines. Think of farmland viewed from above. <strong>The field of sunflowers is like a raster image, and the fence surrounding them is like a vector image.</strong> The posts are the points and the metal wires in between are the lines connecting them and forming the image.</p>
<p>The advantage of vector images over raster images is that file sizes are much smaller, and you can scale them up or down at will without losing any crispness or detail in the image<strong>. This is because what happens between the dots and lines is defined by the distance between them, and the angle of the &#8220;handles&#8221; that you can angle or lengthen or shorten to set curves.</strong> When you are enlarging a raster image, for example, the computer has to &#8220;guess&#8221; how to fill in the pixels based on the colors already existing in in the image, and as of this writing, no one has yet figured out a way to take the guess work out of this process.</p>
<p>The disadvantage of vector images is that photographs are by nature raster images, and to achieve the look of a photograph in a vector format requires many hours of expert work to achieve and lots of practice and patience. If you want to see examples of this, do an online search for &#8220;gradient mesh&#8221;, which is the tool in Adobe Illustrator that can be used to achieve this effect.</p>
<p>Don&#8217;t worry if all this isn&#8217;t entirely clear. My goal is to give you a basic idea of what the various image formats do. Next, let&#8217;s look at a few image editors.</p>
<h2>Image Editors</h2>
<p>Okay, so now you know a little about what do to with your images, but what is the best way to edit them? In the not to distant past I might have given you a list of desktop image editing software, but there are now quite a few free of low cost image editors available online these days, so I&#8217;ll limit my list to those.</p>
<p>Most of them will require you to register if you want to save or store your images, but several allow you to demo their product anonymously to see which one you feel comfortable with. There are more than what I&#8217;ve listed here, but these seem to be the most prominent on the scene right now.</p>
<ul>
<li><a href="https://www.photoshop.com/express/landing.html" onclick="pageTracker._trackPageview('/outgoing/www.photoshop.com/express/landing.html?referer=');">Adobe Photoshop Express</a> This editing system seems pretty responsive, and the tools are organized into basic categories with more available when you choose what you&#8217;d like to do, whether it&#8217;s just cropping and resizing, or decorating or emailing.</li>
<li><a href="http://www.picnik.com/" onclick="pageTracker._trackPageview('/outgoing/www.picnik.com/?referer=');">Picnik</a> Picnik has a very simple set of tools, but it&#8217;s clear and easy to navigate. It even has an &#8220;auto-fix&#8221; feature for those who don&#8217;t want to bother with doing their own fixes. It has basic resizing, rotation, cropping, exposure control, red-eye reduction and sharpening tools. No registration required to use.</li>
<li><a href="http://www.pixlr.com/" onclick="pageTracker._trackPageview('/outgoing/www.pixlr.com/?referer=');">Pixlr</a> A more advanced editor that lets you upload images from your desktop or the web. It also let&#8217;s you create an image from scratch with paintbrush, pencil, paintbucket and type tools. Pixlr also has a Firefox plugin and a very basic &#8220;Express&#8221; version of their editor for those who want fewer options to choose from. I also found it to be very responsive with little wait time for image processing.</li>
<li><a href="http://www.drpic.com/" onclick="pageTracker._trackPageview('/outgoing/www.drpic.com/?referer=');">DrPic.com</a> Probably the simplest editor of the group. The page opens up to the editor and give you the option to load a picture and choose the format you want to save it in. Editing tools include resize, crop, rotate, contrast, autofix, text, blur, sharpen, frame, Polaroid, oilpaint and grayscale.</li>
<li><a href="http://www.sumopaint.com/web/" onclick="pageTracker._trackPageview('/outgoing/www.sumopaint.com/web/?referer=');">Sumo Paint</a> This is more of a tool for creating an illustration from scratch, but you can still use it with any type of existing image. It has many more &#8220;painting&#8221; features than the other editors, and quite a few effects to choose from, including 3D, reflection and lighting filters.</li>
<li><a href="http://aviary.com/tools/phoenix" onclick="pageTracker._trackPageview('/outgoing/aviary.com/tools/phoenix?referer=');">Aviary Phoenix</a> Very popular editor with live previewing and layers. Could be intimidating for the novice user, but more advanced users will appreciate the thought put into this image editor. Aviary Phoenix is part of a large set of online tools made by Aviary, including a color editor, audio editor, effects editor and a vector editor.</li>
<li><a href="http://webresizer.com/" onclick="pageTracker._trackPageview('/outgoing/webresizer.com/?referer=');">WebResizer.com</a> If all you want to do is resize an image, this tool is for you. Gives you a side by side comparison when looking to make your web images as lightweight as possible. Also allows for sharpening, rotating, exposure, contrast and saturation.</li>
</ul>
<p>My advice is to visit them all and see which one seems to be the easiest for you to work with. Have fun and don&#8217;t forget to bookmark the one you like best.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.wraycodesign.com/archives/783/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Buntich Logo Case Study</title>
		<link>http://www.wraycodesign.com/archives/744</link>
		<comments>http://www.wraycodesign.com/archives/744#comments</comments>
		<pubDate>Thu, 04 Mar 2010 23:58:45 +0000</pubDate>
		<dc:creator>MLAW</dc:creator>
				<category><![CDATA[Logo Design]]></category>
		<category><![CDATA[case study]]></category>
		<category><![CDATA[construction]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[logo]]></category>

		<guid isPermaLink="false">http://www.wraycodesign.com/?p=744</guid>
		<description><![CDATA[Sometimes it&#8217;s worthwhile getting a peek into the logo design process, and because of the number of variations I created when designing a logo …]]></description>
			<content:encoded><![CDATA[<p><strong>Sometimes it&#8217;s worthwhile getting a peek into the logo design process,</strong> and because of the number of variations I created when designing a logo for Mladen Buntich Construction, it seemed appropriate to use as a case study. I was initially briefed at their offices and had a tour of the grounds and equipment. I snapped pictures here and there as references for when I started the design process.</p>
<p>They had an outdated logo that was a very detailed drawing of a building crane and wanted something much simpler. They had lots of high quality photographs of men on the job, and the sheer size of the pipes they installed dwarfed the men inside them. If a pipe were to burst under the freeway, this is the company the city calls to fix it.</p>
<p>So I&#8217;m thinking: <strong>Big. Pipes. Underground. Drilling. Water. Construction.</strong></p>
<p>They tell me the only caveat is that orange should be in the color palette as they already had this color on much of their equipment. The logo should be readable really small and also really big. On the side of the freeway big. I rolled up my sleeves and started drawing.</p>
<p>Here is a selection of some of the designs I presented.<br />
<img src="http://madelikethis.com/images/MB-Logo1.jpg" alt="Logo Study" /></p>
<p>This first design really spells out that this company drills holes in the ground, and makes use of the type itself. The next design is more abstract, and could give the feeling of being either below the surface, in a trench, or in a dugout area.</p>
<p><img src="http://madelikethis.com/images/MB-Logo2.jpg" alt="Logo Study" /></p>
<p>This design drew heavily on a pattern that I saw on the front of one of the drills I photographed. Though abstract, it conveys a sense of strength and toughness.</p>
<p><img src="http://madelikethis.com/images/MB-Logo3.jpg" alt="Logo Study" /></p>
<p>This logo takes a bird&#8217;s eye view of a pipe, and the outer shape was taken directly from a pipe I saw in one of their photographs. The configuration with the logo in the center of the type gives it a more formal appearance.</p>
<p><img src="http://madelikethis.com/images/MB-Logo4.jpg" alt="Logo Study" /></p>
<p>This version takes a more illustrative approach, giving a three-quarter view of a pipe. I&#8217;ve also utilized gradients, which is a less traditional, but very contemporary approach.</p>
<p><img src="http://madelikethis.com/images/MB-Logo5.jpg" alt="Logo Study" /></p>
<p>This next logo is my personal favorite, as it is involves simple shapes, but gives a sense of perspective and also of equipment/construction. The client liked it, but wanted something simpler still.</p>
<p><img src="http://madelikethis.com/images/MB-Logo6.jpg" alt="Logo Study" /></p>
<p>I took it one step further toward simplicity, and gave the orange more priority.</p>
<p><img src="http://madelikethis.com/images/MB-Logo7.jpg" alt="Logo Study" /></p>
<p>In the end, the client opted for the utmost in simplicity, a drilling down of sorts in their quest for visual representation of their field, and asked for a plain circle. They liked their previous typeface, Bauhaus, but wanted an update, so I chose Utopy, which is very similar to Bauhaus, but has breaks in the letterforms. The lowercase &#8220;b&#8221; feels somewhat pipelike, and they were very happy with the finished mark.</p>
<p><img src="http://madelikethis.com/images/MB-Logo9.jpg" alt="Logo Study" /></p>
]]></content:encoded>
			<wfw:commentRss>http://www.wraycodesign.com/archives/744/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Punch Rewards</title>
		<link>http://www.wraycodesign.com/archives/738</link>
		<comments>http://www.wraycodesign.com/archives/738#comments</comments>
		<pubDate>Thu, 04 Mar 2010 20:31:38 +0000</pubDate>
		<dc:creator>MLAW</dc:creator>
				<category><![CDATA[Logo Design]]></category>
		<category><![CDATA[iphone]]></category>

		<guid isPermaLink="false">http://www.wraycodesign.com/?p=738</guid>
		<description><![CDATA[This is a logo I designed for an iPhone application that would enable the user to reap the same rewards as are offered for …]]></description>
			<content:encoded><![CDATA[<p><img src="http://madelikethis.com/images/Punch-iPhone.jpg" alt="Punch Rewards Logo" /></p>
<p>This is a logo I designed for an iPhone application that would enable the user to reap the same rewards as are offered for paper versions of loyalty cards. The client wanted it to read equally well on its own, and as a small iPhone app icon. We went through several color studies before settling on yellow and blue. This project involved creating a full-color version with a gradient, a flat 4-color version, and a b/w version with and without a gradient. I also provided a PDF styleguide.</p>
<p><img src="http://madelikethis.com/images/Punch-Logo.jpg" alt="Punch Rewards Logo" /></p>
<p><img src="http://www.wraycodesign.com/wp-content/uploads/2010/08/punch-samples.jpg" alt="Punch Rewards Logo" width="621" height="92" /></p>
]]></content:encoded>
			<wfw:commentRss>http://www.wraycodesign.com/archives/738/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>The Scoring Factory</title>
		<link>http://www.wraycodesign.com/archives/637</link>
		<comments>http://www.wraycodesign.com/archives/637#comments</comments>
		<pubDate>Sun, 21 Feb 2010 00:24:57 +0000</pubDate>
		<dc:creator>MLAW</dc:creator>
				<category><![CDATA[Featured Articles]]></category>
		<category><![CDATA[Illustration & More]]></category>
		<category><![CDATA[Logo Design]]></category>
		<category><![CDATA[Print Graphics]]></category>
		<category><![CDATA[colorful]]></category>
		<category><![CDATA[logo]]></category>
		<category><![CDATA[poster]]></category>
		<category><![CDATA[sports]]></category>

		<guid isPermaLink="false">http://www.madelikethis.com/?p=637</guid>
		<description><![CDATA[The Scoring Factory is a rather aptly named basketball skills clinic based in Pittsburgh, which is known for having a lot of defunct old …]]></description>
			<content:encoded><![CDATA[<p><img class="alignright size-full wp-image-942" title="SF-Ball-sm" src="http://www.wraycodesign.com/wp-content/uploads/2009/08/SF-Ball-sm.jpg" alt="" width="200" height="205" /><strong>The Scoring Factory is a rather aptly named basketball skills clinic </strong>based in Pittsburgh, which is known for having a lot of defunct old factories from the Steel Mill days accenting the landscape. I wanted to capture both the image of a factory and of a basketball, and ended up creating a sunrise positioning between two buildings.</p>
<p>The logo has been put on posters, t-shirts, basketballs, etc. and has been printed in 2-color and one-color. The folks at the Scoring Factory decided they wanted a more streamlined version with more emphasis on the word &#8220;Scoring,&#8221; so I created the variation below, which has been well-received.</p>
<p><a href="http://www.wraycodesign.com/wp-content/uploads/2009/08/SF-logo-jan11.jpg"><img class="aligncenter size-full wp-image-1051" title="SF-logo-jan11" src="http://www.wraycodesign.com/wp-content/uploads/2009/08/SF-logo-jan11.jpg" alt="The Scoring Factory Logo" width="630" height="205" /></a></p>
<p>Here is a version on black. Notice I added a subtle radial background in dark gray so that the black shadow sides of the buildings didn&#8217;t get lost.</p>
<p style="text-align: center;"><a href="http://www.wraycodesign.com/wp-content/uploads/2010/02/Logo-on-black.jpg"><img class="size-full wp-image-1104 aligncenter" title="Logo-on-black" src="http://www.wraycodesign.com/wp-content/uploads/2010/02/Logo-on-black.jpg" alt="Scoring Factory Logo on black" width="620" height="248" /></a></p>
<p>Here is the revised logo applied on a black T-shirt.</p>
<p><a href="http://www.wraycodesign.com/wp-content/uploads/2010/02/2011-blacktee.jpg"><img class="alignleft size-full wp-image-1105" title="2011-blacktee" src="http://www.wraycodesign.com/wp-content/uploads/2010/02/2011-blacktee.jpg" alt="Scoring Factory Logo on black T-shirt" width="620" height="556" /></a>When it came time to create a promotional poster, I was given this image of a basketball player taken with a point-and-shoot camera. The background was shadowed and busy, so that made cutting out the image rather tedius.</p>
<p><img class="alignleft size-thumbnail wp-image-906" title="Screen shot 2010-08-06 at 5.00.32 PM" src="http://www.wraycodesign.com/wp-content/uploads/2009/08/Screen-shot-2010-08-06-at-5.00.32-PM-150x150.jpg" alt="" width="150" height="150" />Luckily, there are two tools available to designers that allow them to get around such obstacles: creativity+Photoshop. When I have a low resolution or grainy image to start with, there are a few ways to go.</p>
<p>I chose to reduce the image to black and white, and then colorize it. From there, I wanted to give it a feeling of crazy motion. I added some diagonals for dimension, and brightened the color for impact.</p>
<p><a href="http://www.wraycodesign.com/wp-content/uploads/2009/08/SFposter1.jpg"><img class="aligncenter size-full wp-image-912" title="SFposter" src="http://www.wraycodesign.com/wp-content/uploads/2009/08/SFposter1.jpg" alt="" width="620" height="399" /></a></p>
<p>As it happens, they wanted something more conservative, and opted for a version with a plain gray background. I still prefer where this one was going&#8230;. <img src='http://www.wraycodesign.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://www.wraycodesign.com/archives/637/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

