S2MQ

หากท่านติดใจอยากให้ดาวเชิญทางนี้ท่านคลิ้ก> ภาค1

คราวนี้กระผมจะสอนทุกท่าน ทำหน้าเว็ปด้วยPhotoshop และวิธีทำกล่องวิ้งๆใสๆด้วย

เอาแบบครบสูตรกันไปเลยท่าน... ด้วย17ขั้นตอนง่ายๆ สั้นๆแต่สุโก่ยยย!!!

หลักการของมันคือ สร้างปุ่มหรือกล่องข้อความ เอาไว้ใส่ลิ้งให้กดบนหน้าเว็ปนั่นเอง...

1) สร้างกล่องข้อความของท่านขึ้นมาก่อน โดยใช้เครื่องมือ Rounded Rectangle Tool

2) สร้างเลเยอร์ใหม่ แล้วเขียนข้อความของท่านลงไปด้วยเครื่องมือ

ใส่ขอบให้ตัวอักษรของท่าน โดยเลือกคำสั่ง Layer > Layer Style > Stroke...

3) ลากเลเยอร์กล่องข้อความของท่านไปที่เครื่องหมาย เพื่อสร้างเลเยอร์สำเนาขึ้นมาใหม่

4) ทำงานที่เลเยอร์ที่สร้างขึ้นมาใหม่ในข้อ3 ใช้เครื่องมือสร้าง selection ขึ้นมา

ผมใช้เครื่องมือ Elliptical Maquee Tool

 5) ทำ selection ให้เป็นแบบนี้

 6) เลือกค่ำสั่ง Select > Inverse กด delete หรือ ctrl+x เพื่อลบส่วนที่ไม่ต้องการออกไป

7) กด ctrl+d เพื่อจบการ selcetion แล้วใช้เครื่องมือ จิ้มลงไปในส่วนที่เหลือ

8) ปล่อย selection ให้ค้างไว้อย่างนั้น และสร้างเลเยอร์ใหม่ขึ้นมาดังรูป

แล้วใช้เครื่องมือ Gadient Tool ปรับแต่งดังนี้

 

แท่งที่1ใช้สีดำ , 2ใช้สีขาว , 3ใช้สีขาว , 4ใช้สีขาว เลือกแท่งที่3แล้วปรับค่า Opacity ให้เป็น 0

9) ปรับค่า Opacity ของเลเยอร์ที่สร้างในข้อ8 เป็น 50%

10) เปิดดวงตาแค่เลเยอร์กล่องข้อความ[อันแรกที่สร้างจากข้อ1] , เลเยอร์ข้อความ[ที่สร้างจากข้อ2]

และเลเยอร์ใสกิ้งๆ[ที่สร้างจากข้อ8] ปรับสีตามชอบก็จะได้ประมาณนี้...

ยัง! ยังไม่จบ...

11) มาทำหน้าเว็ปกันต่อเลย สร้างภาพ File > New... [ด้วยสัดส่วน4:3]

12) จัดภาพให้เรียบร้อย สวยงามตามสะดวก..

13) ใช้เครื่องมือ Slice Tool แบ่งภาพเป็นส่วนๆดังรูป

14) คลิ้กขวาบนส่วนที่เราต้องการใส่ลิ้ง เลือกEdit Slice Options... ใส่ลิ้งของท่านลงไป

15) เสร็จเรียบร้อยแล้ว ก็save เลือกFile > Save For Web & Devices...
ก็จะมีหน้าต่างขึ้นมา 1 บาน ให้ปรับแต่งขนาด คุณภาพ นามสกุลไฟล์ (ขนาดเล็กก็โหลดไว ซี้ดไว)

16) เรียบร้อยดี ได้โฟลเดอร์สำหรับภาพที่ตัดเป็นส่วนๆ(เอาไว้ดีงไปใช้แสดงผลหน้าเว็ป)และไฟล์ html เพื่อแสดงผลหน้าเว็ป

