Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
pixel-art-skill-and-knowhow/ドット絵の経歴と知見
Search
Aokashi
January 10, 2025
Design
1
320
pixel-art-skill-and-knowhow/ドット絵の経歴と知見
Aokashi
January 10, 2025
Tweet
Share
More Decks by Aokashi
See All by Aokashi
今時のWebサーバーに追いついていきたい/IWantToGetModernServer
aokashi
0
610
Aokashi Home リニューアルのお知らせ/aokashi_home_renewal
aokashi
0
470
LT4_HugoでWebサイト(ブログ)作り/MakeWebSiteWithHugo
aokashi
0
220
自作パソコンが直らない話/DonotRepairBuildPCTalk
aokashi
0
410
Other Decks in Design
See All in Design
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
370
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
300
越境するデザイン人材:デザイナーが社会資本となる世界へ
goodpatch
1
370
企画を動かすデザイナーの思考!「広げて絞る」アプローチ。
hikidakan
0
220
不確実性の時代にみんなで試したFigma × MCP × Cursor ハンズオン
techtekt
PRO
7
1.3k
【MIXI MEETUP!ー TECH & DESIGN DAYー】【工数98%削減】Xでモンストを話題にせよ!生成AIの活用で日本トレンド6位を獲得した企画の設計&デザイン術
mixi_design
PRO
0
170
Crisp Code inc.|ブランドガイドライン - Brand guidelines
so_kotani
1
240
Vibe Coding デザインシステム
poteboy
3
1.5k
アンエシカルデザインの枠組みの提案 -HCD-Netダークパターン研究会活動報告-
securecat
0
150
OJTで学んだ 「心を動かす」ファシリテーション
saki822
1
170
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
t_east
1
1.6k
体験を守るためのデザイン計測
techtekt
PRO
0
110
Featured
See All Featured
The Invisible Side of Design
smashingmag
302
51k
Docker and Python
trallard
46
3.7k
The Power of CSS Pseudo Elements
geoffreycrofte
80
6.1k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Keith and Marios Guide to Fast Websites
keithpitt
413
23k
Statistics for Hackers
jakevdp
799
230k
Making Projects Easy
brettharned
120
6.5k
Fireside Chat
paigeccino
41
3.7k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
1k
The Straight Up "How To Draw Better" Workshop
denniskardys
239
140k
Build your cross-platform service in a week with App Engine
jlugia
234
18k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Transcript
ドット絵の経歴と知見 2025/1/11 都電LT #0 Aokashi
経緯 ほとんど初対面 しかも LTをするのは7年ぶり 2
経緯 自分の長ーく取り組んだ分野を LTにするのはどうかね 3
@aokashi について • 普段の仕事はフロントエンドエンジニ ア ◦ ReactとReduxとTypeScriptを頭抱えな がら書いてる • 趣味の仕事はWWAゲーム制作とそ
の素材制作 • 埼玉県在住 このアイコン 使うのも、もう7年 4
最初に 今回のドット絵制作を 解説するうえで WWAは 避けて通れない 5
WWAとは? 小さい RPGツクール のようなもの 詳しいことはArunekoさんが回 答してくれるはず 6
WWA 魅力 と検索すれば 大体のことは わかる WWAとは? 7
Arunekoさんとの関係 (1) 2015年 WWA Wing 開発の お話で知る (WWA Wingについてはこ こでは省略)
8
Arunekoさんとの関係 (2) 2016年 WWAが20周年 なので薄い本の 執筆に協力 9
Arunekoさんとの関係 (3) 2022年 コンテストの運営をほ とんど任された 現在もコンテストの応募や投票のシス テムでソースレビューはしてもらってる あなたとJAVA 今すぐダウンロー ド
10
ドット絵はじめた理由 2008年・・・ WWAでゲーム作りたい! でも Macだから作成ツール動かせない! 11
ドット絵はじめた理由 12
ドット絵はじめた理由 あっ、でも WWAのアセット(素材)なら 作れるぞ・・・ 13
2008 2008/08/10 更新 ドット絵に適切ではない アンチエイリアス付きフォント 構成が アンバランス 内側が黒いままで透過してない ゲーム画面外枠 14
GIFじゃないと いけないのにPNG
2008 写真編集ツールで無理やり ドット絵描いていたので こうなるのも仕方ない 15
2008 ドット絵制作歴 16年半! やれてるだけ すごい! (と思う) 16
2009 17 とりあえず周りを暗くしとけばOK みたいなノウハウはあった
2008-2009 [WWA素材第1世代] 18
ちなみにこの頃は・・・? 19
2010 念願のWindowsパソコン 導入! WWAが作れるようになった! 20
2010 GIF画像の カラーパレットを 意識した これしか 使わない! WWA作ると付いてくるやつ 21
意識してない 意識している GIF画像に 組み込んで みよう 22
変色 している 色は そのまま 23
2011-2014 [WWA素材第2世代] 24
2015 WWA作ると 付いてくる キャラクターの 作風に寄せた 25
2015 WWA作ると 付いてくる 画像は どこだ? 26
2018 立体感と 光源を意識した RPGツクールMV用なので、作風が異なります 27
2018 立体感とは何か? 比較してみよう! 台車がせり出してアンバランス 上から見下ろしている姿に近い 28
2018 要所要所に テカリと 影を入れる (質感にもよる) 29 テカリ 影 テカリ 影
2018 じゅうたんのような 粗い?布は しっかり模様を描く 30 茶色い模様
2015-2024 [WWA素材第3世代] 31
2015-2024 32 制作に使用する形態ばかりでは 分かりにくい?
2015-2024 33
2024 34 これまで パソコンで マップチップばかり 作ってましたが・・・
2024 タブレットで アイテムや キャラとかを 描くように なった 35
雑に描いて ブラッシュアップ 36
考えていること • 色はちゃんと決める • 光源と影、質感を意識する • とりあえず最初は雑に書いておくと 筆(?)が進む • ゲーム用で使用するのであれば、
規格サイズに頑張って収める 37
https://www.aokashi.net/material/wwa/ 38
どうぞ お確かめください! 39 自分のサイトで
https://www.aokashi.net/portfolio/wwa_material/ 40