Dokumentácia GDesign

Stredná Odborná škola, Tajovského 30, 975 90 Banská Bystrica

DOKUMENTÁCIA:

ONLINE MAGAZÍN O HERNOM DIZAJNE

Konzultant:

Meno a priezvisko:

Dátum predloženia a obhajoby:

Trieda a odbor:

Mgr. Lukáš Sihelský 24. 4. 2012 9-10. 5. 2012

Miesto a dátum publikovania:

V Banskej Bystrici, 9-10. 5. 2012

Miloš Kolčák

IV.C Grafik Digitálnych médií Školský rok:

2011/2012

OBSAH ID.

NÁZOV

0.

Čestné vyhlásenie a predhovor • Čestné vyhlásenie • Predhovor

1.

Zadanie, návrh a spracovanie loga, príklady použiťia a kombinovania • Zadanie • Návrh • Výber • Spracovanie loga • Príklady použita a kombinácie: Postup tvorby • Príklady použita a kombinácie: Viužitie v praxi

2.

Font a výber fontu, typografia • Font • Typografia

3.

Web, návrh webu, webovi dizajn, tvorba webu a kódovanie webu • Web • Návrh webu a webovi dizajn • Tvorba webu a kódovanie webu

4.

Návrh a tvorba časopisu • Návrh • Tvorba

5.

Zdroje

STRANA 3 3 3 4 - 11 4 4 5 6 7-8 9 - 11 12 - 13 12 13 14 - 21 14 15 - 17 18 - 21 22 - 24 22 - 23 24 25

2

ČESTNÉ VYHLÁSENIE A PREDHOVOR Čestné vyhlásenie Čestne prehlasujem, že všetky materiáli ako sú texty, obrázky a iné informácie som vypracoval sám. Zdroje, s ktorých som čerpal sú uvedené v zozname použitej literatúry.

V Banskej Bystrici, dňa 16. Apríla 2012

Miloš Kolčák

Predhovor Túto maturitnú prácu som si vybral kvôli tomu lebo v sebe zahrňuje veľa aspektov, ako je tvorba loga, web dizajnu, samotného webu a tvorba printového média časopisu. Dôvodom výberu bola aj výzva skúsiť niečo nové a rozsiahle pričom by som využil všetky skúsenosti a znalosti, ktoré som nadobudol. Taktiež tu bola možnosť rozšíriť tuto prácu a nakoniec aj získať nejaký ten záujem verejnosti ohľadom vývoja časopisu. Chcel som skúsiť aké to je vytvoriť niečo od úplného základu a budovať na niečom čo je čisto moja práca. Neskôr by som sa chcel podeliť o nadobudnuté skúsenosti a problémy, ktoré počas vývoja naskytli.

Nakoniec o mojom výbere rozhodla aj ta skutočnosť, že všetci si vybrali tú najľahšiu vec a najmenej rozsiahlu a preto som chcel porotu zaujať mojou snahou skúsiť niečo nové, veľké a ukázať že naozaj niečo viem.

Videl som aj možnosť budovať tento projekt po maturite čo by mohlo ovplyvniť môj doterajší rozvoj a pohľad na prácu grafiku.

Týmto predhovorom by som chcel ešte poďakovať môjmu konzultantovi Mgr. Lukášovi Sihelskému, že ma usmernil a dopomohol mi tento projekt úspešne spraviť do konca. Určite by som nechcel zabudnúť na svoj tím Helium Games, ktorý taktiež stáli za mnou a vždy mi vedeli v niečom pomôcť alebo poradiť.

3

1. ZADANIE, NÁVRH A SPRACOVANIE LOGA, PRÍKLADY POUŽIŤIA A KOMBINOVANIA Zadania: Vypracuj a návrhy logo, ktoré bude reprezentovať firmu zaoberajúca herným dizajnom. Navrhni celkoví branding aby bol jednoduchý, použiteľný a pritom moderný. Logo by malo predávať zákazníkovi, že sa jedna o firmu, ktorá sa zaoberá grafikou a dizajnom a pri prvom pohľade si logo zapamätá. Logo by malo byť výrazne, výstižne a pritom by malo predávať čo najviac informácií. Firma bude produkovať online magazín o hernom dizajne a výviji hier a celkovom vnímani hier. Celkoví návrh loga je na tebe.

