<?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>theFourthStar.com :: Professional Design &#38; Web Portfolio of Cara McKinley</title>
	<atom:link href="http://www.thefourthstar.com/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.thefourthstar.com</link>
	<description></description>
	<lastBuildDate>Mon, 19 Dec 2011 03:13:10 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	
		<item>
		<title>Life is Art, for Studio Mathewes</title>
		<link>http://www.thefourthstar.com/2011/12/life-is-art-for-studio-mathewes/</link>
		<comments>http://www.thefourthstar.com/2011/12/life-is-art-for-studio-mathewes/#comments</comments>
		<pubDate>Mon, 19 Dec 2011 03:12:32 +0000</pubDate>
		<dc:creator>Cara McKinley</dc:creator>
				<category><![CDATA[Front End Development]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Web]]></category>

		<guid isPermaLink="false">http://www.thefourthstar.com/?p=468</guid>
		<description><![CDATA[And work is art. No client is more fun for a designer/developer than one whose work nearly speaks for itself in creativity and talent. Studio Mathewes has been a wonderful client for me over the last few years, and in 2011 requested an updated site design from a site I originally built and designed a [...]]]></description>
			<content:encoded><![CDATA[<p>And work is art. No client is more fun for a designer/developer than one whose work nearly speaks for itself in creativity and talent. Studio Mathewes has been a wonderful client for me over the last few years, and in 2011 requested an updated site design from a site I originally built and designed a few years ago. I recommended moving the blog from the Movable Type platform to a full WordPress-as-CMS build, which would make it much easier to manage content, and in my experience has also been very amiable to maintenance and future updates. The gallery, which is built in flash for fullscreen performance, switches gracefully to an html/javascript experience on mobile devices. Clean typography, a fullscreen gallery, subtle interactive flourishes and improved content strategy let the work of this talented photography studio become the focal point.</p>
<p>See the work and read more on the blog at <a href="http://www.studiomathewes.com" target="_blank">studiomathewes.com</a>!</p>
<div id="attachment_471" class="wp-caption aligncenter" style="width: 445px"><a href="http://www.thefourthstar.com/wp-content/uploads/2011/12/SM-gallery-12.18.11.jpg"><img class="size-large wp-image-471" title="SM-gallery-12.18.11" src="http://www.thefourthstar.com/wp-content/uploads/2011/12/SM-gallery-12.18.11-435x390.jpg" alt="" width="435" height="390" /></a><p class="wp-caption-text">Gallery</p></div>
<p style="text-align: center;">
<div id="attachment_472" class="wp-caption aligncenter" style="width: 445px"><a href="http://www.thefourthstar.com/wp-content/uploads/2011/12/SM-blog-home-12.18.11.jpg"><img class="size-large wp-image-472" title="SM-blog-home-12.18.11" src="http://www.thefourthstar.com/wp-content/uploads/2011/12/SM-blog-home-12.18.11-435x379.jpg" alt="" width="435" height="379" /></a><p class="wp-caption-text">Blog Home</p></div>
<div id="attachment_473" class="wp-caption aligncenter" style="width: 445px"><a href="http://www.thefourthstar.com/wp-content/uploads/2011/12/SM-blog-category-12.18.11.jpg"><img class="size-large wp-image-473" title="SM-blog-category-12.18.11" src="http://www.thefourthstar.com/wp-content/uploads/2011/12/SM-blog-category-12.18.11-435x391.jpg" alt="" width="435" height="391" /></a><p class="wp-caption-text">Blog Archive</p></div>
<div id="attachment_474" class="wp-caption aligncenter" style="width: 445px"><a href="http://www.thefourthstar.com/wp-content/uploads/2011/12/SM-blog-post-12.18.11.jpg"><img class="size-large wp-image-474" title="SM-blog-post-12.18.11" src="http://www.thefourthstar.com/wp-content/uploads/2011/12/SM-blog-post-12.18.11-435x380.jpg" alt="" width="435" height="380" /></a><p class="wp-caption-text">Blog Post</p></div>
<div id="attachment_475" class="wp-caption aligncenter" style="width: 445px"><a href="http://www.thefourthstar.com/wp-content/uploads/2011/12/SM-about-12.18.11.jpg"><img class="size-large wp-image-475" title="SM-about-12.18.11" src="http://www.thefourthstar.com/wp-content/uploads/2011/12/SM-about-12.18.11-435x390.jpg" alt="" width="435" height="390" /></a><p class="wp-caption-text">About page</p></div>
]]></content:encoded>
			<wfw:commentRss>http://www.thefourthstar.com/2011/12/life-is-art-for-studio-mathewes/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Badass Duvet Cover (and I&#8217;m done with sewing for a while)</title>
		<link>http://www.thefourthstar.com/2011/02/badass-duvet-cover-and-im-done-with-sewing-for-a-while/</link>
		<comments>http://www.thefourthstar.com/2011/02/badass-duvet-cover-and-im-done-with-sewing-for-a-while/#comments</comments>
		<pubDate>Mon, 21 Feb 2011 06:43:37 +0000</pubDate>
		<dc:creator>Cara McKinley</dc:creator>
				<category><![CDATA[Needle & Thread]]></category>
		<category><![CDATA[home decor]]></category>
		<category><![CDATA[Useful things]]></category>

		<guid isPermaLink="false">http://www.thefourthstar.com/?p=448</guid>
		<description><![CDATA[A couple years ago I got super ambitious about d.i.y interior decorating, during a period of frustration with the limited personality of mass market stuff available at everyone&#8217;s favorite chain stores (also, I got a subscription to Ready Made, which I&#8217;m sure had something to do with it). As a part of this, I tried [...]]]></description>
			<content:encoded><![CDATA[<p>A couple years ago I got super ambitious about d.i.y interior  decorating, during a period of frustration  with the limited personality  of mass market stuff available at  everyone&#8217;s favorite chain stores  (also, I got a subscription to Ready  Made, which I&#8217;m sure had something  to do with it). As a part of this, I  tried my hand at quilting (why  not?). The first quilt I made was a fairly simple  patchwork quilt,  which turned out nice&#8230; however, I also found out that  even if you try  to make your own things, you&#8217;re still limited by the  also limited  personality of the textiles and fabrics found in everyone&#8217;s  favorite  chain fabric stores. So, it struck me that maybe going back to basics  and creating something unique not just with fabric and color, but with  composition, was the way to go.</p>
<div id="attachment_451" class="wp-caption aligncenter" style="width: 445px"><a href="http://www.thefourthstar.com/wp-content/uploads/2011/02/duvet-finished.jpg"><img class="size-large wp-image-451" title="duvet-finished" src="http://www.thefourthstar.com/wp-content/uploads/2011/02/duvet-finished-435x326.jpg" alt="" width="435" height="326" /></a><p class="wp-caption-text">Finished!</p></div>
<p>Then, one day I stumbled upon this awesome art/type poster collection site called<a href="http://www.typographicposters.com"> typographicposters.com</a>, and saw a piece of work by the artist/designer <a href="http://www.typographicposters.com/#/benoit-bodhuin/">Benoit Bodhuin</a> (snarky note: I can&#8217;t link directly because it&#8217;s a flash site! *boo*), and the idea for this duvet cover was born. I did some fabric research, found some fairly thrifty <a href="https://www.fabric.com/ProductDetail.aspx?ProductID=aa558384-376b-414a-ae79-d26573602947">cotton broadcloth fabric</a> in solid colors from fabric.com, and got started in translating the graphic style of the posters to fabric form.</p>
<p>Since all the shapes are right-triangles, it&#8217;s fairly easy to recreate as a sewing/quilting pattern. I created a new Adobe Illustrator file, then made a grid of 3 inch squares, each square divided diagonally across both axes. From there, I filled in each part of the grid accordingly (see printed out version below)</p>
<div id="attachment_455" class="wp-caption aligncenter" style="width: 445px"><a href="http://www.thefourthstar.com/wp-content/uploads/2011/02/duvet-plan.jpg"><img class="size-large wp-image-455" title="duvet-plan" src="http://www.thefourthstar.com/wp-content/uploads/2011/02/duvet-plan-435x563.jpg" alt="" width="435" height="563" /></a><p class="wp-caption-text">plan mocked up in Illustrator, then printed out with each sewing block outlined &amp; numbered</p></div>
<p>Next, I had to figure out how much fabric I needed for each color. This is probably the trickiest part, since you have to not only figure out how much yardage you need according to the design, but also factor in seam allowances and how to cut your squares to maximize use of each yard. Rather than try to do some fancy geometry maths, I just guestimated how many yards I&#8217;d need, and ended up running out of gray fabric toward the end (when I reordered, the gray was a slightly different hue than previously, so try to avoid this if at all possible). The finished size of the duvet cover needed to be 88&#8243;x88&#8243;, to fit the queen-sized comforter I already had. Since cutting and sewing so many little squares together inevitably leads to variations in my finished size by up to an inch, I planned to leave room around the edge for a white border that I could size accordingly once I had the bulk of the work done, to arrive at 88 inches exactly.</p>
<p>Everything after this point is just hours and hours and hours of cutting, measuring, and sewing. I <em>really</em> hate the cutting part, because not only is it super tedious, but it&#8217;s also the part where I&#8217;m most prone to slippage of the hand, uncorrectable errors, and wasted fabric. Having the right tools is extremely important, especially a rotary fabric cutter, and quilting ruler. Since I hate cutting so much, I decided it would be best to get it all done at the outset, kind of like eating brussel sprouts on your plate first so that you can enjoy the mashed potatoes at the end. I took a look at my design plan, then tallied up the amount of each size and color of fabric piece that I would need.</p>
<div id="attachment_456" class="wp-caption aligncenter" style="width: 445px"><a href="http://www.thefourthstar.com/wp-content/uploads/2011/02/duvet-fabric-tally.jpg"><img class="size-large wp-image-456" title="duvet-fabric-tally" src="http://www.thefourthstar.com/wp-content/uploads/2011/02/duvet-fabric-tally-435x660.jpg" alt="" width="435" height="660" /></a><p class="wp-caption-text">Fabric cut pieces tally</p></div>
<p>Finally after all the fabric was cut, I started piecing together smaller blocks according to their block number in the plan, then pieced those blocks into bigger blocks, and so on until I had the finished front of the duvet cover. I measured and added a white border to the outside, then quilted the whole front (without batting (padding)) to another piece of fabric, to hide the seams. Finally, I sewed the back of the duvet cover on, with buttons on the end to slip the comforter in.</p>
<div id="attachment_457" class="wp-caption aligncenter" style="width: 445px"><a href="http://www.thefourthstar.com/wp-content/uploads/2011/02/duvet-section-org.jpg"><img class="size-large wp-image-457" title="duvet-section-org" src="http://www.thefourthstar.com/wp-content/uploads/2011/02/duvet-section-org-435x563.jpg" alt="" width="435" height="563" /></a><p class="wp-caption-text">Fabric needed for each block, as a guide and checklist</p></div>
<p>I couldn&#8217;t be happier with the final piece, and am totally excited about new variations on solid color patterns that I can make in the future &#8211; but it might be a while. After over 80 hours of planning, cutting, and sewing, I&#8217;m not about to jump right in again! All things put in perspective, those serious quilting hobbyists are crazier and more dedicated than any WOW player, in my book.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.thefourthstar.com/2011/02/badass-duvet-cover-and-im-done-with-sewing-for-a-while/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Seasonal/Promotional Posters</title>
		<link>http://www.thefourthstar.com/2011/02/seasonalpromotional-posters/</link>
		<comments>http://www.thefourthstar.com/2011/02/seasonalpromotional-posters/#comments</comments>
		<pubDate>Mon, 21 Feb 2011 04:24:08 +0000</pubDate>
		<dc:creator>Cara McKinley</dc:creator>
				<category><![CDATA[Illustration]]></category>
		<category><![CDATA[Print Design]]></category>

		<guid isPermaLink="false">http://www.thefourthstar.com/?p=442</guid>
		<description><![CDATA[The Composing Room approached Big Wheel with a request for a promotional mail piece to send to their priority clients &#8211; something that would grab their attention, but also be a collectible that wouldn&#8217;t automatically be tossed into the recycling bin. We decided on a poster series, 1 poster to represent each of the four [...]]]></description>
			<content:encoded><![CDATA[<p>The Composing Room approached Big Wheel with a request for a promotional mail piece to send to their priority clients &#8211; something that would grab their attention, but also be a collectible that wouldn&#8217;t automatically be tossed into the recycling bin. We decided on a poster series, 1 poster to represent each of the four seasons in St. Louis and the variety of attractions and festivals available year-round. The local subject matter is not only a way to stress the fact that The Composing Room has been a local and family-owned business for over 20 years, but also is a way for the receiver to learn about all of the interesting things happening in their favorite city. The four separate posters can be combined to form one large illustration.</p>
<p><a href="http://www.thefourthstar.com/wp-content/uploads/2011/02/CR-seasonal-posters-large.jpg" target="_blank">Download the large version (2000 px square)</a></p>
<div id="attachment_443" class="wp-caption aligncenter" style="width: 445px"><a href="http://www.thefourthstar.com/wp-content/uploads/2011/02/CR-seasonal-posters.jpg"><img class="size-large wp-image-443" title="CR-seasonal-posters" src="http://www.thefourthstar.com/wp-content/uploads/2011/02/CR-seasonal-posters-435x434.jpg" alt="" width="435" height="434" /></a><p class="wp-caption-text">Combined seasonal posters</p></div>
<p style="text-align: center;">
]]></content:encoded>
			<wfw:commentRss>http://www.thefourthstar.com/2011/02/seasonalpromotional-posters/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>JS1k Xmas Demo Snowflake</title>
		<link>http://www.thefourthstar.com/2011/01/js1k-xmas-demo-snowflake/</link>
		<comments>http://www.thefourthstar.com/2011/01/js1k-xmas-demo-snowflake/#comments</comments>
		<pubDate>Sun, 02 Jan 2011 23:17:15 +0000</pubDate>
		<dc:creator>Cara McKinley</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Web]]></category>

		<guid isPermaLink="false">http://www.thefourthstar.com/?p=384</guid>
		<description><![CDATA[Disclaimer: this post may be something that only a serious internets/javascript/web dev nerd can appreciate. Starting in the early days of software development, the &#8216;demo&#8217; has been a way for a developer to show of his/her skills within a limited file size. In the summer of 2010, a javascript 1kb demo challenge was held to [...]]]></description>
			<content:encoded><![CDATA[<p>Disclaimer: this post may be something that only a serious internets/javascript/web dev nerd can appreciate. Starting in the early days of software development, the &#8216;demo&#8217; has been a way for a developer to show of his/her skills within a limited file size. In the summer of 2010, a javascript 1kb demo challenge was held to showcase the mad skills of participating developers, with a focus on using HTML 5&#8242;s canvas. If you&#8217;re slightly unfamiliar with technology, 1kb of file size is <em>really</em> small, like 1,024 characters small. In a word document, that would be the equivalent of a couple paragraphs.</p>
<p>Some of the demos created by participating developers are crazy impressive for being such small sizes. There are a lot of hacks and tricks that you can use to reduce the volume of code, including but not limited to compression with tools like Google Closure Compiler, creating one-character aliases for frequently used properties, defining multiple variables in one statement, and doing really naughty things like leaving semi-colons off of the last statement in every block. Each little bit(or byte) that you can shave off adds up to a lot in the end. For a really great walk-through of the first js1k challenge&#8217;s winning demo, see <a href="http://marijnhaverbeke.nl/js1k/" target="_blank">Marijn Haverbeke&#8217;s work</a>.</p>
<p>The first JS1k challenge was a big hit with the development community, so a <a href="http://js1k.com/2010-xmas/" target="_blank">second competition</a> was held during the holiday season, with a Christmas theme. I entered a little <a href="http://js1k.com/2010-xmas/demo/877" target="_blank">snowflake-maker demo</a> &#8211; simple, but weirdly addicting. Click around on the white &#8216;paper&#8217; wedge to draw shapes. Click on your starting point (noted with the little gray dot) to close a shape. Make as many cutout shapes as you want, and then click the button to make your flake! My original source code is below the screenshot (once compressed, the code is &lt;1k).</p>
<div id="attachment_385" class="wp-caption aligncenter" style="width: 445px"><a href="http://js1k.com/2010-xmas/demo/877"><img class="size-large wp-image-385" title="Picture 1" src="http://www.thefourthstar.com/wp-content/uploads/2011/01/Picture-1-435x436.png" alt="" width="435" height="436" /></a><p class="wp-caption-text">My snowflake creation.</p></div>
<p><strong>Source Code:</strong> (Click to expand)
<pre name="code" class="javascript:collapse">
<!doctype html>
<html>
	<head>

		<meta charset="utf-8" />
	</head>
	<body>
		<canvas></canvas>
		<script>
			var c = document.getElementsByTagName('canvas')[0];
			var b = document.body;
			var a = c.getContext('2d');
			c.width=w=c.height=h=600;
			q='#000';
			c.style.cssText='background:'+q+';cursor:pointer';
			M=Math;
			P=M.PI/180;
			z=1;

			//assign shortcodes to context properties
			// inspired by Marijn Haverbeke's usage
			for(x in a){
				a[x[0]+(x[6]||x[2])]=a[x]
			}
			/*
			commonly used shortcodes for this demo:
			fc = fillRect
			ce = clearRect
			ac = arc
			rc= rect
			sv= save
			re= restore
			sa= scale
			rt= rotate
			ta= translate
			ba = beginPath
			mv= moveTo
			ln= lineTo
			fl= fill
			sr= stroke
			cL= createLinearGradient
			cR= createRadialGradient
			ci= clip
			*/

			a.sv();

			// starting triangle
			a.ta(225,550);
			function t(){
				a.fillStyle='#fff';
				a.ba();
				a.ln(250*z,-433);
				a.ln(0,-500);
				a.ln(0,0);
				a.fl()
			}
			t();

			// cut shapes out on user click
			x=y=i=k=0;
			A=[];
			B=[];
			a.strokeStyle='#666';
			a.fillStyle=q;

			c.onclick=function(e){
				with(a){
					x=e.clientX-225;
					y=e.clientY-550;
					ba();
					m=A[0];
					n=A[1];
					if(x>m-7&#038;x<m+7&#038;y>n-7&#038;y<n+7){ // if click is on originating point, complete shape and fill polygon, store coordinates in array
						mv(m,n);
						for(j=0;j<A.length;j+=2){
							ln(A[j],A[j+1])						
						}
						fl();
						B[k]=A;
						k++;
						A=[]
					}

					else if(A==0){ // if click is first in polygon (array is empty), start new
						sr(ac(A[0]=x,A[1]=y,1,0,M.PI*2,0));
						i=2
					}

					else{ // add lines to current shape with each click
						sr(ln(A[i-2],A[i-1]),ln(A[i]=x,A[i+1]=y));
						i+=2
					}
				}
			}

			//buttons
				g='<button onclick="';
				p='</button>';
				document.write(''+g+'F()">Make a Flake!'+p+' '+g+'window.location.reload()">Clear'+p);

			// redraw user's created shape on smaller scale from stored array, reflect/rotate/repeat into full-on snowflake
			function F(){
				a.re();
				a.ce(0,0,h,w);
				a.ta(w/2,h/2);
				a.sa(.5,.5);

				setInterval(function(){ // slowly rotate completed snowflake, for a finishing touch
					with(a){
						ce(-h,-w,h*2,w*2);
						rt(.15*P);
						sv();

						for(m=0;m<2;m++){
							z=(m==1)?-1:1; // reflect shape on second runthrough by multiplying x-coordinates by -1
							for(n=0;n<6;n++){
								rt(60*P); // rotate
								t(); //draw triangle
								sv();
								for(j in B){
									fillStyle=q;
									ba();
									for(l=0;l<B[j].length;l+=2){ // redraw user's shapes
										ln(B[j][l]*z,B[j][l+1])						
									}
									fl()
								}
								re()
							}
						}

						re()
					}
				},30)

			}
		</script>
	</body>
</html>
</pre>
]]></content:encoded>
			<wfw:commentRss>http://www.thefourthstar.com/2011/01/js1k-xmas-demo-snowflake/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Custom Type Illustrations for Studio Mathewes</title>
		<link>http://www.thefourthstar.com/2010/06/custom-type-illustrations-for-greeting-cards/</link>
		<comments>http://www.thefourthstar.com/2010/06/custom-type-illustrations-for-greeting-cards/#comments</comments>
		<pubDate>Mon, 28 Jun 2010 02:54:47 +0000</pubDate>
		<dc:creator>Cara McKinley</dc:creator>
				<category><![CDATA[Illustration]]></category>
		<category><![CDATA[Print Design]]></category>

		<guid isPermaLink="false">http://www.thefourthstar.com/?p=302</guid>
		<description><![CDATA[Studio Mathewes not only captures beautiful images for their clients, they also do a great job of following up with clients after the work is done. In keeping with the flourishing-type motif established by the Studio Mathewes logo, I created these two hand-drawn type illustrations for use on greeting cards or in email correspondence.&#8217;Ever After&#8217; [...]]]></description>
			<content:encoded><![CDATA[<p>Studio Mathewes not only captures beautiful images for their clients, they also do a great job of following up with clients after the work is done.</p>
<p>In keeping with the flourishing-type motif established by the Studio Mathewes logo, I created these two hand-drawn type illustrations for use on greeting cards or in email correspondence.&#8217;Ever After&#8217; belongs to a note celebrating the anniversary of a wedding, and &#8216;Many Thanks&#8217;&#8230;is fairly self-explanitory.</p>
<p style="text-align: center;">
<div id="attachment_379" class="wp-caption aligncenter" style="width: 445px"><a href="http://www.thefourthstar.com/wp-content/uploads/2010/06/ever-after.jpg"><img class="size-large wp-image-379  " title="ever-after" src="http://www.thefourthstar.com/wp-content/uploads/2010/06/ever-after-435x326.jpg" alt="" width="435" height="326" /></a><p class="wp-caption-text">&#39;Ever After&#39; anniversary greeting</p></div>
<div id="attachment_381" class="wp-caption aligncenter" style="width: 445px"><a href="http://www.thefourthstar.com/wp-content/uploads/2010/06/many-thanks.jpg"><img class="size-large wp-image-381" title="many-thanks" src="http://www.thefourthstar.com/wp-content/uploads/2010/06/many-thanks-435x344.jpg" alt="" width="435" height="344" /></a><p class="wp-caption-text">&#39;Many Thanks&#39; thank-you card</p></div>
<div id="attachment_382" class="wp-caption aligncenter" style="width: 445px"><a href="http://www.thefourthstar.com/wp-content/uploads/2010/06/many-thanks-closeup.jpg"><img class="size-large wp-image-382" title="many-thanks-closeup" src="http://www.thefourthstar.com/wp-content/uploads/2010/06/many-thanks-closeup-435x326.jpg" alt="" width="435" height="326" /></a><p class="wp-caption-text">Closeup of the beautiful letterpress work</p></div>
]]></content:encoded>
			<wfw:commentRss>http://www.thefourthstar.com/2010/06/custom-type-illustrations-for-greeting-cards/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

