<?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>Media/MIX</title>
	<atom:link href="http://www.media-mix.co.uk/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.media-mix.co.uk</link>
	<description>Screen media design and development, Unravelled.</description>
	<lastBuildDate>Mon, 18 Apr 2011 12:07:30 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Web 2.0 shine and Apple style reflection</title>
		<link>http://www.media-mix.co.uk/2011/04/web-2-0-shine-and-apple-style-reflection/</link>
		<comments>http://www.media-mix.co.uk/2011/04/web-2-0-shine-and-apple-style-reflection/#comments</comments>
		<pubDate>Mon, 18 Apr 2011 12:06:40 +0000</pubDate>
		<dc:creator>Jay</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[2.0]]></category>
		<category><![CDATA[apple]]></category>
		<category><![CDATA[Beavan]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[gradient]]></category>
		<category><![CDATA[Jay]]></category>
		<category><![CDATA[layers]]></category>
		<category><![CDATA[move]]></category>
		<category><![CDATA[photoshop]]></category>
		<category><![CDATA[reflection]]></category>
		<category><![CDATA[shine]]></category>
		<category><![CDATA[tool]]></category>
		<category><![CDATA[transform]]></category>
		<category><![CDATA[web]]></category>

		<guid isPermaLink="false">http://www.media-mix.co.uk/?p=11</guid>
		<description><![CDATA[Yes I know, they’re everywhere, but because they’re everywhere I feel that they are something that every designer should know how to do. After all, there will probably come a time when a client will say, “Hey, how can we make that text on our logo look more…  …webby and shiny?!” lol or “Make it &#8230; </p><p><a class="more-link block-button" href="http://www.media-mix.co.uk/2011/04/web-2-0-shine-and-apple-style-reflection/">Continue reading &#187;</a>]]></description>
			<content:encoded><![CDATA[<div id="attachment_28" class="wp-caption alignright" style="width: 310px"><a href="http://www.media-mix.co.uk/wp-content/uploads/2011/04/shine-thumbnail.jpg"><img class="size-full wp-image-28" title="shine-thumbnail" src="http://www.media-mix.co.uk/wp-content/uploads/2011/04/shine-thumbnail.jpg" alt="Shiny stuff with reflections" width="300" height="217" /></a><p class="wp-caption-text">Shiny stuff with reflections</p></div>
<p>Yes I know, they’re everywhere, but because they’re everywhere I feel  that they are something that every designer should know how to do.</p>
<p>After  all, there will probably come a time when a client will say, “Hey, how  can we make that text on our logo look more…  …webby and shiny?!” lol or  “Make it cleaner… …more Apple!” (this is probably Johnathan Ives’ fault  but it is still fantastic, highly mimicked  design).<span id="more-11"></span></p>
<p>Well, with trusty Photoshop at hand, your well equipped to give your client what he wants! Let’s shine up some stuff!!</p>
<p>Start  off with the element that you want to add the shine to. Copy the layer  and add a WHITE color overlay with the layer styles. (You may need to  rasterize the layer for text).</p>
<p>Next,  select the elliptical marquee tool (or any shaped selection will do,  but I find the elliptical the most effective) and, from quite a way out  to the side of the element (I’d suggest zooming out quite a bit to get a  nice arc across the element), select the bottom half of the white  overlay layer and delete this section.</p>
<p>Then  apply a ‘layer mask’ to the same layer (the white overlay layer) and  select the gradient tool. From the gradient tools settings panel, choose  the ‘foreground to transparent’ gradient and select the foreground  colors as black.</p>
<p>Now  select the layer mask and on the canvas, move your mouse pointer above  the element, hold down the shift and drag down and release about three  quarters of the way from the top of the element to the end of the solid  white edge of the layer.</p>
<p>You  should hopefully start to see the composition take shape. Still working  on the white overlay layer, drop the the opacity to around 65% (play  with this figures till it looks right to you).</p>
<p>We are half way to the end now. Nearly there!</p>
<p>Next  we’re going to add a bottom shine, so that it looks like some light has  bounced off the extremely clean and shiny surface below and reflected  back onto the element.</p>
<p>For  this, add a new blank layer above the original element and add a white  gradient starting from the bottom (about 2cm away from the bottom of the  element) and drag up into the element (not too far into the element as  this is just a hint at the light being reflected). Next drop the opacity  to around 46% (again, you can change this figure for the best affect on  your design, and feel free to minus some fill also).</p>
<p>Now,  go to the original element layer and with the control key held down (or  apple command key on mac) select the small thumbnail on the layer on  the layers panel. This will select all of the actual content on the  layer, go to ‘selection’/&#8217;select’ from the top menu, got to modify &gt;  contract, enter 1 pixel and click ok. Next got to selection/select again  and click ‘inverse’, once this is done, select the new gradient layer  from the layers panel, focus on the canvas (don’t lose the selection)  and press delete/backspace to remove the dead space from the new  gradient layer. Then with the same selection, choose the first layer we  made (the top shine gradient) and press delete/backspace. This should  give you a very fine border of the original elements colors.</p>
<p>Now,  for the finale, the famous apple reflection!!! Select all 3 of your  layers (select the top layer from the layers panel, then hold shift and  select the bottom layer on the panel) and drag them to the ‘Create a new  layer’ button at the bottom of the panel. Once they are created, right  click on one of the layers (they should still be highlights, if not,  select the three newly created layers with the same method as previous)  and select ‘Merge Layers’.</p>
<p>This  merged layer will become your reflection. With this new layer selected  from the layers panel and with your focus on the canvas, hold down  control (or  again. the apple command key on mac) and press ‘T’, this  will activate the transform tool. Now locate the top center transform  point and drag it down below the bottom of the original element and make  the height about 2 thirds that of the original. when your happy, press  the enter/return key to commit the changes.</p>
<p>Now  select the ‘Move Tool’, hold down shift, and move the transformed layer  away from the original element slightly. Then, on the layers panel, add  a layer mask to this layer. Select the gradient tool and with the same  settings as earlier (foreground to transparent, foreground color black),  hold down shift, and click and drag the gradient upwards from the  bottom of the reflection layer to around 1cm away from the top of the  reflections layer (as usual, feel free to experiment with the distances  of the gradient and even the angles etc).</p>
<p>Now  that you have the reflections layer fading away into the shiny ground  below, you might feel that the reflection is too prominent, if so,  select the relfections layer and play with the opacity and fill levels, I  like to set mine to about 64% opacity and 93% fill.</p>
<p>And  there you have it! a web 2.0 shine with an added apple style  reflection. Now go, wow your clients, friends and family members with  this new found trickery. For added ‘WOW!’ try using the perspective  transform tool with the element, shine layers and reflection layer  selected (you will need to rasterize any text).  Ooohhh, shiny,  reflected and angled! it’s like nearly three dimensional.</p>
<p><span style="color: #ff0000;">**Warning**</span></p>
<p>**Probably  best to try the angled version when you’ve completely finished all you  editing to the element layer, as it would be a nightmare to edit once  you’ve angled your design**</p>

<a href='http://www.media-mix.co.uk/2011/04/web-2-0-shine-and-apple-style-reflection/shine-step1/' title='shine-step1'><img width="150" height="150" src="http://www.media-mix.co.uk/wp-content/uploads/2011/04/shine-step1-150x150.jpg" class="attachment-thumbnail" alt="shine-step1" title="shine-step1" /></a>
<a href='http://www.media-mix.co.uk/2011/04/web-2-0-shine-and-apple-style-reflection/shine-step2/' title='shine-step2'><img width="150" height="150" src="http://www.media-mix.co.uk/wp-content/uploads/2011/04/shine-step2-150x150.jpg" class="attachment-thumbnail" alt="shine-step2" title="shine-step2" /></a>
<a href='http://www.media-mix.co.uk/2011/04/web-2-0-shine-and-apple-style-reflection/shine-step4/' title='shine-step4'><img width="150" height="150" src="http://www.media-mix.co.uk/wp-content/uploads/2011/04/shine-step4-150x150.jpg" class="attachment-thumbnail" alt="shine-step4" title="shine-step4" /></a>
<a href='http://www.media-mix.co.uk/2011/04/web-2-0-shine-and-apple-style-reflection/shine-step5/' title='shine-step5'><img width="150" height="150" src="http://www.media-mix.co.uk/wp-content/uploads/2011/04/shine-step5-150x150.jpg" class="attachment-thumbnail" alt="shine-step5" title="shine-step5" /></a>
<a href='http://www.media-mix.co.uk/2011/04/web-2-0-shine-and-apple-style-reflection/shine-step6/' title='shine-step6'><img width="150" height="150" src="http://www.media-mix.co.uk/wp-content/uploads/2011/04/shine-step6-150x150.jpg" class="attachment-thumbnail" alt="shine-step6" title="shine-step6" /></a>
<a href='http://www.media-mix.co.uk/2011/04/web-2-0-shine-and-apple-style-reflection/shine-step7/' title='shine-step7'><img width="150" height="150" src="http://www.media-mix.co.uk/wp-content/uploads/2011/04/shine-step7-150x150.jpg" class="attachment-thumbnail" alt="shine-step7" title="shine-step7" /></a>
<a href='http://www.media-mix.co.uk/2011/04/web-2-0-shine-and-apple-style-reflection/shine-step9/' title='shine-step9'><img width="150" height="150" src="http://www.media-mix.co.uk/wp-content/uploads/2011/04/shine-step9-150x150.jpg" class="attachment-thumbnail" alt="shine-step9" title="shine-step9" /></a>
<a href='http://www.media-mix.co.uk/2011/04/web-2-0-shine-and-apple-style-reflection/shine-step10/' title='shine-step10'><img width="150" height="150" src="http://www.media-mix.co.uk/wp-content/uploads/2011/04/shine-step10-150x150.jpg" class="attachment-thumbnail" alt="shine-step10" title="shine-step10" /></a>
<a href='http://www.media-mix.co.uk/2011/04/web-2-0-shine-and-apple-style-reflection/shine-step11/' title='shine-step11'><img width="150" height="150" src="http://www.media-mix.co.uk/wp-content/uploads/2011/04/shine-step11-150x150.jpg" class="attachment-thumbnail" alt="shine-step11" title="shine-step11" /></a>
<a href='http://www.media-mix.co.uk/2011/04/web-2-0-shine-and-apple-style-reflection/shine-step12/' title='shine-step12'><img width="150" height="150" src="http://www.media-mix.co.uk/wp-content/uploads/2011/04/shine-step12-150x150.jpg" class="attachment-thumbnail" alt="shine-step12" title="shine-step12" /></a>
<a href='http://www.media-mix.co.uk/2011/04/web-2-0-shine-and-apple-style-reflection/shine-step13/' title='shine-step13'><img width="150" height="150" src="http://www.media-mix.co.uk/wp-content/uploads/2011/04/shine-step13-150x150.jpg" class="attachment-thumbnail" alt="shine-step13" title="shine-step13" /></a>
<a href='http://www.media-mix.co.uk/2011/04/web-2-0-shine-and-apple-style-reflection/shine-step14/' title='shine-step14'><img width="150" height="150" src="http://www.media-mix.co.uk/wp-content/uploads/2011/04/shine-step14-150x150.jpg" class="attachment-thumbnail" alt="shine-step14" title="shine-step14" /></a>
<a href='http://www.media-mix.co.uk/2011/04/web-2-0-shine-and-apple-style-reflection/shine-step16/' title='shine-step16'><img width="150" height="150" src="http://www.media-mix.co.uk/wp-content/uploads/2011/04/shine-step16-150x150.jpg" class="attachment-thumbnail" alt="shine-step16" title="shine-step16" /></a>
<a href='http://www.media-mix.co.uk/2011/04/web-2-0-shine-and-apple-style-reflection/shine-step-final/' title='shine-step-final'><img width="150" height="150" src="http://www.media-mix.co.uk/wp-content/uploads/2011/04/shine-step-final-150x150.jpg" class="attachment-thumbnail" alt="shine-step-final" title="shine-step-final" /></a>
<a href='http://www.media-mix.co.uk/2011/04/web-2-0-shine-and-apple-style-reflection/shine-thumbnail/' title='shine-thumbnail'><img width="150" height="150" src="http://www.media-mix.co.uk/wp-content/uploads/2011/04/shine-thumbnail-150x150.jpg" class="attachment-thumbnail" alt="shine-thumbnail" title="shine-thumbnail" /></a>

]]></content:encoded>
			<wfw:commentRss>http://www.media-mix.co.uk/2011/04/web-2-0-shine-and-apple-style-reflection/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Professional Print Sizes</title>
		<link>http://www.media-mix.co.uk/2011/04/professional-print-sizes/</link>
		<comments>http://www.media-mix.co.uk/2011/04/professional-print-sizes/#comments</comments>
		<pubDate>Mon, 18 Apr 2011 11:45:46 +0000</pubDate>
		<dc:creator>Jay</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://www.media-mix.co.uk/?p=5</guid>
		<description><![CDATA[I was struggling to think what the first &#8216;real&#8217; post should be about, after much deliberation I&#8217;ve decided to get together a list of Print Page sizes. While working as a graphic designer a couple of years ago, I recall looking for print sizes for creating company stationary, these included business cards, complimentary slips, Letter &#8230; </p><p><a class="more-link block-button" href="http://www.media-mix.co.uk/2011/04/professional-print-sizes/">Continue reading &#187;</a>]]></description>
			<content:encoded><![CDATA[<div id="attachment_8" class="wp-caption alignright" style="width: 210px"><a href="http://www.media-mix.co.uk/wp-content/uploads/2011/04/A4-image.jpg"><img class="size-full wp-image-8" title="A4-image" src="http://www.media-mix.co.uk/wp-content/uploads/2011/04/A4-image.jpg" alt="The A* range are probably the best known page sizes." width="200" height="276" /></a><p class="wp-caption-text">The A* range are probably the best known page sizes.</p></div>
<p>I  was struggling to think what the first &#8216;real&#8217; post should be about,  after much deliberation I&#8217;ve decided to get together a list of Print  Page sizes.</p>
<p>While  working as a graphic designer a couple of years ago, I recall looking  for print sizes for creating company stationary, these included business  cards, complimentary slips, Letter headed paper and A2 launch posters.<span id="more-5"></span></p>
<p>While looking for all these there were different sizes popping up on some sites, so, heres my sizes to throw into the mix! ;o)<img title="More..." src="http://www.psaction.net/wp-includes/js/tinymce/plugins/wordpress/img/trans.gif" alt="" /></p>
<ul>
<li><strong>Business Cards</strong><strong> </strong>
<ul>
<li>From my experience the most requested cut size for a business card has been 85mm x 55mm.</li>
</ul>
<ul>
<li>For printing, professionals will require a bleed,  the amount of bleed can vary, but I’d recommend a minimum of 4mm.</li>
</ul>
<ul>
<li>As for the paper, 350gsm weight would be ideal.</li>
<li><a title="Download template" href="http://www.psaction.net/wp-content/uploads/2009/07/businesscard_template.jpg" target="_blank">Download template</a></li>
</ul>
</li>
<li><strong>Compliment slips</strong>
<ul>
<li>210mm  x 99mm (a 1/3 of an A4) is a good size for a compliment slip and one  that I would recommend, although be aware they can vary in size.</li>
</ul>
<ul>
<li>100gsm would be ample for a compliment slip, but use 120gsm for a more professional feel.</li>
<li><a title="Download template" href="http://www.psaction.net/wp-content/uploads/2009/07/compslip_template.jpg" target="_blank">Download template</a></li>
</ul>
</li>
<li><strong>Letterhead’s</strong>
<ul>
<li>Letter  headed paper is obviously designed for A4 (210mm x 297mm) / letter  (215.9mm x 279.4mm) sized, but if your design meets an edge, design with  a bleed (as above, I’d recommend at least 4mm).</li>
</ul>
<ul>
<li>Use  100gsm for a standard sheet, especially if ordering in large bulk and  for everyday use. If you require a professional weighting for important  documents, then a 120gsm would be more than adequate for the job.</li>
<li><a title="Download template" href="http://www.psaction.net/wp-content/uploads/2009/07/letterhead_template.jpg" target="_blank">Download template</a> (A4 size)</li>
</ul>
</li>
</ul>
<p>These were the three important documents that required my full  attention when I was charged with the job of creating new company  stationary, but for this post, here are other sizes that you might need  during your creative lives:-</p>
<h3>ISO Paper Sizes</h3>
<ul>
<li>A0 &#8211; 841mm x 1189mm</li>
<li>A1 &#8211; 594mm x 841mm</li>
<li>A2 &#8211; 420mm x 594mm</li>
<li>A3 &#8211; 297mm x 420mm</li>
<li>A4 &#8211; 210mm x 297mm</li>
<li>A5 &#8211; 148mm x 210mm</li>
<li>A6 &#8211; 105mm x 148mm</li>
<li>A7 &#8211; 74mm x 105mm</li>
<li>A8 &#8211; 52mm x 74mm</li>
<li>A9 &#8211; 37mm x 52mm</li>
<li>A10 &#8211; 26mm x 37mm</li>
</ul>
<h3>North American Sizes</h3>
<ul>
<li>Letter &#8211; 216mm x 279mm</li>
<li>Legal 216mm x 356mm</li>
<li>Junior Legal &#8211; 203mm x 127mm</li>
<li>Ledger &#8211; 432mm x 279mm</li>
<li>Tabloid &#8211; 279mm x 432mm</li>
</ul>
<p>Other Sizes</p>
<ul>
<li>DL &#8211; 110mm x 220mm</li>
</ul>
<p>Well thats it, First post done, hope you all enjoy and find it useful!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.media-mix.co.uk/2011/04/professional-print-sizes/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

