2010年6月2日 星期三

有趣的像素反選-使用Photoshop

px010011
這效果是早期在網路上流傳的像素製作手法,可以把兩張影像放在同一張,等使用者框選後會呈現另外一張影像的特效,不過這個方式只適用於網頁檔案。
主要的原理是網頁影像框選後,會以偶數的方式選擇該影像的像素點,還蠻有趣的可以玩看看。順便也可以看一下在Photoshop CS4鏤空的圖樣可支援剪裁遮色片,這可以看一下效果,因為Photoshop 常常在改版的時候會把一些有的沒的作一些小調動,常常會有一些小功能或是設定,到了下一版就不支援或者是把功能直接設限~真的很無言。

2010年6月1日 星期二

圓形的構成-使用Illustrator

這個範例是使用Illustrator 製作圓形的構成,製作的過程中使用三角型為骨架,透過建立圓形的方式可以產生不錯的視覺效果。興趣的朋友可以試玩看看喔!

製作網頁背景圖-使用Photoshop

ps40034 每次常常會有學生會在上Photoshop的時候會問,如何把圖放到Dreamweaver,反之上Dreamweaver的時候,同樣的問題會發生@@”....我認為這很正常.
所以透過簡單的方式說明要如何從Photoshop製作背景圖,完成後匯出到Dreamweaver,所以如果你會Photoshop、Dreamweaver也可以參考看看喔!


2010年5月24日 星期一

日本家徽製作-使用Illustrator CS4

clip_image002

太極圖-使用Illustrator CS4

clip_image002使用Illustrator CS4 製作太極

2010年5月22日 星期六

Illustrator 神奇色彩換裝術-超好用

1.開啟 Kuler 也可以直接選擇色票以後,在下方選擇「將選取的主題新增自色票」。
as30008

2010年5月19日 星期三

2010年5月18日 星期二

Google 簡易神奇站內搜尋術

想要搜尋某個網站的內容嗎?如果你要瀏覽的網站沒有提供站內搜尋的功能,那麼可以試試 Google 站內搜尋的特異功能,協助我們尋找某個網站內的重要資訊。
方式:關鍵字 site:www.yourwebsite.com.tw

  
操作步驟
  1. 首先請先進入 Google 首頁 http://www.google.com.tw/
  2. 在搜尋欄位中輸入 "flash site:steven-linkit.blogspot.com" ,輸入時請去掉""引號。
  3. 按一下搜尋按鈕,Google 就會列出指定網址的站內關鍵字,並且把結果全部列出。

使用Office 2007 EXCEL 轉換XML

1.首先必須要先在Dreamweaver中建立一個XML雛形的架構,至少要有三筆資料。

2.檔案儲存後直接到EXCEL 軟體。

3.首先到選單中選擇﹝EXCEL 選項﹞開啟選項視窗。

4.在常用欄位中勾選「在功能區顯示開發人員索引標籤」選項,完成後按下確定。

5.此時開發人員選項就會出現,在儲存欄位中選擇左上角的空白欄位,如下圖。

6.選擇「匯入」選項,並選擇剛才儲存的XML檔案。

7.在對話框中按下確定。

8.在匯入資料對話框中按下確定。

9.匯入XML資料後就可以開始在下方輸入需要的內容與資料。

10.資料輸入完成後,在開發人員選取中選擇「匯出」。

11.並將需要匯出的檔案命名。

12.檔案匯出後,原來的XML就會增加剛才在EXCEL中新增的項目了。

HTML 超連結語法

若要使用HTML製作製作超連結

1.例如聯結的網址是:
http://steven-linkit.blogspot.com/2010/05/flash.html

2.HTML 語法說明如下:
<a href="需要連結的網址">連結關於我</a>

3.那麼HTML的設定語法入下:
<a href="http://steven-linkit.blogspot.com/2010/05/flash.html">連結關於我</a>

這樣就可以設定超連結囉

網路貼圖

在網拍中如何抓取別的網站的圖片呢?其實很簡單。指下輸入下列的 HTML 標籤就可以貼圖。
說明:
<img alt="這是我測試的圖片" src="圖片的URL位置" />

