Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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/pro...
• „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…
• K...
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 me...
Cíle
a potřeby
Koncept
Grafický
design
Vývoj
a kódování
Testování
Cíle
a potřeby
Koncept
Grafický
design
Vývoj
a kódování
Testování
UX designer Grafický designer
Kodér
Vývojář
Cíle
a potřeby
Koncept
Grafický
design
Vývoj
a kódování
Testování
UX designer Grafický designer
Kodér
Vývojář
Osobní
schůz...
Cíle
a potřeby
Koncept
Grafický
design
Vývoj
a kódování
Testování
UX designer Grafický designer
Osobní
schůzka
AI
PSD
AI
P...
Proč Illustrator
• Snadná manipulace s objekty
• Vícestránkové dokumenty
• Snadný export vektorů
• Export rastrových obráz...
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
• ...
Díky!
@AdamKudrna
www.adamkudrna.cz
Photoshop v dnešním workflow frontendisty
Photoshop v dnešním workflow frontendisty
Photoshop v dnešním workflow frontendisty
Photoshop v dnešním workflow frontendisty
Photoshop v dnešním workflow frontendisty
Photoshop v dnešním workflow frontendisty
Photoshop v dnešním workflow frontendisty
Photoshop v dnešním workflow frontendisty
Photoshop v dnešním workflow frontendisty
Photoshop v dnešním workflow frontendisty
Photoshop v dnešním workflow frontendisty
Photoshop v dnešním workflow frontendisty
Photoshop v dnešním workflow frontendisty
Photoshop v dnešním workflow frontendisty
Upcoming SlideShare
Loading in …5
×

Photoshop v dnešním workflow frontendisty

1,033 views

Published on

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, Praha

Published in: Internet
  • Be the first to comment

Photoshop v dnešním workflow frontendisty

  1. 1. Photoshop v dnešním workflow frontendisty Frontendisti 31. 10. 2014, Praha
  2. 2. 1. S Photoshopem na věčné časy 2. Moderní web a dnešní workflow 3. Ukázky využití
  3. 3. 1. S PHOTOSHOPEM NA VĚČNÉ ČASY
  4. 4. Co je Photoshop • Grafický editor na úpravu fotografií • Nástroj na vytváření grafiky • Tvorba dokonalých obrázků
  5. 5. Dědictví printového designu
  6. 6. http://design.tutsplus.com/articles/photoshops-role-in-a-web-design-workflow--psd-25137
  7. 7. http://design.tutsplus.com/articles/photoshops-role-in-a-web-design-workflow--psd-25137
  8. 8. Úskalí
  9. 9. Grafický design • Kontext prohlížeče vs. pevný formát papíru • Honba za pixely • Odlišné renderování fontů • Wireframe/prototyp
  10. 10. • „To nemůžu přečíst.“ • „Na můj monitor se to nevejde.“ Prezentace klientovi
  11. 11. • 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
  12. 12. 2. Moderní web a dnešní workflow
  13. 13. –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/
  14. 14. Cíle a potřeby Koncept Grafický design Vývoj a kódování Testování
  15. 15. Cíle a potřeby Koncept Grafický design Vývoj a kódování Testování UX designer Grafický designer Kodér Vývojář
  16. 16. Cíle a potřeby Koncept Grafický design Vý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
  17. 17. Cíle a potřeby Koncept Grafický design Vý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ář
  18. 18. 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
  19. 19. Proč Photoshop • Inteligentní objekty • Generate assets • Lepší práce s rastrovými obrázky • Už i SVG export
  20. 20. 3. Ukázky využití
  21. 21. 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
  22. 22. Díky! @AdamKudrna www.adamkudrna.cz

×