ส�รบญ

1 ประสบการณใหมของPhotoshop ..........................................1จากขอสงสย ......................................................................................................2

ตดหลม .............................................................................................................3

กลวอะไรละ ? ............................................................................................4

ท�าอยางไรถาไมรเรอง Code .........................................................................4

เนนทกระบวนการท�างาน ......................................................................................6

2 ค�าทตองเลอก .................................................................................................7

หวขอไมส�าคญ ....................................................................................................8

หวใจของการออกแบบเวบไซต ......................................................................8

Responsive Pattern ..................................................................................8

ประสทธภาพ .............................................................................................9

พนฐาน Photoshop ....................................................................................9

ขอแตกตางในแตละเวอรชน...........................................................................9

เปรยบเทยบประสทธภาพของเครองมอ ........................................................10

ความลงตวของ Photoshop ................................................................................10

ตองสรางเวบไซตแบบ Responsive ......................................................................11

2 เรามาถงจดนไดอยางไร? .....................................................13เรารจก Photoshop ไดอยางไร ............................................................................14

ความผดพลาดเดมๆ .........................................................................................15

ออกแบบเวบไซตแบบ Full Page ................................................................16

ปญหาลาสด .....................................................................................................18

ก�าหนดความกวาง ? .................................................................................18

ขาดการปฏสมพนธ ...................................................................................22

มตวหนงสอบางดกวาไหม ? .......................................................................23

การเปดตวทยงใหญ ...................................................................................25

คาดหวงอะไรกน ? ..................................................................................26

การน�าเสนอทนาหดห ................................................................................26

สงทใชวดผล .........................................................................................27

ไมคอยมเสถยรภาพ...................................................................................28

การแปลงไฟลอยางแนบเนยน ....................................................................29

เมอโลกเปลยนไป ผคนไมไดเลนอนเทอรเนต เขาเวบไซต หรอท�าสงตางๆ ออนไลนผานในคอมฯ

เหมอนสมยกอน โดยเฉพาะการทองเวบไซต ทใครๆ ตางกใชงานจากสมารทโฟนเปนหลก คราวน

เวลาท�าเวบไซต ถามาแยกท�าเปนเวอรชนของคอมฯ เวอรชนส�าหรบหนาจอสมารทโฟน หรอ

เวอรชนส�าหรบแทบเลต กดจะเปนงานทอลงการเกนงบประมาณแนๆ ทกวนนจงมสงทเรยกวา

Responsive ขนมา ซงเปนเรองของการสรางเวบไซตครงเดยวใหใชไดกบทกอปกรณ การท�าเวบ

แบบ Responsive สามารถท�าไดจากหลากหลายโปรแกรม และแนนอนวา Photoshop ซงเปน

เจาพอแหงโปรแกรมกราฟก รวมทงออกแบบเวบไซตกไมพลาดทจะปรบตวตามเทรนดเหลาน

หนงสอเลมนจะไมไดสอนสรางเวบไซตไปแบบ Step by Step แตจะมงเนนไปทกระบวนการคด

และเครองมอทส�าคญๆ ส�าหรบปรบวธคด วธท�างานใหสรางเวบไซตแบบ Responsive ได งาย

ประหยดเวลา และงบประมาณมากยงขน หวงเปนอยางยงวาเนอหาตางๆ ในแตละบทจะชวยพฒนา

วธการในการสรางเวบไซต ให Responsive ได ถกใจคณผอานไมมากกนอย

ขอบคณจากใจครบ

กองบรรณาธการดจอารต

ตวอยางผลงานทงหมดในหนงสอเลมนเปนของ Victor Gavenda, Stephen Nathans-Kelly (และ

ทมงาน Adobe Press) และ Dennis Kardys ผเขยนขอขอบคณอยางสดซงแด Dan Mall ผจด

ประกายใหไดลองใช Photoshop เปนสวนหนงของการสรางเวบไซตแบบ Responsive ขอขอบคณ

Amanda ภรรยาแสนดผทอยเบองหลงคอยใหการสนบสนนและก�าลงใจ Holly และ Norah ท

ชวนเลนและคอยมาออนใหพกผอน ขอบคณพระเจาทประทานพรใหทกสงเปนจรงขนมาได

คำ�นำ�สำ�นกพมพ

กตตกรรมประก�ศ

กระเปาแบน .............................................................................................30

ยงพยายามกยงมปญหา .............................................................................31

ถาไมใช Photoshop แลวจะเปนอะไรไดอก ? .........................................................31

3 การออกแบบในบราวเซอร .....................................................33ใหโปรแกรมจดการ... .........................................................................................33

พนฐานการออกแบบในบราวเซอร ........................................................................34

การเขยนโคดและแสดงผล ..........................................................................35

ตรวจสอบองคประกอบ ..............................................................................37

ธรรมชาตของหนาจอ : จดเดนของบราวเซอร ........................................................37

การสอสาร ...............................................................................................38

การเปลยนทงหมดในครงเดยว.....................................................................39

ของฟร ....................................................................................................40

ความพยายามครงแรก ...............................................................................40

ตนก�าเนดการออกแบบเวบไซต ............................................................................42

ทดลองใชงาน ...........................................................................................42

ไฟล PSDs ส�าหรบตรวจสอบและบราวเซอรส�าหรบวดผล ...............................43

บราวเซอรตางกนสงทเหนกตางกน ...............................................................44

ปรบเปลยนไดรวดเรว ................................................................................45

ลกคาเปนผประเมน ...................................................................................45

สดสวน ...................................................................................................46

ความสมพนธของนกออกแบบและนกพฒนา ..........................................................47

สรปวาจะเลกใช Photoshop ไหม ? .....................................................................48

4 ความกลมกลนระหวางPhotoshopกบBrowser .................49Photoshop คอ ผาใบผนใหม ..............................................................................49

พลงของการปรบใหเหมาะสม ..............................................................................51

ความคดสรางสรรค vs ความถกตอง ....................................................................52

เสนทางทราบรน ...............................................................................................52

การออกแบบทเหมอนกน ....................................................................................56

ใช Photoshop เมอจ�าเปน ..................................................................................58

หลกการ Megaman ..................................................................................59

Photoshop : แสดงภาพรวม ......................................................................61

Contentvi

5 กำาหนดทศทาง .....................................................................63ความยงยากทตางกน .........................................................................................64

ในขอบเขตทท�าได ......................................................................................65

ผรวมกระบวนการ .............................................................................................66

Moodboards ...................................................................................................67

การท�างานของ Moodboards .....................................................................68

คนหาและการสะสมแรงบนดาลใจ ..............................................................70

ภาพรวม (Visual Inventories) ..........................................................................72

คนหาประสทธภาพ ...................................................................................75

สงทคยกนไมใชงานทตองสง ........................................................................77

การทดสอบกบรปแบบ ...............................................................................78

6 เรองของการรางแบบ ...........................................................79Mock-up .........................................................................................................79

รางแบบ ..................................................................................................80

รางแบบแบบตาราง ...................................................................................81

Style Prototype .....................................................................................84

การจดการองคประกอบ......................................................................................87

ตดแปะองคประกอบ ..........................................................................................90

ท�าใหเปนรปธรรม .....................................................................................91

สรางการตดแปะองคประกอบ ......................................................................91

ท�าใหครอบคลมในเวลาอนรวดเรว ................................................................94