Pomôcky: • Najlepšie by bolo keby logo bolo v typografickej, textovej podobe • Jednofarebne prevedenie s možnosťou výberu bielej aj čiernej • Z možnosťou skracovania alebo pridávania ďalšieho textu alebo obrazu

Návrh: 1. Herný Grafický Dizajn 2. Herný Dizajn 3. Herný Dizajner 4. Dizajner 5. Grafický Dizajn 6. Grafický Dizajn Hier 7. O hernej Grafike 8. O Grafickom dizajne 9. Magazín herného dizajnu 10. Dizajnérsky magazín 11. Dizajovo-herný magazín 12. Magazín počítačových hier 13. Dizajn počítačových hier 14. Dizajn hier 15. Games Design 16. Graphic Design 17. Graphic Design magazine 18. Games Design magazine

Herný Dizajn Games Design Graphic Design

4

Výber: Z osemnástich definovaných názvov firmy boli po hlasovaní vybrané tri názvy.

Nakoniec z dvoch boli vybrané dve najhlavnejšie názvy. Na prvom mieste je Games Design a na druhom Graphic Design. Tieto názvy boli vybrane preto lebo sú použiteľné aj v zahraničí. Firma sa bude prezentovať pod dvoma názvami podľa potreby, ale zaregistrovaná bude na Games Design.

Hlavná webová stránka sa skladá z oboch názvov. Adresa webovej stránky www.gdesign.sk sa skladá z názvu Games/Graphic design. A vďaka univerzálnosti názvu boli tieto znaky zvolené aj za vzor loga.

Graf: 35 30 25 20 15 10 5 0

5

Spracovanie loga: Na logo bol použitý font Microsoft Yi Batiti vďaka jeho modernému a peknému vzhľadu. Prvé slovo bolo skrátené na písmenko G aby mohol zákazník dosadiť sám niečo pred Design. Základne dva názvy sú Games a Graphic. Ako odlišný prvok boli na prvé dve písmena GD, ktoré sú aj prvými písmenami v slove zvolené prvky výplne na spodnú časť. Na tvorbu loga bol najprv použitý program Adobe Phothoshop a potom bolo logo prevedené do programu Adobe Ilustrátor kvôli lepšie kompatibilite a práci s vektorovou grafikou.

Tento prvok znamená, že ešte nie sme „plný“ a ešte stále je čo ponúknuť. Na trhu je medzera ktorú treba vyplniť.

6

Príklady použiťia a kombinácie: Postup tvorby:

7

8

9

Príklady použiťia a kombinácie: Využitie v praxi:

10

11

2. FONT A VÝBER FONTU, TYPOGRAFIA: Pre on-line magazín GDesign boli vybrané dve varianty fontu. Prvý font Microsoft Yi Baiti pre zahraničné Anglické rozhranie z dôvodu, že neobsahuje diakritiku.

Druhý font Century Gothic pre Slovenské rozhranie. Obidva fonty sú bezpätkové (sans – serif) sú jednoduchšie a elegantnejšie ako ostatné druhý fontov.

Microsoft Yi Baiti: (36 px, Regular) Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Rr Ss Tt Uu Vv Ww Xx Yy Zz Ľľ Šš Čč Ťť Žž Ňň Century Gothic: (36 px, Regular) Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Rr Ss Tt Uu Vv Ww Xx Yy Zz Ľľ Šš Čč Ťť Žž Ňň Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum is simply dummy text of the printing and typesetting industry

12

G Typografia:

G

typography typography typography

typography typography

typography

typography

typography typography

typograph typography typography

typography

typography typography typography

typography

typography

typography typography

typography

typography typography

typography

typography

typography

typography typography

typography typography

typography

typography typography

typography typography

typography

typography

typography typography typography

GD e s i g n

typography

G

design

typography

typography

typography typography

typography typography typography typography typography typography

typography typography typography

typography typography

Design

typography typography

G

13

typography

