顯示具有 美工繪圖 標籤的文章。 顯示所有文章
顯示具有 美工繪圖 標籤的文章。 顯示所有文章

2013年12月25日 星期三

什麼是響應式設計?


拜行動裝置上網普及,因此目前 Responsive Web Design 響應式設計 這個 Web 設計方式很熱門,而要做到這個設計,必須要先認識CSS3 Media Queries,這個可以讓你根據裝置或瀏覽器的長寬不同,而可以有不同的CSS呈現,比方,當夠寬的時候,會呈現三個Column(不是真的欄,是排版的欄)。縮小的時候,可能剩下兩個或甚至一個,而原本有橫向的多個選項,也可能被合併成一個按鈕或LIST,點了才會展開,......等等


所以,什麼是響應式設計呢?就是會彈性的根據你裝置的尺寸不同,呈現不同的外觀,相同的內容,並讓使用者在最適當的、最少需要用手指放大滑動的一種設計概念。

2013年9月18日 星期三

$(function() 是甚麼意思?


之前一直看不懂$(function() ,所以很多JQuery UI也都沒有在用,現在終於瞭解了,$(function() 等同於$(document).ready()


$(function() 
{
    $( "#datepicker" ).datepicker();
});

等同於
$(document).ready(function() 
{
    $( "#datepicker" ).datepicker();
});

也就是網頁好了之後,立刻執行的Function。

2013年8月9日 星期五

顏色的基礎知識

顏色的基礎知識

常用Photoshop的人應該都對於一些色彩相關用詞不陌生才是,顏色有三個屬性

色相:色彩的外相,比方紅、藍、黃、綠這樣的表現方式。
明度:就是顏色的亮度。
彩度:顏色的鮮豔度,彩度越高越鮮豔。


而色調,就是以明度跟彩度的組合來表示,通常只要掌握度色調的統一,即便用了多色相,也不至於讓顏色混亂不協調。只不過,高彩度的色調使用上要特別謹慎,顏色太重且太多的話,容易失焦。

就像黑白對比強烈一般,利用互補色,經常可以達到很好的視覺效果,而互補色在色表上以16進位來呈現時,恰巧可以發現實用的特性:比方 #00ffff 跟 #ff0000就是視覺對比強烈的互補色,#0080ff跟 #ff8f00也是一對互補色。


在配色上,通常除非是天才,不然,通常會遵照一些範本或規範。通常有主要的基準色(目的鮮明,比方跟水有關的網站,可能會用藍色當基準),以及一些輔助色。

2013年8月7日 星期三

版面設計的基礎知識

版面設計的基礎知識:

網頁是用來呈現資訊的,資訊的量通常不小,要讓來看網頁的人能有好的吸收能力才行,要傳達的資訊有視覺元素與文字元素兩大類,將資訊做好分類、群組之後,藉由底下的技巧,達成良好吸收的目的。

1.      讓關連性高的元素靠在一起。藉由改變形狀、顏色差異、加入區隔線、對齊等等方法來區分各個不同群組。
2.      除非精心設計過,否則不建議使用置中對齊,會造成視覺流程障礙,多半使用靠左對齊為佳。
3.      利用字體大小、影像形狀的大反差,來做出對比,做出強調,引導使用者的視覺
4.      相同的呈現理念,就可以反覆的一致的應用在同樣的元素上,讓使用者習慣並很快的吸收變成經驗,看到這種呈現,就知道會是甚麼類型的資訊。
5.      版面大小有兩種設計:
l   一種是固定寬度設計,內容版面的位置不會因為拉大縮小視窗而改變,但是,當使用者的螢幕(解析度)太大或大小或瀏覽器視窗拉大拉小,會導致周圍的空白太多而顯眼,或者是導致橫向捲軸出現,這兩種狀況都可能讓使用者不愉快。
l   另外一種則是動態寬度設計,會隨著螢幕(解析度)或瀏覽器視窗拉大拉小而改變整個版面寬度,但設計上內容元素如果也是要動態寬度高度才比較適合,但,這會限制某些設計的發揮,因為長寬無法固定,比例也無法固定,某些圖文的比例會失控。
6.      首頁的任務:大多數人都知道,首頁是跟其他內容頁面有絕大的不同,他是使用者第一眼見到的頁面,要強調網站的風格、種類就必須在這邊呈現出明確、鮮明的目的,比方有些網站是以提供大量資訊為目的,就會一次呈現大量的分類資訊,比方Yahoo,而有的是萬分明確的告訴你目的,畫面元素簡單到不行,比方Google,其他比方有企業常用的設計方式,鮮明企業形象的視覺元素,透過導覽列來逐一挑選使用者想看的內容,通常注重在衝擊力的設計。比方ASUS,Acer。
7.      導覽列的任務:導覽列肩負著引導使用者方向的重要功能,所以在可用性的注重上,會高過外觀的設計。導覽列設計上大至有分四種:
l   圖像化項目分類型:圖像化有比較好的視覺效果,但是一旦日後需要增加項目,則可能造成版型設計困難崩壞。
l   文字連結型:通常會在入口網站、購物網站使用,由於每天或經常性的更新內容,所以文字連結來當導覽項目較為容易修改。
l   收納型:就是列出大項目,滑鼠滑過去之後會列出第二層項目的設計方式。對於項目眾多,變動性不高的網頁,很適合這種作法,因為設計耗時。
l   麵包屑分層指引型:這個算是一種輔助的類型,在項目有多層之下,麵包屑指的是網頁上會有地方列出目前所在位置,通常用這種方式來表示:「首頁>產品>主機板」。

8.      版面配置並沒有一定制式的規定,但是,通常有一些常用的型,從「上方導覽型」、到「上方加左方導覽型」、到「三欄式」都是最常見的。也有一些充滿設計感的自由版型,通常越自由,就越考驗著設計師的功力就是了。

2012年4月21日 星期六

個人職場作品

底下是我過去做過的軟體的介面
大部分的美工也是我自己做的,雖然沒有超高水準演出,但是應該有具備基本功







JAVA開發











C#開發






HTML作品


2012年4月11日 星期三

第一張彩色作品-狗狗





第一張彩色作品,感覺好像不是很好耶
沒關係,第一次就太好的話,那就太扯了,應該是「稍微能看」我就要很滿意了

2012年4月3日 星期二

4/3,三張動物素描圖

今天畫三張圖,弄到一點半,(我蠻認真的嘛!XD)
好累喔,呵呵
我才剛開始重新摸回我的繪畫,還畫的不是很好,觸感很不細膩,力道也沒有掌握得很好,目前也只能照著畫,還沒辦法自己構圖。也別提彩色或用電腦畫圖了,過幾天看看有沒有機會吧





2012年4月2日 星期一

美工書本來了






昨天在 PC HOME 24HR 購買的三本書,很快晚上就到貨啦,這三本在圖書館找不到,只能用買的了,還好,不是那麼貴,一本Q版動物,一本Q版人物,一本場景素描。

是的,我又再度開啟了美工繪畫的技能的磨練之途,自從大學畢業之後,好幾年沒有練習了,多練習一個新的技能,希望對工作能更有幫助。

這次除了看了很多介面設計的書籍之外,也看了很多關於素描、透視、表情的書。當然,畫圖這東西不是用看的就好,每天至少要練習,畫個三、五張才行。

當然,程式方面也不會就此荒廢打住,而且我也還有看了一些關於行銷、專案管裡的書籍,這陣子一定要好好充實,加油!