2019年1月30日 星期三
2019年1月29日 星期二
使用 Photoshop 製作 sprite 圖片
想在網站上做動畫的話我們可以使用 css sprite 來製作,不過如果要把圖片接起來還是需要花些時間,要製作 sprite 圖片的話可以考慮找一些線上的產生器,這邊則是介紹一下使用 photoshop 來幫我們產生。
要製作的話首先可以到 github 下載這個 HTML5-Photoshop-Sprite-Sheet-Creator 別人寫好的程式,下載解壓縮後把 WM-Sprite-Sheet-Creator.jsx 這隻檔案放到 photoshop 的 \Presets\Scripts\ 資料夾內,再重新開啟 photoshop 就可以執行了。
安裝好後首先將圖片透過 檔案>指令碼>將檔案載入堆疊 載入 photoshop

接著選擇圖片

載入之後

接這再從 檔案>指令碼 選擇 Create Sprite Sheet from Layers...

再按確認後就可以幫我們把圖片併成一張 sprite 圖了

Read more
要製作的話首先可以到 github 下載這個 HTML5-Photoshop-Sprite-Sheet-Creator 別人寫好的程式,下載解壓縮後把 WM-Sprite-Sheet-Creator.jsx 這隻檔案放到 photoshop 的 \Presets\Scripts\ 資料夾內,再重新開啟 photoshop 就可以執行了。
安裝好後首先將圖片透過 檔案>指令碼>將檔案載入堆疊 載入 photoshop

接著選擇圖片

載入之後

接這再從 檔案>指令碼 選擇 Create Sprite Sheet from Layers...

再按確認後就可以幫我們把圖片併成一張 sprite 圖了

