博文

目前显示的是十一月, 2018的博文

今天我要写的是我的初次书籍排版体验。从我第一次接到任务开始到书籍印刷出厂结束，期间经历了约莫有两个月的时间。我从一开始对书籍排版的生涩，到后来的略懂一二。经历无数次改稿，挑灯修改，终于在今天结束了。
在这期间我学到了不少东西，故将其记录下来，留个脚印。
我所使用的排版软件是 InDesign，和 Photoshop 一样，是 Adobe 全家桶的一员。ID 主要用于各种印刷品的排版编辑。在这之前，我是从未接触过这个软件的，好在有使用过 Photoshop 的经验，再囫囵看了一些教程后，就开始了我的书籍排版之旅了。
<hr>
如果你要排版一本书，你可以思考一下，你需要什么信息呢？
<ul>
<li>纸张大小：是要 16 开、还是 8 开？16 开、8 开等的规格还有所不同。在排版之前，一定要先确认纸张的大小，这个非常重要。</li>
<li>书的风格：最好能有个参考，可以在网上或图书馆里找找相应的书籍。</li>
<li>其余要求。书的页数要控制多少页……</li>
</ul>
我能想到就是这么多，不知道你是不是和我一样。
<h3 id="我看了什么教程">我看了什么教程</h3>
我看的教程是：
<ol>
<li>Doyoudo 的 InDesign 入门教程</li>
<li>高高手的 InDesign 教程</li>
</ol>
以上两个视频教程都可以在 B 站找到。
第一个，它可以帮你快速入门，了解软件的使用。
第二个，讲的非常详细，它可以帮助你更了解排版、印刷行业里的专业知识，且也会手把手教你使用软件。另外，如果你想学 Photoshop 的话，这两家的教程也是入门首选哦。
<h3 id="书籍的组成">书籍的组成</h3>
封面、勒口、扉页、章前页、腰封… 
<a href="https://ww1.sinaimg.cn/large/007iUjdily1fxixuw243ij30rs0c4myo.jpg"><img alt="" src="https://cdn.jsdelivr.net/gh/joeyliu6/Blogger@master/static_files/iljw/img/large/007iUjdily1fxixuw243ij30rs0c4myo.jpg"></a>
你可以拿起周边的一本书，对应着上图，来找找自己手上的书是由哪些元素组成的。
<h3 id="对于「出血」的了解">对于「出血」的了解</h3>
<blockquote>
出血，是平面设计中常被提及到的一个概念。设计师在新建画板时，就应第一时间将版面大小和预留出血的尺寸给考虑进去，然后开始设计。
</blockquote>
让我们用两张张动图简单了解一下什么是出血吧？
<a href="https://ww1.sinaimg.cn/large/007iUjdily1fxiym13m2ag30go0cigsw.gif"><img alt="" src="https://cdn.jsdelivr.net/gh/joeyliu6/Blogger@master/static_files/iljw/img/large/007iUjdily1fxiym13m2ag30go0cigsw.gif"></a>
无出血的设计稿，在印刷时，由于钢刀裁切的误差，可能会留下白边。
<a href="https://cdn.jsdelivr.net/gh/joeyliu6/Blogger@master/static_files/iljw/img/large/007iUjdily1fxiymdvmwmg30go0ci11i.gif"><img alt="" src="https://cdn.jsdelivr.net/gh/joeyliu6/Blogger@master/static_files/iljw/img/large/007iUjdily1fxiymdvmwmg30go0ci11i.gif"></a>
若有设置出血部分，则裁切时不会产生白边现象。
上面内容可归纳为，出血是为了印刷裁切时不会出现白边而所设置的多余部分。出血预留的范围一般为 3 mm，且还有区分为外出血和内出血，这两个概念也很重要，但在此不再深入。
<h3 id="版心设计">版心设计</h3>
<a href="https://cdn.jsdelivr.net/gh/joeyliu6/Blogger@master/static_files/iljw/img/large/007iUjdily1fxizcd6jifj30nd0dsq3i.jpg"><img alt="" src="https://cdn.jsdelivr.net/gh/joeyliu6/Blogger@master/static_files/iljw/img/large/007iUjdily1fxizcd6jifj30nd0dsq3i.jpg"></a>
版心的设计很大程度上决定了书籍的印刷页数，如果你想控制页数的话，可在版心上调整一番。
版心的大小与否，给人的观感也有所不同。版心越大，信息量越大，书籍给人的感觉是繁忙，信息精彩繁多的感觉。版心越小，给人以安静平和的感觉。
但我们需要注意几点，像内边距若设置地太小，那么书内侧的文字就会夹在书缝里。
还有上边距与外边距的大小也不可太小，否则会给人以纸面空间的逼仄感，让人失去阅读的欲望。
<h3 id="段落样式">段落样式</h3>
段落样式就像是在 Word 里的段落格式，网页设计中 CSS 一样。假如你为所有的二级标题的字体设置为思源宋体后，过了一会儿，又想将它们改为思源黑体。那么你是需要一个一个地修改么？那不是很麻烦么？若你提前就设置好了段落样式，那么只需要在段落样式里修改一下字体，那么所有二级标题的字体就都修改了。
<h3 id="封面设计">封面设计</h3>
本来此次我还兼任封面的设计，不过设计的几次封面都不满意。
应有几点是我该反思的：
<ol>
<li>平常所接触地设计太少，设计时难以有创意灵感。</li>
<li>不熟悉 Adobe Illustration 的使用。在画建筑物的剪影时出现了困难。</li>
<li>文字排版问题没有解决。</li>
</ol>
<a href="https://cdn.jsdelivr.net/gh/joeyliu6/Blogger@master/static_files/iljw/img/large/007iUjdily1fxjer397upj30p00clabf.jpg"><img alt="" src="https://cdn.jsdelivr.net/gh/joeyliu6/Blogger@master/static_files/iljw/img/large/007iUjdily1fxjer397upj30p00clabf.jpg"></a>
<h3 id="此次排版存在的问题">此次排版存在的问题</h3>
<ol>
<li>书的外边距设置的太小。留白太少，所以会导致书给人的观感太紧凑。</li>
<li>副标题字重太大，干扰视线。应该把字重调低一点。</li>
<li>字间距可以调大一点，看起来会更舒服</li>
<li>标点挤压部分做的不好，相邻的标点符号空格太大。</li>
</ol>
<h3 id="一些我觉得不错的地方">一些我觉得不错的地方</h3>
<ol>
<li>图片的摆放，看起来很舒服。</li>
<li>章前页、目录的设计比较满意。</li>
</ol>
<h3 id="写在最后">写在最后</h3>
这段经历给我留下一个后遗症，每当我听到微信的信息提示音，我心里都会跳一下（胆颤心惊）。
我习得了 InDesign 的皮毛，以及一些书籍排版印刷方面的知识。我知道我还有诸多不足之处，在以后的时光中，我希望能将其弥补。
以上为我的反思总结，有些细节的地方并未阐述清楚，所以有些地方你可能会看起来云里雾里。不过，我相信你如果有认真看完文章，必定能收获一二。
<h3 id="参考">参考</h3>
<ol>
<li>题图：Photo by <a href="https://unsplash.com/photos/0FRJ2SCuY4k?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Jonas Jacobsson</a> on <a href="https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></li>
<li>图片来源：<a href="https://www.wukong.com/answer/6453788522611474701/">图书装帧设计师有哪些常识或者经验？-伪文艺小短腿的回答-悟空问答</a></li>
<li><a href="https://www.instructables.com/id/How-to-Create-a-Simple-Logo-in-Indesign/">How to Create a Simple Logo in Indesign: 15 Steps</a></li>
<li><a href="https://zhuanlan.zhihu.com/p/26843311">平面设计中的出血是怎么回事？ - 知乎</a></li>
<li><a href="http://www.corpmedia.com.cn/?p=2521">杂志设计中版心的设置 | 天合新媒</a></li>
</ol>