อยาท�าใหมนเหมอนเวบไซต ........................................................................96

การเปรยบเทยบส .....................................................................................99

การขยายขอบเขตของงาน ....................................................................... 100

ถามค�าถามทด....................................................................................... 101

ออกแบบใหเหมอนเวบไซต ...................................................................... 103

การบอกแหลงทมา ................................................................................. 103

ยงมองภาพไมออก ................................................................................. 104

ยงขาดอะไรอกบาง ? ...................................................................................... 105

7 การสรางระบบ ................................................................... 107คราวนถงตาของบราวเซอร .............................................................................. 108

กระเปาแบน .............................................................................................30

ยงพยายามกยงมปญหา .............................................................................31

ถาไมใช Photoshop แลวจะเปนอะไรไดอก ? .........................................................31

3 การออกแบบในบราวเซอร .....................................................33ใหโปรแกรมจดการ... .........................................................................................33

พนฐานการออกแบบในบราวเซอร ........................................................................34

การเขยนโคดและแสดงผล ..........................................................................35

ตรวจสอบองคประกอบ ..............................................................................37

ธรรมชาตของหนาจอ : จดเดนของบราวเซอร ........................................................37

การสอสาร ...............................................................................................38

การเปลยนทงหมดในครงเดยว.....................................................................39

ของฟร ....................................................................................................40

ความพยายามครงแรก ...............................................................................40

ตนก�าเนดการออกแบบเวบไซต ............................................................................42

ทดลองใชงาน ...........................................................................................42

ไฟล PSDs ส�าหรบตรวจสอบและบราวเซอรส�าหรบวดผล ...............................43

บราวเซอรตางกนสงทเหนกตางกน ...............................................................44

ปรบเปลยนไดรวดเรว ................................................................................45

ลกคาเปนผประเมน ...................................................................................45

สดสวน ...................................................................................................46

ความสมพนธของนกออกแบบและนกพฒนา ..........................................................47

สรปวาจะเลกใช Photoshop ไหม ? .....................................................................48

4 ความกลมกลนระหวางPhotoshopกบBrowser .................49Photoshop คอ ผาใบผนใหม ..............................................................................49

พลงของการปรบใหเหมาะสม ..............................................................................51

ความคดสรางสรรค vs ความถกตอง ....................................................................52

เสนทางทราบรน ...............................................................................................52

การออกแบบทเหมอนกน ....................................................................................56

ใช Photoshop เมอจ�าเปน ..................................................................................58

หลกการ Megaman ..................................................................................59

Photoshop : แสดงภาพรวม ......................................................................61

Style Guide ................................................................................................. 108

ก�าหนดสเปคของเวบไซต ......................................................................... 108

ท�าไมการก�าหนดรปแบบควรจะอยในบราวเซอร ........................................... 114

Component Library แหลงรวบรวมสวนประกอบ ............................................... 114

จดระเบยบให Component Library ........................................................ 116

เลอกการท�างานทเหมาะสมส�าหรบการสรางสวนประกอบ ............................. 124

การสรางตนแบบ (Prototype) ......................................................................... 126

การเขยนโคดอยางคราวๆ ....................................................................... 126

การสรางตนแบบเหมอนจรง .................................................................... 129

8 การใชPageLayersออกแบบหนาเวบ ............................... 131อปสรรคทขวางหนา ........................................................................................ 132

เชญพบกบ Page Layers ................................................................................ 133

ความลงตวระหวางสวยงามกบถกตอง ............................................................... 134

อยาท�างานเพลนใน Photoshop ............................................................... 135

ใชประโยชนจาก Linked Smart Objects ................................................... 136

ความยากในการแนะน�าเรองการปรบแตง ............................................................ 137

Screeenshot แบบเดม .......................................................................... 137

Screeenshot แบบใหม .......................................................................... 138

หนาของเวบไซตไมไดไปในทศทางเดยวกน ........................................................... 140

การเพมกรอบใหกบเนอหาและรปภาพขนาดใหญ ......................................... 140

กรอบในการออกแบบ ............................................................................. 142

องคประกอบผดสดสวนจากการปรบเปลยนตามขนาดหนาจอ ................................ 143

การก�าหนดความกวางใน Page Layers .................................................... 145

การหาทางออก .............................................................................................. 146

9 Extractไฟลในแบบทตองการ ............................................ 147แยกสวนประกอบใหเหมอนถอนฟน ................................................................... 147

Crop และ Save .................................................................................. 148

Copy Merged ..................................................................................... 150

Save for Web .................................................................................... 151

Adobe Generator ......................................................................................... 152

ความละเอยด ........................................................................................ 153

Contentviii

ท�าความรจกใหลกซง .............................................................................. 154

แคเปลยนชอเลเยอร ............................................................................... 157

การแยกแตละสวน ........................................................................................ 157

ตงคา ................................................................................................... 158

Extract (แยกสวน) ....................................................................................... 160

ตงคา ................................................................................................... 161

การดาวนโหลดผานทาง Libraries ............................................................ 162

Extracting Values ............................................................................... 162

Generating CSS .................................................................................. 163

10 ExtendingPhotoshop .................................................... 167Photoshop เวอรชนของเรา ............................................................................. 167

งานออกแบบ ................................................................................................. 169

Pattern ทมลวดลาย.............................................................................. 169

Random User Generator ..................................................................... 171

Pattern ทมลวดลาย.............................................................................. 171

Social Kit ............................................................................................ 172

Pictura ............................................................................................... 172

Transform Each .................................................................................. 173

DevRocket ........................................................................................ 174

Bjango Actions .................................................................................... 175

WebZap .............................................................................................. 176

Composer ........................................................................................... 177

Layout Wrapper .................................................................................. 177

RotateMe ............................................................................................ 178

ส ................................................................................................................. 179

0to255 ............................................................................................... 179

Adobe Color (formerly Kuler) ............................................................ 180

Adobe Color CC for iOS ..................................................................... 181

Coolorus ............................................................................................. 182

Assets ......................................................................................................... 183

iOS Hat ............................................................................................... 183

OtherIcons .......................................................................................... 184

Glifo .................................................................................................... 185

Style Guide ................................................................................................. 108

ก�าหนดสเปคของเวบไซต ......................................................................... 108

ท�าไมการก�าหนดรปแบบควรจะอยในบราวเซอร ........................................... 114

Component Library แหลงรวบรวมสวนประกอบ ............................................... 114

จดระเบยบให Component Library ........................................................ 116

เลอกการท�างานทเหมาะสมส�าหรบการสรางสวนประกอบ ............................. 124

การสรางตนแบบ (Prototype) ......................................................................... 126

การเขยนโคดอยางคราวๆ ....................................................................... 126

การสรางตนแบบเหมอนจรง .................................................................... 129

8 การใชPageLayersออกแบบหนาเวบ ............................... 131อปสรรคทขวางหนา ........................................................................................ 132

เชญพบกบ Page Layers ................................................................................ 133

ความลงตวระหวางสวยงามกบถกตอง ............................................................... 134

อยาท�างานเพลนใน Photoshop ............................................................... 135

ใชประโยชนจาก Linked Smart Objects ................................................... 136

ความยากในการแนะน�าเรองการปรบแตง ............................................................ 137

Screeenshot แบบเดม .......................................................................... 137

Screeenshot แบบใหม .......................................................................... 138