2019年1月28日 星期一
2019年1月24日 星期四
2019年1月23日 星期三
2019年1月20日 星期日
[Vue.js] 日期與時間選擇 Component
因為想把日期跟時間的選擇器整在一起做的一個 component,預設值的部分可以利用 props 傳到 data 內。
Read more
See the Pen
date picker by deathhell (@deathhell)
on CodePen.
2019年1月19日 星期六
2019年1月18日 星期五
2019年1月16日 星期三
鋼彈 NT 觀後感
應該是第一次去電影院看鋼彈,查了一下上一部新作鋼彈電影已經是 27 年前的 F91 了,中間有幾部都是改了一下 ova 或 tv 之後上的,也感謝朋友的票讓我有這難得的機會進電影院看。
看完後隔壁的小朋友說鋼彈超好看,帶他來的媽媽就接著說我看到睡著好無聊,放映的廳小小的但坐得頗滿。
總之就一部賣模型的宣傳影片來說我覺得是成功的,鋼彈就是很粉絲向的作品只是粉絲的購買能力驚人而已,看完後本來對金光閃閃的三號機鳳凰無感也覺得還滿帥的可以入手,只是我大概也是想想要,收這種全鍍金的很麻煩。
覺得他有想總結逆襲夏亞到 UC 這段以精神感應框架為主的故事,也想解釋為什麼後來的 F91 後就沒那麼炫炮的感應砲了,但反正就一些後設吧,看鋼彈就只要劇情有流暢作戰很帥氣就讓人可以買單模型了(?
最後的片尾竟然是前陣子放出的閃光哈薩威的預告,既然閃光哈薩威都要出動畫了拜託也出一下骷髏鋼彈系列啊,漫畫一直畫動畫都沒消息。
2019年1月15日 星期二
2019年1月13日 星期日
2019年1月12日 星期六
2019年1月11日 星期五
2019年1月9日 星期三
2019年1月7日 星期一
[Vue.js] Component 與 model
原本的 v-model
等同於
使用在 component 上
要使 input 可以正常運作,需要
要將 value 特性绑定到一个名叫 value 的 prop 上
在 input 事件被觸發時,將新的值透過字定義的 input 事件拋出
Read more
等同於
使用在 component 上
要使 input 可以正常運作,需要
要將 value 特性绑定到一个名叫 value 的 prop 上
在 input 事件被觸發時,將新的值透過字定義的 input 事件拋出
See the Pen component model by deathhell (@deathhell) on CodePen.
Google Maps 網頁嵌入參數
想要在頁面上嵌入 google maps 的話,可以在網頁上選擇點後再使用分享功能就有可以看到嵌入的碼,不過那個嵌入碼看起來很像亂碼,如果要使用程式產生的話,可以用下面的規則丟入參數就可以了,很方便。
其中各項數值分別為:
Read more
其中各項數值分別為:
- width = 寬度
- height = 高度
- q = 地址或經緯度,如果需要標明可在結尾加上(),於()中輸入表示名稱
- z = 地圖比例大小,可輸入數值為 1-18,值愈大地圖顯示比例愈大
- t = 地圖顯示模式,沒輸入值時為預設地圖;h為衛星圖加路線;p為地形圖
- hl = 地圖語系,語言代碼參考連結
- output=embed 指定Google Map為崁入模式
2019年1月6日 星期日
[Vue.js] Component 運用
可以把 ui 元件組成一個 component,替 component 命名後再設計 template 來使用。
component 可以重複利用
可以設定 props,這樣就可以把變數傳到 ui 裡。
如果我們要把資料給傳到 component 內,可以用 v-bind:item,後面的 item 是我們自訂的,會對應到 component 裡的 props,接著就可以利用 v-for 的迴圈把資料都顯示出來。
使用 $emit 的方式傳入事件名稱,並用 v-on 監聽事件。
也可以把改變的值用 $event 的方式帶入
或是用 method 處理
參考: https://cn.vuejs.org/v2/guide/components.html
Read more
See the Pen vue component by deathhell (@deathhell) on CodePen.
component 可以重複利用
See the Pen component 2 by deathhell (@deathhell) on CodePen.
可以設定 props,這樣就可以把變數傳到 ui 裡。
See the Pen component 3 by deathhell (@deathhell) on CodePen.
如果我們要把資料給傳到 component 內,可以用 v-bind:item,後面的 item 是我們自訂的,會對應到 component 裡的 props,接著就可以利用 v-for 的迴圈把資料都顯示出來。
See the Pen component 3 by deathhell (@deathhell) on CodePen.
使用 $emit 的方式傳入事件名稱,並用 v-on 監聽事件。
See the Pen rovawj by deathhell (@deathhell) on CodePen.
也可以把改變的值用 $event 的方式帶入
或是用 method 處理
methods: { onEnlargeText: function (enlargeAmount) { this.postFontSize += enlargeAmount } }
參考: https://cn.vuejs.org/v2/guide/components.html
2019年1月5日 星期六
2019年1月2日 星期三
2019年1月1日 星期二
[Robot 魂] ストレリチア(鶴望蘭)

ストレリチア(鶴望蘭)是 2017 年 7 月完結的作品《DARLING in the FRANXX》中登場的主人公機,這部當初的製作成員還被冠上了動畫國家隊的稱號,雖然期間話題十足,但最後的結局及收尾卻讓許多人失望而無法成為一部優秀的作品。


訂閱:
文章 (Atom)
文章
-
▼
2019
(403)
-
▼
一月
(51)
- 驚悚的 flash
- CSS 大全
- 學生給的手工餅乾
- 跟學生的打寶團
- ㄇㄉㄈㄎ
- 因為 XR 湊在一起的聚餐
- 使用 Photoshop 製作 sprite 圖片
- 對得上頻率的老朋友
- 幫學生寫推薦函學生送的禮物
- 小智欺騙比雕 20 週年
- 前端與後端
- 乃木坂 46 台灣演唱會
- 三創閃電霹靂車特展
- 10 年的挑戰與超過 20 年的朋友
- 架網站很簡單,聚人很難
- 去講話很難
- 當正妹的感覺
- KAWS 展
- 新手機 iPhone XR
- [Vue.js] 日期與時間選擇 Component
- 義大利設計師 Sitdown Please 大作
- 老大做的大師球燈籠
- 色違死神
- 覺悟
- 10 年挑戰
- 鋼彈 NT 觀後感
- I"s 男主角表情很猥褻
- 周杰倫生日快樂
- 色違跟寶可夢
- 台灣人愛排隊
- [超合金魂 F.A.] GX-82 無敵鋼人泰坦 3(無敵鋼人ダイターン3)
- JK 教你 HTML
- 談判專家
- 111
- 《通往財富自由之路》簡單書摘
- 伸縮自在的愛
- 我的朋友怪人多
- 北投與淡海輕軌
- 館長當發言人
- 學生裡面有高中老師
- [Vue.js] Component 與 model
- Google Maps 網頁嵌入參數
- [Vue.js] Component 運用
- 仰望視角寫真集
- 我會檢討但不會改進
- 去大學講課
- 自有網域
- 寫網頁的基本功
- 2019 新年快樂
- [Robot 魂] ストレリチア(鶴望蘭)
- 歷史的紅色死神
-
▼
一月
(51)

標籤雲
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
360
3D
3D Printer
3D Scanner
3D TV
3DS LL
3ds max
七大創意原則
七武海
九州
九型人格
人生
十大創新法則
三立
三立新聞網
三星
三國傳
千值練
大地盃
大阪
大津
大氣系
小田原
小朋友
小動畫
中央大學
中平商圈
中華職棒
互動設計
公視
天氣娃娃
心情日記
手機
手繪
日文
日本
日本戰國
日本職棒
日劇
月津港
火箭營
仙書紀
令和
北海岸
北海道
北關
可動群雄
台中
台南
台湾狼
台灣
台灣社群排行榜
台灣數位文化協會
台灣選舉地圖
史旺基
平面設計
未來國會
正妹
永平工商
生日
立委
光雕
印刷
名片
地科院
地球村
地圖
地震
好人卡
好軟體
好網站
年誌
成果展
早安
有聲書
江火明
自介
行銷
衣服
似顏繪
初音
完成品
尾牙
我的迷你城市
我要當女一
扭蛋盒玩
扭蛋戰士DASH
扭蛋戰士NEXT
汶萊
沖繩
狂新聞
京都
制服
制服大賞
制服女孩
命理
夜之祭
奈良
姊妹
宜蘭
東大特訓班
東京
武神降臨編
直播
社群日
股票
金流
金庸
侯文詠
勇者
厚生市集
咪醬
哆啦A夢
星座
活力熊
研究所
穿衣指數
紅色死神
美劇
風起雲湧
風雲祭
飛肯
香港
哥吉拉
展覽
座談會
旅行
旅遊
時報周刊
書
書單
栗原洋服店
格言
桃園
桌面寵物
氣象
氣象主播
氣象局
氣象預報
海洋堂
特殊符號
特攝
班服
神戶
神奇寶貝
紙公仔
紙模型
退休光碟
高中職博覽會
高校誌
假面騎士
偉大的航道
動物森友會
動畫
動畫術語
專家審查會議
專題
教學
產生器
設計
部落格
部落格小玩意
陳金鋒
創業
喬巴
媒體報導
減碳雙熊
無名
無障礙
程式
童顏app
絕對領域
萌
萌咩誌
評審
賀卡
超合金魂
超合金魂 F.A.
超級英雄圖譜
超級英熊
超級戰隊
跑馬燈
雲寶
黑襪
奧爾資訊
新聞易數
義大遊樂世界
聖鬥士星矢
資策會
路上觀察
遊記
遊戲
零秒出手
電子看板
電子書
電子報
電腦戰機
電影
預付卡
團體服
壽屋
夢想
慈幼社
漫畫
綠界
網頁
網頁作品
網站工具
網站優化
網路狂人週報
舞台背板
蜜月
酷瞧
颱風
餅乾
魂spec
彈珠台
影片
影音氣象
影集
影像處理
數位時代
樂樂小黃
模型
熱舞
獎金獵人
稻江護家
箱根
膝上襪
衛星雲圖
論壇
遮罩
戰鬥女子學園
戰隊
橋本環奈
機器人
機器人相關
講師
還願
黏土人
瀏覽器
翻譯
藍球教學
轉輪科技
鎌倉
雞排妹
顏文字
羅東
寶貝
籃球
蘋果日報
攝影
蘭友會
鐵啞鈴
魔神英雄傳
魔動王
讀書會
體育用品
ACA
ACE
AddThis
Adobe
Adobe XD
aerender
After Effect
AIR
AJAX
Android
AngularJS
AngularUI
Annual Analysis
ANSI
API
Apple
Apple Watch
AR
AR+
Arduino
array
Arrow
AS 3.0
background
BANDAI
Batman
BB戰士
bbs
blog
blogger
Blogger Touch
board game
bootstrap
Brave合金
browser
C3.js
CANDY醬
canvas
Card sorting
chrome
CI
CM's
cocos2D
CodeIgniter
color
COMPOSITE Ver. Ka
cookie
cosa
cosplay
css
css3
css教學
CW
CWB
D-Arts
D3.js
DC Comics
Death Note
deathhell
Decool
design
desktop
DeTools
Diablo
Discuz
display
dragon
embed
Emmet
EVA
excel
facebook
favicon
fc2
filter
Firebug
firefox
flash
Flex
FlickLinkr
flickr
FQL
fun電
Fun籃球
G Generation
G+
GARNiDELiA
GFF
GIGA合金
GIPHY
git
GleeFB
GleeShare
google
google adsense
Google Analytics
google datastudio
google fonts API
Google Geocoding API
Google Map API
google mapplets
google PageSpeed API
google tool bar
google+1
googlemaps
grid
GTI
GUNDAM
Gundam W
GUNDAM“EX-STANDARD”
Gunpla
GunXSword
hairbook
hairdodo
hairmap
Hami App
HG
HiRM
Homebook
HPX
htaccess
html
html5
iAngel
ichannel
ico
icon
IDEO
IE
III
illustrator
ImageMagick
InDesign
info graphic
instagram
iOS
iphone
Iron Man
ITCD
iTenki
IxD
javascript
JK
jquery
jquery plugin
jQuery UI
js
JSDC
JSON
JSON-LD
Keroro魂
Kobe
Koobii 高校誌
kuso
La new
lazyload
LEGO
less
life style
Line
Linux
localStorage
logo
LucyPop
Mac OS
MAD
mailgun
Maker Fair
Marvel Comics
MegaHouse
meta
Metal Robot 魂
MG
MIC
mit.jobs
MLB
mobile app
mobile web
movie
MSI
MSN小圖
MSN小綠人
msn表情符號
MSN機器人
mssql
MTK
My Weather
MySQL
NBA
NCU
NeoShop
node.js
nokia
NXEDGE STYLE
NXT
ONEPIECE
open data
OpenCart
ovomedia
Pantone
PChome
PDO
persona
photoshop
photoshop教學
php
phpFlickr
Picasa
pintrest
Pixnet
PIXOSTYLE
plurk
pokemon
Pokemon Go
Pokémon-Info
PPT
premiere
PTT
pv3d
PWA
Python
Raspberry Pi
react.js
reCAPTCHA
Restaurant City
RIOBOT
RoboInfo
robot
ROBOT魂
rockman
rockman X
RQ-Star
RWD
S.H.E
S.H.Figuarts
S市集
SCANDAL
scratch
Scss
SDCS
SDX
Semantic UI
SEO
showtenki
simpleXML
SketchUp
slideshow
sliding doors
spotlights
SQL
SQL Server
srw
SRW OG
star wars
Sublime Text
Super Heroes
Super MiniPla
Super Robot超合金
Supergirl
svg
switch
SyntaxHighlighter
TapFighters
TenkiMaps
TibaMe
Titanium
TP合金
TweenMax
twitter
U-Mobile
UCD
UI
UiGathering
Uniform Map
Unity
Usability
UX
video
vimeo
vQmod
Vue.js
WBC
WCF
weather
weather icon
weatherrisk
web
Web Design Theory
WebApp
WebConf
widget
Win7
wingzero
Wordpress
XAMPP
xml
XMLHttpRequest
Xuite
Yahoo API
Yahoo open hack
Yahoo!
Yam
YouTube
ZOIDS
