3 tipy pre pokročilých vo Photoshope

názov kurzu:
Adobe Photoshop III. pre marketing – grafika pre reklamu, web a webdesign
lektor:
Peter Buday

Pokročilá grafika a Photoshop

Tých tipov bolo počas kurzu samozrejme viac než je v nadpise, vybral som podľa mňa najzaujímavejšie z nich.
Úvod kurzu spravil lektor svojsky – viacerými výrokmi, ktoré triafali klinec po hlavičke na základe jeho dlhoročných skúseností…
„Dnes môže byť grafikom každý. Asi preto ste tu, že chcete byť viac než len každý…“. „Predovšetkým by mal grafik vedieť, pre koho pripravuje podklad. Mnohí to, žiaľ, nevedia.“
„Grafik má robiť grafiku a webdizajn, realizáciu treba prenechať programátorom. Je však dobre vedieť ako navrhnúť grafickú stránku tak, aby bola realizovateľná…“

Bootstrap. Počuli ste už o ňom?
O mriežke, ktorá uľahčuje komunikáciu medzi grafikom a kódovačom (niekedy nazývaným aj programátorom)?
O 12 stĺpcoch na webstránke?

Tip č. 1: nájdite si stránku 960.gs a čítajte!

Pokročilý grafik tieto veci potrebuje nevyhnutne poznať na to, aby robil efektívne a spolupráca s ním bola pre okolie potešením.

Webdizajnéri používajú viacero postupov, no najviac sa osvedčili tie, ktoré využívajú synchronizáciu predstavivosti mozgu, svalový tonus ruky pri kreslení návrhu a papier. V dobe počítačov? …v pozadí je mnoho argumentov, a najmä skvelé výsledky.
Ako na to?

Tip č. 2: práca grafika – dizajnéra by mala začať vytvorením wireframe, tzv. drôteného modelu stránky

Čo je to wireframe? Označuje sa tiež ako skica webu. Vychádza z poznámok získaných od zadávateľa úlohy a súvisiacej myšlienkovej mapy. Samotná skica obsahuje v prvej verzii bloky (čiary, obdĺžniky,…)  a ich rozmiestnenie, v druhej verzii podrobnú vizualizáciu. Zavŕšením je preklikávacia skica webu, ktorá sa robí podľa zložitosti projektu.

Lektor nám porozprával podrobne nielen o drôtenom modeli, ale aj o celkovej logike návrhu, z čoho vychádza v euroamerickom geografickom priestore, logickom rozvrhnutí hlavných prvkov na stránke a ich obsahu vrátane používaných kontrastov na udržanie prehľadnosti a pútavosti stránky…

V priebehu posledných desiatich rokov sa smartfóny stali významným prostriedkom prístupov na internet. Podľa toho, o akú špecifikáciu komodity sa jedná – informáciu, tovar či službu – sa prístupy pohybujú od 30 do 70 percent, v niektorých prípadoch nad 90%. Firma získava priazeň svojich návštevníkov pri prvom kontakte najmä prehľadnosťou a zrozumiteľnosťou svojich stránok. Platí to na webe cez monitor i displej telefónu.
Responzívny dizajn je spôsob vytvorenia HTML dokumentu tak, aby optimalizoval zobrazenie stránok pre všetky druhy prístupových zariadení (stolové počítače, smartfóny, notebooky, tablety,…).
Pre firmu, ktorá má 98% návštevníkov stránok (a zákazníkov) cez mobilné zariadenia, nemá však responzívny dizajn veľký zmysel – dizajn jej stránky bude grafik primárne vytvárať pre smartfóny – tento typ dizajn sa nazýva „mobile first“ (mobilný dizajn).

Tip č. 3: zistite si pred začatím práce, aký typ návštevníkov, resp. zákazníkov tvorí väčšinu, aký je trend ich počtu a ciele firmy, pomôže to ľahšie vytvoriť graficky čistý aj úspešný web

Súčasný web sa navrhuje tak, aby zodpovedal nielen monitorom či televízorom so zabudovaným prehliadačom, ale aj iným zariadeniam návštevníkov. To je responzívny dizajn.
V praxi predstavuje 2-3 verzie grafickej vizualizácie stránky berúce do úvahy špecifikácie smartfónov, netbookov, monitorov,…

Pokročilý webdizajnér vie, že Google od roku 2016 obmedzil zaraďovanie webstránok, ktoré nie sú optimalizované pre smartfóny, do výsledkov vyhľadávania. Teda ak má byť jeho práca naozaj pokročilá (a nebyť „každý“ z úvodu článku), jeho grafický návrh pre kódovača stránky bude obsahovať viac verzií pre rôzne zariadenia. Nie preto, aby ich samostatne nakódoval, ale aby sa obsah stránky po nakódovaní prispôsoboval predvídateľne podľa typu požívaného prístupového zariadenia.
Návrh bude tiež spĺňať pravidlá veľkosti obrázkov podľa mriežky 12 stĺpcov.
A samozrejme, bude svojím vzhľadom, farebnou paletou (nastavenie sRGB!) a použitými motívmi pôsobiť tak, aby väčšina návštevníkov stránky odchádzala  spokojná.

Tip na záver: pri návrhu netreba zabudnúť aj na možnosti otáčania smartfónov!

Ako taký návrh vyzerá v praxi bolo náplňou popoludňajšej časti kurzu, keď lektor na konkrétnej ukážke demonštroval všetky pravidlá návrhu, komentoval ich výhody, prípadné nedostatky a ešte oveľa oveľa viac…

Chcete vedieť ako Photoshop naozaj efektívne využívať pre návrh web-stránok?
Tento kurz je presne to pravé, čo ukáže ako na to.

Záverečné zhrnutie:

+ kurz je vhodný pre pokročilých, predpokladá aspoň priemernú znalosť Photoshopu
+ parádny lektor s praktickými skúsenosťami
+ mnoho zaujímavých poznatkov
+ odniesli sme si o.i. súbor s klávesovými skratkami pre Photoshop
– kurz veľmi rýchlo ubehol