หนาของเวบไซตไมไดไปในทศทางเดยวกน ........................................................... 140

การเพมกรอบใหกบเนอหาและรปภาพขนาดใหญ ......................................... 140

กรอบในการออกแบบ ............................................................................. 142

องคประกอบผดสดสวนจากการปรบเปลยนตามขนาดหนาจอ ................................ 143

การก�าหนดความกวางใน Page Layers .................................................... 145

การหาทางออก .............................................................................................. 146

9 Extractไฟลในแบบทตองการ ............................................ 147แยกสวนประกอบใหเหมอนถอนฟน ................................................................... 147

Crop และ Save .................................................................................. 148

Copy Merged ..................................................................................... 150

Save for Web .................................................................................... 151

Adobe Generator ......................................................................................... 152

ความละเอยด ........................................................................................ 153

FlatIcon .............................................................................................. 186

TinyPNG .............................................................................................. 186

ImageOptim ......................................................................................... 187

Prototype .................................................................................................... 188

Framer, Composite, and Stand In ....................................................... 188

InVision ............................................................................................... 190

การจดการ .................................................................................................... 191

GuideGuide .......................................................................................... 191

Renamy ............................................................................................... 192

Ink ...................................................................................................... 192

psdiff .................................................................................................. 193

หมวดเบดเตลด .............................................................................................. 194

ShortcutFoo ........................................................................................ 194

Photoshop Secrets .............................................................................. 195

11 ตองมขอตกลง .................................................................. 197ปญหาในการสานตอใน PSDs ........................................................................... 197

ขอตกลงคออะไร ............................................................................................. 198

ปรบปรงประสทธภาพ ............................................................................. 199

ชวยจดระเบยบ ...................................................................................... 199

สรางกตกา ............................................................................................ 200

สงส�าคญทเพมเขามา .............................................................................. 200

Files ............................................................................................................ 201

ชอทเหมาะสม ....................................................................................... 201

ทเกบไฟลท ........................................................................................... 202

การเขาถงไฟล ....................................................................................... 202

Layer .......................................................................................................... 203

การตงชอเลเยอรใหถกตอง ...................................................................... 203

การใชกรป ............................................................................................ 204

ลบเลเยอรทไมจ�าเปน ............................................................................. 205

รปภาพ......................................................................................................... 205

ไมท�าใหแยลง ........................................................................................ 206

ผสานเลเยอรดวยความใสใจ ..................................................................... 207

Contentx

ระวงความละเอยด ................................................................................. 207

รปแบบตวอกษร ............................................................................................. 207

การใชตวอกษรทเปนมาตรฐาน ................................................................. 207

อยายดตวอกษร ..................................................................................... 208

ขอความและการเวนระยะ........................................................................ 209

Effects ........................................................................................................ 209

การซอนเลเยอรทพอด ............................................................................ 210

การวางภาพตอกน ................................................................................. 210

โปรดรอบคอบ ....................................................................................... 210

ถามและตอบ ................................................................................................. 211

พสจนอกษร .......................................................................................... 211

บญชส�าหรบสวนประกอบทงหมด ............................................................. 212

ท�าความคนเคยกบบราวเซอร ................................................................... 212

12 เปลยนขนตอนการทำางาน .................................................. 213มองยอนกลบเพอไปตอ ................................................................................... 213

ใน Photoshop ยงไมใช Responsive ......................................................... 213

แคออกแบบในบราวเซอรยงไมพอ ............................................................. 214

สวนผสมทลงตว .................................................................................... 214

การตรวจสอบทมประสทธภาพ ................................................................. 214

รปแบบทมาจากแบบฝกหด .................................................................... 214

สรางหนาเวบงายกวาท�าสวนประกอบ ....................................................... 216

การน�าหนาเวบมาแกไขงายๆ .................................................................. 216

เครองมอทชวยใหงานออกแบบไปอยบนบราวเซอรเรวขน .............................. 217

การปรบแตง Photoshop ดวยโปรแกรมเสรม ............................................. 217

ขอตกลงทใชไดอกนาน ............................................................................ 217

ในการอนมต .................................................................................................. 217

กลยทธภายในองคกร .............................................................................. 218

วธพชตใจลกคา ..................................................................................... 223

หากมาผดทางละ ................................................................................... 225

ปรบเปลยนทศนคตเกยวกบเครองมอ................................................................. 226

ใชเครองมอใหเปนดกวาไดเครองมอใหม ..................................................... 226

FlatIcon .............................................................................................. 186

TinyPNG .............................................................................................. 186

ImageOptim ......................................................................................... 187

Prototype .................................................................................................... 188

Framer, Composite, and Stand In ....................................................... 188

InVision ............................................................................................... 190

การจดการ .................................................................................................... 191

GuideGuide .......................................................................................... 191

Renamy ............................................................................................... 192

Ink ...................................................................................................... 192

psdiff .................................................................................................. 193

หมวดเบดเตลด .............................................................................................. 194

ShortcutFoo ........................................................................................ 194

Photoshop Secrets .............................................................................. 195

11 ตองมขอตกลง .................................................................. 197ปญหาในการสานตอใน PSDs ........................................................................... 197

ขอตกลงคออะไร ............................................................................................. 198

ปรบปรงประสทธภาพ ............................................................................. 199

ชวยจดระเบยบ ...................................................................................... 199

สรางกตกา ............................................................................................ 200

สงส�าคญทเพมเขามา .............................................................................. 200

Files ............................................................................................................ 201

ชอทเหมาะสม ....................................................................................... 201

ทเกบไฟลท ........................................................................................... 202

การเขาถงไฟล ....................................................................................... 202

Layer .......................................................................................................... 203

การตงชอเลเยอรใหถกตอง ...................................................................... 203

การใชกรป ............................................................................................ 204

ลบเลเยอรทไมจ�าเปน ............................................................................. 205

รปภาพ......................................................................................................... 205

ไมท�าใหแยลง ........................................................................................ 206

ผสานเลเยอรดวยความใสใจ ..................................................................... 207

1ประสบการณใหมของ Photoshop“เราตองท�าใหมน Responsive”

เครองมอในการออกแบบเวบไซตมการพฒนาตอเนองตลอดเวลา ถงเราจะเคยเปนนกออกแบบเวบท

“โปร” มากแคไหน แตหากวาไมรจกเทรนดทเปลยนไป ไมใสใจเครองมอทถกพฒนาจนล�าสมย ถงแม

จะออกแบบเวบไซตได มนกอาจไมพอทจะตอบโจทยความตองการของโลกปจจบน

นนคอเหตผลวา ท�าไมจงตองอานหนงสอเลมน

ณ ตอนน ชวงเวลาตอจากน เราจะไปพบกบ Responsive Web Design (RWD) หรอทเรยกเปนไทย

ใหสนทสดเทาทจะท�าไดแลววา “การออกแบบเวบไซตใหใชไดกบทกอปกรณ” ใชไดกบหนาจอทก

ขนาด ไมวาจะเปนมอนเตอรคอมฯ สมารทโฟน หรอแทบเลต โดยใชวธการทไมไดยากกวาการออกแบบ

เวบไซตทวไป ใช Photoshop ท�างานไดตามปกต แถมยงลดขนตอนทยงยากและใชเวลานอยลงอกดวย

ความนยมในการใช Photoshop ออกแบบเวบไซตนนลดลงไปมาก เมอมเครองมอทสะดวกมากกวา

