Kaie's Blog: Design

Showing posts with label Design. Show all posts

[InDesign] 日晷(Sundial)第四期終於出爐了

日晷(ㄍㄨㄟˇ)，英譯: Sundial 至於何謂日晷呢?! 還是煩請參見萬能的 Wikipeida吧!

　　在服替代役的這段期間，協助了我的服勤單位–「行政院國軍退除役官兵輔導委員 – 政風處」所編製的刊物:「日晷第四期」終於告一個段落了，還挺忙挺累人的...呼呼，想說終於可以喘口氣的同時，萬萬沒想到，校稿時不夠仔細，出了個很大的包..檢察官這頭銜打錯了，打成檢「查」官，錯在別的小地方就算了，沒想到剛好錯在這頭人物身上，真是有夠囧rz...總共印了1000本，有三個錯字的地方，於是乎我要貼3000張的貼紙，將錯字訂正，真是TMD夠煩悶的..

　　煩歸煩，但這中間的過程還是強迫我學了不少東西，先前對於印刷排版壓根兒沒有半點概念，對於所使用的InDesign這套Adobe公司所發行的專業設計排版軟體也是頭一次聽過，第一次使用時，發自內心深深地覺得功能也TMD太多了吧，自己一個人亂摸，上網找相關資料，翻書(InDesign CS2 蝴蝶效應，這本蠻棒的...應該是目前公認比較推薦的書)…等到我稍微上手之後，再開始來編日晷雜誌，那可能都快退伍了...囧囧囧！但這是沒能發生的事，科長說最慢最慢9月份就要印刷出來了..屈指一算，大概有三個月的時間編一本150頁左右的刊物，幸好之前有碰過一點Photoshop、Illustrator，Adobe的產品都挺類似的，操作方式差不多，漸漸地擠出點還不算糟的東西。最後終於在科長的緊迫盯人之下，及時趕上八月底送印刷廠 (※謎：以專長申請進這個單位，沒想到程式都沒啥寫到，倒是搞了不少美工設計的東西...OMG，被強迫學了不少阿多比的軟體:Photoshop,Illustrator,InDesign...他們應該申請個學美工計設的人才對呀)

．來貼個「封面+封底+書背」圖，紀念一下吧(PS:這是我個人的最終版，不得不抱怨一下，因為設計這種東西實在是很主觀的說，最後我設計完的稿件，送到科長那，不滿意的地方先改一遍，再往給處長審，又再改了不少地方....改來改去有夠煩的，把很多我原本喜歡的計設都給改掉了...lol，真不知該說什麼，他們覺得不好看，就說要改，我這個小小替代役只能照辦了! 最嘔的，我想應該是內文的字體，原本用美美的MAC電腦預設字型:黑體，後來處長說啥不好看，不易閱讀...一千萬個囧，叫我換成他覺得好看的「細明體(明明就醜不拉機的)」...剎那間五雷轟頂，心都要碎了，好好的東西，就要這樣被玷污了，嗚...我的心血，心想只好LP捏緊，忍一下就過了!)

．擷錄裡頭某一篇文章供大家觀賞，因為是提到我的故鄉(嘉義縣新港鄉) ^_^：榮民林金倉致力交趾陶藝術(PDF電子檔 2MB)

　　順便記錄一下我的心路歷程 XD，就是和編輯雜誌有關的心得以及InDesign使用上的Tips及謎思..囧:

「二南堂法帖」實在是個超級好物呀，很推薦..（若你是編中文雜誌的話），他有很多很棒的書法字體(向量圖形格式，非一般TTF字型)，讓你的作品加不少分唷
※有關送印刷廠注意事項：
Method 1: 直接在InDesign輸出成PDF，且記得點陣圖解析度超過300dpi，且記得把字型匯入PDF中，最後找一家接受PDF格式的印刷廠，一定沒問題。
Method 2:　出EPS把整版平面化不要有字體就可以了...轉外框如果要改會的話會很麻煩。
粗體字的迷思，因為在其它的軟體中，粗體字(Bold)是很見常基本的，但第一次接接觸InDesign的人，大都會覺得，怎麼在字型裡都找不到此功能呀，那麼的基本，不可能沒有吧...嘿嘿，事實上就是沒有(除非你有某個字型變化型態，例如Arial字型，若你同時也有Arial Bold、Arial Black，那麼你就可以直接選擇Bold粗體，否則是沒辦法的，中文字型，幾乎沒看過同時存有較粗、較細的字體，只有英文字型較常見)，他用是另一種變向模擬粗體字方法(來源:奇摩知識)：
　　1. 將要變粗體的字選取起來。
　　2. 把「線條」設為和「填色」相同色系(即字體「外框」色選成和字體相同的色系)，切換的熱鍵為'x'。
　　3. 調整線條的「寬度」為0公釐以上，即可加粗字體
InDesign內建的「Kozuka Gothic Std」日文字型很棒，包含6種粗細：極細、細、標準、中等、粗和極粗，漂亮又好看，因為日文中有很蠻多漢字，所以可以拿來當中文字型用，又有粗體可以選，我覺得比華康的黑體系列美。
從word直接複製貼上InDesign會有「字體鎖定，導致複合字體遺失」的情形出現，通常發生於：因為在word文件中有簡、繁體字共存時，word以unicode來儲存，然後再複製貼到InDesign中便會出狀況。建議先全轉成繁體字之後，再貼到InDesign中就ok了。(來源:OIKOS生活網 -> indesignCS2 裡簡轉繁異字問題...)
何謂出血(一開始覺得很詭異的一個詞，一直搞不太懂，搞印刷排版必懂的Keyword)：因為在印刷的版上印刷不會那麼精準....每次印刷都是大量的令數(紙張計算方式)跟台數(只計算方式)而在裁的時候如果沒有出血線....那麼印後裁出來的東西會可能會上下左右其中一邊畫面沒辦法滿版...所以呢...出血線主要是讓印刷畫面超出那條線...然後在裁的時候就算有一點點的偏差也不會讓印出來的東西做廢
蘋果日報副刊的美編(PTT ID:xFANx)愛用的字體(個人還蠻喜歡水果日報的排版的..^^")：
- 標題粗字的風格：超黑體超明體儷金黑綜藝體W9
- 標題細字的風格：細黑體新特明體
- 標題手寫的風格：行楷體行書體瘦金體龍門石碑
- 適合食物的版：墨字體顏楷體唐風隸
- 適合日本風：宗楷體榜書體
- 引言字/插標字/圖說字/反白內文字：中黑體
- 一般內文字：華康中明體
- 雜誌會用的內文字：中黑體或細黑體
- 雜誌會用的英文字：Century Gothic（搭配中黑體或細黑體）
- xFANx個人愛用的英文字體：Arial, Times New Roman, Century, Century Gothic, Book Antiqua,Franklin Gothic Book, Verdana

．Tags: Adobe all baby Design food InDesign tips

．Comment counts: 2 Comments

[+/-]

[Template] Semi-Transparent Layout in ThisbloG (半透明化模版)

．Tags: all blog css Design template theme

．Comment counts: 21 Comments

[+/-]

[Template] Neo + Kubrick = Neobrick

．Tags: all blog computer Design template

．Comment counts: 2 Comments

[+/-]

[CSS] Magazine Style Drop Cap

來分享一下，我們時常在雜誌常見的一個首字放大（drop cap, dropped capital letter），是很受歡迎的設計元件，用來做為商業通訊、雜誌文章、書籍章節或其它公開文件的開頭…之前看到某個教學，於是也跟著玩了起來囉...底下來看幾個範例吧!參考資料來源： Mandarin Design -> Magazine Style CSS Drop Caps

．Example1:
旅
旅美投手王建民6日對西雅圖水手隊差一點完全比賽，投了7.1局無安打、無人上壘的比賽，鈴木一朗形容王建民「有著冷靜的外表，但內心卻是火熱的。」他說：「我喜歡他。」原本鈴木一朗想在七局上成為打出第1支安打的打者，不過左外野深遠飛球遭到松井秀喜美技接殺。

．Example2:
<span style="border: 1px solid darkkhaki; padding: 3px; background: khaki; margin-right: 6px; margin-top: 5px; float: left; line-height: 55px; font-family:華康POP2體W9,華康POP1體W9,標楷體,times;font-size:50px;color:white;" >鈴
鈴木一朗在6日的比賽中，直到七局上才意識到王建民有可能會締造完全比賽，在該局第一位上場打擊之前，他詢問隊友城島健司：「現在是完全比賽嗎？」城島回答說：「是的。」鈴木一朗便告訴城島，他要擔任打破完全比賽打出第1支安打的打者。

．Example3:
S
Sometimes all we need is a big first letter for a paragraph. No drop cap, just a big cap. It looks best when followed by way too much text. We used a font size of 56px for the first letter. If there is enough text an even bigger first-letter size looks good. The code can be adjusted for a slight overlap by adjusting the letter spacing. The color name chocolate tastes good today. There are more edible color names here.

．Example4:
M
Mike Golby might like the background color firebrick better than gold. Golby changes text colors for emphasis but if we don't specify the color for the text it will default to normal text color for that page. By the way, thanks for the Strunk and White Plumerias Mike. I noticed them when visiting your place to find an example of a color to use.

．Example5:
...
...
要如何有型，由你決定...

※以上Code中的CSS參數請自行客制化吧 >_^

．Tags: all blog computer css Design

．Comment counts: 7 Comments

[+/-]

[CSS] hideFocus Property

．Tags: all computer css Design firefox IE

．Comment counts: 5 Comments

[+/-]

[Blog] A not only Awesome but Lightning Fast Blog

．Tags: AJAX all blog computer Design JSON template

．Comment counts: 0 Comments

[+/-]

[WordPress] Theme : Vistered Little 1.6

．Tags: all blog computer Design theme WordPress

．Comment counts: 4 Comments

[+/-]

[Template] Kubrick style for Blogger beta

由於個人很喜歡Kubrick這個源自於WordPress裡預設的"簡單中又不失美感"的一個版型 ^_^，於是將他移植到Blogger Beta的平台上 ^_^，並且加上了一些個人自認為還還不錯的功能...，只不過對於IE的親和力可能要說聲抱歉了...XD，IE實在很討人厭..囧rz，可能有一些些小bug就是了，但不會有什麼太大的影響!!

．底下為預覽圖：

這裡有示範網站 Demo / Example
以按右鍵->另存新檔的方式下載此 Template 或 Template (二選一)
(※注意事項：請把原先的作好備份，以備不時之需!!套用時，要先把沒用的widget清空，再小心將你原本的widget搬到此新 template，不然到時不見了，你會愈哭無淚的!)

．額外附加功能：

Expandable posts with Peekaboo view(Blogger Beta 摘要/全文切換之"繼續閱讀功能) [Figure]
Peek-A-Boo view of posts in label/archive pages (在Label/Archive頁面加入擴展功能 ) [Figure]
Author comment highlighting and notification (特別標示出，原Blog作者註解，用於和非Blog作者作區別) [Figure]
Comments with profile photos (顯示註解者的個人圖像) [Figure]

若你想換成自己的Banner的話，底下有一個簡單又快速的方法...really Awesome!!

Website: http://redalt.com/Tools/Kubrickr
此Kubrickr就是利用強大的 Flickr 所提供的超大圖庫，然後由裡頭的圖片產生你所想要的Banner，實在是個非常棒的應用!! 真是造福了不少人群..

所以說，你若看煩了Kubrick預設的Banner，或想要多點變化，你可以隨時輕鬆的從Kubrickr產生你所喜歡的 ^_^

若有問題，歡迎隨時留言討論...

[Updated 2006/12/13]
修正背景色的色差，與原始的Kubrick不太一樣，導致用Kubrickr所產生出來的Banner和舊版本的不一樣!! < 感謝 Orion 提供 >

[Updated 2007/07/14] 由於原作者hosting的javascript file(hackosphere.js)空間，已經無法承受愈來愈多人的存取，請繼續看底下code框框中的更新作法

將原本這一行程式碼<script type='text/javascript' src='http://www.anniyalogam.com/widgets/hackosphere.js' /> 
拿掉，置換成底下這一段程式碼
<script type="text/javascript">
function toggleIt(id) {
	post = document.getElementById(id);
	if (post.style.display != 'none') {
		post.style.display = 'none';
	} else {
		post.style.display = '';
	}
}

function showFullPost(id) {
	var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost")
                 spans[i].style.display = 'inline';
             if (spans[i].id == "readmore")
                 spans[i].style.display = 'none';
        }
}

var fade = false;
function showFull(id) {
	var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost") {
                 if (fade) {
                    spans[i].style.background = peekaboo_bgcolor;
                    Effect.Appear(spans[i]);
                } else spans[i].style.display = 'inline';
             }
             if (spans[i].id == "showlink")
                 spans[i].style.display = 'none';
             if (spans[i].id == "hidelink")
                 spans[i].style.display = 'inline';
        }
}

function hideFull(id) {
	var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost") {
                 if (fade) {
                   spans[i].style.background = peekaboo_bgcolor;
                   Effect.Fade(spans[i]);
                 } else spans[i].style.display = 'none';
             }
             if (spans[i].id == "showlink")
                 spans[i].style.display = 'inline';
             if (spans[i].id == "hidelink")
                 spans[i].style.display = 'none';
        }
        post.scrollIntoView(true);
}

function checkFull(id) {
	var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        var found = 0;
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost") {
                 spans[i].style.display = 'none';
                 found = 1;
             }
             if ((spans[i].id == "showlink") &amp;&amp; (found == 0))
                 spans[i].style.display = 'none';
        }
}
</script>