+ All Categories
Home > Internet > Photoshop v dnešním workflow frontendisty

Photoshop v dnešním workflow frontendisty

Date post: 09-Jul-2015
Category:
Upload: adam-kudrna
View: 540 times
Download: 4 times
Share this document with a friend
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, Praha
36
Photoshop v dnešním workflow frontendisty Frontendisti 31. 10. 2014, Praha
Transcript
Page 1: Photoshop v dnešním workflow frontendisty

Photoshop v dnešním workflow frontendisty

Frontendisti 31. 10. 2014, Praha

Page 2: Photoshop v dnešním workflow frontendisty

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

1. S PHOTOSHOPEM NA VĚČNÉ ČASY

Page 4: Photoshop v dnešním workflow frontendisty

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
Page 6: Photoshop v dnešním workflow frontendisty
Page 7: Photoshop v dnešním workflow frontendisty

Dědictví printového

designu

Page 8: Photoshop v dnešním workflow frontendisty

http://design.tutsplus.com/articles/photoshops-role-in-a-web-design-workflow--psd-25137

Page 9: Photoshop v dnešním workflow frontendisty

http://design.tutsplus.com/articles/photoshops-role-in-a-web-design-workflow--psd-25137

Page 10: Photoshop v dnešním workflow frontendisty

Úskalí

Page 11: Photoshop v dnešním workflow frontendisty
Page 12: Photoshop v dnešním workflow frontendisty

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

• „To nemůžu přečíst.“

• „Na můj monitor se to nevejde.“

Prezentace klientovi

Page 14: Photoshop v dnešním workflow frontendisty

• 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
Page 16: Photoshop v dnešním workflow frontendisty
Page 17: Photoshop v dnešním workflow frontendisty

2. Moderní web a dnešní workflow

Page 18: Photoshop v dnešním workflow frontendisty

–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
Page 20: Photoshop v dnešním workflow frontendisty

Cíle a potřeby Koncept Grafický

designVývoj

a kódování Testování

Page 21: Photoshop v dnešním workflow frontendisty

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

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

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

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

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
Page 27: Photoshop v dnešním workflow frontendisty

3. Ukázky využití

Page 28: Photoshop v dnešním workflow frontendisty

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
Page 30: Photoshop v dnešním workflow frontendisty
Page 31: Photoshop v dnešním workflow frontendisty
Page 32: Photoshop v dnešním workflow frontendisty
Page 33: Photoshop v dnešním workflow frontendisty
Page 34: Photoshop v dnešním workflow frontendisty
Page 35: Photoshop v dnešním workflow frontendisty
Page 36: Photoshop v dnešním workflow frontendisty

Díky! @AdamKudrna

www.adamkudrna.cz


Recommended