3. WEB, NÁVRH WEBU, WEBOVI DIZAJN, TVORBA WEBU A KÓDOVANIE WEBU Web je jednou z dôležitých súčasti moderného marketingu. GDesign má jeden z modernejších webov. Obsahuje Top Bar, ktorý je ukotvený a spĺňa tak funkciu hlavného menu. Tento bar je použiteľný po celom obsahu webu. Na toto menu budú postupne obsahovo pribúdať nové linky. Tak tiež je tam rýchle hľadanie, ktoré hľadá na celom obsahu webu. (Ešte nie je spustené).

Web obsahuje čo najmenej obrázkov kvôli užívateľom s pomalším pripojením na internet. Pozadie webu je obyčajný patern v rozmeroch 5x5px, ktorý sa opakuje v horizontálnej a vertikálnej osi pomocou CSS. • Hlavička stránky je jednoduchá a priehľadná a vďaka tomu nesplýva s obsahom stránky. Hlavička stránky je len obyčajne logo plus text “online magazín o hernom dizajne“. Taktiež je tam dosť priestoru pre prípadnú reklamu, alebo iný informačný obsah.

• Prvý blok stránky sú hlavné informácie alebo novinky, ktoré si žiadajú väčší záujem a kratší popis v ďalšej podstránke. Tento blok je nakódovaní v jazyku JavaScript.

• Druhý blok stránky je privítanie s informáciou o aktuálnom čísle online magazínu.

Tento blok je rozdelený na dve časti kde v prvej je popis čísla a v druhej je aktuálny magazín.

• Posledný blok sú rýchle informácie, ktoré si nežiadajú taký veľký záujem návštevníka stránky. Aj preto sa nachádzajú na úplnom konci stránky.

• Päta stránky je zameraná na dodatočne informácie o GDesign, kto vytvoril webovú stránku, prípadný sponzoring a reklamu.

• Na okolí stránky je tiež dosť miesta pre reklamu.

Webová stránka je hosťovaná na freehostingu endora.cz, ktorý ponúka najlepšie služby vo freehostingoch na slovenskú a česku.

14

Nรกvrh webu a webovi dizajn

15

16

17

Tvorba webu a kódovanie webu Web bol vytvorený pomocou programu Adobe Dreaweaver. Tento program slúži na kódovanie webových stránok. Použité boli 3 jazyky. HTML(Hypertext markup language); CSS(Cascading style sheet) a JavaScript.

Vytvorenie hierarchie webovej stránky

18

Kódovanie Keďže návrh, rozloženie a hierarchiu sme už mali spravenú tak sme sa mohli pustiť do samotného. Najprv bola stránka nakódovaná v jazyku HTML. Ukážka HTML kódu z index.html

Tento jazyk je tágovi a používa sa len na tvorbu webov. Toto je verzia HTML 4.01 z roku 1999 kedy sa napísal štandard. Najnovšia verzia z roku 2012 HTML5, ktorá ešte nie je úplne stabilná sa neodporúča používať aj keď už takmer všetky nové weby sú na jadre HTML5.

Kód je spravený tak aby bolo možne ho akokoľvek upravovať a aby aj iný programátor sa v tom kóde „nestratil“. Toto sme dosiahli komentármi a priehľadným od riadkovaním.

19

CSS je jazyk, ktorý sa dá použiť len s HTML. Samotný nemá žiadny výstup. Bol vytvorený aby sa rozlišoval obsah webu od grafickej stránky. Tento jazyk dokáže modifikovať a vytvárať nové tágy v HTML. Ukážka CSS zo style.css

Taktiež bola použitá staršia verzia CSS a to 2.01. Najnovšia verzia je 3, ktorá vyšla pre požiadavky HTML5.

Ako posledný jazyk pre stranku bol použitý JavaScript. Je to vyšší jazyk a pomocou tohto jazyka už je možne programovať aj hry. Využíva pamäť počítača a dokáže pracovať s údajmi a prepočítavať ich. Využíva premenne, polia, cykly, podmienky atď. ako C, Java, Python atď. Tento jazyk už vytvára výstup a je aj možné spraviť celú stránku pomocou tohto jazyka.

Ukážka JavaScriptu zo script.js

20

