-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathportfolio_project7.html
399 lines (330 loc) · 19.6 KB
/
portfolio_project7.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
<link rel="stylesheet" href="assets\css\w3.css">
<link rel="stylesheet" href="font.css">
<link rel="stylesheet" href="assets\css\3dbutton.css" \>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body, h1, h2, h3, h4, h5, h6 {
font-family: "Lato", sans-serif;
}
.w3-myfont{
font-family: "Lato_TC", normal;
}
body, html {
height: 100%;
color: #777;
line-height: 1.8;
}
/* Create a Parallax Effect */
.bgimg-1, .bgimg-2, .bgimg-3 {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* First image (Logo. Full height) */
.bgimg-1 {
background-image: url("pictures/main_page/main_project_7.png");
min-height: 100%;
/*min-height: 600px;*/
}
/* Second image (Portfolio) */
.bgimg-2 {
background-image: url("pictures/portfolio_sub_page/project_4_6/mchouse0_with_word.png");
min-height: 100%;
}
/* Third image (Contact) */
.bgimg-3 {
background-image: url("pictures/portfolio_sub_page/project_4_6/bin0_with_word.png");
min-height: 100%;
}
.w3-wide {
letter-spacing: 10px;
}
.w3-hover-opacity {
cursor: pointer;
}
/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1600px) {
.bgimg-1, .bgimg-2, .bgimg-3 {
background-attachment: scroll;
min-height: 400px;
}
}
span.mcserver {
font-size: 150%;
}
</style>
<title>【專案七】 第三方Minecraft伺服器 地下鐵站牌 概念圖</title>
<body>
<div class="w3-top">
<div class="w3-bar" id="myNavbar">
<a class="w3-bar-item w3-button w3-hover-black w3-hide-medium w3-hide-large w3-right" href="javascript:void(0);" onClick="toggleFunction()" title="Toggle Navigation Menu">
<i class="fa fa-bars"></i> </a>
<a href="index.html#" class="w3-bar-item w3-button">HOME</a>
<a href="index.html#about" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-user"></i>ABOUT</a>
<a href="index.html#contact" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-envelope"></i> CONTACT</a>
<a href="index.html#duty" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-th"></i> DUTY</a>
<div class="w3-dropdown-hover w3-hide-small">
<button class=" w3-button" title="More">PORTFOLIO <i class="fa fa-caret-down"></i></button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="#" class="w3-bar-item"> Minecraft -- 伺服器營運 (頁面未準備就緒)</th>
<a href="portfolio_project2.html" class="w3-bar-item w3-button"> 畢業作品 -- 影子的內心 </th>
<a href="portfolio_project3.html" class="w3-bar-item w3-button"> Nanaimo -- 回憶重現作品 </th>
<a href="portfolio_project4_6.html" class="w3-bar-item w3-button"> Cities Skyline -- 3D 模組製作</th>
<a href="portfolio_project7.html" class="w3-bar-item w3-button"> Minecraft -- 列車報站 平面設計 </th>
<a href="portfolio_project11.html" class="w3-bar-item w3-button"> 質數 X RPG遊戲</th>
<a href="portfolio_project13.html" class="w3-bar-item"> GGJ 2023 -- The Roots of Our Needs</th>
<a href="portfolio_project14.html" class="w3-bar-item"> GGJ 2024 -- Cat laughter</th>
</div>
</div>
<a href="skill.html" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-user"></i> SKILL</a>
<a href="media_archive.html" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-th"></i> Media Archive</a>
<a href="other_archive.html" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-th"></i> Other Archive</a>
</div>
<!-- Navbar (sit on top) -->
<div id="navDemo" class="w3-bar-block w3-white w3-hide w3-hide-large w3-hide-medium"> <a href="main.html#about" class="w3-bar-item w3-button" onClick="toggleFunction()">ABOUT</a> <a href="#skill" class="w3-bar-item w3-button" onClick="toggleFunction()">Skill</a> <a href="portfolio_main.html" class="w3-bar-item w3-button" onClick="toggleFunction()">PORTFOLIO</a> <a href="media_archive.html" class="w3-bar-item w3-button" onClick="toggleFunction()">Media Archive</a> <a href="other_archive.html" class="w3-bar-item w3-button" onClick="toggleFunction()">Other Archive</a> <a href="main.html#contact" class="w3-bar-item w3-button" onClick="toggleFunction()">CONTACT</a> </div>
</div>
<!-- Navbar on small screens -->
<div class="bgimg-1 w3-display-container w3-opacity-min" id="home">
<!--<div class="w3-display-middle" style="white-space:nowrap;"> <span class="w3-center w3-padding-large w3-black w3-xlarge w3-animate-opacity w3-myfont">專案四, 六 : Cities Skyline <span class="w3-hide-small">三維建築建模</span></div>-->
</div>
<!-- Logo Text -->
<!-- Container (About Section) -->
<div class="w3-content w3-container w3-padding-64 w3-myfont" id="about">
<h3 class="w3-center w3-myfont">專案七 : 第三方Minecraft伺服器 地下鐵站牌 概念圖</h3>
<p class="w3-center w3-myfont">Project VI -- Concept Art of Metro (Underground) Nodes Signs for
3rd-Party Minecraft Server</p>
<p class="w3-center w3-myfont">(模仿日本JR)</p>
<br>
<h4 class="w3-center w3-myfont">【本作目的/目標/創作原意】 (Aim / Perspective / Create intention)</h4>
<br>
<h5 class=" w3-myfont"> 專案一提及到的伺服營運時，有玩家及實況主打算在伺服中建設鐵路。他們已經建好車站，但缺乏了站名指示。於是就設計第一代的站牌。</h5>
<br>
<h5 class=" w3-myfont"> 首代設計較為簡樸，較貼近效率風格。當時另外一個實況主也欣賞筆者此舉動，舉薦了本人去他們的伺服。為他們以按照日本JR作藍本為前提，設計一套全新回播式動畫站牌圖片。</h5>
<br>
<h5 class=" w3-myfont"> 如是者，我就用了6小時製作這一套，能令他們滿意的圖片集。雖然他們伺服器與我相同，並不是24小時開放，更甚開放時間比我更短。</h5>
<br>
<h5 class=" w3-myfont">我只收取伺服的進入權及會席,此外並沒有收取任何報酬。但我將本一專案歸案納入筆者的「附屬」作品集中,當作另一形式對遊戲及設計界別的「貢獻」。這也是專案七製作的原動力及初衷。</h5>
<br>
<img src="pictures\portfolio_sub_page\project_7\project7_train.png" class="w3-round w3-image" alt="Photo of draft1" width="100%"height="100%"> </div>
<br>
<div class="w3-center">
<h4 class="w3-center w3-myfont">【作品 總覽文案】 (Documentation)</h4><br>
<a href="https://drive.google.com/file/d/1VagTCIQxodZTdfFg0F4nPLGYLFF9NHD1/view?usp=sharing" class="w3-center buttonstyle_two"><i class="fa fa-arrow-right w3-margin-right"></i>Go 前往</a>
<br><br>
<h4 class="w3-center w3-myfont">【使用技能 / 軟件】(Used skill sectors)</h4>
<h5 class="w3-center w3-myfont"> ● Adobe Photoshop </h5>
<h5 class="w3-center w3-myfont"> ● Adobe Illustrator </h5>
<h5 class="w3-center w3-myfont"> ● Adobe Adobe Premeir Pro </h5>
</div>
</div>
<br>
</div>
</div>
<br>
<hr>
<div class="w3-row">
<div class="w3-col m6 w3-center w3-padding-large">
<p><b><i class="fa fa-user w3-margin-right"></i>專案七原本預想圖 (Project Concept Art)</b></p>
<br>
<img src="pictures\portfolio_sub_page\project_7_conceptual_intro_pic\project7_draft1.png" class="w3-round w3-image w3-opacity w3-hover-opacity-off" alt="Photo of draft1" width="80%"height="100%" onClick="onClick(this)"> </div>
<!-- Hide this text on small devices -->
<div class="w3-col m6 w3-hide-small w3-padding-large">
<h4 class=" w3-myfont">【設計特色/賣點解說】</h4>
<h5 class=" w3-myfont"> ● 另外一個實況主要求以日本 JR 為前題藍本,及以香港鐵路顏色為主調設計出來。</h5>
<h5 class=" w3-myfont"> ● 所有圖均會顯示現時時間日期、行走路線及方向、行走狀態等站務資訊。</h5>
<h5 class=" w3-myfont"> ● A 部為全路線圖;B 部則為現時前往的車站及將到的終站方向。</h5>
<h5 class=" w3-myfont"> ● C 部分為到達可轉乘的車站,D 部即相反。</h5>
<br>
</div>
</div>
<div class="w3-row">
<hr>
<!-- Hide this text on small devices -->
<h4 class="w3-center w3-myfont">非轉乘站 (Non-Interchange Nodes)</h4>
<hr>
<div class="w3-row">
<div class="w3-col s4 w3-hide-small w3-padding-large">
<h4 class=" w3-center w3-myfont"> <b> 「全線地圖」</b></h4>
<img src="pictures\portfolio_sub_page\project_7\kamsheungroad yellow_map.png" onclick="onClick(this)" class="w3-round w3-image w3-opacity w3-hover-opacity-off" alt="「集卡、卡片現化」(其一例子)" width="600" height="500">
<br>
<h5 class=" w3-myfont "> ● 顯示整條路線及方向、時間。</h5>
<h5 class=" w3-myfont "> ● 黃色、紅色、灰色分別代表，正在前往的車站、將會前往的車站及已遍歷的車站。</h5>
<h5 class=" w3-myfont"> ● This diagram shows up whole route map, time and direction.</h5>
<h5 class=" w3-myfont"> ● There are 3 colors in the diagram, they represent : Yellow, next nodes. Red, the remaining nodes. Grey, visited nodes.</h5>
</div>
<div class="w3-col s4 w3-hide-small w3-padding-large">
<h4 class="w3-center w3-myfont"> <b> 「略版地圖」 </b></h4>
<img src="pictures\portfolio_sub_page\project_7\kamsheungroad yellow.png" onclick="onClick(this)" class="w3-round w3-image w3-opacity w3-hover-opacity-off" alt="「集卡冊」(其一例子)" width="600" height="500">
<br> <h5 class=" w3-myfont">
<h5 class=" w3-myfont"> ● 只顯示剛剛駛離、正在前往、正在前往再後一站,以及終點站的名稱、時間及其行駛方向。 </h5>
<h5 class=" w3-myfont"> ● This diagram only shows upbriefing information about the current route, time, and direction.</h5>
<h5 class=" w3-myfont"> ● Moreover, it shows previous,
next, after next, and terminal
node(s).</h5>
</div>
<div class="w3-col s4 w3-hide-small w3-padding-large">
<h4 class="w3-center w3-myfont"> <b> 「到達站台圖片」 </b></h4>
<img src="pictures\portfolio_sub_page\project_7\kamsheungroad white.png" onclick="onClick(this)" class="w3-round w3-image w3-opacity w3-hover-opacity-off" alt="「漸進關卡的難度」 (截圖一)" width="600" height="500">
<br>
<h5 class=" w3-myfont"> ● 只顯示到達站台的名稱、時間及路線方向。 </h5>
<h5 class=" w3-myfont"> ● This diagram only shows up current station / node name, time and route continue direction.</h5>
</div>
</div>
</div>
</div>
</div>
<hr>
</div>
<h4 class="w3-center w3-myfont"> 轉乘站 (Interchange Nodes)</h4>
<div class="w3-row">
<div class="w3-col s4 w3-hide-small w3-padding-large">
<h4 class=" w3-center w3-myfont"> <b> 「全線地圖」</b></h4>
<img src="pictures\portfolio_sub_page\project_7\tinshuiwaiyellow_map.png" onclick="onClick(this)" class="w3-round w3-image w3-opacity w3-hover-opacity-off" alt="「集卡、卡片現化」(其一例子)" width="600" height="500">
<br>
<h5 class=" w3-myfont "> ● 顯示整條路線及方向、時間。</h5>
<h5 class=" w3-myfont "> ● 黃色、紅色、灰色分別代表，正在前往的車站、將會前往的車站及已遍歷的車站。</h5>
<h5 class=" w3-myfont"> ● This diagram shows up whole route map, time and direction.</h5>
<h5 class=" w3-myfont"> ● There are 3 colors in the diagram, they represent : Yellow, next nodes. Red, the remaining nodes. Grey, visited nodes.</h5>
</div>
<div class="w3-col s4 w3-hide-small w3-padding-large">
<h4 class="w3-center w3-myfont"> <b> 「略版地圖」 </b></h4>
<img src="pictures\portfolio_sub_page\project_7\tinshuiwai yellow.png" onclick="onClick(this)" class="w3-round w3-image w3-opacity w3-hover-opacity-off" alt="「集卡冊」(其一例子)" width="600" height="500">
<br>
<h5 class=" w3-myfont">
<h5 class=" w3-myfont"> ● 只顯示剛剛駛離、正在前往、正在前往再後一站,以及終點站的名稱、時間及其行駛方向。同時,會顯示可轉乘的路線。 </h5>
<h5 class=" w3-myfont"> ● This diagram only shows up briefing information about the current route, time, and direction. Moreover, it shows previous, next, after next, and terminal node(s). Also, show up the interchangeable route.</h5>
</div>
<div class="w3-col s4 w3-hide-small w3-padding-large">
<h4 class="w3-center w3-myfont"> <b> 「到達站台圖片」 </b></h4>
<img src="pictures\portfolio_sub_page\project_7\tin shui wai white.png" onclick="onClick(this)" class="w3-round w3-image w3-opacity w3-hover-opacity-off" alt="「漸進關卡的難度」 (截圖一)" width="600" height="500">
<br>
<h5 class=" w3-myfont"> ● 顯示到達站台的名稱、時間及路線方向。同時,會顯示可轉乘的路線。 </h5>
<h5 class=" w3-myfont"> ●This diagram shows upcurrent station / node name, time and route continue direction. Also, show up the interchangeable route.</h5>
</div>
<hr>
</div>
<hr>
<div class="w3-row">
<h4 class="w3-center w3-myfont">【專案七 製作方法、完成圖、發行狀態】 </h4><br>
<h4 class="w3-center w3-myfont"> 【製作方法】 </h4>
<div class="w3-row">
<div class="w3-col s4 w3-hide-small w3-padding-large">
<h4 class=" w3-center w3-myfont"> <b> 「向量圖繪製」</b></h4>
<img src="pictures\portfolio_sub_page\project_7\project7_make1.png" onclick="onClick(this)" class="w3-round w3-image w3-opacity w3-hover-opacity-off" alt="「集卡、卡片現化」(其一例子)" width="600" height="300">
<br> <br> <br> <br> <br>
<h5 class=" w3-myfont "> ● 勾畫出列車的向量圖形</h5>
<h5 class=" w3-myfont "> ● 和報站系統內的元素</h5>
</div>
<div class="w3-col s4 w3-hide-small w3-padding-large">
<h4 class="w3-center w3-myfont"> <b> 加上「文字及圖層」使用 </b></h4>
<img src="pictures\portfolio_sub_page\project_7\project7_make2.png" onclick="onClick(this)" class="w3-round w3-image w3-opacity w3-hover-opacity-off" alt="「集卡冊」(其一例子)" width="600" height="300">
<br> <br>
<h5 class=" w3-myfont"> ● 加上站點名稱及行車資訊 </h5>
<h5 class=" w3-myfont"> ● 加入紅、黃相隔的兩種靜態圖 </h尸5>
</div>
<div class="w3-col s4 w3-hide-small w3-padding-large">
<h4 class="w3-center w3-myfont"> <b> 「反覆播放的「動畫 」」 </b></h4>
<img src="pictures\portfolio_sub_page\project_7\project7_make3.png" onclick="onClick(this)" class="w3-round w3-image w3-opacity w3-hover-opacity-off" alt="「漸進關卡的難度」 (截圖一)" width="600" height="300">
<br> <br> <br> <br>
<h5 class=" w3-myfont"> ● 在影片編輯工具反覆調用紅、黃相隔圖片使其閃動 </h5>
</div>
<hr>
</div>
<div class="w3-col m6 w3-center w3-padding-large">
<h4 class=" w3-myfont">【完成品】</h4>
<br>
<iframe width="560" height="315" src="https://www.youtube.com/embed/KWNnBKXlFaQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PL9zygzz0hZanmh92RxQx7-KHFNl_cQGpp" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!-- Hide this text on small devices -->
<div class="w3-col m6 w3-hide-small w3-padding-large">
<h4 class=" w3-myfont">【範例說明】</h4>
<h5 class=" w3-myfont"> ● 在Hmmsim模擬器駕駛</h5>
<h5 class=" w3-myfont"> ● 有關設計在影片右上方顯示</h5>
<br>
</div>
</div>
</div>
<div class="w3-row w3-center w3-dark-grey w3-padding-16">
<div class="w3-third w3-section w3-myfont"> <span class="w3-large">
<br>
前往 圖片 (靜態) 作品示例
<br>
Picture archive
<br>
<br>
<a href="media_archive.html#galleries" class="buttonstyle_two">前往 圖片示例 Go</a>
</div>
<div class="w3-third w3-section w3-myfont"> <span class="w3-xlarge">
【專案七】 <br>
列車報站 概念設計
<div class=" w3-section w3-myfont"> <span class="w3-small">
文案企劃
<br>
Documentation<br>
<br>
<a href="https://drive.google.com/file/d/1VagTCIQxodZTdfFg0F4nPLGYLFF9NHD1/view?usp=sharing" class="buttonstyle_two">前往 文案 Go</a>
</div>
</div>
<div class="w3-third w3-section w3-myfont"> <span class="w3-large">
<br>
前往Youtube 實質作品 示例
<br>
Youtube Video Actual Released Product
<br>
<br>
<a href="https://youtu.be/KWNnBKXlFaQ" class="buttonstyle_two">前往Youtube影片 Go</a>
<!--<a href="#" class="w3-button w3-light-grey"></a>-->
</div>
</div>
<br>
<div class="w3-center">
<a href="#home" class="buttonstyle_two "><i class="fa fa-arrow-up w3-margin-right"></i>To the top</a>
</div>
<br>
<!-- Modal for full size images on click-->
<div id="modal01" class="w3-modal w3-black" onClick="this.style.display='none'"> <span class="w3-button w3-large w3-black w3-display-topright" title="Close Modal Image"><i class="fa fa-remove"></i></span>
<div class="w3-modal-content w3-animate-zoom w3-center w3-transparent w3-padding-64"> <img id="img01" class="w3-image">
<p id="caption" class="w3-opacity w3-large"></p>
</div>
</div>
<footer class="w3-center w3-black w3-padding-64 w3-opacity w3-hover-opacity-off"> <a href="#home" class="w3-button w3-light-grey"><i class="fa fa-arrow-up w3-margin-right"></i>To the top</a>
<div class="w3-xlarge w3-section"> <a href="https://drive.google.com/open?id=1x5gO8Dmfox_wXYIrENMOVmvkefmgbh1B"><i class="fa fa-google w3-hover-opacity" style="font-size:36px";></i></a> <a href="https://www.youtube.com/user/bbbgbg"><i class="fa fa-youtube-play w3-hover-opacity" style="font-size:36px";></i></a> <a href="https://github.com/NelsonLAN"><i class="fa fa-github w3-hover-opacity" style="font-size:36px";></i></a> <a href="https://www.linkedin.com/in/nelsonlan574211143"><i class="fa fa-linkedin w3-hover-opacity" style="font-size:36px";></i></a> </div>
You are visitor<div align="center"><iframe src="https://profile-counter.glitch.me/nelsonlan01/count.svg" height="100" style="border:none;" style="text-align:center;"></iframe></div>
<p> </p>
<p> © 版權屬 Nelson LAN 所有 (2012 - 2023)</p>
<p> © Copyright belong to Nelson, LAN (2012 - 2023) </p>
</footer>
<!-- Footer -->
<script>
// Modal Image Gallery
function onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
var captionText = document.getElementById("caption");
captionText.innerHTML = element.alt;
}
// Change style of navbar on scroll
window.onscroll = function() {myFunction()};
function myFunction() {
var navbar = document.getElementById("myNavbar");
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
navbar.className = "w3-bar" + " w3-card" + " w3-animate-top" + " w3-white";
} else {
navbar.className = navbar.className.replace(" w3-card w3-animate-top w3-white", "");
}
}
// Used to toggle the menu on small screens when clicking on the menu button
function toggleFunction() {
var x = document.getElementById("navDemo");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
</body>
</html></body>
</html>