VSTUPNÍ ČÁST

Název modulu

Photoshop – úprava obrázků a rozřezání grafiky pro web, grid systém

Kód modulu

82-m-4/AC75

Typ vzdělávání

Odborné vzdělávání

Typ modulu

(odborný) teoreticko–praktický

Kategorie dosaženého vzdělání

M (EQF úroveň 4)

Skupiny oborů

82 - Umění a užité umění

Komplexní úloha

Obory vzdělání - poznámky

• 82-41-M/05 Grafický design
• 82-41-M/03 Výstavní tvorba a bytový design

Délka modulu (počet hodin)

48

Poznámka k délce modulu

Platnost modulu od

30. 04. 2020

Platnost modulu do

Vstupní předpoklady

• znalost modulu Základy HTML, HTML5, CSS – Kaskádové styly, W3C, SEO optimalizace

JÁDRO MODULU

Charakteristika modulu

Cílem modulu je osvojení znalostí a terminologie z oblasti úpravy fotografií a návrhu webdesignu v grafickém programu Adobe Photoshop. Také využití nástroje Grid systém Bootstrapu k docílení přehlednosti a čitelnosti webu. Žák bude schopen popsat prostředí programu, nástroje, režimy a vztahy mezi nimi, vysvětlit proces úpravy fotografie, upravit fotografii, připravit drátový model webu, ozřezat grafiku webu, umisťovat a pozicovat jednotlivé prvky. Žák se orientuje v grafických formátech, v jejich vlastnostech a použití. Při návrhu grid systému za použití bootstrapu, by měla být dodržována pravidla rozdělení obsahu do pravidelné mřížky.

Po absolvování modulu je žák schopen aplikovat získané znalosti do vlastní práce a pracovat na zadaném úkolu samostatně.

Očekávané výsledky učení

Žák:

• používá terminologii z oblasti úpravy fotografií a návrhu webdesignu v grafickém programu Adobe Photoshop
• využívá nástroje Grid systém Bootstrap
• rozeznává rozdíl mezi vektorovou a bitmapovou grafikou a používá k tomu určené nástroje SW
• rozeznává výhody grid systému a používá bootstrap systém
• používá vhodné nástroje i režimy a zná možnosti grafického programu
• vymezí vhodnost užití nástrojů pro obrazovou postprodukci
• používá úpravu fotografií
• provádí navržení i realizaci designu webu 
• používá drátová model pro design webu
• provádí rozřezání grafiky webu pomocí vhodného nástroje
• kategorizuje a ve vlastní práci kombinuje jednotlivé aspekty obrazové postprodukce
• orientuje v grafických formátech, v jejich vlastnostech a použití

Obsah vzdělávání (rozpis učiva)

Obsahové okruhy učiva:

Photoshop:

1. Ovládání programu:

• nový soubor
• skenování a komunikace s digitálním fotoaparátem 
• navigace v okně programu
• výběr nástrojů a parametry
• barvy a barevné prostory

2. Práce s obrazovými daty:

• globální úpravy
• lokální úpravy
• objekty, kreslení a editace
• korekce barev a manipulace s barvami
• nástroj ztmavení, zesvětlení, sytost a rozmazání
• úrovně (Levels)
• retušování fotografie, retušovací
• nástroje (retušovací štětec, razítko, záplata)
• efekty vrstvy a vrstvy úprav
• efekty rozostření 
• cesty
• práce s vektorem a inteligentní objekty
• barevné kanály

3. Nástroje vhodné pro rozdělení webové stránky na řezy:

• automatické řezy se generují automaticky
• uživatelské řezy se vytvářejí nástrojem Řez
• vytvoření řezů z vodítek
• řezy z vrstvy se vytvářejí pomocí panelu Vrstvy

4. Výstup z programu:

• kompresní metody
• velikost a rozlišení obrazu
• výstupní formáty
• přiřazení URL odkazu k obrazovému řezu
• přidání textu HTML do řezu

Bootstrap:

1. úvod do CSS frameworku Bootstrap

2. první Bootstrap třídy, kterými explicitně stylujeme nadpisy a podnadpisy, citace, zkratky a seznamy

3. stylování obrázků pomocí Bootstrap včetně responzivity, rámečků, obtékání, centrování a popisků