Tento kód je už písaný tak aby sa v ňom nestratil programátor, ktorý ho vytvoril.

Pridávajú sa tam nezmyselne poznámky typu (//DB_217 sc-*) a taktiež sa generujú vstúpi aby bol kód čo najchaotickejší. Robí sa to z dôvodu autorských práv. Aby nebolo možne kód skopírovať.

Tento kód sa už neupravuje a využíva sa v takom stave akom je. Jedine čo sa mení sú vstúpi. Čim kvalitnejšie je kód napísaný tým menej úprav už vižaduje.

21

4. NÁVRH A TVORBA ČASOPISU Časopis je základnou a hlavnou stránkou a formou GDesgin-u. GDesign sa hlavne prezentuje online magazínom. Tento magazín bol vytvorený aby prinášal novinky o hernom dizajne, grafike, hrách a IT technológiách.

Prvý návrh, ako by mal časopis vypadať, bol vytvorený v programe Adobe Phothoshop. Tento grafický nástroj nezvláda širšie printové dokumenty a preto bola spravená len predná a zadná strana. Potom sa časopis presunul do špecializovaného programu Adobe InDesign. Tento nástroj slúži na časopisy, brožúrky, noviny, letáky atď. Všetky tlačoviny sú vytvárane v tomto programe vďaka jeho nástrojom je práca lepšia, rýchlejšia a flexibilnejšia.

Tento program spolupracuje najme s vektorovou grafikov, ale dokáže pracovať aj s bitmapovou, rastrovou grafikov. Využíva textové bloky, ktoré sú veľmi dobre použiteľné s veľkým textom a jeho umiestňovaním. Obrázky majú hneď masku pomocou ktorej môžeme zmenšovať alebo zväčšovať vykresľovaciu plochu obrázku. InDesign ešte obsahuje tzv. stránky(pages), ktoré sú niečo ako vrstvy, ale fungujú trošku inač. Stránky sú od seba nezávisle a môžu byť úplne rovnaké, ktoré sú len zduplikované. A vrstvy sú samostatné pre každú stránku aj keď sa nachádzame v jednom a tom istom dokumente.

22

Najprv som si spravil prvú stranu s poslednou stranou, lebo to boli jedine dve stránky, ktoré sa nemenia a zachovávajú si svoj tvar aj po ďalšie diely. Sú to aj zároveň dve dôležite strany lebo čitateľ si ich všimne ako prvé a musia zaujať a nakoniec si ich musí zapamätať pre ďalšie číslo.

Ako druhú vec som spravil vzorku stránky, ktorá sa len výnimočné mení podľa obsahu konkrétnej stránky. Stránky boli spravene tak aby dizajnovo „sedeli“ na titulnú stranu.

Už keď som mal vzorku spravenú tak už nebol problém pridávať nové strany s obsahom, ktorý som čerpal na internete, alebo zo svojich vedomosti.

Hlavnou časťou takéhoto časopisu sú aj obyčajne obrázky nejakých umelcov. Pri tomto časopise to sú herní dizajnéri, programátori a iný grafici, ktorý sa chcú podieľať na vývoji tohto časopisu. Zatiaľ to sú len zahraničný, ktorých som uviedol vždy pri danom obrázku, ale už sa našli aj český vývojári.

Obrázky na pravo sú screenshoty z Adobe Indesign v editačnom móde. Tento mód slúži na jednoduchšiu úpravu, ale aj pod týmto módom pracuje Indesign omnoho rýchlejšie ako v móde pred tlačou.

Vďaka tomuto časopisu zverejním svoju hru ktorú pripravujem s Helium Teams a možno sa aj nájdu nejaký sponzori, ktorý by boli ochotný pomôcť s vývojom lebo každý mame svoje starosti a robíme to len pre zábavu a z radosti.

24

5. ZDROJE Internetove zdroje • • • • • • •

http://www.jakpsatweb.cz/ http://www.grafika.sk/ http://gamedesign.cz/ http://helpx.adobe.com/indesign.html http://helpx.adobe.com/photoshop.html http://helpx.adobe.com/illustrator.html Stránky boli dostupné počas celej doby tvorenia maturitnej práce

25