<?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>JakeIntel &#187; Design</title>
	<atom:link href="http://jakeintel.thejakegroup.com/category/design/feed/" rel="self" type="application/rss+xml" />
	<link>http://jakeintel.thejakegroup.com</link>
	<description>Just another WordPress weblog</description>
	<lastBuildDate>Mon, 30 Apr 2012 20:27:49 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Designing for eBooks</title>
		<link>http://jakeintel.thejakegroup.com/jake-intel/designing-for-ebooks/</link>
		<comments>http://jakeintel.thejakegroup.com/jake-intel/designing-for-ebooks/#comments</comments>
		<pubDate>Fri, 30 Dec 2011 21:45:02 +0000</pubDate>
		<dc:creator>Jake</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[Jake Intel]]></category>

		<guid isPermaLink="false">http://jakeintel.thejakegroup.com/?p=1258</guid>
		<description><![CDATA[Details on what it takes to convert from print to an eBook, and how to keep your cover looking good.]]></description>
			<content:encoded><![CDATA[<p><img src="http://jakeintel.thejakegroup.com/post_images/ebooks_banner_main.jpg" alt="Designing for eBooks" style="margin-bottom:10px;" /><br />
Jake recently designed a series of academic textbooks for Westview Press and it got us thinking…  what would it take to convert the printed books into an eBook format? This post touches on the basics of creating eBooks, specifically modifying cover designs to the required specifications.</p>
<h1>Overview</h1>
<hr color="#9acd68" size="1" />
<p>Electronic books were originally designed to display text with minimal images. For that reason, children’s books, cookbooks, comics, etc. do not translate well and often have trouble displaying correctly across platforms. A good rule of thumb is that eBooks work best for text-heavy novels and long, narrative articles (think best seller lists and The New Yorker). That being said, readers are constantly evolving and expected to soon support graphic-heavy books. In fact, Apple’s iOS devices already support fixed-layouts, so it is safe to assume other readers will soon do the same. Either way, eBooks still require a strong cover design to attract interest in the book.</p>
<h1>eBook Formats</h1>
<hr color="#9acd68" size="1" />
<p>Any electronic book is considered an eBook, but over 90% of all eBooks are read on Amazon’s Kindle, Apple’s iOS devices (iPad, iPhone and iPod) and the Barnes &#038; Noble Nook using these formats: </p>
<ul style="margin:0;">
<li><strong>EPUB</strong>: This is an open standard adopted by Apple (iOS), Barnes &#038; Noble (Nook) and many other makers of eBook readers (such as Sony).</li>
<li><strong>Kindle</strong>: This is a proprietary format that Amazon uses for its Kindle, which is a modification of the Mobipocket format.</li>
<li><strong>PDF</strong>: PDF is inherently made for print and doesn’t display well on digital devices. But if you really need to get data out to an iOS or Android device now, then it’s a useful format.</li>
</ul>
<h1>Making Your eBook</h1>
<hr color="#9acd68" size="1" />
<p>There are multiple ways to create your eBook. Some of the most popular methods are: </p>
<ul style="margin:0;">
<li><strong>Amazon’s Kindle Direct Publishing (kdp.amazon.com)</strong>: KDP is a fast, easy self-publishing tool that lets you publish your digital text content for the Amazon Kindle.</li>
<li><strong>Kindle Plugin for Adobe InDesign</strong>: Create Kindle books in-house using a free Kindle Plugin that converts your file to a Kindle format. You can download the plug-in at www.amazon.com/kindlepublishing. </li>
<li><strong> Outsourcing</strong>: Services such as Lulu and Smashwords will translate your Word document into an eBook format. In addition to creating your book, they will also submit it to Apple and Amazon bookstores for a small fee.</li>
<li><strong>Hand Coding</strong>: More on this in a future JakeIntel post.</li>
</ul>
<h1>eBook Covers Formats</h1>
<hr color="#9acd68" size="1" />
<p>Since eBooks are used on various platforms and purchased online, they require a few different cover formats:  </p>
<ul style="margin:0;">
<li><strong>Embedded eBook Cove</strong>r: The cover embedded inside your eBook that displays as the first page. This can and should be separately sized to each store’s specifications.</li>
<li><strong>Catalog Cover</strong>: The cover that shows up in the eBook store on Amazon, B&#038;N, ect. Generally uploaded separately, and also used at a thumbnail size when displaying search results.</li>
<li><strong>Publicity Cover</strong>: This cover is used on your website, ads and other marketing materials. Size vary based on the application.</li>
</ul>
<h1>Cover Specifications</h1>
<hr color="#9acd68" size="1" />
<p>In addition to the various cover formats outlined above, each reader has slightly different size requirements. You can reference the chart below when creating your covers:</p>
<table style="border-top: solid 1px #013668; border-right: solid 1px #013668; margin-bottom:15px;font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height:20px;" cellspacing="0" cellpadding="5" width="100%">
<tbody>
<tr valign="top" height="20" style="background:#B3D78B;">
<td width="98" height="20"  style="border-bottom: solid 1px #013668; border-left: solid 1px #013668;">&nbsp;</td>
<td width="93" style="border-bottom: solid 1px #013668; border-left: solid 1px #013668;"><strong>Format</strong></td>
<td width="128" style="border-bottom: solid 1px #013668; border-left: solid 1px #013668;"><strong>Size in px</strong></td>
<td width="107" style="border-bottom: solid 1px #013668; border-left: solid 1px #013668;"><strong>Resolution</strong></td>
<td width="97" style="border-bottom: solid 1px #013668; border-left: solid 1px #013668;"><strong>File Size</strong></td>
</tr>
<tr valign="top" height="20">
<td style="border-bottom: solid 1px #013668; border-left: solid 1px #013668;">Kindle CC</td>
<td style="border-bottom: solid 1px #013668; border-left: solid 1px #013668;">JPG, TIFF</td>
<td style="border-bottom: solid 1px #013668; border-left: solid 1px #013668;">min 500px max 1280px</td>
<td style="border-bottom: solid 1px #013668; border-left: solid 1px #013668;">72 dpi</td>
<td style="border-bottom: solid 1px #013668; border-left: solid 1px #013668;">n/s</td>
</tr>
<tr valign="top" height="20" style="background:#D8D8D8">
<td style="border-bottom: solid 1px #013668; border-left: solid 1px #013668;">Kindle EC</td>
<td style="border-bottom: solid 1px #013668; border-left: solid 1px #013668;">JPG</td>
<td style="border-bottom: solid 1px #013668; border-left: solid 1px #013668;">600 x 800</td>
<td style="border-bottom: solid 1px #013668; border-left: solid 1px #013668;">167ppi &ndash;&nbsp;300dpi</td>
<td style="border-bottom: solid 1px #013668; border-left: solid 1px #013668;">127kb</td>
</tr>
<tr valign="top" height="20">
<td style="border-bottom: solid 1px #013668; border-left: solid 1px #013668;">B&amp;N/Nook CC</td>
<td style="border-bottom: solid 1px #013668; border-left: solid 1px #013668;">JPG, GIF, PNG</td>
<td style="border-bottom: solid 1px #013668; border-left: solid 1px #013668;">600 x 730</td>
<td style="border-bottom: solid 1px #013668; border-left: solid 1px #013668;">n/s</td>
<td style="border-bottom: solid 1px #013668; border-left: solid 1px #013668;">n/s</td>
</tr>
<tr valign="top" height="20" style="background:#D8D8D8">
<td style="border-bottom: solid 1px #013668; border-left: solid 1px #013668;">B&amp;N/Nook EC</td>
<td style="border-bottom: solid 1px #013668; border-left: solid 1px #013668;">JPG, GIF, PNG</td>
<td style="border-bottom: solid 1px #013668; border-left: solid 1px #013668;">600 x 1024</td>
<td style="border-bottom: solid 1px #013668; border-left: solid 1px #013668;">170 ppi</td>
<td style="border-bottom: solid 1px #013668; border-left: solid 1px #013668;">300kb</td>
</tr>
<tr valign="top" height="20">
<td style="border-bottom: solid 1px #013668; border-left: solid 1px #013668;">iPad EC</td>
<td style="border-bottom: solid 1px #013668; border-left: solid 1px #013668;">JPG, GIF, PNG</td>
<td style="border-bottom: solid 1px #013668; border-left: solid 1px #013668;">600 x 860</td>
<td style="border-bottom: solid 1px #013668; border-left: solid 1px #013668;">132 ppi</td>
<td style="border-bottom: solid 1px #013668; border-left: solid 1px #013668;">200kb</td>
</tr>
</tbody>
</table>
<p>If you are unable to produce multiple covers, your best bet is to create a 600&#215;800 JPG. This isn’t the optimal cover size for each reader, but it should cover all your bases. In addition to the sizes noted above, remember to convert all graphics to RGB. Any files submitted as CMYK will be rejected.</p>
<h1>Designing Your Cover</h1>
<hr color="#9acd68" size="1" />
<p>In most cases you can simply resize your printed cover to fit the required specs, but occasionally a redesign is needed since not all covers translate well on screen or at smaller sizes. For example, a cover that uses gold leaf or embossing will not display well on screen. When redesigning your cover, it is best to stick with simple, but bold graphics and strong type treatments. Jake’s design for <i>Supreme Decisions: Great Constitutional Cases and Their Impact</i> is a perfect example of strong graphics and type that convert well to the Amazon Kindle and other e-reading devices: </p>
<p><img src="http://jakeintel.thejakegroup.com/post_images/ebooks_jake_urofsky.jpg" alt="eBook Covers"/></p>
]]></content:encoded>
			<wfw:commentRss>http://jakeintel.thejakegroup.com/jake-intel/designing-for-ebooks/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Photoshop Scripts</title>
		<link>http://jakeintel.thejakegroup.com/jake-intel/photoshop-scripts/</link>
		<comments>http://jakeintel.thejakegroup.com/jake-intel/photoshop-scripts/#comments</comments>
		<pubDate>Thu, 23 Jun 2011 20:32:04 +0000</pubDate>
		<dc:creator>Jake</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[Jake Intel]]></category>

		<guid isPermaLink="false">http://jakeintel.thejakegroup.com/?p=1012</guid>
		<description><![CDATA[Scripts serve as a great tool to assist designers in increasing their workflow by automating repetitive tasks, customizing commands and even adding new features.]]></description>
			<content:encoded><![CDATA[<p><img src="http://jakeintel.thejakegroup.com/post_images/photoshop_scripts.jpg" alt="Photoshop Scripts" /></p>
<h1>What are Photoshop Scripts?</h1>
<hr color="#9acd68" size="1" />
<p>Scripts serve as a great tool to assist designers in increasing their workflow by automating repetitive tasks, customizing commands and even adding new features. Although they debuted way back with version 7, it is surprising how few people even know they exist. Originally scripts were an optional plug-in available via download, but today they come built into the program with a few useful scripts preloaded.
</p>
<p>Scripting allows you to combine the power of Photoshop’s tools with custom programming. The feature allows users to write scripts using JavaScript, VB Script, or AppleScript, to do what you can’t with your mouse and keyboard—or simply don’t feel like spending your time on. The scripts are fairly basic, but for those of us not up to the challenge of learning to write custom scripts—there are plenty of freebies available online. </p>
<h1>Why Scripts, Not Actions?</h1>
<hr color="#9acd68" size="1" />
<p>Photoshop Scripts are way more powerful than actions or batching and can be as smart as you make them. Some examples of the powers of scripting include:
<ul style="margin-top:0">
<li>You can add conditional logic, so that the script automatically makes &#8220;decisions&#8221; based on the current situation. For example, you could write a script that decides which color border to add depending on the size of the selected area in an image: &#8220;If the selected area is smaller than 2 x 4 inches, add a green border; otherwise add a red border.&#8221; </li>
<li>A single script can perform actions that involve multiple applications. For example, you could target both Photoshop CS2 and another Adobe Creative Suite 2 Application in the same script. </li>
<li>You can open, save, and rename files using scripts. </li>
</ul>
<h1>Installing a Photoshop Script</h1>
<hr color="#9acd68" size="1" />
<p>Installing scripts is super simple. First download the script (or create your own), then save it into the specified scripts folder.</p>
<ul style="margin-top:0">
<li>PC: C:\Program Files\Adobe\Photoshop\Presets\Scripts\ </li>
<li>MAC: Applications > Photoshop > Presets > Scripts.</li>
</ul>
<p>After copying a script to this folder you&#8217;ll need to Quit and then Restart Photoshop before the script appears in the File> Scripts menu.</p>
<h1>Examples of Pre-loaded Scripts</h1>
<hr color="#9acd68" size="1" />
<p>Photoshop comes with a few useful scripts right out of the box. Once the program is installed, you can find them under File > Scripts. One example includes:</p>
<p><strong>Layer Comps to Files</strong><br />This one does exactly what it says, outputting your Layer Comps to separate files. Layer comps are an easy way to create “snapshots” of your comps in various states. Using the script, you can output the comps to various files types PSD, JPG, and GIF. If you have clients who like to see everything in PDF format, there&#8217;s also &#8220;Layer Comps To PDF&#8221; which outputs the layer comps into a single PDF document with multiple pages.</p>
<h1>Examples of Free Add-On Scripts</h1>
<hr color="#9acd68" size="1" />
<p>As mentioned previously, you can find tons of free scripts online. Some scripter sites will even write custom scripts for you on request. A few timesaving scripts include: </p>
<p><strong>Remove Copy From All Layers</strong><br />If you create multiple comps and layers sets in your files and are anal like me, having the word “copy” in half your layers is an annoying Photoshop feature. It takes time to go through each layer and manually remove the word “copy”. Luckily, someone else thought the same thing and created a script to remove them all at once. It removes the word copy and also the number next to it, so &#8220;mylayername copy 12&#8243; becomes simply &#8220;mylayername&#8221;.</p>
<p><a href="http://blogs.adobe.com/jnack/2009/12/new_panel_scripts_let_you_batch_eliminate.html" target="_blank">Download the script here</a></p>
<p>NOTE: CS5 now has a built in option to turn this off, so you don’t need the script. You can set it in your layer palette options.</p>
<p><strong>Text Export</strong><br />This script will export all your layers to a text file so you can easily convert to HTML without having to copy and paste. For example, if you have 3 text layers: </p>
<p>(Layer 1) Lorem ipsum<br />
(Layer 2) This is a headline<br />
(Layer 3) Submit </p>
<p>You run the script and you get a text file with these contents: </p>
<p>Lorem ipsum<br />
This is a headline<br />
Submit </p>
<p><a href="http://www.bram.us/2008/03/16/ps_bramustextexport-13-automatically-export-all-text-layers-from-photoshop-psd-to-a-text-file/" target="_blank">Download the script here</a></p>
<h1>Links and References</h1>
<hr color="#9acd68" size="1" />
<p>Here are a few useful links to learn more about Photoshop scripts:</p>
<p><a href="http://morris-photographics.com/photoshop/scripts/" target="_blank">Trevor Morris Photographic</a></p>
<p><a href="http://www.tranberry.com/photoshop/photoshop_scripting/index.html" target="_blank">Jeff Tranberry</a></p>
<p><a href="http://www.adobe.com/cfusion/exchange/index.cfm?l=-1&#038;s=5&#038;o=desc&#038;exc=16&#038;cat=203&#038;event=productHome" target="_blank">Adobe, Photoshop Scripts</a></p>
<p><a href="http://www.ps-scripts.com/" target="_blank">PS-Scripts</a></p>
<p></strong> <a href="http://www.kirupa.com/motiongraphics/ps_scripting.htm" target="_blank">Kirupa Tutorials</a></p>
]]></content:encoded>
			<wfw:commentRss>http://jakeintel.thejakegroup.com/jake-intel/photoshop-scripts/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Typography 101: Font Basics</title>
		<link>http://jakeintel.thejakegroup.com/jake-intel/typography-101-font-basics/</link>
		<comments>http://jakeintel.thejakegroup.com/jake-intel/typography-101-font-basics/#comments</comments>
		<pubDate>Tue, 29 Mar 2011 22:24:55 +0000</pubDate>
		<dc:creator>Jake</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[Jake Intel]]></category>

		<guid isPermaLink="false">http://jakeintel.thejakegroup.com/?p=903</guid>
		<description><![CDATA[Typography is the art or process of printing with type. However, in modern usage typography includes all manner of non-printed letter forms.]]></description>
			<content:encoded><![CDATA[<p>Typography is the art or process of printing with type. However, in modern usage typography includes all manner of non-printed letter forms such as websites, eBooks, electronic billboards, and even textiles. Through the use of type, a person can visually tell a story using little to no imagery. This post is intended to teach you about the anatomy of type and to help you better understand what to look for when choosing your next font.</p>
<p><img src="http://jakeintel.thejakegroup.com/post_images/type_pic1.jpg" alt="Typeface or Font Family" /></p>
<h1>First, the basics &#8230;</h1>
<hr color="#9acd68" size="1" />
<p><strong>Typeface vs Font, What’s the difference?</strong><br />
A typeface, also called a font family, is a set of fonts designed with a stylistic unity, each comprising a coordinate set of glyphs. A font is a complete character set of a typeface at a particular size, weight, and style.</p>
<p><strong>Serif vs Sans Serif, Which one to use?</strong><br />
Serif letters are drawn with features at the ends of their strokes. The serifs are the little feet we see in fonts like Times. These are some of the oldest type designs. The feet along the baseline help guide the eye from left to right, making them very ‘readable’ fonts.</p>
<p>Sans Serif (french for “without serifs”) are letters drawn with straighter lines and no feet. Their larger letterforms make them very legible, but can cause greater eye strain when used in long runs of text. Helvetica is considered the quintessential sans serif font.</p>
<h1>The Anatomy of a Letter</h1>
<hr color="#9acd68" size="1" />
<p>There is a standard set of terms to describe the parts of a character. These terms, and the parts of the letter they represent, are often referred to as “letter anatomy” or “typeface anatomy.” By breaking down letters into parts, a designer can better understand how type is created and altered and how to use it effectively.<br />
<img src="http://jakeintel.thejakegroup.com/post_images/type_pic2.jpg" alt="Type Diagram" /></p>
<ul style="margin-top:-10px">
<li>Baseline – The baseline is the invisible line on which characters sit. While the baseline may differ from typeface to typeface, it is consistent within a typeface. Rounded letters such as “e” may extend slightly below the baseline.</li>
<li>Meanline – The meanline falls at the top of many lowercase letters such as “e,” “g” and “y.” It is also at the curve of letters like “h.”</li>
<li>X-Height – The x-height is the distance between the meanline and the baseline. It is referred to as the x-height because it is the height of a lowercase “x.” This height can vary greatly between typefaces.</li>
<li>Cap Height – The cap height is the distance from the baseline to the top of uppercase letters like “H” and “J.”</li>
<li>Ascender – The part of a character that extends above the meanline is known as an ascender. Note that this is the same as extending above the x-height.</li>
<li>Descender – The part of a character that extends below the baseline is known as a descender, such as the bottom stroke of a “y.”</li>
<li>Serif – Fonts are often divided into serif and sans serif. Serif fonts are distinguishable by the extra stroke at the ends of the character, known as a serif.</li>
<li>Stem – The vertical line of a “B” and the primary diagonal line of a “V” are known as the stem. The stem is often the main “body” of a letter.</li>
<li>Bar – The horizontal lines of an “E” are known as bars. Bars are horizontal or diagonal lines of a letter, also known as arms, and are open on at least one side.</li>
<li>Bowl – An open or closed circular line that creates an interior space, such as in “e” and “b.”</li>
<li>Counter – The inside of a bowl.</li>
<li>Leg – The bottom stroke of a letter, such as the base of an “L” or diagonal stroke of a “K.”</li>
<li>Shoulder – The curve at the beginning of a leg of a character, such as in an “m.”</li>
</ul>
<h1>Great Examples of Type-Only Design</h1>
<hr color="#9acd68" size="1" />
<img src="http://jakeintel.thejakegroup.com/post_images/type_pic3.jpg" alt="Typography Examples" /></p>
]]></content:encoded>
			<wfw:commentRss>http://jakeintel.thejakegroup.com/jake-intel/typography-101-font-basics/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