17) อัพโฟลเดอร์ images และไฟล์ index.html ลงโฮสของท่านเอง ทีนี้ท่านก็จะได้หน้าเว็ปงามตา(?) ด้วย2มือของท่านเอง โดยไม่ต้องนั่งมึนเวียนหัวกลับโค้ดบลาๆอีกต่อไป เพียงทั่นใช้ Photoshop!!!

ปล.เพียงเชื่อมั่นในPhotoShop(เกือบ)ทุกสิ่งย่อมเป็นไปได้!!!(อีกแล้ว)

ปล2.เอนทรี่ก่อนหน้าเนื้อหาคล้ายๆกัน แต่อันนี้เพิ่มวิธีทำกล่องข้อความไปด้วย

จะได้ครบสูตรไม่ต้องไปอ่านหลายรอบ

 

 

 

 

S2MQ Keep Spinning

เนื่องจากว่าง(อีกแล้ว) เลยเอาวิธีที่ลองศึกษาและแถดิ้นเอาเองเป็นเวลานาน(นิดนึง) มาเผยแพร่ให้ท่านๆได้ดูชมกัน >m<

1) เปิดภาพขึ้น ภาพสัดส่วน4:3กำลังดี ถ้าอยากได้ภาพดีๆแต่ขนาดไม่โดนใจ

ท่านก็cropกันเอาเองตามอรรถภาพนะจ้ะ

2) ทำปุ่มสำหรับกดเข้าลิ้ง หรือที่ภาษาปะกิดเค้าเอ่ยว่า"web button"
ขั้นนี้มันยังไม่เรียกว่าปุ่มจริงๆหรอก มันเป็นแค่ภาพปุ่ม (อย่าเพิ่งงงนะ อาจจะอธิบายมึนๆหน่อย)

3) ลากมาวางไว้ในภาพหลัก จัดวางให้ดูงามตา

4) เลือกเครื่องมือ Slice Tool


5) ใช้ Slice Tool สร้าง selection ลงบนพื้นที่ที่ท่านต้องการ เพื่อสร้างbutton
มันก็จะแบ่งเป้นส่วนๆดังรูป


6) ได้buttonมาแล้ว คลิ้กขวาบนส่วนที่เราต้องการใส่ลิ้ง เลือกEdit Slice Options...

7) ใส่ลิ้งของท่านลงไป


8) เสร็จเรียบร้อยแล้ว ก็save เลือกFile > Save For Web & Devices...
ก็จะมีหน้าต่างขึ้นมา 1 บาน ให้ปรับแต่งขนาด คุณภาพ นามสกุลไฟล์ (ขนาดเล็กก็โหลดไว ซี้ดไว)

9) เรียบร้อยดี ได้โฟลเดอร์สำหรับภาพที่ตัดเป็นส่วนๆ(เอาไว้ดีงไปใช้แสดงผลหน้าเว็ป)และไฟล์ html เพื่อแสดงผลหน้าเว็ป


10) ยัง!!!... ยังไม่เสร็จ เปิดโปรแกรมที่เอาไว้แก้หน้าเว็ปขึ้นมา แนะนำAdobe Dream weaver
เพื่อแก้ข้อความบนหัวเว็ป ดังรูป (ตอนแรกจะเป็น Untitled จะแก้ในPhotoshopทำไงไม่รู้่หมือนกันlol)

11) อัพโฟลเดอร์ images และไฟล์ index.html ลงโฮสของท่านเอง ทีนี้ท่านก็จะได้หน้าเว็ปงามตา(?) ด้วย2มือของท่านเอง โดยไม่ต้องนั่งมึนเวียนหัวกลับโค้ดบลาๆอีกต่อไป เพียงทั่นใช้ Photoshop!!!

ปล.เพียงเชื่อมั่นในPhotoShop(เกือบ)ทุกสิ่งย่อมเป็นไปได้!!!

ปล2.เป็นบทความที่ผมเคยเขียนไว้นานพอควรแล้ว [กินบุญเก่าอีกแล้วตู]

 

 

 

 

S2MQ Keep Spinning