實際例子:
<img alt="這是我測試的圖片" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw6mwkGbscgEIL29J-caLOSmySAJGm-6Uo2pwIqZh95F-JLOwR72M_lNexYSLteQQMxoII9Zm1np_Yfi_OCJziB__SbM4sQZOwWctPJIssKYylzxZD2b9MOXPMZaOqbhodScZgiohyphenhyphenoTA/s1600-h/%E9%AD%B7%E9%AD%9A.jpg" />

選擇以下的圖,按下右鍵選擇內容,就可以看到"圖片的URL位置"。
這是我測試的圖片

認識Flash 的元件

Flash 元件類別說明
若要在Flash中製作移動補間動畫一定要先定義元件的類型,Flash中的類型可以分為三種,分別為影片片段、按鈕、圖像,這三種類型都是可以在Flash中建立移動補間動畫的元件。

圖像 Graphic
Flash的類型都會有各自的特性與在舞台中需要扮演的角色,在舞台中最基本的元件就屬圖像(Graphic)莫屬,圖像屬於最基本的動畫元件,元件中所包含的影格 可以是單格的影格,也可以是多格的影格,但是必須要考量到的是圖像內的動畫影格數與主場景是同步的,也就是說圖像中如果有3格影格,那個放置到主場景中的影格也必須是3格影格才能瀏覽到全部的動畫效果。

按鈕 Button
按鈕元件屬於互動式的元件,元件中所含的影格數只有4格,分別為一般(UP)、滑入(Over)、按下(Down)、感應區(Hit),Flash電影發佈後會依照使用者的滑鼠事件產生不同的影像效果。

影片片段 Movie Clip
影片片段在Flash中屬於最高級的類別元件,影片片段最基本的功能可以使用於重複播放的元件,若是用於互動元件那麼可以命名實體名稱,並且與ActionScript搭配使用,除此之外Movie Clip也可以透過ActionScript的控制當作按鈕使用,並不需要任何的轉換,只需要命名實體名稱並透過按鈕事件下ActionScript語法即可。

版面配置

若要談到網頁版面配置,就必須從像素(Pixel)談起,電腦螢幕的解析度計算單位就是以像素(Pixel)為單位,也就是說螢幕若為1024 X 768,那麼螢幕的寬度就會有1024個像素、高度就會有768個像素,網頁影像格式的解析度預設值都設定為72 像素/英寸。
備註:

 以影像的品質而言,像素所代表的是影像的解析度,單位面積內的像素越多,代表影像解析度越高,所顯示的圖像就會越清楚。

 
但是本單元只針對網頁的螢幕顯示,並不針對平面的影像解析度多作介紹,為避免混淆特此聲明。

網頁排版
網頁排版技巧可以先以欄位的分配方式安排版面,版面可以分為雙欄、三欄、四欄、五欄等設計,版面的安排必須依照實際的螢幕使用族群作一定的考量,LCD寬螢幕的使用比例越來越高,網頁的版面配置上,也必須有寬螢幕使用者的考量。

 
圖說:版面以欄分割
圖說:版面以列分割

 
 
常見的網頁版面格式
  1. L版形
  2. 門聯版形
  3. 橫幅版形
一開始版面的安排上,可以先使用五乘四的配置比例開始安排,當然這只是一開始的建議做法,並非限制設計師規劃的方式,
圖說:門聯式版型
閱讀動線的考量
目前因為LCD寬螢幕的尺寸,未來會慢慢的影響到網頁版型的設計方向,但是使用者閱讀的方式並不會因此而有太大的改變,首先有2個問題必須要考量。
  1. 閱讀的動線問題
    目前使用者習慣用滑鼠滾輪向下捲動閱讀文章, 橫式文章閱讀時都是有左至右,由上而下以英文字母Z字的閱讀動線。
  2. 橫式文字單行字數須考量
    版面橫式字數不宜太長,會造成長篇文章閱讀上的不便, 單行字數太長,會造成閱讀者閱讀上的不便,換行閱讀時會產生混淆的情況。
因此筆者整合版型與閱讀動線的問題,來看看常見的版型設計,那麼我們就會更清楚知道版型的考量是多麼重要的。

  
以上的介紹是針對市場版型的現況做統計,網頁設計與技術不斷的日新月異,筆者無法將版型設計以狹隘的方式作規範,因此本分類僅提供讀者們參考與練習,如果你目前還是初學者,那麼可以先參考版型的分類,如果你已經是進階的使用者,透過這幾種的版型可以讓你有參考的依據,未來還需要各位的開發與創新,才能不斷的創造更多的視覺效果。

 