อยาง Reflow, WebFlow, Macaw

แลวเราจะยงใช Photoshop กนอยท�าไมละ ?

เชอเถอะวาตองมอะไรทดกวาแนนอนถงท�าใหเรายงคงอานหนงสอออกแบบเวบไซตดวย Photoshop

แบบนกนอย

Responsive Web Design สรางเวบไซตใหใชไดกบทกอปกรณ2

จากขอสงสยPhotoshop และการออกแบบเวบไซตแบบ Responsive นนถกกลาวถงมาระยะหนงแลว ผเขยน

เคยกลาวถงเรองนครงแรกเมอเดอนตลาคมป 2012 ในตอนนนเมอเลอนด Twitter ไปเรอยๆ กมก

จะพบหวขอทมเนอหาคลายกน คอหวขอ “Responsive Web Design in Browser Part 1 : Kill

Photoshop” หรอหมายความงายๆ วา ถาจะออกแบบเวบให Responsive กเลกใช Photoshop ซะ !!!

(ดรป 1.1) แตลมมนไปกได เพราะเรองนไมใชประเดนของเรา เรากจะยงคงใช Photoshop กนตออยด

รป 1.1 มความเหนมากมายแตนกออกแบบสวนใหญลงความเหนวา ถาจะออกแบบเวบให Responsive กเลกใช

รป 1.1 มความเหนมากมายแตนกออกแบบสวนใหญลงความเหนวา ถาจะออกแบบเวบให Responsive กเลกใช Photoshop กนเถอะ !!!

1ประสบการณใหมของ Photoshop“เราตองท�าใหมน Responsive”

เครองมอในการออกแบบเวบไซตมการพฒนาตอเนองตลอดเวลา ถงเราจะเคยเปนนกออกแบบเวบท

“โปร” มากแคไหน แตหากวาไมรจกเทรนดทเปลยนไป ไมใสใจเครองมอทถกพฒนาจนล�าสมย ถงแม

จะออกแบบเวบไซตได มนกอาจไมพอทจะตอบโจทยความตองการของโลกปจจบน

นนคอเหตผลวา ท�าไมจงตองอานหนงสอเลมน

ณ ตอนน ชวงเวลาตอจากน เราจะไปพบกบ Responsive Web Design (RWD) หรอทเรยกเปนไทย

ใหสนทสดเทาทจะท�าไดแลววา “การออกแบบเวบไซตใหใชไดกบทกอปกรณ” ใชไดกบหนาจอทก

ขนาด ไมวาจะเปนมอนเตอรคอมฯ สมารทโฟน หรอแทบเลต โดยใชวธการทไมไดยากกวาการออกแบบ

เวบไซตทวไป ใช Photoshop ท�างานไดตามปกต แถมยงลดขนตอนทยงยากและใชเวลานอยลงอกดวย

ความนยมในการใช Photoshop ออกแบบเวบไซตนนลดลงไปมาก เมอมเครองมอทสะดวกมากกวา

อยาง Reflow, WebFlow, Macaw

แลวเราจะยงใช Photoshop กนอยท�าไมละ ?

เชอเถอะวาตองมอะไรทดกวาแนนอนถงท�าใหเรายงคงอานหนงสอออกแบบเวบไซตดวย Photoshop

แบบนกนอย

3

เราคงไมเชองายๆ ถาคนเพยงคนเดยวกลาวแบบน แตหวขอทคลายๆ กนกปรากฏขนมาอกมากมาย เชน

� กระแสการสรางเวบแบบ Responsive ท�าใหนกออกแบบเลกใช Photoshop ? (www.

boagworld.com/design/has-responsive-design-killed-photoshop-for-web-designers/)

� Photoshop ตายแลว ? (www.webdesignerdepot.com/2013/02/is-photoshop-dead)

� จากผใชงาน Photoshop : เปลยนไปใช Sketch ท�าอยางไรครบ (http://blog.mengto.com/

photoshop-users-how-to-switch-to-sketch)

� Khoi Vinh ใช Sketch แทน Photoshop (www.creativebloq.com/khoi-vinh-using-sketch-

instead-photoshop-6133901)

� เกดมาเพอฆา Photoshop จรงๆ (www.photoshopkiller.com)

ตอมา... สงทเรารคอเหลอนกออกแบบเพยงไมกคนทยงใช Photoshop (ซงสวนใหญเพราะถกบงคบดวย

เหตผลใดเหตผลหนง) นกออกแบบสวนใหญจะหนไปใช Sketch ทใชงานไดดกวา หรอไมกออกแบบดวย

ภาษา HTML และ CSS โดยยอมทงทกอยางทเคยท�ามากอนหนานไปเลย

เกดอะไรขนกบ Photoshop กนนะ ?

ชวงปทผานมาผเขยนไดพยายามส�ารวจวา ท�าไมนกออกแบบจงเปลยนจาก Photoshop ไปใชโปรแกรมอน

และคนทยงยนพนใช Photoshop นคดอะไรกนอย แลวกไดพบวา นกออกแบบยงคงใช Photoshop

ในการท�างานใหลกคา หากตองเปลยนไปใชโปรแกรมอนทไมถนดอาจสงผลกบหนาทในทมและกงวลวา

จะตองตกงาน นนอาจดเหมอนแคการเปลยนโปรแกรมทใชออกแบบ แตไมใชเลย เพราะมนสงผลกระทบ

ตอวงการออกแบบเวบไซตอยางมาก

แลวเราละ ควรเปลยนไหม ?

ตดหลม !แนนอน เราสามารถทงทกอยางทเกยวกบ Photoshop ไมวาจะเปนความคนเคย การอบรม คาใชจาย

หรอเราจะไปใชโปรแกรมออกแบบตวใหมโดยไมกลบไปใช Photoshop อกเลยกไดโดยไมมใครวา

แถมพวกเขาจะชนชมเสยดวยซ�า เพราะเราท�าใหการออกแบบเวบไซตส�าหรบหนาจอทกขนาดนนม

ประสทธภาพมากขน แบบทใครๆ เขากท�ากน

Responsive Web Design สรางเวบไซตใหใชไดกบทกอปกรณ4

แตทวา... การเปลยนเครองมอเพราะความนยมนนไมดนก หรอเมอไปใชเครองมอใหมๆ กคงไมคนเคย

เหมอน Photoshop ทใชกนมายาวนาน แถมยงอาจจะไดประโยชนนอยถงนอยลงมากจากการปรบ

เปลยน แตเมอลงลกถงรายละเอยดในขนตอนการท�างาน กจะยงพบจดทเปนปญหาและผลกระทบตอ

ภาพรวมมากขนเรอยๆ

กลวอะไรละ ?ท�าไมเราไมคดทจะเลกใช Photoshop ? เพยงเพราะไมอยากหดใชเครองมอใหมๆ ทม แบบนนเหรอ !

ถาคดแบบนถอวาผดไปแลว เพราะเมอมเครองมอใหมๆ เราควรตองลองใชงานมนด ลองดผลทเกดขนดวย

ตาของตวเอง เชน หนาจอแสดงผลของ Photoshop ทเราคาดหวงวาคณสมบตใหมจะชวยใหท�างานงาย

ขน และมนกเปนอยางนนจรงๆ สงทเพมเขามาคอความสามารถทโดดเดนทผใชงานตองการในปจจบน

