-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathFilter-初體驗.html
More file actions
255 lines (189 loc) · 12.8 KB
/
Filter-初體驗.html
File metadata and controls
255 lines (189 loc) · 12.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
<!DOCTYPE html>
<html>
<head>
<!-- [[! Document Settings ]] -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- [[! Page Meta ]] -->
<title>Filter 初體驗</title>
<meta name="description" content="Make Today Better Than Yesterday - Code, Food, Photo and some Geek stuff ..." />
<meta name="HandheldFriendly" content="True" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="/assets/images/favicon.ico" >
<!-- [[! Styles'n'Scripts ]] -->
<link rel="stylesheet" type="text/css" href="/assets/css/screen.css" />
<link rel="stylesheet" type="text/css"
href="//fonts.googleapis.com/css?family=Merriweather:300,700,700italic,300italic|Open+Sans:700,400" />
<link rel="stylesheet" type="text/css" href="/assets/css/syntax.css" />
<!-- [[! Ghost outputs important style and meta data with this tag ]] -->
<link rel="canonical" href="/" />
<meta name="referrer" content="origin" />
<link rel="next" href="/page2/" />
<meta property="og:site_name" content="Make Today Better Than Yesterday" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Make Today Better Than Yesterday" />
<meta property="og:description" content="Code, Food, Photo and some Geek stuff ..." />
<meta property="og:url" content="/" />
<meta property="og:image" content="/assets/images/cover1.jpg" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Make Today Better Than Yesterday" />
<meta name="twitter:description" content="Code, Food, Photo and some Geek stuff ..." />
<meta name="twitter:url" content="/" />
<meta name="twitter:image:src" content="/assets/images/cover1.jpg" />
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Website",
"publisher": "Finding The Way Home",
"url": "/",
"image": "/assets/images/cover1.jpg",
"description": "Code, Food, Photo and some Geek stuff ..."
}
</script>
<meta name="generator" content="Jekyll 3.0.0" />
<link rel="alternate" type="application/rss+xml" title="Make Today Better Than Yesterday" href="/rss.xml" />
</head>
<body class="home-template nav-closed">
<div class="nav">
<h3 class="nav-title">Menu</h3>
<a href="#" class="nav-close">
<span class="hidden">Close</span>
</a>
<ul>
<li class="nav-home " role="presentation"><a href="/">Home</a></li>
<li class="nav-about " role="presentation"><a href="/about">About</a></li>
<li class="nav-photo " role="presentation"><a href="/tag/photo">Photo</a></li>
<li class="nav-food " role="presentation"><a href="/tag/food">Food</a></li>
<li class="nav-geek " role="presentation"><a href="/tag/geek">Geek</a></li>
<li class="nav-code " role="presentation"><a href="/tag/code">Code</a></li>
<li class="nav-author " role="presentation"><a href="/author/CT">Author</a></li>
</ul>
<a class="subscribe-button icon-feed" href="/rss.xml">Subscribe</a>
</div>
<span class="nav-cover"></span>
<div class="site-wrapper">
<!-- [[! Everything else gets inserted here ]] -->
<!-- < default -->
<!-- The comment above "< default" means - insert everything in this file into -->
<!-- the [body] of the default.hbs template, which contains our header/footer. -->
<!-- Everything inside the #post tags pulls data from the post -->
<!-- #post -->
<header class="main-header post-head " style="background-image: url(/assets/images/post_filter.jpg) ">
<nav class="main-nav overlay clearfix">
<a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>
</nav>
</header>
<main class="content" role="main">
<article class="post tag-photo">
<header class="post-header">
<h1 class="post-title">Filter 初體驗</h1>
<section class="post-meta">
<!-- <a href='/'>Ching Tsai</a> -->
<time class="post-date" datetime="2016-03-06">06 Mar 2016</time>
<!-- [[tags prefix=" on "]] -->
on
<a href='/tag/photo'>Photo</a>
</section>
</header>
<section class="post-content">
<p>由於本身就有再攝影，所以希望這個 Blog 的圖片儘量都能用自己拍的照片。我對於拍照期望就是能還原最原始當下的情況，所以以往對於濾鏡的使用都嗤之以鼻，認為自己不會用到。不過在客製這個 Blog 的時候，當我把之前 Template 的預設圖換成自己的圖的時候，就總是覺得哪裡怪怪的，挑來挑去都找不到適合的。後來才發現如過要用來裝飾 Blog 用普通色調的圖片就會現得格格不入。如此想想還是嘗試一下濾鏡。</p>
<p>原本打算用 <strong>MAC 照片</strong> 來調，雖然 <strong>照片</strong> 裡的工具用來修圖已經足以，不過如果要調色系的話卻太陽春且繁瑣。後來上網找了下發現了<a href="https://chrome.google.com/webstore/detail/pixlr-touch-up/jklljiahjgoglchglekebfljnmbaleig?hl=zh-tw">Pixlr Touch Up</a> 這個 <strong>自動桌子</strong> 出品的 <strong>Chrome App</strong> ， 不過這個 App bug 頗多，有機率會當掉，且如果圖太大會有雜線和做旋轉的時候會破圖，所以建議使用前先縮一下圖。不過裡面的濾鏡還算多元，對於我來說免費的 App 能做到這樣我已經很滿足了，以下列幾個自認為套的還不錯的幾張 Before After 的比較圖：</p>
<p><img src="assets/images/filter_asset_001.jpg" alt="fornt_page" title="Front page">
Blog 封面設計上要放上標語，所以就不適合太花俏的背景的顏色，所以我就使用 <code>Unicolor->Joyce</code> 把背景轉成單色系，來托襯標題。
<img src="assets/images/filter_asset_002.jpg" alt="fornt_page">
這張再拍攝的時候，其實是下著雨，不過由於我把快門調到 1/1250 ， 並且我用 <code>Classic->Peter</code> 把色調轉成冷冽，所以看起來頗有下雪的FU。
<img src="assets/images/filter_asset_003.jpg" alt="fornt_page">
這張是在大阪環球影城的霍格華茲拍攝的，原始的圖片看起就只是個陰森森的危樓，不過用 <code>Vintage->Kevin</code> 用誇張的對比，和飽和色使他一瞬間有了奇幻感。
<img src="assets/images/filter_asset_004.jpg" alt="fornt_page">
原本金碧輝煌的鐘面就已經很有架勢了，不過用 <code>Classic->Josh</code> 把色調轉成紅銅色，並加深陰影，也是別有風味。
<img src="assets/images/filter_asset_007.jpg" alt="fornt_page">
這個 <code>Classic->Hagrid</code> 用在食物上真的是犯規阿，可以看到右邊銳化很多，把鴨胸紋理，肉汁以及色澤都突顯出來，並加深不少飽和度，真的讓人胃口大開。</p>
<p>總結一下，我不難理解為什麼濾鏡會這麼受歡迎，有時候即使主題只是地上一株雜草，抑或是曝光調爛了一堆噪點，用個濾鏡東抹西抹一下，看起來是還很文青，真的很方便。不過在嘗試的時候，還是發現有些濾鏡過分調高飽和，或加上一堆暈輝，讓整畫面變得一沱混雜，所以濾鏡真的要慎選。</p>
</section>
<footer class="post-footer">
<!-- Everything inside the #author tags pulls data from the author -->
<!-- #author-->
<figure class="author-image">
<a class="img" href="/author/CT" style="background-image: url(/assets/images/ct.png)"><span class="hidden">'s Picture</span></a>
</figure>
<section class="author">
<h4><a href="/author/CT">Ching Tsai</a></h4>
<p> 每天努力學習的研究攻城獅，略懂平行運算，分散式系統及機器學習，平時偶爾攝影，興趣是看 YouTube 學煮菜。</p>
<div class="author-meta">
<span class="author-location icon-location"> Hsinchu, Taiwan</span>
<span class="author-link icon-link"><a href="http://ChingTsai.github.io/chingtsai.github.io/"> ChingTsai.github.io/chingtsai.github.io/</a></span>
</div>
</section>
<!-- /author -->
<section class="share">
<h4>Share this post</h4>
<a class="icon-twitter" href="http://twitter.com/share?text=Filter 初體驗&url=http://ChingTsai.github.io/chingtsai.github.io/Filter-%E5%88%9D%E9%AB%94%E9%A9%97"
onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;">
<span class="hidden">Twitter</span>
</a>
<a class="icon-facebook" href="https://www.facebook.com/sharer/sharer.php?u=http://ChingTsai.github.io/chingtsai.github.io/Filter-%E5%88%9D%E9%AB%94%E9%A9%97"
onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">
<span class="hidden">Facebook</span>
</a>
<a class="icon-google-plus" href="https://plus.google.com/share?url=http://ChingTsai.github.io/chingtsai.github.io/Filter-%E5%88%9D%E9%AB%94%E9%A9%97"
onclick="window.open(this.href, 'google-plus-share', 'width=490,height=530');return false;">
<span class="hidden">Google+</span>
</a>
</section>
<!-- Add Disqus Comments -->
<div id="disqus_thread"></div>
<script type="text/javascript">
//var disqus_developer = 1;
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'maketodaybetterthanyesterday'; // required: replace example with your forum shortname
var disqus_identifier = '/Filter-%E5%88%9D%E9%AB%94%E9%A9%97';
var disqus_url = 'http://ChingTsai.github.io/chingtsai.github.io//Filter-%E5%88%9D%E9%AB%94%E9%A9%97';
//console.log(disqus_shortname+" "+disqus_identifier+" "+disqus_url);
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'https://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
</div>
</footer>
</article>
</main>
<aside class="read-next">
<!-- [[! next_post ]] -->
<a class="read-next-story " style="background-image: url(/assets/images/cover_2.jpg)" href="/LeetCode-46-Permutations">
<section class="post">
<h2>LeetCode 46 : Permutations</h2>
<p>>Given a collection of distinct numbers, return all possible permutations. For example, [1,2,3] have the...</p>
</section>
</a>
<!-- [[! /next_post ]] -->
<!-- [[! prev_post ]] -->
<!-- [[! /prev_post ]] -->
</aside>
<!-- /post -->
<footer class="site-footer clearfix">
<section class="copyright"><a href="/">Make Today Better Than Yesterday</a> © 2016</section>
<section class="poweredby">Proudly published with <a href="https://jekyllrb.com/">Jekyll</a> using <a href="https://github.com/biomadeira/jasper">Jasper</a></section>
</footer>
</div>
<!-- [[! Ghost outputs important scripts and data with this tag ]] -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- [[! The main JavaScript file for Casper ]] -->
<script type="text/javascript" src="/assets/js/jquery.fitvids.js"></script>
<script type="text/javascript" src="/assets/js/index.js"></script>
<!-- Add Google Analytics -->
<!-- Google Analytics Tracking code -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', '', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>