2010年5月17日 星期一

強力類別套件-不用學超難的ActionScript 3.0 也可以做出效果

嗨!大家好。最近我有一個計畫,想要把 Flash Action Script 3.0幾個常用的動態效果製作成一個Class類別檔,目前為第一個版本內容有10個左右的效果,都是製作互動網站常會用到的特效,可以提供給在學術上有需要的人。

使用者只要在作幾個簡單的設定,就可以在Flash電影上做出互動,但是前提是必須要有基礎的Flash 與 Action Script的概念,此類別檔將會不定時更新。

目前的名稱與其他細節我還在計畫中,很希望各位朋友能提供較好的名稱。

2010年3月4日 星期四

一起減碳做環保.設定電腦自動關機自己來

愛地球減碳一起來,設定固定時間關電腦
無病毒的自動關機程式,自己寫,不用擔心入侵跟木馬
首先我們必須設定關機程式與取消關機程式,然後加上排定工作,
就可以輕鬆完成關機的批次檔
適用對象:
辦公司常常有人忘了關電腦,
常常陪小孩忘了關電腦 (我偶爾陪到睡著),或是常常電腦開著,
看電視睡著都可以使用這個方式關機。
本方式適用Windows Xp ,Win 7 還沒試,簡易設定固定每天關機時間,簡單輕鬆GO!

----------------------以下是記事本製作方式------------------------------
使用方式,首先先開啟 記事本

在記事本中加入下列的文字:
cd..

c:

shutdown /s

執行存檔,將檔案儲存為shutdown.bat 存檔類型為所有檔案。

----------------------以下是排定工作設定方式------------------------------

接下來到 開始 > 所有程式 > 附屬應用程式 > 系統工具 > 排定工作

1.按下瀏覽按鈕,選擇已經儲存的shutdown.bat
2.日期選擇每日 → 然後設定你需要每日關機時間
3.再使用者名稱中輸入 NT AUTHORITY\SYSTEM
4.然後設定密碼並再次確認密碼 (不設定密碼也行)
5.設定完成後就可以到排定工作內看到一個 shutdown的排定工作了

P.S. 如果需要有一個取消自動關機的機制,可以再寫一個批次檔

----------------------以下是記事本製作取消關機方式------------------------------
開啟記事本

cd..

c:

shutdown /a

儲存為 取消關機.bat 就可以了

 ---------------------------------------------------------------------------------------
 
可參考的相關網站

http://www.fl365.com/gb/wz/zhaishow.asp?id=9544
http://blog.3cbank.com/?p=1698


後記:事實上電腦的耗電量雖然不大,但是積少成多的耗電量也是一筆錢
如果你常常半夜起來關電腦,或許可以使用這個方式試看看

當然也有程式可以完成這樣工作,但是比起自己寫的批次檔 ( 如果沒有寫錯的話 ),
我相信自己應該會安心許多。

如果要執行批次檔,只要在批次檔上按下左鍵雙響,就可以直接執行。

2010年2月25日 星期四

這些花枝朋友們

這作品是先用鉛筆慢慢構圖,再利用沾水筆製作出來的作品,最後經由手機拍攝,經由Photoshop 與 Illustrator 編輯出來的成品,說真的,現在已經畫不出這樣的作品,除了時間不夠之外手繪與心境退色使然,但畢竟是十年多以前的作品,現在老大不小了,透過數位化發表一下童趣的作品囉!
創作意涵:朋友在一起本來就是閒聊話家常,利用花枝有趣的眼神畫出逗趣的表情,為什麼要用花枝呢?因為如果把花枝變成狐狸跟狗的話,拿不就變成狐群狗黨了。

2010年2月6日 星期六

使用 Illustrator 製作的操作說明

利用 Illustrator 可以製作光碟操作的說明圖示,這是很常見的插畫圖示,不過前提是必須要知道如何把光碟機與手畫出來才行。

2010年2月5日 星期五

愛心行銷廣告企業識別-簡案

利用小寫的英文字母a設計出發芽的豆苗製作出彩色與黑色的商標。

在頁面中規範文字與標誌的排列方式。

事務用品-規範名片正反面設計。

事務用品-規範公司形象光碟圓標與封套設計。