今天我要写的是我的初次书籍排版体验。从我第一次接到任务开始到书籍印刷出厂结束，期间经历了约莫有两个月的时间。我从一开始对书籍排版的生涩，到后来的略懂一二。经历无数次改稿，挑灯修改，终于在今天结束了。在这期间我学到了不少东西，故将其记录下来，留个脚印。我所使用的排版软件是 InDesign，和 Photoshop 一样，是 Adobe 全家桶的一员。ID 主要用于各种印刷品的排版编辑。在这之前，我是从未接触过这个软件的，好在有使用过 Photoshop 的经验，再囫囵看了一些教程后，就开始了我的书籍排版之旅了。如果你要排版一本书，你可以思考一下，你需要什么信息呢？纸张大小：是要 16 开、还是 8 开？16 开、8 开等的规格还有所不同。在排版之前，一定要先确认纸张的大小，这个非常重要。书的风格：最好能有个参考，可以在网上或图书馆里找找相应的书籍。其余要求。书的页数要控制多少页……我能想到就是这么多，不知道你是不是和我一样。我看了什么教程我看的教程是：Doyoudo 的 InDesign 入门教程高高手的 InDesign 教程以上两个视频教程都可以在 B 站找到。第一个，它可以帮你快速入门，了解软件的使用。第二个，讲的非常详细，它可以帮助你更了解排版、印刷行业里的专业知识，且也会手把手教你使用软件。另外，如果你想学 Photoshop 的话，这两家的教程也是入门首选哦。书籍的组成封面、勒口、扉页、章前页、腰封…
你可以拿起周边的一本书，对应着上图，来找找自己手上的书是由哪些元素组成的。对于「出血」的了解出血，是平面设计中常被提及到的一个概念。设计师在新建画板时，就应第一时间将版面大小和预留出血的尺寸给考虑进去，然后开始设计。让我们用两张张动图简单了解一下什么是出血吧？无出血的设计稿，在印刷时，由于钢刀裁切的误差，可能会留下白边。若有设置出血部分，则裁切时不会产生白边现象。上面内容可归纳为，出血是为了印刷裁切时不会出现白边而所设置的多余部分。出血预留的范围一般为 3 mm，且还有区分为外出血和内出血，这两个概念也很重要，但在此不再深入。版心设计版心的设计很大程度上决定了书籍的印刷页数，如果你想控制页数的话，可在版心上调整一番。版心的大小与否，给人的观感也有所不同。版心越大，信息量越大，书籍给人的感觉是繁忙，信息精彩繁多的感觉。版心越小，给人以安静平和的感觉。但我们需要…