อยางไรกตามคณสมบตใหมสงทมาเตมเตมสวนทขาด ท�าให Photoshop เปนสดยอดโปรแกรมส�าหรบ

การออกแบบในตอนน มเครองมอใหมๆ เพมมามากมายทชวยในการวางตวอกษรและรปภาพ ชวยใหเรา

ท�างานงายขนและน�าเวลาไปใชกบการออกแบบไดมากขน เมอเราไมตองมาคอยกงวลเรองของการวาง

ภาพใหพอดกบขนาดหนาจอทเลกหรอใหญ เรากจะมเวลาทจะสรางสรรคไอเดยอนๆ เพมขนอกมากมาย

ท�ำอยำงไรถำไมรเรอง Codeการเขยนโคดนนเปนเรองส�าคญพอๆ กบการออกแบบ หนงสอเลมนไมไดปฏเสธการออกแบบเวบดวย

การเขยนโคดในบราวเซอร แถมยงจะสอนเรองการเขยนโคดอยนดๆ เสยดวยซ�า ไมวาจะเปนการเรมตน

ออกแบบดวยการเขยนโคดในบราวเซอรจนมาถงการออกแบบเวบไซตแบบ Responsive ในหนงสอ

เลมนกจะมกลาวไวทงหมด

เราสนบสนนอยางเตมทใหนกออกแบบเขยน HTML และ CSS เพราะโครงสรางของทง 2 อยางนเออ

อ�านวยตอการออกแบบเวบไซตและเปนประโยชนกบทกฝายทท�างานรวมกน ดงท Ben Terrett ได

กลาวไววา...

นกออกแบบทงหมดควรร หรอเรยนร เรองการเขยนโคด เราคอทมนกออกแบบ มนส�าคญมากในการท�างานรวมกนระยะยาวดวยการแบงปนทกษะและประสบการณ สงนจะชวยพฒนาทกษะ การสนบสนนและสรางวฒนธรรมแหงการแบงปนของคนในทม

3

เราคงไมเชองายๆ ถาคนเพยงคนเดยวกลาวแบบน แตหวขอทคลายๆ กนกปรากฏขนมาอกมากมาย เชน

� กระแสการสรางเวบแบบ Responsive ท�าใหนกออกแบบเลกใช Photoshop ? (www.

boagworld.com/design/has-responsive-design-killed-photoshop-for-web-designers/)

� Photoshop ตายแลว ? (www.webdesignerdepot.com/2013/02/is-photoshop-dead)

� จากผใชงาน Photoshop : เปลยนไปใช Sketch ท�าอยางไรครบ (http://blog.mengto.com/

photoshop-users-how-to-switch-to-sketch)

� Khoi Vinh ใช Sketch แทน Photoshop (www.creativebloq.com/khoi-vinh-using-sketch-

instead-photoshop-6133901)

� เกดมาเพอฆา Photoshop จรงๆ (www.photoshopkiller.com)

ตอมา... สงทเรารคอเหลอนกออกแบบเพยงไมกคนทยงใช Photoshop (ซงสวนใหญเพราะถกบงคบดวย

เหตผลใดเหตผลหนง) นกออกแบบสวนใหญจะหนไปใช Sketch ทใชงานไดดกวา หรอไมกออกแบบดวย

ภาษา HTML และ CSS โดยยอมทงทกอยางทเคยท�ามากอนหนานไปเลย

เกดอะไรขนกบ Photoshop กนนะ ?

ชวงปทผานมาผเขยนไดพยายามส�ารวจวา ท�าไมนกออกแบบจงเปลยนจาก Photoshop ไปใชโปรแกรมอน

และคนทยงยนพนใช Photoshop นคดอะไรกนอย แลวกไดพบวา นกออกแบบยงคงใช Photoshop

ในการท�างานใหลกคา หากตองเปลยนไปใชโปรแกรมอนทไมถนดอาจสงผลกบหนาทในทมและกงวลวา

จะตองตกงาน นนอาจดเหมอนแคการเปลยนโปรแกรมทใชออกแบบ แตไมใชเลย เพราะมนสงผลกระทบ

ตอวงการออกแบบเวบไซตอยางมาก

แลวเราละ ควรเปลยนไหม ?

ตดหลม !แนนอน เราสามารถทงทกอยางทเกยวกบ Photoshop ไมวาจะเปนความคนเคย การอบรม คาใชจาย

หรอเราจะไปใชโปรแกรมออกแบบตวใหมโดยไมกลบไปใช Photoshop อกเลยกไดโดยไมมใครวา

แถมพวกเขาจะชนชมเสยดวยซ�า เพราะเราท�าใหการออกแบบเวบไซตส�าหรบหนาจอทกขนาดนนม

ประสทธภาพมากขน แบบทใครๆ เขากท�ากน

5

หากทกษะในการเขยนโคดของเรามนอย กไมตองกงวลจนมากไป เพราะยงมตวชวยใหเราเรยนรเพมเตมได

อยางเชน เวบไซต Treehouse (www.teamtreehouse.com), Code School (www.codeschool.

com), Codeacademy (www.codeacademy.com) หรอตามเวบไซตทสอนเรองการเขยนโคดตางๆ

เราไมจ�าเปนตองเชยวชาญดานเทคนค หนาทของเราคอท�าใหไอเดยทคดไวนนเปนจรง (ดภาพ 1.2)

รป 1.2 ชองวางทางดานการออกแบบและการเขยนโคดเปนปญหาในการออกแบบเวบไซตมานานและยงคงมอยอกมาก

Responsive Web Design สรางเวบไซตใหใชไดกบทกอปกรณ6

หากเคยลองใชโปรแกรมออกแบบเวบไซตตวอน อะไรคอเหตผลทตองกลบมาใช Photoshop ?

ส�าหรบผเขยน เพราะเปนผทใช Photoshop จนช�านาญ จงไมมความจ�าเปนทจะตองไปใชโปรแกรม

ตวอน ความช�านาญในการใชเครองมอนนเปนสงทส�าคญ มาเลนแบบนกนดกวาครบ ใหลองหาค�าสง

Save for Web ด... หาเจอกนหรอไม ? ไมเจอสนะครบ (อยากรวาค�าสงนอยไหนลองถาม Google ดได)

ชดเลยวา... มการเปลยนแปลงเกดขนแลว จาก Photoshop ทคนเคย ค�าสงเรมหายไปบาง ถกรวมไปกบ

ค�าสงอนบาง ดงนน ถงเวลาแลวทตองเรยนรวา Photoshop เปลยนไปมากขนาดไหน ?

เนนทกระบวนการท�างานเพราะโลกนไมมปมหรอค�าสงส�าหรบเปลยนใหเวบไซตทออกแบบมา Responsive หรอใชไดกบทก

อปกรณในครงเดยว (ดรป 1.3) มนมกระบวนการทมากกวาการแคคลกปมใน Photoshop แตมนกคงจะ

ดมากใชไหมละ ถามปมนนอยจรงๆ

รป 1.3 เจอปมวเศษนนหรอยง ถายงลองกดปม <~> ทคยบอรดดส... ไมมอะไรเกดขนหรอกครบ นคอการอ�า !!! ถามจรงเราคงจะนอนสบายกนไปแลว

สวนทสนกของการสรางเวบไซตคอพารทของการออกแบบและใชความคดสรางสรรค แตในสวนของการ

