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

 

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ý

Využitelnost vzdělávacího modulu

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
  1. 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
  1. 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
  1. 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

Obsahové upřesnění

OV RVP - Odborné vzdělávání ve vztahu k RVP

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í.

Statut dokumentu

Veřejný

Přílohy veřejné