Post on 09-Jul-2015
description
transcript
Photoshop v dnešním workflow frontendisty
Frontendisti 31. 10. 2014, Praha
1. S Photoshopem na věčné časy
2. Moderní web a dnešní workflow
3. Ukázky využití
1. S PHOTOSHOPEM NA VĚČNÉ ČASY
Co je Photoshop
• Grafický editor na úpravu fotografií
• Nástroj na vytváření grafiky
• Tvorba dokonalých obrázků
Dědictví printového
designu
http://design.tutsplus.com/articles/photoshops-role-in-a-web-design-workflow--psd-25137
http://design.tutsplus.com/articles/photoshops-role-in-a-web-design-workflow--psd-25137
Úskalí
Grafický design
• Kontext prohlížeče vs. pevný formát papíru
• Honba za pixely
• Odlišné renderování fontů
• Wireframe/prototyp
• „To nemůžu přečíst.“
• „Na můj monitor se to nevejde.“
Prezentace klientovi
• Obří PSD
• CMYK vs. RGB
• Rozměry a rozlišení
• Layout a grid
• Fonty
• Efekty: kulaté rohy, stíny, šikmé gradienty…
• Každá stránka originál
Kódování PSD
2. Moderní web a dnešní workflow
–John Allsopp, “A Dao of Web Design”
“The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web
doesn’t have the same constraints, and design for this flexibility. But first, we must 'accept the ebb
and flow of things.'”
http://alistapart.com/article/responsive-web-design/
Cíle a potřeby Koncept Grafický
designVývoj
a kódování Testování
Cíle a potřeby Koncept Grafický
designVývoj
a kódování Testování
UX designer Grafický designer Kodér Vývojář
Cíle a potřeby Koncept Grafický
designVývoj
a kódování Testování
UX designer Grafický designer Kodér Vývojář
Osobní schůzka
Tužka a papír, Muse
AI PSD
AI PSD
Textový editor / IDE
Cíle a potřeby Koncept Grafický
designVývoj
a kódování Testování
UX designer Grafický designer
Osobní schůzka
AI PSD
AI PSD
Textový editor / IDE
Tužka a papír, Muse
Kodér Vývojář
Proč Illustrator
• Snadná manipulace s objekty
• Vícestránkové dokumenty
• Snadný export vektorů
• Export rastrových obrázků pro web jako v PS
• Nižší nároky na čistou práci s vrstvami ve srovnání s PS
• Knihovny
• Stejně nevhodný nástroj na webdesign jako PS
Proč Photoshop
• Inteligentní objekty
• Generate assets
• Lepší práce s rastrovými obrázky
• Už i SVG export
3. Ukázky využití
Spolupráce grafika a kodéra• Grid
• Vertikální rytmus
• Retina ready
• Vektory pro CSS nebo SVG
• Inteligentní objekty
• Generate assets
• Řezy
• Přehledné rozdělení do vrstev