photoshop v dnešním workflow frontendisty
DESCRIPTION
Jaká jsou pro a proti webdesignu ve Photoshopu? Jaká jsou úskalí tradičního grafického návrhu a jaké požadavky při návrhu webu dnes? V čem je na web lepší Illustrator a kdy je Photoshop nenahraditelný? 1. S Photoshopem na věčné časy 2. Moderní web a dnešní workflow 3. Ukázky využití Frontendisti 31. 10. 2014, PrahaTRANSCRIPT
![Page 1: Photoshop v dnešním workflow frontendisty](https://reader034.vdocuments.net/reader034/viewer/2022042715/559db9f71a28ab2d3b8b47c9/html5/thumbnails/1.jpg)
Photoshop v dnešním workflow frontendisty
Frontendisti 31. 10. 2014, Praha
![Page 2: Photoshop v dnešním workflow frontendisty](https://reader034.vdocuments.net/reader034/viewer/2022042715/559db9f71a28ab2d3b8b47c9/html5/thumbnails/2.jpg)
1. S Photoshopem na věčné časy
2. Moderní web a dnešní workflow
3. Ukázky využití
![Page 3: Photoshop v dnešním workflow frontendisty](https://reader034.vdocuments.net/reader034/viewer/2022042715/559db9f71a28ab2d3b8b47c9/html5/thumbnails/3.jpg)
1. S PHOTOSHOPEM NA VĚČNÉ ČASY
![Page 4: Photoshop v dnešním workflow frontendisty](https://reader034.vdocuments.net/reader034/viewer/2022042715/559db9f71a28ab2d3b8b47c9/html5/thumbnails/4.jpg)
Co je Photoshop
• Grafický editor na úpravu fotografií
• Nástroj na vytváření grafiky
• Tvorba dokonalých obrázků
![Page 5: Photoshop v dnešním workflow frontendisty](https://reader034.vdocuments.net/reader034/viewer/2022042715/559db9f71a28ab2d3b8b47c9/html5/thumbnails/5.jpg)
![Page 6: Photoshop v dnešním workflow frontendisty](https://reader034.vdocuments.net/reader034/viewer/2022042715/559db9f71a28ab2d3b8b47c9/html5/thumbnails/6.jpg)
![Page 7: Photoshop v dnešním workflow frontendisty](https://reader034.vdocuments.net/reader034/viewer/2022042715/559db9f71a28ab2d3b8b47c9/html5/thumbnails/7.jpg)
Dědictví printového
designu
![Page 8: Photoshop v dnešním workflow frontendisty](https://reader034.vdocuments.net/reader034/viewer/2022042715/559db9f71a28ab2d3b8b47c9/html5/thumbnails/8.jpg)
http://design.tutsplus.com/articles/photoshops-role-in-a-web-design-workflow--psd-25137
![Page 9: Photoshop v dnešním workflow frontendisty](https://reader034.vdocuments.net/reader034/viewer/2022042715/559db9f71a28ab2d3b8b47c9/html5/thumbnails/9.jpg)
http://design.tutsplus.com/articles/photoshops-role-in-a-web-design-workflow--psd-25137
![Page 10: Photoshop v dnešním workflow frontendisty](https://reader034.vdocuments.net/reader034/viewer/2022042715/559db9f71a28ab2d3b8b47c9/html5/thumbnails/10.jpg)
Úskalí
![Page 11: Photoshop v dnešním workflow frontendisty](https://reader034.vdocuments.net/reader034/viewer/2022042715/559db9f71a28ab2d3b8b47c9/html5/thumbnails/11.jpg)
![Page 12: Photoshop v dnešním workflow frontendisty](https://reader034.vdocuments.net/reader034/viewer/2022042715/559db9f71a28ab2d3b8b47c9/html5/thumbnails/12.jpg)
Grafický design
• Kontext prohlížeče vs. pevný formát papíru
• Honba za pixely
• Odlišné renderování fontů
• Wireframe/prototyp
![Page 13: Photoshop v dnešním workflow frontendisty](https://reader034.vdocuments.net/reader034/viewer/2022042715/559db9f71a28ab2d3b8b47c9/html5/thumbnails/13.jpg)
• „To nemůžu přečíst.“
• „Na můj monitor se to nevejde.“
Prezentace klientovi
![Page 14: Photoshop v dnešním workflow frontendisty](https://reader034.vdocuments.net/reader034/viewer/2022042715/559db9f71a28ab2d3b8b47c9/html5/thumbnails/14.jpg)
• 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
![Page 15: Photoshop v dnešním workflow frontendisty](https://reader034.vdocuments.net/reader034/viewer/2022042715/559db9f71a28ab2d3b8b47c9/html5/thumbnails/15.jpg)
![Page 16: Photoshop v dnešním workflow frontendisty](https://reader034.vdocuments.net/reader034/viewer/2022042715/559db9f71a28ab2d3b8b47c9/html5/thumbnails/16.jpg)
![Page 17: Photoshop v dnešním workflow frontendisty](https://reader034.vdocuments.net/reader034/viewer/2022042715/559db9f71a28ab2d3b8b47c9/html5/thumbnails/17.jpg)
2. Moderní web a dnešní workflow
![Page 18: Photoshop v dnešním workflow frontendisty](https://reader034.vdocuments.net/reader034/viewer/2022042715/559db9f71a28ab2d3b8b47c9/html5/thumbnails/18.jpg)
–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/
![Page 19: Photoshop v dnešním workflow frontendisty](https://reader034.vdocuments.net/reader034/viewer/2022042715/559db9f71a28ab2d3b8b47c9/html5/thumbnails/19.jpg)
![Page 20: Photoshop v dnešním workflow frontendisty](https://reader034.vdocuments.net/reader034/viewer/2022042715/559db9f71a28ab2d3b8b47c9/html5/thumbnails/20.jpg)
Cíle a potřeby Koncept Grafický
designVývoj
a kódování Testování
![Page 21: Photoshop v dnešním workflow frontendisty](https://reader034.vdocuments.net/reader034/viewer/2022042715/559db9f71a28ab2d3b8b47c9/html5/thumbnails/21.jpg)
Cíle a potřeby Koncept Grafický
designVývoj
a kódování Testování
UX designer Grafický designer Kodér Vývojář
![Page 22: Photoshop v dnešním workflow frontendisty](https://reader034.vdocuments.net/reader034/viewer/2022042715/559db9f71a28ab2d3b8b47c9/html5/thumbnails/22.jpg)
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
![Page 23: Photoshop v dnešním workflow frontendisty](https://reader034.vdocuments.net/reader034/viewer/2022042715/559db9f71a28ab2d3b8b47c9/html5/thumbnails/23.jpg)
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ář
![Page 24: Photoshop v dnešním workflow frontendisty](https://reader034.vdocuments.net/reader034/viewer/2022042715/559db9f71a28ab2d3b8b47c9/html5/thumbnails/24.jpg)
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
![Page 25: Photoshop v dnešním workflow frontendisty](https://reader034.vdocuments.net/reader034/viewer/2022042715/559db9f71a28ab2d3b8b47c9/html5/thumbnails/25.jpg)
Proč Photoshop
• Inteligentní objekty
• Generate assets
• Lepší práce s rastrovými obrázky
• Už i SVG export
![Page 26: Photoshop v dnešním workflow frontendisty](https://reader034.vdocuments.net/reader034/viewer/2022042715/559db9f71a28ab2d3b8b47c9/html5/thumbnails/26.jpg)
![Page 27: Photoshop v dnešním workflow frontendisty](https://reader034.vdocuments.net/reader034/viewer/2022042715/559db9f71a28ab2d3b8b47c9/html5/thumbnails/27.jpg)
3. Ukázky využití
![Page 28: Photoshop v dnešním workflow frontendisty](https://reader034.vdocuments.net/reader034/viewer/2022042715/559db9f71a28ab2d3b8b47c9/html5/thumbnails/28.jpg)
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
![Page 29: Photoshop v dnešním workflow frontendisty](https://reader034.vdocuments.net/reader034/viewer/2022042715/559db9f71a28ab2d3b8b47c9/html5/thumbnails/29.jpg)
![Page 30: Photoshop v dnešním workflow frontendisty](https://reader034.vdocuments.net/reader034/viewer/2022042715/559db9f71a28ab2d3b8b47c9/html5/thumbnails/30.jpg)
![Page 31: Photoshop v dnešním workflow frontendisty](https://reader034.vdocuments.net/reader034/viewer/2022042715/559db9f71a28ab2d3b8b47c9/html5/thumbnails/31.jpg)
![Page 32: Photoshop v dnešním workflow frontendisty](https://reader034.vdocuments.net/reader034/viewer/2022042715/559db9f71a28ab2d3b8b47c9/html5/thumbnails/32.jpg)
![Page 33: Photoshop v dnešním workflow frontendisty](https://reader034.vdocuments.net/reader034/viewer/2022042715/559db9f71a28ab2d3b8b47c9/html5/thumbnails/33.jpg)
![Page 34: Photoshop v dnešním workflow frontendisty](https://reader034.vdocuments.net/reader034/viewer/2022042715/559db9f71a28ab2d3b8b47c9/html5/thumbnails/34.jpg)
![Page 35: Photoshop v dnešním workflow frontendisty](https://reader034.vdocuments.net/reader034/viewer/2022042715/559db9f71a28ab2d3b8b47c9/html5/thumbnails/35.jpg)