2013_UI_004

好一陣子沒更新嘍~~
真是不好意思!!最近實在太忙
就先來更新一下最近上課現場畫的案例吧
這個介面因該有iphone的人還滿眼熟的吧!!
就是記事本~~只是我將他原有的介面換掉了~~
^^有興趣學的棒油們~~這星期就要開課嘍~
再來報名一下吧!!

2013_UI_003

很久沒臨摩作品了~~~
最近兩個月真的滿偷懶的呢~最近有空會再慢慢的補上新作
以下是放上iphone的樣子及原稿~~
icon的部份因為有重畫但沒完全照原稿所以細節有點出入就是了
再來就是配色和立體的細部有一些修改
但大多終於原作~~算是一個小練習嘍

原稿

不負責CSS講座~~

嗯最近跑去寫JQ和前端所以有一陣子沒來更新啦~~
都快要長草了…
就來分享一下最近做案子的一些小心得吧~~
都是一些實用但不一定常用的語法啦~
不過如果你也有寫JQ的話就會用的到了

1.首先來分享第一個吧~~
偶而做活動寫JQ寫一寫會發現
如果你的頁面有做load影片的時後
按完link關閉會出現這種討厭的黃色框框
或是你在網頁上面按一下「Tab」它也會跑出來
要怎麼解決咧~~其實只要下一段簡單的CSS
就可以和他說再見啦。

寫法：
body a:focus { outline: none }
偷一下大陸的翻譯a:focus的意思是獲得焦點的鏈接
而outline的意思就白話文（輪廓）的意思啦
整段寫起來就是把連結的焦點的輪廓關掉~
而直接下在body裡面，就可以直接作用在頁面所有的a裡面嘍~
很簡單吧~~但我也是平常沒在用要用才去查的~~

====================
2.再來分享的是Btn的MouseOver
偶而會碰到要做一堆照片的click效果
但如果一口氣做上幾十張每一張又要有點擊效果的時後
加上個透明的效果就很好用啦，不然Over存一張Out又存一張
很累人吧~~

寫法：
.Alpha { opacity: 0.5;}
opacity就是透明度語法啦~~完全不用解釋嘍

====================
3.最後就是常常寫JQ寫一寫滑鼠的手指就不見啦
這時只要到CSS加一下開啟手指的語法就搞定嘍
寫法：
cursor: pointer;
curosr就是指滑鼠啦，後面就是狀態~~有很多可以選的

以上先分享這三個嘍
晚一些構繼續寫


下面這個網站是很棒的大陸網站~
裡頭把語法都翻譯出來了，有需要查字典的朋友可以上去逛逛

( 不錯的大陸網站 )

2013_iCon_005

剛剛有同鞋問Line的背景…於是呼就順手畫一下吧
不過沒有空弄到完全一樣啦~以下是大概步驟

2013_iCon_004

臨摹作又一彈~~這次學的是最下面的那一張開關
但因為…我實在不想把刻紋的地方完全分開畫
所以在正面的刻紋細節上就比較差強人意了~~
不過單純就光線來說~~還算是讓人滿意啦~!
^^希望同學們會喜番嘍…改天真的非常閒的話~
我再把裡面的所有細節刻出來吧~~

2013_iCon_003

呼~~畫了三天多才搞定…
這是最近新畫的稿子~~也是自已今年創作的第一彈~~
因為有想要做成動態~所以在機關和齒輪轉動上面想了比較久
加上之前也沒啥畫這種風格的東西
於是拖拖拉拉的花了三天左右才完成
以下是製作過程的快拍~~有興趣的棒油們可以點下去看看嘍~~

2013_iCon_002

同樣的也是上課時間的案例直接重製~~
把原有的質感再細修一輪加上打光
^^比起原本的真的有好了一些些