ออกแบบเพอใหใชงานไดกบทกขนาดหนาจอนนดจะเปนงานทหนก ทาทาย และตองแกปญหาตลอดเวลา

(แถมยงไมมระบบอตโนมตมารองรบอก)

5

หากทกษะในการเขยนโคดของเรามนอย กไมตองกงวลจนมากไป เพราะยงมตวชวยใหเราเรยนรเพมเตมได

อยางเชน เวบไซต Treehouse (www.teamtreehouse.com), Code School (www.codeschool.

com), Codeacademy (www.codeacademy.com) หรอตามเวบไซตทสอนเรองการเขยนโคดตางๆ

เราไมจ�าเปนตองเชยวชาญดานเทคนค หนาทของเราคอท�าใหไอเดยทคดไวนนเปนจรง (ดภาพ 1.2)

รป 1.2 ชองวางทางดานการออกแบบและการเขยนโคดเปนปญหาในการออกแบบเวบไซตมานานและยงคงมอยอกมาก

7

ดงนน การออกแบบ Template จงเปนทางออกทดทสดในการจดการกบปญหา

การออกแบบทสวยงามนนตองอาศยทงความคดและเครองมอ เพอใหงานออกมาด เราตองยกระดบความคด

จาก “เราจะใชเครองมอไหนด” เปน “เครองมอนเหมาะจะใชท�าอะไรในกระบวนการท�างาน ถงจะชวย

ใหท�างานไดสะดวกขน”

ในปจจบนขนตอนในการท�างานนนตองมความคลองตว ผเขยนมนใจวา Photoshop ยง “เอาอย” เพยง

แตวาตองเปลยนกระบวนการท�างานสกหนอยเทานนเอง

2 ค�าทตองเลอกหนงสอเลมนเกอบจะใชชอทผดเสยแลว

ผเขยนเกอบจะเลอกใชชอหนงสอวา Responsive Web Design “in” Adobe Photoshop ลองดท

ปกสวาใชไหม ? ใชครบ มนผด มนไมใช คราวนเราจะมาดความแตกตางระหวาง Responsive Web

Design “in” Adobe Photoshop กบ Responsive Web Design “with” Adobe Photoshop กน

สงทท�าให “with” แตกตางจาก “in” คอความจ�าเปนในการออกแบบ

นกออกแบบใช Photoshop ออกแบบในทกสวนของเวบไซตมาหลายป ซงมนคองานครงหนงของงาน

ทงหมด ครงหนงเราท�าเรองแยๆ เมอออกแบบ “Home.psd, Landing.psd, Interior.psd” เสรจแลวก

สะบดกนหนไป เราหมดแรงไปกบการออกแบบใน Photoshop อยเปนเดอนตามขนตอนของตารางงาน

และนนแคส�าหรบหนาจอเพยงขนาดเดยวเทานนนะ แถมยงตองตรวจสอบดวยวาใชไดจรงไหม

ส�าหรบการออกแบบเวบไซตใหใชไดกบทกอปกรณทมขนาดหนาจอแตกตางกน จะตองใหความส�าคญกบ

“ความยดหยน” เราอาจคดวามประสบการณในการรบมอกบงานทตองออกแบบเทมเพลตถง 3 แบบ

แตจะเปนอยางไรละถาตองท�ามากกวา 10 เทมเพลต ส�าหรบหนาจอทตางกนมากกวา 5 ขนาด...

กงานเขาสครบ ทจรงแลวเราสามารถรนเวลาในสวนนนไดดวย Photoshop เพอจะไดมเวลาเพมใหกบ

โคด HTML & CSS เทคนคทเราใชนนเกดจากการท�างาน “กบ” Photoshop หลงจากนนเรา (หรอนก

พฒนา) จะไดเรมสนกกบการเขยนโคด เพราะในการออกแบบเวบไซตส�าหรบหนาจอทกขนาดนนไมไดใช

แค Photoshop เทานน ยงตองใชควบคไปกบการเขยนโคดกบบราวเซอร (และเครองมออกมากมาย) ท

ชวยในการออกแบบอกดวย

Responsive Web Design สรางเวบไซตใหใชไดกบทกอปกรณ8

หวขอไมส�าคญนคอชวงเวลาทดทเราจะมาพดถงหวขอไมส�าคญ ทไมจ�าเปนจะตองเจาะลกลงไปถงรายละเอยด เรมจาก...

หวใจของกำรออกแบบเวบไซตในการออกแบบเวบไซตส�าหรบหนาจอทกขนาดนนเราตองเขาใจพนฐาน อยางการตรวจสอบขนาดของ

หนาจอทใชแสดงผล ความยดหยนในการวางองคประกอบ (Flexible Grides) รปภาพและวดโอ (Fluid

Images) (ดรป 1.4) แลวเรากไมควรไปเสยเวลากบอะไรทมนถกออกแบบมาดอยแลวดวย

รป 1.4 การออกแบบเวบส�าหรบทกอปกรณ = Media Queries + Flexible Grides + Fluid Images ตองมใหครบ

Responsive Patternมรปแบบการ Responsive หรอการปรบขนาดใหเขากบหนาจอตางๆ อยมากมายทตองพฒนากนตอ เชน

รปแบบทใชไดจรงส�าหรบหนาจอการจดเรยงเมนตามแนวตงทคลายกบ Facebook จากทเราไดลองใชก

รไดวามนมอะไรทมากขน มากกวาทเราใชงานกนอยเปนประจ�า และนกคอ Responsive

Brad Fost นกออกแบบเวบไซตทเกงสดๆ ทานหนงกลาวไว (และกเปนอยางนนจรงๆ) (http://bradfrost.

github.io/this-is-reponsive)

7

ดงนน การออกแบบ Template จงเปนทางออกทดทสดในการจดการกบปญหา

การออกแบบทสวยงามนนตองอาศยทงความคดและเครองมอ เพอใหงานออกมาด เราตองยกระดบความคด

จาก “เราจะใชเครองมอไหนด” เปน “เครองมอนเหมาะจะใชท�าอะไรในกระบวนการท�างาน ถงจะชวย

ใหท�างานไดสะดวกขน”

ในปจจบนขนตอนในการท�างานนนตองมความคลองตว ผเขยนมนใจวา Photoshop ยง “เอาอย” เพยง

แตวาตองเปลยนกระบวนการท�างานสกหนอยเทานนเอง

2 ค�าทตองเลอกหนงสอเลมนเกอบจะใชชอทผดเสยแลว

ผเขยนเกอบจะเลอกใชชอหนงสอวา Responsive Web Design “in” Adobe Photoshop ลองดท

ปกสวาใชไหม ? ใชครบ มนผด มนไมใช คราวนเราจะมาดความแตกตางระหวาง Responsive Web

Design “in” Adobe Photoshop กบ Responsive Web Design “with” Adobe Photoshop กน

สงทท�าให “with” แตกตางจาก “in” คอความจ�าเปนในการออกแบบ

นกออกแบบใช Photoshop ออกแบบในทกสวนของเวบไซตมาหลายป ซงมนคองานครงหนงของงาน

ทงหมด ครงหนงเราท�าเรองแยๆ เมอออกแบบ “Home.psd, Landing.psd, Interior.psd” เสรจแลวก