发表评论

继续阅读

使用 Javascript 删除 Blogger 博文页面链接的日期时间

十一月 27, 2018

在谷歌 Blogger 交流群里有一位博友提出这个问题：
<blockquote>
如何将 Blogger 文章链接的 /Year/Month/ 给删除掉？就像是 Wordpress、Typecho 等博客程序一样。
</blockquote>
我使用英文搜索关键词后，发现国外也有人有同样的需求。从 Blogger 官方论坛人员的回复中可以知道：Blogger 文章链接一经发布，便不可修改，且在 Blogger 后台设置中也没有删去链接中日期时间的选项。
接着，我在 Youtube 上看到一个印度小哥<a href="#fn1" id="fnref1">1</a>说可以实现这个功能。我硬着头皮听了几分钟的印度英语（应该是吧），发现他是用 Javascript 方法来解决这个问题的。从小哥给出的代码中，我得到了该源码的 Github 地址<a href="#fn2" id="fnref2">2</a>。它的作者是墨西哥人，这就是互联网的魅力吧，让素不相识的人跨越国界产生联系。
代码的实现效果如下：
<a href="https://cdn.jsdelivr.net/gh/joeyliu6/Blogger@master/static_files/iljw/img/large/007iUjdily1fxjer397upj30p00clabf.jpg007iUjdily1fxmvymrgafj319y0i40t5.jpg"><img alt="img" src="https://cdn.jsdelivr.net/gh/joeyliu6/Blogger@master/static_files/iljw/img/large/007iUjdily1fxmvymrgafj319y0i40t5.jpg"></a>
<h3 id="如何使用？">如何使用？</h3>
你需要在你的 Blogger 主题模板的 <code>&lt;head&gt;</code> 标签后面添加如下代码即可。
<pre class=" language-javascript"><code class="prism language-javascript">&lt;script type="text/javascript"&gt;
// BloggerJS v0.4.0
// Licensed under the MIT License
// Copyright (c) 2017-2018 Kenny Cruz
// github.com/jokenox