4. tlačítka (buttons), obrysy, různé velikosti a barvy, neaktivní tlačítka, dropdowns, vypínače

5. rozdělení obsahu do pravidelné mřížky, zarovnání

6. použití gridu, vložení formuláře do řádku

Učební činnosti žáků a strategie výuky

Strategie učení: ve výuce se doporučuje kombinovat níže uvedené metody výuky.

Metody slovní:

• odborný výklad s prezentací a ukázkami (fotografie, responzivní weby–základní, pokročilé, grid systém)

Přímé vyučování:

• přednes s použitím odborné literatury–prezentace názorných prací
• vlastní tvorba s konzultací - průběžná práce
• hodnocené domácí úkoly (konzultace a diskuse)
• orientace žáků v učivu (diskuze, ústní prezentace)
• prezentace vlastní tvorby před spolužáky ve třídě

Specifikace průběžné práce:

• úprava fotografie (2 – 4 práce)
• provedení vlastního designu webu (1 – 2 práce)

Specifikace samostatné práce:

• teoretická část (teoretický popis tématu)
• praktická část (úprava fotografií, návrh a provedení designu webu (2 práce), výsledky pozorování)
• závěr (výsledky práce)
• 6 až10 souborů (vlastní webdesign, fotografie, aj.)

Učební činnosti žáků:

• používá bitmapovou grafiku a používá k tomu určené nástroje SW
• rozeznává výhody grid systému a používá bootstrap systém
• používá vhodné nástroje i režimy a zná možnosti grafického programu
• vymezí vhodnost užití nástrojů pro obrazovou postprodukci
• používá úpravu fotografií
• provádí navržení i realizaci designu webu 
• používá drátová model pro design webu
• provádí rozřezání grafiky webu pomocí vhodného nástroje
• kategorizuje a ve vlastní práci kombinuje jednotlivé aspekty obrazové postprodukce
• aktivně se zapojuje do výuky a zodpovídá kontrolní otázky vyučujícího

Zařazení do učebního plánu, ročník

3. ročník

VÝSTUPNÍ ČÁST

Způsob ověřování dosažených výsledků

Písemná forma zkoušení

• základní pojmy a terminologie

Průběžné práce:

• úprava fotografie
• provedení vlastního designu webu

Samostatná práce žáků:

• postprodukční zpracování vlastního obrazového materiálu
• provedení webdesignu pomocí grid systému

Ověřované okruhy:

• webdesign v grafickém programu Adobe Photoshop
• termín grid systém
• vhodné užití nástrojů pro obrazovou postprodukci
• postprodukce vlastního obrazového materiálu
• rozřezání grafiky webu pomocí vhodného nástroje
• navržení i realizace designu webu 
• použítí drátového modelu pro design webu
• kombinace jednotlivých aspektů obrazové postprodukce

Kritéria hodnocení

prospěl – neprospěl

• prospěl: splnění zadání (zadaný počet prací, zvládnutí návrhu i provedení postprodukce – věrnost, použití nástrojů a režimů; bootstrap – dodržení pravidla rozdělení obsahu do pravidelné mřížky)
• neprospěl: nesplnění zadání, provedení zvládne jen s pomocí učitele, vlastní práce vykazují závažné nedostatky

Pro splnění modulu ho musí žák absolvovat s maximální absencí do 20 %

Doporučená literatura

KRČMÁŘ, Jakub. Adobe Photoshop: praktický webdesign : inspirace pro tvorbu webových stránek. 1. vyd. Praha: Grada, 2006, 204 s. ISBN 80-247-1423-x.

KADLEC, Tim. Implementing responsive design: building sites for an anywhere, everywhere web. Berkeley, CA: New Riders, c2013, xv, 271 p. ISBN 0321821688.

DAWSON, Alexander. Výjimečný webdesign: jak tvořit osobité, přitažlivé, použitelné weby. 1. vyd. Brno: Computer Press, 2012, 344 s. ISBN 978-80-251-3719-2.


 

Poznámky

Materiál vznikl v rámci projektu Modernizace odborného vzdělávání (MOV), který byl spolufinancován z Evropských strukturálních a investičních fondů a jehož realizaci zajišťoval Národní pedagogický institut České republiky. Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Robin Michenka. Creative Commons CC BY SA 4.0 – Uveďte původ – Zachovejte licenci 4.0 Mezinárodní.