ส รบัญ · 2019-01-29 · พื้นฐาน photoshop ......
TRANSCRIPT
ส�รบญ
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 กตองออกแบบดวยการเขยนโคดในบราวเซอร และ
การท�างานในปจจบนหากคนทมารบงานไปท�าตอเปนคนทเขาใจแบบแผนการท�างานทเราวางไวไดนน
ถอวาโชคดมาก