// Configuration
var config = {
 postsDatePrefix: false,
 accessOnly: false,

useApiV3: false,
 apiKey: "YOUR-API-KEY-HERE"
}
var postsOrPages=["pages","posts"],blogId="&lt;data:blog.blogId/&gt;",urlTotal,fetchIndex=1,ampChar="&amp;amp;"[0],secondRequest=!0,feedPriority=0,nextPageToken;function urlVal(){var url=window.location.pathname;var length=url.length;var urlEnd=url.substring(length-5);if(urlEnd===".html")return 0;else if(length&gt;1)return 1;else return 2}
function urlMod(){var url=window.location.pathname;if(url.substring(1,2)==="p"){url=url.substring(url.indexOf("/",1)+1);url=url.substr(0,url.indexOf(".html"));history.replaceState(null,null,"../"+url)}else{if(!config.postsDatePrefix)url=url.substring(url.indexOf("/",7)+1);else url=url.substring(1);url=url.substr(0,url.indexOf(".html"));history.replaceState(null,null,"../../"+url)}}
function urlSearch(url,database){var pathname=url+".html";database.forEach(function(element){var search=element.search(pathname);if(search!==-1)window.location=element})}
function urlManager(){var validation=urlVal();if(validation===0){if(!config.accessOnly)urlMod()}else if(validation===1){fetchData(postsOrPages[feedPriority],1)}else if(validation===2){if(!config.accessOnly)history.replaceState(null,null,"/")}}
function fetchData(postsOrPages,index){var script=document.createElement("script");if(config.useApiV3){var jsonUrl="https://www.googleapis.com/blogger/v3/blogs/"+blogId+"/"+postsOrPages+"?key="+config.apiKey+"#maxResults=500#fields=nextPageToken%2Citems(url)#callback=parseData";if(nextPageToken)jsonUrl+="#pageToken="+nextPageToken;nextPageToken=undefined}else{var jsonUrl=window.location.protocol+"//"+window.location.hostname+"/feeds/"+postsOrPages+"/summary?start-index="+index+"#max-results=150#orderby=published#alt=json-in-script#callback=parseData"}
jsonUrl=jsonUrl.replace(/#/g,ampChar);script.type="text/javascript";script.src=jsonUrl;document.getElementsByTagName("head")[0].appendChild(script)}
function parseData(json){var database=[];if(!config.useApiV3){if(!urlTotal){urlTotal=parseInt(json.feed.openSearch$totalResults.$t)}
try{json.feed.entry.forEach(function(element,index){var entry=json.feed.entry[index];entry.link.forEach(function(element,index){if(entry.link[index].rel==="alternate")database.push(entry.link[index].href)})})}catch(e){}}else{try{json.items.forEach(function(element,index){database.push(element.url)})}catch(e){}
nextPageToken=json.nextPageToken}
urlSearch(window.location.pathname,database);if(urlTotal&gt;150){fetchIndex+=150;urlTotal-=150;fetchData(postsOrPages[feedPriority],fetchIndex)}else if(nextPageToken){fetchData(postsOrPages[feedPriority])}else if(secondRequest){nextPageToken=undefined;urlTotal=0;fetchIndex=1;secondRequest=!1;if(feedPriority===0){feedPriority=1;fetchData("posts",1)}else if(feedPriority===1){feedPriority=0;fetchData("pages",1)}}}
function bloggerJS(priority){if(priority)feedPriority=priority;urlManager()}
bloggerJS()
&lt;/script&gt;
</code></pre>
<h3 id="参数设置">参数设置</h3>

<table>
<thead>
<tr>
<th>参数</th>
<th>默认值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>postsDatePrefix</td>
<td>false</td>
<td>为 true 时，允许博文的 URL 中的日期</td>
</tr>
<tr>
<td>accessOnly</td>
<td>false</td>
<td>为 true 时，可以正常访问去除日期的网址，否则显示 404 页面</td>
</tr>
<tr>
<td>useApiV3</td>
<td>false</td>
<td>使用 Blogger API v3</td>
</tr>
<tr>
<td>apiKey</td>
<td>-</td>
<td>Blogger API v3 key，需要申请</td>
</tr>
</tbody>
</table>作者表示，当博客的内容比较多的时候，建议使用 Blogger v3 API，因为 v3 的性能和速度方面较 v2 要高得多。
其实，文章的链接还是带有日期的，只是我们在浏览器地址栏看到的链接没有日期罢了。
<h3 id="参考">参考</h3>
<hr class="footnotes-sep">
<section class="footnotes">
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><a href="https://www.youtube.com/watch?v=3nMNdP_aQgI">How to remove date from blogger post url | Blogger permalink without date</a> <a href="#fnref1" class="footnote-backref">↩︎</a>
</li>
<li id="fn2" class="footnote-item"><a href="https://github.com/jokenox/bloggerjs">jokenox/bloggerjs: Script para modificar el formato de las URL en un blog de Blogger.</a>) <a href="#fnref2" class="footnote-backref">↩︎</a>
</li>
</ol>
</section>

在谷歌 Blogger 交流群里有一位博友提出这个问题：如何将 Blogger 文章链接的 /Year/Month/ 给删除掉？就像是 Wordpress、Typecho 等博客程序一样。我使用英文搜索关键词后，发现国外也有人有同样的需求。从 Blogger 官方论坛人员的回复中可以知道：Blogger 文章链接一经发布，便不可修改，且在 Blogger 后台设置中也没有删去链接中日期时间的选项。接着，我在 Youtube 上看到一个印度小哥1说可以实现这个功能。我硬着头皮听了几分钟的印度英语（应该是吧），发现他是用 Javascript 方法来解决这个问题的。从小哥给出的代码中，我得到了该源码的 Github 地址2。它的作者是墨西哥人，这就是互联网的魅力吧，让素不相识的人跨越国界产生联系。代码的实现效果如下：如何使用？你需要在你的 Blogger 主题模板的 <head> 标签后面添加如下代码即可。<script type="text/javascript">// BloggerJS v0.4.0// Licensed under the MIT License// Copyright (c) 2017-2018 Kenny Cruz// github.com/jokenox// Configurationvar config ={ postsDatePrefix:false, accessOnly:false, useApiV3:false, apiKey:"YOUR-API-KEY-HERE"}var postsOrPages=["pages","posts"],blogId="<data:blog.blogId/>",urlTotal,fetchIndex=1,ampChar="&"[0],secondRequest=!0,feedPriority=0,nextPageToken;functionurlVal(){var url=window.location.pathname;var length=url.length;var urlEnd=url.substr…

发表评论

继续阅读

搜索此博客

如风蒹葭

博文

我的书籍排版初体验

使用 Javascript 删除 Blogger 博文页面链接的日期时间

博文

我的书籍排版初体验

使用 Javascript 删除 Blogger 博文 页面链接的日期时间

使用 Javascript 删除 Blogger 博文页面链接的日期时间