สะบดกนหนไป เราหมดแรงไปกบการออกแบบใน Photoshop อยเปนเดอนตามขนตอนของตารางงาน

และนนแคส�าหรบหนาจอเพยงขนาดเดยวเทานนนะ แถมยงตองตรวจสอบดวยวาใชไดจรงไหม

ส�าหรบการออกแบบเวบไซตใหใชไดกบทกอปกรณทมขนาดหนาจอแตกตางกน จะตองใหความส�าคญกบ

“ความยดหยน” เราอาจคดวามประสบการณในการรบมอกบงานทตองออกแบบเทมเพลตถง 3 แบบ

แตจะเปนอยางไรละถาตองท�ามากกวา 10 เทมเพลต ส�าหรบหนาจอทตางกนมากกวา 5 ขนาด...

กงานเขาสครบ ทจรงแลวเราสามารถรนเวลาในสวนนนไดดวย Photoshop เพอจะไดมเวลาเพมใหกบ

โคด HTML & CSS เทคนคทเราใชนนเกดจากการท�างาน “กบ” Photoshop หลงจากนนเรา (หรอนก

พฒนา) จะไดเรมสนกกบการเขยนโคด เพราะในการออกแบบเวบไซตส�าหรบหนาจอทกขนาดนนไมไดใช

แค Photoshop เทานน ยงตองใชควบคไปกบการเขยนโคดกบบราวเซอร (และเครองมออกมากมาย) ท

ชวยในการออกแบบอกดวย

9

ประสทธภำพสดทายแลวสงทส�าคญอยางมากในการออกแบบเวบไซตแบบ Responsive ทเหลานกออกแบบทงหลาย

มกจะมองขามกคอ “ประสทธภาพ” เวบไซตทสวยงามบางเวบนน “ใหญ” ท�าใหเปลองเนต เมอดผาน

สมารทโฟนหรอแทบเลต (ในกรณทไมใช Wifi จะท�าใหเปลอง 3G หรอ 4G สดๆ) ท�าใหบางครงแพคเกจ

อนเทอรเนตของสมารทโฟนหมดไปเลยกม ปญหานนเกดจากอะไร ?

สวนใหญ “รปภาพ” มกจะกลายเปนแพะรบปาปในกรณน แตทจรงแลวมนยงมปจจยอนอกมากทท�าให

เกดปญหา ซงบางครงมนกเปนเรองของ “เทคนคอล” ทพวกเราเหลานกออกแบบสมผสไมถง

พนฐำน Photoshopในสวนของ Photoshop ผเขยนคดวาทกคนนาจะคนเคยกนเปนอยางด มนอาจจะท�าใหสนกกบการ

ออกแบบมากขนหรอนอยลง และผเขยนคงไมสามารถท�าใหใครตอใครมาหลงรก Photoshop ไดทกคน

แตกยงอยากทจะบอกวาอยาเพงทอ ถงแมในบทนเราจะไมมานงพดถงวา วาดปมท�าอยางไร ไมใชเพราะ

อยากหลกเลยงเรองอนๆ แตเพยงแคอยากใหโฟกสกบเรองของการประยกตใชงานมากกวาเทานนเอง

ขอแตกตำงในแตละเวอรชนเราอาจจะคนเคยกบ Photoshop ในเวอรชนทใชงานเปนประจ�า แตเมอมการอพเดต หนาตาของมนก

มกจะถกเปลยนไปบาง (ในหนงสอเลมนใช Adobe cc) ขอแนะน�าวาใหผอานทกทานใชเวอรชนลาสดของ

Adobe cc เพราะวาในเวอรชนใหมๆ จะมการแกไขขอผดพลาดของโปรแกรม รวมถงเพมความสามารถ

และประสทธภาพของเครองมอใหดขน ทส�าคญคอไมตกเทรนดอยางแนนอน

Responsive Web Design สรางเวบไซตใหใชไดกบทกอปกรณ10

เปรยบเทยบประสทธภำพของเครองมอหากสงสยวาท�าไม Photoshop ถงดกวา Sketch, Fireworks (เลกใชไปในป 2013), Microsoft Paint

เชอเถอะวา นนเปนเพราะ Photoshop คอโปรแกรมออกแบบเวบทมหศจรรยแบบทโปรแกรมอนสไมได

ถงแมจะเคยเหนวามโปรแกรมอนทคลายๆ กนอยบาง แตหยดเอาไวกอน เพราะ ณ ตอนน Photoshop ยง

ใชงานไดเปนอยางด ผเขยนไมไดบอกวา “ตองใช Photoshop เทานน” แบบกลาวอางลอยๆ แตเปนการ

บอกทผานการพสจนมาแลววา “Photoshop คอตวเลอกทดทสดในการออกแบบเวบไซต” (ดรป 1.5)

รป 1.5 Photoshop คอตวเลอกทดทสดของเรา

9

ประสทธภำพสดทายแลวสงทส�าคญอยางมากในการออกแบบเวบไซตแบบ Responsive ทเหลานกออกแบบทงหลาย

มกจะมองขามกคอ “ประสทธภาพ” เวบไซตทสวยงามบางเวบนน “ใหญ” ท�าใหเปลองเนต เมอดผาน

สมารทโฟนหรอแทบเลต (ในกรณทไมใช Wifi จะท�าใหเปลอง 3G หรอ 4G สดๆ) ท�าใหบางครงแพคเกจ

อนเทอรเนตของสมารทโฟนหมดไปเลยกม ปญหานนเกดจากอะไร ?

สวนใหญ “รปภาพ” มกจะกลายเปนแพะรบปาปในกรณน แตทจรงแลวมนยงมปจจยอนอกมากทท�าให

เกดปญหา ซงบางครงมนกเปนเรองของ “เทคนคอล” ทพวกเราเหลานกออกแบบสมผสไมถง

พนฐำน Photoshopในสวนของ Photoshop ผเขยนคดวาทกคนนาจะคนเคยกนเปนอยางด มนอาจจะท�าใหสนกกบการ

ออกแบบมากขนหรอนอยลง และผเขยนคงไมสามารถท�าใหใครตอใครมาหลงรก Photoshop ไดทกคน

แตกยงอยากทจะบอกวาอยาเพงทอ ถงแมในบทนเราจะไมมานงพดถงวา วาดปมท�าอยางไร ไมใชเพราะ

อยากหลกเลยงเรองอนๆ แตเพยงแคอยากใหโฟกสกบเรองของการประยกตใชงานมากกวาเทานนเอง

ขอแตกตำงในแตละเวอรชนเราอาจจะคนเคยกบ Photoshop ในเวอรชนทใชงานเปนประจ�า แตเมอมการอพเดต หนาตาของมนก

มกจะถกเปลยนไปบาง (ในหนงสอเลมนใช Adobe cc) ขอแนะน�าวาใหผอานทกทานใชเวอรชนลาสดของ

Adobe cc เพราะวาในเวอรชนใหมๆ จะมการแกไขขอผดพลาดของโปรแกรม รวมถงเพมความสามารถ

และประสทธภาพของเครองมอใหดขน ทส�าคญคอไมตกเทรนดอยางแนนอน

11

ความลงตวของ Photoshopในขณะทก�าลงเขยนเรองใหมของ Photoshop อยนน ผเขยนกหวงวาจะไดเหนการน�าไปประยกตใชให

เปนประโยชน สงส�าคญสงหนงทผเขยนไดเรยนรคอ “การใช Photoshop ในการออกแบบ อาจจะใชไดด

กบโปรเจกตหนงแตอาจจะไมไดผลกบโปรเจกตอน” และนนเปนทมาวาท�าไมเราจงตองหาความลงตว

ในการใชงาน Photoshop

เราจะมาเรยนเรองการใชงาน Photoshop ส�าหรบออกแบบเวบไซตทงหนาในบทถดไป โดยเลอกเฉพาะ

บางขนตอนทนาสนใจเทานน หากเคยไดยนหรอเคยใชงานมาคงคดวา Photoshop นนกออกแบบเวบไซต

ทงหนาไดเหมอนกน แลวอะไรคอความแตกตางของการออกแบบในอดตกบปจจบน คนทใช Sketch,

Fireworks หรอโปรแกรมอนๆ กยงตองจดวางองคประกอบของเวบไซตเหมอนเดม มนไมใชเรองขอผดพลาด

ของโปรแกรมแตมนคอเรองของขนตอนในการท�างาน

แลวจะเลกใช Photoshop ท�าไม ? ใชเถอะ นอกจากวาจะเกงพอทจะเขยนโคดออกแบบโดยตรงกบ

บราวเซอรได แตเราคงท�าไมไดแนๆ

ถอวาโชคดทใน Photoshop มขนตอนเพยงเลกนอยทตองท�า มนจะชวยใหการออกแบบทงหนานนสนลง

และเปนผลดกบการแสดงผลกบบราวเซอร เนอหาสวนใหญในเลมนจะชวยใหเหนถงขนตอนการท�างาน

ทดทสด เราจะไดรจกกบ Stly tiles, Style pototypes และสวนอนๆ เราจะคดเลอกสวนทดทสดบวก

กบเทคนคตางๆ ทนาสนใจ ส�าหรบการน�าสวนทสรางขนไปใชงานกบบราวเซอร

นอกจากนนในเนอหาของหนงสอยงไดรวบรวมปลกอนและสวนเสรมทมประโยชนตอกระบวนการท�างาน

เอาไว หากก�าลงคดวามนกหาโหลดไดทวไปแลวละก คดใหมไดเลย เพราะเราไดเลอกสรรมาอยางดและ

น�าเอามาประยกตใชใหไดดกน จะไดไมตองไปลองผดลองถกกนเองใหเสยเวลา

อกหนงสงทส�าคญไมแพกนกคอเรองของมารยาท ยกตวอยางเชน เรองของการตงชอเลเยอร !!! อยาเพง

ข�าไป ถาหากรสกวาการตงชอเลเยอรและจดใหเปนระเบยบเปนเรองนาข�าแลวละก เตรยมรบหายนะจาก

ผทท�างานตอจากเราตอนทตองสงไฟลไดเลย

หากไมชอบการออกแบบทงหนาใน Photoshop กตองออกแบบดวยการเขยนโคดในบราวเซอร และ

การท�างานในปจจบนหากคนทมารบงานไปท�าตอเปนคนทเขาใจแบบแผนการท�างานทเราวางไวไดนน

ถอวาโชคดมาก

Responsive Web Design สรางเวบไซตใหใชไดกบทกอปกรณ12

ตองสรางเวบไซตแบบ Responsiveณ ตอนนกไดเวลาอนควรแลวถงเวลาทจะตองลบความเชอเดมๆ

กอนทเราจะเรม สงแรกทเราตองท�าความเขาใจกนกอนกคอ ท�าไมทม หรอองคกรของเรา จงเรมทจะไม

ใช Photoshop เพอใหแกปญหาไดถกจด และพฒนาตอไปแบบไมผดทศทาง

การสรางเวบไซตแบบ Responsive นนไมใชแคออปชนเสรมอกตอไป แตมนคอความจ�าเปน ตอนนสง

เดยวทกนระหวางเราและขนตอนการท�างาน นนกคอ เนอหาตางๆ ทจะไดเรยนรในหนาตอๆ ไป ของ

หนงสอเลมน

11

ความลงตวของ Photoshopในขณะทก�าลงเขยนเรองใหมของ Photoshop อยนน ผเขยนกหวงวาจะไดเหนการน�าไปประยกตใชให

เปนประโยชน สงส�าคญสงหนงทผเขยนไดเรยนรคอ “การใช Photoshop ในการออกแบบ อาจจะใชไดด

กบโปรเจกตหนงแตอาจจะไมไดผลกบโปรเจกตอน” และนนเปนทมาวาท�าไมเราจงตองหาความลงตว

ในการใชงาน Photoshop

เราจะมาเรยนเรองการใชงาน Photoshop ส�าหรบออกแบบเวบไซตทงหนาในบทถดไป โดยเลอกเฉพาะ

บางขนตอนทนาสนใจเทานน หากเคยไดยนหรอเคยใชงานมาคงคดวา Photoshop นนกออกแบบเวบไซต

ทงหนาไดเหมอนกน แลวอะไรคอความแตกตางของการออกแบบในอดตกบปจจบน คนทใช Sketch,

Fireworks หรอโปรแกรมอนๆ กยงตองจดวางองคประกอบของเวบไซตเหมอนเดม มนไมใชเรองขอผดพลาด

ของโปรแกรมแตมนคอเรองของขนตอนในการท�างาน

แลวจะเลกใช Photoshop ท�าไม ? ใชเถอะ นอกจากวาจะเกงพอทจะเขยนโคดออกแบบโดยตรงกบ

บราวเซอรได แตเราคงท�าไมไดแนๆ

ถอวาโชคดทใน Photoshop มขนตอนเพยงเลกนอยทตองท�า มนจะชวยใหการออกแบบทงหนานนสนลง

และเปนผลดกบการแสดงผลกบบราวเซอร เนอหาสวนใหญในเลมนจะชวยใหเหนถงขนตอนการท�างาน

ทดทสด เราจะไดรจกกบ Stly tiles, Style pototypes และสวนอนๆ เราจะคดเลอกสวนทดทสดบวก

กบเทคนคตางๆ ทนาสนใจ ส�าหรบการน�าสวนทสรางขนไปใชงานกบบราวเซอร

นอกจากนนในเนอหาของหนงสอยงไดรวบรวมปลกอนและสวนเสรมทมประโยชนตอกระบวนการท�างาน

เอาไว หากก�าลงคดวามนกหาโหลดไดทวไปแลวละก คดใหมไดเลย เพราะเราไดเลอกสรรมาอยางดและ

น�าเอามาประยกตใชใหไดดกน จะไดไมตองไปลองผดลองถกกนเองใหเสยเวลา

อกหนงสงทส�าคญไมแพกนกคอเรองของมารยาท ยกตวอยางเชน เรองของการตงชอเลเยอร !!! อยาเพง

ข�าไป ถาหากรสกวาการตงชอเลเยอรและจดใหเปนระเบยบเปนเรองนาข�าแลวละก เตรยมรบหายนะจาก

ผทท�างานตอจากเราตอนทตองสงไฟลไดเลย

หากไมชอบการออกแบบทงหนาใน Photoshop กตองออกแบบดวยการเขยนโคดในบราวเซอร และ

การท�างานในปจจบนหากคนทมารบงานไปท�าตอเปนคนทเขาใจแบบแผนการท�างานทเราวางไวไดนน

ถอวาโชคดมาก